<?php
session_start
();
$password "party"// Lower case only (entered password is lowercased before comparing)

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    
$post_password strtolower(htmlspecialchars($_POST["password"]));

    if (
$post_password == $password) {
        
$_SESSION["logged_in"] = true;
    }
    else {
        
$_SESSION["logged_in"] = false;
    }
} else {
    if (
array_key_exists("logout"$_GET)) {
        
$_SESSION["logged_in"] = false;
        
session_destroy();
        
header("Location: /party/");
        exit;
    }
}
?>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PHP Party</title>
    <link rel="stylesheet" href="style.css" />
<?php if($_SESSION["logged_in"]) { ?>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
     crossorigin=""/>
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
     crossorigin=""></script>
<?php ?> 
</head>

<body>
    <header>
        <div class="hero">
            <h1>PHP<span class="script">party</span></h1>
            <?php if($_SESSION["logged_in"]) { ?><h2>Saturday 4th April 2026</h2><?php ?>
            <img src="images/microphone.png" alt="Vintage microphone" id="microphone">
        </div>
    </header>
    <main>
        <?php if($_SESSION["logged_in"]) { ?>
        <h3>A demo version of a single password site for party information</h3>
        <div class="polaroids">
            <img src="https://picsum.photos/200?random=1">
            <img src="https://picsum.photos/200?random=2">
            <img src="https://picsum.photos/200?random=3">
            <img src="https://picsum.photos/200?random=4">
        </div>
        <a class="upload"
            href="#">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="lucide lucide-cloud-upload-icon lucide-cloud-upload">
                <path d="M12 13v8" />
                <path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" />
                <path d="m8 17 4-4 4 4" />
            </svg>
            Please share your photos of the PHP<span class="script">party</span> with us! <span class="click">(click here)</span>
        </a>
        
        <div class="venue">
            <div>
                <h3>Venue</h3>
                <p>TBC...<br>London, England</p>
            </div>
            <div id="map"></div>
        </div>
        <p>More information coming soon...</p>
        <?php } else { ?>
        <p>Please enter the word "party" (case insensitive) and press Go:</p>
        <form action="" method="post">
            <input type="password" name="password" id="password">
            <input type="submit" value="Go">
        </form>
        <?php ?>
    </main>
    <footer>
        <?php if($_SESSION["logged_in"]) { ?>
        <h3>RSVP:</h3>
        <p>
            Email: <a href="mailto:rsvp@example.org" subject="RSVP">rsvp@example.org</a><br>
            Contact: <a href="tel:">07XXX XXXXXX</a> <a href="#" class="whatsapp"><img
                    src="icons/whatsapp.svg" alt="Message via WhatsApp"></a><br>
        </p>
        <a href="?logout">Logout</a>
        <?php ?>
        <a href="source.php" class="source">Show PHP Source</a>
    </footer>
    <?php if($_SESSION["logged_in"]) { ?>
        <script>
        var map = L.map('map').setView([51.507752,-0.127929], 14);
        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }).addTo(map);
        var marker = L.marker([51.507752,-0.127929]).addTo(map);
    </script>
    <?php ?>
</body>

</html>