Spaces:

pockit-cloud
/

website

Sleeping

App Files Files Community

theguywhosucks commited on 16 days ago

Commit

d1e876b

verified ·

1 Parent(s): 477faa1

Upload 12 files

Browse files

Files changed (13) hide show

.gitattributes +2 -0
README.md +3 -10
bg.jpg +0 -0
bg2.png +3 -0
dashboard.html +468 -0
dashboardlogic.js +613 -0
index.html +92 -0
logic.js +113 -0
login.html +39 -0
logo.png +0 -0
screenshot.png +3 -0
sign-up.html +36 -0
style.css +174 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+bg2.png filter=lfs diff=lfs merge=lfs -text
+screenshot.png filter=lfs diff=lfs merge=lfs -text

README.md CHANGED Viewed

@@ -1,10 +1,3 @@
----
-title: Website
-emoji: ⚡
-colorFrom: purple
-colorTo: purple
-sdk: docker
-pinned: false
----
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

+![login](https://github.com/codeaashu/Animated-attractive-Login-Page/assets/130897584/77914cda-281a-4a3f-8231-dd2f339f5e01)
+# Animated-attractive-Login-Page
+Creating Animated Login Page with awesome background HTML &amp; CSS.

bg.jpg ADDED Viewed

bg2.png ADDED Viewed

Git LFS Details

SHA256: 141888dc3fb2bfc12fbd5af33a056052f34b3625f8ed1234cadba05eea30f696
Pointer size: 132 Bytes
Size of remote file: 1.32 MB

dashboard.html ADDED Viewed

	@@ -0,0 +1,468 @@

+<!DOCTYPE html>
+<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>

dashboardlogic.js ADDED Viewed

	@@ -0,0 +1,613 @@

+import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client@1.9.0/dist/index.min.js";
+let client;
+let currentUser = null;
+let currentPassword = null;
+let files = [];
+let selected = new Set();
+let currentView = 'grid';
+let previewFile = null;
+let isLoadingFiles = false;
+const iconMap = {
+    'pdf': '📄', 'doc': '📄', 'docx': '📄',
+    'png': '🖼️', 'jpg': '🖼️', 'jpeg': '🖼️', 'gif': '🖼️',
+    'mp3': '🎵', 'wav': '🎵', 'flac': '🎵',
+    'mp4': '📹', 'avi': '📹', 'mov': '📹',
+    'zip': '🗜️', 'rar': '🗜️', '7z': '🗜️',
+    'txt': '📝', 'md': '📝',
+    'py': '🐍', 'js': '📜', 'html': '🌐', 'css': '🌐',
+    'psd': '🎨', 'ai': '🎨',
+    'sql': '🗃️', 'xlsx': '📊', 'csv': '📊',
+    'pptx': '📑', 'ppt': '📑',
+};
+// Initialize dashboard on page load
+async function initDashboard() {
+    console.log('=== Dashboard Init Started ===');
+    currentUser = sessionStorage.getItem('pockit_user');
+    currentPassword = sessionStorage.getItem('pockit_pass');
+    if (!currentUser || !currentPassword) {
+        console.warn('No session found, redirecting to login');
+        window.location.href = 'index.html';
+        return;
+    }
+    try {
+        client = await Client.connect("pockit-cloud/main");
+        console.log('✓ Connected to API');
+        // Update account info
+        const initials = currentUser.substring(0, 2).toUpperCase();
+        document.querySelector('.avatar').textContent = initials;
+        document.querySelector('.account-name').textContent = currentUser;
+        // Load data
+        await loadUserData();
+        await loadFiles();
+    } catch (err) {
+        console.error('Init error:', err);
+        showToast('Connection failed');
+        setTimeout(() => window.location.href = 'index.html', 2000);
+    }
+}
+// Load user info and update cards
+async function loadUserData() {
+    try {
+        console.log('Loading user data...');
+        const result = await client.predict("/search_user", { user_id: currentUser });
+        const [log, isDev, isPro, isTester, capacityUsed, usedTotal] = result.data;
+        // Determine role
+        let role = 'free';
+        if (isDev) role = 'dev';
+        else if (isPro) role = 'pro';
+        else if (isTester) role = 'tester';
+        const tag = document.getElementById('role-tag');
+        tag.className = 'role-tag ' + role;
+        tag.textContent = role.charAt(0).toUpperCase() + role.slice(1);
+        document.getElementById('tier-val').textContent = tag.textContent;
+        // Parse capacity
+        const capacityPercent = Math.round(capacityUsed);
+        let usedDisplay = usedTotal || '0 / 5 GB';
+        let usedParts = usedDisplay.split('/');
+        let usedAmount = usedParts[0].trim();
+        let maxAmount = usedParts[1] ? usedParts[1].trim() : '5 GB';
+        // Update storage displays
+        document.querySelector('.card-bar-fill').style.width = capacityPercent + '%';
+        document.querySelector('.stor-label span:last-child').textContent = usedDisplay;
+        document.querySelector('.sbar-fill').style.width = capacityPercent + '%';
+        const storageCard = document.querySelectorAll('.card')[0];
+        storageCard.querySelector('.card-val').innerHTML = usedAmount + ' <span style="font-size:.38em;font-weight:400;color:rgba(0,0,0,.38)">(' + capacityPercent + '%)</span>';
+        storageCard.querySelector('.card-sub').textContent = usedDisplay + ' used';
+        document.querySelectorAll('.card')[3].querySelector('.card-sub').textContent = maxAmount + ' max capacity';
+        console.log('✓ User data loaded');
+    } catch (err) {
+        console.error('User data error:', err);
+    }
+}
+// Load files from API
+async function loadFiles() {
+    // Prevent concurrent loads
+    if (isLoadingFiles) return;
+    isLoadingFiles = true;
+    try {
+        console.log('Loading files...');
+        loading(true);
+        const result = await client.predict("/get_files_secure", {
+            user_id: currentUser,
+            password: currentPassword,
+        });
+        // API returns [dropdown, status]
+        const dropdownData = result.data[0];
+        console.log('Raw dropdownData:', dropdownData);
+        let fileNames = [];
+        if (dropdownData && typeof dropdownData === 'object' && dropdownData.choices) {
+            // Flatten all sub-arrays in choices
+            fileNames = dropdownData.choices.flat ? dropdownData.choices.flat() : [].concat(...dropdownData.choices);
+        } else if (Array.isArray(dropdownData)) {
+            fileNames = dropdownData;
+        } else if (typeof dropdownData === 'string') {
+            fileNames = [dropdownData];
+        }
+        // Convert all to string, trim, and filter empty
+        fileNames = fileNames.map(f => String(f).trim()).filter(Boolean);
+        console.log('Extracted fileNames from dropdown:', fileNames);
+        // Deduplicate file names (case-insensitive, trim)
+        const seen = new Set();
+        const deduped = [];
+        for (const name of fileNames) {
+            const key = name.toLowerCase();
+            if (!key || seen.has(key)) continue;
+            seen.add(key);
+            deduped.push(name);
+        }
+        files = deduped.map((name, idx) => {
+            const ext = name.includes('.') ? name.split('.').pop().toLowerCase() : '';
+            return {
+                id: idx,
+                name: name,
+                icon: iconMap[ext] || '📁',
+                size: '—',
+                date: 'Recently',
+                type: ext ? ext.toUpperCase() : '',
+                preview: null // for preview content
+            };
+        });
+        console.log('Final files array before render:', files);
+        selected.clear();
+        updateStatsCards();
+        render(files);
+        loading(false);
+        console.log('✓ Files loaded and rendered');
+    } catch (err) {
+        console.error('Files load error:', err);
+        loading(false);
+        files = [];
+        selected.clear();
+        render([]);
+        showToast('Failed to load files');
+    } finally {
+        isLoadingFiles = false;
+    }
+}
+// Update stats cards
+function updateStatsCards() {
+    const cards = document.querySelectorAll('.card');
+    if (cards.length < 3) return;
+    // Files count
+    cards[1].querySelector('.card-val').textContent = files.length;
+    // File types
+    const fileTypes = new Set(files.map(f => f.type));
+    cards[1].querySelector('.card-sub').textContent = `Across ${fileTypes.size} file type${fileTypes.size !== 1 ? 's' : ''}`;
+    // Upload card
+    cards[2].querySelector('.card-val').textContent = files.length > 0 ? '1' : '0';
+    cards[2].querySelector('.card-sub').textContent = files.length > 0 ? 'Last upload: Recently' : 'No uploads yet';
+}
+// Render grid and table
+function render(list) {
+    console.log('Rendering', list.length, 'files:', list.map(f => f.name));
+    const grid = document.getElementById('file-grid');
+    const tbody = document.getElementById('file-tbody');
+    if (!grid) {
+        console.error('file-grid missing');
+        return;
+    }
+    if (!tbody) {
+        console.error('file-tbody missing');
+        return;
+    }
+    // Clear everything first
+    grid.innerHTML = '';
+    tbody.innerHTML = '';
+    // Only render if there are files
+    if (!list || list.length === 0) {
+        console.log('No files to render');
+        return;
+    }
+    // Grid HTML
+    const gridHTML = list.map((f, i) => `
+        <div class="file-card ${selected.has(i) ? 'selected' : ''}" onclick="toggleSelect(${i})" ondblclick="openPreview(${i})">
+            <span class="fc-check"><i class="fa-solid fa-check"></i></span>
+            <span class="fc-icon">${f.icon}</span>
+            <span class="fc-name">${f.name}</span>
+            <span class="fc-meta">${f.size}</span>
+        </div>
+    `).join('');
+    grid.innerHTML = gridHTML;
+    console.log('Grid rendered with', list.length, 'items');
+    // Table HTML
+    const tableHTML = list.map((f, i) => `
+        <tr onclick="openPreview(${i})">
+            <td class="td-name"><span>${f.icon}</span> ${f.name}</td>
+            <td class="td-muted">${f.size}</td>
+            <td class="td-muted">${f.date}</td>
+            <td class="td-muted">${f.type}</td>
+            <td class="td-actions">
+                <button class="tbl-btn" onclick="event.stopPropagation();openPreview(${i})"><i class="fa-solid fa-eye"></i></button>
+                <button class="tbl-btn" onclick="event.stopPropagation();downloadFile(${i})"><i class="fa-solid fa-download"></i></button>
+                <button class="tbl-btn del" onclick="event.stopPropagation();deleteFile(${i})"><i class="fa-solid fa-trash"></i></button>
+            </td>
+        </tr>
+    `).join('');
+    tbody.innerHTML = tableHTML;
+    console.log('Table rendered with', list.length, 'items');
+}
+// Select/deselect file
+function toggleSelect(id) {
+    if (id < 0 || id >= files.length) return;
+    selected.has(id) ? selected.delete(id) : selected.add(id);
+    render(currentView === 'grid' ? files : files);
+}
+function clearSelection() {
+    selected.clear();
+    render(files);
+}
+function handleSelectAll(checked) {
+    if (checked) {
+        files.forEach((_, i) => selected.add(i));
+    } else {
+        selected.clear();
+    }
+    render(files);
+}
+// Open file preview
+function openPreview(id) {
+    if (id < 0 || id >= files.length) return;
+    previewFile = files[id];
+    document.getElementById('preview-thumb').textContent = previewFile.icon;
+    document.getElementById('preview-name').textContent = previewFile.name;
+    document.getElementById('preview-name').style.color = '#1a1a2e';
+    document.getElementById('pv-size').textContent = previewFile.size;
+    document.getElementById('pv-date').textContent = previewFile.date;
+    document.getElementById('pv-type').textContent = previewFile.type;
+    // Load preview content from API
+    loadPreviewContent(previewFile);
+    selected.clear();
+    selected.add(id);
+    render(files);
+// Load preview content for a file using /handle_preview_secure and /get_preview_text_action
+async function loadPreviewContent(file) {
+    if (!file || !file.name) return;
+    const previewContainer = document.getElementById('preview-content');
+    if (!previewContainer) return;
+    previewContainer.innerHTML = '<span style="color:#aaa">Loading preview...</span>';
+    try {
+        // Try /handle_preview_secure first
+        const result = await client.predict("/handle_preview_secure", {
+            user_id: currentUser,
+            password: currentPassword,
+            filename: file.name,
+        });
+        // result.data: [file, localPath, html, image, code]
+        let previewHtml = '';
+        if (result.data[3] && typeof result.data[3] === 'string' && result.data[3].startsWith('data:image')) {
+            // Image preview
+            previewHtml = `<img src="${result.data[3]}" alt="Preview" style="max-width:100%;max-height:200px;">`;
+        } else if (result.data[2] && typeof result.data[2] === 'string' && result.data[2].length > 0) {
+            // HTML preview
+            previewHtml = `<div class="pv-html">${result.data[2]}</div>`;
+        } else if (result.data[4] && typeof result.data[4] === 'string' && result.data[4].length > 0) {
+            // Code preview
+            previewHtml = `<pre class="pv-code">${escapeHtml(result.data[4])}</pre>`;
+        } else {
+            // Try /get_preview_text_action for text preview
+            const textResult = await client.predict("/get_preview_text_action", {
+                user_id: currentUser,
+                password: currentPassword,
+                filename: file.name,
+            });
+            if (textResult.data && typeof textResult.data[0] === 'string' && textResult.data[0].length > 0) {
+                previewHtml = `<pre class="pv-text">${escapeHtml(textResult.data[0])}</pre>`;
+            } else {
+                previewHtml = '<span style="color:#aaa">No preview available.</span>';
+            }
+        }
+        previewContainer.innerHTML = previewHtml;
+    } catch (err) {
+        console.error('Preview error:', err);
+        previewContainer.innerHTML = '<span style="color:#f55">Failed to load preview.</span>';
+    }
+}
+// Helper to escape HTML for code/text preview
+function escapeHtml(str) {
+    return String(str)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+}
+// Delete single file
+async function deleteFile(id) {
+    if (id < 0 || id >= files.length) return;
+    const file = files[id];
+    try {
+        loading(true);
+        const result = await client.predict("/delete_file_secure", {
+            user_id: currentUser,
+            password: currentPassword,
+            filename: file.name,
+        });
+        console.log('Deleted:', file.name);
+        // Update storage
+        const [status, capacityUsed, usedTotal] = result.data;
+        const percent = Math.round(capacityUsed);
+        document.querySelector('.card-bar-fill').style.width = percent + '%';
+        document.querySelector('.sbar-fill').style.width = percent + '%';
+        document.querySelector('.stor-label span:last-child').textContent = usedTotal;
+        // Remove from array
+        files.splice(id, 1);
+        selected.delete(id);
+        updateStatsCards();
+        render(files);
+        loading(false);
+        showToast(file.name + ' deleted');
+    } catch (err) {
+        console.error('Delete error:', err);
+        loading(false);
+        showToast('Delete failed');
+    }
+}
+// Delete selected files
+async function deleteSelected() {
+    if (selected.size === 0) {
+        showToast('No files selected');
+        return;
+    }
+    const ids = Array.from(selected).sort((a, b) => b - a);
+    for (const id of ids) {
+        await deleteFile(id);
+    }
+}
+// Delete preview file
+async function deletePreviewFile() {
+    if (!previewFile) return;
+    const idx = files.indexOf(previewFile);
+    if (idx >= 0) await deleteFile(idx);
+    previewFile = null;
+    document.getElementById('preview-name').textContent = 'Select a file';
+    document.getElementById('preview-name').style.color = 'rgba(0,0,0,.3)';
+}
+// Download file
+async function downloadFile(id) {
+    if (id < 0 || id >= files.length) return;
+    const file = files[id];
+    try {
+        loading(true);
+        // Use /get_download_link_action to get the raw download link
+        const result = await client.predict("/get_download_link_action", {
+            user_id: currentUser,
+            password: currentPassword,
+            filename: file.name,
+        });
+        const fileUrl = result.data[0];
+        if (typeof fileUrl === 'string' && (fileUrl.startsWith('http') || fileUrl.startsWith('https'))) {
+            // Fetch as blob to force download, with optional Hugging Face token
+            const hfToken = sessionStorage.getItem('hf_read_token');
+            const fetchOptions = hfToken ? {
+                headers: { 'Authorization': 'Bearer ' + hfToken }
+            } : {};
+            const response = await fetch(fileUrl, fetchOptions);
+            if (!response.ok) {
+                console.error('Download fetch error:', {
+                    url: fileUrl,
+                    status: response.status,
+                    statusText: response.statusText
+                });
+                throw new Error('Network response was not ok (status ' + response.status + '): ' + response.statusText);
+            }
+            const blob = await response.blob();
+            const url = window.URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = file.name;
+            document.body.appendChild(a);
+            a.click();
+            setTimeout(() => {
+                document.body.removeChild(a);
+                window.URL.revokeObjectURL(url);
+            }, 100);
+            showToast('Download started: ' + file.name);
+        } else {
+            showToast('Download link error');
+        }
+        loading(false);
+    } catch (err) {
+        console.error('Download error:', err);
+        loading(false);
+        showToast('Download failed: ' + (err && err.message ? err.message : ''));
+    }
+}
+async function downloadPreviewFile() {
+    if (!previewFile) return;
+    const idx = files.indexOf(previewFile);
+    if (idx >= 0) {
+        await downloadFile(idx);
+    }
+}
+// Upload file
+async function handleUpload(input) {
+    if (!input.files || !input.files[0]) return;
+    const file = input.files[0];
+    try {
+        loading(true);
+        // Use File object and pass custom_name for filename preservation
+        console.log('Uploading file:', file, 'type:', file.constructor.name);
+        const result = await client.predict("/upload_file_secure", {
+            user_id: currentUser,
+            password: currentPassword,
+            filepath: file,
+            custom_name: file.name,
+        });
+        console.log('Uploaded:', file.name);
+        // Update storage
+        const [status, capacityUsed, usedTotal] = result.data;
+        const percent = Math.round(capacityUsed);
+        document.querySelector('.card-bar-fill').style.width = percent + '%';
+        document.querySelector('.sbar-fill').style.width = percent + '%';
+        document.querySelector('.stor-label span:last-child').textContent = usedTotal;
+        // Reload files
+        await loadFiles();
+        showToast(file.name + ' uploaded');
+        input.value = '';
+    } catch (err) {
+        console.error('Upload error:', err);
+        loading(false);
+        showToast('Upload failed');
+    }
+}
+function handleDrop(e) {
+    e.preventDefault();
+    document.getElementById('drop-zone').classList.remove('drag');
+    if (e.dataTransfer.files) {
+        handleUpload({ files: e.dataTransfer.files });
+    }
+}
+// Filter files by search
+function filterFiles(q) {
+    const query = q.toLowerCase();
+    const filtered = files.filter(f => f.name.toLowerCase().includes(query));
+    render(filtered);
+}
+// Toggle view
+function setView(v) {
+    currentView = v;
+    document.getElementById('file-grid').style.display = v === 'grid' ? 'grid' : 'none';
+    document.getElementById('file-table-wrap').style.display = v === 'list' ? 'block' : 'none';
+    document.getElementById('vt-grid').classList.toggle('active', v === 'grid');
+    document.getElementById('vt-list').classList.toggle('active', v === 'list');
+}
+// Navigation sections
+function setNav(el, section) {
+    document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
+    el.classList.add('active');
+    if (section === 'recent') {
+        document.getElementById('page-title').textContent = 'Recent Files';
+        render(files.slice(0, 5));
+    } else {
+        document.getElementById('page-title').textContent = 'My Files';
+        render(files);
+    }
+}
+// Change password
+async function changePassword() {
+    const p1 = document.getElementById('new-pw').value;
+    const p2 = document.getElementById('conf-pw').value;
+    if (!p1 || p1 !== p2) {
+        showToast('Passwords do not match');
+        return;
+    }
+    try {
+        loading(true);
+        const result = await client.predict("/update_password", {
+            user_id: currentUser,
+            new_password: p1,
+        });
+        if (result.data[0].toLowerCase().includes('success') || result.data[0].toLowerCase().includes('updated')) {
+            currentPassword = p1;
+            sessionStorage.setItem('pockit_pass', p1);
+            closeModal('pw-modal');
+            showToast('Password updated');
+            document.getElementById('new-pw').value = '';
+            document.getElementById('conf-pw').value = '';
+        } else {
+            showToast('Password update failed');
+        }
+        loading(false);
+    } catch (err) {
+        console.error('Password error:', err);
+        loading(false);
+        showToast('Password update failed');
+    }
+}
+// Logout
+function logoutUser() {
+    sessionStorage.clear();
+    showToast('Logged out');
+    setTimeout(() => window.location.href = 'index.html', 1500);
+}
+// Modal helpers
+function openModal(id) {
+    document.getElementById(id).classList.add('open');
+}
+function closeModal(id) {
+    document.getElementById(id).classList.remove('open');
+}
+// UI helpers
+function loading(on) {
+    document.getElementById('loader').classList.toggle('on', on);
+}
+let toastTimer;
+function showToast(msg) {
+    const toast = document.getElementById('toast');
+    document.getElementById('toast-msg').textContent = msg;
+    toast.classList.add('show');
+    clearTimeout(toastTimer);
+    toastTimer = setTimeout(() => toast.classList.remove('show'), 3000);
+}
+// Initialize on page load
+document.addEventListener('DOMContentLoaded', initDashboard);
+// Expose to global scope
+window.initDashboard = initDashboard;
+window.loadUserData = loadUserData;
+window.loadFiles = loadFiles;
+window.updateStatsCards = updateStatsCards;
+window.render = render;
+window.toggleSelect = toggleSelect;
+window.clearSelection = clearSelection;
+window.handleSelectAll = handleSelectAll;
+window.openPreview = openPreview;
+window.deleteFile = deleteFile;
+window.deleteSelected = deleteSelected;
+window.deletePreviewFile = deletePreviewFile;
+window.downloadFile = downloadFile;
+window.downloadPreviewFile = downloadPreviewFile;
+window.handleUpload = handleUpload;
+window.handleDrop = handleDrop;
+window.filterFiles = filterFiles;
+window.setView = setView;
+window.setNav = setNav;
+window.changePassword = changePassword;
+window.logoutUser = logoutUser;
+window.openModal = openModal;
+window.closeModal = closeModal;
+window.loading = loading;
+window.showToast = showToast;

index.html ADDED Viewed

	@@ -0,0 +1,92 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Pockit | Scalable Cloud Storage</title>
+  <style>
+    /* Reset & Base */
+    * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }
+    body { color: #fff; line-height: 1.6; overflow-x: hidden; }
+    /* Stationary Background Layer */
+    .bg-layer {
+      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+      background-image: url(bg.jpg);
+      background-size: cover;
+      background-position: center;
+      background-attachment: fixed; /* Keeps background stationary */
+      z-index: -1;
+    }
+    /* Layout Helpers */
+    .container { width: 90%; max-width: 1200px; margin: 0 auto; }
+    .section-padding { padding: 100px 0; }
+    /* Hero */
+    .hero { height: 100vh; display: flex; align-items: center; justify-content: space-between; gap: 50px; }
+    .hero-text { flex: 1; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
+    .hero-text h1 { font-size: 5rem; line-height: 1; margin-bottom: 20px; }
+    .hero-text p { font-size: 1.5rem; margin-bottom: 30px; color: #fff; }
+    .btn { padding: 18px 40px; background: #fff; color: #000; border-radius: 8px; text-decoration: none; font-weight: 700; display: inline-block; transition: 0.3s; }
+    .btn:hover { background: #ddd; }
+    .hero-image { flex: 1; display: flex; justify-content: flex-end; }
+    .hero-image img { width: 100%; max-width: 600px; border-radius: 12px; box-shadow: 0 20px 40px rgba(0,0,0,0.8); }
+    /* Section Styling */
+    h2 { font-size: 3rem; margin-bottom: 60px; text-align: center; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
+    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
+    .card { background: rgba(0, 0, 0, 0.4); padding: 40px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(10px); }
+    .card h3 { margin-bottom: 15px; color: #fff; font-size: 1.5rem; }
+    .card p { color: #eee; }
+    /* Table Styling */
+    .comparison-wrapper { overflow-x: auto; }
+    .comparison { width: 100%; border-collapse: collapse; margin-top: 30px; background: rgba(0, 0, 0, 0.4); border-radius: 16px; overflow: hidden; backdrop-filter: blur(10px); }
+    .comparison th, .comparison td { padding: 25px; border-bottom: 1px solid rgba(255,255,255,0.1); text-align: left; }
+    .comparison th { color: #fff; font-weight: 600; }
+    footer { padding: 50px 0; text-align: center; color: #fff; border-top: 1px solid rgba(255,255,255,0.1); }
+  </style>
+</head>
+<body>
+  <div class="bg-layer"></div>
+  <section class="hero container">
+    <div class="hero-text">
+      <h1>Pockit.</h1>
+      <p>Infinite storage for heavy assets, binaries, and production data. Built for developers who need more.</p>
+      <a href="login.html" class="btn">Get Started</a>
+    </div>
+    <div class="hero-image"><img src="screenshot.png" alt="Pockit Dashboard"></div>
+  </section>
+  <div class="container section-padding">
+    <h2>Workflow Optimized</h2>
+    <div class="grid">
+      <div class="card"><h3>Cold Storage Tiers</h3><p>Archive dormant assets for pennies. Instant retrieval, total reliability.</p></div>
+      <div class="card"><h3>Immutable History</h3><p>Every commit creates a unique hash. Roll back to any state in seconds.</p></div>
+      <div class="card"><h3>Global Edge Replication</h3><p>Your data lives everywhere. Low latency, high availability, no excuses.</p></div>
+    </div>
+  </div>
+  <div class="container section-padding">
+    <h2>Performance Comparison</h2>
+    <div class="comparison-wrapper">
+      <table class="comparison">
+        <tr><th>Feature</th><th>Traditional Cloud</th><th>Pockit</th></tr>
+        <tr><td>Binary Performance</td><td>Standard</td><td>Optimized</td></tr>
+        <tr><td>CLI/API Access</td><td>Limited</td><td>Full Root/Dev Access</td></tr>
+        <tr><td>Latency</td><td>Variable</td><td>Global Edge-Synced</td></tr>
+      </table>
+    </div>
+  </div>
+  <footer class="container">
+    <p>© 2026 Pockit Storage Systems. Built for developers.</p>
+  </footer>
+</body>
+</html>

logic.js ADDED Viewed

	@@ -0,0 +1,113 @@

+import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client@1.9.0/dist/index.min.js";
+const loginForm = document.getElementById('loginForm');
+const signupForm = document.getElementById('signupForm');
+// Ensure overlay exists and setup
+const loadingOverlay = document.getElementById('loadingOverlay');
+if (loadingOverlay) {
+    loadingOverlay.style.display = 'none';
+}
+// Helper to toggle the loading overlay - PROPERLY
+function setLoading(isLoading) {
+    const overlay = document.getElementById('loadingOverlay');
+    if (!overlay) {
+        console.error('Loading overlay element not found!');
+        return;
+    }
+    if (isLoading) {
+        overlay.style.display = 'flex';
+        overlay.style.position = 'fixed';
+        overlay.style.top = '0';
+        overlay.style.left = '0';
+        overlay.style.width = '100%';
+        overlay.style.height = '100%';
+        overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
+        overlay.style.backdropFilter = 'blur(5px)';
+        overlay.style.justifyContent = 'center';
+        overlay.style.alignItems = 'center';
+        overlay.style.zIndex = '9999';
+    } else {
+        overlay.style.display = 'none';
+    }
+}
+// Registration Logic
+if (signupForm) {
+    signupForm.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        setLoading(true);
+        const user = document.getElementById('username').value;
+        const pass = document.getElementById('password').value;
+        try {
+            const client = await Client.connect("pockit-cloud/main");
+            const result = await client.predict("/create_user", {
+                user_id: user,
+                password: pass,
+            });
+            // Debug: log the result
+            console.log("/create_user result:", result.data);
+            let log = "";
+            if (typeof result.data === "string") {
+                log = result.data.toLowerCase();
+            } else if (Array.isArray(result.data)) {
+                log = result.data.map(x => String(x).toLowerCase()).join(" ");
+            } else if (typeof result.data === "object" && result.data !== null) {
+                log = JSON.stringify(result.data).toLowerCase();
+            }
+            if (log.includes("success") || log.includes("user created")) {
+                sessionStorage.setItem("pockit_user", user);
+                sessionStorage.setItem("pockit_pass", pass);
+                window.location.href = "dashboard.html"; // Success redirect
+            } else {
+                alert("Error: " + (typeof result.data === "object" ? JSON.stringify(result.data) : result.data));
+                setLoading(false);
+            }
+        } catch (err) {
+            console.error(err);
+            setLoading(false);
+        }
+    });
+}
+// Login Logic
+if (loginForm) {
+    loginForm.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        setLoading(true);
+        const user = document.getElementById('username').value;
+        const pass = document.getElementById('password').value;
+        try {
+            const client = await Client.connect("pockit-cloud/main");
+            const result = await client.predict("/get_files_secure", {
+                user_id: user,
+                password: pass,
+            });
+            // Status message is at index 1 for get_files_secure
+            const status = result.data[1].toLowerCase();
+            if (status.includes("found") || status.includes("success")) {
+                sessionStorage.setItem("pockit_user", user);
+                sessionStorage.setItem("pockit_pass", pass);
+                window.location.href = "dashboard.html"; // Success redirect
+            } else {
+                alert("Login failed: " + result.data[1]);
+                setLoading(false);
+            }
+        } catch (err) {
+            console.error(err);
+            alert("Connection error.");
+            setLoading(false);
+        }
+    });
+}

	@@ -0,0 +1,39 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Sign In with Pockit ID</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <div id="loadingOverlay" class="loading-overlay"></div>
+  <section>
+    <div class="login-box">
+      <form id="loginForm">
+        <h2>Sign In with Pockit ID</h2>
+        <div class="input-box">
+          <span class="icon"><ion-icon name="mail"></ion-icon> </span>
+          <input type="text" id="username" required>
+          <label> Username</label>
+        </div>
+        <div class="input-box">
+          <span class="icon"><ion-icon name="lock-closed"></ion-icon> </span>
+          <input type="password" id="password" required>
+          <label> Password</label>
+        </div>
+        <div class="remember-forget">
+          <a href="#">Forget Password</a>
+        </div>
+        <button type="submit">Login</button>
+        <div class="register-link">
+          <p>Don't have an account? <a href="sign-up.html">Register</a></p>
+        </div>
+      </form>
+    </div>
+  </section>
+  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+  <script type="module" src="logic.js"></script>
+</body>
+</html>

logo.png ADDED Viewed

screenshot.png ADDED Viewed

Git LFS Details

SHA256: a294acb6227c6490da07748f1a667194472586ee6ad07079c3eebcb0d513cbcb
Pointer size: 132 Bytes
Size of remote file: 1 MB

sign-up.html ADDED Viewed

	@@ -0,0 +1,36 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Register - Pockit ID</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <div id="loadingOverlay" class="loading-overlay"></div>
+  <section>
+    <div class="login-box">
+      <form id="signupForm">
+        <h2>Create a Pockit ID</h2>
+        <div class="input-box">
+          <span class="icon"><ion-icon name="mail"></ion-icon> </span>
+          <input type="text" id="username" required>
+          <label> Username</label>
+        </div>
+        <div class="input-box">
+          <span class="icon"><ion-icon name="lock-closed"></ion-icon> </span>
+          <input type="password" id="password" required>
+          <label> Password</label>
+        </div>
+        <button type="submit">Register</button>
+        <div class="register-link">
+          <p>Already have an account? <a href="index.html">Login</a></p>
+        </div>
+      </form>
+    </div>
+  </section>
+  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+  <script type="module" src="logic.js"></script>
+</body>
+</html>

style.css ADDED Viewed

	@@ -0,0 +1,174 @@

+/* ===( CODE AASHU )=== */
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Poppins', sans-serif;
+}
+section{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+  background-image: url(bg.jpg);
+  background-size: cover;
+  background-position: center;
+  animation: animateBg 5s linear infinite;
+}
+@keyframes animateBg{
+  100%{
+    filter: hue-rotate(360deg);
+  }
+}
+.login-box{
+  position: relative;
+  width: 400px;
+  height: 450px;
+  background: transparent;
+  border: 2px solid rgba(255, 255, 255, .5);
+  border-radius: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  backdrop-filter: blur(15px);
+}
+h2{
+  font-size: 2em;
+  color: #fff;
+  text-align: center;
+}
+.input-box{
+  position: relative;
+  width: 310px;
+  margin: 30px 0;
+  border-bottom: 2px solid #fff;
+}
+.input-box label{
+  position: absolute;
+  top: 50%;
+  left: 5px;
+  transform: translateY(-50%);
+  font-size: 1em;
+  color: #fff;
+  pointer-events: none;
+  transition: .5s;
+}
+.input-box input:focus~label,
+.input-box input:valid~label{
+  top: -5px;
+}
+.input-box input{
+  width: 100%;
+  height: 50px;
+  background: transparent;
+  border: none;
+  outline: none;
+  font-size: 1em;
+  color: #fff;
+  padding: 0 35px 0 5px;
+}
+.input-box .icon{
+  position: absolute;
+  right: 8px;
+  color: #fff;
+  font-size: 1.2em;
+  line-height: 57px;
+}
+.remember-forget{
+  margin: -15px 0 15px;
+  font-size: .9em;
+  color: #fff;
+  display: flex;
+  justify-content: space-between;
+}
+.remember-forget label input{
+  margin-right: 3px;
+}
+.remember-forget a{
+  color: #fff;
+  text-decoration: none;
+}
+.remember-forget a:hover{
+  text-decoration: underline;
+}
+button{
+  width: 100%;
+  height: 40px;
+  background: #fff;
+  border: none;
+  outline: none;
+  border-radius: 40px;
+  cursor: pointer;
+  font-size: 1em;
+  color: #000;
+  font-weight: 500;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: background 0.3s;
+}
+/* === LOADING STATE STYLES === */
+/* Dark blur overlay for loading state */
+.loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(5px);
+    display: none;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+}
+.loading-overlay.active {
+    display: flex;
+}
+.register-link{
+  font-size: .9em;
+  color: #fff;
+  text-align: center;
+  margin: 25px 0 10px;
+}
+.register-link p a{
+  color: #fff;
+  text-decoration: none;
+  font-weight: 600;
+}
+.register-link p a:hover{
+  text-decoration: underline;
+}
+@media (max-width:360px){
+  .login-box{
+    width: 100%;
+    height: 100vh;
+    border: none;
+    border-radius: 0;
+  }
+  .input-box{
+    width: 290px;
+  }
+}