Initial import of the stopwatch HTML application
This commit is contained in:
parent
bc3bc887b8
commit
fd28ff30aa
|
|
@ -1,5 +1,5 @@
|
|||
targets=deforaos-calculator.desktop
|
||||
dist=Makefile,calculator.html,deforaos-calculator.desktop.in
|
||||
dist=Makefile,calculator.html,deforaos-calculator.desktop.in,stopwatch.html
|
||||
|
||||
[calculator.html]
|
||||
install=$(PREFIX)/lib/Surfer/htmlapps
|
||||
|
|
@ -9,3 +9,6 @@ type=script
|
|||
script=../../../tools/subst.sh
|
||||
depends=deforaos-calculator.desktop.in
|
||||
install=$(PREFIX)/share/applications
|
||||
|
||||
[stopwatch.html]
|
||||
install=$(PREFIX)/lib/Surfer/htmlapps
|
||||
|
|
|
|||
194
src/Surfer/data/stopwatch.html
Normal file
194
src/Surfer/data/stopwatch.html
Normal file
|
|
@ -0,0 +1,194 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!--
|
||||
# HTML5, CSS3 and JavaScript stopwatch
|
||||
|
||||
## License
|
||||
"its totally free."
|
||||
-->
|
||||
<title>Stopwatch</title>
|
||||
<style type="text/css"><!--
|
||||
* {margin: 0; padding: 0;}
|
||||
|
||||
body{
|
||||
background: black;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.timer {
|
||||
padding: 10px;
|
||||
background: linear-gradient(top, #222, #444);
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
border: 7px solid #efefef;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
|
||||
box-shadow:
|
||||
inset 0 -2px 10px 1px rgba(0, 0, 0, 0.75),
|
||||
0 5px 20px -10px rgba(0, 0, 0, 1);
|
||||
}
|
||||
|
||||
.cell {
|
||||
/*Should only display 1 digit. Hence height = line height of .numbers
|
||||
and width = width of .numbers*/
|
||||
width: 0.60em;
|
||||
height: 40px;
|
||||
font-size: 50px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.numbers {
|
||||
width: 0.6em;
|
||||
line-height: 40px;
|
||||
font-family: digital, arial, verdana;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
/*Glow to the text*/
|
||||
text-shadow: 0 0 5px rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
/*Styles for the controls*/
|
||||
#timer_controls {
|
||||
margin-top: -5px;
|
||||
}
|
||||
#timer_controls label {
|
||||
cursor: pointer;
|
||||
padding: 5px 10px;
|
||||
background: #efefef;
|
||||
font-family: arial, verdana, tahoma;
|
||||
font-size: 11px;
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
input[name="controls"] {display: none;}
|
||||
|
||||
/*Control code*/
|
||||
#stop:checked~.timer .numbers {animation-play-state: paused;}
|
||||
#start:checked~.timer .numbers {animation-play-state: running;}
|
||||
#reset:checked~.timer .numbers {animation: none;}
|
||||
|
||||
.moveten {
|
||||
/*The digits move but dont look good. We will use steps now
|
||||
10 digits = 10 steps. You can now see the digits swapping instead of
|
||||
moving pixel-by-pixel*/
|
||||
animation: moveten 1s steps(10, end) infinite;
|
||||
/*By default animation should be paused*/
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.movesix {
|
||||
animation: movesix 1s steps(6, end) infinite;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
/*Now we need to sync the animation speed with time speed*/
|
||||
/*One second per digit. 10 digits. Hence 10s*/
|
||||
.second {animation-duration: 10s;}
|
||||
.tensecond {animation-duration: 60s;} /*60 times .second*/
|
||||
|
||||
.milisecond {animation-duration: 1s;} /*1/10th of .second*/
|
||||
.tenmilisecond {animation-duration: 0.1s;}
|
||||
.hundredmilisecond {animation-duration: 0.01s;}
|
||||
|
||||
.minute {animation-duration: 600s;} /*60 times .second*/
|
||||
.tenminute {animation-duration: 3600s;} /*60 times .minute*/
|
||||
|
||||
.hour {animation-duration: 36000s;} /*60 times .minute*/
|
||||
.tenhour {animation-duration: 360000s;} /*10 times .hour*/
|
||||
|
||||
/*The stopwatch looks good now. Lets add some styles*/
|
||||
|
||||
/*Lets animate the digit now - the main part of this tutorial*/
|
||||
/*We are using prefixfree, so no need of vendor prefixes*/
|
||||
/*The logic of the animation is to alter the 'top' value of the absolutely
|
||||
positioned .numbers*/
|
||||
/*Minutes and Seconds should be limited to only '60' and not '100'
|
||||
Hence we need to create 2 animations. One with 10 steps and 10 digits and
|
||||
the other one with 6 steps and 6 digits*/
|
||||
@keyframes moveten {
|
||||
0% {top: 0;}
|
||||
100% {top: -400px;}
|
||||
/*height = 40. digits = 10. hence -400 to move it completely to the top*/
|
||||
}
|
||||
|
||||
@keyframes movesix {
|
||||
0% {top: 0;}
|
||||
100% {top: -240px;}
|
||||
/*height = 40. digits = 6. hence -240 to move it completely to the top*/
|
||||
}
|
||||
//--></style>
|
||||
<meta http-equiv="content-type" content= "text/html;charset=utf-8"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- time to add the controls -->
|
||||
<input id="start" name="controls" type="radio" />
|
||||
<input id="stop" name="controls" type="radio" />
|
||||
<input id="reset" name="controls" type="radio" />
|
||||
<div class="timer">
|
||||
<div class="cell">
|
||||
<div class="numbers tenhour moveten">0 1 2 3 4 5 6 7 8 9</div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="numbers hour moveten">0 1 2 3 4 5 6 7 8 9</div>
|
||||
</div>
|
||||
<div class="cell divider"><div class="numbers">:</div></div>
|
||||
<div class="cell">
|
||||
<div class="numbers tenminute movesix">0 1 2 3 4 5 6</div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="numbers minute moveten">0 1 2 3 4 5 6 7 8 9</div>
|
||||
</div>
|
||||
<div class="cell divider"><div class="numbers">:</div></div>
|
||||
<div class="cell">
|
||||
<div class="numbers tensecond movesix">0 1 2 3 4 5 6</div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="numbers second moveten">0 1 2 3 4 5 6 7 8 9</div>
|
||||
</div>
|
||||
<div class="cell divider"><div class="numbers">:</div></div>
|
||||
<div class="cell">
|
||||
<div class="numbers milisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="numbers tenmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="numbers hundredmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Lables for the controls -->
|
||||
<div id="timer_controls">
|
||||
<label for="start">Start</label>
|
||||
<label for="stop">Stop</label>
|
||||
<label for="reset">Reset</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"><!--
|
||||
// StyleFix 1.0.2 + PrefixFree 1.0.6 / Lea Verou / MIT license
|
||||
(function(){function h(a,b){return[].slice.call((b||document).querySelectorAll(a))}if(window.addEventListener){var e=window.StyleFix={link:function(a){try{if("stylesheet"!==a.rel||a.hasAttribute("data-noprefix"))return}catch(b){return}var c=a.href||a.getAttribute("data-href"),f=c.replace(/[^\/]+$/,""),i=a.parentNode,d=new XMLHttpRequest,g;d.onreadystatechange=function(){4===d.readyState&&g()};g=function(){var b=d.responseText;if(b&&a.parentNode&&(!d.status||400>d.status||600<d.status)){b=e.fix(b,
|
||||
!0,a);f&&(b=b.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi,function(b,a,c){return!/^([a-z]{3,10}:|\/|#)/i.test(c)?'url("'+f+c+'")':b}),b=b.replace(RegExp("\\b(behavior:\\s*?url\\('?\"?)"+f,"gi"),"$1"));var c=document.createElement("style");c.textContent=b;c.media=a.media;c.disabled=a.disabled;c.setAttribute("data-href",a.getAttribute("href"));i.insertBefore(c,a);i.removeChild(a)}};try{d.open("GET",c),d.send(null)}catch(k){"undefined"!=typeof XDomainRequest&&(d=new XDomainRequest,d.onerror=d.onprogress=
|
||||
function(){},d.onload=g,d.open("GET",c),d.send(null))}a.setAttribute("data-inprogress","")},styleElement:function(a){var b=a.disabled;a.textContent=e.fix(a.textContent,!0,a);a.disabled=b},styleAttribute:function(a){var b=a.getAttribute("style"),b=e.fix(b,!1,a);a.setAttribute("style",b)},process:function(){h('link[rel="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link);h("style").forEach(StyleFix.styleElement);h("[style]").forEach(StyleFix.styleAttribute)},register:function(a,b){(e.fixers=
|
||||
e.fixers||[]).splice(void 0===b?e.fixers.length:b,0,a)},fix:function(a,b){for(var c=0;c<e.fixers.length;c++)a=e.fixers[c](a,b)||a;return a},camelCase:function(a){return a.replace(/-([a-z])/g,function(b,a){return a.toUpperCase()}).replace("-","")},deCamelCase:function(a){return a.replace(/[A-Z]/g,function(a){return"-"+a.toLowerCase()})}};(function(){setTimeout(function(){h('link[rel="stylesheet"]').forEach(StyleFix.link)},10);document.addEventListener("DOMContentLoaded",StyleFix.process,!1)})()}})();
|
||||
(function(h){function e(b,c,f,i,d){b=a[b];b.length&&(b=RegExp(c+"("+b.join("|")+")"+f,"gi"),d=d.replace(b,i));return d}if(window.StyleFix&&window.getComputedStyle){var a=window.PrefixFree={prefixCSS:function(b,c){var f=a.prefix,b=e("functions","(\\s|:|,)","\\s*\\(","$1"+f+"$2(",b),b=e("keywords","(\\s|:)","(\\s|;|\\}|$)","$1"+f+"$2$3",b),b=e("properties","(^|\\{|\\s|;)","\\s*:","$1"+f+"$2:",b);if(a.properties.length)var i=RegExp("\\b("+a.properties.join("|")+")(?!:)","gi"),b=e("valueProperties","\\b",
|
||||
":(.+?);",function(a){return a.replace(i,f+"$1")},b);c&&(b=e("selectors","","\\b",a.prefixSelector,b),b=e("atrules","@","\\b","@"+f+"$1",b));return b=b.replace(RegExp("-"+f,"g"),"-")},property:function(b){return(a.properties.indexOf(b)?a.prefix:"")+b},value:function(b){b=e("functions","(^|\\s|,)","\\s*\\(","$1"+a.prefix+"$2(",b);return b=e("keywords","(^|\\s)","(\\s|$)","$1"+a.prefix+"$2$3",b)},prefixSelector:function(b){return b.replace(/^:{1,2}/,function(b){return b+a.prefix})},prefixProperty:function(b,
|
||||
c){var f=a.prefix+b;return c?StyleFix.camelCase(f):f}};(function(){var b={},c=[],f=getComputedStyle(document.documentElement,null),i=document.createElement("div").style,d=function(a){if("-"===a.charAt(0)){c.push(a);var a=a.split("-"),d=a[1];for(b[d]=++b[d]||1;3<a.length;)a.pop(),d=a.join("-"),StyleFix.camelCase(d)in i&&-1===c.indexOf(d)&&c.push(d)}};if(0<f.length)for(var g=0;g<f.length;g++)d(f[g]);else for(var e in f)d(StyleFix.deCamelCase(e));var g=0,j,h;for(h in b)f=b[h],g<f&&(j=h,g=f);a.prefix=
|
||||
"-"+j+"-";a.Prefix=StyleFix.camelCase(a.prefix);a.properties=[];for(g=0;g<c.length;g++)e=c[g],0===e.indexOf(a.prefix)&&(j=e.slice(a.prefix.length),StyleFix.camelCase(j)in i||a.properties.push(j));"Ms"==a.Prefix&&!("transform"in i)&&!("MsTransform"in i)&&"msTransform"in i&&a.properties.push("transform","transform-origin");a.properties.sort()})();(function(){function b(a,b){e[b]="";e[b]=a;return!!e[b]}var c={"linear-gradient":{property:"backgroundImage",params:"red, teal"},calc:{property:"width",params:"1px + 5%"},
|
||||
element:{property:"backgroundImage",params:"#foo"},"cross-fade":{property:"backgroundImage",params:"url(a.png), url(b.png), 50%"}};c["repeating-linear-gradient"]=c["repeating-radial-gradient"]=c["radial-gradient"]=c["linear-gradient"];var f={initial:"color","zoom-in":"cursor","zoom-out":"cursor",box:"display",flexbox:"display","inline-flexbox":"display"};a.functions=[];a.keywords=[];var e=document.createElement("div").style,d;for(d in c){var g=c[d],h=g.property,g=d+"("+g.params+")";!b(g,h)&&b(a.prefix+
|
||||
g,h)&&a.functions.push(d)}for(var j in f)h=f[j],!b(j,h)&&b(a.prefix+j,h)&&a.keywords.push(j)})();(function(){function b(a){e.textContent=a+"{}";return!!e.sheet.cssRules.length}var c={":read-only":null,":read-write":null,":any-link":null,"::selection":null},f={keyframes:"name",viewport:null,document:'regexp(".")'};a.selectors=[];a.atrules=[];var e=h.appendChild(document.createElement("style")),d;for(d in c){var g=d+(c[d]?"("+c[d]+")":"");!b(g)&&b(a.prefixSelector(g))&&a.selectors.push(d)}for(var k in f)g=
|
||||
k+" "+(f[k]||""),!b("@"+g)&&b("@"+a.prefix+g)&&a.atrules.push(k);h.removeChild(e)})();a.valueProperties=["transition","transition-property"];h.className+=" "+a.prefix;StyleFix.register(a.prefixCSS)}})(document.documentElement);
|
||||
//--></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user