Clone
export function html() {
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QRurl - URL Shortener with QR Codes</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: system-ui, -apple-system, sans-serif; line-height: 1.6; color: #333; }
.container { max-width: 800px; margin: 0 auto; padding: 20px; }
header { background: #000; color: white; padding: 1rem 0; margin-bottom: 2rem; }
header .container { display: flex; justify-content: space-between; align-items: center; }
h1 { font-size: 1.5rem; }
nav a { color: white; text-decoration: none; margin-left: 1rem; }
nav a:hover { text-decoration: underline; }
.hero { text-align: center; padding: 3rem 0; }
.hero h2 { font-size: 2.5rem; margin-bottom: 1rem; }
.hero p { font-size: 1.2rem; color: #666; margin-bottom: 2rem; }
.form-group { margin-bottom: 1rem; }
input, button { padding: 0.75rem; font-size: 1rem; border-radius: 4px; }
input { width: 100%; border: 1px solid #ddd; }
button { background: #000; color: white; border: none; cursor: pointer; width: 100%; }
button:hover { background: #333; }
.result { margin-top: 2rem; padding: 1rem; background: #f5f5f5; border-radius: 4px; display: none; }
.result.show { display: block; }
.short-url { display: flex; gap: 1rem; margin-bottom: 1rem; }
.short-url input { flex: 1; }
.short-url button { width: auto; padding: 0.75rem 1.5rem; }
.qr-code { text-align: center; margin-top: 1rem; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-top: 4rem; }
.feature { text-align: center; }
.feature h3 { margin: 1rem 0; }
</style>
</head>
<body>
<header>
<div class="container">
<h1>QRurl</h1>
<nav>
<a href="/login">Login</a>
<a href="/dashboard">Dashboard</a>
</nav>
</div>
</header>
<div class="container">
<div class="hero">
<h2>Shorten URLs & Generate QR Codes</h2>
<p>Create short, memorable links with QR codes instantly</p>
<form id="shortenForm">
<div class="form-group">
<input type="url" id="urlInput" placeholder="Enter your long URL" required>
</div>
<button type="submit">Shorten URL</button>
</form>
<div id="result" class="result">
<div class="short-url">
<input type="text" id="shortUrl" readonly>
<button onclick="copyUrl()">Copy</button>
</div>
<div class="qr-code">
<img id="qrCode" alt="QR Code">
</div>
</div>
</div>
<div class="features">
<div class="feature">
<h3>⚡ Fast & Reliable</h3>
<p>Powered by Cloudflare's global network</p>
</div>
<div class="feature">
<h3>📊 Analytics</h3>
<p>Track clicks and engagement</p>
</div>
<div class="feature">
<h3>🎨 QR Codes</h3>
<p>Generate QR codes for easy sharing</p>
</div>
</div>
</div>
<script>
document.getElementById('shortenForm').addEventListener('submit', async (e) => {
e.preventDefault();
const url = document.getElementById('urlInput').value;
try {
const response = await fetch('/api/links', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ url })
});
const data = await response.json();
if (data.slug) {
const shortUrl = window.location.origin + '/' + data.slug;
document.getElementById('shortUrl').value = shortUrl;
document.getElementById('qrCode').src = '/api/qr/' + data.slug;
document.getElementById('result').classList.add('show');
}
} catch (error) {
alert('Failed to shorten URL');
}
});
function copyUrl() {
const input = document.getElementById('shortUrl');
input.select();
document.execCommand('copy');
alert('Copied to clipboard!');
}
</script>
</body>
</html>`;
}