days/index.html at main · suzarun/days · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ಠ_ಠ (╥﹏╥) ♥ I loved you... (╥﹏╥) (｡•́︿•̀｡) ♡ still yours ♡ …but it still hurts (｡•́‿•̀｡)♡ (｡•́︿•̀｡) 💔
        (｡•́︿•̀｡) (っ- ‸ -ς)
        (｡•́︵•̀｡)
        (ಥ﹏ಥ)
        (｡•́︿•̀｡) ♡ ( ˘ ³˘)♥ (っ˘̩╭╮˘̩)っ 💔 (｡♥‿♥｡) … (╥﹏╥) ♥ (づ￣ ³￣)づ ♡ (っ- ‸ -ς) love you still ♡ ( ˘ ³˘)♥ you + me ♡
        …but (｡•́︵•̀｡) 💔 (╥﹏╥) (｡♥‿♥｡) ↘ (っ- ‸ -ς) still yours ♡ (｡♥‿♥｡) ♡ (づ｡◕‿‿◕｡)づ → (｡•́︿•̀｡) 💔 (っ˘̩╭╮˘̩)っ (╥﹏╥)
        …love, but softer now ♡ ♡ ( ˘ ³˘)♥ (づ￣ ³￣)づ (｡♥‿♥｡) … (｡•́︿•̀｡) (っ- ‸ -ς) 💔 (╥﹏╥) missing you ♡ (づ｡◕‿‿◕｡)づ ♡
        you … (｡•́‿•̀｡)♡ → (｡•́︵•̀｡) 💔 (╥﹏╥) still love you ♡
        (｡♥‿♥｡) ♡ forever? … (｡•́︿•̀｡) 💔 (っ˘̩╭╮˘̩)っ (╥﹏╥) maybe not, but still ♡
        I loved you... (╥﹏╥)| Still Waiting for
        you Poojey
    </title>
    <meta name="description"
        content="Still is a poetic Progressive Web App that beautifully tracks the time passed since a meaningful moment in your life.">
    <meta property="og:title" content="Still - A Poetic Time Tracker">
    <meta property="og:description"
        content="Still is a poetic Progressive Web App that beautifully tracks the time elapsed since a meaningful moment in your life.">
    <meta property="og:type" content="website">
    <meta property="og:image" content="public/pwa-icons/icons/icon-512x512.png">

    <!-- Favicon -->
    <link rel="icon" href="public/pwa-icons/icons/icon-96x96.png" type="image/png">

    <!-- Preload critical assets -->
    <link rel="preload" href="style.css" as="style">

    <!-- PWA Manifest -->
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#0d1b2a">
    <link rel="apple-touch-icon" href="public/pwa-icons/icons/icon-192x192.png">


    <!-- 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@300;400&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap"
        rel="stylesheet">

    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="stars-container" aria-hidden="true"></div>

    <!-- Main Counter Screen -->
    <main>
        <section id="main-screen" class="fade-in glass-panel blur-bg" aria-labelledby="main-title">
            <header class="header">
                <h1 id="main-title" class="title">Still</h1>
                <p class="subtitle">Counting the heartbeats between our last hello and our next.</p>
            </header>

            <div class="counter-container" role="timer" aria-label="Elapsed Time">
                <div class="time-block">
                    <span id="days" class="number">00</span>
                    <span class="label">Days</span>
                </div>
                <div class="time-block">
                    <span id="hours" class="number">00</span>
                    <span class="label">Hours</span>
                </div>
                <div class="time-block">
                    <span id="minutes" class="number">00</span>
                    <span class="label">Minutes</span>
                </div>
                <div class="time-block">
                    <span id="seconds" class="number">00</span>
                    <span class="label">Seconds</span>
                </div>
            </div>

            <div class="dynamic-message fade-in" id="dynamic-message" aria-live="polite">
                <!-- Populated by JS -->
            </div>

            <div class="actions">
                <button id="memories-btn" class="btn-secondary" aria-expanded="false"
                    aria-controls="memories-section">Unfold Memories</button>
                <button id="reach-out-btn" class="btn-primary" aria-haspopup="dialog" aria-controls="overlay">What if I
                    reached out today?</button>
            </div>

            <section id="memories-section" class="collapsible" aria-hidden="true" aria-label="Memories">
                <div class="memory note">"I still find myself waiting for your name to light up on my screen."</div>
                <div class="memory note">"There's a quiet space in my day that always belongs to you."</div>
                <div class="memory note">""Sometimes, your absence speaks louder than any word.""</div>
            </section>

            <footer class="credits mt-4">
                <p class="small-text">For Pooja Pandey (Pooju), with all my heart.</p>
            </footer>
        </section>
    </main>

    <!-- Overlay Screen for "What if I reached out today?" -->
    <div id="overlay" class="overlay hidden" role="dialog" aria-modal="true" aria-labelledby="overlay-text"
        aria-hidden="true">
        <div class="overlay-content">
            <p id="overlay-text" class="reflective-text">
                "Maybe you're waiting for me, too.<br> Or maybe some spaces are meant to stay gently empty.<br> Only
                time will tell."
            </p>
            <button id="close-overlay-btn" class="btn-text" aria-label="Close dialog">Close</button>
        </div>
    </div>

    <!-- Floating poetic phrases -->
    <div class="floating-phrase phrase-1" aria-hidden="true">an unspoken word</div>
    <div class="floating-phrase phrase-2" aria-hidden="true">a gentle memory</div>

    <script src="script.js" defer></script>
</body>

</html>