Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <title>Settings - WhatsApp Clone</title> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet"> | |
| </head> | |
| <body class="settings-page"> | |
| <div class="container mt-4"> | |
| <div class="row justify-content-center"> | |
| <div class="col-md-8 col-lg-6"> | |
| <div class="card"> | |
| <div class="card-header d-flex align-items-center"> | |
| <a href="/chat" class="btn btn-link text-decoration-none me-3"> | |
| <i class="fas fa-arrow-left"></i> | |
| </a> | |
| <h4 class="mb-0">Settings</h4> | |
| </div> | |
| <div class="card-body"> | |
| <div class="text-center mb-4"> | |
| <div class="avatar-large bg-success mx-auto mb-3"> | |
| {{ user.name[0].upper() }} | |
| </div> | |
| <h5>{{ user.name }}</h5> | |
| <p class="text-muted">{{ user.email }}</p> | |
| </div> | |
| <div class="settings-section"> | |
| <h6 class="text-muted mb-3">Account Information</h6> | |
| <div class="setting-item"> | |
| <div class="d-flex align-items-center justify-content-between"> | |
| <div> | |
| <div class="fw-bold">Unique ID</div> | |
| <small class="text-muted">Share this ID with others to connect</small> | |
| </div> | |
| <div class="d-flex align-items-center"> | |
| <code id="uniqueId" class="me-2">{{ user.unique_id }}</code> | |
| <button class="btn btn-sm btn-outline-success" onclick="copyUniqueId()"> | |
| <i class="fas fa-copy"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="setting-item"> | |
| <div class="d-flex align-items-center justify-content-between"> | |
| <div> | |
| <div class="fw-bold">Name</div> | |
| <small class="text-muted">{{ user.name }}</small> | |
| </div> | |
| <i class="fas fa-user text-muted"></i> | |
| </div> | |
| </div> | |
| <div class="setting-item"> | |
| <div class="d-flex align-items-center justify-content-between"> | |
| <div> | |
| <div class="fw-bold">Email</div> | |
| <small class="text-muted">{{ user.email }}</small> | |
| </div> | |
| <i class="fas fa-envelope text-muted"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="settings-section"> | |
| <h6 class="text-muted mb-3">Features</h6> | |
| <div class="setting-item"> | |
| <div class="d-flex align-items-center justify-content-between"> | |
| <div> | |
| <div class="fw-bold">File Sharing</div> | |
| <small class="text-muted">Share documents, images, and files</small> | |
| </div> | |
| <i class="fas fa-file text-muted"></i> | |
| </div> | |
| </div> | |
| <div class="setting-item"> | |
| <div class="d-flex align-items-center justify-content-between"> | |
| <div> | |
| <div class="fw-bold">Voice Messages</div> | |
| <small class="text-muted">Record and send audio messages</small> | |
| </div> | |
| <i class="fas fa-microphone text-muted"></i> | |
| </div> | |
| </div> | |
| <div class="setting-item"> | |
| <div class="d-flex align-items-center justify-content-between"> | |
| <div> | |
| <div class="fw-bold">Privacy</div> | |
| <small class="text-muted">Manage your privacy settings</small> | |
| </div> | |
| <i class="fas fa-shield-alt text-muted"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="d-grid gap-2 mt-4"> | |
| <a href="/chat" class="btn btn-success"> | |
| <i class="fas fa-arrow-left me-2"></i>Back to Chat | |
| </a> | |
| <a href="/logout" class="btn btn-outline-danger"> | |
| <i class="fas fa-sign-out-alt me-2"></i>Logout | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Toast for copy confirmation --> | |
| <div class="toast-container position-fixed top-0 end-0 p-3"> | |
| <div id="copyToast" class="toast" role="alert"> | |
| <div class="toast-header"> | |
| <i class="fas fa-check-circle text-success me-2"></i> | |
| <strong class="me-auto">Copied!</strong> | |
| <button type="button" class="btn-close" data-bs-dismiss="toast"></button> | |
| </div> | |
| <div class="toast-body"> | |
| Unique ID copied to clipboard | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> | |
| <script> | |
| function copyUniqueId() { | |
| const uniqueId = document.getElementById('uniqueId').textContent; | |
| navigator.clipboard.writeText(uniqueId).then(() => { | |
| const toast = new bootstrap.Toast(document.getElementById('copyToast')); | |
| toast.show(); | |
| }).catch(err => { | |
| console.error('Failed to copy: ', err); | |
| // Fallback for older browsers | |
| const textArea = document.createElement('textarea'); | |
| textArea.value = uniqueId; | |
| document.body.appendChild(textArea); | |
| textArea.select(); | |
| document.execCommand('copy'); | |
| document.body.removeChild(textArea); | |
| const toast = new bootstrap.Toast(document.getElementById('copyToast')); | |
| toast.show(); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> | |