1494 lines
58 KiB
HTML
1494 lines
58 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>endless mines</title>
|
|
<style type="text/css">
|
|
@font-face {
|
|
font-family: Helsinki;
|
|
src: url('helsinki.eot');
|
|
src: url('helsinki.eot?#iefix') format('embedded-opentype'),
|
|
url('helsinki.woff2') format('woff2'),
|
|
url('helsinki.woff') format('woff'),
|
|
url('helsinki.ttf') format('truetype'),
|
|
url('helsinki.svg#helsinkiregular') format('svg');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
font-family: Helsinki;
|
|
}
|
|
|
|
html {
|
|
background-color: #272822;
|
|
margin: 0;
|
|
height: 10em; /* fallback */
|
|
height: 100vh;
|
|
width: 10em; /* fallback */
|
|
width: 100vw;
|
|
overflow: hidden;
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
body {
|
|
height: 10em; /* fallback */
|
|
height: 100vh;
|
|
margin: 0 auto;
|
|
width: 10em; /* fallback */
|
|
width: 100vmin;
|
|
}
|
|
|
|
@keyframes scrollLeft {
|
|
from {left: 0;}
|
|
to {
|
|
left: -720em; /* fallback */
|
|
left: -7200vmin;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes scrollLeft {
|
|
from {left: 0;}
|
|
to {
|
|
left: -720em; /* fallback */
|
|
left: -7200vmin;
|
|
}
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0% {top: 0; left: 0;}
|
|
50% {
|
|
top: 1.2em; /* fallback */
|
|
top: 12vmin;
|
|
left: 0.2em; /* fallback */
|
|
left: 2vmin;
|
|
}
|
|
100% {top: 0; left: 0;}
|
|
}
|
|
|
|
@-webkit-keyframes bounce {
|
|
0% {top: 0; left: 0;}
|
|
50% {
|
|
top: 1.2em; /* fallback */
|
|
top: 12vmin;
|
|
left: 0.2em;
|
|
left: 2vmin;
|
|
}
|
|
100% {top: 0; left: 0;}
|
|
}
|
|
|
|
@keyframes rainbow {
|
|
0% {color: #c6fe7a;}
|
|
33% {color: #7ac5fe;}
|
|
67% {color: #fe7ac6;}
|
|
100% {color: #c6fe7a;} /* back to start */
|
|
}
|
|
|
|
@-webkit-keyframes rainbow {
|
|
0% {color: #c6fe7a;}
|
|
33% {color: #7ac5fe;}
|
|
67% {color: #fe7ac6;}
|
|
100% {color: #c6fe7a;} /* back to start */
|
|
}
|
|
|
|
#cracktro {
|
|
color: #c6fe7a;
|
|
font-size: 0.4em; /* fallback */
|
|
font-size: 6vmin;
|
|
height: 2em; /* fallback */
|
|
height: 20vmin;
|
|
margin: 0.4em 0; /* fallback */
|
|
margin: 4vmin 0;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
width: 720em;
|
|
width: 7200vmin;
|
|
|
|
position: relative;
|
|
animation: scrollLeft 420s linear infinite;
|
|
-webkit-animation: scrollLeft 420s linear infinite;
|
|
}
|
|
|
|
#cracktro span {
|
|
margin-right: 0.1em; /* fallback */
|
|
margin-right: 1vmin;
|
|
position: relative;
|
|
animation: bounce 4s infinite ease-in-out,rainbow 5s infinite;
|
|
-webkit-animation: bounce 4s infinite ease-in-out,rainbow 5s infinite;
|
|
text-shadow: 0.5vmin 0.5vmin black;
|
|
}
|
|
|
|
#cracktro span:nth-child(10n+1) {
|
|
animation-delay: 0.4s;
|
|
-webkit-animation-delay: 0.4s;
|
|
}
|
|
#cracktro span:nth-child(10n+2) {
|
|
animation-delay: 0.8s;
|
|
-webkit-animation-delay: 0.8s;
|
|
}
|
|
#cracktro span:nth-child(10n+3) {
|
|
animation-delay: 1.2s;
|
|
-webkit-animation-delay: 1.2s;
|
|
}
|
|
#cracktro span:nth-child(10n+4) {
|
|
animation-delay: 1.6s;
|
|
-webkit-animation-delay: 1.6s;
|
|
}
|
|
#cracktro span:nth-child(10n+5) {
|
|
animation-delay: 2s;
|
|
-webkit-animation-delay: 2s;
|
|
}
|
|
#cracktro span:nth-child(10n+6) {
|
|
animation-delay: 2.4s;
|
|
-webkit-animation-delay: 2.4s;
|
|
}
|
|
#cracktro span:nth-child(10n+7) {
|
|
animation-delay: 2.8s;
|
|
-webkit-animation-delay: 2.8s;
|
|
}
|
|
#cracktro span:nth-child(10n+8) {
|
|
animation-delay: 3.2s;
|
|
-webkit-animation-delay: 3.2s;
|
|
}
|
|
#cracktro span:nth-child(10n+9) {
|
|
animation-delay: 3.6s;
|
|
-webkit-animation-delay: 3.6s;
|
|
}
|
|
|
|
#game {
|
|
background-color: #1b1c17;
|
|
float: left;
|
|
margin: 0 auto;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#stats {
|
|
height: 1em; /* fallback */
|
|
height: 10vmin;
|
|
width: 10em; /* fallback */
|
|
width: 100vmin;
|
|
float: left;
|
|
|
|
background: #768087;
|
|
background: -moz-linear-gradient(top, #768087 0%, #53595e 100%);
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #768087), color-stop(100%, #53595e));
|
|
background: -webkit-linear-gradient(top, #768087 0%,#53595e 100%);
|
|
background: -o-linear-gradient(top, #768087 0%,#53595e 100%);
|
|
background: -ms-linear-gradient(top, #768087 0%,#53595e 100%);
|
|
background: linear-gradient(to bottom, #768087 0%,#53595e 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#768087', endColorstr='#53595e',GradientType=0 );
|
|
}
|
|
|
|
#stats button {
|
|
margin: 0.1em; /* fallback */
|
|
margin: 1vmin;
|
|
float: right;
|
|
font-size: 0.3em; /* fallback */
|
|
font-size: 3vmin;
|
|
border-radius: 0.2em; /* fallback */
|
|
border-radius: 2vmin;
|
|
padding: 0.175em; /* fallback */
|
|
padding: 1.75vmin;
|
|
box-shadow: 0.05em 0.05em 0 #000; /* fallback */
|
|
box-shadow: 0.5vmin 0.5vmin 0 #000;
|
|
border: 0.4vmin solid #454e52;
|
|
position: relative;
|
|
top: auto;
|
|
left: auto;
|
|
}
|
|
|
|
#stats div {
|
|
float: left;
|
|
font-size: 0.54em; /* fallback */
|
|
font-size: 5.4vmin;
|
|
margin: 0.2em; /* fallback */
|
|
margin: 2vmin;
|
|
width: auto;
|
|
}
|
|
|
|
#gameOver, #setup, #tutorial {
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
width: 10em; /* fallback */
|
|
width: 100vmin;
|
|
height: 10em; /* fallback */
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
}
|
|
|
|
#gameOver .score {
|
|
margin-right: 1.2em;
|
|
margin-right: 12vmin;
|
|
}
|
|
|
|
#setup h2 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
#setup h2,
|
|
#setup label {
|
|
margin: 0.4em 0.35em; /* fallback */
|
|
margin: 4vmin 3.5vmin;
|
|
font-size: 0.6em; /* fallback */
|
|
font-size: 6vmin;
|
|
color: #fe7ac6;
|
|
text-shadow: 0.05em 0.05em 0 #a4f4b4; /* fallback */
|
|
text-shadow: 0.5vmin 0.5vmin 0 #a4f4b4; /* x y blur-radius colour */
|
|
}
|
|
|
|
#tutorial .gameBoard {
|
|
float: left;
|
|
padding: 0.5em; /* fallback */
|
|
padding: 5vmin;
|
|
padding-top: 0;
|
|
}
|
|
|
|
#tutorial p {
|
|
padding: 0 0.5em; /* fallback */
|
|
padding: 0 5vmin;
|
|
}
|
|
|
|
.centre {
|
|
clear: both;
|
|
margin-top: 0.2em; /* fallback */
|
|
margin-top: 2vmin;
|
|
text-align: center;
|
|
}
|
|
|
|
.subtitle {
|
|
text-align: center;
|
|
}
|
|
|
|
button {
|
|
font-size: 0.6em; /* fallback */
|
|
font-size: 6vmin;
|
|
border-radius: 0.2em; /* fallback */
|
|
border-radius: 2vmin;
|
|
padding: 0.2em; /* fallback */
|
|
padding: 2vmin;
|
|
margin: 0 auto;
|
|
box-shadow: 0.1em 0.1em 0 #000; /* fallback */
|
|
box-shadow: 1vmin 1vmin 0 #000;
|
|
border: none;
|
|
|
|
background: #768087;
|
|
background: -moz-linear-gradient(top, #768087 0%, #53595e 100%);
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#768087), color-stop(100%,#53595e));
|
|
background: -webkit-linear-gradient(top, #768087 0%,#53595e 100%);
|
|
background: -o-linear-gradient(top, #768087 0%,#53595e 100%);
|
|
background: -ms-linear-gradient(top, #768087 0%,#53595e 100%);
|
|
background: linear-gradient(to bottom, #768087 0%,#53595e 100%);
|
|