Add index.html

2025-01-29 00:46:18 +00:00 · 2025-01-29 00:46:18 +00:00 · ba765e8a4d
commit ba765e8a4d
parent 8735da1485
1 changed files with 134 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SMURL - Shorten My URL</title>
+    <link rel="stylesheet" href="{{ url_for('static', path='/css/styles.css') }}">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/inter-ui/3.19.3/inter.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/recharts/2.12.2/Recharts.js"></script>
+</head>
+<body>
+    <div class="container">
+        <h1 class="logo">SMURL</h1>
+        <div class="url-form">
+            <form id="shortenForm" onsubmit="return handleSubmit(event)">
+                <div class="input-group">
+                    <input 
+                        type="url" 
+                        id="urlInput" 
+                        placeholder="Paste your URL here..."
+                        required
+                    >
+                    <button type="submit">Shorten</button>
+                </div>
+            </form>
+
+            <!-- Result for new shortened URL -->
+            <div id="shortResult" class="result">
+                <p>Your shortened URL:</p>
+                <a id="shortUrl" href="#" target="_blank"></a>
+            </div>
+
+            <!-- Analytics view -->
+            <div id="analyticsResult" class="result">
+                <h2>Analytics for Original URL:</h2>
+                <a id="originalUrl" href="#" target="_blank" class="original-url"></a>
+                
+                <div class="time-range">
+                    <button data-range="day" class="active">24h</button>
+                    <button data-range="week">Week</button>
+                    <button data-range="year">Year</button>
+                    <button data-range="all">All</button>
+                </div>
+                
+                <div id="chart" class="chart"></div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        const { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } = Recharts;
+        let currentStats = null;
+
+        async function handleSubmit(event) {
+            event.preventDefault();
+            const url = document.getElementById('urlInput').value;
+            
+            try {
+                const response = await fetch('/create', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ url: url })
+                });
+                
+                const data = await response.json();
+                
+                if (response.ok) {
+                    if (data.is_analytics) {
+                        showAnalytics(data);
+                    } else {
+                        showShortUrl(data.short_code);
+                    }
+                } else {
+                    alert(data.error || 'An error occurred');
+                }
+            } catch (error) {
+                alert('An error occurred');
+            }
+        }
+
+        function showShortUrl(shortCode) {
+            const shortUrl = `${window.location.origin}/${shortCode}`;
+            document.getElementById('shortUrl').href = shortUrl;
+            document.getElementById('shortUrl').textContent = shortUrl;
+            document.getElementById('shortResult').classList.add('visible');
+            document.getElementById('analyticsResult').classList.remove('visible');
+        }
+
+        function showAnalytics(data) {
+            currentStats = data.stats;
+            document.getElementById('originalUrl').href = data.original_url;
+            document.getElementById('originalUrl').textContent = data.original_url;
+            document.getElementById('analyticsResult').classList.add('visible');
+            document.getElementById('shortResult').classList.remove('visible');
+            
+            // Show initial chart with 24h data
+            updateChart('day');
+
+            // Set up time range buttons
+            document.querySelectorAll('.time-range button').forEach(button => {
+                button.addEventListener('click', (e) => {
+                    document.querySelectorAll('.time-range button').forEach(b => 
+                        b.classList.remove('active'));
+                    e.target.classList.add('active');
+                    updateChart(e.target.dataset.range);
+                });
+            });
+        }
+
+        function updateChart(timeRange) {
+            const data = currentStats[timeRange];
+            const chartContainer = document.getElementById('chart');
+            
+            ReactDOM.render(
+                React.createElement(ResponsiveContainer, { width: '100%', height: 300 },
+                    React.createElement(LineChart, { data: data },
+                        React.createElement(XAxis, { dataKey: 'period' }),
+                        React.createElement(YAxis),
+                        React.createElement(Tooltip),
+                        React.createElement(Line, {
+                            type: 'monotone',
+                            dataKey: 'clicks',
+                            stroke: '#83a598',
+                            strokeWidth: 2,
+                            dot: false
+                        })
+                    )
+                ),
+                chartContainer
+            );
+        }
+    </script>
+</body>
+</html>