197 lines
7.8 KiB
HTML
197 lines
7.8 KiB
HTML
<!-- OnlyPrompt - Settings page:
|
|
- User preferences with tabs for profile, security, and notifications -->
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>OnlyPrompt - Settings</title>
|
|
<link rel="stylesheet" href="../css/variables.css">
|
|
<link rel="stylesheet" href="../css/base.css">
|
|
<link rel="stylesheet" href="../css/sidebar.css">
|
|
<link rel="stylesheet" href="../css/login.css">
|
|
<link rel="stylesheet" href="../css/topbar.css">
|
|
<link rel="stylesheet" href="../css/settings.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
</head>
|
|
<body>
|
|
<div class="layout" style="display: flex; min-height: 100vh; background: var(--bg);">
|
|
|
|
<div id="sidebar-container"></div>
|
|
|
|
<div style="flex:1; display: flex; flex-direction: column;">
|
|
|
|
<div id="topbar-container"></div>
|
|
|
|
<main class="settings-main">
|
|
<div class="settings-container">
|
|
<div class="settings-header">
|
|
<h1>Settings</h1>
|
|
<p>Manage your account preferences and profile.</p>
|
|
</div>
|
|
|
|
<!-- Tabs -->
|
|
<div class="settings-tabs">
|
|
<button class="tab-btn active" data-tab="profile">Profile</button>
|
|
<button class="tab-btn" data-tab="security">Security</button>
|
|
<button class="tab-btn" data-tab="notifications">Notifications</button>
|
|
</div>
|
|
|
|
<!-- Tab Content: Profile -->
|
|
<div id="profileTab" class="tab-content active">
|
|
<form class="settings-form">
|
|
<div class="form-group">
|
|
<label for="avatar">Profile Picture</label>
|
|
<div class="avatar-upload">
|
|
<img src="../images/content/cat.png" alt="Avatar" class="settings-avatar" id="avatarPreview">
|
|
<input type="file" id="avatarUpload" accept="image/png, image/jpeg">
|
|
<button type="button" class="upload-btn">Upload new</button>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="displayName">Display Name</label>
|
|
<input type="text" id="displayName" placeholder="Sunny the Cat">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="username">Username</label>
|
|
<input type="text" id="username" placeholder="@username">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="bio">Bio</label>
|
|
<textarea id="bio" rows="3" placeholder="Tell us about yourself..."></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="email">Email Address</label>
|
|
<input type="email" id="email" placeholder="your@email.com">
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="submit" class="save-btn">Save Changes</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Tab Content: Security -->
|
|
<div id="securityTab" class="tab-content">
|
|
<form class="settings-form">
|
|
<div class="form-group">
|
|
<label for="currentPw">Current Password</label>
|
|
<input type="password" id="currentPw" placeholder="Enter current password">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="newPw">New Password</label>
|
|
<input type="password" id="newPw" placeholder="Enter new password">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="confirmPw">Confirm New Password</label>
|
|
<input type="password" id="confirmPw" placeholder="Confirm new password">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="twoFactor"> Enable Two-Factor Authentication
|
|
</label>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="submit" class="save-btn">Update Password</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Tab Content: Notifications (erweitert) -->
|
|
<div id="notificationsTab" class="tab-content">
|
|
<form class="settings-form">
|
|
<div class="form-group">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="notifLikes"> When someone likes my prompt
|
|
</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="notifSaves"> When someone saves my prompt
|
|
</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="notifMessages"> New message received
|
|
</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="notifFollowers"> New follower
|
|
</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="notifPurchases"> Prompt purchase (paid prompts)
|
|
</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="notifComments"> Comment on my prompt
|
|
</label>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="submit" class="save-btn">Save Preferences</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Tab switching
|
|
const tabBtns = document.querySelectorAll('.tab-btn');
|
|
const tabContents = document.querySelectorAll('.tab-content');
|
|
tabBtns.forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const tabId = btn.getAttribute('data-tab');
|
|
tabBtns.forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
tabContents.forEach(content => content.classList.remove('active'));
|
|
document.getElementById(`${tabId}Tab`).classList.add('active');
|
|
});
|
|
});
|
|
|
|
// Avatar preview (simple)
|
|
const avatarUpload = document.getElementById('avatarUpload');
|
|
const avatarPreview = document.getElementById('avatarPreview');
|
|
if (avatarUpload) {
|
|
avatarUpload.addEventListener('change', function(e) {
|
|
const file = e.target.files[0];
|
|
if (file && (file.type === 'image/png' || file.type === 'image/jpeg')) {
|
|
const reader = new FileReader();
|
|
reader.onload = function(ev) {
|
|
avatarPreview.src = ev.target.result;
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Demo form submits for all forms
|
|
document.querySelectorAll('.settings-form').forEach(form => {
|
|
form.addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
alert('Settings saved (demo)');
|
|
});
|
|
});
|
|
|
|
// Fetch sidebar and topbar
|
|
fetch('../html/sidebar.html')
|
|
.then(r => r.text())
|
|
.then(data => {
|
|
document.getElementById('sidebar-container').innerHTML = data;
|
|
document.querySelectorAll('#sidebar-container .sidebar a').forEach(link => {
|
|
link.classList.remove('active');
|
|
});
|
|
const settingsLink = document.querySelector('#sidebar-container a[href="settings.html"]');
|
|
if (settingsLink) settingsLink.classList.add('active');
|
|
});
|
|
fetch('../html/topbar.html')
|
|
.then(r => r.text())
|
|
.then(data => document.getElementById('topbar-container').innerHTML = data);
|
|
</script>
|
|
</body>
|
|
</html> |