Optimized everything

1 files changed, 65 insertions, 39 deletions

diff --git a/index.html b/index.html
index ff1c5ec..0424e8f 100644
--- a/index.html
+++ b/index.html
@@ -95,45 +95,60 @@
                 style="backface-visibility: visible; -webkit-backface-visibility: visible; pointer-events: all">
             <audio style="position: fixed; bottom: 4px; left: 25%; width: 50%; height:75px; z-index: 33; transform: translate(0, 0) !important; opacity: 1 !important;"
                    id="audio" controls data-ignore preload="auto" src="media/song.mp3"></audio>
-            <p data-markdown>## Analyse</p>
-            <section>
-                <span>Now, Arab sheikhs on the burning sands<br></span>
-                <span>Come into their harems and clap their hands<br></span>
-                <span>Said, "Come on, girls, are you ready to play?<br></span>
-                <span>Let's have a little more of that swingin' today."<br></span>
-                <span>Now, in the land of Fu Manchu<br></span>
-                <span>The girls all now do the Suzie-Q<br></span>
-                <span>Clap their hands in the center of the floor<br></span>
-                <span>Saying, "Ching, ching, chop-suey, swing some more!"<br></span>
-            </section>
-            <section>
-                <span>Now, geisha girls in old Japan<br></span>
-                <span>Wink behind their peacock fans<br></span>
-                <span>Since they learned to say, "Yeah!<br></span>
-                <span>Let's swing it like Amelican's swing swing dance!"<br></span>
-            </section>
-            <section>
-                <span>Now, Gypsy caravans have changed their mode<br></span>
-                <span>They truck down the Romany road<br></span>
-                <span>With their hi-de-hoes, and their hey-hey-diddle<br></span>
-                <span>Doin' the swing on the Gypsy fiddle<br></span>
-            </section>
-            <section>
-                <span>Them eastern wisemen know the story<br></span>
-                <span>Of the swing with Oriental glory<br></span>
-                <span>They stroke their beards and grin<br></span>
-                <span>Sayin', "Swing, little children, till the dawn comes in!"<br></span>
-                <span>Now, geisha girls in old Japan<br></span>
-                <span>Wink behind their peacock fans<br></span>
-                <span>Since they learned to say, "Yeah!<br></span>
-                <span>Let's swing it like Amelican's swing swing dance!"<br></span>
-            </section>
-            <section>
-                <span>Gypsy caravans have changed their mode<br></span>
-                <span>They truck down the Romany road<br></span>
-                <span>With their hi-de-hoes, and their hey-hey-diddle<br></span>
-                <span>Doin' the swing on the Gypsy fiddle<br></span>
-            </section>
+            <table style="font-size: 17px;">
+                <tr>
+                    <td>
+                        <span style="color: green">[INTRO]<br></span>
+                        <span style="color: green">1. Strophe (0:08):<br></span>
+                        <span>Now, Arab sheikhs on the burning sands<br></span>
+                        <span>Come into their harems and clap their hands<br></span>
+                        <span>Said, "Come on, girls, are you ready to play?<br></span>
+                        <span>Let's have a little more of that swingin' today."<br><br></span>
+                        <span style="color: green">2. Strophe (0:17):<br></span>
+                        <span>Now, in the land of Fu Manchu<br></span>
+                        <span>The girls all now do the Suzie-Q<br></span>
+                        <span>Clap their hands in the center of the floor<br></span>
+                        <span>Saying, "Ching, ching, chop-suey, swing some more!"<br><br></span>
+                        <span style="color: green">[Saxophon Solo, Melodie 1 (0:26)]<br></span>
+                        <span style="color: green">3. Strophe (0:43):<br></span>
+                        <span>Now, geisha girls in old Japan<br></span>
+                        <span>Wink behind their peacock fans<br></span>
+                        <span>Since they learned to say, "Yeah!<br></span>
+                        <span>Let's swing it like Amelican's swing swing dance!"<br></span>
+                        <span style="color: green">[Saxophon Solo, Melodie 2 (0:51)]<br></span>
+                    </td>
+                    <td>
+                        <span style="color: green">[BRIDGE 1 (1:08)]<br></span>
+                        <span>Now, Gypsy caravans have changed their mode<br></span>
+                        <span>They truck down the Romany road<br></span>
+                        <span>With their hi-de-hoes, and their hey-hey-diddle<br></span>
+                        <span>Doin' the swing on the Gypsy fiddle<br><br></span>
+                        <span style="color: green">[Saxophon Solo, Melodie 2 (1:25)]<br></span>
+                        <span style="color: green">4. Strophe (1:42):<br></span>
+                        <span>Them eastern wisemen know the story<br></span>
+                        <span>Of the swing with Oriental glory<br></span>
+                        <span>They stroke their beards and grin<br></span>
+                        <span>Sayin', "Swing, little children, till the dawn comes in!"<br><br></span>
+                        <span style="color: green">5. Strophe (1:51):<br></span>
+                        <span>Now, geisha girls in old Japan<br></span>
+                        <span>Wink behind their peacock fans<br></span>
+                        <span>Since they learned to say, "Yeah!<br></span>
+                        <span>Let's swing it like Amelican's swing swing dance!"<br></span>
+                        <span style="color: green">[Saxophon Solo, Melodie 1 (1:59)]<br></span>
+                    </td>
+                    <td>
+                        <span style="color: green">[BRIDGE 2 (2:16)]<br></span>
+                        <span>Gypsy caravans have changed their mode<br></span>
+                        <span>They truck down the Romany road<br></span>
+                        <span>With their hi-de-hoes, and their hey-hey-diddle<br></span>
+                        <span>Doin' the swing on the Gypsy fiddle<br><br></span>
+                        <span style="color: green">[Saxophon Solo, Melodie 2 (2:33)]<br></span>
+                        <span style="color: green">[Fade out (3:00)]<br></span>
+                        <br>
+                        Zeit: <h1 id="time"></h1>
+                    </td>
+                </tr>
+            </table>
         </section>
 
         <section data-markdown>
@@ -175,6 +190,17 @@
       }
     }
   });
+
+  document.getElementById('audio').addEventListener('timeupdate', () => {
+    //document.getElementById('time').innerText = document.getElementById('audio').currentTime.toFixed(0);
+      if (document.getElementById('audio').currentTime.toFixed(0) < 60)
+        document.getElementById('time').innerText = document.getElementById('audio').currentTime.toFixed(0);
+      else {
+        let seconds = Math.floor(document.getElementById('audio').currentTime - Math.floor(document.getElementById('audio').currentTime / 60) * 60);
+        if (seconds < 10) seconds = "0" + seconds;
+        document.getElementById('time').innerText = Number(Math.floor(document.getElementById('audio').currentTime / 60) + "." + seconds);
+      }
+  });
 </script>
 </body>
 </html>