aboutsummaryrefslogtreecommitdiff
path: root/app/views
diff options
context:
space:
mode:
Diffstat (limited to 'app/views')
-rw-r--r--app/views/about.view.php7
-rw-r--r--app/views/components/AudioPlayer.php51
-rw-r--r--app/views/contact.view.php88
-rw-r--r--app/views/index.view.php89
-rw-r--r--app/views/partials/footer.php26
-rw-r--r--app/views/partials/header.common.php25
-rw-r--r--app/views/partials/header.error.php3
-rw-r--r--app/views/partials/header.php46
-rw-r--r--app/views/partials/navigator.links.php5
-rw-r--r--app/views/partials/navigator.php79
-rw-r--r--app/views/wall.view.php6
11 files changed, 425 insertions, 0 deletions
diff --git a/app/views/about.view.php b/app/views/about.view.php
new file mode 100644
index 0000000..ae28201
--- /dev/null
+++ b/app/views/about.view.php
@@ -0,0 +1,7 @@
+<?php require __DIR__ . '/partials/header.php'; ?>
+
+ <h2 class="text-xl text-gray-700 mb-6 leading-normal">
+ Edwin is a voiceover artist specializing in low to mid-range voiceovers.
+ </h2>
+
+<?php require __DIR__ . '/partials/footer.php'; ?>
diff --git a/app/views/components/AudioPlayer.php b/app/views/components/AudioPlayer.php
new file mode 100644
index 0000000..d3ba487
--- /dev/null
+++ b/app/views/components/AudioPlayer.php
@@ -0,0 +1,51 @@
+ <div class="sm2-bar-ui bg-white compact shadow-md mb-4 border">
+
+ <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="audio/prologue.mp3" class="sm2-inline-element sm2-button-element" download>
+ <?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/<?php echo $audio; ?>.mp3">Prologue</a></li>
+ </ul>
+ </div>
+
+ </div>
+
+ </div>
diff --git a/app/views/contact.view.php b/app/views/contact.view.php
new file mode 100644
index 0000000..4b4da41
--- /dev/null
+++ b/app/views/contact.view.php
@@ -0,0 +1,88 @@
+<?php require __DIR__ . '/partials/header.php'; ?>
+
+ <?php if (isset($formSuccess)) : ?>
+ <div class="bg-teal-100 border-t-4 border-blue-500 rounded-b text-teal-900
+ px-4 py-3 shadow-md" role="alert">
+ <div class="flex">
+ <div>
+ <p class="font-bold">Your message has been successful.</p>
+ <p class="text-sm">I'll get in touch with you soon.</p>
+ </div>
+ </div>
+ </div>
+ <br>
+ <?php endif; ?>
+
+ <div>
+ <h1 class="text-3xl text-red-700 font-bold mb-3">Contact</h1>
+ <h2 class="text-xl text-gray-800 leading-normal mb-6">
+ Interested in collaborating together?
+ Send a message by using the form below.
+ </h2>
+ </div>
+
+ <form class="w-full max-w-md rounded" method="post" action="/contact/">
+ <div class="flex flex-wrap -mx-3 mb-6">
+
+ <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
+
+ <label class="block uppercase tracking-wide text-gray-700 text-xs
+ font-bold mb-2" for="name">
+ Name
+ </label>
+
+ <input class="shadow-md appearance-none block w-full bg-gray-100
+ text-gray-700 border border-gray-100 rounded py-3 px-4 mb-3
+ leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
+ name="26471" id="name" type="text"
+ value="<?php echo $name ?? '' ?>">
+
+ </div>
+
+ <div class="w-full md:w-1/2 px-3">
+
+ <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
+ for="email">
+ Email (&lowast;)
+ </label>
+
+ <input class="shadow-md appearance-none block w-full bg-gray-100 text-gray-700
+ border <?php echo $border = isset($emailError) ? 'border-red-600' : 'border-gray-100';?>
+ rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white
+ focus:border-gray-500" name="26472" id="email" type="email" required="required"
+ value="<?php echo $email ?? '' ?>">
+
+ <?php if (isset($emailError)) : ?>
+ <p class="text-red-600 text-xs"><?php echo $emailError ?></p>
+ <?php endif; ?>
+
+ </div>
+
+ </div>
+ <div class="flex flex-wrap -mx-3 mb-6">
+ <div class="w-full px-3">
+ <label class="block uppercase tracking-wide text-gray-700 text-xs
+ font-bold mb-2" for="message">
+ Message (&lowast;)
+ </label>
+ <textarea class="shadow-md appearance-none block w-full
+ bg-gray-100 text-gray-700 border border-gray-100
+ rounded py-3 px-4 mb-3 leading-tight focus:outline-none
+ focus:bg-white focus:border-gray-500" name="26473" id="message"
+ rows="4" required="required"><?php echo $message ?? '' ?></textarea>
+ </div>
+ </div>
+
+ <div class="text-center sm:text-left">
+ <button class="shadow bg-blue-400 hover:bg-blue-500
+ focus:shadow-outline focus:outline-none text-white
+ font-bold py-2 px-4 rounded" type="submit">
+ Send Message
+ </button>
+ </div>
+
+ <input type="checkbox" name="agree" tabindex="-1" class="checkbox-agree">
+
+ </form>
+
+<?php require __DIR__ . '/partials/footer.php'; ?>
diff --git a/app/views/index.view.php b/app/views/index.view.php
new file mode 100644
index 0000000..29f17b4
--- /dev/null
+++ b/app/views/index.view.php
@@ -0,0 +1,89 @@
+<?php require __DIR__ . '/partials/header.php'; ?>
+
+ <h1 class="text-3xl mb-1 text-red-700 font-bold">Let's bring a story to life</h1>
+
+ <h2 class="text-xl font-normal text-gray-800 mb-6 leading-normal">
+ Strong voice for narration, trailers, storytelling, and more.
+ </h2>
+
+ <h1 class="text-xl text-gray-800 mb-2 font-bold">Prologue</h1>
+
+ <p class="text-gray-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>
+
+
+<?php
+$audio = 'prologue';
+require __DIR__ . '/components/AudioPlayer.php';
+?>
+
+
+ <h1 class="text-xl text-gray-800 mb-2 font-bold">Narrative</h1>
+
+ <p class="text-gray-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>
+
+
+<?php
+$audio = 'narrative';
+require __DIR__ . '/components/AudioPlayer.php';
+?>
+
+
+ <h1 class="text-xl text-gray-800 mb-2 font-bold">Dramatic</h1>
+
+ <p class="text-gray-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>
+
+
+<?php
+$audio = 'dramatic';
+require __DIR__ . '/components/AudioPlayer.php';
+?>
+
+
+ <h1 class="text-xl text-gray-800 mb-2 font-bold">Commercial</h1>
+
+ <p class="text-gray-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>
+
+
+<?php
+$audio = 'commercial';
+require __DIR__ . '/components/AudioPlayer.php';
+?>
+
+
+<?php require __DIR__ . '/partials/footer.php'; ?>
diff --git a/app/views/partials/footer.php b/app/views/partials/footer.php
new file mode 100644
index 0000000..e2f2a6b
--- /dev/null
+++ b/app/views/partials/footer.php
@@ -0,0 +1,26 @@
+</div>
+</section>
+
+<footer class ="bg-gray-100 border-t text-center">
+ <div class="mx-auto p-6 max-w-md text-gray-800">
+ <p class="mb-2 text-sm">
+ <a href="mailto:<?php echo mb_encode_numericentity('edwinmattiacci@yahoo.com', array(0x000000, 0x10ffff, 0, 0xffffff), 'UTF-8'); ?>" class="underline">
+ Email
+ </a>
+ </p>
+ <p>&copy; Copyright <?php echo date('Y');?>. Edwin Mattiacci Voiceover</p>
+ </div>
+</footer>
+
+</div>
+</div>
+
+<a href="/" class="hover:bg-gray-300 w-24 min-h-full hidden md:block logo-container no-underline border-l"></a>
+
+</div>
+
+<script src="/dist/soundmanager2-nodebug-jsmin.js"></script>
+<script src="/dist/bar-ui.js"></script>
+
+</body>
+</html>
diff --git a/app/views/partials/header.common.php b/app/views/partials/header.common.php
new file mode 100644
index 0000000..3a21e8e
--- /dev/null
+++ b/app/views/partials/header.common.php
@@ -0,0 +1,25 @@
+<!-- Common Meta -->
+<meta charset="utf-8">
+<meta name="author" content="Edwin Mattiacci">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+
+<!-- Stylesheets -->
+<link href="/dist/tailwind.min.css" rel="stylesheet">
+<link href="/dist/app.css" rel="stylesheet">
+<link href="/dist/bar-ui.css" rel="stylesheet">
+
+<!-- Favicons -->
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAAXRQTFRFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQEBAgICAwMDBQUFBgYGBwcHCAgIDAwMDQ0NDg4OEBAQEhISFBQUFRUVFhYWFxcXGBgYGRkZGhoaGxsbHR0dHh4eHx8fIiIiIyMjJCQkJSUlJiYmKCgoKSkpKioqLS0tLi4uMTExPj4+QkJCQ0NDSEhITU1NT09PUVFRVFRUVVVVY2NjZGRkZWVlZmZmbGxsbW1tbm5udHR0dnZ2d3d3eXl5fHx8gICAg4ODhISEhoaGioqKjY2Njo6Oj4+PkpKSm5ubnZ2doaGhpaWlp6enrq6usrKytLS0tbW1tra2urq6u7u7vr6+xcXFxsbGycnJzs7O0NDQ1dXV1tbW2dnZ29vb4ODg4+Pj5OTk6Ojo6enp6urq7e3t7u7u7+/v9fX19vb29/f3+Pj4+fn5+vr6/Pz8/f39/v7+////rLgqfAAAABJ0Uk5TAAgPHR5fbo+8zc/p6vb3+vv8m7r3iAAAAXpJREFUOI29k2dbwjAUhcMuQym3IhQninsrihP3BNziQlFRceMAFfLnbSkkKfLgN++nnpO3meciJJfOyNkcwJTDxhl1qFgag4WHX8VbDBplXGuqJq7gdlGk2qTN/2+ik/eEz2IrrXQhkzyHoYoYg1cY49yJjxhVBoT0ZiKdezhf63QVsx4Z7US13CjAuUgsuxFxFO+6V4BLD/U4ZC0D1FHPivjKAI+gMgD/CAiCGpA1C/Tv73qhswBceGTdrAJGUm9+aEwowLELJr6TPhXQdI2DAKH8+NccQBifutV72MbxRvBGPzF+3/JA9y1eKtmk/yEXEaF+ejMyLkLDAU50lB5zMZ3ZaVM++6LZ16lf9yBufOQSq6MDQ4FQEqfmawhAHssdvJM28PScwdnEpLPo8sxzC71r8Rece4wttNOLtLKBkWZZxpmZWtbh2MhJFcTpMVZLkWNCWwaQQsvGHmBWDcixVzUOBI4Oh6lSGkfdek6nQESh9f5u3srt/wPQtYzk6RXGwAAAAABJRU5ErkJggg==">
+<link rel="icon" type="image/png" sizes="16x16" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAANVQTFRFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQEBAgICAwMDBQUFBgYGBwcHCgoKDg4ODw8PEBAQEhISFBQUFRUVHBwcHR0dHx8fLS0tLi4uLy8vMTExNTU1Nzc3OTk5PT09QEBARUVFUlJSVlZWV1dXYGBgYmJiampqbm5ucXFxfHx8goKCioqKmJiYnJycnp6eo6Ojp6enqKiorKysra2ttbW1t7e3ubm5vb29wsLCzs7O0NDQ0dHR1NTU3Nzc3t7e4ODg/Pz8/f39////AnB0LQAAAAp0Uk5TAAllhM3O9PX4+WINhBsAAACoSURBVBiVbY/XEoIwEEU3oQexoFhBxN57LyiW/P8nmcS86JiXPXsmM3svAMKaRcSzNIwAkGIw9rodlw1DQYB1Bpn56zlzGOgYVP65nFAae5xUMPmoPii9lTiZQL4F+StCv8JFMQykmC4LZ0r37nYsRTOOGptV0I7rUjiTy6DmD68jmwt+Nts/3ZNjLy3OimAkf1jnyCeYiE5Su4XYWfRPObsVEVnut/4bkaoVKcOXcTgAAAAASUVORK5CYII=">
+<link rel="manifest" href="/site.webmanifest">
+<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+<meta name="msapplication-TileColor" content="#2b5797">
+<meta name="theme-color" content="#ffffff">
+
+<!-- RSS -->
+<link href="/posts/index.xml" rel="alternate" type="application/rss+xml" title="Edwin Mattiacci" />
+
+<noscript>
+ <style>.sm2-bar-ui { display: none; }</style>
+</noscript>
diff --git a/app/views/partials/header.error.php b/app/views/partials/header.error.php
new file mode 100644
index 0000000..9f00aa9
--- /dev/null
+++ b/app/views/partials/header.error.php
@@ -0,0 +1,3 @@
+
+<?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/bootstrap/Bootstrap.php'; ?>
+<?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/partials/header.php'; ?>
diff --git a/app/views/partials/header.php b/app/views/partials/header.php
new file mode 100644
index 0000000..1809de0
--- /dev/null
+++ b/app/views/partials/header.php
@@ -0,0 +1,46 @@
+<?php if (strpos($_SERVER['REQUEST_URI'], 'posts') !== false) { ?>
+
+ <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/bootstrap/Bootstrap.php'; ?>
+ <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/partials/header.common.php'; ?>
+
+ </head>
+
+<?php } else { ?>
+
+ <!DOCTYPE html>
+ <html lang="en-us">
+
+ <head>
+
+ <title>Edwin Mattiacci - <?php title();?></title>
+
+ <meta name="keywords" content="Edwin, Mattiacci, Voice, Voiceover, Narration, Trailers, Commercials">
+ <meta name="description" content="Edwin Mattiacci Voiceover. Narration, Trailers, Commercials, and More.">
+
+ <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/partials/header.common.php'; ?>
+
+ </head>
+
+<?php } ?>
+
+<body class="overflow-y-scroll bg-gray-100">
+
+ <div class="flex min-h-screen max-w-xl mx-auto">
+
+ <a href="/" class="hover:bg-gray-300 w-24 min-h-full hidden md:block logo-container border-r"></a>
+
+ <div class="flex flex-col lg:flex-row min-h-screen w-screen shadow-2xl">
+
+ <div class="w-full max-h-full lg:h-full lg:w-2/5 z-10 lg:shadow-2xl splash-container"></div>
+
+ <div class="w-full lg:w-3/5 h-full border-b border-gray-100">
+
+ <div class="sticky top-0 z-10 bg-gray-100 border-b">
+ <div class="mx-auto px-4 max-w-md">
+ <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/partials/navigator.php'; ?>
+ </div>
+ </div>
+
+ <section class="bg--white--light">
+
+ <div class="container p-6 mx-auto max-w-md">
diff --git a/app/views/partials/navigator.links.php b/app/views/partials/navigator.links.php
new file mode 100644
index 0000000..f023e32
--- /dev/null
+++ b/app/views/partials/navigator.links.php
@@ -0,0 +1,5 @@
+
+<a class="<?php echo $navigator->isActiveHome() ?? '' ?>" href="/" onclick="closeNav()">Home</a>
+<a class="<?php echo $navigator->isActive('/posts/') ?? '' ?>" href="/posts/" onclick="closeNav()">Posts</a>
+<a class="<?php echo $navigator->isActive('/feedback/') ?? '' ?>" href="/feedback/" onclick="closeNav()">Feedback</a>
+<a class="<?php echo $navigator->isActive('/contact/') ?? '' ?>" href="/contact/" onclick="closeNav()">Contact</a>
diff --git a/app/views/partials/navigator.php b/app/views/partials/navigator.php
new file mode 100644
index 0000000..78bb138
--- /dev/null
+++ b/app/views/partials/navigator.php
@@ -0,0 +1,79 @@
+<nav class="flex -mx-2">
+
+<a class="w-1/5 px-2 py-4 text-center" href="/" title="Home">
+
+ <div class="inline-block text-gray-700 hover:text-gray-900 no-underline
+ font-bold tracking-wider uppercase text-xs pb-1 text-center">
+ <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT']
+ . '/..'
+ . '/public/icons/feathericons/user.svg') ?>
+ <p class="py-1
+ <?php echo $navigation->isActiveHome() ?? 'text-gray-700' ?> hover:text-gray-900">
+ Home
+ </p>
+ </div>
+
+</a>
+
+<a class="w-1/5 px-2 py-4 text-center" href="/posts/" title="Journal">
+
+ <div class="inline-block text-gray-700 hover:text-gray-900 no-underline
+ font-bold tracking-wider uppercase text-xs pb-1 text-center">
+ <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT']
+ . '/..'
+ . '/public/icons/feathericons/book-open.svg') ?>
+ <p class="py-1
+ <?php echo $navigation->isActive('/posts/') ?? 'text-gray-700' ?> hover:text-gray-900">
+ Journal
+ </p>
+ </div>
+
+</a>
+
+<a class="w-1/5 px-2 py-4 text-center" href="/wall/" title="Wall">
+
+ <div class="inline-block text-gray-700 hover:text-gray-900 no-underline
+ font-bold tracking-wider uppercase text-xs pb-1 text-center">
+ <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT']
+ . '/..'
+ . '/public/icons/feathericons/message-square.svg') ?>
+ <p class="py-1
+ <?php echo $navigation->isActive('/wall/') ?? 'text-gray-700' ?> hover:text-gray-900">
+ Wall
+ </p>
+ </div>
+
+</a>
+
+<a class="w-1/5 px-2 py-4 text-center" href="/about/" title="About">
+
+ <div class="inline-block text-gray-700 hover:text-gray-900 no-underline
+ font-bold tracking-wider uppercase text-xs pb-1 text-center">
+ <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT']
+ . '/..'
+ . '/public/icons/feathericons/help-circle.svg') ?>
+ <p class="py-1
+ <?php echo $navigation->isActive('/about/') ?? 'text-gray-700' ?> hover:text-gray-900">
+ About
+ </p>
+ </div>
+
+</a>
+
+<a class="w-1/5 px-2 py-4 text-center" href="/contact/" title="Contact">
+
+ <div class="inline-block text-gray-700 hover:text-gray-900 no-underline
+ font-bold tracking-wider uppercase text-xs pb-1 text-center">
+ <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT']
+ . '/..'
+ . '/public/icons/feathericons/mail.svg') ?>
+ <p class="py-1
+ <?php echo $navigation->isActive('/contact/') ?? 'text-gray-700' ?> hover:text-gray-900">
+ Contact
+ </p>
+ </div>
+
+</a>
+
+</nav>
+
diff --git a/app/views/wall.view.php b/app/views/wall.view.php
new file mode 100644
index 0000000..0635325
--- /dev/null
+++ b/app/views/wall.view.php
@@ -0,0 +1,6 @@
+<?php require __DIR__ . '/partials/header.php'; ?>
+
+<script type="text/javascript" src="/comments"></script>
+<noscript>You must have JavaScript enabled to use the comments.</noscript>
+
+<?php require __DIR__ . '/partials/footer.php'; ?>