views/index: New home page design

Tailwind CSS
Soundmanager custom bar UI

1 files changed, 253 insertions, 71 deletions

diff --git a/views/index.view.php b/views/index.view.php
index c4f6453..f8f21dd 100644
--- a/views/index.view.php
+++ b/views/index.view.php
@@ -1,99 +1,281 @@
 <?php require __DIR__ . '/partials/header.php'; ?>
 
-            <main>
+<?php require __DIR__ . '/partials/navigator.php'; ?>
 
-                <div class="intro">
 
-                    <h1>Edwin Mattiacci</h1>
+    <h1 class="text-3xl mb-1" style="color: #FF6978;">Let's bring a story to life</h1>
 
-                    <h2>one day ennui was born from uniformity - motte</h2>
+    <h2 class="text-xl font-normal text-grey-darkest mb-6 leading-normal">
+        Strong voice for narration, trailers, storytelling,  and more.
+    </h2>
 
-                    <br>
 
-                    <div class="playerbox">
-                        <div class="left">
-                            <ul class="graphic">
-                                <li><a href="/audio/narrative.mp3"><p>&nbsp;Narrative</p></a></li>
-                                <li><a href="/audio/reading.mp3"><p>&nbsp;Dramatic</p></a></li>
-                             </ul>
-                        </div>
-                        <div class="right">
-                            <ul class="graphic">
-                                <li><a href="/audio/commercial.mp3"><p>&nbsp;Commercial</p></a></li>
-                                <li><a href="/audio/prologue.mp3"><p>&nbsp;Prologue</p></a></li>
-                            </ul>
+
+    <h1 class="text-xl text-grey-darkest mb-2">Prologue</h1>
+
+    <p class="text-grey-darkest mb-3 leading-normal">
+        Focused introductory elements for literary, dramatic, and musical arts.
+    </p>
+
+    <noscript>
+        <audio controls>
+            <source src="audio/prologue.mp3" type="audio/mp3">
+            Your browser does not support the audio element.
+        </audio>
+    </noscript>
+
+    <div class="sm2-bar-ui compact shadow-md mb-6 border border-grey">
+
+        <div class="bd sm2-main-controls">
+
+            <div class="sm2-inline-element sm2-button-element">
+                <div class="sm2-button-bd">
+                    <a href="#play" class="sm2-inline-button sm2-icon-play-pause">Play / Pause</a>
+                </div>
+            </div>
+
+            <div class="sm2-inline-element sm2-inline-status">
+
+                <div class="sm2-progress">
+                    <div class="sm2-row">
+                        <div class="sm2-inline-time">0:00</div>
+                        <div class="sm2-progress-bd">
+                            <div class="sm2-progress-track">
+                                <div class="sm2-progress-bar"></div>
+                                <div class="sm2-progress-ball"><div class="icon-overlay"></div></div>
+                            </div>
                         </div>
+                        <div class="sm2-inline-duration">0:00</div>
                     </div>
+                </div>
+
+            </div>
+
+            <div class="sm2-inline-element sm2-button-element sm2-volume">
+                <div class="sm2-button-bd">
+                    <span class="sm2-inline-button sm2-volume-control volume-shade"></span>
+                    <a href="#volume" class="sm2-inline-button sm2-volume-control">volume</a>
+                </div>
+            </div>
+
+            <a href="#" class="sm2-inline-element sm2-button-element">
+                <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/..' . '/public/icons/feathericons/download.svg') ?>
+            </a>
+
+        </div>
+
+        <div class="bd sm2-playlist-drawer sm2-element">
+
+            <div class="sm2-playlist-wrapper">
+                <ul class="sm2-playlist-bd">
+                    <li class="selected"><a href="/audio/prologue.mp3">Prologue</a></li>
+                </ul>
+            </div>
+
+        </div>
 
-                    <div class="icon-container">
-
-                        <a id="show-faq" aria-label="Frequently Asked Questions" href="#">
-                            <span class="frame">
-                                <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/fonts/ionicons/md-list-box.svg'); ?>
-                                <br>
-                                <p class="frame-info">FAQ</p>
-                            </span>
-                        </a>
-
-                        <a id="show-demo" aria-label="Demos" href="#">
-                            <span class="frame">
-                                <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/fonts/ionicons/md-microphone.svg'); ?>
-                                <br>
-                                <p class="frame-info">Demos</p>
-                            </span>
-                        </a>
-
-                        <a id="show-projects" aria-label="Projects" href="#">
-                            <span class="frame">
-                                <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/fonts/ionicons/md-filing.svg'); ?>
-                                <br>
-                                <p class="frame-info">Projects</p>
-                            </span>
-                         </a>
-
-                        <div id="overlay-faq" class="overlay">
-                            <div id="close-faq" class="closeButton">&times;</div>
-                            <div class="overlay-container">
-
-                                <h1>Frequently Asked Question</h1>
-
-                                <ul>
-                                    <li>
-                                        <b>Who is Edwin Mattiacci?</b>
-                                        <p> I'm a voiceover artist specializing in low to mid-range voiceovers.</p>
-                                    </li>
-                                </ul>
+    </div>
 
+
+
+    <h1 class="text-xl text-grey-darkest mb-2">Narrative</h1>
+
+    <p class="text-grey-darkest mb-3 leading-normal">
+        Spoken or written accounts of connected events.
+    </p>
+
+    <noscript>
+        <audio controls>
+            <source src="audio/narrative.mp3" type="audio/mp3">
+            Your browser does not support the audio element.
+        </audio>
+    </noscript>
+
+    <div class="sm2-bar-ui compact shadow-md mb-6 border border-grey">
+
+        <div class="bd sm2-main-controls">
+
+            <div class="sm2-inline-element sm2-button-element">
+                <div class="sm2-button-bd">
+                    <a href="#play" class="sm2-inline-button sm2-icon-play-pause">Play / Pause</a>
+                </div>
+            </div>
+
+            <div class="sm2-inline-element sm2-inline-status">
+
+                <div class="sm2-progress">
+                    <div class="sm2-row">
+                        <div class="sm2-inline-time">0:00</div>
+                        <div class="sm2-progress-bd">
+                            <div class="sm2-progress-track">
+                                <div class="sm2-progress-bar"></div>
+                                <div class="sm2-progress-ball"><div class="icon-overlay"></div></div>
                             </div>
                         </div>
+                        <div class="sm2-inline-duration">0:00</div>
+                    </div>
+                </div>
+
+            </div>
+
+            <div class="sm2-inline-element sm2-button-element sm2-volume">
+                <div class="sm2-button-bd">
+                    <span class="sm2-inline-button sm2-volume-control volume-shade"></span>
+                    <a href="#volume" class="sm2-inline-button sm2-volume-control">volume</a>
+                </div>
+            </div>
+
+            <a href="#" class="sm2-inline-element sm2-button-element">
+                <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/..' . '/public/icons/feathericons/download.svg') ?>
+            </a>
+
+        </div>
+
+        <div class="bd sm2-playlist-drawer sm2-element">
+
+            <div class="sm2-playlist-wrapper">
+                <ul class="sm2-playlist-bd">
+                    <li class="selected"><a href="/audio/narrative.mp3">Narrative</a></li>
+                </ul>
+            </div>
 
-                        <div id="overlay-demo" class="overlay">
-                            <div id="close-demo" class="closeButton">&times;</div>
-                            <div class="overlay-container">
+        </div>
 
-                            <h1>Demos</h1>
-                            <p>Nothing to see here yet! In the meantime check out my
-                                <a class="link__underline" href="https://www.youtube.com/c/EdwinMattiacci" rel="noopener noreferrer">Youtube Channel</a>
-                            </p>
+    </div>
 
+
+
+    <h1 class="text-xl text-grey-darkest mb-2">Dramatic</h1>
+
+    <p class="text-grey-darkest mb-3 leading-normal">
+        Sudden and striking narrative elements.
+    </p>
+
+    <noscript>
+        <audio controls>
+            <source src="audio/dramatic.mp3" type="audio/mp3">
+            Your browser does not support the audio element.
+        </audio>
+    </noscript>
+
+    <div class="sm2-bar-ui compact shadow-md mb-6 border border-grey">
+
+        <div class="bd sm2-main-controls">
+
+            <div class="sm2-inline-element sm2-button-element">
+                <div class="sm2-button-bd">
+                    <a href="#play" class="sm2-inline-button sm2-icon-play-pause">Play / Pause</a>
+                </div>
+            </div>
+
+            <div class="sm2-inline-element sm2-inline-status">
+
+                <div class="sm2-progress">
+                    <div class="sm2-row">
+                        <div class="sm2-inline-time">0:00</div>
+                        <div class="sm2-progress-bd">
+                            <div class="sm2-progress-track">
+                                <div class="sm2-progress-bar"></div>
+                                <div class="sm2-progress-ball"><div class="icon-overlay"></div></div>
                             </div>
                         </div>
+                        <div class="sm2-inline-duration">0:00</div>
+                    </div>
+                </div>
+
+            </div>
+
+            <div class="sm2-inline-element sm2-button-element sm2-volume">
+                <div class="sm2-button-bd">
+                    <span class="sm2-inline-button sm2-volume-control volume-shade"></span>
+                    <a href="#volume" class="sm2-inline-button sm2-volume-control">volume</a>
+                </div>
+            </div>
+
+            <a href="#" class="sm2-inline-element sm2-button-element">
+                <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/..' . '/public/icons/feathericons/download.svg') ?>
+            </a>
+
+        </div>
+
+        <div class="bd sm2-playlist-drawer sm2-element">
+
+            <div class="sm2-playlist-wrapper">
+                <ul class="sm2-playlist-bd">
+                    <li class="selected"><a href="/audio/dramatic.mp3">Dramatic</a></li>
+                </ul>
+            </div>
+
+        </div>
 
-                        <div id="overlay-projects" class="overlay">
-                            <div id="close-projects" class="closeButton">&times;</div>
-                            <div class="overlay-container">
+    </div>
 
-                             <h1>Projects</h1>
-                             <p>Nothing to see here yet! In the meantime check out my
-                                <a class="link__underline" href="https://www.youtube.com/c/EdwinMattiacci" rel="noopener noreferrer">Youtube Channel</a>
-                            </p>
 
+
+
+    <h1 class="text-xl text-grey-darkest mb-2">Commercial</h1>
+
+    <p class="text-grey-darkest mb-3 leading-normal">
+        Old school narrative commercial style.
+    </p>
+
+    <noscript>
+        <audio controls>
+            <source src="audio/commercial.mp3" type="audio/mp3">
+            Your browser does not support the audio element.
+        </audio>
+    </noscript>
+
+    <div class="sm2-bar-ui compact shadow-md border border-grey">
+
+        <div class="bd sm2-main-controls">
+
+            <div class="sm2-inline-element sm2-button-element">
+                <div class="sm2-button-bd">
+                    <a href="#play" class="sm2-inline-button sm2-icon-play-pause">Play / Pause</a>
+                </div>
+            </div>
+
+            <div class="sm2-inline-element sm2-inline-status">
+
+                <div class="sm2-progress">
+                    <div class="sm2-row">
+                        <div class="sm2-inline-time">0:00</div>
+                        <div class="sm2-progress-bd">
+                            <div class="sm2-progress-track">
+                                <div class="sm2-progress-bar"></div>
+                                <div class="sm2-progress-ball"><div class="icon-overlay"></div></div>
                             </div>
                         </div>
-
+                        <div class="sm2-inline-duration">0:00</div>
                     </div>
                 </div>
 
-            </main>
+            </div>
+
+            <div class="sm2-inline-element sm2-button-element sm2-volume">
+                <div class="sm2-button-bd">
+                    <span class="sm2-inline-button sm2-volume-control volume-shade"></span>
+                    <a href="#volume" class="sm2-inline-button sm2-volume-control">volume</a>
+                </div>
+            </div>
+
+            <a href="#" class="sm2-inline-element sm2-button-element">
+                <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/..' . '/public/icons/feathericons/download.svg') ?>
+            </a>
+
+        </div>
+
+        <div class="bd sm2-playlist-drawer sm2-element">
+
+            <div class="sm2-playlist-wrapper">
+                <ul class="sm2-playlist-bd">
+                    <li class="selected"><a href="/audio/commercial.mp3">Commercial</a></li>
+                </ul>
+            </div>
+
+        </div>
+
+    </div>
 
 <?php require __DIR__ . '/partials/footer.php'; ?>