Design React Login UI #7

Author: CodingBlood

…ntend/DialogGPT/src/Routes/Chat/Chat.css DBs/Query.sqlfrontend/DialogGPT/src/Routes/Chat/Chat.css renamed to DBs/Query.sql frontend/DialogGPT/src/Routes/Chat/Chat.css renamed to DBs/Query.sql

@@ -12,6 +12,7 @@
   "dependencies": {
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-icons": "^5.6.0",
     "react-router-dom": "^7.13.1"
   },
   "devDependencies": {

DBs/ReadMe.md

@@ -1,70 +1,101 @@
+@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;600;800&display=swap');
+
 :root {
+  --bg: #0a0a0f;
+  --surface: #13131a;
+  --border: #1e1e2e;
+  --accent: #ff0000; /* DialogRed */
+  --text: #e8e8f0;
+  --muted: #6b6b80;
   --sidebar-width: 20%;
-  --brand-orange: orange;
 }
 
-/* 1. Sidebar - Fixed to the left */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Syne', sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+
+/* Global Grid Background Effect */
+.app-root::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(255, 0, 0, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 0, 0, 0.03) 1px, transparent 1px);
+  background-size: 40px 40px;
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* 2. Sidebar - Redesigned for Blueprint Theme */
 .sidebar {
   position: fixed;
   left: 0;
   top: 0;
   height: 100vh;
   width: var(--sidebar-width);
-  background-color: #121212;
+  background-color: var(--surface);
   z-index: 2000;
-  transition: transform 0.4s ease;
-  border-right: 1px solid rgba(255, 165, 0, 0.1);
+  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  border-right: 1px solid var(--border);
+  backdrop-filter: blur(5px);
+}
+
+/* 3. Main Layout Wrapper */
+.app-layout {
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  z-index: 1;
 }
 
-/* 2. Chat Wrapper - Precise alignment */
-/* desktop logic */
-.chat-wrapper {
+/* 4. Chat/Main Content Area */
+.chat-wrapper, .chat-page-container {
   position: fixed;
   top: 0;
   right: 0;
-  width: 80%; /* Only takes 80% on desktop */
+  width: calc(100% - var(--sidebar-width));
   height: 100vh;
-  background-color: #121212;
   transition: all 0.4s ease;
+  overflow-x: hidden;
 }
 
-/* RESPONSIVE FIX (Triggering at 1024px) */
+/* --- RESPONSIVE FIX (1024px Breakpoint) --- */
 @media (max-width: 1024px) {
-  .chat-wrapper {
-    /* Anchor to BOTH sides to kill the gaps */
-    left: 0 !important;
-    right: 0 !important;
+  .chat-wrapper, .chat-page-container {
     width: 100% !important;
+    left: 0 !important;
     margin: 0 !important;
   }
 
   .sidebar {
-    width: 300px;
-    transform: translateX(-100%); /* Slide it off-screen */
+    width: 280px;
+    transform: translateX(-100%);
+    box-shadow: 20px 0 50px rgba(0, 0, 0, 0.5);
   }
 
   .sidebar.active {
-    transform: translateX(0); /* Slide back in */
+    transform: translateX(0);
+    border-right: 1px solid var(--accent);
   }
 }
 
-/* Update this part in App.css */
-.app-layout {
-  display: flex;
-  width: 100%;
-  height: 100vh;
-}
-
-/* Ensure the main container in the CHAT page handles the 20% gap */
-.chat-page-container {
-  margin-left: 20%;
-  width: 80%;
-  height: 100vh;
-}
-
-@media (max-width: 1024px) {
-  .chat-page-container {
-    margin-left: 0;
-    width: 100%;
-  }
+/* Utility for technical labels used in all pages */
+.tech-tag {
+  font-family: 'Space Mono', monospace;
+  font-size: 0.7rem;
+  color: var(--accent);
+  text-transform: uppercase;
+  letter-spacing: 2px;
 }

frontend/DialogGPT/package-lock.json

@@ -1,16 +1,31 @@
-import { useState, useEffect } from 'react'
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import Welcome from './Routes/Welcome/Welcome.jsx'; // Your current landing page
-import Chat from './Routes/Chat/Chat.jsx'; // Your new page
-import './App.css'
+import Index from './Routes/Index/Index.jsx';
+import Welcome from './Routes/DialogGPT/Welcome/Welcome.jsx';
+import Chat from './Routes/DialogGPT/Chat/Chat.jsx';
+
+// Your new Consolidated Auth Imports
+import Login from "./Routes/DialogGPT/Auth/Login.jsx";
+import Register from "./Routes/DialogGPT/Auth/Register.jsx";
+import ForgotPassword from "./Routes/DialogGPT/Auth/ForgotPassword.jsx";
+import ResetPassword from "./Routes/DialogGPT/Auth/ResetPassword.jsx";
+
+import './App.css';
 
 function App() {
     return (
-    <div className="app-root"> {/* No styles on this div! */}
+    <div className="app-root">
       <BrowserRouter>
-        <Routes>
-          <Route path="/" element={<Welcome/>} />
-          <Route path="/chat" element={<Chat/>} />
+        <Routes><Route path="/" element={<Index/>} />
+
+          {/* Auth Routes */}
+          <Route path="/DialogGPT/login" element={<Login/>} />
+          <Route path="/DialogGPT/register" element={<Register/>} />
+          <Route path="/DialogGPT/forgot-password" element={<ForgotPassword/>} />
+          <Route path="/DialogGPT/reset-password/:token" element={<ResetPassword/>} />
+
+          {/* Main App Routes */}
+          <Route path="/DialogGPT" element={<Welcome/>} />
+          <Route path="/DialogGPT/chat" element={<Chat/>} />
         </Routes>
       </BrowserRouter>
     </div>

frontend/DialogGPT/package.json

@@ -1,39 +1,50 @@
 .round-button {
-  width: 60px; /* Slightly increased button size to house a bigger arrow */
+  width: 60px;
   height: 60px;
-  background-color: orange;
-  border: none;
+  /* Glassmorphism Red */
+  background-color: rgba(255, 0, 0, 0.2);
+  border: 1px solid rgba(255, 0, 0, 0.4);
   border-radius: 50%;
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  transition: transform 0.2s ease, background-color 0.2s ease;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
-  /* Centering and Animation */
   margin: 20px auto 0;
   opacity: 0;
   animation: fadeIn 0.5s ease forwards;
+  /* Default delay matches the Welcome typewriter speed */
   animation-delay: 1.8s;
+
+  /* Subtle Tech Glow */
+  box-shadow: 0 0 10px rgba(255, 0, 0, 0.1);
 }
 
-/* This targets the arrow icon specifically */
 .round-button svg {
-  width: 32px;  /* Increased from 24px */
-  height: 32px; /* Increased from 24px */
-  stroke-width: 5; /* Makes the arrow lines look bolder and cleaner */
+  width: 28px;
+  height: 28px;
+  stroke-width: 3;
+  transition: transform 0.3s ease;
 }
 
+/* Hover State - Industrial Glow */
 .round-button:hover {
-  background-color: #e67e00;
+  background-color: #ff0000;
   transform: scale(1.1);
+  box-shadow: 0 0 20px rgba(255, 0, 0, 0.4);
+  border-color: #ff0000;
+}
+
+.round-button:hover svg {
+  transform: translateX(3px); /* Arrow nudges forward on hover */
 }
 
 @keyframes fadeIn {
   from {
     opacity: 0;
-    transform: translateY(10px);
+    transform: translateY(15px);
   }
   to {
     opacity: 1;

frontend/DialogGPT/src/App.css

@@ -1,9 +1,13 @@
 import React from 'react';
 import './Button.css';
 
-const Button = ({ onClick }) => {
+const Button = ({ onClick, delay = "1.8s" }) => {
   return (
-    <button className="round-button" onClick={onClick}>
+    <button
+      className="round-button"
+      onClick={onClick}
+      style={{ animationDelay: delay }}
+    >
       <svg
         viewBox="0 0 24 24"
         fill="none"

frontend/DialogGPT/src/App.jsx

@@ -1,57 +1,56 @@
-/* 1. Base Container */
 .message-container {
     display: flex;
-    margin-bottom: 30px;
-    gap: 15px;
-    width: 100%; /* Important for alignment */
-    align-items: flex-start; 
+    margin-bottom: 24px;
+    gap: 16px;
+    width: 100%;
+    animation: fadeIn 0.3s ease;
 }
 
-/* 2. Bot Layout (Icon Left, Text Right) */
-.message-container.bot {
-    flex-direction: row; 
-    justify-content: flex-start;
-}
-
-/* 3. User Layout (Text Left, Icon Right) */
-.message-container.user {
-    flex-direction: row; /* Icon and text in a line */
-    justify-content: flex-end; /* Pushes the pair to the right edge */
-}
-
-/* 4. Ensure the Icon is Visible */
 .avatar-wrapper {
-    width: 42px;
-    height: 42px;
-    flex-shrink: 0; /* Prevents the icon from squishing to 0px */
-    border-radius: 50%;
-    border: 2px solid orange;
+    width: 38px;
+    height: 38px;
+    flex-shrink: 0;
+    border: 1px solid var(--border);
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: rgba(255, 165, 0, 0.05);
-    padding: 8px;
-    box-sizing: border-box;
+    background: var(--surface);
+    color: var(--muted);
+}
+
+.bot .avatar-wrapper {
+    border-color: var(--accent);
+    color: var(--accent);
+}
+
+.message-content {
+    max-width: 80%;
+}
+
+.message-header {
+    margin-bottom: 4px;
 }
 
-/* 5. Bubble Specifics */
 .message-bubble {
-    padding: 14px 22px;
-    font-size: 1rem;
-    line-height: 1.5;
-    word-wrap: break-word;
-    max-width: 70%; /* Prevents text from hitting the other side */
+    padding: 12px 16px;
+    font-size: 0.95rem;
+    line-height: 1.6;
+    border: 1px solid var(--border);
+    background: rgba(30, 30, 46, 0.4);
+    backdrop-filter: blur(4px);
 }
 
+/* Red Accents for Bot */
 .bot .message-bubble {
-    background-color: #252525;
-    color: #efefef;
-    border-radius: 0px 18px 18px 18px;
+    border-left: 3px solid var(--accent);
+    color: var(--text);
 }
 
+/* Subtle style for User */
 .user .message-bubble {
-    background-color: orange;
-    color: white;
-    border-radius: 18px 0px 18px 18px;
-    /* No 'order' needed if we just place the HTML correctly */
-}
+    border-left: 3px solid var(--muted);
+    color: var(--muted);
+}
+
+.user { flex-direction: row-reverse; text-align: right; }
+.user .message-header { display: flex; justify-content: flex-end; }