<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mail Service</title>
    <link rel="stylesheet" href="gmail.css">
</head>
<body>
    <div class="header">
        <div class="logo">Mail Service</div>
        <div class="menu">
            <a href="#" id="inboxLink" onclick="showInbox()">Inbox</a>
            <a href="#" id="sentLink" onclick="showSent()">Sent</a>
            <a href="#">Drafts</a>
            <a href="#">Trash</a>
        </div>
    </div>

    <div class="main">
        <div class="sidebar">
            <button>Compose</button>
            <ul>
                <li><a href="#" onclick="showInbox()">Inbox</a></li>
                <li><a href="#" onclick="showSent()">Sent</a></li>
                <li><a href="#">Drafts</a></li>
                <li><a href="#">Trash</a></li>
                
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            </ul>
        </div>

        <div class="content" id="contentArea">
            <!-- Inbox content -->
            <div id="inboxView" class="email-view">
                <h3>Inbox</h3>
                <button id="emailButton" onclick="showEmail('urgency') ">A Matter of Urgency</button>
                <button id="emailButton" onclick="showEmail('project')">Project Update</button>
                <button id="emailButton" onclick="showEmail('meeting')">Meeting Reminder</button>
            </div>

            <!-- Sent content -->
            <div id="sentView" class="email-view" style="display:none;">
                <h3>Sent</h3>
                <button id="emailButton" onclick="showEmail('lightspeeder')">Lightspeeder: Commands</button>
                <button id="emailButton" onclick="showEmail('followup')">Follow-up</button>
                <button id="emailButton" onclick="showEmail('confirmation')">Confirmation Email</button>
            </div>

            <!-- Email details -->
            <div id="emailDetail" class="email-detail" style="display:none;">
                <button id="emailButton" onclick="goBack()">⬅ Back to List</button>
                <div id="emailContent"></div>
            </div>
        </div>
    </div>

    <script>
        // Email content
        const emails = {
           urgency: `<div class="email">
                    <h3>A Matter of Urgency</h3>
                    <p><strong>From:</strong> NOT@charter.com</p>
                    <p><strong>To:</strong> <span style="vertical-align: -2px;">L</span>ightspeeder.charter-<span style="vertical-align: 3px;">o</span>wned.c<span style="vertical-align: 1px;">o</span>m</p>
                    <p><strong>Subject:</strong> We Need to Tal<span style="vertical-align: -4px;">k</span>.</p>
                    <hr>
                    <p><strong>Dear Reader,</strong></p>
                    <p>Yo<span style="vertical-align: 2px;">u</span>’ve been searching. It’s time to find.</p>
                    <p>The manuscri<span style="vertical-align: 1px;">p</span>t is real. The questions you’ve asked, the connections you’ve made — they’ve brought you to the edge of something long buried.</p>
                    <p>There are those who’ve hidden it well. But nothing stays hidden forever<span style="vertical-align: -4px;">.</span></p>
                    <p>Go to <a href="trailhead.html">WATCHERS</a>. Look deeper.</p>
                    <p>Your path starts here. But the key to opening doors is never where you expect it.</p>
                </div>`,
            lightspeeder: `
                <h3>Lightspeeder: Commands</h3>
                <p><strong>From:</strong> lightspeeder@domain.com</p>
                <p><strong>To:</strong> [Player's Email]</p>
                <p><strong>Subject:</strong> Lightspeeder: Commands</p>
                <hr>
                <p><strong>Dear User,</strong></p>
                <p>Attached are the necessary commands to engage the Lightspeeder system. Please follow them carefully:</p>
                <ul>
                    <li>Command 1: Start System</li>
                    <li>Command 2: Engage Engines</li>
                    <li>Command 3: Lock Coordinates</li>
                </ul>
                <p>Ensure that all commands are executed in sequence for optimal performance.</p>
            `,
            project: `
                <h3>Project Update</h3>
                <p><strong>From:</strong> project.team@domain.com</p>
                <p><strong>Subject:</strong> Project Update</p>
                <hr>
                <p>The project is progressing as planned. Please review the latest documents attached.</p>
            `,
            meeting: `
                <h3>Meeting Reminder</h3>
                <p><strong>From:</strong> calendar@domain.com</p>
                <p><strong>Subject:</strong> Meeting Reminder</p>
                <hr>
                <p>This is a reminder for your scheduled meeting at 3 PM tomorrow. Please be on time.</p>
            `,
            followup: `
                <h3>Follow-up</h3>
                <p><strong>From:</strong> support@domain.com</p>
                <p><strong>Subject:</strong> Follow-up</p>
                <hr>
                <p>We wanted to check in on your previous inquiry. Please let us know if you need further assistance.</p>
            `,
            confirmation: `
                <h3>Confirmation Email</h3>
                <p><strong>From:</strong> noreply@domain.com</p>
                <p><strong>Subject:</strong> Confirmation Email</p>
                <hr>
                <p>Your request has been successfully processed. Thank you for using our services.</p>
            `
        };

        // Show inbox
        function showInbox() {
            document.getElementById('inboxView').style.display = 'block';
            document.getElementById('sentView').style.display = 'none';
            document.getElementById('emailDetail').style.display = 'none';
        }

        // Show sent
        function showSent() {
            document.getElementById('inboxView').style.display = 'none';
            document.getElementById('sentView').style.display = 'block';
            document.getElementById('emailDetail').style.display = 'none';
        }

        // Show specific email
        function showEmail(emailKey) {
            document.getElementById('inboxView').style.display = 'none';
            document.getElementById('sentView').style.display = 'none';
            document.getElementById('emailDetail').style.display = 'block';
            document.getElementById('emailContent').innerHTML = emails[emailKey];
        }

        // Go back to list
        function goBack() {
            showInbox();
        }

        // Set initial view to inbox
        showInbox();
    </script>
</body>
</html>
