From de380d13b5d6cab618279540356f826f44d79582 Mon Sep 17 00:00:00 2001
From: Che140401 <karandechetan106@gmail.com>
Date: Thu, 31 Oct 2024 17:15:48 +0530
Subject: [PATCH] Fixed responsive header and footer with login signup page

---
 static/base.css            |   0
 templates/base.html        |  67 ++++++++++++++
 templates/generateurl.html | 145 ++++++++++++++++++++++++------
 templates/index.html       |  23 ++---
 templates/stats.html       | 175 ++++++++++++++++++++++++++-----------
 5 files changed, 322 insertions(+), 88 deletions(-)
 create mode 100644 static/base.css

diff --git a/static/base.css b/static/base.css
new file mode 100644
index 0000000..e69de29
diff --git a/templates/base.html b/templates/base.html
index 871dc42..1669c84 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -8,8 +8,11 @@
   <title>{%block title %} {% endblock %} - trim.lol</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="stylesheet" href="../static/base.css">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha384-k6RqeWeci5ZR/Lv4MR0sA0FfDOM4MzPT4nVnI8qz1iRjPv2L5/8Gbt5c+G5dT1" crossorigin="anonymous">
+
   <style>
     @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");
 
@@ -20,6 +23,24 @@
     .errorTrue {
       display: block !important;
     }
+ 
+    /* Optional: Slide-in effect for mobile menu */
+@keyframes slideIn {
+  from {
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.slide-in {
+  animation: slideIn 0.3s ease forwards;
+}
+
+
   </style>
 </head>
 
@@ -31,5 +52,51 @@
   </div>
   {% block script %} {% endblock %}
 </body>
+<script>
+    // JavaScript for hamburger menu functionality
+document.addEventListener("DOMContentLoaded", function () {
+  const hamburger = document.getElementById("hamburger");
+  const mobileMenu = document.getElementById("mobileMenu");
+
+  // Toggle the 'hidden' class on the mobile menu
+  hamburger.addEventListener("click", function () {
+    mobileMenu.classList.toggle("hidden");
+
+    // Optional: Add an open/close animation
+    mobileMenu.classList.toggle("slide-in");
+  });
+});
+  // Change header style on scroll
+  document.addEventListener("DOMContentLoaded", function () {
+  const themeToggle = document.getElementById("theme-toggle");
+  const body = document.body;
+
+  // Check for saved user preference
+  const currentTheme = localStorage.getItem("theme");
+  if (currentTheme) {
+    body.classList.add(currentTheme);
+  } else {
+    // Default to light mode
+    body.classList.add("light-mode");
+  }
+
+  themeToggle.addEventListener("click", () => {
+    // Toggle between light and dark modes
+    if (body.classList.contains("light-mode")) {
+      body.classList.remove("light-mode");
+      body.classList.add("dark-mode");
+      themeToggle.innerHTML = '<i class="fas fa-moon text-2xl"></i>'; // Change icon to moon
+      localStorage.setItem("theme", "dark-mode");
+    } else {
+      body.classList.remove("dark-mode");
+      body.classList.add("light-mode");
+      themeToggle.innerHTML = '<i class="fas fa-sun text-2xl"></i>'; // Change icon to sun
+      localStorage.setItem("theme", "light-mode");
+    }
+  });
+});
+
+
+</script>
 
 </html>
diff --git a/templates/generateurl.html b/templates/generateurl.html
index 86d4ba7..65dec15 100644
--- a/templates/generateurl.html
+++ b/templates/generateurl.html
@@ -1,37 +1,75 @@
+<header class="header-glass shadow-md mb-24 sticky top-0 z-50 transition-all duration-300 ease-in-out">
+  <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
+    <div class="flex items-center space-x-2">
+      <img src="/static/images/favicon.svg" alt="Logo" class="h-8 w-auto">
+      <h1 class="text-gray-100 text-lg font-semibold">A URL Shortener</h1>
+    </div>
+
+    <!-- Hamburger Menu for Mobile -->
+    <button id="hamburger" class="text-gray-200 md:hidden focus:outline-none">
+      <i class="fas fa-bars text-2xl"></i>
+    </button>
+
+    <!-- Navigation Links -->
+    <nav id="navMenu" class="hidden md:flex space-x-4">
+      <a href="/generateurl" class="text-white bg-blue-600 hover:bg-blue-500 transition ease-in-out duration-200 px-4 py-2 rounded-lg font-semibold">
+        Generate URL
+      </a>
+      <a href="/stats" class="text-white bg-blue-600 hover:bg-blue-500 transition ease-in-out duration-200 px-4 py-2 rounded-lg font-semibold">
+        View Stats
+      </a>
+      <a href="/logout" class="flex items-center text-white bg-red-600 hover:bg-red-500 transition ease-in-out duration-200 px-4 py-2 rounded-lg font-semibold space-x-2">
+        <i class="fas fa-arrow-right-from-bracket"></i>
+        <span>Log Out</span>
+      </a>
+    </nav>
+  </div>
+
+  <!-- Mobile Menu -->
+  <nav id="mobileMenu" class="md:hidden flex flex-col space-y-2 mt-4 px-4 hidden mb-16">
+    <a href="/generateurl" class="text-white bg-blue-600 hover:bg-blue-500 transition ease-in-out duration-200 px-4 py-2 rounded-lg font-semibold">
+      Generate URL
+    </a>
+    <a href="/stats" class="text-white bg-blue-600 hover:bg-blue-500 transition ease-in-out duration-200 px-4 py-2 rounded-lg font-semibold">
+      View Stats
+    </a>
+    <a href="/logout" class="flex items-center text-white bg-red-600 hover:bg-red-500 transition ease-in-out duration-200 px-4 py-2 rounded-lg font-semibold space-x-2">
+      <i class="fas fa-arrow-right-from-bracket"></i>
+      <span>Log Out</span>
+    </a>
+  </nav>
+</header>
+
+
+
 {% extends 'base.html' %} {%block content %}
-<div
-  class="p-8 px-10 md:p-10 2xl:p-16 m-3 rounded-xl w-11/12 md:3/4 lg:w-1/2 2xl:w-2/5 flex items-center flex-col gap-3 bg-zinc-900">
-  <div class="flex gap-3 justify-between items-center w-full">
-    <h1 class="text-2xl font-bold">{%block title%}Generate URL{%endblock%}</h1>
+<div class="p-6 md:p-10 lg:p-12 mx-3 rounded-xl w-full max-w-lg flex items-center flex-col gap-4 bg-zinc-900">
+  <div class="flex flex-col md:flex-row justify-between items-center w-full">
+    <h1 class="text-2xl font-bold text-center md:text-left mb-3 md:mb-0">{% block title %}Generate URL{% endblock %}</h1>
     <a href="/stats"
-      class="text-center bg-blue-700 hover:bg-blue-800 transition ease-in-out duration-200 text-white rounded-lg p-2 px-8">Check
-      Statistics</a>
+      class="text-center bg-blue-700 hover:bg-blue-800 transition ease-in-out duration-200 text-white rounded-lg p-2 px-4 md:px-6">Check Statistics</a>
   </div>
   <hr class="w-full border-t-2 opacity-25 mb-3 border-zinc-400" />
-  <form method="post" action class="flex items-center flex-col w-full" id="generateURLForm">
+  <form method="post" action="" class="flex items-center flex-col w-full" id="generateURLForm">
     <div class="mb-3 w-full">
-      <label>Original URL</label><br />
+      <label class="block text-sm font-medium mb-1">Original URL</label>
       <input type="text" name="long_url" id="url" placeholder="Enter URL to be shortened"
         class="rounded-lg p-2 w-full bg-zinc-800" value="{{old_url}}" />
-      <p class="text-sm text-red-500 hidden {{error_url}}">
-        {{error_url_statement}}
-      </p>
+      <p class="text-sm text-red-500 hidden {{error_url}}">{{error_url_statement}}</p>
     </div>
-    <div class="mb-3 xl:w-4/5 w-11/12">
-      <label>Custom URL</label>
+    <div class="mb-3 w-full">
+      <label class="block text-sm font-medium mb-1">Custom URL</label>
       <input name="custom_url" type="text" id="custom_url" class="rounded-lg p-2 bg-zinc-800 w-full"
         placeholder="Enter Custom URL (optional)" value="{{custom_url}}" />
-      <p class="text-sm text-red-500 hidden {{error_custom_url}}">
-        {{error_custom_url_statement}}
-      </p>
+      <p class="text-sm text-red-500 hidden {{error_custom_url}}">{{error_custom_url_statement}}</p>
     </div>
     <button type="submit" value="submit" id="shorten"
-      class="text-center bg-blue-700 hover:bg-blue-800 cursor-pointer mb-5 w-3/4 xl:w-1/2 transition ease-in-out duration-200 text-white rounded-lg p-2 px-8">
+      class="text-center bg-blue-700 hover:bg-blue-800 cursor-pointer mb-5 w-full transition ease-in-out duration-200 text-white rounded-lg p-2">
       Shorten URL 🔗
     </button>
-    <hr class="border-top border-zinc-700 w-full p-2" />
+    <hr class="border-t border-zinc-700 w-full p-2" />
     <h1 class="text-xl mb-3 font-bold">Copy your custom URL</h1>
-    <div class="mb-3 rounded-lg w-11/12 xl:w-3/4 p-2 pl-4 bg-zinc-800 flex justify-between">
+    <div class="mb-3 rounded-lg w-full p-2 pl-4 bg-zinc-800 flex justify-between">
       <input type="url" id="output" disabled placeholder="Returns your new shortened URL"
         class="bg-transparent cursor-not-allowed w-3/4" value="{{new_url}}" />
       <button type="button" onclick="return copyContent()" id="copyButton"
@@ -45,22 +83,79 @@ <h1 class="text-xl mb-3 font-bold">Copy your custom URL</h1>
     </div>
   </form>
 </div>
-<div class="flex flex-col justify-center items-center">
+
+<div class="flex flex-col justify-center items-center mt-6">
   <a href="/logout"
-    class="mb-3 text-black flex gap-2 p-3 rounded-lg items-center duration-300 transition ease-in-out bg-blue-200 hover:bg-blue-300"><svg
-      xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#000" viewBox="0 0 256 256">
+    class="mb-3 text-black flex gap-2 p-3 rounded-lg items-center duration-300 transition ease-in-out bg-blue-200 hover:bg-blue-300">
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#000" viewBox="0 0 256 256">
       <path
         d="M120,216a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H56V208h56A8,8,0,0,1,120,216Zm109.66-93.66-40-40A8,8,0,0,0,176,88v32H112a8,8,0,0,0,0,16h64v32a8,8,0,0,0,13.66,5.66l40-40A8,8,0,0,0,229.66,122.34Z">
       </path>
-    </svg>Logout</a>
-  <p class="text-blue-200 text-center px-2"><a href="https://github.com/averageblank/urlshortener" class="underline"
-      target="_blank">Github</a>. Developed By
+    </svg>
+    Logout
+  </a>
+  <p class="text-blue-200 text-center px-2">
+    <a href="https://github.com/averageblank/urlshortener" class="underline" target="_blank">Github</a>. Developed By
     <a href="https://github.com/AverageBlank" target="_blank" class="underline">AverageBlank</a> and <a
       href="https://github.com/AalokeCode" target="_blank" class="underline">AalokeCode</a>
   </p>
 </div>
+
+
+
 {%endblock%} {%block script %}
+<footer class="bg-gray-900 text-white py-6">
+  <div class="max-w-7xl mx-auto px-4">
+    <div class="flex flex-col md:flex-row justify-between items-center my-8">
+      <!-- Logo Section -->
+      <div class="flex items-center mb-4 md:mb-0 md:mt-0 mt-24 md:mt-0">
+        <img src="/static/images/favicon.svg" alt="Logo" class="h-10 w-auto mr-3" />
+        <span class="text-lg font-semibold">A URL Shortener</span>
+      </div>
+
+      <!-- Navigation Links -->
+      <nav class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-8 mb-4 md:mb-0">
+        <a href="/about" class="hover:text-blue-400 transition duration-200">About Us</a>
+        <a href="/privacy" class="hover:text-blue-400 transition duration-200">Privacy Policy</a>
+        <a href="/terms" class="hover:text-blue-400 transition duration-200">Terms of Service</a>
+      </nav>
+    </div>
+
+    <div class="border-t border-gray-700 mt-4 pt-4 text-center">
+      <p class="text-sm">&copy; 2024 Trim.lol. All rights reserved.</p>
+      <div class="flex justify-center space-x-4 mt-2">
+        <a href="#" class="text-blue-400 hover:underline">Twitter</a>
+        <a href="#" class="text-blue-400 hover:underline">Facebook</a>
+        <a href="#" class="text-blue-400 hover:underline">Instagram</a>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+
+
+
+
 <script>
+
+  // JavaScript for hamburger menu functionality
+document.addEventListener("DOMContentLoaded", function () {
+  const hamburger = document.getElementById("hamburger");
+  const mobileMenu = document.getElementById("mobileMenu");
+
+  // Toggle the 'hidden' class on the mobile menu
+  hamburger.addEventListener("click", function () {
+    mobileMenu.classList.toggle("hidden");
+
+    // Optional: Add an open/close animation
+    mobileMenu.classList.toggle("slide-in");
+  });
+});
+
+
   // sleep function
   function sleep(ms) {
     return new Promise((resolve) => setTimeout(resolve, ms));
diff --git a/templates/index.html b/templates/index.html
index d90d2c7..f5f6520 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,23 +1,24 @@
-{%extends 'base.html'%}
-{%block content %}
-<div class="p-20 m-3 rounded-xl flex items-center flex-col gap-3 bg-zinc-900">
+{% extends 'base.html' %}
+{% block content %}
+
+<div class="p-6 sm:p-10 md:p-14 lg:p-20 m-3 rounded-xl flex items-center flex-col gap-3 bg-zinc-900">
     <div class="text-center">
-        <span class="hidden">{%block title%}trim.lol{%endblock%}</span>
-        <h1 class="text-3xl font-bold text-center">A URL Shortener programmed in python</h1>
+        <span class="hidden">{% block title %}trim.lol{% endblock %}</span>
+        <h1 class="text-2xl sm:text-3xl font-bold text-center">A URL Shortener Programmed in Python</h1>
         <p class="text-sm mb-3 text-zinc-300">Built using Flask & MongoDB</p>
     </div>
-    <div class="flex gap-1 items-center flex-col md:flex-row">
+    <div class="flex gap-2 items-center flex-col md:flex-row">
         <a href="/login"
-            class="text-center bg-blue-700 hover:bg-blue-800 transition ease-in-out duration-200 text-white rounded-lg p-2 px-8">Log
+            class="text-center bg-blue-700 hover:bg-blue-800 transition ease-in-out duration-200 text-white rounded-lg p-2 px-6 sm:px-8">Log
             in</a>
         <a href="/signup"
-            class="text-center bg-blue-700 hover:bg-blue-800 transition ease-in-out duration-200 text-white rounded-lg p-2 px-8">Sign
+            class="text-center bg-blue-700 hover:bg-blue-800 transition ease-in-out duration-200 text-white rounded-lg p-2 px-6 sm:px-8">Sign
             Up</a>
     </div>
 </div>
-<p class="text-blue-200 text-center px-2"><a href="https://github.com/averageblank/urlshortener" class="underline"
-        target="_blank">Github</a>. Developed By
+<p class="text-blue-200 text-center px-2 mt-4">
+    <a href="https://github.com/averageblank/urlshortener" class="underline" target="_blank">Github</a>. Developed By
     <a href="https://github.com/AverageBlank" target="_blank" class="underline">AverageBlank</a> and <a
         href="https://github.com/AalokeCode" target="_blank" class="underline">AalokeCode</a>
 </p>
-{%endblock%}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/stats.html b/templates/stats.html
index ab2aa82..dd6bba8 100644
--- a/templates/stats.html
+++ b/templates/stats.html
@@ -1,74 +1,145 @@
+<header class="header-glass shadow-md mb-24 sticky top-0 z-50 transition-all duration-300 ease-in-out">
+  <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
+    <div class="flex items-center space-x-2">
+      <img src="/static/images/favicon.svg" alt="Logo" class="h-8 w-auto">
+      <h1 class="text-gray-100 text-lg font-semibold">A URL Shortener</h1>
+    </div>
+
+    <!-- Hamburger Menu for Mobile -->
+    <button id="hamburger" class="text-gray-200 md:hidden focus:outline-none">
+      <i class="fas fa-bars text-2xl"></i>
+    </button>
+
+    <!-- Navigation Links -->
+    <nav id="navMenu" class="hidden md:flex space-x-4">
+      <a href="/generateurl" class="text-white bg-blue-600 hover:bg-blue-500 transition ease-in-out duration-200 px-4 py-2 rounded-lg font-semibold">
+        Generate URL
+      </a>
+      <a href="/stats" class="text-white bg-blue-600 hover:bg-blue-500 transition ease-in-out duration-200 px-4 py-2 rounded-lg font-semibold">
+        View Stats
+      </a>
+      <a href="/logout" class="flex items-center text-white bg-red-600 hover:bg-red-500 transition ease-in-out duration-200 px-4 py-2 rounded-lg font-semibold space-x-2">
+        <i class="fas fa-arrow-right-from-bracket"></i>
+        <span>Log Out</span>
+      </a>
+    </nav>
+  </div>
+
+  <!-- Mobile Menu -->
+  <nav id="mobileMenu" class="md:hidden flex flex-col space-y-2 mt-4 px-4 hidden mb-16">
+    <a href="/generateurl" class="text-white bg-blue-600 hover:bg-blue-500 transition ease-in-out duration-200 px-4 py-2 rounded-lg font-semibold">
+      Generate URL
+    </a>
+    <a href="/stats" class="text-white bg-blue-600 hover:bg-blue-500 transition ease-in-out duration-200 px-4 py-2 rounded-lg font-semibold">
+      View Stats
+    </a>
+    <a href="/logout" class="flex items-center text-white bg-red-600 hover:bg-red-500 transition ease-in-out duration-200 px-4 py-2 rounded-lg font-semibold space-x-2">
+      <i class="fas fa-arrow-right-from-bracket"></i>
+      <span>Log Out</span>
+    </a>
+  </nav>
+</header>
 {%extends 'base.html' %}
 
 {%block content %}
-<div class="p-5 md:p-10 2xl:p-20 w-full md:w-5/6 m-3 rounded-xl flex items-center flex-col gap-3 bg-zinc-900">
+<div class="p-5 md:p-10 2xl:p-20 w-full md:w-5/6 mx-3 rounded-xl flex flex-col gap-3 bg-zinc-900">
   <div class="flex flex-col justify-center items-center w-full md:flex-row md:justify-between">
-    <h1 class="text-2xl font-bold">{%block title%}Statistics{%endblock%}</h1>
-    <div class="flex gap-3 items-center">
-      <form method="post" action class="flex items-center justify-center">
+    <h1 class="text-2xl font-bold text-center md:text-left">{% block title %}Statistics{% endblock %}</h1>
+    <div class="flex gap-3 items-center mt-3 md:mt-0">
+      <form method="post" action class="flex items-center">
         <button type="submit" value="submit" class="flex items-center h-full justify-center">
           <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#fff" viewBox="0 0 256 256">
-            <path
-              d="M224,48V96a8,8,0,0,1-8,8H168a8,8,0,0,1,0-16h28.69L182.06,73.37a79.56,79.56,0,0,0-56.13-23.43h-.45A79.52,79.52,0,0,0,69.59,72.71,8,8,0,0,1,58.41,61.27a96,96,0,0,1,135,.79L208,76.69V48a8,8,0,0,1,16,0ZM186.41,183.29a80,80,0,0,1-112.47-.66L59.31,168H88a8,8,0,0,0,0-16H40a8,8,0,0,0-8,8v48a8,8,0,0,0,16,0V179.31l14.63,14.63A95.43,95.43,0,0,0,130,222.06h.53a95.36,95.36,0,0,0,67.07-27.33,8,8,0,0,0-11.18-11.44Z">
-            </path>
+            <path d="M224,48V96a8,8,0,0,1-8,8H168a8,8,0,0,1,0-16h28.69L182.06,73.37a79.56,79.56,0,0,0-56.13-23.43h-.45A79.52,79.52,0,0,0,69.59,72.71,8,8,0,0,1,58.41,61.27a96,96,0,0,1,135,.79L208,76.69V48a8,8,0,0,1,16,0ZM186.41,183.29a80,80,0,0,1-112.47-.66L59.31,168H88a8,8,0,0,0,0-16H40a8,8,0,0,0-8,8v48a8,8,0,0,0,16,0V179.31l14.63,14.63A95.43,95.43,0,0,0,130,222.06h.53a95.36,95.36,0,0,0,67.07-27.33,8,8,0,0,0-11.18-11.44Z"></path>
           </svg>
         </button>
       </form>
-      <a href="/generateurl"
-        class="text-center bg-blue-700 hover:bg-blue-800 transition ease-in-out duration-200 text-white rounded-lg p-2 px-8">Generate
-        a new URL</a>
+      <a href="/generateurl" class="text-center bg-blue-700 hover:bg-blue-800 transition ease-in-out duration-200 text-white rounded-lg p-2 px-8">Generate a new URL</a>
     </div>
   </div>
   <hr class="w-full border-t-2 opacity-25 border-zinc-400" />
+
+  <!-- Scrollable Section -->
   <div class="w-full h-80 overflow-x-auto overflow-y-auto">
-    <table class="w-full text-sm text-left rtl:text-right text-zinc-400">
-      <thead class="text-xs uppercase border-b border-b-zinc-700 dark:text-zinc-400">
-        <tr>
-          <th scope="col" class="px-6 py-3">Original URL</th>
-          <th scope="col" class="px-6 py-3">Shortened URL</th>
-          <th scope="col" class="px-6 py-3">Date & Time Created</th>
-          <th scope="col" class="px-6 py-3">Clicks</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for url in urls %}
-        <tr class="odd:bg-zinc-900 even:bg-zinc-800 border-zinc-700">
-          <td class="px-6 py-4 truncate max-w-96">{{url['OriginalURL']}}</td>
-          <td class="px-6 py-4 flex items-center gap-2">
-            <span class="shortened-url block max-w-80 truncate">https://trim.lol/{{url['ShortenedURL']}}</span>
-            <button class="copy-button text-white bg-blue-700 flex items-center gap-2 hover:bg-blue-800 p-2 rounded-lg"
-              onclick="copyContent(this)" data-url="https://trim.lol/{{url['ShortenedURL']}}">Copy
-              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="fill-white" viewBox="0 0 256 256">
-                <path
-                  d="M200,32H163.74a47.92,47.92,0,0,0-71.48,0H56A16,16,0,0,0,40,48V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V48A16,16,0,0,0,200,32Zm-72,0a32,32,0,0,1,32,32H96A32,32,0,0,1,128,32Zm72,184H56V48H82.75A47.93,47.93,0,0,0,80,64v8a8,8,0,0,0,8,8h80a8,8,0,0,0,8-8V64a47.93,47.93,0,0,0-2.75-16H200Z">
-                </path>
-              </svg>
-            </button>
-          </td>
-          <td class="px-6 py-4">{{url['Timestamp']}}</td>
-          <td class="px-6 py-4">{{url['Clicks']}}</td>
-        </tr>
-        {% endfor %}
-      </tbody>
-    </table>
+    <div class="flex flex-col gap-4"> <!-- Flex container to hold all tables -->
+      <table class="w-full text-sm text-left rtl:text-right text-zinc-400">
+        <thead class="text-xs uppercase border-b border-b-zinc-700">
+          <tr>
+            <th scope="col" class="px-4 py-3">Original URL</th>
+            <th scope="col" class="px-4 py-3">Shortened URL</th>
+            <th scope="col" class="px-4 py-3">Date & Time Created</th>
+            <th scope="col" class="px-4 py-3">Clicks</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for url in urls %}
+          <tr class="odd:bg-zinc-900 even:bg-zinc-800 border-b border-b-zinc-700">
+            <td class="px-4 py-4 truncate max-w-[200px] md:max-w-[300px]">{{ url['OriginalURL'] }}</td>
+            <td class="px-4 py-4 flex items-center gap-2">
+              <span class="shortened-url block max-w-[200px] md:max-w-[300px] truncate">https://trim.lol/{{ url['ShortenedURL'] }}</span>
+              <button class="copy-button text-white bg-blue-700 flex items-center gap-2 hover:bg-blue-800 p-2 rounded-lg" onclick="copyContent(this)" data-url="https://trim.lol/{{ url['ShortenedURL'] }}">Copy
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="fill-white" viewBox="0 0 256 256">
+                  <path d="M200,32H163.74a47.92,47.92,0,0,0-71.48,0H56A16,16,0,0,0,40,48V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V48A16,16,0,0,0,200,32Zm-72,0a32,32,0,0,1,32,32H96A32,32,0,0,1,128,32Zm72,184H56V48H82.75A47.93,47.93,0,0,0,80,64v8a8,8,0,0,0,8,8h80a8,8,0,0,0,8-8V64a47.93,47.93,0,0,0-2.75-16H200Z"></path>
+                </svg>
+              </button>
+            </td>
+            <td class="px-4 py-4">{{ url['Timestamp'] }}</td>
+            <td class="px-4 py-4">{{ url['Clicks'] }}</td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+
+      <!-- You can add more tables here if needed -->
+    </div>
   </div>
 </div>
-<div class="flex flex-col justify-center items-center">
-  <a href="/logout"
-    class="mb-3 text-black flex gap-2 p-3 rounded-lg items-center duration-300 transition ease-in-out bg-blue-200 hover:bg-blue-300"><svg
-      xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#000" viewBox="0 0 256 256">
-      <path
-        d="M120,216a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H56V208h56A8,8,0,0,1,120,216Zm109.66-93.66-40-40A8,8,0,0,0,176,88v32H112a8,8,0,0,0,0,16h64v32a8,8,0,0,0,13.66,5.66l40-40A8,8,0,0,0,229.66,122.34Z">
-      </path>
-    </svg>Logout</a>
-  <p class="text-blue-200 text-center px-2"><a href="https://github.com/averageblank/urlshortener" class="underline"
-      target="_blank">Github</a>. Developed By
-    <a href="https://github.com/AverageBlank" target="_blank" class="underline">AverageBlank</a> and <a
-      href="https://github.com/AalokeCode" target="_blank" class="underline">AalokeCode</a>
+
+<div class="flex flex-col justify-center items-center mt-4">
+  <a href="/logout" class="mb-3 text-black flex gap-2 p-3 rounded-lg items-center duration-300 transition ease-in-out bg-blue-200 hover:bg-blue-300">
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#000" viewBox="0 0 256 256">
+      <path d="M120,216a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H56V208h56A8,8,0,0,1,120,216Zm109.66-93.66-40-40A8,8,0,0,0,176,88v32H112a8,8,0,0,0,0,16h64v32a8,8,0,0,0,13.66,5.66l40-40A8,8,0,0,0,229.66,122.34Z"></path>
+    </svg>
+    Logout
+  </a>
+  <p class="text-blue-200 text-center px-2">
+    <a href="https://github.com/averageblank/urlshortener" class="underline" target="_blank">Github</a>. Developed By 
+    <a href="https://github.com/AverageBlank" target="_blank" class="underline">AverageBlank</a> and 
+    <a href="https://github.com/AalokeCode" target="_blank" class="underline">AalokeCode</a>
   </p>
 </div>
+
+
+
+
 {%endblock%}
 {%block script %}
+<footer class="bg-gray-900 text-white py-6">
+  <div class="max-w-7xl mx-auto px-4">
+    <div class="flex flex-col md:flex-row justify-between items-center my-8">
+      <!-- Logo Section -->
+      <div class="flex items-center mb-4 md:mb-0 md:mt-0 mt-24 md:mt-0">
+        <img src="/static/images/favicon.svg" alt="Logo" class="h-10 w-auto mr-3" />
+        <span class="text-lg font-semibold">A URL Shortener</span>
+      </div>
+
+      <!-- Navigation Links -->
+      <nav class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-8 mb-4 md:mb-0">
+        <a href="/about" class="hover:text-blue-400 transition duration-200">About Us</a>
+        <a href="/privacy" class="hover:text-blue-400 transition duration-200">Privacy Policy</a>
+        <a href="/terms" class="hover:text-blue-400 transition duration-200">Terms of Service</a>
+      </nav>
+    </div>
+
+    <div class="border-t border-gray-700 mt-4 pt-4 text-center">
+      <p class="text-sm">&copy; 2024 Trim.lol. All rights reserved.</p>
+      <div class="flex justify-center space-x-4 mt-2">
+        <a href="#" class="text-blue-400 hover:underline">Twitter</a>
+        <a href="#" class="text-blue-400 hover:underline">Facebook</a>
+        <a href="#" class="text-blue-400 hover:underline">Instagram</a>
+      </div>
+    </div>
+  </div>
+</footer>
 <script>
   function sleep(ms) {
     return new Promise((resolve) => setTimeout(resolve, ms));