From eb83d0733a3b0f13484bc0af0bad78713dc9d3a1 Mon Sep 17 00:00:00 2001
From: Ben Burwell <bburwell1@gmail.com>
Date: Sat, 14 Jun 2014 11:12:28 -0400
Subject: Add new ViewTime page

---
 assets/css/viewtime.css                       | 102 ++++++++++++++++++++++
 assets/images/icons/social/facebook_large.png | Bin 0 -> 1438 bytes
 assets/images/icons/social/gplus_large.png    | Bin 0 -> 6834 bytes
 assets/images/icons/social/twitter_large.png  | Bin 0 -> 7749 bytes
 projects/viewtime/index.html                  | 116 ++++++++++++++++++++++++++
 5 files changed, 218 insertions(+)
 create mode 100644 assets/css/viewtime.css
 create mode 100755 assets/images/icons/social/facebook_large.png
 create mode 100644 assets/images/icons/social/gplus_large.png
 create mode 100644 assets/images/icons/social/twitter_large.png
 create mode 100644 projects/viewtime/index.html

diff --git a/assets/css/viewtime.css b/assets/css/viewtime.css
new file mode 100644
index 0000000..e622448
--- /dev/null
+++ b/assets/css/viewtime.css
@@ -0,0 +1,102 @@
+* {
+    padding: 0;
+    margin: 0;
+}
+
+html {
+    font-family: 'myriad-pro', sans-serif;
+    font-size: 24px;
+    text-align: center;
+    background-color: #2A2A2A;
+}
+
+.container {
+    background-color: #FFFFFF;
+    -webkit-box-shadow: 0px 0px 30px 10px rgba(0,0,0,0.75);
+    -moz-box-shadow: 0px 0px 30px 10px rgba(0,0,0,0.75);
+    box-shadow: 0px 0px 30px 10px rgba(0,0,0,0.75);
+    width: 960px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-bottom: 14px;
+}
+
+a {
+    text-decoration: none;
+}
+
+p {
+    padding-top: 40px;
+    padding-left: 90px;
+    padding-right: 90px;
+}
+
+h1 {
+    width: 960px;
+    height: 250px;
+    background-image: -o-linear-gradient(-89deg, #C02126 0%, #4A1112 100%);
+    background-image: -moz-linear-gradient(-89deg, #C02126 0%, #4A1112 100%);
+    background-image: -ms-linear-gradient(-89deg, #C02126 0%, #4A1112 100%);
+    background-image: linear-gradient(-179deg, #C02126 0%, #4A1112 100%);
+    font-size: 72px;
+    line-height: 250px;
+    color: #FFFFFF;
+    text-shadow: 0px 2px 4px rgba(0,0,0,0.50);
+}
+
+a#install_button {
+    border-radius: 10px;
+    font-size: 48px;
+    padding: 10px 140px;
+}
+
+.inactive {
+    background-color: #AAAAAA;
+    color: #cccccc;
+}
+
+.active {
+    color: #FFFFFF;
+    text-shadow: 0px -2px 0px rgba(0,0,0,0.50);
+    background-image: -o-linear-gradient(-89deg, #86C01E 0%, #2F6F15 100%);
+    background-image: -moz-linear-gradient(-89deg, #86C01E 0%, #2F6F15 100%);
+    background-image: -ms-linear-gradient(-89deg, #86C01E 0%, #2F6F15 100%);
+    background-image: linear-gradient(-179deg, #86C01E 0%, #2F6F15 100%);
+}
+
+.active:hover {
+    background-image: -o-linear-gradient(-89deg, #2F6F15 0%, #86C01E 100%);
+    background-image: -moz-linear-gradient(-89deg, #2F6F15 0%, #86C01E 100%);
+    background-image: -ms-linear-gradient(-89deg, #2F6F15 0%, #86C01E 100%);
+    background-image: linear-gradient(-179deg, #2F6F15 0%, #86C01E 100%);
+    text-shadow: 0px 2px 0px rgba(0,0,0,0.50);
+}
+
+.active:active {
+    background-image: -o-linear-gradient(-89deg, #2F6F15 0%, #86C01E 100%);
+    background-image: -moz-linear-gradient(-89deg, #2F6F15 0%, #86C01E 100%);
+    background-image: -ms-linear-gradient(-89deg, #2F6F15 0%, #86C01E 100%);
+    background-image: linear-gradient(-179deg, #2F6F15 0%, #86C01E 100%);
+    text-shadow: 0px -2px 0px rgba(0,0,0,0.50);
+}
+
+p img {
+    padding: 10px;
+}
+
+.install_tagline {
+    font-size: 14px;
+    color: #2A2A2A;
+    padding-top: 10px;
+}
+
+#safari_text, #chrome_text {
+    display: none;
+}
+
+.home_link {
+    font-size: 18px;
+    color: #dc322f;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+}
diff --git a/assets/images/icons/social/facebook_large.png b/assets/images/icons/social/facebook_large.png
new file mode 100755
index 0000000..8f9fc05
Binary files /dev/null and b/assets/images/icons/social/facebook_large.png differ
diff --git a/assets/images/icons/social/gplus_large.png b/assets/images/icons/social/gplus_large.png
new file mode 100644
index 0000000..938705d
Binary files /dev/null and b/assets/images/icons/social/gplus_large.png differ
diff --git a/assets/images/icons/social/twitter_large.png b/assets/images/icons/social/twitter_large.png
new file mode 100644
index 0000000..ea5017e
Binary files /dev/null and b/assets/images/icons/social/twitter_large.png differ
diff --git a/projects/viewtime/index.html b/projects/viewtime/index.html
new file mode 100644
index 0000000..e7e347d
--- /dev/null
+++ b/projects/viewtime/index.html
@@ -0,0 +1,116 @@
+<html>
+    <head>
+        <title>ViewTime, A YouTube Extension for Google Chrome and Safari</title>
+
+        <!-- Encoding -->
+        <meta charset="UTF-8">
+
+        <!-- Stylesheets -->
+        <link rel="stylesheet" href="/assets/css/viewtime.css">
+        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
+
+        <!-- Scripts -->
+        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
+
+        <!-- Icons -->
+        <link rel="shortcut icon" href="/assets/images/viewtime-icon.png" sizes="128x128">
+        <link rel="apple-touch-icon" href="/assets/images/viewtime-icon.png">
+
+        <!-- Generic Meta -->
+        <meta name="author" content="Ben Burwell">
+        <meta name="description" content="ViewTime is an extension for Safari and Google Chrome that inserts the total amount of time a YouTube video has been watched just below the view count.">
+        <meta name="keywords" content="extension, youtube, video, chrome, safari">
+
+        <!-- OpenGraph Meta -->
+        <meta property="og:title" content="ViewTime, A YouTube Extension for Google Chrome and Safari">
+        <meta property="og:site_name" content="ViewTime">
+        <meta property="og:description" content="ViewTime is an extension for Safari and Google Chrome that inserts the total amount of time a YouTube video has been watched just below the view count.">
+        <meta property="og:image" content="http://www.benburwell.com/assets/images/viewtime-icon.png">
+        <meta property="og:type" content="website">
+        <meta property="fb:admins" content="1439777397">
+
+        <!-- Twitter Meta -->
+        <meta name="twitter:card" content="summary">
+        <meta name="twitter:site" content="@bburwell">
+        <meta name="twitter:title" content="ViewTime, A YouTube Extension for Google Chrome and Safari">
+        <meta name="twitter:creator" content="@bburwell">
+        <meta property="twitter:description" content="ViewTime is an extension for Safari and Google Chrome that inserts the total amount of time a YouTube video has been watched just below the view count.">
+        <meta name="twitter:image:src" content="http://www.benburwell.com/assets/images/viewtime-icon.png">
+        <meta name="twitter:domain" content="BenBurwell.com">
+
+        <!-- Chrome Extension -->
+        <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/jcplgieacjacdjabiiedcdfcpbgohbpp">
+
+        <!-- TypeKit -->
+        <script type="text/javascript">
+            (function() {
+                var config = {
+                    kitId: 'xgd2xxh'
+                };
+                var d = false;
+                var tk = document.createElement('script');
+                tk.src = '//use.typekit.net/' + config.kitId + '.js';
+                tk.type = 'text/javascript';
+                tk.async = 'true';
+                tk.onload = tk.onreadystatechange = function() {
+                    var rs = this.readyState;
+                    if (d || rs && rs != 'complete' && rs != 'loaded') return;
+                    d = true;
+                    try { Typekit.load(config); } catch (e) {}
+                };
+                var s = document.getElementsByTagName('script')[0];
+                s.parentNode.insertBefore(tk, s);
+            })();
+        </script>
+
+        <script type="text/javascript">
+            $(function() {
+                if (window.chrome && window.chrome.webstore) {
+                    $('#install_button').attr('href', 'javascript:chrome.webstore.install();');
+                    $('#install_button').on('click', function() {
+                        chrome.webstore.install();
+                        return false;
+                    });
+
+                    $('#chrome_text').show();
+                    $('#error_text').hide();
+                    $('#install_button').removeClass('inactive');
+                    $('#install_button').addClass('active');
+                } else if (window.safari) {
+                    $('#install_button').attr('href', 'http://updates.benburwell.com/safari/viewtime/latest.safariextz');
+
+                    $('#safari_text').show();
+                    $('#error_text').hide();
+                    $('#install_button').removeClass('inactive');
+                    $('#install_button').addClass('active');
+                }
+            });
+        </script>
+    </head>
+    <body>
+        <div class="container">
+            <h1>ViewTime</h1>
+            <p>ViewTime is an extension for Safari and Google Chrome that inserts the total amount of time a YouTube video has been watched just below the view count.</p>
+            <p><a id="install_button" class="inactive">Install</a></p>
+            <p class="install_tagline" id="safari_text">download and double-click to install in Safari</p>
+            <p class="install_tagline" id="chrome_text">click to install from the Chrome Web Store</p>
+            <p class="install_tagline" id="error_text">Uh oh! Looks like you’re not using a supported browser.<br>ViewTime works in Safari and Google Chrome.</p>
+            <p>
+                <!-- Twitter -->
+                <a href="https://twitter.com/intent/tweet?url=http%3A%2F%2Fwww.benburwell.com%2Fprojects%2Fviewtime%2F&amp;text=ViewTime,%20an%20extension%20for%20YouTube" onclick="javascript:window.open(this.href,
+                    '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><img src="/assets/images/icons/social/twitter_large.png" alt="Tweet"></a>
+
+                <!-- Facebook -->
+                <a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.benburwell.com%2Fprojects%2Fviewtime%2F" onclick="javascript:window.open(this.href,
+                    '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><img src="/assets/images/icons/social/facebook_large.png" alt="Share on Facebook"></a>
+
+                <!-- Google Plus -->
+                <a href="https://plus.google.com/share?url=http%3A%2F%2Fwww.benburwell.com%2Fprojects%2Fviewtime%2F" onclick="javascript:window.open(this.href,
+                    '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><img src="/assets/images/icons/social/gplus_large.png" alt="Share on Google+"></a>
+            </p>
+            <p>
+                <a class="home_link" href="http://www.benburwell.com/">www.benburwell.com</a>
+            </p>
+        </div>
+    </body>
+</html>
-- 
cgit v1.2.3