You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
125 lines
3.7 KiB
HTML
125 lines
3.7 KiB
HTML
8 months ago
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Radio, what's new?</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
background-color: #101010;
|
||
|
|
text-align: center;
|
||
|
|
color: #ccc;
|
||
|
|
}
|
||
|
|
|
||
|
|
#container {
|
||
|
|
margin: 5vw auto;
|
||
|
|
padding: 20px;
|
||
|
|
border: 1px solid #555;
|
||
|
|
background-color: #444;
|
||
|
|
width: 90vw;
|
||
|
|
height: 90vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
#unlock-input {
|
||
|
|
width: 80vw;
|
||
|
|
padding: 5px;
|
||
|
|
border: 1px solid #555;
|
||
|
|
border-radius: 4px;
|
||
|
|
font-size: 7.5em;
|
||
|
|
background-color: #333;
|
||
|
|
text-align: center;
|
||
|
|
color: #ff0400;
|
||
|
|
-webkit-appearance: none;
|
||
|
|
-moz-appearance: none;
|
||
|
|
appearance: none;
|
||
|
|
margin-bottom: 7vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
#unlock-input::-webkit-inner-spin-button,
|
||
|
|
#unlock-input::-webkit-outer-spin-button {
|
||
|
|
-webkit-appearance: none;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
#unlock-input[type=number] {
|
||
|
|
-moz-appearance: textfield;
|
||
|
|
}
|
||
|
|
|
||
|
|
#unlock-button {
|
||
|
|
background-color: #9e9e9e;
|
||
|
|
color: #960dff;
|
||
|
|
border: none;
|
||
|
|
padding: 10px 20px;
|
||
|
|
margin-top: 5vh;
|
||
|
|
border-radius: 4px;
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 6.7em;
|
||
|
|
}
|
||
|
|
|
||
|
|
#unlock-button:hover {
|
||
|
|
background-color: #ccc;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button-container {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.number-button {
|
||
|
|
width: 23vw;
|
||
|
|
height: 10vh;
|
||
|
|
background-color: #960dff;
|
||
|
|
border: 2px solid #989898;
|
||
|
|
color: #ccc;
|
||
|
|
font-size: 5em;
|
||
|
|
margin: 0.25em;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
cursor: pointer;
|
||
|
|
border-radius: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.number-button:hover {
|
||
|
|
background-color: #444;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="container">
|
||
|
|
<h2></h2>
|
||
|
|
<input type="number" id="unlock-input" maxlength="5" pattern="\d{5}" placeholder="00000">
|
||
|
|
<div class="button-container">
|
||
|
|
<div class="number-button" onclick="appendToInput('1')">1</div>
|
||
|
|
<div class="number-button" onclick="appendToInput('2')">2</div>
|
||
|
|
<div class="number-button" onclick="appendToInput('3')">3</div>
|
||
|
|
<div class="number-button" onclick="appendToInput('4')">4</div>
|
||
|
|
<div class="number-button" onclick="appendToInput('5')">5</div>
|
||
|
|
<div class="number-button" onclick="appendToInput('6')">6</div>
|
||
|
|
<div class="number-button" onclick="appendToInput('7')">7</div>
|
||
|
|
<div class="number-button" onclick="appendToInput('8')">8</div>
|
||
|
|
<div class="number-button" onclick="appendToInput('9')">9</div>
|
||
|
|
<div class="number-button" onclick="appendToInput('0')">0</div>
|
||
|
|
</div>
|
||
|
|
<br>
|
||
|
|
<button id="unlock-button" onclick="unlockAudio()">ENTER</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function appendToInput(value) {
|
||
|
|
const input = document.getElementById("unlock-input");
|
||
|
|
input.value += value;
|
||
|
|
}
|
||
|
|
|
||
|
|
function unlockAudio() {
|
||
|
|
const code = document.getElementById("unlock-input").value;
|
||
|
|
if (code === "23899") {
|
||
|
|
const audio = new Audio("https://eixo.codes/016.mp3");
|
||
|
|
alert("*challenge unlocked* turn volume up >>>");
|
||
|
|
audio.play();
|
||
|
|
} else {
|
||
|
|
alert("Incorrect code. Please try again.");
|
||
|
|
}
|
||
|
|
document.getElementById("unlock-input").value = "";
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|