Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Ashville File - Phone Sim</title>
    <style>
        :root {
            --bg-color: #1a1a1a;
            --phone-bg: #000;
            --text-color: #eee;
            --accent: #00ffcc;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: 'Segoe UI', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        /* The Smartphone Frame */
        #phone-container {
            width: 320px;
            height: 600px;
            background: var(--phone-bg);
            border: 12px solid #333;
            border-radius: 36px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 20px 50px rgba(0,0,0,0.5);
        }

        #screen {
            padding: 20px;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        h2 { font-size: 1.2rem; color: var(--accent); margin-bottom: 20px; }

        /* App Icons */
        .app-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 50px;
        }

        .app-icon {
            text-align: center;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .app-icon:hover { transform: scale(1.1); }

        .icon-box {
            width: 60px;
            height: 60px;
            background: #444;
            border-radius: 12px;
            margin: 0 auto 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
        }

        /* App Views */
        .view { display: none; height: 100%; }
        .active { display: block; }

        .back-btn {
            background: none;
            border: 1px solid var(--accent);
            color: var(--accent);
            padding: 5px 10px;
            cursor: pointer;
            margin-bottom: 10px;
        }

        .message-item {
            background: #222;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 8px;
            font-size: 0.9rem;
        }

        input {
            width: 80%;
            padding: 10px;
            background: #222;
            border: 1px solid #444;
            color: white;
            margin-bottom: 10px;
        }

        button.unlock {
            background: var(--accent);
            color: black;
            border: none;
            padding: 10px 20px;
            font-weight: bold;
            cursor: pointer;
        }
    </style>
</head>
<body>

<div id="phone-container">
    <div id="screen">
        
        <div id="home" class="view active">
            <div style="text-align: center; margin-top: 20px;">
                <p id="clock">12:00 PM</p>
                <small>Ashville County</small>
            </div>
            <div class="app-grid">
                <div class="app-icon" onclick="showView('messages')">
                    <div class="icon-box" style="background: #2ecc71;">✉️</div>
                    <small>Chat</small>
                </div>
                <div class="app-icon" onclick="showView('gallery')">
                    <div class="icon-box" style="background: #3498db;">🖼️</div>
                    <small>Gallery</small>
                </div>
                <div class="app-icon" onclick="showView('notes')">
                    <div class="icon-box" style="background: #f1c40f;">🗒️</div>
                    <small>Notes</small>
                </div>
            </div>
        </div>

        <div id="messages" class="view">
            <button class="back-btn" onclick="showView('home')">← Home</button>
            <h2>Messages</h2>
            <div class="message-item"><b>Unknown:</b> Stop digging. The woods don't like being watched.</div>
            <div class="message-item"><b>Mom:</b> Leo, where are you?</div>
            <div class="message-item"><b>Detective Miller:</b> Case is closed. Move on.</div>
        </div>

        <div id="gallery" class="view">
            <button class="back-btn" onclick="showView('home')">← Home</button>
            <h2>Gallery</h2>
            <div style="background:#333; height: 100px; margin-bottom: 10px; padding: 10px; font-size: 0.8rem;">
                [IMG_004.jpg]<br>A photo of a rusty gate keypad. The numbers 2, 5, and 9 are heavily worn.
            </div>
            <div style="background:#333; height: 100px; padding: 10px; font-size: 0.8rem;">
                [IMG_005.jpg]<br>Map Screenshot: 42.3° N, 71.1° W. Scribbled on bottom: "Add them up."
            </div>
        </div>

        <div id="notes" class="view">
            <button class="back-btn" onclick="showView('home')">← Home</button>
            <h2>Encrypted Note</h2>
            <div id="lock-screen">
                <p>Enter 4-Digit Passcode:</p>
                <input type="password" id="passcode" maxlength="4" placeholder="****">
                <button class="unlock" onclick="checkPass()">UNLOCK</button>
                <p id="error" style="color: red; font-size: 0.8rem;"></p>
            </div>
            <div id="secret-content" style="display:none;">
                <p><b>Subject: The Ashville Secret</b></p>
                <p>The gate code is just the beginning. I saw the lights near the old mill. They aren't drones. If I don't come back, look for the blue van.</p>
            </div>
        </div>

    </div>
</div>

<script>
    function showView(id) {
        document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
        document.getElementById(id).classList.add('active');
    }

    function checkPass() {
        const val = document.getElementById('passcode').value;
        // Logic: 2+5+9 = 16. Then map coordinates 42+71... let's say the code is 2591
        if(val === "2591") {
            document.getElementById('lock-screen').style.display = 'none';
            document.getElementById('secret-content').style.display = 'block';
        } else {
            document.getElementById('error').innerText = "Incorrect Code. Hint: Look at the keypad and the map.";
        }
    }

    // Update Clock
    setInterval(() => {
        const now = new Date();
        document.getElementById('clock').innerText = now.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
    }, 1000);
</script>

</body>
</html>