piso wifi
HTML
<!DOCTYPE html>
<html>
<head>
<title>Piso WiFi</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<img src="https://akm-img-a-in.tosshub.com/businesstoday/images/story/202011/pubg_game_660_171120121022.jpg?size=948:533" alt="Piso WiFi Logo">
<div class="container">
<h1>Piso WiFi</h1>
<p>Please insert a coin to connect to the internet.</p>
<div class="coin-slot">
<p>Insert coin here:</p>
<input type="text" id="coin-input" placeholder="PHP 1">
<button onclick="connect()">Connect</button>
</div>
<div class="wifi-connection">
<h2>WiFi Connection</h2>
<p id="wifi-status">Not connected</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
.container {
max-width: 600px;
margin: 0 auto;
padding: 40px;
background-color: #f2f2f2;
text-align: center;
}
h1 {
font-size: 48px;
margin-top: 0;
}
.coin-slot {
margin-top: 40px;
}
input[type=text] {
padding: 10px;
font-size: 18px;
border-radius: 5px;
border: none;
}
button {
padding: 10px;
font-size: 18px;
border-radius: 5px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #3e8e41;
}
.wifi-connection {
margin-top: 40px;
}
h2 {
font-size: 36px;
margin-top: 0;
}
#wifi-status {
font-size: 24px;
}
JAVASCRIPT
function connect() {
var coinInput = document.getElementById("coin-input").value;
if (coinInput === "PHP 1") {
document.getElementById("wifi-status").innerHTML = "Connected";
} else {
alert("Invalid coin. Please insert a PHP 1 coin.");
}
}
