2024-01-25 23:08:03 +00:00
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf8" />
|
2024-01-26 14:18:03 +00:00
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
2024-01-25 23:08:03 +00:00
|
|
|
<title>🌟 Valde 30 🌟</title>
|
|
|
|
|
<style>
|
|
|
|
|
html, body {
|
2024-01-26 14:18:03 +00:00
|
|
|
padding : 0;
|
|
|
|
|
margin : 0;
|
2024-01-25 23:08:03 +00:00
|
|
|
width : 100%;
|
|
|
|
|
height : 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body div {
|
|
|
|
|
font-size : 2.88em;
|
|
|
|
|
color : #aa2211;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#play {
|
|
|
|
|
height: 180px;
|
|
|
|
|
width: 180px;
|
|
|
|
|
border-radius: 100%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 180px;
|
|
|
|
|
font-size: 100px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition: background-color 0.4s, color 0.4s;
|
|
|
|
|
box-shadow: 0 0 10px rgba(0,0,0,0.6);
|
|
|
|
|
background-position: center center;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#play.paused {
|
|
|
|
|
background-color: #efefef;
|
|
|
|
|
color: #121212;
|
|
|
|
|
background-image: url('/static/images/play.svg');
|
|
|
|
|
background-position: 58% 54%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#play.playing {
|
|
|
|
|
background-color: #121212;
|
|
|
|
|
color: #efefef;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div>
|
|
|
|
|
<h2>🌟 Valde 30 🌟</h2>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div id="play" class="paused"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<script src="static/js/lib/socket.io.js"></script>
|
|
|
|
|
<script src="static/js/lib/Tone.js"></script>
|
|
|
|
|
<script type="module" src="static/js/main.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
// Random colours
|
|
|
|
|
let hexString = "0123456789abcdef";
|
2024-01-26 14:18:03 +00:00
|
|
|
|
2024-01-25 23:08:03 +00:00
|
|
|
let randomColor = () => {
|
|
|
|
|
let hexCode = "#";
|
|
|
|
|
for( i=0; i<6; i++){
|
|
|
|
|
hexCode += hexString[Math.floor(Math.random() * hexString.length)];
|
|
|
|
|
}
|
|
|
|
|
return hexCode;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let generateGrad = () => {
|
|
|
|
|
let colorOne = randomColor();
|
|
|
|
|
let colorTwo = randomColor();
|
|
|
|
|
let angle = Math.floor(Math.random() * 360);
|
|
|
|
|
document.body.style.background = `linear-gradient(${angle}deg, ${colorOne}, ${colorTwo})`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
generateGrad()
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
