uLinkShortener/web/templates/index.html
2025-04-02 08:37:01 +02:00

84 lines
3.1 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>URL Shortener</title>
<link rel="stylesheet" href="/static/css/style.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
window.stats = {{marshal .stats}};
document.addEventListener('DOMContentLoaded', () => {
createCharts();
});
</script>
<script src="/static/js/script.js"></script>
</head>
<body>
<div class="container">
<h1>URL Shortener</h1>
<div id="auth-section">
<div class="error-message" id="auth-error"></div>
<div class="form-group">
<button onclick="register()">Register</button>
<div class="form-group">
<input type="text" id="account-id" placeholder="Enter 8-digit Account ID">
<button onclick="login()">Login</button>
</div>
</div>
</div>
<div id="url-section" style="display: none;">
<div class="account-info">
<span>Account ID: <strong id="current-account-display"></strong></span>
<button onclick="logout()" class="logout-btn">Logout</button>
</div>
<div class="error-message" id="url-error"></div>
<div class="success-message" id="url-success"></div>
<div class="form-group">
<input type="url" id="url-input"
placeholder="Enter URL to shorten"
pattern="https?://.+"
title="Please enter a valid URL starting with http:// or https://"
required>
<button onclick="createShortUrl()">Shorten URL</button>
</div>
<div id="result" style="display: none;"></div>
<div id="analytics"></div>
</div>
<div id="stats">
<h2>Public Statistics</h2>
<div class="stats-grid">
<div class="stats-card">
<h3>IP Versions</h3>
<canvas id="ipChart"></canvas>
</div>
<div class="stats-card">
<h3>Operating Systems</h3>
<canvas id="osChart"></canvas>
</div>
<div class="stats-card">
<h3>Countries</h3>
<canvas id="countryChart"></canvas>
</div>
<div class="stats-card">
<h3>ISPs</h3>
<canvas id="ispChart"></canvas>
</div>
</div>
</div>
</div>
<div class="dialog-overlay" id="deleteDialog">
<div class="dialog-box">
<h3 class="dialog-title">Confirm Delete</h3>
<p class="dialog-message">Are you sure you want to delete this link? This action cannot be undone.</p>
<div class="dialog-buttons">
<button class="dialog-cancel" onclick="closeDeleteDialog()">Cancel</button>
<button class="dialog-confirm" id="confirmDelete">Delete</button>
</div>
</div>
</div>
</body>
</html>