Skip to content

Commit cd2796f

Browse files
Rbell1216Rbell1216
authored
Update title and improve CORS handling in HTML
1 parent 73eb031 commit cd2796f

1 file changed

Lines changed: 24 additions & 33 deletions

File tree

‎index.html‎

Lines changed: 24 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -2,33 +2,27 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<title>Perchance Generator – Fixed with CORS proxy</title>
5+
<title>Perchance + allOrigins (CORS fixed)</title>
66
<style>
7-
body { font-family: system-ui, Arial, sans-serif; max-width: 800px; margin: 2rem auto; padding: 0 20px; }
7+
body { font-family: system-ui, Arial, sans-serif; max-width: 800px; margin: 2rem auto; padding: 20px; }
88
#output { padding: 1rem; border: 1px solid #ccc; border-radius: 12px; min-height: 80px; margin: 1rem 0; background: #f9f9fc; }
99
button, input { padding: 8px 14px; font-size: 1rem; border-radius: 40px; border: 1px solid #aaa; }
10-
button { background: #1e2f3e; color: white; cursor: pointer; transition: 0.2s; }
10+
button { background: #1e2f3e; color: white; cursor: pointer; }
1111
button:hover { background: #0f1e2a; }
1212
.error { color: #c33; background: #ffe8e6; padding: 0.5rem; border-radius: 12px; }
1313
.success { background: #e0f2e9; padding: 0.5rem; border-radius: 12px; }
14-
hr { margin: 1.5rem 0; }
15-
code { background: #eee; padding: 0.2rem 0.4rem; border-radius: 8px; }
16-
small { display: block; margin-top: 1rem; color: #555; }
1714
</style>
1815
</head>
1916
<body>
20-
<h1>🎲 Perchance Generator (CORS fixed)</h1>
21-
<p>Uses <code>corsproxy.io</code> to bypass CORS restrictions.</p>
17+
<h1>🎲 Perchance Generator (via allOrigins)</h1>
18+
<p>Using <code>api.allorigins.win/raw</code> - reliable CORS proxy</p>
2219

23-
<label for="generatorInput"><strong>Generator name:</strong> (e.g. <code>fantasy-character</code>, <code>tavern-names</code>)</label><br>
20+
<label><strong>Generator name:</strong></label><br>
2421
<input type="text" id="generatorInput" value="fantasy-character" style="width: 70%; margin-top: 6px;">
2522

26-
<div id="output">✨ Click "Generate" to see a random result.</div>
23+
<div id="output">✨ Click Generate</div>
2724
<button id="generateBtn">Generate</button>
2825

29-
<hr>
30-
<small>🔧 Proxy: <code>https://corsproxy.io/</code> → forwards request to Perchance API. No backend required.</small>
31-
3226
<script>
3327
const generateBtn = document.getElementById('generateBtn');
3428
const generatorInput = document.getElementById('generatorInput');
@@ -37,43 +31,38 @@ <h1>🎲 Perchance Generator (CORS fixed)</h1>
3731
async function fetchFromPerchance() {
3832
const generatorName = generatorInput.value.trim();
3933
if (!generatorName) {
40-
outputDiv.innerHTML = '<span class="error">❌ Please enter a generator name.</span>';
34+
outputDiv.innerHTML = '<span class="error">❌ Enter a generator name</span>';
4135
return;
4236
}
4337

44-
// Direct API URL (without proxy – would cause CORS error)
45-
const directApiUrl = `https://perchance.org/api/generate?generator=${encodeURIComponent(generatorName)}&count=1`;
38+
// Direct Perchance API URL
39+
const directUrl = `https://perchance.org/api/generate?generator=${encodeURIComponent(generatorName)}&count=1`;
4640

47-
// CORS proxy that works with perchance.org
48-
const proxyUrl = `https://corsproxy.io/?${encodeURIComponent(directApiUrl)}`;
41+
// allOrigins proxy (RAW endpoint returns pure JSON)
42+
const proxyUrl = `https://api.allorigins.win/raw?url=${encodeURIComponent(directUrl)}`;
4943

5044
generateBtn.disabled = true;
5145
generateBtn.textContent = '⏳ Loading...';
52-
outputDiv.innerHTML = '🌀 Fetching via proxy...';
46+
outputDiv.innerHTML = '🌀 Fetching via allOrigins...';
5347

5448
try {
55-
const controller = new AbortController();
56-
const timeoutId = setTimeout(() => controller.abort(), 10000);
57-
const response = await fetch(proxyUrl, { signal: controller.signal });
58-
clearTimeout(timeoutId);
59-
49+
const response = await fetch(proxyUrl);
50+
6051
if (!response.ok) {
61-
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
52+
throw new Error(`HTTP ${response.status}`);
6253
}
6354

6455
const data = await response.json();
65-
66-
if (Array.isArray(data) && data.length > 0 && typeof data[0] === 'string') {
56+
57+
// Perchance returns array: ["result text"]
58+
if (Array.isArray(data) && data.length > 0) {
6759
outputDiv.innerHTML = `<div class="success">✨ ${escapeHtml(data[0])}</div>`;
6860
} else {
69-
outputDiv.innerHTML = '<span class="error">⚠️ Unexpected response format. Try another generator.</span>';
61+
outputDiv.innerHTML = '<span class="error">⚠️ Unexpected response format</span>';
7062
}
7163
} catch (err) {
7264
console.error(err);
73-
let msg = err.message;
74-
if (err.name === 'AbortError') msg = 'Timeout – proxy/server took too long.';
75-
else if (msg.includes('Failed to fetch')) msg = 'Network error – proxy may be blocked. Try reloading or use a different proxy.';
76-
outputDiv.innerHTML = `<span class="error">❌ ${escapeHtml(msg)}</span>`;
65+
outputDiv.innerHTML = `<span class="error">❌ ${escapeHtml(err.message)}</span>`;
7766
} finally {
7867
generateBtn.disabled = false;
7968
generateBtn.textContent = 'Generate';
@@ -90,7 +79,9 @@ <h1>🎲 Perchance Generator (CORS fixed)</h1>
9079
}
9180

9281
generateBtn.addEventListener('click', fetchFromPerchance);
93-
generatorInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') fetchFromPerchance(); });
82+
generatorInput.addEventListener('keypress', (e) => {
83+
if (e.key === 'Enter') fetchFromPerchance();
84+
});
9485
</script>
9586
</body>
9687
</html>

0 commit comments

Comments
 (0)