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

<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>