HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Roulette</title>
<style>
@keyframes rota3 {
to {
transform: rotate(-45deg)
}
}
@keyframes welcome {
50% {
color: #eee
}
80%,
90% {
color: #7c0d80;
text-shadow: none
}
}
body,
html {
height: 100%
}
body {
overflow-x: hidden;
margin: 0;
-webkit-tap-highlight-color: transparent;
-moz-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: #eee;
font: 16px/1.5 Verdana, Geneva, Tahoma, sans-serif;
background: radial-gradient(circle at 50%, transparent 10%, #000 60%), repeating-radial-gradient(circle at 50% -500%, #5f213f 0 24px, #6a2c4a 25px 48px, #753755 49px 72px, #804260 73px 96px, #8b4d6b 97px 120px, #965876 121px 144px, #a16381 145px 168px, #ac6e8c 169px 192px, #a16381 193px 216px, #965876 217px 240px, #8b4d6b 241px 264px, #804260 265px 288px, #753755 289px 312px, #6a2c4a 313px 336px)
}
.navw,
footer {
display: block;
overflow: hidden
}
footer {
background: radial-gradient(#000 28%, transparent 35%) -1px -1px/14px 14px, radial-gradient(#222 28%, transparent 40%) 0 0/14px 14px, radial-gradient(#000 28%, transparent 35%) -8px -8px/14px 14px, radial-gradient(#222 28%, transparent 40%) 7px -7px/14px 14px #111;
height: 40%;
width: 100%;
z-index: -3;
color: #777;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
text-align: center
}
footer span::after {
content: "by Kostas Šliažas";
width: 100%;
height: 20px;
line-height: 20px;
display: block;
position: relative
}
footer span {
padding-top: 2px;
background: #111;
display: block
}
* {
box-sizing: border-box
}
.navw,
footer,
nav {
position: relative
}
.navw {
width: 90%;
margin: 0 auto;
max-width: 280px;
min-width: 120px;
padding: 10px
}
nav,
ul {
height: 100%;
width: 100%
}
nav {
padding-bottom: 100%;
top: 0
}
nav::after,
ul {
border-radius: 50%
}
ul {
transform-style: preserve-3d;
transition: 2s transform;
transform: rotateZ(1deg);
font-size: 0;
margin: 0;
padding: 0;
display: block;
overflow: hidden;
backface-visibility: hidden;
border: 6px dotted #eee;
box-shadow: 0 -55px 0 -48px #990c56, 0 55px 0 -48px #990c56, 55px 0 0 -48px #990c56, -55px 0 0 -48px #990c56, -39px -39px 0 -48px #990c56, 39px -39px 0 -48px #990c56, -39px 39px 0 -48px #990c56, 39px 39px 0 -48px #990c56, -22px -51px 0 -48px #990c56, -51px 22px 0 -48px #990c56, 51px -22px 0 -48px #990c56, -51px -22px 0 -48px #990c56, 51px 22px 0 -48px #990c56, 22px 51px 0 -48px #990c56, -22px 51px 0 -48px #990c56, 22px -51px 0 -48px #990c56;
background: repeating-radial-gradient(#990c56 0 24px, #dc78a6 25px 48px, #eb87b5 49px 72px, #fa96c4 73px 96px, #ffa5d3 97px 120px, #fa96c4 121px 144px, #eb87b5 145px 168px, #dc78a6 169px 192px)
}
li,
nav::after,
ul {
position: absolute
}
nav::after {
content: "";
height: 10px;
width: 10px;
background: #eee;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
li {
font-size: 24px;
border-radius: 0 50% 50% 0;
display: block;
height: 10%;
width: 50%;
line-height: 24px;
background: #990c56
}
li:nth-child(1) {
top: 17%;
left: 25%;
transform: rotateZ(90deg)
}
li:nth-child(2) {
bottom: 17%;
left: 25%;
transform: rotateZ(270deg)
}
li:nth-child(3),
li:nth-child(4) {
top: 45%
}
li:nth-child(3) {
left: -3%
}
li:nth-child(4) {
right: -3%;
transform: scale(-1)
}
li:nth-child(5) {
top: 25%;
left: 5%;
transform: rotateZ(45deg)
}
li:nth-child(6) {
top: 25%;
right: 5%;
transform: rotateZ(135deg)
}
li:nth-child(7) {
bottom: 25%;
left: 5%;
transform: rotateZ(-45deg)
}
li:nth-child(8) {
bottom: 25%;
right: 5%;
transform: rotateZ(-135deg)
}
h1 {
text-align: center;
animation: welcome 1s steps(1, end) infinite;
filter: drop-shadow(4px 4px 2px #000);
text-shadow: 2px 2px 0 #7c0d80, 2px -2px 0 #7c0d80, -2px 2px 0 #7c0d80, -2px -2px 0 #7c0d80, 2px 0 0 #7c0d80, 0 2px 0 #7c0d80, -2px 0 0 #7c0d80, 0 -2px 0 #7c0d80
}
.arrow,
a,
h1 {
color: #eee
}
a {
text-decoration: none;
margin: 0 10%;
font-size: 16px
}
.arrow,
.arrow::after {
transform-style: preserve-3d
}
.arrow {
position: relative;
background: #05f;
border-radius: 20px;
padding: 2%;
width: 100px;
text-align: center;
margin: 16px auto;
box-shadow: 0 2px 2px 1px #fff inset, 0 0 2px 1px #000
}
#spin+label,
.arrow::after {
display: block;
position: absolute
}
.arrow::after {
transform: translateZ(-1px);
content: "";
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 25px solid #012;
top: -5px;
margin: -12px;
left: 50%;
transform-origin: bottom center;
filter: drop-shadow(0 0 2px #000)
}
#spin {
display: none
}
#spin[disabled=""]+label {
background: #990c56
}
#spin[disabled=""]~.arrow::after {
animation: rota3 .1s 95 steps(2, end) alternate
}
#spin+label:hover {
color: #fff
}
#spin+label {
-webkit-box-shadow: 0 1px 0 0 #fff inset;
box-shadow: 0 1px 0 0 #fff inset;
background-color: #205a00;
border: #9da3a1 solid 1px;
color: #aaa;
border-radius: 50%;
cursor: pointer;
font-weight: 700;
margin-top: 90%;
right: 4px;
z-index: 2;
width: 48px;
height: 48px;
line-height: 48px;
text-align: center;
filter: drop-shadow(0 0 1px #000)
}
</style>
</head>
<body>
<h1>
Is he/she the one
</h1>
<div class="navw">
<input type="checkbox" id="spin" value="spin">
<label for="spin" id="laberls">Spin</label>
<nav>
<ul>
<li><a href="#">Noo..</a></li>
<li><a href="#">Not</a></li>
<li><a href="#">404</a></li>
<li><a href="#">Sorry..</a></li>
<li><a href="#">Noo..</a></li>
<li><a href="#">No!</a></li>
<li><a href="#">maybe</a></li>
<li><a href="#">ofcourse</a></li>
</ul>
</nav>
<div class="arrow">she/he</div>
</div>
<footer>
<span></span>
</footer>
<script>
;
(function () {
"use strict";
let rout = document.getElementsByTagName("li");
let wins = document.getElementById("wins");
let stopBtn = document.getElementById("spin");
let nav = document.getElementsByTagName("nav")[0];
let ul = document.getElementsByTagName("ul")[0];
window.onload = () => {
let inputs = [...document.getElementsByTagName("input")];
let begin = 0;
function reset(e) {
if (e.target.id === "laberls" && !e.target.previousElementSibling.disabled) {
e.target.previousElementSibling.disabled = true;
tetxToggle.call(e.target);
let ro = begin + rand(500, 960);
begin = ro;
ul.style.transform = "rotate(" + ro + "deg";
setTimeout(() => {
inputs.forEach((e) => {
e.checked = false;
e.disabled = false;
tetxToggle.call(e.nextElementSibling);
});
clearTimeout();
}, 2000);
}
}
function tetxToggle() {
if (this.innerText === "wait") {
this.innerText = "spin";
} else {
this.innerText = "wait";
}
}
function rand(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
}
document.addEventListener("click", reset);
}
})();
</script>
</body>
</html>
