<?php
$mac = $_GET['mac'];
$link_login = $_GET['link-login'];
$link_orig = $_GET['link-orig'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Free WiFi Login</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body { margin:0; padding:0; font-family:'Segoe UI'; height:100vh; display:flex; justify-content:center; align-items:center; background: linear-gradient(135deg,#4a90e2,#50e3c2); }
.login-container { background: rgba(255,255,255,0.95); padding:40px; border-radius:15px; max-width:400px; width:90%; box-shadow:0 15px 35px rgba(0,0,0,0.2); text-align:center; animation: fadeIn 1s ease-in-out; }
.login-container img.logo { width:130px; margin-bottom:20px; }
.login-container h2 { margin-bottom:15px; color:#333; font-weight:600; }
.form-control { margin-bottom:15px; height:50px; border-radius:10px; border:1px solid #ccc; padding-left:15px; transition:.3s; }
.form-control:focus { border-color:#4a90e2; box-shadow:0 0 8px rgba(74,144,226,0.4); }
.btn-primary { width:100%; height:50px; border-radius:10px; font-weight:bold; }
.social-btns a { display:block; margin-top:10px; padding:12px; border-radius:10px; text-decoration:none; color:#fff; font-weight:bold; transition:.3s; }
.social-btns a.google { background:#DB4437; } .social-btns a.google:hover { background:#c33b2f; }
.social-btns a.facebook { background:#4267B2; } .social-btns a.facebook:hover { background:#385898; }
.form-check { text-align:left; margin-bottom:15px; }
@keyframes fadeIn { from { opacity:0; transform:translateY(30px);} to { opacity:1; transform:translateY(0);} }
</style>
</head>
<body>

<div class="login-container">
    <img src="assets/logo.png" alt="ISP Logo" class="logo">
    <h2>Welcome to Free WiFi</h2>
    <p>Connect and enjoy fast internet.</p>

    <form method="post" action="send_otp.php">
        <input type="hidden" name="mac" value="<?= $mac ?>">
        <input type="hidden" name="link_login" value="<?= $link_login ?>">
        <input type="hidden" name="link_orig" value="<?= $link_orig ?>">

        <input type="text" name="mobile" class="form-control" placeholder="Enter Mobile Number" required>

        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="terms" required>
            <label class="form-check-label" for="terms">I agree to the <a href="#" target="_blank">Terms & Conditions</a></label>
        </div>

        <button type="submit" class="btn btn-primary">Get OTP</button>
    </form>

    <div class="social-btns">
        <a href="google_login.php?mac=<?= $mac ?>" class="google">Login with Google</a>
        <a href="facebook_login.php?mac=<?= $mac ?>" class="facebook">Login with Facebook</a>
    </div>
</div>

</body>
</html>
