Clone
export function dashboardHtml() {
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard - QRurl</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; background: #f5f5f5; }
header { background: #000; color: white; padding: 1rem 0; margin-bottom: 2rem; }
header .container { display: flex; justify-content: space-between; align-items: center; }
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
h1 { font-size: 1.5rem; }
nav a { color: white; text-decoration: none; margin-left: 1rem; }
nav a:hover { text-decoration: underline; }
.card { background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 2rem; }
h2 { margin-bottom: 1rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.form-group { margin-bottom: 1rem; }
label { display: block; margin-bottom: 0.5rem; font-weight: 500; }
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; }
button:hover { background: #333; }
.link-item { background: #f9f9f9; padding: 1rem; border-radius: 4px; margin-bottom: 1rem; }
.link-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 0.5rem; }
.link-title { font-weight: 600; }
.link-actions { display: flex; gap: 0.5rem; }
.link-actions button { padding: 0.25rem 0.75rem; font-size: 0.875rem; }
.link-url { color: #666; font-size: 0.875rem; margin-bottom: 0.25rem; }
.link-stats { color: #999; font-size: 0.875rem; }
.modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); align-items: center; justify-content: center; }
.modal.show { display: flex; }
.modal-content { background: white; padding: 2rem; border-radius: 8px; max-width: 400px; width: 90%; text-align: center; }
.modal-content img { max-width: 100%; margin: 1rem 0; }
.modal-content button { margin-top: 1rem; }
</style>
</head>
<body>
<header>
<div class="container">
<h1>QRurl Dashboard</h1>
<nav>
<a href="/">Home</a>
<a href="/api/auth/logout">Logout</a>
</nav>
</div>
</header>
<div class="container">
<div class="card">
<h2>Create New Link</h2>
<form id="createForm">
<div class="form-grid">
<div class="form-group">
<label for="url">URL</label>
<input type="url" id="url" required placeholder="https://example.com">
</div>
<div class="form-group">
<label for="name">Name (optional)</label>
<input type="text" id="name" placeholder="My Link">
</div>
</div>
<div class="form-group">
<label for="customSlug">Custom Slug (optional)</label>
<input type="text" id="customSlug" placeholder="my-custom-slug" pattern="[a-zA-Z0-9-]+">
</div>
<button type="submit">Create Short Link</button>
</form>
</div>
<div class="card">
<h2>Your Links</h2>
<div id="linksList"></div>
</div>
</div>
<div id="qrModal" class="modal">
<div class="modal-content">
<h3>QR Code</h3>
<img id="qrImage" alt="QR Code">
<button onclick="closeModal()">Close</button>
</div>
</div>
<script>
let links = [];
async function loadLinks() {
try {
const response = await fetch('/api/links');
if (response.ok) {
links = await response.json();
renderLinks();
}
} catch (error) {
console.error('Failed to load links:', error);
}
}
function renderLinks() {
const container = document.getElementById('linksList');
if (links.length === 0) {
container.innerHTML = '<p>No links yet. Create your first one above!</p>';
return;
}
container.innerHTML = links.map(link => \`
<div class="link-item">
<div class="link-header">
<div>
<div class="link-title">\${link.name || 'Untitled'}</div>
<div class="link-url">\${window.location.origin}/\${link.slug}</div>
<div class="link-url">→ \${link.url}</div>
</div>
<div class="link-actions">
<button onclick="copyLink('\${link.slug}')">Copy</button>
<button onclick="showQR('\${link.slug}')">QR Code</button>
</div>
</div>
<div class="link-stats">\${link.clicks || 0} clicks</div>
</div>
\`).join('');
}
document.getElementById('createForm').addEventListener('submit', async (e) => {
e.preventDefault();
const data = {
url: document.getElementById('url').value,
name: document.getElementById('name').value,
customSlug: document.getElementById('customSlug').value
};
try {
const response = await fetch('/api/links', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
if (response.ok) {
document.getElementById('createForm').reset();
loadLinks();
} else {
const error = await response.json();
alert(error.error || 'Failed to create link');
}
} catch (error) {
alert('Network error');
}
});
function copyLink(slug) {
const url = window.location.origin + '/' + slug;
navigator.clipboard.writeText(url).then(() => {
alert('Copied to clipboard!');
});
}
function showQR(slug) {
document.getElementById('qrImage').src = '/api/qr/' + slug;
document.getElementById('qrModal').classList.add('show');
}
function closeModal() {
document.getElementById('qrModal').classList.remove('show');
}
// Load links on page load
loadLinks();
</script>
</body>
</html>`;
}