137 lines
5.4 KiB
HTML
137 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Nginx Cache Proxy</title>
|
|
<style>
|
|
:root {
|
|
--bg: #ffffff;
|
|
--text: #333333;
|
|
--heading: #007cba;
|
|
--border: #007cba;
|
|
--code-bg: #f4f4f4;
|
|
--code-inline-bg: #f4f4f4;
|
|
--pre-bg: #2d2d2d;
|
|
--pre-text: #f8f8f2;
|
|
--copy-bg: #e8f4fd;
|
|
--copy-border: #007cba;
|
|
--success: #28a745;
|
|
--error: #dc3545;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg: #1a1a1a;
|
|
--text: #e0e0e0;
|
|
--heading: #58a6ff;
|
|
--border: #58a6ff;
|
|
--code-bg: #2d2d2d;
|
|
--code-inline-bg: #3d3d3d;
|
|
--pre-bg: #0d0d0d;
|
|
--copy-bg: #1c3d5e;
|
|
--copy-border: #58a6ff;
|
|
--success: #3fb950;
|
|
--error: #f85149;
|
|
}
|
|
}
|
|
|
|
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; line-height: 1.6; color: var(--text); background: var(--bg); }
|
|
h1 { border-bottom: 2px solid var(--border); padding-bottom: 10px; color: var(--text); }
|
|
h2 { color: var(--heading); margin-top: 30px; }
|
|
h3 { color: var(--text); opacity: 0.8; }
|
|
code { background: var(--code-inline-bg); padding: 2px 6px; border-radius: 3px; font-family: "Consolas", "Monaco", monospace; font-size: 0.9em; color: var(--text); }
|
|
pre { background: var(--pre-bg); color: var(--pre-text); padding: 15px; border-radius: 5px; overflow-x: auto; }
|
|
pre code { background: none; padding: 0; color: inherit; }
|
|
.copy-section { background: var(--copy-bg); padding: 20px; border-radius: 8px; margin: 20px 0; border-left: 4px solid var(--copy-border); }
|
|
.copy-section h3 { margin-top: 0; color: var(--text); }
|
|
.copy-section p { color: var(--text); }
|
|
button { background: var(--heading); color: white; border: none; padding: 12px 24px; cursor: pointer; border-radius: 5px; font-size: 14px; font-weight: 600; }
|
|
button:hover { filter: brightness(0.9); }
|
|
.status { margin-top: 10px; font-size: 14px; }
|
|
.status.success { color: var(--success); }
|
|
.status.error { color: var(--error); }
|
|
ul { line-height: 1.8; }
|
|
li { color: var(--text); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Nginx Cache Proxy</h1>
|
|
<p>Proxy and cache any HTTP/HTTPS URL with automatic caching.</p>
|
|
|
|
<div class="copy-section">
|
|
<h3>Quick Copy</h3>
|
|
<p>Copy this proxy URL with <code>?url=</code> appended, then paste any URL after it:</p>
|
|
<button onclick="copyProxyUrl()">Copy Proxy URL</button>
|
|
<div id="status" class="status"></div>
|
|
</div>
|
|
|
|
<h2>Usage Examples</h2>
|
|
|
|
<h3>Basic Proxy (Cached)</h3>
|
|
<pre><code id="basicExample">Loading...</code></pre>
|
|
|
|
<h3>Skip Cache</h3>
|
|
<pre><code id="nocacheExample">Loading...</code></pre>
|
|
|
|
<h2>Features</h2>
|
|
<ul>
|
|
<li>Always caches <strong>2xx</strong> status codes for <strong>1 year</strong></li>
|
|
<li>Cache size: <strong>100GB</strong> max</li>
|
|
<li><code>X-Cache-Status</code> header shows cache hit/miss</li>
|
|
<li><code>X-NoCache</code> header bypasses cache</li>
|
|
<li>Interactive web interface</li>
|
|
</ul>
|
|
|
|
<script>
|
|
function getBaseUrl() {
|
|
const protocol = window.location.protocol;
|
|
const hostname = window.location.hostname;
|
|
const port = window.location.port;
|
|
let baseUrl = protocol + '//' + hostname;
|
|
|
|
if ((protocol === 'http:' && port !== '80' && port !== '') ||
|
|
(protocol === 'https:' && port !== '443' && port !== '')) {
|
|
baseUrl += ':' + port;
|
|
}
|
|
return baseUrl;
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const base = getBaseUrl();
|
|
|
|
document.getElementById('basicExample').textContent =
|
|
'curl "' + base + '/?url=https://api.example.com/data"';
|
|
|
|
document.getElementById('nocacheExample').textContent =
|
|
'curl -H "X-NoCache: 1" "' + base + '/?url=https://api.example.com/data"';
|
|
});
|
|
|
|
function copyProxyUrl() {
|
|
const proxyUrl = window.location.href + '?url=';
|
|
const statusEl = document.getElementById('status');
|
|
|
|
navigator.clipboard.writeText(proxyUrl).then(() => {
|
|
statusEl.className = 'status success';
|
|
statusEl.textContent = 'Copied: ' + proxyUrl;
|
|
}).catch(err => {
|
|
// Fallback for older browsers
|
|
const textArea = document.createElement('textarea');
|
|
textArea.value = proxyUrl;
|
|
textArea.style.position = 'fixed';
|
|
textArea.style.opacity = '0';
|
|
document.body.appendChild(textArea);
|
|
textArea.select();
|
|
try {
|
|
document.execCommand('copy');
|
|
statusEl.className = 'status success';
|
|
statusEl.textContent = 'Copied: ' + proxyUrl;
|
|
} catch (e) {
|
|
statusEl.className = 'status error';
|
|
statusEl.textContent = 'Copy failed. URL: ' + proxyUrl;
|
|
}
|
|
document.body.removeChild(textArea);
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|