File size: 5,479 Bytes
727a40a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
{% extends './dev.html' %}

{% load static %}

{% block title %}
  Settings | Devnoms
{% endblock %}

{% block style %}
  <link rel="stylesheet" href="{% static 'chat/css/settings.css' %}" />
  <script src="{% static 'chat/js/settings.js' %}" defer></script>
{% endblock %}

{% block content %}
  <div class="main_box">
    <div class="settings_box">
      <!-- Header Section -->
      <div class="header">
        <button onclick="goBack()"><img src="https://pdf813.netlify.app/chat/img/icon/icons8-left-arrow-60.png" alt="Back" /></button>
        <h1>Settings</h1>
        <div class="menu">
          <button onclick="toggleMenu()"><img src="https://pdf813.netlify.app/chat/img/icon/icons8-menu-vertical-50.png" alt="Menu" /></button>
          <div class="dropdown-content" id="dropdown">
            <a href="/edit-profile">Edit Profile</a>
            <a href="/logout">Logout</a>
            <a href="#" class="dark-mode-toggle">Light Mode</a>
          </div>
        </div>
      </div>

      <!-- Privacy Settings -->
      <div class="settings-options">
        <div class="section-title">Privacy Settings</div>
        <div class="settings-option">
          <p class="setting-title">Profile Visibility</p>
          <select id="profile-visibility">
            <option value="public">Public</option>
            <option value="private">Private</option>
          </select>
        </div>
        <div class="settings-option">
          <p class="setting-title">Online Visibility</p>
          <select id="online-visibility">
            <option value="everyone">Everyone</option>
            <option value="friends">Only Friends</option>
            <option value="nobody">Nobody</option>
          </select>
        </div>

        <div class="settings-option">
          <p class="setting-title">Profile Picture Visibility</p>
          <select id="profile-picture-visibility">
            <option value="everyone">Everyone</option>
            <option value="friends">Only Friends</option>
            <option value="nobody">Nobody</option>
          </select>
        </div>
        <div class="settings-option">
          <p class="setting-title">Who Can See Your Last Seen</p>
          <select id="last-seen">
            <option value="everyone">Everyone</option>
            <option value="friends">Friends Only</option>
            <option value="nobody">Nobody</option>
          </select>
        </div>

        <div class="settings-option">
          <p class="setting-title">Show Typing</p>
          <div class="setting-options">
            <label class="switch">
              <input type="checkbox" />
              <span class="slider"></span>
            </label>
          </div>
        </div>

        <!-- Theme Settings -->
        <div class="section-title">Theme Settings</div>
        <div class="settings-option">
          <label for="theme">Theme</label>
          <select id="theme">
            <option value="dark">Dark Mode</option>
            <option value="light">Light Mode</option>
          </select>
        </div>

        <!-- Notifications -->
        <div class="section-title">Notification Settings</div>
        <div class="settings-option">
          <p class="setting-title">Enable Security Notifications</p>
          <div class="setting-options">
            <label class="switch">
              <input type="checkbox" />
              <span class="slider"></span>
            </label>
          </div>
        </div>
        <div class="settings-option">
          <p class="setting-title">Enable Notifications</p>
          <div class="setting-options">
            <label class="switch">
              <input type="checkbox" />
              <span class="slider"></span>
            </label>
          </div>
        </div>
        <div class="settings-option">
          <p class="setting-title">Receive Email Notifications</p>
          <div class="setting-options">
            <label class="switch">
              <input type="checkbox" />
              <span class="slider"></span>
            </label>
          </div>
        </div>

        <!-- Language and Account Settings -->
        <div class="section-title">General Settings</div>
        <div class="settings-option">
          <label for="language">Language</label>
          <select id="language">
            <option value="english">English</option>
            <option value="spanish">Spanish</option>
            <option value="french">French</option>
            <option value="german">German</option>
            <option value="chinese">Chinese</option>
          </select>
        </div>
        <!-- Account Settings -->
        <div class="section-title">Account Settings</div>
        <div class="settings-option">
          <p class="setting-title">Deactivate Account</p>
          <button class="btn">Deactivate</button>
        </div>
        <div class="settings-option">
          <p class="setting-title">Delete Account</p>
          <button class="btn">Delete</button>
        </div>
        <!-- App Updates -->
        <div class="section-title">App Settings</div>
        <div class="settings-option">
          <p class="setting-title">Enable Auto Updates</p>
          <div class="setting-options">
            <label class="switch">
              <input type="checkbox" />
              <span class="slider"></span>
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}