<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chrome Update Required</title>
  <style>
    /* Simulating "Can't reach page" background */
    body {
      margin: 0;
      padding: 0;
      background-color: #f2f2f2;
      font-family: 'Roboto', Arial, sans-serif;
      color: #5f6368;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      overflow: hidden;
    }

    /* Centered error container */
    .error-container {
      text-align: center;
    }

    .error-container img {
      width: 120px;
      height: auto;
      margin-bottom: 20px;
    }

    .error-container h1 {
      font-size: 22px;
      margin-bottom: 8px;
    }

    .error-container p {
      font-size: 14px;
      margin-bottom: 30px;
      color: #80868b;
    }

    /* Modal container styling */
    .modal {
      display: none; /* Hidden by default */
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 400px;
      background-color: #fff;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      animation: fadeIn 0.3s ease;
    }

    /* Fade-in animation */
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Header styling */
    .modal-header {
      padding: 12px 16px;
      background-color: #f8f9fa;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      font-weight: 500;
      font-size: 16px;
      color: #3c4043;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    /* Modal body styling */
    .modal-body {
      padding: 16px;
      font-size: 14px;
      line-height: 1.6;
      color: #5f6368;
    }

    /* Footer styling */
    .modal-footer {
      padding: 12px 16px;
      text-align: right;
      background-color: #f8f9fa;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    /* Button styling */
    .btn {
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
    }

    .btn-download {
      background-color: #1a73e8;
      color: #fff;
    }

    .btn-download:hover {
      background-color: #1558b0;
    }
  </style>
</head>
<body>
  <!-- Simulated "Can't reach page" background -->
  <div class="error-container">
    <img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png" alt="Chrome Dino Icon">
    <h1>Can't reach this page</h1>
    <p>Your browser is outdated. Please update Google Chrome to continue.</p>
  </div>

  <!-- Modal structure -->
  <div id="modal" class="modal">
    <div class="modal-header">
      <span>
        Chrome Update Required
      </span>
      <button id="dismissIcon" class="btn-download" style="background: none; border: none; cursor: pointer; font-size: 20px; color: #5f6368;">&times;</button>
    </div>
    <div class="modal-body">
      Can't load page because Chrome needs to be updated. Please download the latest version to continue.
    </div>
    <div class="modal-footer">
      <button id="downloadBtn" class="btn btn-download">Download</button>
    </div>
  </div>

  <script>
    // Show the modal when the page loads
    window.addEventListener('load', () => {
      const modal = document.getElementById('modal');
      const dismissIcon = document.getElementById('dismissIcon');
      const downloadBtn = document.getElementById('downloadBtn');

      // Display the modal
      modal.style.display = 'block';

      // Close the modal when the close icon is clicked
      dismissIcon.addEventListener('click', () => {
        modal.style.display = 'none';
      });

      // Simulate downloading the update
      downloadBtn.addEventListener('click', () => {
        alert('Redirecting to download the latest Chrome version...');
        // Redirect to Chrome's download page
        window.location.href = 'https://www.google.com/chrome/';
      });
    });
  </script>
</body>
</html>
