File size: 6,939 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 155 156 157 158 159 160 161 162 163 164 165 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Settings - Chat App</title>
<link rel="stylesheet" href="./css/color.css">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/settings.css">
<script src="./js/base.js" defer></script>
<script src="./js/settings.js" defer></script>
</head>
<body>
<div class="main_box">
<div class="settings_box">
<!-- Header Section -->
<div class="header">
<button onclick="goBack()">
<img src="./img/icon/icons8-left-arrow-60.png" alt="Back">
</button>
<h1>Settings</h1>
<div class="menu">
<button onclick="toggleMenu()">
<img src="./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>
</body>
</html> |