Add index.html for Perchance Generator UI

Rbell1216 · web-flow · commit 7b95ffa1e3cf · 2026-04-06T21:40:16.000-05:00
Creates a new HTML file for the Perchance Generator with a modern API integration and user interface.
diff --git a/index.html b/index.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Perchance Generator – Modern API</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; }
+    hr { margin: 1.5rem 0; }
+    code { background: #eee; padding: 0.2rem 0.4rem; border-radius: 8px; }
+  </style>
+</head>
+<body>
+<h1>🎲 Perchance Generator (fixed API)</h1>
+<p>Uses official <code>/api/generate</code> endpoint – no CORS proxy needed.</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>✅ Fixed: uses modern <code>https://perchance.org/api/generate?generator=...&count=1</code><br>
+🔁 Removed deprecated <code>generateList.php</code> – handles CORS & JSON correctly.</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;
+    }
+
+    // Modern API endpoint (supports CORS, returns JSON array)
+    const url = `https://perchance.org/api/generate?generator=${encodeURIComponent(generatorName)}&count=1`;
+
+    generateBtn.disabled = true;
+    generateBtn.textContent = '⏳ Loading...';
+    outputDiv.innerHTML = '🌀 Fetching from Perchance...';
+
+    try {
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), 8000);
+      const response = await fetch(url, { signal: controller.signal });
+      clearTimeout(timeoutId);
+
+      if (!response.ok) {
+        if (response.status === 404) {
+          throw new Error(`Generator "${generatorName}" not found. Check the name.`);
+        }
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+
+      const data = await response.json();
+
+      // Expected format: array of strings, e.g. ["result text"]
+      if (Array.isArray(data) && data.length > 0 && typeof data[0] === 'string') {
+        outputDiv.innerHTML = `<div>✨ ${escapeHtml(data[0])}</div>`;
+      } else {
+        console.warn('Unexpected API response:', data);
+        outputDiv.innerHTML = '<span class="error">⚠️ Generator returned unexpected format. Try another generator.</span>';
+      }
+    } catch (err) {
+      console.error(err);
+      let msg = err.message;
+      if (err.name === 'AbortError') msg = 'Timeout – server took too long.';
+      else if (msg.includes('Failed to fetch')) msg = 'Network error. Check connection or CORS? (Perchance supports CORS, but your browser may block it)';
+      outputDiv.innerHTML = `<span class="error">❌ ${escapeHtml(msg)}</span>`;
+    } finally {
+      generateBtn.disabled = false;
+      generateBtn.textContent = 'Generate';
+    }
+  }
+
+  // simple XSS protection
+  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>
