- ID de l'analyse :
- aa21c9ca-2b08-4826-96a3-4d7a6f5d2c16Terminée
- URL soumise :
- https://sctf24-race.chals.io/
- Fin du rapport :
Liens : 0 trouvé(s)
Liens sortants identifiés à partir de la page
Variables JavaScript : 5 trouvée(s)
Les variables JavaScript globales chargées dans l'objet fenêtre d'une page sont des variables déclarées en dehors des fonctions et accessibles depuis n'importe quel endroit du code au sein du champ d'application actuel
| Nom | Type |
|---|---|
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| vote | function |
| toggleMessage | function |
Messages de journal de console : 1 trouvé(s)
Messages consignés dans la console web
| Type | Catégorie | Enregistrement |
|---|---|---|
| error | network |
|
HTML
Le corps HTML de la page en données brutes
<!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>