diff options
| -rw-r--r-- | assets/css/viewtime.css | 102 | ||||
| -rwxr-xr-x | assets/images/icons/social/facebook_large.png | bin | 0 -> 1438 bytes | |||
| -rw-r--r-- | assets/images/icons/social/gplus_large.png | bin | 0 -> 6834 bytes | |||
| -rw-r--r-- | assets/images/icons/social/twitter_large.png | bin | 0 -> 7749 bytes | |||
| -rw-r--r-- | projects/viewtime/index.html | 116 |
5 files changed, 218 insertions, 0 deletions
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 Binary files differnew file mode 100755 index 0000000..8f9fc05 --- /dev/null +++ b/assets/images/icons/social/facebook_large.png diff --git a/assets/images/icons/social/gplus_large.png b/assets/images/icons/social/gplus_large.png Binary files differnew file mode 100644 index 0000000..938705d --- /dev/null +++ b/assets/images/icons/social/gplus_large.png diff --git a/assets/images/icons/social/twitter_large.png b/assets/images/icons/social/twitter_large.png Binary files differnew file mode 100644 index 0000000..ea5017e --- /dev/null +++ b/assets/images/icons/social/twitter_large.png 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&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> |
