diff --git a/Source/b1.png b/Source/b1.png new file mode 100644 index 0000000..e8febdc Binary files /dev/null and b/Source/b1.png differ diff --git a/Source/b2.png b/Source/b2.png new file mode 100644 index 0000000..5331057 Binary files /dev/null and b/Source/b2.png differ diff --git a/Source/back.jpg b/Source/back.jpg new file mode 100644 index 0000000..aa13a6a Binary files /dev/null and b/Source/back.jpg differ diff --git a/Source/bg.jpg b/Source/bg.jpg new file mode 100644 index 0000000..b371b40 Binary files /dev/null and b/Source/bg.jpg differ diff --git a/Source/cog.png b/Source/cog.png new file mode 100644 index 0000000..cb63550 Binary files /dev/null and b/Source/cog.png differ diff --git a/Source/container.png b/Source/container.png new file mode 100644 index 0000000..06572bf Binary files /dev/null and b/Source/container.png differ diff --git a/Source/icon_128.png b/Source/icon_128.png new file mode 100644 index 0000000..439bc26 Binary files /dev/null and b/Source/icon_128.png differ diff --git a/Source/icon_16.png b/Source/icon_16.png new file mode 100644 index 0000000..64988b0 Binary files /dev/null and b/Source/icon_16.png differ diff --git a/Source/index.html b/Source/index.html new file mode 100644 index 0000000..b43ac1e --- /dev/null +++ b/Source/index.html @@ -0,0 +1,139 @@ + + + + + + + + Time Flip + + + + + + +
+
+
+
+ + +
+
+
+
+
+
+ + AM +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+
+
+
+ +
+
Configure Time Flip
+
+ + + \ No newline at end of file diff --git a/Source/logo.png b/Source/logo.png new file mode 100644 index 0000000..7c1f7e7 Binary files /dev/null and b/Source/logo.png differ diff --git a/Source/manifest.json b/Source/manifest.json new file mode 100644 index 0000000..4658006 --- /dev/null +++ b/Source/manifest.json @@ -0,0 +1,21 @@ +{ + "app": { + "launch": { + "local_path": "index.html" + } + }, + "description": "Time Flip is a beautiful widget style web-app - drawing an analogue-style flip clock, not unlike that found on HTC phones.", + "version": "1.4.0", + "original_developer": "Andie Fairlie", + "maintainer": "Amrit Panesar", + "icons": { + "128": "icon_128.png", + "16": "icon_16.png" + }, + "name": "Time Flip", + "omnibox": { + "keyword": "clock" + }, + "options_page": "options.html", + "update_url": "http://clients2.google.com/service/update2/crx" +} diff --git a/Source/options.html b/Source/options.html new file mode 100644 index 0000000..07a30d4 --- /dev/null +++ b/Source/options.html @@ -0,0 +1,112 @@ + + + + + Time Flip - Options + + + + + + +
+

Time Flip

+

- A free web app from TN2D Web Design -

+ +
+
+ + +
+
+ + +
+
+ + +
+
+ +

Recent Changes

+

Under new management by Amrit Panesar

+ +
+
+ + \ No newline at end of file diff --git a/Source/options.svg b/Source/options.svg new file mode 100644 index 0000000..5183e9e --- /dev/null +++ b/Source/options.svg @@ -0,0 +1,117 @@ + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/Source/style.css b/Source/style.css new file mode 100644 index 0000000..a7bc32f --- /dev/null +++ b/Source/style.css @@ -0,0 +1,271 @@ +/* Resets */ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-weight: inherit; + font-style: inherit; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; +} +:focus { + outline: 0; +} +body { + line-height: 1; + color: black; + background: white; +} +ol, ul { + list-style: none; +} +table { + border-collapse: separate; + border-spacing: 0; +} +caption, th, td { + text-align: left; + font-weight: normal; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ""; +} +blockquote, q { + quotes: "" ""; +} + +html, body { + height: 100%; +} + +body { + text-align: center; + font-family: "Droid Sans", Arial, Sans-Serif; + color: #333; + background: #000; + overflow: hidden; +} + + #bokeh { + width: 1500px; + height: 100%; + margin: 0 auto; + background: #000; + } + + #bokeh #background { + height: 100%; + -webkit-animation-name: fadeInBack; + -webkit-animation-duration: 3s; + } + + + @-webkit-keyframes fadeInBack { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + + + #bokeh #container { + background: url('container.png') no-repeat center center; + height: 100%; + position:relative; + top:-100%; + } + + + + + + #canvas { + width: 100%; + position: absolute; + top:50%; + } + + #box { + background: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0, rgba(0,0,0,0.8)), + color-stop(1, rgba(0,0,0,0.6)) + ); + width: 700px; + height: 300px; + -webkit-border-radius: 15px; + -webkit-box-shadow: #000 0px 0px 50px; + position: absolute; + top:-150px; + left: 50%; + margin-left:-350px; + border: #000 1px solid; + + /*-webkit-animation: fadeClock 1.5s ease-in-out;*/ + } + + @-webkit-keyframes fadeClock { + 0%{ + opacity: 0.0; + -webkit-transform: scale(0.1); + } + 98%{ + -webkit-transform: scale(1.015); + } + 100% { + -webkit-transform: scale(1); + } + } + + #face { + position: relative; + top: -15px; + } + + #face .flip { + display: inline-block; + width: 210px; + width: 210px; + background: #aaaaaa; + height: 230px; + font-weight: bold; + font-size: 150px; + line-height: 230px; + -webkit-border-radius: 15px; + text-align: center; + border: #fff 1px solid; + -webkit-box-shadow: #000 0px 0px 10px; + } + + .topPortion { + background: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0, #bbbbbb), + color-stop(1, #ffffff) + ); + height: 114px; + margin-bottom: 1px; + -webkit-border-top-left-radius: 15px; + -webkit-border-top-right-radius: 15px; + } + + .bottomPortion { + background: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0, #bbbbbb), + color-stop(1, #ffffff) + ); + height: 115px; + -webkit-border-bottom-left-radius: 15px; + -webkit-border-bottom-right-radius: 15px; + } + + .time { + position: relative; + top:-230px; + color: #353535; + text-shadow: #fff 0px 0px 10px; + text-shadow: inset red 0px 0px 5px; + } + + #face #flipHr { + margin-right: 20px; + } + + #face #flipMin { + margin-right: 20px; + } + + #tod { + position: relative; + top:-420px; + left: 55px; + font-size: 28px; + color: #929292; + } + + + #lower { + margin-top: 25px; + margin-left: 30px; + margin-right: 30px; + color: #fff; + font-size: 22px; + text-align: center; + text-shadow: #000 0px 0px 5px; + } + + #date { + font-size: 30px; + } + + #footer { + position: absolute; + bottom: 50px; + left: 50%; + font-size: 11px; + color #333; + width: 250px; + text-align: center; + margin-left: -125px; + font-family: Georgia, Serif; + } + + #footer a { + color: #666666; + } + + #footer a:hover { + color: #fff; + } + + + #status { + font-size: 12px; + position: absolute; + bottom: 50px; + right: 50px; + } + +#options { + float: right; + } + + #options a { + font-weight: bold; + display: block; + height: 25px; + width: 25px; + overflow: hidden; + background: url('options.svg') no-repeat; + background-size: 25px 25px; + text-align: left; + -webkit-transition: 0.4s ease-in-out; + line-height: 25px; + color: rgba(0,0,0,0); + text-decoration: none; + } + + #options a:hover { + width: 130px; + color: #fff; + padding-left: 30px; + } \ No newline at end of file diff --git a/Source/styleOptions.css b/Source/styleOptions.css new file mode 100644 index 0000000..0023cab --- /dev/null +++ b/Source/styleOptions.css @@ -0,0 +1,146 @@ +/* Resets */ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-weight: inherit; + font-style: inherit; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; +} +:focus { + outline: 0; +} +body { + line-height: 1; + color: black; + background: white; +} +ol, ul { + list-style: none; +} +table { + border-collapse: separate; + border-spacing: 0; +} +caption, th, td { + text-align: left; + font-weight: normal; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ""; +} +blockquote, q { + quotes: "" ""; +} + +html, body { + height: 100%; +} + +body { + text-align: center; + font-family: "Droid Sans", Arial, Sans-Serif; + color: #333; + background: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0, rgba(0,0,0,1)), + color-stop(1, rgba(0,0,0,0.7)) + ); + overflow: hidden; +} + + #canvas { + width: 600px; + margin: 0 auto; + margin-top: 100px; + } + + #canvas h1 { + display: block; + width: 500px; + text-indent: -99999em; + margin: 0 auto; + + background: url('logo.png') no-repeat; + height: 150px; + } + + #canvas h2 { + color: #fff; + font-style: italic; + font-family: "Times New Roman", Serif; + font-size: 26px; + text-shadow: #000 0px 0px 5px; + } + + #panel { + background: #fff; + -webkit-box-shadow:#000 0px 0px 70px; + border-radius: 3px; + text-align: left; + color: #333; + padding: 20px; + margin-top: 60px; + } + + #status { + margin-top: 60px; + color: #95ebda; + font-size: 28px; + font-weight: bold; + } + + label { + font-weight: bold; + font-size: 18px; + display: block; + margin-bottom: 5px; + width: 300px; + float: left; + } + + select { + display: block; + font-size: 18px; + } + + button { + margin: 0 auto; + font-size: 18px; + + } + + .opt { + margin-bottom: 20px; + } + + .note { + font-size: 12px; + display: block; + margin-top: 5px; + color: #ccc; + } + + h3 { + margin-top: 30px; + font-weight: bold; + margin-bottom: 5px; + font-size: 12px; + } + + p { + font-size: 12px; + } \ No newline at end of file diff --git a/Source/timer.js b/Source/timer.js new file mode 100644 index 0000000..16c9bbf --- /dev/null +++ b/Source/timer.js @@ -0,0 +1,232 @@ +/*! + * jQuery idleTimer plugin + * version 0.9.100511 + * by Paul Irish. + * http://github.com/paulirish/yui-misc/tree/ + * MIT license + + * adapted from YUI idle timer by nzakas: + * http://github.com/nzakas/yui-misc/ +*/ +/* + * Copyright (c) 2009 Nicholas C. Zakas + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + * THE SOFTWARE. + */ + + + // API available in <= v0.8 + /******************************* + + // idleTimer() takes an optional argument that defines the idle timeout + // timeout is in milliseconds; defaults to 30000 + $.idleTimer(10000); + + + $(document).bind("idle.idleTimer", function(){ + // function you want to fire when the user goes idle + }); + + + $(document).bind("active.idleTimer", function(){ + // function you want to fire when the user becomes active again + }); + + // pass the string 'destroy' to stop the timer + $.idleTimer('destroy'); + + // you can query if the user is idle or not with data() + $.data(document,'idleTimer'); // 'idle' or 'active' + + // you can get time elapsed since user when idle/active + $.idleTimer('getElapsedTime'); // time since state change in ms + + ********/ + + + + // API available in >= v0.9 + /************************* + + // bind to specific elements, allows for multiple timer instances + $(elem).idleTimer(timeout|'destroy'|'getElapsedTime'); + $.data(elem,'idleTimer'); // 'idle' or 'active' + + // if you're using the old $.idleTimer api, you should not do $(document).idleTimer(...) + + // element bound timers will only watch for events inside of them. + // you may just want page-level activity, in which case you may set up + // your timers on document, document.documentElement, and document.body + + + ********/ + +(function($){ + +$.idleTimer = function(newTimeout, elem){ + + // defaults that are to be stored as instance props on the elem + + var idle = false, //indicates if the user is idle + enabled = true, //indicates if the idle timer is enabled + timeout = 30000, //the amount of time (ms) before the user is considered idle + events = 'mousemove keydown DOMMouseScroll mousewheel mousedown'; // activity is one of these events + + + elem = elem || document; + + + + /* (intentionally not documented) + * Toggles the idle state and fires an appropriate event. + * @return {void} + */ + var toggleIdleState = function(myelem){ + + // curse you, mozilla setTimeout lateness bug! + if (typeof myelem == 'number') myelem = undefined; + + var obj = $.data(myelem || elem,'idleTimerObj'); + + //toggle the state + obj.idle = !obj.idle; + + // reset timeout counter + obj.olddate = +new Date; + + //fire appropriate event + + // create a custom event, but first, store the new state on the element + // and then append that string to a namespace + var event = jQuery.Event( $.data(elem,'idleTimer', obj.idle ? "idle" : "active" ) + '.idleTimer' ); + + // we dont want this to bubble + event.stopPropagation(); + $(elem).trigger(event); + }, + + /** + * Stops the idle timer. This removes appropriate event handlers + * and cancels any pending timeouts. + * @return {void} + * @method stop + * @static + */ + stop = function(elem){ + + var obj = $.data(elem,'idleTimerObj'); + + //set to disabled + obj.enabled = false; + + //clear any pending timeouts + clearTimeout(obj.tId); + + //detach the event handlers + $(elem).unbind('.idleTimer'); + }, + + + /* (intentionally not documented) + * Handles a user event indicating that the user isn't idle. + * @param {Event} event A DOM2-normalized event object. + * @return {void} + */ + handleUserEvent = function(){ + + var obj = $.data(this,'idleTimerObj'); + + //clear any existing timeout + clearTimeout(obj.tId); + + + + //if the idle timer is enabled + if (obj.enabled){ + + + //if it's idle, that means the user is no longer idle + if (obj.idle){ + toggleIdleState(this); + } + + //set a new timeout + obj.tId = setTimeout(toggleIdleState, obj.timeout); + + } + }; + + + /** + * Starts the idle timer. This adds appropriate event handlers + * and starts the first timeout. + * @param {int} newTimeout (Optional) A new value for the timeout period in ms. + * @return {void} + * @method $.idleTimer + * @static + */ + + + var obj = $.data(elem,'idleTimerObj') || new function(){}; + + obj.olddate = obj.olddate || +new Date; + + //assign a new timeout if necessary + if (typeof newTimeout == "number"){ + timeout = newTimeout; + } else if (newTimeout === 'destroy') { + stop(elem); + return this; + } else if (newTimeout === 'getElapsedTime'){ + return (+new Date) - obj.olddate; + } + + //assign appropriate event handlers + $(elem).bind($.trim((events+' ').split(' ').join('.idleTimer ')),handleUserEvent); + + + obj.idle = idle; + obj.enabled = enabled; + obj.timeout = timeout; + + + //set a timeout to toggle state + obj.tId = setTimeout(toggleIdleState, obj.timeout); + + // assume the user is active for the first x seconds. + $.data(elem,'idleTimer',"active"); + + // store our instance on the object + $.data(elem,'idleTimerObj',obj); + + + +}; // end of $.idleTimer() + + +// v0.9 API for defining multiple timers. +$.fn.idleTimer = function(newTimeout){ + + this[0] && $.idleTimer(newTimeout,this[0]); + + return this; +} + + +})(jQuery); \ No newline at end of file