https://sctf24-race.chals.io/

ID da verificação: aa21c9ca-2b08-4826-96a3-4d7a6f5d2c16Concluído
URL enviado:: https://sctf24-race.chals.io/
Relatório concluído:: 15 de nov. de 2024, 15:22:54

Links · 0 encontrado(s)

Os links de saída identificados na página

Variáveis JavaScript · 5 encontrada(s)

Variáveis JavaScript globais carregadas no objeto janela de uma página são variáveis declaradas fora das funções e acessíveis de qualquer lugar no código dentro do escopo atual

Nome	Tipo
onbeforetoggle	object
documentPictureInPicture	object
onscrollend	object
vote	function
toggleMessage	function

Mensagens de registro do console · 1 encontrada(s)

Mensagens registradas no console web

Tipo	Categoria	Log
error	network	URL https://sctf24-race.chals.io/favicon.ico Texto Failed to load resource: the server responded with a status of 404 (NOT FOUND)

HTML

O corpo HTML bruto da página

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vote for Your Favorite Animal!</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(to right, #74ebd5, #acb6e5);
            color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            flex-direction: column;
            position: relative; 
        }
        .container {
            text-align: center;
            background: white;
            border-radius: 15px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            padding: 30px;
            width: 400px;
            margin-bottom: 20px; /* Add margin for spacing from footer */
        }
        h1 {
            font-size: 2.5em;
            margin-bottom: 20px;
            color: #333;
        }
        .animal-card {
            display: flex;
            justify-content: space-around;
            margin: 20px 0;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s;
        }
        .animal-card:hover {
            transform: scale(1.05);
        }
        .animal {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2em;
            cursor: pointer;
            transition: background 0.3s, transform 0.3s;
        }
        .animal:hover {
            background: #e0e0e0;
        }
        .voted {
            transform: scale(1.1);
            transition: background 0.5s ease, transform 0.5s ease;
        }
        .dog-voted {
            background: #4CAF50; /* Green for Dog */
        }
        .cat-voted {
            background: #FF9800; /* Orange for Cat */
        }
        .result {
            margin-top: 20px;
            font-size: 1.2em;
            padding: 10px;
            background: #f9f9f9;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
        footer {
            position: absolute;
            bottom: 20px;
            width: 100%;
            text-align: center;
            font-size: 1.2em;
            color: #555;
        }
        .heart {
            color: red;
        }
        /* Chat bubble styles */
        .chat-bubble {
            position: absolute;
            bottom: 100px;
            right: 30px;
            width: 50px;
            height: 50px;
            background-color: #FF9800; /* Orange background */
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            transition: background 0.3s;
        }
        .chat-bubble:hover {
            background-color: #FF5722; /* Darker orange on hover */
        }
        .chat-message {
            display: none;
            position: absolute;
            bottom: 70px;
            right: 0;
            width: 200px;
            padding: 10px;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            z-index: 10;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Vote for Your Favorite Animal!</h1>
        <div class="animal-card">
            <div class="animal" id="cat" onclick="vote('cat')">
                <i class="fas fa-cat"></i>
            </div>
            <div class="animal" id="dog" onclick="vote('dog')">
                <i class="fas fa-dog"></i>
            </div>
        </div>
        <div class="result" id="result">
            <p>Dog Votes: <span id="dogVotes">0</span></p>
            <p>Cat Votes: <span id="catVotes">0</span></p>
        </div>
    </div>

    <footer>
        Designed with <span class="heart">❤️</span> by Vaishnav NK
    </footer>

    <!-- Chat bubble -->
    <div class="chat-bubble" onclick="toggleMessage()">
        <i class="fas fa-comment-dots" style="color: white; font-size: 20px;"></i>
    </div>
    <div class="chat-message" id="chatMessage">
        <p>Vote quickly to reach 100 votes for your favorite animal and uncover the secret!</p>
    </div>

    <script>
        let dogVotes = 0;
        let catVotes = 0;

        function vote(animal) {
            fetch('/vote', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ animal: animal })
            })
            .then(response => response.json())
            .then(data => {
                alert(data.message);
                
                // Update local vote counts
                dogVotes = data.dogVotes;
                catVotes = data.catVotes;

                // Update the displayed vote counts
                document.getElementById('dogVotes').innerText = dogVotes;
                document.getElementById('catVotes').innerText = catVotes;

                // Animate the voted animal
                if (animal === 'dog') {
                    const dogElement = document.getElementById('dog');
                    dogElement.classList.add('dog-voted', 'voted');
                    setTimeout(() => {
                        dogElement.classList.remove('dog-voted', 'voted');
                    }, 1000); // Remove class after 1 second
                } else if (animal === 'cat') {
                    const catElement = document.getElementById('cat');
                    catElement.classList.add('cat-voted', 'voted');
                    setTimeout(() => {
                        catElement.classList.remove('cat-voted', 'voted');
                    }, 1000); // Remove class after 1 second
                }
            })
            .catch((error) => {
                console.error('Error:', error);
            });
        }

        function toggleMessage() {
            const chatMessage = document.getElementById('chatMessage');
            chatMessage.style.display = chatMessage.style.display === 'block' ? 'none' : 'block';
        }
    </script>

</body></html>