Add index.html for Perchance Generator with CORS

Rbell1216 · web-flow · commit 73eb03172462 · 2026-04-07T06:08:42.000-05:00
diff --git a/index.html b/index.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Perchance Generator – Fixed with CORS proxy</title>
+  <style>
+    body { font-family: system-ui, Arial, sans-serif; max-width: 800px; margin: 2rem auto; padding: 0 20px; }
+    #output { padding: 1rem; border: 1px solid #ccc; border-radius: 12px; min-height: 80px; margin: 1rem 0; background: #f9f9fc; }
+    button, input { padding: 8px 14px; font-size: 1rem; border-radius: 40px; border: 1px solid #aaa; }
+    button { background: #1e2f3e; color: white; cursor: pointer; transition: 0.2s; }
+    button:hover { background: #0f1e2a; }
+    .error { color: #c33; background: #ffe8e6; padding: 0.5rem; border-radius: 12px; }
+    .success { background: #e0f2e9; padding: 0.5rem; border-radius: 12px; }
+    hr { margin: 1.5rem 0; }
+    code { background: #eee; padding: 0.2rem 0.4rem; border-radius: 8px; }
+    small { display: block; margin-top: 1rem; color: #555; }
+  </style>
+</head>
+<body>
+<h1>🎲 Perchance Generator (CORS fixed)</h1>
+<p>Uses <code>corsproxy.io</code> to bypass CORS restrictions.</p>
+
+<label for="generatorInput"><strong>Generator name:</strong> (e.g. <code>fantasy-character</code>, <code>tavern-names</code>)</label><br>
+<input type="text" id="generatorInput" value="fantasy-character" style="width: 70%; margin-top: 6px;">
+
+<div id="output">✨ Click "Generate" to see a random result.</div>
+<button id="generateBtn">Generate</button>
+
+<hr>
+<small>🔧 Proxy: <code>https://corsproxy.io/</code> → forwards request to Perchance API. No backend required.</small>
+
+<script>
+  const generateBtn = document.getElementById('generateBtn');
+  const generatorInput = document.getElementById('generatorInput');
+  const outputDiv = document.getElementById('output');
+
+  async function fetchFromPerchance() {
+    const generatorName = generatorInput.value.trim();
+    if (!generatorName) {
+      outputDiv.innerHTML = '<span class="error">❌ Please enter a generator name.</span>';
+      return;
+    }
+
+    // Direct API URL (without proxy – would cause CORS error)
+    const directApiUrl = `https://perchance.org/api/generate?generator=${encodeURIComponent(generatorName)}&count=1`;
+    
+    // CORS proxy that works with perchance.org
+    const proxyUrl = `https://corsproxy.io/?${encodeURIComponent(directApiUrl)}`;
+
+    generateBtn.disabled = true;
+    generateBtn.textContent = '⏳ Loading...';
+    outputDiv.innerHTML = '🌀 Fetching via proxy...';
+
+    try {
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), 10000);
+      const response = await fetch(proxyUrl, { signal: controller.signal });
+      clearTimeout(timeoutId);
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+
+      const data = await response.json();
+
+      if (Array.isArray(data) && data.length > 0 && typeof data[0] === 'string') {
+        outputDiv.innerHTML = `<div class="success">✨ ${escapeHtml(data[0])}</div>`;
+      } else {
+        outputDiv.innerHTML = '<span class="error">⚠️ Unexpected response format. Try another generator.</span>';
+      }
+    } catch (err) {
+      console.error(err);
+      let msg = err.message;
+      if (err.name === 'AbortError') msg = 'Timeout – proxy/server took too long.';
+      else if (msg.includes('Failed to fetch')) msg = 'Network error – proxy may be blocked. Try reloading or use a different proxy.';
+      outputDiv.innerHTML = `<span class="error">❌ ${escapeHtml(msg)}</span>`;
+    } finally {
+      generateBtn.disabled = false;
+      generateBtn.textContent = 'Generate';
+    }
+  }
+
+  function escapeHtml(str) {
+    return str.replace(/[&<>]/g, function(m) {
+      if (m === '&') return '&amp;';
+      if (m === '<') return '&lt;';
+      if (m === '>') return '&gt;';
+      return m;
+    });
+  }
+
+  generateBtn.addEventListener('click', fetchFromPerchance);
+  generatorInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') fetchFromPerchance(); });
+</script>
+</body>
+</html>
