ProSCHolarTools./contact.html at main · rogaareef/ProSCHolarTools. · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>اتصل بنا | ProGlobal Tools</title>
    <meta name="description" content="تواصل مع فريق ProGlobal Tools للدعم الفني والاستفسارات والاقتراحات">
    <link rel="canonical" href="https://proscholartools.com/contact.html">

    <style>
        :root{--primary:#38bdf8;--bg:#0f172a;--text:#f8fafc;--card:rgba(30,41,59,0.8)}
        *{margin:0;padding:0;box-sizing:border-box}
        body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
        .container{max-width:800px;margin:0 auto;padding:40px 20px}
        .back-link{color:var(--primary);text-decoration:none;display:inline-block;margin-bottom:20px}
        h1{margin-bottom:10px}
        .contact-form{background:var(--card);padding:30px;border-radius:16px;margin-top:30px;border:1px solid rgba(255,255,255,0.1)}
        .form-group{margin-bottom:20px}
        label{display:block;margin-bottom:8px;color:#94a3b8}
        input,textarea,select{width:100%;padding:12px;background:rgba(0,0,0,0.3);border:1px solid rgba(148,163,184,0.2);border-radius:8px;color:white;font-family:inherit}
        input:focus,textarea:focus{border-color:var(--primary);outline:none}
        textarea{min-height:150px;resize:vertical}
        button{background:var(--primary);color:#000;padding:14px 32px;border:none;border-radius:8px;font-weight:700;cursor:pointer;width:100%;font-size:1.1rem}
        button:hover{opacity:0.9}
        .info-box{background:rgba(56,189,248,0.1);border-right:4px solid var(--primary);padding:20px;margin-bottom:30px;border-radius:8px}
        .success-msg{display:none;background:rgba(34,197,94,0.2);color:#4ade80;padding:15px;border-radius:8px;margin-top:20px;text-align:center}
    </style>
</head>
<body>
    <div class="container">
        <a href="/" class="back-link">← العودة للرئيسية</a>

        <h1>اتصل بنا</h1>
        <p style="color:#94a3b8">نحن هنا لمساعدتك. أرسل لنا استفسارك وسنرد في غضون 24 ساعة.</p>

        <div class="info-box">
            <strong>📧 البريد الإلكتروني:</strong> support@proscholartools.com<br>
            <strong>⏰ ساعات العمل:</strong> الأحد - الخميس (9:00 ص - 5:00 م)
        </div>

        <form class="contact-form" id="contactForm" onsubmit="handleSubmit(event)">
            <div class="form-group">
                <label for="name">الاسم الكامل *</label>
                <input type="text" id="name" name="name" required placeholder="محمد أحمد">
            </div>

            <div class="form-group">
                <label for="email">البريد الإلكتروني *</label>
                <input type="email" id="email" name="email" required placeholder="example@email.com">
            </div>

            <div class="form-group">
                <label for="subject">الموضوع *</label>
                <select id="subject" name="subject" required>
                    <option value="">اختر الموضوع...</option>
                    <option value="support">دعم فني</option>
                    <option value="ads">استفسار عن الإعلانات</option>
                    <option value="suggestion">اقتراح تحسين</option>
                    <option value="bug">إبلاغ عن خطأ</option>
                    <option value="other">أخرى</option>
                </select>
            </div>

            <div class="form-group">
                <label for="message">الرسالة *</label>
                <textarea id="message" name="message" required placeholder="اكتب رسالتك بالتفصيل هنا..."></textarea>
            </div>

            <button type="submit">إرسال الرسالة</button>

            <div class="success-msg" id="successMsg">
                ✅ تم إرسال رسالتك بنجاح! سنرد عليك في أقرب وقت.
            </div>
        </form>
    </div>

    <script>
        function handleSubmit(e) {
            e.preventDefault();
            // هنا يمكنك إضافة كود إرسال الفورم إلى backend أو Formspree أو EmailJS
            document.getElementById('successMsg').style.display = 'block';
            document.getElementById('contactForm').reset();
            setTimeout(() => {
                document.getElementById('successMsg').style.display = 'none';
            }, 5000);
        }
    </script>
</body>
</html>