Hugging Face's logo

Spaces:
Shinhati2023
/
Holded_Blog
Running

App Files Community
Holded_Blog
File size: 7,831 Bytes
f2323ff
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<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