120 lines
3.5 KiB
HTML
120 lines
3.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<link rel="icon" type="image/x-icon" href="../favicon.ico">
|
||
|
|
<title>deep twisty - Some Assembly Required</title>
|
||
|
|
<link href="../style.css" rel="stylesheet" type="text/css" media="all">
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var leadIndex = 1;
|
||
|
|
var secIndex = 1;
|
||
|
|
var beatIndex = 1;
|
||
|
|
var iteration = "";
|
||
|
|
var noise = document.createElement("AUDIO");
|
||
|
|
|
||
|
|
function setIndices() {
|
||
|
|
leadIndex = document.getElementById("lead").value;
|
||
|
|
secIndex = document.getElementById("sec").value;
|
||
|
|
beatIndex = document.getElementById("beat").value;
|
||
|
|
|
||
|
|
iteration = leadIndex.toString().concat(secIndex.toString().concat(beatIndex.toString()));
|
||
|
|
noise.setAttribute("src", iteration.concat(".mp3"));
|
||
|
|
document.getElementById("iterName").innerHTML='<a class="iter" href="'.concat(iteration) + '.mp3">' + 'Iteration '.concat(iteration) + '</a>';
|
||
|
|
}
|
||
|
|
|
||
|
|
function PlayMusic() {
|
||
|
|
setIndices();
|
||
|
|
noise.play();
|
||
|
|
}
|
||
|
|
|
||
|
|
function StopMusic() {
|
||
|
|
noise.pause();
|
||
|
|
noise.fastSeek(0);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
text-align: center;
|
||
|
|
text-shadow: 0 0 6px black;
|
||
|
|
}
|
||
|
|
hr {
|
||
|
|
width: 30%;
|
||
|
|
margin: auto;
|
||
|
|
}
|
||
|
|
.Main {
|
||
|
|
background: #202020 url("../images/bg_default.png");
|
||
|
|
height: fit-content;
|
||
|
|
min-height: 100%;
|
||
|
|
max-width: 750px;
|
||
|
|
box-shadow: 0 10px 8px 4px black inset;
|
||
|
|
margin-top: -20px;
|
||
|
|
padding-top: 20px;
|
||
|
|
padding-left: 30px;
|
||
|
|
padding-right: 30px;
|
||
|
|
}
|
||
|
|
#header {
|
||
|
|
margin-bottom: -15px;
|
||
|
|
transform: rotate(-2deg);
|
||
|
|
}
|
||
|
|
button {
|
||
|
|
color: white;
|
||
|
|
width:15%;
|
||
|
|
padding:.5%;
|
||
|
|
background-color: transparent;
|
||
|
|
border: 2px solid white;
|
||
|
|
box-shadow: 0 0 8px white, 0 0 8px white inset, 4px 4px 8px black;
|
||
|
|
margin: 4px;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
button:hover {
|
||
|
|
text-shadow: 0 0 4px white;
|
||
|
|
background-color: #ffffff22;
|
||
|
|
}
|
||
|
|
button:active {
|
||
|
|
background-color: transparent;
|
||
|
|
text-shadow: none;
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
input {
|
||
|
|
width:10%;
|
||
|
|
padding:.5%;
|
||
|
|
text-align: center;
|
||
|
|
border: none;
|
||
|
|
box-shadow: 4px 4px 4px black, 0 0 2px white, 0 0 2px white inset;
|
||
|
|
margin: 4px;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
#subheader {
|
||
|
|
margin-top: -15px;
|
||
|
|
margin-bottom: 0;
|
||
|
|
font-size: 2em;
|
||
|
|
transform: rotate(0.8deg);
|
||
|
|
font-family: var(--hfont);
|
||
|
|
}
|
||
|
|
.iter { color: gainsboro; transition-duration: 0.2s; }
|
||
|
|
.iter:hover { color: white; text-shadow: 0 0 7px white;}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body background="bg_default.png" bgcolor="black">
|
||
|
|
|
||
|
|
<div class="Main">
|
||
|
|
<h1 id="header"><span id="headerblue">Some</span> <span id="headergreen">Assembly</span> <span id="headeryellow">Required</span></h1>
|
||
|
|
<h2 id="subheader">by deep twisty</h2>
|
||
|
|
<h1 id="iterName">Iteration ___</h1>
|
||
|
|
<input type="number" min="1" max="3" step="1" value="1" id="lead">
|
||
|
|
<input type="number" min="1" max="3" step="1" value="1" id="sec">
|
||
|
|
<input type="number" min="1" max="3" step="1" value="1" id="beat"><br>
|
||
|
|
<button onclick="PlayMusic();">play</button>
|
||
|
|
<button onclick="StopMusic();">stop</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|