diff options
-rw-r--r-- | views/index.view.php | 324 |
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> Narrative</p></a></li> - <li><a href="/audio/reading.mp3"><p> Dramatic</p></a></li> - </ul> - </div> - <div class="right"> - <ul class="graphic"> - <li><a href="/audio/commercial.mp3"><p> Commercial</p></a></li> - <li><a href="/audio/prologue.mp3"><p> 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">×</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">×</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">×</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'; ?> |