popup.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CyberSafe Guard</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>CyberSafe Guard</h1>
    
    <!-- Gauge Container to display threat level -->
    <div class="gauge-container">
      <div class="gauge">
        <div class="indicator"></div> <!-- Indicator to show threat level visually -->
      </div>
      <p id="threatLevel">Threat Level: Low</p> <!-- Text indicating current threat level -->
    </div>

    <!-- Information and message display area -->
    <div id="message" class="info">
      Click the buttons below to manage protection.<br>
      Stay safe in the cyber world.
    </div>

    <!-- Container for buttons to manage protection -->
    <div class="button-container">
      <button id="activateBtn">Activate Protection</button> <!-- Button to activate protection -->
      <button id="pauseBtn" style="display:none;">Pause Protection</button> <!-- Button to pause protection (hidden initially) -->
      <button id="resetBtn">Reset Protection</button> <!-- Button to reset protection settings -->
      <button id="increaseThreatBtn">Increase Threat Level</button> <!-- Button to increase threat level -->
    </div>
  </div>

  <!-- Include JavaScript file for interaction logic -->
  <script src="popup.js"></script>
</body>
</html>