Spaces:
Running
Running
| <html lang="en" data-theme="midnight"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /> | |
| <meta name="theme-color" content="#07070f" /> | |
| <meta name="description" content="GlassGrid — Share Your World" /> | |
| <meta name="apple-mobile-web-app-capable" content="yes" /> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> | |
| <title>GlassGrid</title> | |
| <!-- Token Layers: Load order matters --> | |
| <link rel="stylesheet" href="tokens/tokens.css" /> | |
| <link rel="stylesheet" href="tokens/theme-midnight.css" id="theme-midnight" /> | |
| <link rel="stylesheet" href="tokens/theme-aurora.css" id="theme-aurora" /> | |
| <link rel="stylesheet" href="tokens/theme-ember.css" id="theme-ember" /> | |
| <link rel="stylesheet" href="tokens/theme-ocean.css" id="theme-ocean" /> | |
| <!-- Style Layers --> | |
| <link rel="stylesheet" href="styles/base.css" /> | |
| <link rel="stylesheet" href="styles/glass.css" /> | |
| <link rel="stylesheet" href="styles/layout.css" /> | |
| <link rel="stylesheet" href="styles/components.css" /> | |
| <link rel="stylesheet" href="styles/animations.css" /> | |
| <!-- Google Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" /> | |
| </head> | |
| <body> | |
| <div class="app-shell"> | |
| <!-- ══════════════════════════════════ | |
| NAVBAR — Component: Navbar | |
| ══════════════════════════════════ --> | |
| <header class="navbar glass-nav" role="banner"> | |
| <div class="navbar-inner"> | |
| <span class="navbar__logo" aria-label="GlassGrid home">GlassGrid</span> | |
| <div style="display:flex;gap:8px;align-items:center;"> | |
| <button class="navbar__icon-btn" aria-label="Notifications" id="btn-notifs"> | |
| <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="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/> | |
| </svg> | |
| </button> | |
| <button class="navbar__icon-btn" aria-label="New post" id="btn-new-post"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <rect x="3" y="3" width="18" height="18" rx="2"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- ══════════════════════════════════ | |
| CONTENT AREA | |
| ══════════════════════════════════ --> | |
| <main class="content-area" role="main"> | |
| <!-- ── Story Reel — Component: StoryReel ── --> | |
| <section aria-label="Stories" class="story-reel-wrapper"> | |
| <div class="story-reel stagger" id="story-reel"> | |
| <!-- Populated by StoryReel.js --> | |
| <!-- Skeleton Loaders --> | |
| <div class="story-item"> | |
| <div class="story-item__ring skeleton" style="width:60px;height:60px;border-radius:9999px;"></div> | |
| <div class="skeleton" style="width:48px;height:10px;margin-top:6px;"></div> | |
| </div> | |
| <div class="story-item"> | |
| <div class="story-item__ring skeleton" style="width:60px;height:60px;border-radius:9999px;"></div> | |
| <div class="skeleton" style="width:48px;height:10px;margin-top:6px;"></div> | |
| </div> | |
| <div class="story-item"> | |
| <div class="story-item__ring skeleton" style="width:60px;height:60px;border-radius:9999px;"></div> | |
| <div class="skeleton" style="width:48px;height:10px;margin-top:6px;"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ── Feed — Populated by PostCard.js ── --> | |
| <div class="page-container"> | |
| <section class="feed-layout stagger" id="feed" aria-label="Home feed" aria-live="polite"> | |
| <!-- Skeleton Post Cards --> | |
| <div class="post-card glass" style="padding:16px;"> | |
| <div style="display:flex;gap:12px;align-items:center;margin-bottom:12px;"> | |
| <div class="skeleton" style="width:40px;height:40px;border-radius:9999px;flex-shrink:0;"></div> | |
| <div style="flex:1;"> | |
| <div class="skeleton" style="width:120px;height:13px;margin-bottom:6px;"></div> | |
| <div class="skeleton" style="width:80px;height:10px;"></div> | |
| </div> | |
| </div> | |
| <div class="skeleton" style="width:100%;aspect-ratio:1;border-radius:12px;"></div> | |
| <div style="margin-top:12px;"> | |
| <div class="skeleton" style="width:60%;height:11px;"></div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </main> | |
| <!-- ══════════════════════════════════ | |
| BOTTOM NAVIGATION — Component: Navbar | |
| ══════════════════════════════════ --> | |
| <nav class="bottombar glass-bottom" aria-label="Main navigation" role="navigation"> | |
| <a class="bottombar-item active" href="index.html" aria-current="page" aria-label="Home feed"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg> | |
| <span class="bottombar-item__label">Home</span> | |
| <span class="bottombar-item__dot" aria-hidden="true"></span> | |
| </a> | |
| <a class="bottombar-item" href="explore.html" aria-label="Explore"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg> | |
| <span class="bottombar-item__label">Explore</span> | |
| </a> | |
| <button class="bottombar-item" id="btn-upload" aria-label="Create post"> | |
| <div style="width:42px;height:42px;border-radius:14px;background:var(--color-accent-gradient);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-glow);"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> | |
| </div> | |
| </button> | |
| <a class="bottombar-item" href="#" id="nav-notifs" aria-label="Notifications"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg> | |
| <span class="bottombar-item__label">Activity</span> | |
| </a> | |
| <a class="bottombar-item" href="profile.html" aria-label="Your profile"> | |
| <div class="avatar avatar--sm" style="border-radius:9999px;overflow:hidden;"> | |
| <img src="/assets/images/default-avatar.png" alt="Your profile" width="22" height="22" id="nav-avatar" /> | |
| </div> | |
| <span class="bottombar-item__label">Profile</span> | |
| </a> | |
| </nav> | |
| <!-- ══════════════════════════════════ | |
| COMMENT MODAL — Component: CommentBox | |
| ══════════════════════════════════ --> | |
| <div class="modal-overlay" id="comment-modal" style="display:none;" role="dialog" aria | |