|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>Spin N Win</title> |
|
|
|
<link rel="stylesheet" href="https://huggingface.co/spaces/DMTuit/psy4/resolve/main/css/main.css"> |
|
<script src="https://huggingface.co/spaces/DMTuit/psy4/resolve/main/js/main.js"></script> |
|
|
|
<style> |
|
* { |
|
margin: 0; |
|
padding: 0; |
|
box-sizing: border-box; |
|
} |
|
|
|
body { |
|
height: 100vh; |
|
display: grid; |
|
place-items: center; |
|
} |
|
|
|
#wheelOfFortune { |
|
display: inline-block; |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
|
|
#wheel { |
|
display: block; |
|
} |
|
|
|
#spin { |
|
font: 1.5em/0 sans-serif; |
|
user-select: none; |
|
cursor: pointer; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
position: absolute; |
|
top: 50%; |
|
left: 50%; |
|
width: 30%; |
|
height: 30%; |
|
margin: -15%; |
|
background: #fff; |
|
color: #fff; |
|
box-shadow: 0 0 0 8px currentColor, 0 0px 15px 5px rgba(0, 0, 0, 0.6); |
|
border-radius: 50%; |
|
transition: 0.8s; |
|
} |
|
|
|
#spin::after { |
|
content: ''; |
|
position: absolute; |
|
top: -17px; |
|
border: 10px solid transparent; |
|
border-bottom-color: currentColor; |
|
border-top: none; |
|
} |
|
|
|
|
|
|
|
|
|
</style> |
|
|
|
|
|
|
|
</head> |
|
|
|
<body> |
|
<div id="wheelOfFortune"> |
|
<canvas id="wheel" width="300" height="300"></canvas> |
|
<div id="spin">Пуск</div> |
|
</div> |
|
</body> |
|
</html> |
|
|
