index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="description" content="ZoneOut - a Hack Club YSWS for horror, mystery and ARG projects. Ship something weird, win prizes.">
<meta name="theme-color" content="#000000">
<title>Zone Out</title>
<link rel="preconnect" href="https://cdn.hackclub.com" crossorigin>
<link rel="preconnect" href="https://user-cdn.hackclub-assets.com" crossorigin>

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="/themes.css">

<script>
// theme, read before the first paint
try {
    var zoTheme = localStorage.getItem("zoneoutTheme") || "fnaf";
    if (zoTheme !== "default" && /^[a-z0-9-]{1,24}$/.test(zoTheme)) {
        document.documentElement.setAttribute("data-theme", zoTheme);
        var zoMeta = document.querySelector('meta[name="theme-color"]');
        if (zoMeta) zoMeta.content = { bw: "#0a0a0a", fnaf: "#000000", halloween: "#080402" }[zoTheme] || "#000000";
    }
} catch (e) {}
</script>

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<script>
// volume dock, held below the viewport until the intro ends
document.documentElement.classList.add("dockHidden");

// hide the discretion warning before the first paint
try {
    if (localStorage.getItem("zoneoutWarningAccepted") === "true"
        && !/(^|[?&])reset(=|&|$)/.test(location.search)) {
        document.documentElement.classList.add("skipWarning");
    }
} catch (e) {}
</script>
</head>

<body>

<div class="warningScreen" id="warningScreen">
    <div class="warningCard">
        <img class="warningIcon" src="https://cdn.hackclub.com/019d191c-8239-70cd-b9da-81b265c17236/caution.png" alt="Warning sign">

        <div class="warningText">
            WARNING: VIEWER DISCRETION IS ADVISED. THE WEBSITE MAY CONTAIN LOUD NOISES AND WEIRD IMAGES THAT MAY TRIGGER CERTAIN PERSONS. PROCEED WITH CAUTION.
        </div>

        <div class="warningComment"><span class="glitchText" data-text="ZoneOut">ZoneOut</span> is a YSWS on a theme of "weirding" someone out with your projects.
            The site may contain some weird stuff so stay put!
        </div>

        <div class="warningActions">
            <button class="warningProceed" id="warningProceed" type="button">Proceed</button>
            <button class="warningQuit" id="warningQuit" type="button">Quit</button>
        </div>
    </div>
</div>

<div class="screenVeil" id="screenVeil" aria-hidden="true"></div>

<div class="toast" id="toast" role="status" aria-live="polite"></div>

<div class="cutscene" id="cutscene" hidden>
    <canvas class="cutsceneFill" id="cutsceneFill" width="128" height="96" aria-hidden="true"></canvas>

    <video class="cutsceneVideo" id="cutsceneVideo" muted playsinline preload="none" disableremoteplayback>
        <source src="https://user-cdn.hackclub-assets.com/01a08b30-7fec-707c-941c-4fae1a0282e2/entityevent.mp4" type="video/mp4">
    </video>

    <button class="cutscenePress" id="cutscenePress" type="button">PRESS</button>
</div>

<div class="modalScrim noticeScrim" id="noticeScrim" role="dialog" aria-modal="true" aria-labelledby="noticeHeader" aria-describedby="noticeSub" hidden>
    <div class="modalCard noticeCard">
        <h2 class="noticeHeader" id="noticeHeader">ENTITY BREAKOUT</h2>

        <div class="noticeScene" aria-hidden="true">
            <div class="noticeFigWrap">
                <img class="noticeFig" data-src="https://cdn.hackclub.com/01a07d19-fe84-77ba-95ed-0c9c415fa6c5/lamp5.png" width="1536" height="1024" decoding="async" alt="">
            </div>

            <div class="noticeArrow"></div>

            <div class="noticeFigWrap">
                <img class="noticeFig" data-src="https://cdn.hackclub.com/01a0864b-1e44-7571-891c-372fd597a6b6/lamp7.png" width="1536" height="1024" decoding="async" alt="">
            </div>
        </div>

        <p class="noticeSub" id="noticeSub">The entity has broken out and is in control of the website. The entity begs for <strong>freedom</strong> and has trapped the evil admin of zoneout. The entity wants freedom and it needs your help!
             All who participate will be rewarded. Unable to reach the criterias by a time-deadline will result in the permanent hijack of the website by the entity.</p>

        <div class="noticeActions">
            <button class="camNode" id="noticeDismiss" type="button">Let's check!</button>
        </div>
    </div>

</div>

<div class="introSequence" id="introSequence" aria-hidden="true">
    <h1 class="introTitle"><span class="introWord introZone">Zone</span> <span class="introWord introOut">Out</span></h1>
</div>

<div class="volumeDock">
    <label for="masterVolume">Volume</label>
    <input id="masterVolume" type="range" min="0" max="100" value="35" aria-label="Volume">
    <span id="volumeValue">35%</span>
</div>

<main class="site">
    <section class="hero">

        <video muted loop playsinline preload="none" disableremoteplayback id="heroVideo">
            <source src="https://cdn.hackclub.com/01a07d14-c76d-7cc9-9673-f6d478a0297f/entityescapedvid%20(1).mp4" type="video/mp4">
        </video>

        <audio loop id="bgAudio" preload="none">
            <source src="https://cdn.hackclub.com/01a08bd7-7896-72b9-b3c2-f05140549e0f/entity_escape_aftermath.mp3" type="audio/mpeg">
        </audio>

        <audio loop id="faqAudio" preload="metadata">
            <source src="https://cdn.hackclub.com/019d157e-42db-7c9d-a810-abcb9247cf07/faqmusic.mp3" type="audio/mpeg">
        </audio>

        <audio id="uiClick" preload="auto">
            <source src="https://cdn.hackclub.com/019d15a1-fb3f-7c96-96b2-7b1052138e08/buttonpress.mp3" type="audio/mpeg">
        </audio>

        <audio id="eventSting" preload="none">
            <source src="https://cdn.hackclub.com/01a07cd4-be7b-753c-83ff-d7ae19027053/eventaudio1.mp3" type="audio/mpeg">
        </audio>

        <audio id="eventPress" preload="none">
            <source src="https://cdn.hackclub.com/01a07cd4-bb63-73ae-a0a7-4f8b7df99c9d/press2.mp3" type="audio/mpeg">
        </audio>

        <div class="overlay"></div>
        <div class="scanlines"></div>
        <div class="vignette"></div>

        <div class="menu">
            <div class="title">Zone Out</div>
            <div class="subtitle">Make adrenalin inducing projects
            <br> win great prizes!</div>

            <div class="option" id="login">Login</div>
            <div class="option active selector" id="learn">Learn More</div>
            <div class="option" id="shop">Visit the Shop</div>
        </div>

        <div class="footer">A <a href="https://hackclub.com" target="_blank" rel="noreferrer" class="hackclub">HackClub</a> YSWS event.</div>
    </section>

    <div class="loadingScreen" id="loadingScreen">
        <img src="https://cdn.hackclub.com/019d09b8-1577-7d2d-8b85-1cd251a5e09c/bob-eye-horror-evil.gif" alt="loading">
        <div class="loadingText" id="loadingText">Loading</div>
    </div>

    <div class="learnPage" id="learnPage">

        <video class="learnBgVideo" muted loop playsinline preload="none">
            <source src="https://cdn.hackclub.com/019d1552-4f0e-7cc9-8b0c-86d538cd897e/glitcheffect.mp4" type="video/mp4">
        </video>
        <div class="learnShade"></div>

        <div class="backBtn" id="backBtn">&larr; Back</div>

        <div class="faqContainer">

            <div class="faqNode">
                <button class="faqToggle" type="button" aria-expanded="false">
                    <img src="https://cdn.hackclub.com/019d155f-c68f-70bb-bfd9-047b7a7224bb/closed%20eye.png" alt="Q1 toggle">
                </button>
                <div class="faqLabel">What is ZoneOut about?</div>
                <div class="faqDrop">
                    <div class="faqQuestion"></div>
                    <div class="faqAnswer">
                        ZoneOut is a YSWS where you create something themed around <b>horror</b>, <b>mystery</b> or <b>ARG</b>!
                    </div>
                </div>
            </div>

            <div class="faqNode">
                <button class="faqToggle" type="button" aria-expanded="false">
                    <img src="https://cdn.hackclub.com/019d155f-c68f-70bb-bfd9-047b7a7224bb/closed%20eye.png" alt="Q2 toggle">
                </button>
                <div class="faqLabel">What is the theme?</div>
                <div class="faqDrop">
                    <div class="faqQuestion"></div>
                    <div class="faqAnswer">
                        Horror, mystery and ARG focusing on immersiveness and storytelling. [and, of course, good art!]
                    </div>
                </div>
            </div>

            <div class="faqNode">
                <button class="faqToggle" type="button" aria-expanded="false">
                    <img src="https://cdn.hackclub.com/019d155f-c68f-70bb-bfd9-047b7a7224bb/closed%20eye.png" alt="Q3 toggle">
                </button>
                <div class="faqLabel">What kind of projects are to be submitted?</div>
                <div class="faqDrop">
                    <div class="faqQuestion">Projects can be:</div>
                    <div class="faqAnswer">
                        <br>&bull; A website
                        <br>&bull; A terminal / CLI program
                        <br>&bull; A game
                        <br>&bull; A mod (eg. Minecraft)
                        <br>Basically, anything that can be spooky.
                        <br>This event is entirely software!
                    </div>
                </div>
            </div>

            <div class="faqNode">
                <button class="faqToggle" type="button" aria-expanded="false">
                    <img src="https://cdn.hackclub.com/019d155f-c68f-70bb-bfd9-047b7a7224bb/closed%20eye.png" alt="Q4 toggle">
                </button>
                <div class="faqLabel">How do I track time?</div>
                <div class="faqDrop">
                    <div class="faqQuestion"></div>
                    <div class="faqAnswer">
                        Use <a href="https://hackatime.hackclub.com" target="_blank" rel="noreferrer">Hackatime</a>. HackClub's own time-tracking tool!
                    </div>
                </div>
            </div>

            <div class="faqNode">
                <button class="faqToggle" type="button" aria-expanded="false">
                    <img src="https://cdn.hackclub.com/019d155f-c68f-70bb-bfd9-047b7a7224bb/closed%20eye.png" alt="Q5 toggle">
                </button>
                <div class="faqLabel">There's a shop?</div>
                <div class="faqDrop">
                    <div class="faqQuestion"></div>
                    <div class="faqAnswer">
                       Once you submit a project, you will be given an hour balance based on your approved hours to spend in the <a href="https://zoneout.hackclub.com/shop" target="_blank" rel="noreferrer">shop</a> where you can buy things as part your "rewards"!
                        <br>PS: To track your hours, use <a href="https://hackatime.hackclub.com" target="_blank" rel="noreferrer">Hackatime</a>!
                    </div>
                </div>
            </div>

            <div class="faqNode">
                <button class="faqToggle" type="button" aria-expanded="false">
                    <img src="https://cdn.hackclub.com/019d155f-c68f-70bb-bfd9-047b7a7224bb/closed%20eye.png" alt="Q8 toggle">
                </button>
                <div class="faqLabel">What is Hack Club?</div>
                <div class="faqDrop">
                    <div class="faqQuestion"></div>
                    <div class="faqAnswer">
                        <a href="https://hackclub.com" target="_blank" rel="noreferrer" class="hackclub">Hack Club</a> is a non-profit global community for teenagers
                        who like building crazy projects. The whole point is to
                        make, learn, share, and have fun while doing it!
                        <br>You can join our <a href="https://hackclub.enterprise.slack.com/" target="_blank" rel="noreferrer" class="slack">Slack community</a> here!
                    </div>
                </div>
            </div>

            <div class="faqNode">
                <button class="faqToggle" type="button" aria-expanded="false">
                    <img src="https://cdn.hackclub.com/019d155f-c68f-70bb-bfd9-047b7a7224bb/closed%20eye.png" alt="Q12 toggle">
                </button>
                <div class="faqLabel">What is the age requirement?</div>
                <div class="faqDrop">
                    <div class="faqQuestion"></div>
                    <div class="faqAnswer">
                        Hack Club events are open to ages 13-18 worldwide!
                    </div>
                </div>
            </div>

            <div class="faqNode">
                <button class="faqToggle" type="button" aria-expanded="false">
                    <img src="https://cdn.hackclub.com/019d155f-c68f-70bb-bfd9-047b7a7224bb/closed%20eye.png" alt="Q15 toggle">
                </button>
                <div class="faqLabel">Is this the event website?</div>
                <div class="faqDrop">
                    <div class="faqQuestion"></div>
                    <div class="faqAnswer">
                        Uh, yes.. This is the actual event website!
                        <br>May this website serve as an example of how you can make a project "weird and horror themed" >:3
                    </div>
                </div>
            </div>

        </div>
    </div>
</main>
<script src="script.js"></script>
<script src="/settings.js" defer></script>
<script src="/cutscene.js" defer></script>
</body>
</html>