valentine2026/index.html at main · ianjiteshan/valentine2026 · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- CUSTOMIZE: Browser tab title -->
    <title>Will You Be My Valentine? 💝</title>
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Poppins:wght@300;400;600&display=swap"
      rel="stylesheet"
    />
    <!-- Styles -->
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <!-- Floating Background Elements -->
    <div class="floating-elements" aria-hidden="true">
      <!-- Hearts and bears will be added here by JavaScript -->
    </div>

    <!-- Main Content Container -->
    <main class="container">
      <h1 id="valentineTitle"></h1>

      <!-- Music Player -->
      <div id="musicControls" class="music-controls">
        <button
          id="musicToggle"
          class="music-btn"
          aria-label="Toggle Background Music"
        >
          🎵 Play Music
        </button>
        <audio id="bgMusic" loop>
          <source id="musicSource" type="audio/mpeg" />
          Your browser does not support the audio element.
        </audio>
      </div>

      <!-- First Question -->
      <section class="question-section" id="question1">
        <h2 id="question1Text"></h2>
        <div class="button-group">
          <button
            class="cute-btn"
            onclick="moveButton(this)"
            id="yesBtn1"
          ></button>
          <button
            class="cute-btn"
            onclick="moveButton(this)"
            id="noBtn1"
          ></button>
        </div>
        <!-- CUSTOMIZE: Secret answer text -->
        <div class="secret-answer">
          <button
            class="cute-btn special"
            onclick="showNextQuestion(2)"
            id="secretAnswerBtn"
          ></button>
        </div>
      </section>

      <!-- Second Question (Love Meter) -->
      <section class="question-section hidden" id="question2">
        <h2 id="question2Text"></h2>
        <!-- Love meter settings: min="0" max="10000" -->
        <div class="love-meter">
          <label for="loveMeter" class="sr-only">Love Meter</label>
          <input
            type="range"
            min="0"
            max="10000"
            value="100"
            class="slider"
            id="loveMeter"
          />
          <p>
            <span class="love-value-container"
              ><span id="startText"></span> (<span id="loveValue">100</span
              >%)</span
            >
            <span id="extraLove" class="hidden"></span>
          </p>
        </div>
        <button
          class="cute-btn"
          onclick="showNextQuestion(3)"
          id="nextBtn"
        ></button>
      </section>

      <!-- Final Question -->
      <section class="question-section hidden" id="question3">
        <h2 id="question3Text"></h2>
        <div class="button-group">
          <button
            class="cute-btn final-yes"
            onclick="celebrate()"
            id="yesBtn3"
          ></button>
          <button
            class="cute-btn"
            onclick="moveButton(this)"
            id="noBtn3"
          ></button>
        </div>
      </section>

      <!-- CUSTOMIZE: Celebration message -->
      <section class="celebration hidden" id="celebration">
        <h2 id="celebrationTitle"></h2>
        <p class="celebration-text" id="celebrationMessage"></p>
        <p class="celebration-text" id="celebrationEmojis"></p>
      </section>

      <!-- Share Button -->
      <div class="share-container">
        <button
          id="shareBtn"
          class="share-btn"
          aria-label="Copy shareable link"
        >
          🔗 Share This Page
        </button>
      </div>
    </main>

    <!-- Scripts -->
    <script src="config.js"></script>
    <script src="config-system.js"></script>
    <script src="state.js"></script>
    <script src="theme.js"></script>
    <script src="script.js"></script>
  </body>
</html>