fhm-rm.github.io/index.html at master · fhm-rm/fhm-rm.github.io · 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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>I built this for you🐣</title>
  <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=Cormorant+Garamond:wght@400;600&family=Source+Serif+4:wght@400;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/styles.css" />
</head>
<body>
  <button class="audio-toggle" id="audioToggle" title="Toggle music" aria-label="Toggle background music">🔊</button>

  <audio id="bgAudio" loop>
    <source src="assets/audio/Yellow.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio>

  <main>
    <div id="gate" class="card fade gate-card">
      <img class="bongo-cat" src="assets/gifs/bongo_cat.gif" alt="bongo cat" />
      <div class="gate-header">
        <div class="gate-flourish">✿ ✦ ✿</div>
        <h1 class="gate-title">My Heart in a letter for You</h1>
      </div>
      <label for="pw" class="hint">Password (the nickname I call you with)</label>
      <input id="pw" type="password" class="input" placeholder="..." />
      <button id="enter" class="btn">Enter</button>
      <p id="msg" class="msg" aria-live="polite"></p>
    </div>

    <div id="site" class="card hidden fade">
      <header>
        <h1><span id="dayCount">1</span> Days of Era</h1>
      </header>

      <!-- <section class="newyear-card" aria-label="New Year card">
        <div class="newyear-image" role="img" aria-label="New Year photo"></div>
        <div class="newyear-message">
          <p>
            2025 was tough, hurtful, and chaotic for us. It felt off from the start. I want to end this year with you and say again that I’m sorry for the hurt I caused. <br>
            Today was the last day of the year, and I spent it with you. That made me so happy. It felt magical because you’re magical to me. I’m grateful for you and to you. Through all the storms and hardship, we ended the year smiling. To me, all’s well that ends well. <br>
            May the Almighty bless you, bless me, and bless us in 2026. I’ve learned a lot this year, and I want to be better—for myself and for you. I never want to be apart from you; I’m hopeful. <br>
            Happy New Year, my love. Another year to treasure you, learn with you, and make you feel as cherished as you are. Thank you for every moment—we have so many more to write.
          </p>
        </div>
      </section> turning this off. She felt stressed by this. Well-->

      <section class="letter-section" id="home">
        <h2>Home:You</h2>
        <div class="notepad">
          <div class="home-doodle"></div>
          <div class="notepad-heading">A calm, sincere letter</div>
          <p>This space exists because you matter to me. I needed a place to slow down and say what my heart means, not what my mouth failed to. And I never want to be careless with something so precious. I have hurt you in unimaginable ways.
            I’m not writing this to explain myself. I’m writing because I want you to know that I see the weight my words carried, and I understand why they hurt you. I spoke without enough care, and the damage wasn’t in the intention—it was in the impact.
            For that, I am deeply sorry. You didn’t deserve sharpness. You didn’t deserve to feel small, questioned, or unsafe with me. I regret that I caused that. I don’t expect forgiveness, and I won’t rush you toward it.
            All I want you to know is that this effort is real,
            and I’m taking responsibility for becoming gentler, more mindful, and more deserving of your trust. (27 December 2025)
          </p>
        </div>
      </section>

      <section class="book-section" id="adventure-book">
        <div class="book-header">
          <h2>Our Adventure Book</h2>
          <div class="book-controls">
            <button class="book-btn" id="prevPage" aria-label="Previous page">‹</button>
            <span id="pageIndicator">1 / 1</span>
            <button class="book-btn" id="nextPage" aria-label="Next page">›</button>
          </div>
        </div>
        <div class="book-viewport" id="bookViewport">
          <div class="spread" id="spread">
            <div class="page left" id="pageLeft"></div>
            <div class="page right" id="pageRight"></div>
          </div>
        </div>
        <div class="book-hint">Swipe or tap arrows to turn pages</div>
      </section>

      <section class="letter-section floral" id="special-you">
        <h2>What is so Special about You</h2>
        <div class="notepad floral-paper">
          <div class="floral-doodle">❀ ❁ ❀</div>
          <div class="notepad-heading">Why I like you</div>
          <p>
            I haven’t met many people who are genuinely kind. You are—not because you try to be, but because that’s who you are.

            You’re warm. You’re nice. And you’re kind to me. That has meant more to me than you probably realize. Being around you feels so safe and peaceful.
            You feel better than home. The way you smile when you see me from a distance—those small moments stay with me.
            I chose you because of how you love and who you are as a person.
            You have a softness that’s rooted in you, and it comes out when you feel safe. That is unmatched.
            You have integrity, honesty and loyalty. You do the right thing even when it’s difficult. You know your worth.
            You're serious about your career and ambitions, and I admire that drive in you.
            You're funny, has a great sense of humor, and you can make me laugh even on my worst days.
            You are beautiful, inside and out. Your heart shines through in everything you do.
            You bring peace, You are peace.
          </p>
        </div>
      </section>

      <section>
        <h2>What I’m Working On</h2>
        <ul class="list">
          <li>Pausing before I speak, especially when I’m stressed.</li>
          <li>Choosing kindness over bluntness, even when honesty feels urgent.</li>
          <li>Listening fully, without defending.</li>
          <li>Being aware of how my words land.</li>
          <li>Responding with care instead of reacting.</li>
          <li>Managing my anger without lashing out.</li>
          <li>Asking questions without making you feel doubted.</li>
          <li>Communicating clearly instead of expecting you to guess.</li>
          <li>Showing care instead of letting my nonchalant vibe seem lazy.</li>
          <li>Staying calm under pressure while still taking initiative.</li>
          <li>Taking responsibility and making thoughtful decisions.</li>
          <li>Consistency over perfection</li>
          <li>Awareness of my impact on you</li>
          <li>Commitment without pressure</li>
        </ul>
      </section>

      <section>
        <h2>For You Only</h2>
        <p>You don’t have to forgive me and forget everything right away. I’m here, learning, and I want to be more careful with your heart every day. This space is just for you, as a reminder that you are seen, appreciated, and valued. I love you till the infinite expanding galaxy and back</p>
      </section>

      <div class="cat-wrap">
        <img class="cat" src="assets/gifs/eepycat.gif" alt="sleepy cat" />
        <div class="cat-shadow"></div>
      </div>

      <footer>
        <small>Made with care by Fahim, for Era.</small>
      </footer>
    </div>
  </main>

  <script src="js/gate.js"></script>
</body>
</html>