confirmation.html

<!DOCTYPE html>
<html class="no-js" lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="Email confirmation." />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <!-- Title  -->
    <title>Email Confirmation - Hereditas</title>

    <!-- Favicon  -->
    <link rel="icon" href="assets/img/favicon.png" />

    <!-- ***** All CSS Files ***** -->

    <!-- Style css -->
    <link rel="stylesheet" href="assets/css/style.css" />
  </head>

  <body>
    <div class="main">
      <!-- ***** Preloader Start ***** -->
      <div class="preloader-main">
        <div class="preloader-wapper">
          <svg
            class="preloader"
            xmlns="http://www.w3.org/2000/svg"
            version="1.1"
            width="600"
            height="200"
          >
            <defs>
              <filter id="goo" x="-40%" y="-40%" height="200%" width="400%">
                <feGaussianBlur
                  in="SourceGraphic"
                  stdDeviation="10"
                  result="blur"
                />
                <feColorMatrix
                  in="blur"
                  mode="matrix"
                  values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -8"
                  result="goo"
                />
              </filter>
            </defs>
            <g filter="url(#goo)">
              <circle class="dot" cx="50" cy="50" r="25" fill="#203d52" />
              <circle class="dot" cx="50" cy="50" r="25" fill="#203d52" />
            </g>
          </svg>
          <div>
            <div class="loader-section section-left"></div>
            <div class="loader-section section-right"></div>
          </div>
        </div>
      </div>
      <!-- ***** Preloader End ***** -->

      <!-- ***** Header Start ***** -->
      <header id="header">
        <!-- Navbar -->
        <nav
          data-aos="zoom-out"
          data-aos-delay="800"
          class="navbar gameon-navbar navbar-expand"
        >
          <div class="container header">
            <!-- Logo -->
            <a class="navbar-brand" href="index.html#home">
              <img
                src="assets/img/logo/logo.png"
                alt="Brand Logo"
                style="height: 35px"
              />
            </a>

            <div class="ms-auto"></div>

            <!-- Navbar Nav -->
            <ul class="navbar-nav items mx-auto">
              <li class="nav-item">
                <a class="nav-link" href="index.html#home">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="index.html#features">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="index.html#screenshots"
                  >Screenshots</a
                >
              </li>
              <li class="nav-item">
                <a class="nav-link" href="index.html#pricing">Pricing</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="index.html#contact">Contact</a>
              </li>
            </ul>

            <!-- Navbar Icons -->
            <ul class="navbar-nav icons"></ul>

            <!-- Navbar Toggler -->
            <ul class="navbar-nav toggle">
              <li class="nav-item">
                <a
                  href="#"
                  class="nav-link"
                  data-bs-toggle="modal"
                  data-bs-target="#menu"
                >
                  <i class="icon-menu m-0"></i>
                </a>
              </li>
            </ul>
          </div>
        </nav>
      </header>
      <!-- ***** Header End ***** -->

      <!-- ***** Email Confirmation Area Start ***** -->
      <section
        id="home"
        class="download subscribe-area has-overlay overlay-gradient vh-100"
      >
        <div class="container h-100">
          <div class="row justify-content-center align-items-center h-100">
            <div class="col-12 col-md-7 text-center">
              <!-- Success Message -->
              <div id="success-message" style="display: none">
                <h1 class="text-white">Email Confirmed!</h1>
                <p class="text-white">
                  Your email has been successfully confirmed. You can now go
                  back to the app to log in and start exploring your heritage.
                </p>
                <div class="text-center mt-4">
                  <a href="index.html#home" class="btn btn-primary"
                    >Go to Home</a
                  >
                </div>
              </div>

              <!-- Error Message -->
              <div id="error-message" style="display: none">
                <h1 class="text-white">Email Confirmation Failed</h1>
                <p class="text-white" id="error-description">
                  There was an error confirming your email address.
                </p>
                <p class="text-white mt-3">
                  Please try signing up again or contact support if the problem
                  persists.
                </p>
                <div class="text-center mt-4">
                  <a href="index.html#home" class="btn btn-primary"
                    >Go to Home</a
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- ***** Email Confirmation Area End ***** -->

      <!--====== Modal Responsive Menu Area Start ======-->
      <div id="menu" class="modal fade p-0">
        <div class="modal-dialog modal-dialog-slideout">
          <div class="modal-content full">
            <div class="modal-header" data-bs-dismiss="modal">
              Menu <i class="icon-close"></i>
            </div>
            <div class="menu modal-body">
              <div class="row w-100">
                <div class="items p-0 col-12 text-center">
                  <!-- Append [navbar] -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--====== Modal Responsive Menu Area End ======-->
    </div>

    <!-- ***** All jQuery Plugins ***** -->

    <!-- jQuery(necessary for all JavaScript plugins) -->
    <script src="assets/js/vendor/jquery.min.js"></script>

    <!-- Bootstrap js -->
    <script src="assets/js/vendor/popper.min.js"></script>
    <script src="assets/js/vendor/bootstrap.min.js"></script>

    <!-- Plugins js -->
    <script src="assets/js/vendor/slider.min.js"></script>
    <script src="assets/js/vendor/owl.carousel.min.js"></script>
    <script src="assets/js/vendor/counterup.js"></script>
    <script src="assets/js/vendor/waypoint.js"></script>
    <script src="assets/js/vendor/aos.js"></script>
    <script src="assets/js/vendor/wow.min.js"></script>
    <script src="assets/js/vendor/gallery.min.js"></script>

    <!-- Main js -->
    <script src="assets/js/main.js"></script>

    <!-- Email Confirmation Page Logic -->
    <script>
      (function () {
        const params = new URLSearchParams(window.location.hash.substring(1));
        const successMsg = document.getElementById("success-message");
        const errorMsg = document.getElementById("error-message");
        const errorDesc = document.getElementById("error-description");

        function showError(message) {
          successMsg.style.display = "none";
          errorMsg.style.display = "block";
          errorDesc.textContent = message;
        }

        function showSuccess() {
          errorMsg.style.display = "none";
          successMsg.style.display = "block";
        }

        // Check for errors in URL
        const error = params.get("error");
        const errorDescription = params.get("error_description");

        if (error) {
          showError(
            errorDescription
              ? decodeURIComponent(errorDescription)
              : "There was an error confirming your email address."
          );
        } else if (params.get("access_token")) {
          // Email confirmed successfully (Supabase already verified it server-side)
          showSuccess();
        } else {
          // No error and no token - invalid link
          showError("Invalid or expired confirmation link.");
        }
      })();
    </script>
  </body>
</html>