New Features

* Implements Terminal

1 files changed, 53 insertions, 17 deletions

diff --git a/index.html b/index.html
index 98bc7ef..f49eff4 100644
--- a/index.html
+++ b/index.html
@@ -16,29 +16,32 @@
     <div class="modal" id="intro-modal">
       <div class="modal-bg modal-exit"></div>
       <div class="modal-container">
-        <h3 class="text-center">Welcome to Retrowave Player</h3>
-        <p class="mt-5">Here are the controls:</p>
+        <h3 class="text-center">WELCOME TO RETROWAVE PLAYER</h3>
+        <p class="mt-5">HERE ARE THE CONTROLS:</p>
         <h4 class="mt-5">
-          Play/Pause <span class="controls">SPACE or Click or Touch</span>
+          PLAY/PAUSE <span class="controls">SPACE OR CLICK OR TOUCH</span>
         </h4>
         <h4 class="mt-5">
-          Volume Up <span class="controls">w or Swipe Up</span>
+          VOLUME UP <span class="controls">W OR SWIPE UP</span>
         </h4>
         <h4 class="mt-5">
-          Volume Down <span class="controls">s or Swipe Down</span>
+          VOLUME DOWN <span class="controls">S OR SWIPE DOWN</span>
         </h4>
         <h4 class="mt-5">
-          Next Track<span class="controls"> n or Press the Refresh Button</span>
+          NEXT TRACK<span class="controls"> N OR PRESS THE REFRESH BUTTON</span>
         </h4>
         <h4 class="mt-5">
-          Toggle Controls<span class="controls"> h</span>
+          TOGGLE CONTROLS<span class="controls"> H</span>
+        </h4>
+        <h4 class="mt-5">
+          OPEN TERMINAL<span class="controls"> T</span>
         </h4>
         <p class="mt-5">
-          (You can download the music history of your current browser by
-          clicking the history link on the player)
+          (YOU CAN DOWNLOAD THE MUSIC HISTORY OF YOUR CURRENT BROWSER BY
+          CLICKING THE HISTORY LINK ON THE PLAYER)
         </p>
-        <p class="mt-5">All the music is fetched from retrowave.ru</p>
-        <div id="warning">⚠️ WARNING: This application contains strobing/flashing lights</div>
+        <p class="mt-5">ALL THE MUSIC IS FETCHED FROM RETROWAVE.RU</p>
+        <div id="warning">⚠️ WARNING: THIS APPLICATION CONTAINS STROBING/FLASHING LIGHTS</div>
         <button class="modal-close modal-exit" id="initButton">X</button>
       </div>
     </div>
@@ -78,22 +81,23 @@
           </svg>
         </div>
         <div class="no-pause buttons refresh toggleable" title="NEXT TRACK">🔃</div>
+        <div class="no-pause buttons terminal-btn toggleable" title="OPEN TERMINAL">⌨️</div>
         <div class="title-content">
-          <div class="intro">Now Playing</div>
+          <div class="intro">NOW PLAYING</div>
           <hr />
-          <h3 id="track-name">Retrowave Player</h3>
+          <h3 id="track-name">RETROWAVE PLAYER</h3>
         </div>
         <div class="gradient-overlay"></div>
         <div class="color-overlay"></div>
         <div class="footer toggleable">
-          <div title="DOWNLOAD YOUR PLAYLIST HISTORY" id="history" class="no-pause footer-items">history</div>
+          <div title="DOWNLOAD YOUR PLAYLIST HISTORY" id="history" class="no-pause footer-items">HISTORY</div>
           <div id="source">
             <a
               title="SOURCE CODE"
               class="no-pause footer-items"
               href="https://git.indrajith.dev/retrowave-player/"
               target="_blank"
-              >source code</a
+              >SOURCE CODE</a
             >
           </div>
           <div id="retrowaveru" class="no-pause">
@@ -102,7 +106,7 @@
               class="no-pause footer-items"
               href="http://retrowave.ru/"
               target="_blank"
-              >retrowave.ru</a
+              >RETROWAVE.RU</a
             >
           </div>
           <div id="guestbook" class="no-pause">
@@ -111,13 +115,45 @@
               class="no-pause footer-items"
               href="https://indrajith.atabook.org/"
               target="_blank"
-              >guestbook</a
+              >GUESTBOOK</a
             >
           </div>
         </div>
         <!-- <div id="upload-info" class="no-pause" title="Upload a playlist (downloaded from history)">Upload</div> -->
       </div>
     </div>
+    <div id="terminal-overlay" class="terminal-overlay hidden">
+      <div class="terminal-window">
+        <div class="terminal-header">
+          <span class="terminal-title">Retrowave Terminal</span>
+          <span class="terminal-close">□</span>
+        </div>
+        <div class="terminal-content">
+          <div id="terminal-output">
+            <div class="terminal-line">Welcome to Retrowave Terminal</div>
+            <div class="terminal-line">Type 'help' for available commands</div>
+            <div class="terminal-line"></div>
+            <div class="terminal-line">Available commands:</div>
+            <div class="terminal-line">  help          - Show this help message</div>
+            <div class="terminal-line">  play          - Start/resume playback</div>
+            <div class="terminal-line">  pause         - Pause playback</div>
+            <div class="terminal-line">  next          - Skip to next track</div>
+            <div class="terminal-line">  volume [0-10] - Set volume (0-10)</div>
+            <div class="terminal-line">  status        - Show current track info</div>
+            <div class="terminal-line">  history       - Download playlist history</div>
+            <div class="terminal-line">  effect        - Change visual effect</div>
+            <div class="terminal-line">  fullscreen    - Toggle fullscreen mode</div>
+            <div class="terminal-line">  clear         - Clear terminal</div>
+            <div class="terminal-line">  exit          - Close terminal</div>
+            <div class="terminal-line"></div>
+          </div>
+          <div class="terminal-input-line">
+            <span class="terminal-prompt">indrajith@retrowave:$ </span>
+            <input type="text" id="terminal-input" class="terminal-input" autocomplete="off" spellcheck="false">
+          </div>
+        </div>
+      </div>
+    </div>
     <div id="codef-canvas"></div>
     <div class="OVR hidden"></div>
     <div class="ERRORS hidden"></div>