<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#4D58FF">
    <meta name="description" content="Secret Webpage #2">
    <title>panca.kz - Boo Picross (Secret #2)</title>
    <link rel="stylesheet" href="/public/fonts/poppins.css?v={{ .Version }}">
    <link rel="stylesheet" href="/public/secret/picross/board.css?v={{ .Version }}">
</head>

<body>

    <!-- Was bored and I love picross puzzles. Enjoy this little minigame.  -->
    <!-- In case you're wondering I sampled my keyboard for the audio.      -->
    <!-- Also no you cannot mute it, now suffer.                            -->

    <audio hidden src="/public/secret/picross/set.mp3?v={{ .Version }}" id="audio-set"></audio>
    <audio hidden src="/public/secret/picross/del.mp3?v={{ .Version }}" id="audio-del"></audio>

    <div role="main" class="layout-container">

        <div class="layout-header">
            <p>Secret Picross Challenge!</p>
            <p class="text-tip">Complete this puzzle to prove you can do picross puzzles!</p>
            <p class="text-tip text-hidden">Controls: Left click to fill, right click to mark.</p>
        </div>

        <div class="layout-content">
            <!-- thank you gzip for savin bandwidth -->
            <div class="picross-row">
                <p class="picross-hint"></p>
                <p class="picross-hint"></p>
                <p class="picross-hint"></p>
                <p class="picross-hint"></p>
                <p class="picross-hint"></p>
                <p class="picross-hint">1</p>
                <p class="picross-hint"></p>
                <p class="picross-hint">1</p>
                <p class="picross-hint"></p>
                <p class="picross-hint"></p>
                <p class="picross-hint"></p>
                <p class="picross-hint"></p>
            </div>
            <div class="picross-row">
                <p class="picross-hint"></p>
                <p class="picross-hint"></p>
                <p class="picross-hint"></p>
                <p class="picross-hint"></p>
                <p class="picross-hint"></p>
                <p class="picross-hint">1</p>
                <p class="picross-hint">3</p>
                <p class="picross-hint">1</p>
                <p class="picross-hint"></p>
                <p class="picross-hint">1</p>
                <p class="picross-hint"></p>
                <p class="picross-hint"></p>
            </div>
            <div class="picross-row">
                <p class="picross-hint"></p>
                <p class="picross-hint"></p>
                <p class="picross-hint"></p>
                <p class="picross-hint">1</p>
                <p class="picross-hint picross-active">7</p>
                <p class="picross-hint">5</p>
                <p class="picross-hint">5</p>
                <p class="picross-hint">4</p>
                <p class="picross-hint">8</p>
                <p class="picross-hint">3</p>
                <p class="picross-hint">2</p>
                <p class="picross-hint">2</p>
            </div>
            <div class="picross-row">
                <p class="picross-hint"></p>
                <p class="picross-hint"></p>
                <p class="picross-hint">3</p>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
            </div>
            <div class="picross-row">
                <p class="picross-hint">1</p>
                <p class="picross-hint">1</p>
                <p class="picross-hint">1</p>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
            </div>
            <div class="picross-row">
                <p class="picross-hint"></p>
                <p class="picross-hint"></p>
                <p class="picross-hint">5</p>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
            </div>
            <div class="picross-row">
                <p class="picross-hint"></p>
                <p class="picross-hint">2</p>
                <p class="picross-hint">2</p>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
            </div>
            <div class="picross-row">
                <p class="picross-hint"></p>
                <p class="picross-hint">3</p>
                <p class="picross-hint">1</p>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
            </div>
            <div class="picross-row">
                <p class="picross-hint"></p>
                <p class="picross-hint">5</p>
                <p class="picross-hint">1</p>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
            </div>
            <div class="picross-row">
                <p class="picross-hint"></p>
                <p class="picross-hint"></p>
                <p class="picross-hint">8</p>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
            </div>
            <div class="picross-row">
                <p class="picross-hint"></p>
                <p class="picross-hint"></p>
                <p class="picross-hint">7</p>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
            </div>
            <div class="picross-row">
                <p class="picross-hint"></p>
                <p class="picross-hint"></p>
                <p class="picross-hint">5</p>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
                <button class="picross-button"></button>
            </div>
        </div>

        <div class="layout-footer">
            <p class="layout-timer text-tip">Time Spent: 00:00:00</p>
            <div class="layout-actions">
                <a id="action-quit" 
                    target="_blank" 
                    href="https://www.youtube.com/watch?v=KxGRhd_iWuE&t=2" 
                    onclick="this.onclick=() => window.location.assign('/')">
                    I Give Up...
                </a>
                <a id="action-send">Check It!</a>
            </div>
        </div>

    </div>

    <script src="/public/secret/picross/board.js?v={{ .Version }}" defer></script>

</body>

</html>