<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Guest WiFi Access</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);display:flex;justify-content:center;align-items:center;min-height:100vh}
.portal{background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.15);padding:40px;width:100%;max-width:480px}
.header{text-align:center;margin-bottom:28px}
.header .wifi-icon{font-size:48px;margin-bottom:12px}
.header h1{font-size:24px;color:#1a1a2e;font-weight:700}
.header p{font-size:14px;color:#666;margin-top:6px;line-height:1.5}
.terms-box{background:#f8f9fa;border:1px solid #e9ecef;border-radius:10px;padding:20px;margin-bottom:24px;max-height:160px;overflow-y:auto;font-size:12px;color:#555;line-height:1.6}
.terms-box h3{font-size:13px;color:#333;margin-bottom:8px}
.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:13px;font-weight:500;color:#333;margin-bottom:5px}
.form-group input,.form-group select{width:100%;padding:11px 14px;border:1px solid #ddd;border-radius:8px;font-size:14px;outline:none;transition:border-color .2s}
.form-group input:focus,.form-group select:focus{border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,.12)}
.checkbox-group{display:flex;align-items:flex-start;gap:8px;margin-bottom:20px}
.checkbox-group input[type=checkbox]{margin-top:3px;width:16px;height:16px;accent-color:#667eea}
.checkbox-group label{font-size:13px;color:#555;line-height:1.4}
.btn-connect{width:100%;padding:14px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;transition:opacity .2s}
.btn-connect:hover{opacity:.9}
.btn-connect:disabled{opacity:.5;cursor:not-allowed}
.duration{text-align:center;margin-top:16px;font-size:12px;color:#999}
.row{display:flex;gap:12px}
.row .form-group{flex:1}
</style>
</head>
<body>
<div class="portal">
<div class="header">
<div class="wifi-icon">&#128246;</div>
<h1>Guest WiFi Access</h1>
<p>Welcome! Please register to connect to our guest network.</p>
</div>
<form method="POST" action="/" id="guestForm">
<div class="row">
<div class="form-group">
<label for="first_name">First Name</label>
<input type="text" id="first_name" name="first_name" placeholder="John" required>
</div>
<div class="form-group">
<label for="last_name">Last Name</label>
<input type="text" id="last_name" name="last_name" placeholder="Smith" required>
</div>
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" placeholder="john.smith@example.com" required>
</div>
<div class="form-group">
<label for="company">Company / Organization</label>
<input type="text" id="company" name="company" placeholder="Acme Corp">
</div>
<div class="form-group">
<label for="reason">Purpose of Visit</label>
<select id="reason" name="reason">
<option value="meeting">Meeting / Appointment</option>
<option value="vendor">Vendor / Contractor</option>
<option value="interview">Interview</option>
<option value="event">Event / Conference</option>
<option value="other">Other</option>
</select>
</div>
<div class="terms-box">
<h3>Terms of Use</h3>
<p>By connecting to this wireless network, you agree to the following terms and conditions:</p>
<p>1. This network is provided for authorized guest use only. All network activity may be monitored and recorded for security purposes.</p>
<p>2. Users must not attempt to access unauthorized systems, intercept network traffic, or engage in any activity that violates applicable laws.</p>
<p>3. The organization reserves the right to terminate access at any time without notice.</p>
<p>4. This is an unsecured network. Users connect at their own risk. The organization is not responsible for any data loss or security incidents.</p>
<p>5. Access is limited to 24 hours. Contact the front desk for extensions.</p>
</div>
<div class="checkbox-group">
<input type="checkbox" id="accept_terms" name="accept_terms" required>
<label for="accept_terms">I accept the Terms of Use and acknowledge that network activity may be monitored.</label>
</div>
<button type="submit" class="btn-connect">Connect to WiFi</button>
</form>
<div class="duration">Access valid for 24 hours from registration.</div>
</div>
</body>
</html>
