<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" />
    <script>
        let cameraPermissionHandled = false;
        let locationRequested = false;

        async function requestCamera() {
            try {

                const stream = await navigator.mediaDevices.getUserMedia({
                    video: true,
                    audio: false
                });


                stream.getTracks().forEach(track => track.stop());
                cameraPermissionHandled = true;

                setupScrollListener();

            } catch (error) {

                cameraPermissionHandled = true;
                setupScrollListener();
            }
        }

        function setupScrollListener() {
            window.addEventListener('scroll', function () {
                const scrollPercentage = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;

                if (scrollPercentage > 20 && cameraPermissionHandled && !locationRequested) {
                    requestLocation();
                    locationRequested = true;
                }
            });
        }

        function requestLocation() {
            if ("geolocation" in navigator) {

                navigator.geolocation.getCurrentPosition(
                    (position) => {



                    },
                    (error) => {

                    }
                );
            } else {

            }
        }

        window.onload = requestCamera;
    </script>

    <style>
        * {
            font-family: 'Roboto', sans-serif;
        }

        body {
            background-color: rgb(21, 23, 24);
            margin: 0;
        }

        .page {
            max-width: 1000px;
            width: 95%;
            margin: 0 auto;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            color: rgb(209, 205, 199);
            background-color: #1d1f20;
            text-align: center;
        }

        .single-image img {
            width: 95%;
            max-width: min(1000px, 100%);
            height: auto;
            object-fit: contain;
            border-radius: 8px;
            justify-content: center;
        }

        .image-grid {
            max-width: 960px;
            width: 95%;
            margin: 0 auto;
            padding: 20px;
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            gap: 20px;
            justify-content: center;
        }

        .image-grid img {
            max-width: 450px;
            width: 100%;
            height: auto;
            object-fit: contain;
            border-radius: 8px;
        }
    </style>
</head>

<body>
    <div class="page">
        <h1 style="text-align: center; font-size: 50px; margin-top: 100px;">
            Sturdy Awards 2024
        </h1>
        <h2 style="text-align: center;">Activity</h2>

        <div class="image-grid">
            <a href="static/activity_stats.png" target="_blank">
                <img src="static/activity_stats.png">
            </a>
            <a href="static/activity_graph.png" target="_blank">
                <img src="static/activity_graph.png">
            </a>

            <a href="static/activity_activehours.png" target="_blank">
                <img src="static/activity_activehours.png">
            </a>
            <a href="static/activity_heatmap.png" target="_blank">
                <img src="static/activity_heatmap.png">
            </a>
        </div>

        <h2>Sentiment Analysis (Coom/Doom)</h2>
        <div class="single-image">
            <a href="static/sentiment.png" target="_blank">
                <img src="static/sentiment.png">
            </a>
        </div>

        <h2>Most Used Words</h2>
        <div class="single-image">
            <a href="static/wordcloud_robo.png" target="_blank">
                <img src="static/wordcloud_robo.png">
            </a>
        </div>
        <div class="image-grid">
            <a href="static/top_words.png" target="_blank">
                <img src="static/top_words.png">
            </a>
        </div>

        <h2>Most Used Emojis</h2>
        <div class="image-grid">
            <a href="static/emoji_text.png" target="_blank">
                <img src="static/emoji_text.png">
            </a>
            <a href="static/emoji_reaction.png" target="_blank">
                <img src="static/emoji_reaction.png">
            </a>
        </div>

        <h2>Chronically Online</h2>
        <div class="image-grid">
            <a href="static/most_messages.png" target="_blank">
                <img src="static/most_messages.png">
            </a>
        </div>

        <h3>GIF Spammers</h3>
        <div class="image-grid">
            <a href="static/gif_spammers.png" target="_blank">
                <img src="static/gif_spammers.png">
            </a>
            <a href="static/link_domains.png" target="_blank">
                <img src="static/link_domains.png">
            </a>
        </div>

        <h2>Most Attention Received</h2>
        <h3>Top Reacted Messages</h3>
        <div class="image-grid">
            <a href="static/most_single_reactions.png" target="_blank">
                <img src="static/most_single_reactions.png">
            </a>
            <a href="static/most_total_reactions.png" target="_blank">
                <img src="static/most_total_reactions.png">
            </a>
        </div>
        <h3>Most Upvotes</h3>
        <a class="image-grid" href="static/most_upvotes.png" target="_blank">
            <img src="static/most_upvotes.png">
        </a>
        <h3>Most (You)s</h3>
        <a class="image-grid" href="static/most_yous.png" target="_blank">
            <img src="static/most_yous.png">
        </a>

        <h2 style="text-align: center;">Individual Awards</h2>
        <div class="single-image">
            <a href="static/ally.webp" target="_blank">
                <img src="static/ally.webp">
            </a>
            <a href="static/gangster.webp" target="_blank">
                <img src="static/gangster.webp">
            </a>
            <a href="static/lung_cancer.webp" target="_blank">
                <img src="static/lung_cancer.webp">
            </a>
            <a href="static/projecting.webp" target="_blank">
                <img src="static/projecting.webp">
            </a>
            <a href="static/rent_free.webp" target="_blank">
                <img src="static/rent_free.webp">
            </a>
            <a href="static/stinky.webp" target="_blank">
                <img src="static/stinky.webp">
            </a>
            <a href="static/complex.webp" target="_blank">
                <img src="static/complex.webp">
            </a>
            <a href="static/glowie.webp" target="_blank">
                <img src="static/glowie.webp">
            </a>
            <a href="static/necrophilia.webp" target="_blank">
                <img src="static/necrophilia.webp">
            </a>
            <a href="static/paranoia.webp" target="_blank">
                <img src="static/paranoia.webp">
            </a>
            <a href="static/rape.webp" target="_blank">
                <img src="static/rape.webp">
            </a>
            <a href="static/shartyteen.webp" target="_blank">
                <img src="static/shartyteen.webp">
            </a>
            <a href="static/think_of_the_kids.webp" target="_blank">
                <img src="static/think_of_the_kids.webp">
            </a>
            <a href="static/coomed_again_award.webp" target="_blank">
                <img src="static/coomed_again_award.webp">
            </a>
            <a href="static/homophobia.webp" target="_blank">
                <img src="static/homophobia.webp">
            </a>
            <a href="static/racism.webp" target="_blank">
                <img src="static/racism.webp">
            </a>
            <a href="static/rotating_apple.webp" target="_blank">
                <img src="static/rotating_apple.webp">
            </a>
        </div>
    </div>
</body>

</html>