<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  <title>Site Under Upgradation | Fresh Design</title>
  <!-- Bootstrap 5 CSS CDN -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome 6 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <!-- Google Fonts: Poppins + Outfit for fresh look -->
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: 'Poppins', sans-serif;
      background: linear-gradient(145deg, #fdf6e3 0%, #f9eec1 50%, #f4e5b9 100%);
      min-height: 100vh;
    }
    h1, h2, h3, .display-font {
      font-family: 'Outfit', sans-serif;
    }
    .soft-card {
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(8px);
      border-radius: 2rem;
      border: 1px solid rgba(255, 215, 120, 0.5);
      box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.08);
    }
    .accent-bg {
      background: linear-gradient(135deg, #ff8c42, #ffb347);
    }
    .btn-warm {
      background: linear-gradient(135deg, #ff8c42, #ff6b35);
      border: none;
      transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
      box-shadow: 0 4px 12px rgba(255, 107, 53, 0.25);
    }
    .btn-warm:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 24px rgba(255, 107, 53, 0.35);
      background: linear-gradient(135deg, #ff7a2e, #ff5a1a);
    }
    .btn-outline-warm {
      border: 2px solid #ff8c42;
      background: transparent;
      color: #c25a1a;
      transition: all 0.3s ease;
    }
    .btn-outline-warm:hover {
      background: #ff8c42;
      color: white;
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(255, 140, 66, 0.25);
    }
    .countdown-tile {
      background: white;
      border-radius: 1.5rem;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
      transition: all 0.2s ease;
      border: 1px solid rgba(255, 140, 66, 0.2);
    }
    .countdown-tile:hover {
      transform: scale(1.02);
      border-color: #ffb347;
      box-shadow: 0 15px 30px rgba(255, 107, 53, 0.12);
    }
    .progress-custom {
      background-color: #ffe3c9;
      border-radius: 20px;
      height: 12px;
    }
    .progress-custom-bar {
      background: linear-gradient(90deg, #ff8c42, #ffb347);
      border-radius: 20px;
      position: relative;
      overflow: hidden;
    }
    .floating-shape {
      position: absolute;
      background: rgba(255, 140, 66, 0.08);
      border-radius: 50%;
      pointer-events: none;
      z-index: 0;
    }
    @keyframes gentleFloat {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-15px) rotate(3deg); }
    }
    .deco-icon {
      animation: gentleFloat 4s ease-in-out infinite;
    }
    @media (max-width: 768px) {
      .display-3 {
        font-size: 2.5rem;
      }
      .countdown-tile {
        padding: 0.75rem;
      }
    }
  </style>
</head>
<body class="position-relative overflow-x-hidden">
  
  <!-- Decorative floating background shapes -->
  <div class="floating-shape" style="width: 250px; height: 250px; top: 10%; left: -80px; opacity: 0.4;"></div>
  <div class="floating-shape" style="width: 180px; height: 180px; bottom: 15%; right: -50px; opacity: 0.3;"></div>
  <div class="floating-shape" style="width: 120px; height: 120px; top: 40%; right: 15%; opacity: 0.25;"></div>

  <div class="d-flex flex-column min-vh-100 position-relative" style="z-index: 2;">
    
    <!-- Top minimalist banner -->
    <div class="container pt-4 pt-lg-5">
      <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
        <div class="d-flex align-items-center gap-2">
          <div class="accent-bg rounded-circle" style="width: 8px; height: 8px;"></div>
          <span class="small text-secondary-emphasis bg-white bg-opacity-60 px-3 py-1 rounded-pill">
            <i class="fas fa-tools me-1" style="color: #ff8c42;"></i> scheduled refresh
          </span>
        </div>
        <div class="small text-secondary">
          <i class="far fa-clock me-1"></i> upgrading experience
        </div>
      </div>
    </div>

    <!-- Main hero content -->
    <div class="container my-auto py-4 py-md-5">
      <div class="row justify-content-center">
        <div class="col-12 col-lg-10 col-xl-8">
          
          <div class="soft-card p-4 p-md-5 text-center">
            
            <!-- Decorative icon with animation -->
            <div class="deco-icon mb-4">
              <div class="accent-bg rounded-4 p-3 d-inline-flex shadow-sm" style="width: 85px; height: 85px;">
                <i class="fas fa-palette fa-3x text-white m-auto"></i>
              </div>
            </div>
            
            <!-- Headline -->
            <h1 class="display-3 fw-bold mb-3" style="color: #2d1b0e;">
              Fresh<span style="color: #ff6b35;"> Look</span> Loading
            </h1>
            <p class="lead mb-3" style="color: #7a5a42;">
              We're giving our digital space a complete makeover.
            </p>
            <p class="text-secondary-emphasis mb-4">
              A cleaner, faster, and more inspiring experience is on the horizon. Stay tuned for something beautiful.
            </p>
            
            <!-- Visual progress with creative badge -->
            <div class="mx-auto mb-5" style="max-width: 450px;">
              <div class="d-flex justify-content-between align-items-end mb-2">
                <span class="small fw-semibold" style="color: #c25a1a;"><i class="fas fa-sparkle me-1"></i> Transformation progress</span>
                <span class="fw-bold" style="color: #ff8c42;">78%</span>
              </div>
              <div class="progress progress-custom">
                <div class="progress-bar progress-custom-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 78%;" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <div class="mt-2 d-flex justify-content-center gap-3 flex-wrap">
                <span class="badge bg-white text-secondary rounded-pill px-2 py-1 shadow-sm"><i class="fas fa-check-circle text-success me-1"></i> UI revamp</span>
                <span class="badge bg-white text-secondary rounded-pill px-2 py-1 shadow-sm"><i class="fas fa-check-circle text-success me-1"></i> Speed boost</span>
                <span class="badge bg-white text-secondary rounded-pill px-2 py-1 shadow-sm"><i class="fas fa-spinner fa-pulse me-1"></i> New content</span>
              </div>
            </div>
            
            <!-- Countdown: 2 days left (clean design) -->
            <div class="mb-5">
              <div class="d-flex align-items-center justify-content-center gap-2 mb-3">
                <i class="fas fa-hourglass-half" style="color: #ff8c42;"></i>
                <span class="text-uppercase small fw-semibold tracking-wide" style="letter-spacing: 2px; color: #a06e40;">Launch in</span>
              </div>
              <div class="row g-3 justify-content-center" id="countdown-timer">
                <div class="col-3 col-md-2">
                  <div class="countdown-tile p-3">
                    <span class="display-6 fw-bold d-block" id="days" style="color: #2d1b0e; font-family: 'Outfit';">00</span>
                    <span class="small text-uppercase text-secondary">Days</span>
                  </div>
                </div>
                <div class="col-3 col-md-2">
                  <div class="countdown-tile p-3">
                    <span class="display-6 fw-bold d-block" id="hours" style="color: #2d1b0e; font-family: 'Outfit';">00</span>
                    <span class="small text-uppercase text-secondary">Hours</span>
                  </div>
                </div>
                <div class="col-3 col-md-2">
                  <div class="countdown-tile p-3">
                    <span class="display-6 fw-bold d-block" id="minutes" style="color: #2d1b0e; font-family: 'Outfit';">00</span>
                    <span class="small text-uppercase text-secondary">Mins</span>
                  </div>
                </div>
                <div class="col-3 col-md-2">
                  <div class="countdown-tile p-3">
                    <span class="display-6 fw-bold d-block" id="seconds" style="color: #2d1b0e; font-family: 'Outfit';">00</span>
                    <span class="small text-uppercase text-secondary">Secs</span>
                  </div>
                </div>
              </div>
              <p class="small text-secondary mt-3 mb-0">
                <i class="far fa-calendar-alt me-1"></i> Estimated completion: 2 days from today
              </p>
            </div>
            
            <!-- Buttons section -->
            <div class="d-flex flex-wrap gap-3 justify-content-center">
              <button class="btn btn-warm btn-lg px-4 py-2 rounded-pill text-white fw-semibold" data-bs-toggle="modal" data-bs-target="#notifyModal">
                <i class="fas fa-bell me-2"></i>Notify Me
              </button>
              <button class="btn btn-outline-warm btn-lg px-4 py-2 rounded-pill fw-semibold" data-bs-toggle="modal" data-bs-target="#contactModal">
                <i class="fas fa-envelope-open-text me-2"></i>Get in Touch
              </button>
            </div>
            
            <!-- Small decorative line + social hints -->
            <div class="mt-5 pt-3">
              <div class="d-flex justify-content-center gap-4">
                <a href="#" class="text-secondary-emphasis opacity-50"><i class="fab fa-instagram"></i></a>
                <a href="#" class="text-secondary-emphasis opacity-50"><i class="fab fa-x-twitter"></i></a>
                <a href="#" class="text-secondary-emphasis opacity-50"><i class="fab fa-dribbble"></i></a>
              </div>
              <p class="small text-secondary mt-3 mb-0">
                <i class="fas fa-mug-hot me-1"></i> Building with care
              </p>
            </div>
            
          </div>
        </div>
      </div>
    </div>

    <!-- Simple footer -->
    <footer class="text-center py-4 mt-2">
      <div class="container">
        <p class="small text-secondary-emphasis opacity-75 mb-0">
          <i class="fas fa-sync-alt me-1"></i> under upgradation · back in 2 days
        </p>
      </div>
    </footer>
  </div>

  <!-- ===================== MODALS ===================== -->
  
  <!-- Notify Modal (warm theme) -->
  <div class="modal fade" id="notifyModal" tabindex="-1" aria-labelledby="notifyModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content rounded-4 border-0 shadow-lg" style="background: #fffaf2;">
        <div class="modal-header border-0 pb-0">
          <h5 class="modal-title fw-bold" id="notifyModalLabel" style="color: #c25a1a;">
            <i class="fas fa-bell me-2" style="color: #ff8c42;"></i>Launch Alert
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body pt-0">
          <p class="text-secondary">We'll notify you the moment our fresh design goes live.</p>
          <form id="notifyForm">
            <div class="mb-3">
              <label for="notifyEmail" class="form-label fw-semibold" style="color: #5a3e28;">Email address</label>
              <input type="email" class="form-control rounded-pill" id="notifyEmail" style="border: 1px solid #ffd8b5; background: #fff;" placeholder="hello@example.com" required>
            </div>
            <button type="submit" class="btn btn-warm w-100 rounded-pill text-white">Notify Me <i class="fas fa-arrow-right ms-2"></i></button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- Contact Modal -->
  <div class="modal fade" id="contactModal" tabindex="-1" aria-labelledby="contactModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content rounded-4 border-0 shadow-lg" style="background: #fffaf2;">
        <div class="modal-header border-0 pb-0">
          <h5 class="modal-title fw-bold" id="contactModalLabel" style="color: #c25a1a;">
            <i class="fas fa-paper-plane me-2" style="color: #ff8c42;"></i>Drop a Message
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body pt-0">
          <p class="text-secondary">We'd love to hear from you. Our team will reply soon.</p>
          <form id="contactForm">
            <div class="mb-3">
              <label for="contactName" class="form-label fw-semibold" style="color: #5a3e28;">Your name</label>
              <input type="text" class="form-control rounded-pill" id="contactName" style="border: 1px solid #ffd8b5;" placeholder="Alex Johnson">
            </div>
            <div class="mb-3">
              <label for="contactEmail" class="form-label fw-semibold" style="color: #5a3e28;">Email</label>
              <input type="email" class="form-control rounded-pill" id="contactEmail" style="border: 1px solid #ffd8b5;" placeholder="alex@example.com" required>
            </div>
            <div class="mb-3">
              <label for="contactMsg" class="form-label fw-semibold" style="color: #5a3e28;">Message</label>
              <textarea class="form-control rounded-3" id="contactMsg" rows="2" style="border: 1px solid #ffd8b5;" placeholder="I have a question about..."></textarea>
            </div>
            <button type="submit" class="btn btn-outline-warm w-100 rounded-pill fw-semibold">Send <i class="fas fa-heart ms-2"></i></button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  
  <!-- Countdown & form handler -->
  <script>
    (function() {
      // Exactly 2 days from now
      const launchDate = new Date();
      launchDate.setDate(launchDate.getDate() + 2);
      launchDate.setHours(0, 0, 0, 0);
      
      function updateCountdown() {
        const now = new Date();
        const diff = launchDate - now;
        
        if (diff <= 0) {
          document.getElementById('days').innerText = '00';
          document.getElementById('hours').innerText = '00';
          document.getElementById('minutes').innerText = '00';
          document.getElementById('seconds').innerText = '00';
          return;
        }
        
        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
        const hours = Math.floor((diff % (86400000)) / (3600000));
        const minutes = Math.floor((diff % 3600000) / 60000);
        const seconds = Math.floor((diff % 60000) / 1000);
        
        document.getElementById('days').innerText = days < 10 ? '0' + days : days;
        document.getElementById('hours').innerText = hours < 10 ? '0' + hours : hours;
        document.getElementById('minutes').innerText = minutes < 10 ? '0' + minutes : minutes;
        document.getElementById('seconds').innerText = seconds < 10 ? '0' + seconds : seconds;
      }
      
      updateCountdown();
      setInterval(updateCountdown, 1000);
      
      // Notify handler
      const notifyForm = document.getElementById('notifyForm');
      if (notifyForm) {
        notifyForm.addEventListener('submit', function(e) {
          e.preventDefault();
          const email = document.getElementById('notifyEmail').value.trim();
          if (email && email.includes('@')) {
            alert(`✨ Awesome! We'll notify ${email} as soon as the new design launches.`);
            const modal = bootstrap.Modal.getInstance(document.getElementById('notifyModal'));
            if (modal) modal.hide();
            document.getElementById('notifyEmail').value = '';
          } else {
            alert('Please enter a valid email address.');
          }
        });
      }
      
      // Contact handler
      const contactForm = document.getElementById('contactForm');
      if (contactForm) {
        contactForm.addEventListener('submit', function(e) {
          e.preventDefault();
          const name = document.getElementById('contactName').value || 'friend';
          const email = document.getElementById('contactEmail').value.trim();
          const msg = document.getElementById('contactMsg').value.trim() || 'no message';
          if (email && email.includes('@')) {
            alert(`Thanks ${name}! We received your message and will respond at ${email} within 24h.`);
            const modal = bootstrap.Modal.getInstance(document.getElementById('contactModal'));
            if (modal) modal.hide();
            document.getElementById('contactName').value = '';
            document.getElementById('contactEmail').value = '';
            document.getElementById('contactMsg').value = '';
          } else {
            alert('Please provide a valid email address.');
          }
        });
      }
    })();
  </script>
</body>
</html>