netget
Version:
Rette Adepto/ Recibido Directamente.
110 lines (97 loc) • 2.58 kB
HTML
<html>
<head>
<style>
/* Styles for the pedal container */
.pedal {
background: #333;
width: 200px;
padding: 20px;
border-radius: 10px;
margin: 0 auto;
text-align: center;
}
/* Styles for the display */
.display {
background: #000;
color: #fff;
font-size: 2em;
padding: 10px;
border-radius: 5px;
margin-bottom: 20px;
}
/* Styles for the knobs */
.knobs {
display: flex;
justify-content: space-around;
}
.knob {
background: #555;
border-radius: 50%;
width: 50px;
height: 50px;
line-height: 50px;
color: white;
margin-bottom: 10px;
}
/* Styles for the foot switch */
.foot-switch {
background: #000;
border: none;
height: 40px;
width: 70px;
border-radius: 35px;
cursor: pointer;
outline: none;
}
/* Styles for the labels */
.labels {
display: flex;
justify-content: space-between;
}
.input-label, .output-label {
color: #fff;
font-size: 0.8em;
}
/* Additional styles for responsiveness and aesthetics */
</style>
</head>
<body>
<div class="pedal">
<div class="display">99</div>
<div class="knobs">
<div class="knob">Port
</div>
<div class="knob">Restart
</div>
</div>
<div class="switch">
<button class="foot-switch"></button>
</div>
<div class="labels">
<div class="input-label">Input</div>
<div class="output-label">Output</div>
</div>
</div>
<script>
const footSwitch = document.querySelector('.foot-switch');
footSwitch.addEventListener('click', () => {
footSwitch.textContent = footSwitch.textContent === 'ON' ? 'OFF' : 'ON';
});
</script>
<!-- lets create another version trying to make it look better.-->
<div class="pedal">
<div class="display">99</div>
<div class="knobs">
<div class="knob">Port </div>
<div class="knob">Restart</div>
</div>
<div class="switch">
<button class="foot-switch"></button>
</div>
<div class="labels">
<div class="input-label">Input</div>
<div class="output-label">Output</div>
</div>
</div>
</body>
</html>