netget
Version:
Rette Adepto/ Recibido Directamente.
193 lines (163 loc) • 4.82 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NetGet X</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap" rel="stylesheet">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #121416;
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<style>
.pedal {
width: 203px;
background: #141e1d;
padding: 8px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
text-align: center;
}
</style>
<div class="pedal">
<style>
.NetGetXHeader {
margin-bottom: 1px;
}
.NetGetXHeader h1 {
color: #fff;
font-size: 2em;
}
</style>
<div class="NetGetXHeader">
<h1>NetGetX</h1>
</div>
<style>
.display {
background: #0b1416;
color: #17bdcc;
font-size: 1.28em;
padding: 8px 16px;
flex: none;
}
.display-container {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.knobPort {
background: #202a27;
width: 30px;
height: 42px;
line-height: 30px;
color: white;
font-weight: bold;
cursor: pointer;
user-select: none;
}
.PortLabel {
color: #fff;
font-size: .89em;
}
</style>
<style>
.display-ip {
background: #0b1416;
color: #17bdcc;
font-size: .89em;
padding: 8px 8px;
}
.display-containerIP {
align-items: center;
justify-content: center;
margin-bottom: 2px;
}
</style>
<p class="PortLabel">IP Address:</p>
<div class="display-ip">
<div class="display-containerIP">
<div class="IPdisplay">0.0.0.0</div>
</div></div>
<p class="PortLabel">Listens on Port:</p>
<div class="display-container">
<div class="knobPort" onclick="changePort(-1)">-</div>
<div class="display" id="portDisplay">99</div>
<div class="knobPort" onclick="changePort(1)">+</div>
</div>
<style>
.knob, .button {
background: #0b1416; /* Dark background color */
color: #17bdcc;; /* Mint green text color */
font-weight: bold;
border: 2px solid rgb(35, 121, 110); /* Border color matching the text */
padding: 5px 15px; /* Padding for button content */
cursor: pointer; /* Cursor indicates clickable area */
outline: none; /* Removes the outline to prevent focus highlight */
user-select: none; /* Prevents text selection */
}
.button:hover {
background: rgb(35, 121, 110); /* Change background on hover */
color: #141c1d; /* Change text color on hover */
}
</style>
<button class="knob">Restart</button>
<br>
<br>
<style>
.foot-switch {
background: #acacac;
border: none;
height: 40px;
width: 70px;
border-radius: 20px;
color: white;
cursor: pointer;
outline: none;
transition: background 0.3s;
margin-top: 10px;
}
.foot-switch.on, .button:hover {
background: rgba(51, 215, 40, 0.889); /* Green when on or hover */
}
</style>
<div class="Light"></div>
<button class="foot-switch">On/Off</button>
<script>
document.querySelector('.foot-switch').addEventListener('click', function() {
this.classList.toggle('on');
this.textContent = this.classList.contains('on') ? 'On' : 'Off';
});
</script>
<style>
.labels {
display: flex;
justify-content: space-between;
color: #fff;
font-size: 0.88em;
}
</style>
<div class="labels">
<span class="input-label">Input</span>
<span class="output-label">Output</span>
</div>
</div>
<script>
const portDisplay = document.getElementById('portDisplay');
function changePort(delta) {
let currentPort = parseInt(portDisplay.textContent);
currentPort += delta;
portDisplay.textContent = currentPort;
}
</script>
</body>
</html>