Initial commit: Upload Checkpoint project

pages/interstitial/js/c.js

@@ -0,0 +1,518 @@
+// Modal state variables
+let isModalOpen = false;
+let pendingAction = null; // Can be 'success' or 'error'
+let storedErrorMessage = '';
+let storedRedirectUrl = '';
+// let redirectToken = ''; // This was defined but not used, removing for now.
+const REDIRECT_DELAY = 1488; // Moved for wider accessibility
+
+function workerFunction() {
+  self.onmessage = function (e) {
+    const { type, data } = e.data;
+
+    if (type === 'pow') {
+      const { challenge, salt, startNonce, endNonce, target, batchId } = data;
+      let count = 0;
+      let solution = null;
+
+      processNextNonce(startNonce);
+
+      function processNextNonce(nonce) {
+        const input = String(challenge) + String(salt) + nonce.toString();
+        const msgBuffer = new TextEncoder().encode(input);
+
+        crypto.subtle
+          .digest('SHA-256', msgBuffer)
+          .then((hashBuffer) => {
+            const hashArray = Array.from(new Uint8Array(hashBuffer));
+            const result = hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
+
+            count++;
+
+            if (result.startsWith(target)) {
+              solution = { nonce: nonce.toString(), found: true };
+              self.postMessage({
+                type: 'pow_result',
+                solution: solution,
+                count: count,
+                batchId: batchId,
+              });
+              return;
+            }
+
+            if (count % 1000 === 0) {
+              self.postMessage({
+                type: 'progress',
+                count: count,
+                batchId: batchId,
+              });
+            }
+
+            if (nonce < endNonce && !solution) {
+              setTimeout(() => processNextNonce(nonce + 1), 0);
+            } else if (!solution) {
+              self.postMessage({
+                type: 'pow_result',
+                solution: null,
+                count: count,
+                batchId: batchId,
+              });
+            }
+          })
+          .catch((err) => {
+            self.postMessage({
+              type: 'error',
+              error: 'Crypto API error: ' + err.message,
+            });
+          });
+      }
+    } else {
+      self.postMessage({ type: 'error', error: 'Unknown message type: ' + type });
+    }
+  };
+}
+const workerCode = '(' + workerFunction.toString() + ')()';
+
+function posWorkerFunction() {
+  self.onmessage = async function (e) {
+    const { type, seedHex, isDecoy } = e.data;
+    if (type === 'pos') {
+      const minMB = 48,
+        maxMB = 160;
+      let seedInt = parseInt(seedHex.slice(0, 8), 16);
+      if (isNaN(seedInt)) seedInt = Math.floor(Math.random() * (maxMB - minMB + 1));
+      const CHUNK_MB = isDecoy
+        ? minMB + ((seedInt * 3 + 17) % (maxMB - minMB + 1))
+        : minMB + (seedInt % (maxMB - minMB + 1));
+      const CHUNK_SIZE = CHUNK_MB * 1024 * 1024;
+      const chunkCount = 4 + (seedInt % 5);
+      const chunkSize = Math.floor(CHUNK_SIZE / chunkCount);
+      const FILL_STEP_4K = 4096,
+        FILL_STEP_1K = 1024;
+      const FILL_STEP_SWITCH = 35 * 1024 * 1024;
+      const runs = 3;
+
+      const mainBuf = new ArrayBuffer(CHUNK_SIZE);
+      const view = new Uint8Array(mainBuf);
+      const pressureBuf = new ArrayBuffer(16 * 1024 * 1024);
+      const pressureView = new Uint8Array(pressureBuf);
+
+      const hashes = [];
+      const times = [];
+      for (let r = 0; r < runs; r++) {
+        const prng = seededPRNG(seedHex + r.toString(16));
+
+        const order = Array.from({ length: chunkCount }, (_, i) => i);
+        for (let i = order.length - 1; i > 0; i--) {
+          const j = prng() % (i + 1);
+          [order[i], order[j]] = [order[j], order[i]];
+        }
+
+        const t0 = performance.now();
+        for (let c = 0; c < chunkCount; c++) {
+          const idx = order[c];
+          const start = idx * chunkSize;
+          const end = idx === chunkCount - 1 ? CHUNK_SIZE : start + chunkSize;
+          const step = start < FILL_STEP_SWITCH ? FILL_STEP_4K : FILL_STEP_1K;
+          for (let i = start; i < end; i += step) view[i] = prng() & 0xff;
+        }
+        const hashBuf = await crypto.subtle.digest('SHA-256', view);
+        const t2 = performance.now();
+        hashes.push(
+          Array.from(new Uint8Array(hashBuf))
+            .map((b) => b.toString(16).padStart(2, '0'))
+            .join(''),
+        );
+        times.push(Math.round(t2 - t0));
+
+        for (let i = 0; i < pressureView.length; i += 4096) pressureView[i] = prng() & 0xff;
+      }
+
+      self.postMessage({ type: 'pos_result', hashes, times });
+    }
+  };
+  function seededPRNG(seedHex) {
+    const s = [];
+    for (let i = 0; i < 4; i++) s[i] = parseInt(seedHex.substr(i * 8, 8), 16) >>> 0;
+    function rotl(x, k) {
+      return ((x << k) | (x >>> (32 - k))) >>> 0;
+    }
+    return function () {
+      const t = s[1] << 9;
+      let r = (s[0] * 5) >>> 0;
+      r = (rotl(r, 7) * 9) >>> 0;
+      const tmp = s[0] ^ s[2];
+      s[2] ^= s[1];
+      s[1] ^= s[3];
+      s[0] ^= s[1];
+      s[3] ^= tmp;
+      s[2] ^= t;
+      s[3] = rotl(s[3], 11);
+      return r >>> 0;
+    };
+  }
+}
+const posWorkerCode = '(' + posWorkerFunction.toString() + ')()';
+
+document.addEventListener('DOMContentLoaded', function () {
+  setTimeout(initVerification, 650);
+
+  // Modal elements
+  const infoButton = document.getElementById('infoBtn');
+  const infoModal = document.getElementById('infoModal');
+  const modalCloseButton = document.getElementById('modalCloseBtn');
+
+  if (infoButton) {
+    infoButton.addEventListener('click', () => {
+      if (isModalOpen) {
+        closeModal();
+      } else {
+        isModalOpen = true;
+        if (infoModal) infoModal.classList.add('active');
+      }
+    });
+  }
+
+  if (modalCloseButton) {
+    modalCloseButton.addEventListener('click', closeModal);
+  }
+
+  // Close modal if overlay is clicked
+  if (infoModal) {
+    infoModal.addEventListener('click', (event) => {
+      if (event.target === infoModal) {
+        closeModal();
+      }
+    });
+  }
+
+  function closeModal() {
+    if (infoModal) infoModal.classList.remove('active');
+    isModalOpen = false;
+    if (pendingAction === 'success') {
+      triggerStoredSuccess();
+    } else if (pendingAction === 'error') {
+      triggerStoredError(storedErrorMessage);
+    }
+    pendingAction = null; // Reset after handling
+  }
+
+  // Moved triggerStoredSuccess and triggerStoredError to this scope
+  function triggerStoredSuccess() {
+    document.querySelector('.container').classList.add('success');
+    const statusEl = document.getElementById('status');
+    if (statusEl) statusEl.textContent = 'Redirecting'; // Ensure status is updated
+    if (storedRedirectUrl) {
+      setTimeout(() => {
+        window.location.href = storedRedirectUrl;
+      }, REDIRECT_DELAY); // Ensure REDIRECT_DELAY is accessible or define it here
+    }
+  }
+
+  function triggerStoredError(message) {
+    const container = document.querySelector('.container');
+    const statusEl = document.getElementById('status');
+    const spinnerContainer = document.querySelector('.spinner-container');
+
+    container.classList.add('error');
+    container.classList.remove('success');
+
+    if (statusEl) {
+      statusEl.style.display = 'inline-block';
+      statusEl.textContent = 'Error';
+      statusEl.classList.add('error');
+      statusEl.classList.remove('success');
+    }
+
+    let errorDetails = document.getElementById('error-details');
+    if (!errorDetails && spinnerContainer) {
+      errorDetails = document.createElement('div');
+      errorDetails.id = 'error-details';
+      errorDetails.className = 'error-details';
+      spinnerContainer.appendChild(errorDetails);
+    }
+    if (errorDetails) {
+      // errorDetails.textContent = message; // Display the specific error message
+      errorDetails.style.display = 'block';
+    }
+    // Ensure any running workers are stopped on error
+    // This might need to be called from within Verifier's scope or Verifier needs a public method
+    // For now, if terminateWorkers is global or accessible, it would be called.
+    // However, terminateWorkers is defined within Verifier. This needs careful handling.
+    // Let's assume for now the original placement inside Verifier handles termination on actual error progression.
+    // The primary goal here is to show the UI error state.
+  }
+
+  function initVerification() {
+    const dataEl = document.getElementById('verification-data');
+    const targetPath = dataEl.getAttribute('data-target');
+    const requestID = dataEl.getAttribute('data-request-id');
+
+    startVerification();
+
+    async function startVerification() {
+      try {
+        const challengeResponse = await fetch(
+          '/api/challenge?id=' + encodeURIComponent(requestID),
+          { method: 'GET', headers: { Accept: 'application/json' }, credentials: 'include' },
+        );
+
+        if (!challengeResponse.ok) {
+          throw new Error('Failed to get challenge parameters');
+        }
+
+        const challengeData = await challengeResponse.json();
+
+        const verifier = new Verifier(challengeData, targetPath, requestID);
+        verifier.start();
+      } catch (error) {
+        showError('Verification setup failed: ' + error.message);
+      }
+    }
+
+    function createWorker() {
+      const blob = new Blob([workerCode], { type: 'text/javascript' });
+      return new Worker(URL.createObjectURL(blob));
+    }
+
+    function createPosWorker() {
+      const blob = new Blob([posWorkerCode], { type: 'text/javascript' });
+      return new Worker(URL.createObjectURL(blob));
+    }
+
+    function showError(message) {
+      const container = document.querySelector('.container');
+      const statusEl = document.getElementById('status');
+      const spinnerContainer = document.querySelector('.spinner-container');
+
+      storedErrorMessage = message; // Store for later
+
+      if (isModalOpen) {
+        pendingAction = 'error';
+        if (statusEl) {
+          statusEl.textContent = 'Error'; // Generic message while modal is open
+          statusEl.style.display = 'inline-block'; // Make sure status is visible
+          statusEl.classList.remove('success'); // Ensure no success styling
+          statusEl.classList.add('error'); // Add error styling for text color
+        }
+        // Do not show full error details or animations yet
+        return;
+      }
+
+      // Proceed with normal error display if modal is not open
+      container.classList.add('error');
+      container.classList.remove('success');
+
+      if (statusEl) {
+        statusEl.style.display = 'inline-block';
+        statusEl.textContent = '';
+        statusEl.classList.add('error');
+        statusEl.classList.remove('success');
+      }
+
+      let errorDetails = document.getElementById('error-details');
+      if (!errorDetails && spinnerContainer) {
+        errorDetails = document.createElement('div');
+        errorDetails.id = 'error-details';
+        errorDetails.className = 'error-details';
+        spinnerContainer.appendChild(errorDetails);
+      }
+
+      if (errorDetails) {
+        // errorDetails.textContent = message; // This was causing issues, let animations handle it or remove.
+        errorDetails.style.display = 'none'; // Keep this hidden, rely on class-based animation
+      }
+    }
+
+    function showSuccess() {
+      const statusEl = document.getElementById('status');
+      if (statusEl) statusEl.textContent = 'Redirecting';
+
+      if (isModalOpen) {
+        pendingAction = 'success';
+        // Do not add 'success' class or start animations yet
+        return;
+      }
+      document.querySelector('.container').classList.add('success');
+      // The redirect will be handled by submitSolution after a delay
+    }
+
+    function Verifier(params, targetPath, requestID) {
+      const workers = [];
+      const activeBatches = {};
+      let powSolution = null;
+      let isRunning = false;
+
+      const cpuCount = navigator.hardwareConcurrency || 4;
+      const workerCount = Math.max(1, Math.floor(cpuCount * 0.8));
+
+      // const REDIRECT_DELAY = 1488; // Defined globally now
+
+      this.start = function () {
+        setTimeout(findProofOfWork, 100);
+      };
+
+      async function findProofOfWork() {
+        try {
+          isRunning = true;
+
+          const challenge = params.a;
+          const salt = params.b;
+          const target = '0'.repeat(params.c);
+
+          for (let i = 0; i < workerCount; i++) {
+            const worker = createWorker();
+
+            worker.onmessage = (e) => handleWorkerMessage(e.data);
+            worker.onerror = (error) => {};
+            workers.push(worker);
+          }
+
+          const totalRange = Number.MAX_SAFE_INTEGER;
+          const rangePerWorker = Math.floor(totalRange / workerCount);
+
+          for (let i = 0; i < workers.length; i++) {
+            const startNonce = i * rangePerWorker;
+            const endNonce = i === workers.length - 1 ? totalRange : (i + 1) * rangePerWorker - 1;
+
+            const workerId = `pow-worker-${i}`;
+
+            activeBatches[workerId] = {
+              workerId: i,
+              startNonce,
+              endNonce,
+            };
+
+            workers[i].postMessage({
+              type: 'pow',
+              data: {
+                challenge: challenge,
+                salt: salt,
+                startNonce,
+                endNonce,
+                target,
+                batchId: workerId,
+              },
+            });
+          }
+        } catch (error) {
+          terminateWorkers();
+          showError(error.message);
+        }
+      }
+
+      function handleWorkerMessage(data) {
+        if (!isRunning) return;
+
+        if (data.type === 'pow_result') {
+          if (activeBatches[data.batchId]) {
+            delete activeBatches[data.batchId];
+
+            if (data.solution && data.solution.found) {
+              if (!powSolution) {
+                powSolution = data.solution;
+                proofOfWorkFound(powSolution);
+              }
+            }
+          }
+        } else if (data.type === 'error') {
+          showError('Compatibility error: ' + data.error);
+          terminateWorkers();
+        }
+      }
+
+      async function proofOfWorkFound(solution) {
+        isRunning = false;
+        terminateWorkers();
+        try {
+          const posResult = await new Promise((res) => {
+            const w = createPosWorker();
+            w.onmessage = (e) => {
+              if (e.data.type === 'pos_result') {
+                res(e.data);
+                w.terminate();
+              }
+            };
+            w.postMessage({ type: 'pos', seedHex: params.d, isDecoy: false });
+          });
+
+          await submitSolution({
+            requestID,
+            g: solution.nonce,
+            h: posResult.hashes,
+            i: posResult.times,
+          });
+        } catch (error) {
+          showError(error.message);
+        }
+      }
+
+      function terminateWorkers() {
+        workers.forEach((worker) => worker.terminate());
+      }
+
+      async function submitSolution(solutionData) {
+        try {
+          const response = await fetch('/api/verify', {
+            method: 'POST',
+            credentials: 'include',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              request_id: solutionData.requestID,
+              g: solutionData.g,
+              h: solutionData.h,
+              i: solutionData.i,
+            }),
+          });
+
+          if (!response.ok) {
+            let errorMsg = `Verification failed: ${response.statusText}`;
+            try {
+              const errorData = await response.json();
+              if (errorData && errorData.error) {
+                errorMsg += ` - ${errorData.error}`;
+              } else {
+                const text = await response.text();
+                errorMsg += ` - Response: ${text}`;
+              }
+            } catch (parseError) {}
+            showError(errorMsg);
+            return;
+          }
+
+          let result;
+          try {
+            result = await response.json();
+          } catch (e) {
+            showError('Invalid verification response');
+            return;
+          }
+          const token = result.token;
+          if (!token) {
+            // Use existing showError for immediate display if modal not involved
+            // or to set up pending error if modal is open.
+            showError('Verification did not return a token');
+            return;
+          }
+
+          // Store for potential delayed redirect
+          const sep = targetPath.includes('?') ? '&' : '?';
+          storedRedirectUrl = `${targetPath}${sep}token=${encodeURIComponent(token)}`;
+
+          showSuccess(); // This will now respect isModalOpen
+
+          if (!isModalOpen) {
+            setTimeout(() => {
+              window.location.href = storedRedirectUrl;
+            }, REDIRECT_DELAY);
+          }
+        } catch (error) {
+          // Use existing showError
+          showError('Verification failed. Please refresh the page.');
+        }
+      }
+    }
+  }
+});

pages/interstitial/page.html

@@ -0,0 +1,742 @@
+<!doctype html>
+<html lang=en>
+<meta charset=UTF-8>
+<meta http-equiv=X-UA-Compatible content="IE=edge">
+<meta name=viewport content="width=device-width,initial-scale=1">
+<title>Security Checkpoint</title>
+<meta name=description content="Security checkpoint. Prove you're not a robot.">
+<link rel=preload href=/webfont/Poppins-Regular.woff2 as=font type=font/woff2 crossorigin>
+<link rel=preload href=/webfont/Poppins-SemiBold.woff2 as=font type=font/woff2 crossorigin>
+<script defer src=/js/c.js></script>
+<style>
+    * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box
+    }
+
+    @font-face {
+        font-family: Poppins;
+        src: url(/webfont/Poppins-Regular.woff2) format("woff2");
+        font-weight: 400;
+        font-style: normal;
+        font-display: swap
+    }
+
+    @font-face {
+        font-family: Poppins;
+        src: url(/webfont/Poppins-SemiBold.woff2) format("woff2");
+        font-weight: 600;
+        font-style: normal;
+        font-display: swap
+    }
+
+    body {
+        font-family: Poppins, sans-serif
+    }
+
+    @view-transition {
+        navigation: auto
+    }
+
+    ::view-transition-new(root),
+    ::view-transition-old(root) {
+        animation-duration: .35s
+    }
+
+    @media (prefers-reduced-motion) {
+
+        ::view-transition-group(*),
+        ::view-transition-new(*),
+        ::view-transition-old(*) {
+            animation: none !important
+        }
+    }
+
+    :root {
+        --background-color: #1a1a1a;
+        --overlay-bg: rgba(28, 28, 28, 0.95);
+        --text-color: #fff;
+        --subtext-color: #ccc;
+        --accent-color: #9B59B6;
+        --success-color: #4CAF50;
+        --error-color: #F44336
+    }
+
+    html,
+    body {
+        background-color: #1a1a1a;
+        background-image: radial-gradient(circle at top right, rgba(155, 89, 182, .1), transparent 70%), linear-gradient(135deg, #121212, #1a1a1a);
+        overflow: hidden;
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        width: 100%
+    }
+
+    ::-webkit-scrollbar {
+        display: none
+    }
+
+    * {
+        scrollbar-width: none
+    }
+
+    * {
+        -ms-overflow-style: none
+    }
+
+    body {
+        color: var(--text-color);
+        line-height: 1.6;
+        text-align: center;
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center
+    }
+
+    #overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: var(--overlay-bg);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 9999;
+        padding: 20px
+    }
+
+    .container {
+        background: rgba(30, 30, 30, .85);
+        backdrop-filter: blur(8px);
+        border-radius: 20px;
+        padding: 20px;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, .3), 0 1px 2px rgba(155, 89, 182, .2), 0 0 0 1px rgba(155, 89, 182, .2), 0 0 15px rgba(155, 89, 182, .15);
+        max-width: 555px;
+        width: 100%;
+        animation: floatIn .6s cubic-bezier(.25, .1, .25, 1);
+        position: relative;
+        overflow: hidden
+    }
+
+    h1 {
+        color: var(--accent-color);
+        margin-bottom: 1.25rem;
+        font-size: clamp(1.75rem, 5vw, 2.5rem);
+        font-weight: 600;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, .3)
+    }
+
+    p {
+        margin-bottom: 1.75rem;
+        color: var(--subtext-color);
+        font-size: clamp(1rem, 2.5vw, 1.1rem)
+    }
+
+    .spinner-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        margin: 20px 0;
+        height: clamp(48px, 12vw, 56px);
+        transition: all .4s cubic-bezier(.215, .61, .355, 1);
+        will-change: transform, opacity;
+        position: relative
+    }
+
+    .spinner {
+        border: 3px solid rgba(155, 89, 182, 8%);
+        border-radius: 50%;
+        border-top: 3px solid var(--accent-color);
+        width: clamp(48px, 12vw, 56px);
+        height: clamp(48px, 12vw, 56px);
+        animation: spin 1s linear infinite, pulse 2s ease-in-out infinite;
+        margin: 0 auto;
+        box-shadow: 0 0 15px rgba(155, 89, 182, .3);
+        transition: all .5s cubic-bezier(.19, 1, .22, 1);
+        will-change: transform, box-shadow;
+        position: relative
+    }
+
+    .spinner::after {
+        content: '';
+        position: absolute;
+        inset: -3px;
+        border-radius: 50%;
+        background: linear-gradient(135deg, rgba(155, 89, 182, .2) 0%, transparent 60%);
+        opacity: .3;
+        filter: blur(4px);
+        z-index: -1
+    }
+
+    .status {
+        display: none;
+        font-weight: 600;
+        font-size: clamp(1.5rem, 4vw, 2rem);
+        margin: 0;
+        min-height: 1.5em;
+        text-align: center;
+        opacity: 0
+    }
+
+    .success .spinner-container {
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        max-width: none;
+        width: 100%;
+        margin: 1.5rem auto;
+        gap: 12px;
+        animation: container-animate .3s cubic-bezier(.25, .1, .25, 1)forwards
+    }
+
+    .success .spinner-container .error-details {
+        display: none
+    }
+
+    .success .spinner {
+        border-color: transparent;
+        animation: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: rgba(76, 175, 80, 5%);
+        box-shadow: 0 0 20px rgba(76, 175, 80, .4);
+        width: clamp(48px, 12vw, 56px);
+        height: clamp(48px, 12vw, 56px);
+        margin: 0;
+        animation: ui-animate .35s forwards cubic-bezier(.25, .1, .25, 1), float-animate 3s ease-in-out infinite .4s
+    }
+
+    .success .spinner::before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        background: radial-gradient(circle, rgba(76, 175, 80, 5%) 0%, rgba(76, 175, 80, .1) 100%);
+        box-shadow: inset 0 0 0 3px rgba(76, 175, 80, 0);
+        animation: circle-animate .35s cubic-bezier(.25, .1, .25, 1)forwards;
+        opacity: 0;
+        inset: 0;
+        will-change: opacity, transform, box-shadow
+    }
+
+    .success .spinner::after {
+        content: '';
+        width: clamp(22px, 6vw, 28px);
+        height: clamp(22px, 6vw, 28px);
+        display: block;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234CAF50'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
+        background-size: contain;
+        animation: checkmark-animate .35s cubic-bezier(.25, .1, .25, 1)forwards .05s;
+        opacity: 0;
+        transform: scale(0);
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%)scale(0);
+        will-change: transform, opacity;
+        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .15))
+    }
+
+    .success .status {
+        display: inline-block;
+        color: var(--success-color);
+        animation: text-animate .4s forwards cubic-bezier(.25, .1, .25, 1);
+        animation-delay: .15s;
+        letter-spacing: .3px;
+        text-shadow: 0 1px 1px rgba(0, 0, 0, 5%);
+        opacity: 0;
+        transform: translateX(-15px);
+        white-space: nowrap
+    }
+
+    .success .status::after {
+        content: "";
+        display: inline-block;
+        width: 24px;
+        text-align: left;
+        animation: ellipsis-animate .88s infinite cubic-bezier(.25, .1, .25, 1)
+    }
+
+    .error .status {
+        display: block;
+        color: var(--error-color);
+        margin-bottom: .5rem
+    }
+
+    .error .spinner {
+        border-color: transparent;
+        animation: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: rgba(244, 67, 54, 5%);
+        box-shadow: 0 0 20px rgba(244, 67, 54, .4);
+        width: clamp(48px, 12vw, 56px);
+        height: clamp(48px, 12vw, 56px);
+        margin: 0;
+        animation: ui-animate .35s forwards cubic-bezier(.25, .1, .25, 1), float-animate 3s ease-in-out infinite .4s
+    }
+
+    .error .spinner::before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        background: radial-gradient(circle, rgba(244, 67, 54, 5%) 0%, rgba(244, 67, 54, .1) 100%);
+        box-shadow: inset 0 0 0 3px rgba(244, 67, 54, 0);
+        animation: error-circle-animate .35s cubic-bezier(.25, .1, .25, 1)forwards;
+        opacity: 0;
+        inset: 0;
+        will-change: opacity, transform, box-shadow
+    }
+
+    .error .spinner::after {
+        content: '';
+        width: clamp(22px, 6vw, 28px);
+        height: clamp(22px, 6vw, 28px);
+        display: block;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%23F44336' stroke-width='3' fill='none'%3E%3Cpath stroke-linecap='round' d='M6 6 L18 18 M18 6 L6 18'/%3E%3C/svg%3E");
+        background-size: contain;
+        animation: checkmark-animate .35s cubic-bezier(.25, .1, .25, 1)forwards .05s;
+        opacity: 0;
+        transform: scale(0);
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%)scale(0);
+        will-change: transform, opacity;
+        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .15))
+    }
+
+    .error-details {
+        margin: 10px auto 0;
+        padding: .75rem 1.25rem;
+        background-color: rgba(244, 67, 54, 8%);
+        border-left: 3px solid var(--error-color);
+        color: var(--subtext-color);
+        font-size: .9rem;
+        text-align: center;
+        border-radius: 4px;
+        width: 90%;
+        line-height: 1.5;
+        animation: fadeIn .3s ease-in-out forwards
+    }
+
+    .error-x-icon {
+        width: clamp(22px, 6vw, 28px);
+        height: clamp(22px, 6vw, 28px);
+        fill: none;
+        stroke: var(--error-color);
+        stroke-width: 2;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        display: block;
+        overflow: visible;
+        box-sizing: border-box;
+        padding: 0;
+        animation: fadeInScale .5s ease-in-out forwards
+    }
+
+    @keyframes floatIn {
+        from {
+            opacity: 0;
+            transform: translateY(20px)
+        }
+
+        to {
+            opacity: 1;
+            transform: translateY(0)
+        }
+    }
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0)
+        }
+
+        100% {
+            transform: rotate(360deg)
+        }
+    }
+
+    @keyframes pulse {
+
+        0%,
+        100% {
+            box-shadow: 0 0 15px rgba(155, 89, 182, .3)
+        }
+
+        50% {
+            box-shadow: 0 0 25px rgba(155, 89, 182, .5)
+        }
+    }
+
+    @keyframes container-animate {
+        0% {
+            opacity: .95
+        }
+
+        100% {
+            opacity: 1
+        }
+    }
+
+    @keyframes ui-animate {
+        0% {
+            transform: translate(60px, 0)scale(.9);
+            opacity: 0
+        }
+
+        40% {
+            opacity: 1
+        }
+
+        100% {
+            transform: translate(0, 0)scale(1);
+            opacity: 1
+        }
+    }
+
+    @keyframes float-animate {
+
+        0%,
+        100% {
+            transform: translateY(0)
+        }
+
+        50% {
+            transform: translateY(-2px)
+        }
+    }
+
+    @keyframes circle-animate {
+        0% {
+            opacity: 0;
+            transform: scale(.5);
+            box-shadow: inset 0 0 0 3px rgba(76, 175, 80, 0)
+        }
+
+        60% {
+            opacity: 1;
+            transform: scale(1.1);
+            box-shadow: inset 0 0 0 3px rgba(76, 175, 80, .9)
+        }
+
+        100% {
+            opacity: 1;
+            transform: scale(1);
+            box-shadow: inset 0 0 0 3px var(--success-color)
+        }
+    }
+
+    @keyframes checkmark-animate {
+        0% {
+            opacity: 0;
+            transform: translate(-50%, -50%)scale(0)
+        }
+
+        60% {
+            opacity: 1;
+            transform: translate(-50%, -50%)scale(1.15)
+        }
+
+        100% {
+            opacity: 1;
+            transform: translate(-50%, -50%)scale(1)
+        }
+    }
+
+    @keyframes text-animate {
+        0% {
+            opacity: 0;
+            transform: translateX(-15px)
+        }
+
+        70% {
+            opacity: 1;
+            transform: translateX(1px)
+        }
+
+        100% {
+            opacity: 1;
+            transform: translateX(0)
+        }
+    }
+
+    @keyframes ellipsis-animate {
+
+        0%,
+        5% {
+            content: ""
+        }
+
+        20%,
+        30% {
+            content: "."
+        }
+
+        45%,
+        55% {
+            content: ".."
+        }
+
+        70%,
+        80% {
+            content: "..."
+        }
+
+        95%,
+        100% {
+            content: ""
+        }
+    }
+
+    @keyframes fadeInScale {
+        from {
+            opacity: 0;
+            transform: scale(.5)
+        }
+
+        to {
+            opacity: 1;
+            transform: scale(1)
+        }
+    }
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+            transform: translateY(-5px)
+        }
+
+        to {
+            opacity: 1;
+            transform: translateY(0)
+        }
+    }
+
+    @keyframes error-circle-animate {
+        0% {
+            opacity: 0;
+            transform: scale(.5);
+            box-shadow: inset 0 0 0 3px rgba(244, 67, 54, 0)
+        }
+
+        60% {
+            opacity: 1;
+            transform: scale(1.1);
+            box-shadow: inset 0 0 0 3px rgba(244, 67, 54, .9)
+        }
+
+        100% {
+            opacity: 1;
+            transform: scale(1);
+            box-shadow: inset 0 0 0 3px var(--error-color)
+        }
+    }
+
+    @media(max-width:480px) {
+        .container {
+            padding: 20px;
+            border-radius: 16px
+        }
+
+        h1 {
+            font-size: 1.5rem
+        }
+    }
+
+    .error .spinner-container,
+    .success .spinner-container {
+        height: 56px;
+        margin: 20px 0
+    }
+
+    .container,
+    .spinner,
+    .spinner-container,
+    .success .spinner,
+    .success .status {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        -webkit-backface-visibility: hidden;
+        backface-visibility: hidden
+    }
+
+    /* Modal Styles */
+    .modal-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(0, 0, 0, .7);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 10000;
+        opacity: 0;
+        visibility: hidden;
+        transition: opacity .3s ease, visibility .3s ease
+    }
+
+    .modal-overlay.active {
+        opacity: 1;
+        visibility: visible
+    }
+
+    .modal-content {
+        background: rgba(40, 40, 40, .9);
+        backdrop-filter: blur(10px);
+        padding: 30px;
+        border-radius: 15px;
+        box-shadow: 0 5px 25px rgba(0, 0, 0, .4), 0 0 0 1px rgba(155, 89, 182, .25);
+        max-width: 600px;
+        width: 90%;
+        text-align: left;
+        position: relative;
+        transform: scale(.9);
+        transition: transform .3s ease
+    }
+
+    .modal-overlay.active .modal-content {
+        transform: scale(1)
+    }
+
+    .modal-content h2 {
+        color: var(--accent-color);
+        margin-bottom: 15px;
+        font-size: 1.8rem
+    }
+
+    .modal-content p {
+        color: var(--subtext-color);
+        font-size: 1rem;
+        line-height: 1.7;
+        margin-bottom: 12px
+    }
+
+    .modal-content p:last-of-type {
+        margin-bottom: 25px
+    }
+
+    .modal-close-btn {
+        position: absolute;
+        top: 15px;
+        right: 15px;
+        background: transparent;
+        border: none;
+        color: var(--subtext-color);
+        font-size: 1.8rem;
+        cursor: pointer;
+        line-height: 1;
+        padding: 5px
+    }
+
+    .modal-close-btn:hover {
+        color: var(--text-color)
+    }
+
+    .info-button {
+        background-color: rgba(155, 89, 182, .15);
+        color: var(--accent-color);
+        border: 1px solid rgba(155, 89, 182, .3);
+        padding: 12px 24px;
+        border-radius: 25px;
+        font-size: 1rem;
+        cursor: pointer;
+        transition: all .3s ease;
+        text-decoration: none;
+        position: fixed;
+        bottom: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 10001;
+        font-weight: 500
+    }
+
+    .info-button:hover {
+        background-color: rgba(155, 89, 182, .25);
+        border-color: rgba(155, 89, 182, .5);
+        box-shadow: 0 0 10px rgba(155, 89, 182, .2)
+    }
+
+    /* Improved mobile styles */
+    @media (max-width: 480px) {
+        .container {
+            padding: 20px;
+            border-radius: 16px;
+        }
+
+        h1 {
+            font-size: 1.5rem;
+        }
+
+        .modal-content {
+            padding: 20px;
+            width: 95%;
+            max-height: 80vh;
+            overflow-y: auto;
+        }
+
+        .modal-content h2 {
+            font-size: 1.5rem;
+            margin-bottom: 12px;
+        }
+
+        .modal-content p {
+            font-size: 0.95rem;
+            margin-bottom: 10px;
+        }
+
+        .modal-close-btn {
+            top: 10px;
+            right: 10px;
+            font-size: 1.5rem;
+            padding: 8px;
+        }
+
+        .info-button {
+            width: auto;
+            min-width: 200px;
+            max-width: 85%;
+            padding: 12px 20px;
+            bottom: 15px;
+            font-size: 0.95rem;
+            white-space: nowrap;
+        }
+    }
+</style>
+<div id=overlay>
+    <div class=container>
+        <h1>Security Checkpoint</h1>
+        <p>Verifying your browser to protect from automated abuse. This may take a few seconds...</p>
+        <div class=spinner-container>
+            <div class=spinner></div>
+            <div id=status class=status>Redirecting</div>
+        </div>
+    </div>
+</div>
+<button id="infoBtn" class="info-button">Why am I seeing this?</button>
+<div id=verification-data data-target={{TargetPath}} data-request-id={{RequestID}}></div>
+<div id="infoModal" class="modal-overlay">
+    <div class="modal-content">
+        <button id="modalCloseBtn" class="modal-close-btn">&times;</button>
+        <h2>Why am I seeing this?</h2>
+        <p>This website uses Checkpoint to protect against automated systems that can overload the server.</p>
+        <p>Checkpoint uses a couple quick proof of challenges similar to concepts like Hashcash. It's a small task for
+            your browser that's barely noticeable to you, but it becomes a significant hurdle for bots trying to access
+            the site en masse.</p>
+    </div>
+</div>