major change
This commit is contained in:
root
@@ -11,6 +11,77 @@
|
||||
<body>
|
||||
<script>if(localStorage.getItem('theme') === 'dark') document.body.classList.add('dark-mode');</script>
|
||||
<div id="toast"></div>
|
||||
|
||||
<!-- Profile Picture Modal -->
|
||||
<div class="modal-overlay" id="profile-pic-modal">
|
||||
<div class="modal-content" style="max-width:420px;">
|
||||
<h3 style="margin-bottom:1rem; font-size:1.1rem;">Profile Picture</h3>
|
||||
<div style="display:flex; flex-direction:column; align-items:center; gap:1rem; margin-bottom:1.5rem;">
|
||||
<?php
|
||||
try { $pdo->exec("ALTER TABLE users ADD COLUMN profile_pic TEXT DEFAULT NULL"); } catch(Exception $e) {}
|
||||
$pic = $current_user['profile_pic'] ?? null;
|
||||
?>
|
||||
<?php if($pic && file_exists($pic)): ?>
|
||||
<img src="<?= htmlspecialchars($pic) ?>" alt="Profile" style="width:100px; height:100px; border-radius:50%; object-fit:cover; border:3px solid var(--primary);">
|
||||
<?php else: ?>
|
||||
<div style="width:100px; height:100px; border-radius:50%; background:var(--primary); display:flex; align-items:center; justify-content:center; font-size:2.5rem; color:#fff; font-weight:700;">
|
||||
<?= strtoupper(mb_substr($current_user['username'],0,1)) ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<form method="POST" enctype="multipart/form-data" style="margin-bottom:1rem;">
|
||||
<input type="hidden" name="upload_profile_pic" value="1">
|
||||
<input type="hidden" name="redirect_to" value="<?= htmlspecialchars($action) ?>">
|
||||
<div class="form-group">
|
||||
<label style="font-size:0.875rem; color:var(--text-light);">Upload New Picture (JPG, PNG, GIF, WebP)</label>
|
||||
<input type="file" name="profile_pic" accept="image/*" class="form-control" style="margin-top:0.5rem;" required>
|
||||
</div>
|
||||
<button type="submit" class="btn" style="width:100%;">Upload Picture</button>
|
||||
</form>
|
||||
<?php if($pic && file_exists($pic)): ?>
|
||||
<form method="POST">
|
||||
<input type="hidden" name="delete_profile_pic" value="1">
|
||||
<input type="hidden" name="redirect_to" value="<?= htmlspecialchars($action) ?>">
|
||||
<button type="submit" class="btn btn-danger" style="width:100%;" onclick="return confirm('Delete profile picture?')">Delete Picture</button>
|
||||
</form>
|
||||
<?php endif; ?>
|
||||
<button class="btn btn-secondary" style="width:100%; margin-top:0.5rem;" onclick="document.getElementById('profile-pic-modal').classList.remove('active')">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Change Password Modal -->
|
||||
<div class="modal-overlay" id="change-pw-modal">
|
||||
<div class="modal-content" style="max-width:400px;">
|
||||
<h3 style="margin-bottom:1rem; font-size:1.1rem;">Change Password</h3>
|
||||
<?php
|
||||
$pw_msg = $_SESSION['pw_change_msg'] ?? null;
|
||||
unset($_SESSION['pw_change_msg']);
|
||||
if ($pw_msg === 'success'): ?>
|
||||
<div class="alert" style="background:rgba(16,185,129,0.12); color:#10B981; border:1px solid #10B981;">Password changed successfully!</div>
|
||||
<?php elseif($pw_msg): ?>
|
||||
<div class="alert"><?= htmlspecialchars($pw_msg) ?></div>
|
||||
<?php endif; ?>
|
||||
<form method="POST">
|
||||
<input type="hidden" name="change_password" value="1">
|
||||
<input type="hidden" name="redirect_to" value="<?= htmlspecialchars($action) ?>">
|
||||
<div class="form-group">
|
||||
<label>Current Password</label>
|
||||
<input type="password" name="current_password" class="form-control" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>New Password</label>
|
||||
<input type="password" name="new_password" class="form-control" required minlength="6">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Confirm New Password</label>
|
||||
<input type="password" name="confirm_password" class="form-control" required minlength="6">
|
||||
</div>
|
||||
<button type="submit" class="btn" style="width:100%;">Change Password</button>
|
||||
</form>
|
||||
<button class="btn btn-secondary" style="width:100%; margin-top:0.5rem;" onclick="document.getElementById('change-pw-modal').classList.remove('active')">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="app-container">
|
||||
<aside class="sidebar">
|
||||
<h2 style="display:flex; align-items:center; gap:8px;">
|
||||
@@ -18,30 +89,81 @@
|
||||
TaskManager
|
||||
</h2>
|
||||
<nav style="display:flex; flex-direction:column; gap:0.5rem;">
|
||||
<a href="?action=dashboard" class="nav-link <?= $action=='dashboard'?'active':'' ?>"> Dashboard</a>
|
||||
<a href="?action=tasks" class="nav-link <?= $action=='tasks'?'active':'' ?>"> Tasks</a>
|
||||
<a href="?action=notes" class="nav-link <?= $action=='notes'?'active':'' ?>"> Notes</a>
|
||||
<a href="?action=passwords" class="nav-link <?= $action=='passwords'?'active':'' ?>"> Passwords</a>
|
||||
<a href="?action=projects" class="nav-link <?= $action=='projects'?'active':'' ?>"> Projects</a>
|
||||
<a href="?action=dashboard" class="nav-link <?= $action=='dashboard'?'active':'' ?>">
|
||||
<span style="display:flex;align-items:center;gap:0.6rem;"><i class="fa fa-gauge-high" style="width:16px;"></i> Dashboard</span>
|
||||
</a>
|
||||
<a href="?action=tasks" class="nav-link <?= $action=='tasks'?'active':'' ?>">
|
||||
<span style="display:flex;align-items:center;gap:0.6rem;"><i class="fa fa-list-check" style="width:16px;"></i> Tasks</span>
|
||||
</a>
|
||||
<a href="?action=notes" class="nav-link <?= $action=='notes'?'active':'' ?>">
|
||||
<span style="display:flex;align-items:center;gap:0.6rem;"><i class="fa fa-note-sticky" style="width:16px;"></i> Notes</span>
|
||||
</a>
|
||||
<a href="?action=passwords" class="nav-link <?= $action=='passwords'?'active':'' ?>">
|
||||
<span style="display:flex;align-items:center;gap:0.6rem;"><i class="fa fa-lock" style="width:16px;"></i> Passwords</span>
|
||||
</a>
|
||||
<a href="?action=projects" class="nav-link <?= $action=='projects'?'active':'' ?>">
|
||||
<span style="display:flex;align-items:center;gap:0.6rem;"><i class="fa fa-folder-open" style="width:16px;"></i> Projects</span>
|
||||
</a>
|
||||
<a href="?action=notifications" class="nav-link <?= $action=='notifications'?'active':'' ?>">
|
||||
Notifications
|
||||
<span style="display:flex;align-items:center;gap:0.6rem;"><i class="fa fa-bell" style="width:16px;"></i> Notifications</span>
|
||||
<?php if($unread_notifications > 0): ?>
|
||||
<span class="badge"><?= $unread_notifications ?></span>
|
||||
<?php endif; ?>
|
||||
</a>
|
||||
<?php if(!empty($_SESSION['is_admin'])): ?>
|
||||
<a href="?action=admin" class="nav-link <?= $action=='admin'?'active':'' ?>"> Admin Panel</a>
|
||||
<a href="?action=admin" class="nav-link <?= $action=='admin'?'active':'' ?>">
|
||||
<span style="display:flex;align-items:center;gap:0.6rem;"><i class="fa fa-shield-halved" style="width:16px;"></i> Admin Panel</span>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</nav>
|
||||
<div style="margin-top:auto; padding-top:1rem; border-top:1px solid var(--border);">
|
||||
<div style="margin-bottom:0.5rem; font-weight:600;"><?= htmlspecialchars($current_user['username']) ?></div>
|
||||
<a href="?action=logout" class="nav-link" style="padding:0; color:var(--text-light);">Logout</a>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main-content">
|
||||
<div style="display:flex; justify-content:flex-end; margin-bottom:1rem;">
|
||||
<button id="theme-toggle" class="btn btn-secondary" style="border-radius:50%; padding:0.5rem; width:40px; height:40px; display:flex; align-items:center; justify-content:center;">
|
||||
<span id="theme-icon-light" style="display:none;"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg></span>
|
||||
<span id="theme-icon-dark" style="display:none;"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg></span>
|
||||
<!-- Top Bar -->
|
||||
<div style="display:flex; justify-content:flex-end; align-items:center; gap:0.75rem; margin-bottom:1.5rem;">
|
||||
<!-- Dark Mode Toggle -->
|
||||
<button id="theme-toggle" class="btn btn-secondary" title="Toggle dark mode" style="border-radius:50%; padding:0; width:38px; height:38px; display:flex; align-items:center; justify-content:center; flex-shrink:0;">
|
||||
<span id="theme-icon-light" style="display:none;"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg></span>
|
||||
<span id="theme-icon-dark" style="display:none;"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg></span>
|
||||
</button>
|
||||
|
||||
<!-- User Avatar Dropdown -->
|
||||
<div class="user-dropdown-wrap" id="user-dropdown-wrap">
|
||||
<button class="user-avatar-btn" id="user-avatar-btn" onclick="toggleUserDropdown()" title="<?= htmlspecialchars($current_user['username']) ?>">
|
||||
<?php
|
||||
try { $pdo->exec("ALTER TABLE users ADD COLUMN profile_pic TEXT DEFAULT NULL"); } catch(Exception $e) {}
|
||||
$pic_top = $current_user['profile_pic'] ?? null;
|
||||
?>
|
||||
<?php if($pic_top && file_exists($pic_top)): ?>
|
||||
<img src="<?= htmlspecialchars($pic_top) ?>?v=<?= time() ?>" alt="avatar" style="width:100%; height:100%; object-fit:cover; border-radius:50%;">
|
||||
<?php else: ?>
|
||||
<?= strtoupper(mb_substr($current_user['username'],0,1)) ?>
|
||||
<?php endif; ?>
|
||||
</button>
|
||||
<div class="user-dropdown-menu" id="user-dropdown-menu">
|
||||
<div class="user-dropdown-header">
|
||||
<div class="user-dropdown-name"><?= htmlspecialchars($current_user['username']) ?></div>
|
||||
<?php if(!empty($_SESSION['is_admin'])): ?>
|
||||
<div class="user-dropdown-role">Administrator</div>
|
||||
<?php else: ?>
|
||||
<div class="user-dropdown-role">Member</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="user-dropdown-divider"></div>
|
||||
<button class="user-dropdown-item" onclick="document.getElementById('profile-pic-modal').classList.add('active'); closeUserDropdown();">
|
||||
<i class="fa fa-image"></i> Set Profile Picture
|
||||
</button>
|
||||
<button class="user-dropdown-item" onclick="document.getElementById('change-pw-modal').classList.add('active'); closeUserDropdown();">
|
||||
<i class="fa fa-key"></i> Change Password
|
||||
</button>
|
||||
<div class="user-dropdown-divider"></div>
|
||||
<a href="?action=logout" class="user-dropdown-item user-dropdown-logout" onclick="return confirm('Logout?')">
|
||||
<i class="fa fa-right-from-bracket"></i> Logout
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php if (isset($pw_msg) && $pw_msg === 'success'): ?>
|
||||
<script>document.addEventListener('DOMContentLoaded',()=>{ document.getElementById('change-pw-modal').classList.add('active'); });</script>
|
||||
<?php elseif(isset($pw_msg) && $pw_msg): ?>
|
||||
<script>document.addEventListener('DOMContentLoaded',()=>{ document.getElementById('change-pw-modal').classList.add('active'); });</script>
|
||||
<?php endif; ?>
|
||||
|
||||
Reference in New Issue
Block a user