Ar-ab/settings.html at main · 739900111999abwbkt/Ar-ab · 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
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>الإعدادات</title>
  <link rel="stylesheet" href="../assets/style.css">
</head>
<body>
  <div class="settings-container">
    <h2>⚙️ الإعدادات</h2>

    <div class="setting">
      <label>الاسم:</label>
      <input type="text" id="username" placeholder="اسم المستخدم">
    </div>

    <div class="setting">
      <label>الخلفية:</label>
      <select id="bg-select">
        <option value="">اختر الخلفية</option>
        <option value="light">فاتحة</option>
        <option value="dark">داكنة</option>
        <option value="custom">مخصصة</option>
      </select>
    </div>

    <div class="setting">
      <label>اللغة:</label>
      <select id="lang-select">
        <option value="ar">العربية</option>
        <option value="en">English</option>
      </select>
    </div>

    <div class="actions">
      <button onclick="saveSettings()">💾 حفظ</button>
      <button onclick="goBack()">↩️ رجوع</button>
    </div>
  </div>

  <script>
    function saveSettings() {
      const name = document.getElementById("username").value;
      const bg = document.getElementById("bg-select").value;
      const lang = document.getElementById("lang-select").value;

      localStorage.setItem("user_name", name);
      localStorage.setItem("background", bg);
      localStorage.setItem("language", lang);

      alert("تم حفظ الإعدادات ✅");
    }

    function goBack() {
      window.history.back();
    }

    // تحميل الإعدادات السابقة
    window.onload = () => {
      document.getElementById("username").value = localStorage.getItem("user_name") || "";
      document.getElementById("bg-select").value = localStorage.getItem("background") || "";
      document.getElementById("lang-select").value = localStorage.getItem("language") || "ar";
    };
  </script>
</body>
</html>