added responsiveness and added svg image

nameishyam · Dec 5, 2024 · 8cc3e34 · 8cc3e34
1 parent a016ccd
commit 8cc3e34
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 96 deletions.
diff --git a/public/image.svg b/public/image.svg
diff --git a/views/delete.ejs b/views/delete.ejs
@@ -5,30 +5,31 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Delete Account</title>
+  <link rel="icon" type="image/png" href="image.svg">
   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" />
 </head>
 
 <body class="font-sans bg-gradient-to-r from-blue-100 to-purple-100">
-  <div class="min-h-screen flex flex-col items-center pt-12">
-    <div class="w-full max-w-2xl px-4">
+  <div class="min-h-screen flex flex-col items-center pt-6 sm:pt-12">
+    <div class="w-full max-w-2xl px-4 mx-auto">
       <%- include('header.ejs') %>
 
-      <div class="bg-white shadow-2xl rounded-xl p-8 space-y-6 mb-8">
-        <h2 class="text-2xl font-bold text-center text-gray-800">Delete Account</h2>
-        <div class="text-red-600 font-bold text-xl text-center py-4">
+      <div class="bg-white shadow-xl sm:shadow-2xl rounded-lg sm:rounded-xl p-4 sm:p-8 space-y-4 sm:space-y-6 mb-6 sm:mb-8">
+        <h2 class="text-xl sm:text-2xl font-bold text-center text-gray-800">Delete Account</h2>
+        <div class="text-red-600 font-bold text-lg sm:text-xl text-center py-2 sm:py-4">
           Warning: This action cannot be undone!
         </div>
 
-        <form id="deleteForm" action="/delete" method="get" class="space-y-6">
-          <p class="text-gray-700 text-center text-lg">
+        <form id="deleteForm" action="/delete" method="get" class="space-y-4 sm:space-y-6">
+          <p class="text-gray-700 text-center text-base sm:text-lg px-2">
             Are you sure you want to delete your account?
           </p>
-          <div class="flex justify-center space-x-4">
-            <button type="submit" class="px-6 py-2 bg-gradient-to-r from-red-500 to-red-600 text-white rounded-lg hover:from-red-600 hover:to-red-700 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">
+          <div class="flex flex-col sm:flex-row justify-center space-y-3 sm:space-y-0 sm:space-x-4">
+            <button type="submit" class="w-full sm:w-auto px-4 sm:px-6 py-2.5 bg-gradient-to-r from-red-500 to-red-600 text-white rounded-lg hover:from-red-600 hover:to-red-700 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">
               Delete Account
             </button>
-            <a href="/todos" class="px-6 py-2 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-lg hover:from-green-600 hover:to-green-700 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2">
+            <a href="/todos" class="w-full sm:w-auto px-4 sm:px-6 py-2.5 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-lg text-center hover:from-green-600 hover:to-green-700 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2">
               Cancel
             </a>
           </div>

diff --git a/views/header.ejs b/views/header.ejs
@@ -5,10 +5,12 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Document</title>
+  <link rel="icon" type="image/png" href="image.svg">
+
 </head>
 
-<body class="font-sans">
-  <h1 class="text-4xl font-extrabold text-gray-800 text-center mb-10 tracking-tight">
+<body class="font-sans px-4">
+  <h1 class="text-2xl md:text-4xl font-extrabold text-gray-800 text-center my-6 md:mb-10 tracking-tight">
     📝 Todo Application
   </h1>
 </body>

diff --git a/views/index.ejs b/views/index.ejs
@@ -6,26 +6,27 @@
   <meta name="csrf-token" content="<%= csrfToken %>" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Todo Application</title>
+  <link rel="icon" type="image/png" href="image.svg">
   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" />
 
 </head>
 
 <body class="font-sans bg-gradient-to-r from-blue-100 to-purple-100">
-  <div class="min-h-screen flex flex-col items-center pt-12">
-    <div class="w-full max-w-2xl px-4">
+  <div class="min-h-screen flex flex-col items-center pt-6 sm:pt-12">
+    <div class="w-full max-w-md sm:max-w-lg md:max-w-2xl px-4 sm:px-6">
       <%- include(`header.ejs`) %>
-      <div class="bg-white shadow-lg rounded-xl p-6 mb-8 text-center">
-        <h3 class="text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-4">
+      <div class="bg-white shadow-lg rounded-xl p-4 sm:p-6 mb-8 text-center">
+        <h3 class="text-2xl sm:text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-4">
           Welcome to the Todo Application
         </h3>
-        <p class="text-gray-600 mb-2">
+        <p class="text-gray-600 mb-2 text-sm sm:text-base">
           New Here?
           <a href="/signup" class="text-blue-600 hover:text-blue-800 font-medium underline decoration-2 decoration-blue-500/30 hover:decoration-blue-500 transition-all duration-200">
             Signup here
           </a>
         </p>
-        <p class="text-gray-600">
+        <p class="text-gray-600 text-sm sm:text-base">
           Already have an account?
           <a href="/login" class="text-blue-600 hover:text-blue-800 font-medium underline decoration-2 decoration-blue-500/30 hover:decoration-blue-500 transition-all duration-200">
             Login here

diff --git a/views/login.ejs b/views/login.ejs
@@ -6,6 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="csrf-token" content="<%= csrfToken %>" />
   <title>Login page</title>
+  <link rel="icon" type="image/png" href="image.svg">
   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" />
   <style>
@@ -16,29 +17,29 @@
 </head>
 
 <body class="font-sans bg-gradient-to-r from-blue-100 to-purple-100">
-  <div class="min-h-screen flex flex-col items-center pt-12">
-    <div class="w-full max-w-2xl px-4">
+  <div class="min-h-screen flex flex-col items-center pt-6 sm:pt-12">
+    <div class="w-full max-w-md sm:max-w-lg md:max-w-2xl px-4 sm:px-6">
       <%- include(`header.ejs`) %>
-      <h6 class="text-2xl font-bold text-gray-700 mb-4">Login with Your Details</h6>
+      <h6 class="text-xl sm:text-2xl font-bold text-gray-700 mb-4">Login with Your Details</h6>
       <div id="error-message" class="hidden bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4"></div>
-      <form class="space-y-4" action="/session" method="post">
+      <form class="space-y-4 md:space-y-6" action="/session" method="post">
         <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
         <div>
-          <label for="email" class="block text-gray-700 font-semibold mb-2">Email</label>
-          <input type="email" name="email" id="email" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" placeholder="Enter Email" required />
+          <label for="email" class="block text-gray-700 font-semibold mb-2 text-sm sm:text-base">Email</label>
+          <input type="email" name="email" id="email" class="w-full p-2 sm:p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 text-sm sm:text-base" placeholder="Enter Email" required />
         </div>
         <div>
-          <label for="password" class="block text-gray-700 font-semibold mb-2">Password</label>
-          <input type="password" name="password" id="password" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" placeholder="Enter Password" required />
+          <label for="password" class="block text-gray-700 font-semibold mb-2 text-sm sm:text-base">Password</label>
+          <input type="password" name="password" id="password" class="w-full p-2 sm:p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 text-sm sm:text-base" placeholder="Enter Password" required />
         </div>
         <div class="mt-6">
-          <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400">
+          <button type="submit" class="w-full p-2 sm:p-3 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 text-sm sm:text-base">
             Login
           </button>
         </div>
       </form>
       <% if(messages && messages.error && messages.error.length > 0)  { %>
-      <div id="error-container" class="slide-in-out transform translate-y-0 opacity-100 mt-4 bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded shadow-md">
+      <div id="error-container" class="slide-in-out transform translate-y-0 opacity-100 mt-4 bg-red-100 border-l-4 border-red-500 text-red-700 p-3 sm:p-4 rounded shadow-md text-sm sm:text-base">
         <ul class="list-disc list-inside">
           <% for(var i=0; i<messages.error.length; i++) { %>
           <li class="mb-1">

diff --git a/views/signup.ejs b/views/signup.ejs
@@ -6,36 +6,37 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="csrf-token" content="<%= csrfToken %>" />
   <title>Signup page</title>
+  <link rel="icon" type="image/png" href="image.svg">
   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" />
 </head>
 
 <body class="font-sans bg-gradient-to-r from-blue-100 to-purple-100">
-  <div class="min-h-screen flex flex-col items-center pt-12">
-    <div class="w-full max-w-2xl px-4">
+  <div class="min-h-screen flex flex-col items-center pt-6 sm:pt-12 px-4">
+    <div class="w-full max-w-md sm:max-w-lg md:max-w-2xl px-4 sm:px-6">
       <%- include(`header.ejs`) %>
-      <h6 class="text-2xl font-bold text-gray-700 mb-4">Signup as a new user</h6>
+      <h6 class="text-xl sm:text-2xl font-bold text-gray-700 mb-4">Signup as a new user</h6>
       <div id="error-message" class="hidden bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4"></div>
-      <form class="space-y-4" action="/users" method="post">
+      <form class="space-y-4 md:space-y-6" action="/users" method="post">
         <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
         <div>
-          <label for="firstName" class="block text-gray-700 font-semibold mb-2">First Name</label>
-          <input type="text" name="firstName" id="firstName" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" placeholder="Enter First Name" required />
+          <label for="firstName" class="block text-gray-700 font-semibold mb-2 text-sm sm:text-base">First Name</label>
+          <input type="text" name="firstName" id="firstName" class="w-full p-2 sm:p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 text-sm sm:text-base" placeholder="Enter First Name" required />
         </div>
         <div>
-          <label for="lastName" class="block text-gray-700 font-semibold mb-2">Last Name</label>
-          <input type="text" name="lastName" id="lastName" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" placeholder="Enter Last Name" required />
+          <label for="lastName" class="block text-gray-700 font-semibold mb-2 text-sm sm:text-base">Last Name</label>
+          <input type="text" name="lastName" id="lastName" class="w-full p-2 sm:p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 text-sm sm:text-base" placeholder="Enter Last Name" required />
         </div>
         <div>
-          <label for="email" class="block text-gray-700 font-semibold mb-2">Email</label>
-          <input type="email" name="email" id="email" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" placeholder="Enter Email" required />
+          <label for="email" class="block text-gray-700 font-semibold mb-2 text-sm sm:text-base">Email</label>
+          <input type="email" name="email" id="email" class="w-full p-2 sm:p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 text-sm sm:text-base" placeholder="Enter Email" required />
         </div>
         <div>
-          <label for="password" class="block text-gray-700 font-semibold mb-2">Password</label>
-          <input type="password" name="password" id="password" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" placeholder="Enter Password" required />
+          <label for="password" class="block text-gray-700 font-semibold mb-2 text-sm sm:text-base">Password</label>
+          <input type="password" name="password" id="password" class="w-full p-2 sm:p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 text-sm sm:text-base" placeholder="Enter Password" required />
         </div>
         <div class="mt-6">
-          <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400">
+          <button type="submit" class="w-full p-2 sm:p-3 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 text-sm sm:text-base">
             Sign up
           </button>
         </div>