Added new notes

AnzenKodo · Dec 12, 2024 · b162e3d · b162e3d
1 parent c4dc918
commit b162e3d
Showing 1 changed file with 15 additions and 14 deletions.
diff --git a/template/notes.html b/template/notes.html
@@ -202,22 +202,22 @@ <h1 style="text-align: center;">
             <div id="music" style="font-family: serif">
                 <img
                     src="https://i.pinimg.com/736x/ae/e8/13/aee8139ce7d5f4d6cccd6cded42d4ef8.jpg"
-                    width="45%" align="left" style="padding-right: 1rem"
+                    align="left" style="padding-right: 1rem; margin-bottom: 1rem;"
                 />
                 <p style="font-size: 1.5rem">Young and Beautiful</br>
                   <small>Released in 23 April 2013</small></p>
                 <div id="singers" style="line-height: 1.5rem">
-                    <input type="radio" name="music_name" value="og" checked/>
-                    <label for="og">Lana Del Ray - Original</label><br />
-                    <input type="radio" name="music_name" value="kurt" />
-                    <label for="kurt">Kurt Cobain - AI (Died in 5 April 1994)</label><br />
-                    <input type="radio" name="music_name" value="rose" />
-                    <label for="rose">Rose from BLACKPINK - AI (Korean Singer)</label><br />
-                    <input type="radio" name="music_name" value="marina" />
-                    <label for="marina">Marina Diamandis - AI</label>
+                    <span><input type="radio" name="music_name" value="og" checked/> <label for="og">Lana Del Ray - Original</label></span>
+                    <span><input type="radio" name="music_name" value="kurt" /> <label for="kurt">Kurt Cobain - AI (Died in 5 April 1994)</label></span>
+                    <span><input type="radio" name="music_name" value="rose" /> <label for="rose">Rose from BLACKPINK - AI (Korean Singer)</label></span>
+                    <span><input type="radio" name="music_name" value="marina" /> <label for="marina">Marina Diamandis - AI</label><span>
                 </div>
-                <button onclick="play(this)" style="margin-top: 1rem; font-size: 1.4rem; background: #D8472B; color: white; border: #D8472B; padding: .2rem 1rem; text-align: center">Play</button>
+
+                <p><button onclick="play(this)" style="margin-top: 1rem; font-size: 1.4rem; background: #D8472B; color: white; border: #D8472B; padding: .2rem 1rem; text-align: center">Play</button></p>
                 <audio src="https://anzenkodo.github.io/drive/og.mp3"></audio>
+                <style>
+                    #singers span { display: block }
+                </style>
                 <script>
                     const music_urls = {
                       "og": "https://anzenkodo.github.io/drive/og.mp3",
@@ -237,13 +237,14 @@ <h1 style="text-align: center;">
                       }
                     }
 
-                    const singers = document.querySelectorAll("#singers input");
+                    const singers = document.querySelectorAll("#singers span");
                     for (const singer of singers) {
-                      singer.addEventListener("click", (ele) => {
+                      singer.addEventListener("click", () => {
+                          const ele = singer.childNodes[0];
                           ele.checked = true;
-                          if (ele.target.checked) {
+                          if (ele.checked) {
                             const current_time = audio.currentTime;
-                            audio.src = music_urls[ele.target.value];
+                            audio.src = music_urls[ele.value];
                             audio.currentTime = current_time;
                             audio.play()
                             button.textContent = "Pause";