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);
|
||||