- 扫描 ID：
- aa21c9ca-2b08-4826-96a3-4d7a6f5d2c16已完成
- 提交的 URL：
- https://sctf24-race.chals.io/
- 报告完成时间：
链接 · 找到 0 个
从页面中识别出的传出链接
JavaScript 变量 · 找到 5 个
在页面窗口对象上加载的全局 JavaScript 变量是在函数外部声明的变量，可以从当前范围内的代码中的任何位置访问
| 名称 | 类型 |
|---|---|
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| vote | function |
| toggleMessage | function |
控制台日志消息 · 找到 1 条
记录到 Web 控制台的消息
| 类型 | 类别 | 记录 |
|---|---|---|
| error | network |
|
HTML
页面的原始 HTML 正文
<!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>