Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"/> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>Pockit | Dashboard</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/> | |
| <style> | |
| * { margin:0; padding:0; box-sizing:border-box; font-family:'Inter',sans-serif; } | |
| body { color:#1a1a2e; line-height:1.6; overflow-x:hidden; min-height:100vh; } | |
| .bg-layer { | |
| position:fixed; top:0; left:0; width:100%; height:100%; | |
| background-image:url(bg2.png); | |
| background-size:cover; background-position:center; | |
| background-attachment:fixed; | |
| z-index:-1; | |
| } | |
| .bg-layer::after { | |
| content:''; position:absolute; inset:0; | |
| background:rgba(255,255,255,0.72); | |
| } | |
| /* ── TOPBAR ── */ | |
| .topbar { | |
| position:sticky; top:0; z-index:100; | |
| height:66px; display:flex; align-items:center; justify-content:space-between; | |
| padding:0 40px; | |
| background:rgba(255,255,255,0.7); backdrop-filter:blur(18px); | |
| border-bottom:1px solid rgba(0,0,0,0.08); | |
| } | |
| .topbar-brand img { height:38px; width:auto; display:block; } | |
| .topbar-brand .fb { font-size:1.3em; font-weight:700; letter-spacing:-.5px; } | |
| .topbar-center { flex:1; display:flex; justify-content:center; } | |
| .search-wrap { position:relative; width:min(360px,100%); } | |
| .search-wrap i { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:rgba(0,0,0,.35); font-size:.84em; } | |
| .search-wrap input { | |
| width:100%; background:rgba(255,255,255,0.7); border:1px solid rgba(0,0,0,0.12); | |
| border-radius:8px; padding:9px 16px 9px 38px; | |
| font-size:.85em; color:#1a1a2e; outline:none; | |
| backdrop-filter:blur(10px); transition:border-color .2s, box-shadow .2s; | |
| } | |
| .search-wrap input::placeholder { color:rgba(0,0,0,.3); } | |
| .search-wrap input:focus { border-color:rgba(0,0,0,.28); box-shadow:0 0 0 3px rgba(0,0,0,.05); } | |
| .topbar-right { display:flex; align-items:center; gap:12px; } | |
| .account-chip { | |
| display:flex; align-items:center; gap:10px; | |
| background:rgba(255,255,255,0.7); border:1px solid rgba(0,0,0,0.12); | |
| border-radius:8px; padding:6px 14px 6px 6px; | |
| cursor:pointer; backdrop-filter:blur(10px); transition:border-color .2s; | |
| } | |
| .account-chip:hover { border-color:rgba(0,0,0,.28); } | |
| .avatar { | |
| width:32px; height:32px; border-radius:6px; | |
| background:#1a1a2e; color:#fff; | |
| display:flex; align-items:center; justify-content:center; | |
| font-weight:700; font-size:.72em; | |
| } | |
| .account-name { font-size:.84em; font-weight:600; } | |
| .role-tag { | |
| font-size:.62em; font-weight:700; text-transform:uppercase; letter-spacing:1px; | |
| padding:2px 8px; border-radius:4px; | |
| } | |
| .role-tag.free { background:rgba(0,0,0,.06); color:#666; border:1px solid rgba(0,0,0,.15); } | |
| .role-tag.tester { background:rgba(180,120,0,.1); color:#a07800; border:1px solid rgba(180,120,0,.3); } | |
| .role-tag.pro { background:rgba(0,0,0,.08); color:#1a1a2e; border:1px solid rgba(0,0,0,.25); } | |
| .role-tag.dev { background:rgba(0,140,80,.1); color:#007a45; border:1px solid rgba(0,140,80,.3); } | |
| /* ── LAYOUT ── */ | |
| .body-wrap { display:flex; min-height:calc(100vh - 66px); } | |
| /* ── SIDEBAR ── */ | |
| .sidebar { | |
| width:218px; flex-shrink:0; | |
| background:rgba(255,255,255,0.55); backdrop-filter:blur(18px); | |
| border-right:1px solid rgba(0,0,0,0.08); | |
| padding:22px 0; display:flex; flex-direction:column; gap:2px; | |
| } | |
| .nav-section { | |
| font-size:.6em; font-weight:700; text-transform:uppercase; | |
| letter-spacing:2px; color:rgba(0,0,0,.3); padding:14px 20px 4px; | |
| } | |
| .nav-item { | |
| display:flex; align-items:center; gap:11px; | |
| padding:10px 20px; font-size:.86em; font-weight:500; | |
| color:rgba(0,0,0,.45); cursor:pointer; | |
| border-left:3px solid transparent; transition:all .18s; user-select:none; | |
| } | |
| .nav-item i { width:17px; text-align:center; font-size:.9em; } | |
| .nav-item:hover { background:rgba(0,0,0,.05); color:#1a1a2e; } | |
| .nav-item.active { background:rgba(0,0,0,.07); color:#1a1a2e; border-left-color:#1a1a2e; } | |
| .sidebar-storage { | |
| margin-top:auto; padding:18px 20px; | |
| border-top:1px solid rgba(0,0,0,.08); | |
| } | |
| .stor-label { display:flex; justify-content:space-between; font-size:.72em; color:rgba(0,0,0,.4); margin-bottom:8px; } | |
| .sbar { height:4px; background:rgba(0,0,0,.1); border-radius:10px; overflow:hidden; } | |
| .sbar-fill { height:100%; border-radius:10px; background:#1a1a2e; width:36%; } | |
| /* ── MAIN ── */ | |
| .main { flex:1; overflow-y:auto; padding:36px 40px; display:flex; flex-direction:column; gap:28px; } | |
| /* ── STATS ── */ | |
| .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:24px; } | |
| .card { | |
| background:rgba(255,255,255,0.65); padding:30px; border-radius:16px; | |
| border:1px solid rgba(0,0,0,0.08); backdrop-filter:blur(10px); | |
| transition:border-color .2s, transform .2s; | |
| } | |
| .card:hover { border-color:rgba(0,0,0,.18); transform:translateY(-2px); } | |
| .card-label { font-size:.68em; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:rgba(0,0,0,.4); margin-bottom:6px; } | |
| .card-val { font-size:2.2em; font-weight:700; line-height:1; } | |
| .card-sub { font-size:.74em; color:rgba(0,0,0,.38); margin-top:4px; } | |
| .card-bar { height:4px; background:rgba(0,0,0,.08); border-radius:10px; overflow:hidden; margin-top:14px; } | |
| .card-bar-fill { height:100%; border-radius:10px; background:#1a1a2e; } | |
| /* ── UPLOAD ZONE ── */ | |
| .drop-zone { | |
| border:2px dashed rgba(0,0,0,0.15); border-radius:16px; padding:30px; | |
| text-align:center; cursor:pointer; | |
| background:rgba(255,255,255,0.5); backdrop-filter:blur(10px); transition:all .2s; | |
| } | |
| .drop-zone:hover, .drop-zone.drag { border-color:rgba(0,0,0,.4); background:rgba(255,255,255,.7); } | |
| .drop-zone input { display:none; } | |
| .drop-zone i { font-size:2em; color:rgba(0,0,0,.4); margin-bottom:10px; display:block; } | |
| .dz-text { font-size:.88em; color:rgba(0,0,0,.45); } | |
| .dz-text strong { color:#1a1a2e; } | |
| /* ── TOOLBAR ── */ | |
| .toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } | |
| .toolbar-title { font-size:1.1em; font-weight:700; margin-right:auto; text-shadow:none; } | |
| /* match landing page .btn */ | |
| .btn { | |
| display:inline-flex; align-items:center; gap:7px; | |
| padding:10px 22px; background:#1a1a2e; color:#fff; border-radius:8px; | |
| font-family:'Inter',sans-serif; font-size:.83em; font-weight:700; | |
| cursor:pointer; border:none; text-decoration:none; | |
| transition:background .2s, transform .15s; | |
| } | |
| .btn:hover { background:#2e2e4e; } | |
| .btn-ghost { | |
| background:rgba(255,255,255,0.6); color:#1a1a2e; | |
| border:1px solid rgba(0,0,0,0.15); backdrop-filter:blur(10px); | |
| } | |
| .btn-ghost:hover { background:rgba(255,255,255,.85); border-color:rgba(0,0,0,.28); } | |
| .btn-danger { | |
| background:rgba(200,30,30,.08); color:#b22222; | |
| border:1px solid rgba(200,30,30,.22); backdrop-filter:blur(10px); | |
| } | |
| .btn-danger:hover { background:rgba(200,30,30,.16); } | |
| .view-toggle { | |
| display:flex; background:rgba(255,255,255,0.6); | |
| border:1px solid rgba(0,0,0,0.12); border-radius:8px; overflow:hidden; | |
| backdrop-filter:blur(10px); | |
| } | |
| .view-toggle button { | |
| background:none; border:none; color:rgba(0,0,0,.4); | |
| padding:8px 13px; cursor:pointer; font-size:.83em; transition:all .18s; | |
| } | |
| .view-toggle button.active { background:rgba(0,0,0,.12); color:#1a1a2e; } | |
| /* ── FILE GRID ── */ | |
| .file-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px; } | |
| .file-card { | |
| background:rgba(255,255,255,0.65); border:1px solid rgba(0,0,0,0.08); | |
| border-radius:16px; padding:20px 14px 16px; | |
| display:flex; flex-direction:column; align-items:center; gap:10px; | |
| cursor:pointer; backdrop-filter:blur(10px); | |
| transition:all .2s; position:relative; user-select:none; | |
| } | |
| .file-card:hover { border-color:rgba(0,0,0,.22); transform:translateY(-3px); box-shadow:0 10px 28px rgba(0,0,0,.12); } | |
| .file-card.selected { border-color:#1a1a2e; background:rgba(26,26,46,.06); } | |
| .fc-check { | |
| position:absolute; top:9px; right:9px; | |
| width:18px; height:18px; border-radius:4px; | |
| background:rgba(0,0,0,.06); border:1.5px solid rgba(0,0,0,.2); | |
| display:flex; align-items:center; justify-content:center; | |
| font-size:.6em; transition:all .18s; color:#fff; | |
| } | |
| .file-card.selected .fc-check { background:#1a1a2e; border-color:#1a1a2e; } | |
| .fc-icon { font-size:2.6em; line-height:1; } | |
| .fc-name { font-size:.74em; font-weight:600; text-align:center; word-break:break-all; } | |
| .fc-meta { font-size:.67em; color:rgba(0,0,0,.38); } | |
| /* ── FILE TABLE (styled like landing comparison) ── */ | |
| .comparison-wrapper { overflow-x:auto; } | |
| .comparison { | |
| width:100%; border-collapse:collapse; | |
| background:rgba(255,255,255,0.65); border-radius:16px; overflow:hidden; | |
| backdrop-filter:blur(10px); | |
| } | |
| .comparison th, .comparison td { | |
| padding:18px 22px; border-bottom:1px solid rgba(0,0,0,0.07); text-align:left; | |
| } | |
| .comparison th { color:rgba(0,0,0,.4); font-weight:600; font-size:.72em; text-transform:uppercase; letter-spacing:1px; background:rgba(0,0,0,.03); } | |
| .comparison tbody tr { transition:background .15s; cursor:pointer; } | |
| .comparison tbody tr:last-child td { border-bottom:none; } | |
| .comparison tbody tr:hover { background:rgba(0,0,0,.04); } | |
| .td-name { display:flex; align-items:center; gap:10px; font-weight:600; font-size:.88em; } | |
| .td-muted { color:rgba(0,0,0,.42); font-size:.83em; } | |
| .td-actions { text-align:right; white-space:nowrap; } | |
| .tbl-btn { background:none; border:none; color:rgba(0,0,0,.28); padding:5px 8px; border-radius:6px; cursor:pointer; font-size:.88em; transition:all .15s; } | |
| .tbl-btn:hover { background:rgba(0,0,0,.06); color:#1a1a2e; } | |
| .tbl-btn.del:hover { color:#b22222; } | |
| /* ── PREVIEW PANE ── */ | |
| .preview-pane { | |
| width:230px; flex-shrink:0; | |
| background:rgba(255,255,255,0.55); backdrop-filter:blur(18px); | |
| border-left:1px solid rgba(0,0,0,.08); | |
| padding:24px 18px; display:flex; flex-direction:column; gap:16px; overflow-y:auto; | |
| } | |
| .preview-head { font-size:.6em; font-weight:700; text-transform:uppercase; letter-spacing:2px; color:rgba(0,0,0,.3); } | |
| .preview-thumb { | |
| aspect-ratio:1; width:100%; border-radius:12px; | |
| background:rgba(0,0,0,0.05); border:1px solid rgba(0,0,0,0.08); | |
| display:flex; align-items:center; justify-content:center; font-size:3em; backdrop-filter:blur(8px); | |
| } | |
| .preview-filename { font-size:.83em; font-weight:600; word-break:break-all; text-align:center; line-height:1.4; } | |
| .preview-row { display:flex; justify-content:space-between; font-size:.75em; padding:7px 0; border-bottom:1px solid rgba(0,0,0,.07); } | |
| .preview-row:last-of-type { border-bottom:none; } | |
| .preview-row span:first-child { color:rgba(0,0,0,.38); } | |
| .preview-actions { display:flex; flex-direction:column; gap:8px; margin-top:4px; } | |
| .preview-actions .btn { border-radius:8px; justify-content:center; font-size:.78em; } | |
| /* ── MODAL ── */ | |
| .modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.25); backdrop-filter:blur(10px); z-index:200; display:none; align-items:center; justify-content:center; } | |
| .modal-bg.open { display:flex; } | |
| .modal-box { | |
| background:rgba(255,255,255,0.88); backdrop-filter:blur(24px); | |
| border:1px solid rgba(0,0,0,0.1); border-radius:16px; padding:32px; | |
| width:min(400px,90vw); display:flex; flex-direction:column; gap:18px; | |
| } | |
| .modal-head { display:flex; align-items:center; gap:10px; font-size:1.1em; font-weight:700; color:#1a1a2e; } | |
| .modal-close { margin-left:auto; background:none; border:none; color:rgba(0,0,0,.35); cursor:pointer; font-size:1em; padding:4px 8px; border-radius:6px; transition:all .15s; } | |
| .modal-close:hover { background:rgba(0,0,0,.07); color:#1a1a2e; } | |
| .modal-input-wrap label { display:block; font-size:.72em; font-weight:600; color:rgba(0,0,0,.4); margin-bottom:7px; text-transform:uppercase; letter-spacing:.8px; } | |
| .modal-input-wrap input { | |
| width:100%; background:rgba(255,255,255,0.8); border:1px solid rgba(0,0,0,.14); | |
| border-radius:8px; padding:11px 14px; color:#1a1a2e; | |
| font-size:.86em; outline:none; backdrop-filter:blur(8px); transition:border-color .2s; | |
| } | |
| .modal-input-wrap input:focus { border-color:rgba(0,0,0,.35); } | |
| .modal-actions { display:flex; gap:10px; margin-top:4px; } | |
| .modal-actions .btn { flex:1; border-radius:8px; justify-content:center; } | |
| /* ── TOAST ── */ | |
| .toast { | |
| position:fixed; bottom:28px; right:28px; | |
| background:rgba(255,255,255,0.9); backdrop-filter:blur(16px); | |
| border:1px solid rgba(0,0,0,.1); border-radius:10px; | |
| padding:12px 20px; display:flex; align-items:center; gap:10px; font-size:.84em; color:#1a1a2e; | |
| transform:translateY(70px); opacity:0; | |
| transition:all .35s cubic-bezier(.34,1.56,.64,1); z-index:500; | |
| box-shadow:0 8px 24px rgba(0,0,0,.12); | |
| } | |
| .toast.show { transform:none; opacity:1; } | |
| .toast i { color:#007a45; } | |
| /* ── LOADER ── */ | |
| .loader-overlay { position:fixed; inset:0; background:rgba(255,255,255,.45); backdrop-filter:blur(6px); z-index:900; display:none; align-items:center; justify-content:center; } | |
| .loader-overlay.on { display:flex; } | |
| .spinner { width:42px; height:42px; border:3px solid rgba(0,0,0,.1); border-top-color:#1a1a2e; border-radius:50%; animation:spin .65s linear infinite; } | |
| @keyframes spin { to { transform:rotate(360deg); } } | |
| /* ── RESPONSIVE ── */ | |
| @media(max-width:960px) { | |
| .sidebar { width:54px; } | |
| .nav-section,.nav-item span,.sidebar-storage { display:none; } | |
| .nav-item { justify-content:center; padding:13px; } | |
| .preview-pane { display:none; } | |
| .topbar-center { display:none; } | |
| } | |
| @media(max-width:640px) { | |
| .main { padding:22px 18px; gap:20px; } | |
| .grid { grid-template-columns:1fr 1fr; } | |
| .file-grid { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); } | |
| .topbar { padding:0 18px; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="bg-layer"></div> | |
| <!-- TOPBAR --> | |
| <header class="topbar"> | |
| <div class="topbar-brand"> | |
| <img src="logo.png" alt="Pockit" | |
| onerror="this.style.display='none';document.getElementById('logo-fb').style.display='block'"/> | |
| <span id="logo-fb" style="display:none;" class="fb">Pockit.</span> | |
| </div> | |
| <div class="topbar-center"> | |
| <div class="search-wrap"> | |
| <i class="fa-solid fa-magnifying-glass"></i> | |
| <input type="text" placeholder="Search files…" oninput="filterFiles(this.value)"/> | |
| </div> | |
| </div> | |
| <div class="topbar-right"> | |
| <div class="account-chip" title="Account"> | |
| <div class="avatar">JD</div> | |
| <span class="account-name">user</span> | |
| <span class="role-tag pro" id="role-tag">Pro</span> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="body-wrap"> | |
| <!-- SIDEBAR --> | |
| <nav class="sidebar"> | |
| <span class="nav-section">Storage</span> | |
| <div class="nav-item active" onclick="setNav(this,'all')"> | |
| <i class="fa-solid fa-folder-open"></i><span>My Files</span> | |
| </div> | |
| <div class="nav-item" onclick="setNav(this,'recent')"> | |
| <i class="fa-solid fa-clock-rotate-left"></i><span>Recent</span> | |
| </div> | |
| <span class="nav-section">Account</span> | |
| <div class="nav-item" onclick="openModal('pw-modal')"> | |
| <i class="fa-solid fa-key"></i><span>Change Password</span> | |
| </div> | |
| <div class="nav-item" onclick="logoutUser()"> | |
| <i class="fa-solid fa-right-from-bracket"></i><span>Logout</span> | |
| </div> | |
| <div class="sidebar-storage"> | |
| <div class="stor-label"><span>Storage</span><span>1.8 / 5 GB</span></div> | |
| <div class="sbar"><div class="sbar-fill"></div></div> | |
| </div> | |
| </nav> | |
| <!-- MAIN --> | |
| <main class="main"> | |
| <!-- Stats Cards --> | |
| <div class="grid"> | |
| <div class="card"> | |
| <div class="card-label">Storage Used</div> | |
| <div class="card-val">1.8 <span style="font-size:.38em;font-weight:400;color:rgba(0,0,0,.38)">GB</span></div> | |
| <div class="card-bar"><div class="card-bar-fill" style="width:36%"></div></div> | |
| <div class="card-sub">36% of 5 GB used</div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-label">Total Files</div> | |
| <div class="card-val">12</div> | |
| <div class="card-sub">Across 5 file types</div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-label">Uploaded Today</div> | |
| <div class="card-val">3</div> | |
| <div class="card-sub">Last upload 2h ago</div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-label">Account Tier</div> | |
| <div class="card-val" id="tier-val">Pro</div> | |
| <div class="card-sub">5 GB max capacity</div> | |
| </div> | |
| </div> | |
| <!-- Upload Drop Zone --> | |
| <label class="drop-zone" id="drop-zone" | |
| ondragover="event.preventDefault();this.classList.add('drag')" | |
| ondragleave="this.classList.remove('drag')" | |
| ondrop="handleDrop(event)"> | |
| <input type="file" id="file-input" onchange="handleUpload(this)"/> | |
| <i class="fa-solid fa-cloud-arrow-up"></i> | |
| <div class="dz-text"> | |
| <strong>Drop files here</strong> or click to upload<br/> | |
| <span style="font-size:.82em;color:rgba(0,0,0,.3)">Supports any file type</span> | |
| </div> | |
| </label> | |
| <!-- Toolbar --> | |
| <div class="toolbar"> | |
| <span class="toolbar-title" id="page-title">My Files</span> | |
| <div class="view-toggle"> | |
| <button class="active" id="vt-grid" onclick="setView('grid')"><i class="fa-solid fa-table-cells"></i></button> | |
| <button id="vt-list" onclick="setView('list')"><i class="fa-solid fa-list"></i></button> | |
| </div> | |
| <button class="btn btn-ghost" style="padding:9px 15px;font-size:.82em;" onclick="clearSelection()"> | |
| <i class="fa-regular fa-square"></i> Deselect | |
| </button> | |
| <button class="btn btn-danger" style="padding:9px 15px;font-size:.82em;" onclick="deleteSelected()"> | |
| <i class="fa-solid fa-trash"></i> Delete | |
| </button> | |
| <label class="btn" style="padding:10px 22px;font-size:.83em;" for="file-input"> | |
| <i class="fa-solid fa-plus"></i> Upload | |
| </label> | |
| </div> | |
| <!-- File Grid --> | |
| <div class="file-grid" id="file-grid"></div> | |
| <!-- File Table --> | |
| <div class="comparison-wrapper" id="file-table-wrap" style="display:none;"> | |
| <table class="comparison"> | |
| <thead> | |
| <tr><th>Name</th><th>Size</th><th>Modified</th><th>Type</th><th>Actions</th></tr> | |
| </thead> | |
| <tbody id="file-tbody"></tbody> | |
| </table> | |
| </div> | |
| </main> | |
| <!-- PREVIEW PANE --> | |
| <aside class="preview-pane"> | |
| <div class="preview-head">File Info</div> | |
| <div class="preview-thumb" id="preview-thumb"> | |
| <i class="fa-regular fa-file" style="font-size:.7em;color:rgba(0,0,0,.2);"></i> | |
| </div> | |
| <div class="preview-filename" id="preview-name" style="color:rgba(0,0,0,.3);">Select a file</div> | |
| <div> | |
| <div class="preview-row"><span>Size</span><span id="pv-size">—</span></div> | |
| <div class="preview-row"><span>Modified</span><span id="pv-date">—</span></div> | |
| <div class="preview-row"><span>Type</span><span id="pv-type">—</span></div> | |
| </div> | |
| <div class="preview-actions"> | |
| <button class="btn btn-ghost" style="font-size:.78em;" onclick="downloadPreviewFile()"><i class="fa-solid fa-download"></i> Download</button> | |
| <button class="btn btn-danger" style="font-size:.78em;" onclick="deletePreviewFile()"><i class="fa-solid fa-trash"></i> Delete</button> | |
| </div> | |
| </aside> | |
| </div> | |
| <!-- CHANGE PASSWORD MODAL --> | |
| <div class="modal-bg" id="pw-modal"> | |
| <div class="modal-box"> | |
| <div class="modal-head"> | |
| <i class="fa-solid fa-key"></i> Change Password | |
| <button class="modal-close" onclick="closeModal('pw-modal')"><i class="fa-solid fa-xmark"></i></button> | |
| </div> | |
| <div class="modal-input-wrap"> | |
| <label>New Password</label> | |
| <input type="password" id="new-pw" placeholder="Enter new password"/> | |
| </div> | |
| <div class="modal-input-wrap"> | |
| <label>Confirm Password</label> | |
| <input type="password" id="conf-pw" placeholder="Confirm new password"/> | |
| </div> | |
| <div class="modal-actions"> | |
| <button class="btn btn-ghost" onclick="closeModal('pw-modal')">Cancel</button> | |
| <button class="btn" onclick="changePassword()">Update</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- TOAST --> | |
| <div class="toast" id="toast"> | |
| <i class="fa-solid fa-circle-check"></i> | |
| <span id="toast-msg">Done.</span> | |
| </div> | |
| <!-- LOADER --> | |
| <div class="loader-overlay" id="loader"> | |
| <div class="spinner"></div> | |
| </div> | |
| <script type="module" src="dashboardlogic.js"></script> | |
| </body> | |
| </html> |