Add in most recent source tree
No files matched your search
|
After Width: | Height: | Size: 855 KiB |
|
After Width: | Height: | Size: 689 KiB |
|
After Width: | Height: | Size: 592 KiB |
|
After Width: | Height: | Size: 428 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 146 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 520 B |
@@ -0,0 +1,139 @@
|
|||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<link href="style.css" rel="stylesheet" type="text/css" />
|
||||||
|
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold' rel='stylesheet' type='text/css'>
|
||||||
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
|
||||||
|
<script src="timer.js"></script>
|
||||||
|
<title>Time Flip</title>
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
var use24;
|
||||||
|
|
||||||
|
function flipTime() {
|
||||||
|
var date = new Date();
|
||||||
|
var hour = date.getHours();
|
||||||
|
var mins = date.getMinutes();
|
||||||
|
var sec = date.getSeconds();
|
||||||
|
var day = date.getDate();
|
||||||
|
var month = date.getMonth();
|
||||||
|
month++;
|
||||||
|
var year = date.getFullYear();
|
||||||
|
var toddy = "";
|
||||||
|
|
||||||
|
|
||||||
|
if(window.localStorage.getItem("use24") == "false"){
|
||||||
|
// work out am or pm
|
||||||
|
if(hour>11){
|
||||||
|
if(hour!=12){
|
||||||
|
hour = hour-12; // make it 12 hour format
|
||||||
|
}
|
||||||
|
toddy = "PM";
|
||||||
|
} else {
|
||||||
|
toddy = "AM";
|
||||||
|
}
|
||||||
|
document.getElementById('tod').innerHTML = toddy;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
if(hour<10){ hour = "0"+hour; }
|
||||||
|
if(mins<10){ mins = "0"+mins; }
|
||||||
|
if(sec<10){ sec = "0"+sec; }
|
||||||
|
|
||||||
|
if(day<10){
|
||||||
|
day = "0"+day;
|
||||||
|
}
|
||||||
|
if(month<10){
|
||||||
|
month = "0"+month;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('date').innerHTML = day + "/" + month + "/" + year;
|
||||||
|
document.getElementById('hour').innerHTML = hour;
|
||||||
|
document.getElementById('min').innerHTML = mins;
|
||||||
|
document.getElementById('sec').innerHTML = sec;
|
||||||
|
|
||||||
|
document.title = hour +":"+ mins +":"+ sec +" "+ toddy + " -- " + day + "/" + month + "/" + year;
|
||||||
|
pause=setTimeout('flipTime()',1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function restore_options() {
|
||||||
|
|
||||||
|
if(window.localStorage.getItem("color")){
|
||||||
|
document.getElementById('background').style.background = window.localStorage.getItem("color");
|
||||||
|
} else {
|
||||||
|
document.getElementById('background').style.background="#69077e";
|
||||||
|
}
|
||||||
|
|
||||||
|
if(window.localStorage.getItem("disableSeconds") == "true")
|
||||||
|
{
|
||||||
|
document.getElementById('seconds').style.display = "none";
|
||||||
|
document.getElementById('box').style.width = "490px";
|
||||||
|
document.getElementById('box').style.marginLeft = "-245px";
|
||||||
|
document.getElementById('flipMin').style.marginRight = "0px";
|
||||||
|
}
|
||||||
|
|
||||||
|
if(window.localStorage.getItem("use24") == "true"){
|
||||||
|
document.getElementById('tod').style.display = "none";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
(function($){
|
||||||
|
$.idleTimer(2000);
|
||||||
|
$(document).bind("idle.idleTimer", function(){
|
||||||
|
$('#status').fadeOut('slow');
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).bind("active.idleTimer", function(){
|
||||||
|
$('#status').fadeIn('slow');
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
})(jQuery);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body onload="restore_options(); flipTime();">
|
||||||
|
|
||||||
|
|
||||||
|
<div id="bokeh">
|
||||||
|
<div id="background"></div>
|
||||||
|
<div id="container"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="canvas">
|
||||||
|
<div id="box">
|
||||||
|
<div id="face">
|
||||||
|
<div class="flip" id="flipHr">
|
||||||
|
<div class="topPortion"></div>
|
||||||
|
<div class="bottomPortion"></div>
|
||||||
|
<span class="time" id="hour"></span>
|
||||||
|
<span id="tod">AM</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flip" id="flipMin">
|
||||||
|
<div class="topPortion"></div>
|
||||||
|
<div class="bottomPortion"></div>
|
||||||
|
<span class="time" id="min"></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flip" id="seconds">
|
||||||
|
<div class="topPortion"></div>
|
||||||
|
<div class="bottomPortion"></div>
|
||||||
|
<span class="time" id="sec"></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="lower">
|
||||||
|
<div id="date"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="status">
|
||||||
|
<div id="options"><a href="options.html">Configure Time Flip</a></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
After Width: | Height: | Size: 12 KiB |
@@ -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"
|
||||||
|
}
|
||||||
@@ -0,0 +1,112 @@
|
|||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<link href="styleOptions.css" rel="stylesheet" type="text/css" />
|
||||||
|
<title>Time Flip - Options</title>
|
||||||
|
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
|
||||||
|
// Saves options to localStorage.
|
||||||
|
function save_options() {
|
||||||
|
|
||||||
|
if( document.getElementById("use24").checked == true ) {
|
||||||
|
window.localStorage.setItem("use24","true");
|
||||||
|
} else {
|
||||||
|
window.localStorage.setItem("use24","false");
|
||||||
|
}
|
||||||
|
|
||||||
|
if( document.getElementById("disableSeconds").checked == true ) {
|
||||||
|
window.localStorage.setItem("disableSeconds","true");
|
||||||
|
} else {
|
||||||
|
window.localStorage.setItem("disableSeconds","false");
|
||||||
|
}
|
||||||
|
|
||||||
|
var select = document.getElementById("color");
|
||||||
|
var colorSelect = select.children[select.selectedIndex].value;
|
||||||
|
window.localStorage.setItem("color", colorSelect);
|
||||||
|
|
||||||
|
/*
|
||||||
|
var disSec = document.getElementById("disableSeconds");
|
||||||
|
var disSecVal = disSec.value;
|
||||||
|
localStorage["disableSeconds"] = disSecVal;
|
||||||
|
|
||||||
|
var use24box = document.getElementById("use24");
|
||||||
|
var use24boxVal = use24box.value;
|
||||||
|
localStorage["use24"] = use24boxVal;
|
||||||
|
|
||||||
|
localStorage["disableSeconds"] = document.getElementById("disableSeconds").value;
|
||||||
|
localStorage["use24"] = document.getElementById("use24").value;
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Update status to let user know options were saved.
|
||||||
|
window.location = "index.html";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Restores select box state to saved value from localStorage.
|
||||||
|
function restore_options() {
|
||||||
|
if(window.localStorage.getItem("disableSeconds") == "true") {
|
||||||
|
document.getElementById("disableSeconds").checked = true;
|
||||||
|
} else {
|
||||||
|
document.getElementById("disableSeconds").checked = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(window.localStorage.getItem("use24") == "true") {
|
||||||
|
document.getElementById("use24").checked = true;
|
||||||
|
} else {
|
||||||
|
document.getElementById("use24").checked = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (window.localStorage.getItem("color")) {
|
||||||
|
var select = document.getElementById("color");
|
||||||
|
for (var i = 0; i < select.children.length; i++) {
|
||||||
|
var child = select.children[i];
|
||||||
|
if (child.value == window.localStorage.getItem("color")) {
|
||||||
|
child.selected = "true";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body onload="restore_options()">
|
||||||
|
<div id="canvas">
|
||||||
|
<h1>Time Flip</h2>
|
||||||
|
<h2>- A free web app from TN2D Web Design -</h2>
|
||||||
|
|
||||||
|
<div id="panel">
|
||||||
|
<div class="opt">
|
||||||
|
<label>Background color:</label>
|
||||||
|
<select id="color">
|
||||||
|
<option value="#69077e">dark purple</option>
|
||||||
|
<option value="#ff2fae">hot pink</option>
|
||||||
|
<option value="#2f8cff">blue</option>
|
||||||
|
<option value="#800000">red</option>
|
||||||
|
<option value="#ffd672">yellow</option>
|
||||||
|
<option value="#ff6000">orange</option>
|
||||||
|
<option value="#009da0">teal</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="opt">
|
||||||
|
<label>Disable seconds?</label>
|
||||||
|
<input type="checkbox" name="disableSeconds" id="disableSeconds">
|
||||||
|
</div>
|
||||||
|
<div class="opt">
|
||||||
|
<label>Use 24 hour format?</label>
|
||||||
|
<input type="checkbox" name="use24" id="use24">
|
||||||
|
</div>
|
||||||
|
<div style="text-align:center"><button onclick="save_options()">Save Options</button></div>
|
||||||
|
|
||||||
|
<h3>Recent Changes</h3>
|
||||||
|
<p>Under new management by <a href="mailto:thepureamrit@gmail.com">Amrit Panesar</a></p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,117 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
width="64"
|
||||||
|
height="64"
|
||||||
|
id="svg2"
|
||||||
|
sodipodi:version="0.32"
|
||||||
|
inkscape:version="0.48.0 r9654"
|
||||||
|
version="1.0"
|
||||||
|
sodipodi:docname="C:\Users\Andrew\Desktop\Simple_cog.svg"
|
||||||
|
inkscape:output_extension="org.inkscape.output.svg.inkscape">
|
||||||
|
<defs
|
||||||
|
id="defs4">
|
||||||
|
<linearGradient
|
||||||
|
id="linearGradient3918">
|
||||||
|
<stop
|
||||||
|
style="stop-color:#b5b5b5;stop-opacity:1;"
|
||||||
|
offset="0"
|
||||||
|
id="stop3920" />
|
||||||
|
<stop
|
||||||
|
style="stop-color:#f6f6f6;stop-opacity:1;"
|
||||||
|
offset="1"
|
||||||
|
id="stop3922" />
|
||||||
|
</linearGradient>
|
||||||
|
<inkscape:perspective
|
||||||
|
sodipodi:type="inkscape:persp3d"
|
||||||
|
inkscape:vp_x="0 : 526.18109 : 1"
|
||||||
|
inkscape:vp_y="0 : 1000 : 0"
|
||||||
|
inkscape:vp_z="744.09448 : 526.18109 : 1"
|
||||||
|
inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
|
||||||
|
id="perspective10" />
|
||||||
|
<filter
|
||||||
|
inkscape:collect="always"
|
||||||
|
id="filter3191">
|
||||||
|
<feGaussianBlur
|
||||||
|
inkscape:collect="always"
|
||||||
|
stdDeviation="4.0963508"
|
||||||
|
id="feGaussianBlur3193" />
|
||||||
|
</filter>
|
||||||
|
<filter
|
||||||
|
inkscape:collect="always"
|
||||||
|
id="filter3251">
|
||||||
|
<feGaussianBlur
|
||||||
|
inkscape:collect="always"
|
||||||
|
stdDeviation="1.9204851"
|
||||||
|
id="feGaussianBlur3253" />
|
||||||
|
</filter>
|
||||||
|
<radialGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
xlink:href="#linearGradient3918"
|
||||||
|
id="radialGradient3924"
|
||||||
|
cx="33.208763"
|
||||||
|
cy="32.179295"
|
||||||
|
fx="33.208763"
|
||||||
|
fy="32.179295"
|
||||||
|
r="30.179101"
|
||||||
|
gradientTransform="matrix(1.317957,0.05439188,-0.04154621,1.0064597,-9.2220293,-2.0132544)"
|
||||||
|
gradientUnits="userSpaceOnUse" />
|
||||||
|
</defs>
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
gridtolerance="10000"
|
||||||
|
guidetolerance="10"
|
||||||
|
objecttolerance="10"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="5.6"
|
||||||
|
inkscape:cx="31.587647"
|
||||||
|
inkscape:cy="25.845388"
|
||||||
|
inkscape:document-units="px"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:window-width="1280"
|
||||||
|
inkscape:window-height="714"
|
||||||
|
inkscape:window-x="-4"
|
||||||
|
inkscape:window-y="220"
|
||||||
|
inkscape:window-maximized="0" />
|
||||||
|
<metadata
|
||||||
|
id="metadata7">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1">
|
||||||
|
<g
|
||||||
|
id="g3267"
|
||||||
|
transform="matrix(0.08159226,-0.26687626,0.26687626,0.08159226,16.986571,42.139453)">
|
||||||
|
<path
|
||||||
|
style="fill:url(#radialGradient3924);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.60000038;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
|
||||||
|
d="M 38.625,1.65625 C 32.666499,1.665733 35.749671,10.583826 27.78125,12.875 18.98851,15.403192 17.31939,3.945401 10.96875,10.53125 4.6181099,17.117099 16.144391,18.339917 13.9375,27.21875 11.730609,36.097582 0.97180737,31.83226 3.5,40.625 c 2.5281928,8.79274 9.351651,-0.56939 15.9375,5.78125 6.585849,6.35064 -2.503832,13.543109 6.375,15.75 8.878833,2.206891 4.20726,-8.409307 13,-10.9375 8.79274,-2.528192 10.46186,8.929599 16.8125,2.34375 6.35064,-6.585849 -5.175641,-7.808667 -2.96875,-16.6875 2.206891,-8.878832 12.965693,-4.61351 10.4375,-13.40625 -2.528193,-8.79274 -9.351651,0.56939 -15.9375,-5.78125 -6.585849,-6.35064 2.503832,-13.5431091 -6.375,-15.75 C 39.948859,1.730604 39.241397,1.655269 38.625,1.65625 z M 33.5625,24.8125 c 3.963247,0 7.1875,3.224253 7.1875,7.1875 0,3.963247 -3.224253,7.15625 -7.1875,7.15625 -3.963247,0 -7.15625,-3.193003 -7.15625,-7.15625 0,-3.963247 3.193003,-7.1875 7.15625,-7.1875 z"
|
||||||
|
id="path2383"
|
||||||
|
transform="matrix(3.5833265,0,0,3.5833265,-69.59001,-75.77266)"
|
||||||
|
inkscape:connector-curvature="0" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.5 KiB |
@@ -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;
|
||||||
|
}
|
||||||
@@ -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;
|
||||||
|
}
|
||||||
@@ -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);
|
||||||