Add audio/player

govfresh · Nov 22, 2024 · 5e85ae2 · 5e85ae2
1 parent 43df044
commit 5e85ae2
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 9 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/assets/.DS_Store b/assets/.DS_Store
diff --git a/assets/audio/oco.mp3 b/assets/audio/oco.mp3
diff --git a/assets/img/.DS_Store b/assets/img/.DS_Store
diff --git a/css/style.css b/css/style.css
@@ -201,7 +201,7 @@ h1, h2, h3, .btn {
     line-height: inherit;
 }
 
-.lead {
+.lead, .small {
     font-family: "Public Sans Thin", sans-serif !important;
 }
 
@@ -214,4 +214,12 @@ h1, h2, h3, .btn {
     color: #000 !important;
     background-color: #fff !important;
     border-color: #fff !important;
+}
+
+.plyr {
+    width: 100%;
+}
+
+:root {
+    --plyr-color-main: #1ac266;
 }
diff --git a/index.html b/index.html
@@ -101,8 +101,7 @@
     <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
       <!-- Custom CSS -->
     <link href="css/style.css" rel="stylesheet">
-      <!-- Custom CSS -->
-    <link href="css/style.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
       <!-- Font Awesome -->
     <link href="assets/font-awesome/css/fontawesome.css" rel="stylesheet" />
     <link href="assets/font-awesome/css/brands.css" rel="stylesheet" />
@@ -127,18 +126,28 @@ <h2>About OCOs</h2>
             <p class="lead fs-4">Learn about open civic organizations.</p>
           </div>
         </div>
-        <div class="row border-bottom pb-5 mb-5">
+        <div class="row pb-5">
           <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
             <a
               href="https://docs.google.com/document/d/1lBy6HenXP_UzAPuzAOZZRckQ3nqy2H4NOoZLeYJAM6U/edit?usp=sharing"
               class="btn btn-outline-primary mt-2 btn-lg py-2 px-3"
               target="_blank">Paper</a>
-              <a
+            <a
               href="https://docs.google.com/presentation/d/1Q6fx633CtbETI0lcFF9gtlOqW9g_RliV0oxTwi4nLeo/edit?usp=sharing"
               class="btn btn-outline-primary mt-2 btn-lg py-2 px-3"
               target="_blank">Deck</a>
           </div>
-
+        </div>
+        <div class="row border-bottom pb-5 mb-5">
+          <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
+            <p class="lead fs-4">Listen:</p>
+            <div class="plyr">
+              <audio id="player" controls>
+                <source src="assets/audio/oco.mp3" type="audio/mp3" />
+              </audio>
+            </div>
+            <p class="small mt-3">(powered by Google NotebookLM)</p>
+          </div>
         </div>
         <div class="row mt-5">
           <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
@@ -153,8 +162,8 @@ <h2>Go OCO</h2>
               </li>
               <li class="lead">
                 Building
-              </li>              
-            </ul>                
+              </li>
+            </ul>
             <a href="https://forms.gle/R3MXHJzbYL272gkW9" class="btn btn-outline-primary mt-2 btn-lg py-2 px-3">Contact us</a>
           </div>
         </div>
@@ -173,4 +182,7 @@ <h2>Go OCO</h2>
       integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
       src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js">
       <script>
-    </script>
+    </script>
+    <script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
+  </body>
+</html>