romantic-memory-website/index.html at main · Hardikasetiyawann/romantic-memory-website · 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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Perjalanan Kita</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=Lato:wght@300;400;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="welcomeScreen" class="welcome-overlay">
      <div class="welcome-content">
        <h1 id="typingText" class="fade-text">Website Kenangan</h1>
        <p id="subText" class="fade-text-sub">Tempat menyimpan cerita kita.</p>
        <button class="btn-open" onclick="enterWebsite()">
          Lihat Cerita Kita
        </button>
      </div>
    </div>

    <div class="bg-fixed"></div>
    <div class="star-overlay"></div>

    <main id="mainContent" class="hidden-content">
      <section class="hero active">
        <div class="hero-content">
          <h1>Us, in Time.</h1>
          <p class="subtitle">
            Setiap detik yang berlalu adalah cerita milik kita.
          </p>

          <div class="timer-wrapper">
            <div class="time-segment">
              <span id="days">00</span>
              <span class="label">Hari</span>
            </div>
            <div class="separator">:</div>
            <div class="time-segment">
              <span id="hours">00</span>
              <span class="label">Jam</span>
            </div>
            <div class="separator">:</div>
            <div class="time-segment">
              <span id="minutes">00</span>
              <span class="label">Menit</span>
            </div>
            <div class="separator">:</div>
            <div class="time-segment">
              <span id="seconds">00</span>
              <span class="label">Detik</span>
            </div>
          </div>

          <button
            onclick="scrollToSection('playlist')"
            class="scroll-indicator"
            aria-label="Scroll Down"
          >
            <i class="fas fa-arrow-down"></i>
          </button>
        </div>
      </section>

      <section id="playlist" class="section">
        <div class="section-header reveal">
          <h2>Lagu Favorit Kita</h2>
          <p>Melodi yang selalu mengingatkanku padamu</p>
        </div>

        <div class="track-list reveal">
          <div
            id="track-perfect"
            class="track-item"
            onclick="playSong('perfect')"
          >
            <div class="track-icon"><i class="fas fa-play"></i></div>
            <div class="track-info">
              <h3>Perfect</h3>
              <p>Ed Sheeran</p>
            </div>
            <div class="track-duration">4:23</div>
          </div>

          <div
            id="track-thousand"
            class="track-item"
            onclick="playSong('thousand')"
          >
            <div class="track-icon"><i class="fas fa-play"></i></div>
            <div class="track-info">
              <h3>A Thousand Years</h3>
              <p>Christina Perri</p>
            </div>
            <div class="track-duration">4:45</div>
          </div>

          <div
            id="track-allofme"
            class="track-item"
            onclick="playSong('allofme')"
          >
            <div class="track-icon"><i class="fas fa-play"></i></div>
            <div class="track-info">
              <h3>All of Me</h3>
              <p>John Legend</p>
            </div>
            <div class="track-duration">4:29</div>
          </div>
        </div>
      </section>

      <section id="stories" class="section">
        <div class="section-header reveal">
          <h2>Jejak Kisah Kita</h2>
          <p>
            Dari "hai" yang sederhana, hingga "jangan pergi" yang penuh makna.
            Ini adalah garis waktu favoritku.
          </p>
        </div>

        <div class="timeline">
          <div class="timeline-box left reveal">
            <div class="date-badge">10 Jan 2023</div>
            <div class="box-content">
              <h3><i class="fas fa-comments"></i> Notifikasi Pertama</h3>
              <p>
                Berawal dari reply story atau pesan singkat yang canggung. Siapa
                sangka, notifikasi darimu hari itu adalah awal dari skenario
                terindah yang disiapkan semesta untukku.
              </p>
            </div>
          </div>

          <div class="timeline-box right reveal">
            <div class="date-badge">14 Feb 2023</div>
            <div class="box-content">
              <h3><i class="fas fa-coffee"></i> Tatap Muka Pertama</h3>
              <p>
                Jantung berdebar lebih cepat dari biasanya. Di kedai kopi itu,
                aku melihat senyummu secara langsung untuk pertama kalinya.
                Detik itu aku tahu, aku ingin melihat senyum itu setiap hari.
              </p>
            </div>
          </div>

          <div class="timeline-box left reveal">
            <div class="date-badge">20 Feb 2023</div>
            <div class="box-content">
              <h3><i class="fas fa-heart"></i> Kita Dimulai</h3>
              <p>
                Bukan lagi "aku" dan "kamu", tapi "kita". Hari dimana kita
                sepakat untuk saling menjaga, saling mengerti, dan berjalan
                beriringan. Tanggal ini akan selalu jadi sandi rahasia kita.
              </p>
            </div>
          </div>

          <div class="timeline-box right reveal">
            <div class="date-badge">15 Mei 2023</div>
            <div class="box-content">
              <h3><i class="fas fa-moon"></i> Percakapan Tengah Malam</h3>
              <p>
                Malam itu, kita bicara tentang mimpi, ketakutan, dan masa depan
                hingga larut. Di sana aku sadar, kamu bukan sekadar pacar, tapi
                juga rumah tempatku pulang dan berbagi segala rasa.
              </p>
            </div>
          </div>

          <div class="timeline-box left reveal">
            <div class="date-badge">10 Agt 2023</div>
            <div class="box-content">
              <h3>
                <i class="fas fa-plane-departure"></i> Petualangan Pertama
              </h3>
              <p>
                Matahari terbenam, suara ombak, dan tawa kita yang lepas.
                Perjalanan ini mengajarkanku bahwa tujuan destinasi itu tidak
                penting, asalkan teman perjalanannya adalah kamu.
              </p>
            </div>
          </div>

          <div class="timeline-box right reveal">
            <div class="date-badge">12 Des 2023</div>
            <div class="box-content">
              <h3><i class="fas fa-gift"></i> Bertambah Usia Bersamamu</h3>
              <p>
                Meniup lilin di sampingmu terasa berbeda. Doaku sederhana:
                Semoga di tahun-tahun berikutnya, wajahmu lah yang selalu
                kulihat setiap kali aku membuka mata di hari bahagiaku.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section class="section">
        <div class="section-header reveal">
          <h2>Momen Terindah</h2>
        </div>
        <div class="gallery-container reveal">
          <div class="polaroid rotate-left">
            <img
              src="https://images.unsplash.com/photo-1516589178581-6cd7833ae3b2?w=600&auto=format&fit=crop"
              alt="Foto 1"
            />
            <div class="caption">Kita yang konyol</div>
          </div>
          <div class="polaroid rotate-right">
            <img
              src="https://images.unsplash.com/photo-1523438885200-e635ba2c371e?w=600&auto=format&fit=crop"
              alt="Foto 2"
            />
            <div class="caption">Senja bersamamu</div>
          </div>
          <div class="polaroid rotate-left">
            <img
              src="https://images.unsplash.com/photo-1621621667797-e06afc217fb0?w=600&auto=format&fit=crop"
              alt="Foto 3"
            />
            <div class="caption">Tempat favorit</div>
          </div>
        </div>
      </section>

      <section class="section closing-section reveal">
        <div class="closing-content">
          <h2 class="gradient-text-big">
            Setiap kenangan kita<br />tersimpan di sini,<br /><span
              class="highlight-pink"
              >selamanya</span
            >
          </h2>

          <div class="glow-box">
            <i
              class="fas fa-heart heart-beat"
              id="loveIcon"
              onclick="createHeartShower()"
            ></i>
            <p>
              Terima kasih sudah menjadi bagian dari hidupku. Setiap detik
              bersamamu adalah hadiah yang tak ternilai.
            </p>
          </div>
        </div>
      </section>

      <footer>
        <p>Dibuat dengan segenap hati, untuk Kamu.</p>
      </footer>
    </main>

    <div class="music-floater" id="playerBar">
      <div class="floater-info">
        <div class="equalizer"><span></span><span></span><span></span></div>
        <span id="currentSongTitle" class="song-title">Pilih lagu...</span>
      </div>
      <button
        onclick="toggleMusic()"
        class="btn-control"
        aria-label="Play Music"
      >
        <i class="fas fa-play" id="mainPlayIcon"></i>
      </button>
    </div>

    <audio id="myAudio" loop>
      <source src="myAudio/lagu-kotainitaksamatanpamu.mp3" type="audio/mpeg" />
    </audio>

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