Untitled

<!DOCTYPE html>
<html>
<head>
  <title>Number Verification</title>
  <style>
    body {
      background-color: #f3f3f3;
      font-family: Arial, sans-serif;
    }

    .container {
      max-width: 400px;
      margin: 0 auto;
      padding: 20px;
      text-align: center;
      background-color: #ffffff;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    h1 {
      color: #333333;
      margin-top: 0;
    }

    p {
      color: #666666;
    }

    .number-container {
      background-color: #ffffff;
      border: 2px solid #333333;
      border-radius: 5px;
      padding: 20px;
      margin-top: 20px;
      font-size: 24px;
      font-weight: bold;
    }

    input[type="text"] {
      width: 100%;
      padding: 10px;
      margin-top: 10px;
      border-radius: 5px;
      border: 1px solid #cccccc;
    }

    button {
      background-color: #333333;
      color: #ffffff;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      margin-top: 10px;
      cursor: pointer;
    }

    button:hover {
      background-color: #555555;
    }

    .result {
      margin-top: 10px;
      color: #666666;
    }

    .score {
      color: #333333;
      font-weight: bold;
    }

    .score-box {
      background-color: #ffffff;
      border: 2px solid #333333;
      border-radius: 10px;
      padding: 20px;
      margin-top: 20px;
    }

    .score-box h3 {
      margin-top: 0;
      color: #333333;
    }

    .score-box p {
      color: #666666;
    }

    .score-box button {
      background-color: #333333;
      color: #ffffff;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      margin-top: 20px;
      cursor: pointer;
    }

    .score-box button:hover {
      background-color: #555555;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Number Verification</h1>
    <p>Enter the number shown below:</p>
    <div class="number-container" id="numberContainer"></div>
    <input type="text" id="inputNumber" placeholder="Enter the number">
    <button onclick="checkNumber()">Verify</button>
    <p class="result" id="result"></p>
    <p class="score" id="score">Score: 0</p>
    <button onclick="startAutoFill()">Start Auto Fill</button>
    <button onclick="stopAutoFill()">Stop Auto Fill</button>
    <div id="countdown"></div>
  </div>

  <div id="finalScoreBox" class="score-box" style="display: none;">
    <h3>Game Over!</h3>
    <p>Your Final Score: <span id="finalScore"></span></p>
    <button onclick="restartGame()">Restart</button>
    <button onclick="shareOnSocialMedia()">Share</button>
  </div>

  <script>
    var score = 0; // Initialize the score
    var intervalId; // Variable to store the interval ID
    var countdownTime = 120; // Countdown time in seconds
    var countdownIntervalId; // Variable to store the countdown interval ID

    // Generate a random number between 1 and 100
    function generateNumber() {
      return Math.floor(Math.random() * 100) + 1;
    }

    // Display the generated number
    function displayNumber() {
      var numberContainer = document.getElementById("numberContainer");
      var generatedNumber = generateNumber();
      numberContainer.textContent = generatedNumber;
    }

    // Check if the entered number matches the generated number
    function checkNumber() {
      var inputNumber = document.getElementById("inputNumber").value;
      var generatedNumber = document.getElementById("numberContainer").textContent;
      var result = document.getElementById("result");
      var scoreDisplay = document.getElementById("score");

      if (inputNumber == generatedNumber) {
        result.textContent = "Congratulations! You entered the right number.";
        score++; // Increment the score on correct answer
      } else {
        result.textContent = "Sorry, the entered number is incorrect. Try again.";
        score = Math.max(0, score - 1); // Decrement the score, but ensure it doesn't go below 0
      }

      scoreDisplay.textContent = "Score: " + score; // Update the score display

      // Generate a new number and display it
      displayNumber();

      // Clear the input field
      document.getElementById("inputNumber").value = "";
    }

    // Start auto filling of numbers
    function startAutoFill() {
      intervalId = setInterval(autoFillNumber, 1000); // Fill number every 1 second (adjust as needed)
      startCountdown();
    }

    // Stop auto filling of numbers
    function stopAutoFill() {
      clearInterval(intervalId);
    }

    // Auto fill the number and trigger verify
    function autoFillNumber() {
      var generatedNumber = document.getElementById("numberContainer").textContent;
      document.getElementById("inputNumber").value = generatedNumber;
      checkNumber(); // Trigger the verify button
    }

    // Start the countdown timer
    function startCountdown() {
      var countdownElement = document.getElementById("countdown");
      countdownElement.textContent = formatTime(countdownTime);

      countdownIntervalId = setInterval(function () {
        countdownTime--;

        if (countdownTime >= 0) {
          countdownElement.textContent = formatTime(countdownTime);
        } else {
          clearInterval(intervalId);
          clearInterval(countdownIntervalId);
          showFinalScore();
        }
      }, 1000);
    }

    // Show the final score and options
    function showFinalScore() {
      var finalScore = document.getElementById("finalScore");
      finalScore.textContent = score;

      var finalScoreBox = document.getElementById("finalScoreBox");
      finalScoreBox.style.display = "block";
    }

    // Restart the game
    function restartGame() {
      score = 0;
      countdownTime = 120;
      clearInterval(intervalId);
      clearInterval(countdownIntervalId);
      hideFinalScore();
      displayNumber();
      document.getElementById("score").textContent = "Score: " + score;
      document.getElementById("inputNumber").value = "";
      startAutoFill();
    }

    // Hide the final score box
    function hideFinalScore() {
      var finalScoreBox = document.getElementById("finalScoreBox");
      finalScoreBox.style.display = "none";
    }

    // Share the game on social media
    function shareOnSocialMedia() {
      var finalScore = document.getElementById("finalScore").textContent;
      var shareText = "I scored " + finalScore + " in the Number Verification game! Can you beat it?";

      // Replace the URL and shareText variables with your desired sharing options
      var twitterUrl = "https://twitter.com/intent/tweet?text=" + encodeURIComponent(shareText);
      var whatsappUrl = "https://wa.me/?text=" + encodeURIComponent(shareText);

      // Open sharing options in new tabs/windows
      window.open(twitterUrl, "_blank");
      window.open(whatsappUrl, "_blank");
    }

    // Format the time in mm:ss format
    function formatTime(time) {
      var minutes = Math.floor(time / 60);
      var seconds = time % 60;
      return padZero(minutes) + ":" + padZero(seconds);
    }

    // Pad a number with leading zero if necessary
    function padZero(number) {
      return number.toString().padStart(2, "0");
    }

    // Initial setup: display the generated number
    displayNumber();
  </script>
</body>
</html>
Editor is loading...