Spaces:
Running
Running
| <html lang="en"> | |
| <!-- Mirrored from es-teams-database2025.onrender.com/td-trio.html by HTTrack Website Copier/3.x [XR&CO'2017], Fri, 14 Feb 2025 22:35:19 GMT --> | |
| <!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack --> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Truth or Dare</title> | |
| <script src="../external.html?link=https://cdn.tailwindcss.com/"></script> | |
| <style> | |
| body { | |
| background: linear-gradient(135deg, #a1c4fd, #c2e9fb); | |
| color: black; | |
| font-family: Arial, sans-serif; | |
| text-align: center; | |
| } | |
| .game-container { | |
| margin-top: 50px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| height: 80vh; | |
| } | |
| .input-container input { | |
| padding: 10px; | |
| margin: 5px; | |
| border: 2px solid #007bff; | |
| border-radius: 5px; | |
| font-size: 1rem; | |
| background: white; | |
| text-align: center; | |
| } | |
| .start-btn { | |
| background-color: green; | |
| color: white; | |
| padding: 10px 20px; | |
| border: none; | |
| border-radius: 5px; | |
| font-size: 1.2rem; | |
| cursor: pointer; | |
| transition: transform 0.3s; | |
| } | |
| .start-btn:hover { | |
| transform: scale(1.1); | |
| } | |
| .question-box { | |
| margin-top: 20px; | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| padding: 20px; | |
| border: 2px solid black; | |
| border-radius: 10px; | |
| min-height: 80px; | |
| width: 80%; | |
| background: white; | |
| color: black; | |
| } | |
| .truth-btn, .dare-btn { | |
| padding: 15px 30px; | |
| font-size: 1.2rem; | |
| border: none; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| margin: 10px; | |
| transition: transform 0.3s; | |
| } | |
| .truth-btn { | |
| background-color: blue; | |
| color: white; | |
| } | |
| .dare-btn { | |
| background-color: red; | |
| color: white; | |
| } | |
| .truth-btn:hover, .dare-btn:hover { | |
| transform: scale(1.1); | |
| } | |
| .timer { | |
| font-size: 3rem; | |
| font-weight: bold; | |
| margin-top: 20px; | |
| transition: transform 0.3s; | |
| } | |
| .warning { | |
| color: red; | |
| animation: shake 0.5s infinite alternate; | |
| } | |
| @keyframes shake { | |
| from { transform: translateX(-5px); } | |
| to { transform: translateX(5px); } | |
| } | |
| .back-btn { | |
| position: absolute; | |
| top: 10px; | |
| left: 10px; | |
| font-size: 2rem; | |
| color: black; | |
| cursor: pointer; | |
| } | |
| .header-marquee { | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| font-size: 2rem; | |
| font-weight: bold; | |
| color: white; | |
| background: black; | |
| padding: 10px 0; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| animation: marquee 10s linear infinite; | |
| } | |
| @keyframes marquee { | |
| from { transform: translateX(100%); } | |
| to { transform: translateX(-100%); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Moving Header --> | |
| <div class="header-marquee">ES TEAMS TRUTH OR DARE</div> | |
| <!-- Back Button --> | |
| <div class="back-btn" onclick="location.href='games-2.html'">⬅</div> | |
| <div class="game-container"> | |
| <h1 class="text-3xl font-bold mb-4">Truth or Dare</h1> | |
| <!-- Player Name Inputs --> | |
| <div class="input-container"> | |
| <input type="text" id="player1" placeholder="Enter Player 1 Name"> | |
| <input type="text" id="player2" placeholder="Enter Player 2 Name"> | |
| <input type="text" id="player3" placeholder="Enter Player 3 Name"> | |
| <button class="start-btn" onclick="startGame()">Start Game</button> | |
| </div> | |
| <!-- Game Area --> | |
| <div id="game-area" style="display: none;"> | |
| <h2 id="current-player" class="text-2xl font-bold"></h2> | |
| <div id="question-box" class="question-box">Waiting for message...</div> | |
| <button class="truth-btn" onclick="fetchQuestion('truth')">TRUTH</button> | |
| <button class="dare-btn" onclick="fetchQuestion('dare')">DARE</button> | |
| <div id="timer" class="timer">15</div> | |
| </div> | |
| </div> | |
| <script> | |
| let players = []; | |
| let currentPlayerIndex = 0; | |
| let timerInterval; | |
| function startGame() { | |
| let p1 = document.getElementById("player1").value.trim(); | |
| let p2 = document.getElementById("player2").value.trim(); | |
| let p3 = document.getElementById("player3").value.trim(); | |
| if (!p1 || !p2 || !p3) { | |
| alert("All three players must enter their names!"); | |
| return; | |
| } | |
| players = [p1, p2, p3]; | |
| document.querySelector(".input-container").style.display = "none"; | |
| document.getElementById("game-area").style.display = "block"; | |
| nextTurn(); | |
| } | |
| function nextTurn() { | |
| clearInterval(timerInterval); | |
| document.getElementById("timer").textContent = "15"; | |
| document.getElementById("timer").classList.remove("warning"); | |
| let currentPlayer = players[currentPlayerIndex]; | |
| document.getElementById("current-player").textContent = `${currentPlayer}, it's your turn! Choose:`; | |
| document.getElementById("question-box").textContent = "Waiting for message..."; | |
| document.querySelector(".truth-btn").disabled = false; | |
| document.querySelector(".dare-btn").disabled = false; | |
| } | |
| function fetchQuestion(type) { | |
| let url = type === 'truth' ? "https://api.davidcyriltech.my.id/truth" : "https://api.davidcyriltech.my.id/dare"; | |
| document.querySelector(".truth-btn").disabled = true; | |
| document.querySelector(".dare-btn").disabled = true; | |
| fetch(url) | |
| .then(response => response.json()) | |
| .then(data => { | |
| document.getElementById("question-box").textContent = data.question || "Error fetching question"; | |
| startTimer(); | |
| }) | |
| .catch(() => { | |
| document.getElementById("question-box").textContent = "Error fetching question."; | |
| startTimer(); | |
| }); | |
| } | |
| function startTimer() { | |
| let timeLeft = 15; | |
| timerInterval = setInterval(() => { | |
| timeLeft--; | |
| let timerElement = document.getElementById("timer"); | |
| timerElement.textContent = timeLeft; | |
| if (timeLeft <= 5) { | |
| timerElement.classList.add("warning"); | |
| } | |
| if (timeLeft === 0) { | |
| clearInterval(timerInterval); | |
| nextPlayer(); | |
| } | |
| }, 1000); | |
| } | |
| function nextPlayer() { | |
| currentPlayerIndex = (currentPlayerIndex + 1) % players.length; | |
| nextTurn(); | |
| } | |
| </script> | |
| </body> | |
| <!-- Mirrored from es-teams-database2025.onrender.com/td-trio.html by HTTrack Website Copier/3.x [XR&CO'2017], Fri, 14 Feb 2025 22:35:19 GMT --> | |
| </html> |