diff options
Diffstat (limited to 'some-assembly-required')
| -rw-r--r-- | some-assembly-required/index.html | 120 |
1 files changed, 120 insertions, 0 deletions
diff --git a/some-assembly-required/index.html b/some-assembly-required/index.html new file mode 100644 index 0000000..026070c --- /dev/null +++ b/some-assembly-required/index.html @@ -0,0 +1,120 @@ +<!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>
\ No newline at end of file |