simplify landing page

dandalpiaz · Mar 18, 2024 · 1589af6 · 1589af6
1 parent 8f2a2ed
commit 1589af6
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 59 deletions.
diff --git a/README.md b/README.md
@@ -50,7 +50,6 @@ npx playwright wk http://localhost:8000
 
 ### Next
 
-- Fix demo
 - 100% width? Fixed header?
 - Better focus indicators (contrast)
 - Store access token? Get new token when close to expiration? Based on user action?

diff --git a/index.html b/index.html
@@ -10,7 +10,7 @@
   <link rel="shortcut icon" type="image/png" href="./img/favicon.png">
   <link rel="manifest" href="manifest.json">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/picocss/1.4.4/pico.min.css" integrity="sha512-RAtoAGzPS5T5sUpCfVpkY5EHHDcqEp26rHYNee0Vx4RT1pxJrt3CWQCVD/ekrPdMowT4ybxYvqClqf9v7oWxYw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-  <link rel="stylesheet" type="text/css" href="style.css?v=7">
+  <link rel="stylesheet" type="text/css" href="style.css?v=8">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 </head>
 
@@ -30,12 +30,6 @@ <h1><a href=""><img src="./img/favicon.png" />drive-music-player</a></h1>
 </header>
 
 <main role="main" class="container">
-  <div id="return" style="display: none;">
-    <form onsubmit="submitFolderId(event)">
-      <button class="secondary" type="submit" style="display: block; width: auto; max-width: 182px; margin: auto;"><i class="fa-brands fa-google" style="margin-right: 10px;"></i> Log back in</button>
-    </form>
-  </div>
-
   <div id="intro" style="display: none;">
     <h2>Play Music Files in Google Drive</h2>
     <p>Find and enter the ID for the <a href="https://drive.google.com" target="_blank">Google Drive</a> folder you would like to use and login below. As an example, <code>drive.google.com/drive/folders/12345-abcde</code> has an ID of "12345-abcde". Alternatively, "root" can be used to browse from your top-level folder.</p>
@@ -45,24 +39,6 @@ <h2>Play Music Files in Google Drive</h2>
       <input required type="text" id="parentfolder" name="parentfolder" placeholder="google-drive-folder-id">
       <button class="secondary" type="submit" style="display: inline-block; width: auto; margin-bottom: 3px;"><i class="fa-brands fa-google" style="margin-right: 10px;"></i> Login (test users)</button>
     </form>
-
-    <div id="demo" class="loaded">
-
-      <h3>Demo</h3>
-      <details>
-        <summary><img src="https://f4.bcbits.com/img/a1694811765_16.jpg"/><span>Stevia Sphere - A Mimir (demo tracks) <small>( <a target="_blank" href="https://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a> )</small></span></summary>
-        <button class="track" onclick="playTrack('1XJ67SQiR6y8DhpSTvc26fFmyFEZMeLJ1', this, 'demo')"><i class="fas fa-play"></i> 01 Raccoon Dreams.mp3</button>
-        <button class="track" onclick="playTrack('1guxH0gYq1tbbLyObwPvTeai1ArGUTaUQ', this, 'demo')"><i class="fas fa-play"></i> 02 Bed Full Of Shark Plushies.mp3</button>
-        <button class="track" onclick="playTrack('1nD0vkmQyTQpa8KBg7GqJ9il-46kamrop', this, 'demo')"><i class="fas fa-play"></i> 03 On The Verge Of Autumn.mp3</button>
-      </details>
-
-      <details>
-        <summary><img src="https://f4.bcbits.com/img/a0007547490_16.jpg"/><span>Tovatronica - Paper Boats (demo tracks) <small>( <a target="_blank" href="https://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a> )</small></span></summary>
-        <button class="track" onclick="playTrack('1bbDPBl0ktwigI9iGSPPE3KksI_VPTNvr', this, 'demo')"><i class="fas fa-play"></i> 01 Paper Boats.mp3</button>
-        <button class="track" onclick="playTrack('1XZR6_PHhVbKXs5gexal5i9nMgREl5UoF', this, 'demo')"><i class="fas fa-play"></i> 02 Stardust.mp3</button>
-        <button class="track" onclick="playTrack('1Iz4O3svxBYPEySau9Zw0lx20mIP4q0Rs', this, 'demo')"><i class="fas fa-play"></i> 03 Paper Boats (zkribblez remix).mp3</button>
-      </details>
-    </div>
   </div><!-- end intro -->
 
   <div id="contents"></div>

diff --git a/scripts.js b/scripts.js
@@ -46,8 +46,6 @@ function handleAuthClick(folderId) {
       // only load initial contents on first auth
       if ( !document.getElementById("contents").classList.contains("loaded") ) {
         getContents(folderId, "initial");
-        localStorage.setItem("returning", "true");
-        document.getElementById('return').style.display = 'none';
       }
 
       // set user email and URL
@@ -244,17 +242,6 @@ function playTrack(id, element, type) {
   `;
   playing.innerHTML += spinner;
 
-  // demo track
-  if ( type == "demo" ) {
-    source.src = "https://drive.google.com/uc?id=" + id + "&export=download";
-    audio.load();
-    audio.oncanplay = audio.play();
-    if ( document.getElementById("spinner") ) {
-      document.getElementById("spinner").remove();
-    }
-    return;
-  } 
-
   // user track
   gapi.client.drive.files.get({
     'fileId' : id,
@@ -334,22 +321,16 @@ audio.onplay = function() {
 /* -------PAGE LOAD------- */
 /* ----------------------- */
 
-if ( localStorage.getItem("returning") == "true" && localStorage.getItem("parentfolder") !== null ) {
-  document.getElementById('return').style.display = 'block';
-} else {
-  document.getElementById('intro').style.display = 'block';
-}
+document.getElementById('intro').style.display = 'block';
 
 function changeFolder() {
   // show intro with parentfolder form
-  document.getElementById('return').style.display = 'none';
   document.getElementById('intro').style.display = 'block';
   document.getElementById('parentfolder').focus();
   // reset contents div
   document.getElementById("contents").classList.remove("loaded");
   document.getElementById("contents").innerHTML = "";
   // reset localstorage
-  localStorage.setItem("returning", "false");
   localStorage.removeItem("email");
 }
 

diff --git a/style.css b/style.css
@@ -22,6 +22,10 @@ body {
     margin-bottom: 40px;
 }
 
+main {
+    padding-bottom: 0px !important;
+}
+
 /* header */
 header {
     padding: 0px !important;
@@ -92,22 +96,24 @@ nav {
 
 nav ul {
     display: block;
-    width: 150px;
+    width: 165px;
 }
 
 nav li {
     display: block;
+    padding: 15px;
 }
 
 nav a {
     padding: 0px !important;
     font-size: 15px;
 }
 
-/* adjust contain widths */
+/* adjust container widths */
 .container {
     padding-left: 0px;
     padding-right: 0px;
+    max-width: 920px !important;
 }
 
 @media (max-width: 1199px) {
@@ -395,22 +401,11 @@ audio::-webkit-media-controls-volume-slider {
 }
 */
 
-/* returning user */
-#return {
-    margin-top: 80px;
-    padding-left: 1rem;
-    padding-right: 1rem;
-}
-
 #intro {
     padding-left: 1rem;
     padding-right: 1rem;
 }
 
-main {
-    padding-bottom: 0px !important;
-}
-
 footer {
     padding-top: 0px !important;
 }