added basic frontend

Sarthak5598 · Aug 18, 2024 · 3f05b26 · 3f05b26
1 parent 25c16ef
commit 3f05b26
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 4 deletions.
diff --git a/poetry.lock b/poetry.lock
diff --git a/pyproject.toml b/pyproject.toml
@@ -8,6 +8,7 @@ readme = "README.md"
 [tool.poetry.dependencies]
 python = "^3.11"
 django = "^5.1"
+gunicorn = "^23.0.0"
 
 
 [build-system]

diff --git a/url_short/templates/base.html b/url_short/templates/base.html
diff --git a/url_short/templates/home.html b/url_short/templates/home.html
@@ -3,9 +3,98 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>URL Shortener</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f4f4f4;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+        }
+
+        .container {
+            background-color: #fff;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            width: 400px;
+            text-align: center;
+        }
+
+        h1 {
+            color: #333;
+            margin-bottom: 20px;
+        }
+
+        form {
+            display: flex;
+            flex-direction: column;
+        }
+
+        input[type="url"] {
+            padding: 10px;
+            margin-bottom: 20px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            font-size: 16px;
+        }
+
+        button {
+            padding: 10px;
+            border: none;
+            border-radius: 5px;
+            background-color: #28a745;
+            color: #fff;
+            font-size: 16px;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+
+        button:hover {
+            background-color: #218838;
+        }
+
+        .result {
+            margin-top: 20px;
+        }
+
+        .short-url {
+            color: #007bff;
+            font-weight: bold;
+            word-break: break-all;
+        }
+    </style>
 </head>
 <body>
-    HEYYYYYYYYYYYYYYYYYYYYYYYYYYYY
+
+    <div class="container">
+        <h1>URL Shortener</h1>
+        <form id="url-form">
+            <input type="url" id="url-input" placeholder="Enter your URL here" required>
+            <button type="submit">Shorten URL</button>
+        </form>
+
+        <div class="result" id="result" style="display: none;">
+            <p>Your shortened URL:</p>
+            <p class="short-url" id="short-url"></p>
+        </div>
+    </div>
+
+    <script>
+        document.getElementById('url-form').addEventListener('submit', function(e) {
+            e.preventDefault();
+
+            const urlInput = document.getElementById('url-input').value;
+            const shortUrl = "https://short.url/" + Math.random().toString(36).substring(7);  // Simulated short URL generation
+
+            document.getElementById('short-url').textContent = shortUrl;
+            document.getElementById('result').style.display = 'block';
+        });
+    </script>
+
 </body>
-</html>
+</html>