Spaces:
Sleeping
Sleeping
File size: 7,995 Bytes
d6bb550 |
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 |
<!DOCTYPE html>
<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>
|