v0.0.2 Debug

.gitattributes

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text

frontend/app/components/NexusAuth.css

@@ -1,8 +1,8 @@
 /* Container Styling */
 .nexus-auth-form {
     max-width: 400px;
-    margin: 20px auto;
-    padding: 30px;
+    margin: 10px auto;
+    padding: 20px;
     border: none;
     border-radius: 12px;
     background: linear-gradient(145deg, var(--accent), var(--secondary));
@@ -13,24 +13,24 @@
 /* Header Styling */
 .nexus-auth-form h2 {
     text-align: center;
-    margin-bottom: 25px;
+    margin-bottom: 10px;
     color: var(--foreground);
-    font-size: 1.8rem;
+    font-size: 1.4rem;
     font-weight: 600;
     letter-spacing: 1px;
     text-transform: uppercase;
     border-bottom: 2px solid var(--primary);
-    padding-bottom: 10px;
+    padding-bottom: 5px;
 }
 
 /* Form Group Styling */
 .form-group {
-    margin-bottom: 20px;
+    margin-bottom: 5px;
 }
 
 .form-group label {
     display: block;
-    margin-bottom: 8px;
+    margin-bottom: 5px;
     color: var(--foreground);
     font-size: 1rem;
     font-weight: 500;
@@ -39,7 +39,7 @@
 
 .form-group input {
     width: 100%;
-    padding: 12px;
+    padding: 10px;
     background-color: var(--secondary);
     color: var(--foreground);
     border: 2px solid var(--primary);
@@ -158,8 +158,8 @@
 
 @media (max-width: 480px) {
     .nexus-auth-form {
-        padding: 15px;
-        max-width: 95%;
+        padding: 10px;
+        max-width: 90%;
     }
 
     .nexus-auth-form h2 {

frontend/app/components/NexusAuth.js

@@ -1,8 +1,8 @@
 'use client';
 import './NexusAuth.css';
 import { useState, useEffect } from 'react';
-import NexusAuthApi from '../lib/Nexus_Auth_API';
-import SplashScreen from './SplashScreen';
+import NexusAuthApi from '@/app/lib/Nexus_Auth_API';
+import SplashScreen from '@/app/components/SplashScreen';
 import { CheckCircleIcon} from '@heroicons/react/20/solid';
 
 const SignupForm = ({ onSignup }) => {

frontend/app/components/Sidebar.js

@@ -0,0 +1,112 @@
+'use client';
+import { VERSION } from "@/app/lib/config";
+import { Bars3Icon, UserCircleIcon, Cog6ToothIcon, QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
+import Link from "next/link";
+import Image from "next/image";
+import logo from "@/app/assets/logo8-cropped.jpg";
+
+export default function Sidebar({ isCollapsed, toggleSidebar }) {
+  const logoStyle = {
+    width: isCollapsed ? "60px" : "100px",
+    height: isCollapsed ? "60px" : "100px",
+    borderRadius: "50px",
+    transition: "width 0.3s ease, height 0.3s ease",
+  };
+
+  const sidebarStyle = {
+    width: "180px",
+    left: isCollapsed ? "-180px" : "0",
+    backgroundColor: "var(--sidebar-background)",
+    color: "var(--foreground)",
+    padding: isCollapsed ? "15px" : "30px",
+    position: "fixed",
+    height: "100vh",
+    display: "flex",
+    flexDirection: "column",
+    borderRight: "1px solid rgba(255, 255, 255, 0.1)",
+    transition: "left 0.3s ease, width 0.3s ease, padding 0.3s ease",
+    zIndex: 10,
+  };
+
+  const versionStyle = {
+    color: "var(--hover-accent)",
+    fontSize: isCollapsed ? "0.6em" : "0.9em",
+    marginTop: "20px",
+    textAlign: "end",
+  };
+
+  const navLinkStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: "5px",
+    padding: "10px 5px",
+    transition: "all 0.3s ease",
+    color: "var(--foreground)",
+    fontSize: "1.2em",
+  };
+
+  const textStyle = {
+    opacity: isCollapsed ? 0 : 1,
+    transition: "opacity 0.3s ease",
+    pointerEvents: isCollapsed ? "none" : "auto",
+  };
+
+  const iconStyle = {
+    width: "30px",
+    height: "30px",
+    flexShrink: 0,
+  };
+
+  const toggleButtonStyle = {
+    position: "absolute",
+    top: "20px",
+    right: isCollapsed ? "-50px" : "10px",
+    width: "35px",
+    height: "35px",
+    backgroundColor: "var(--button-background)",
+    color: "var(--foreground)",
+    border: "none",
+    borderRadius: "10px",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    boxShadow: "0 2px 5px rgba(0, 0, 0, 0.2)",
+    transition: "background-color 0.3s ease, right 0.3s ease",
+  };
+
+  return (
+    <div style={sidebarStyle}>
+      <div className="logo-container" style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
+        <Image style={logoStyle} src={logo} alt="App Logo" />
+        <sup style={versionStyle}>{VERSION}</sup>
+        <button
+          style={toggleButtonStyle}
+          onClick={toggleSidebar}
+        >
+          <Bars3Icon style={{transform: `rotate(${isCollapsed ? 0 : 90}deg)`, transition: 'transform .3s', width: '20px' }} />
+        </button>
+      </div>
+      <ul className="nav-links" style={{ listStyleType: "none", marginTop: "20px", paddingLeft: "0" }}>
+        <li>
+          <Link href="/" style={navLinkStyle}>
+            <UserCircleIcon style={iconStyle} />
+            <span style={textStyle}>Profile</span>
+          </Link>
+        </li>
+        <li>
+          <Link href="/settings" style={navLinkStyle}>
+            <Cog6ToothIcon style={iconStyle} />
+            <span style={textStyle}>Settings</span>
+          </Link>
+        </li>
+        <li>
+          <Link href="/support" style={navLinkStyle}>
+            <QuestionMarkCircleIcon style={iconStyle} />
+            <span style={textStyle}>Support</span>
+          </Link>
+        </li>
+      </ul>
+    </div>
+  );
+}

frontend/app/components/SplashScreen.js

@@ -1,21 +1,76 @@
+'use client';
+import logo from "@/app/assets/logo3.jpg";
+import Image from "next/image";
+import { useEffect, useState } from "react";
+
 const SplashScreen = () => {
+    const [loadingMessage, setLoadingMessage] = useState("Initializing...");
+
+    useEffect(() => {
+        // Optionally update the loading message over time
+        const messages = ["Warming up engines...", "Fetching data...", "Almost ready!"];
+        let index = 0;
+        const interval = setInterval(() => {
+            setLoadingMessage(messages[index]);
+            index = (index + 1) % messages.length;
+        }, 1500);
+
+        return () => clearInterval(interval);
+    }, []);
+
     const splashScreenStyle = {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        height: '100vh',
-        width: '100vw',
-        backgroundColor: '#282c34',
-        color: 'white',
-        fontSize: '2rem',
-        fontFamily: 'Arial, sans-serif',
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100vh",
+        width: "100vw",
+        backgroundColor: "var(--background)",
+        color: "white",
+        fontFamily: "'Poppins', sans-serif",
+        animation: "fadeIn 1.5s ease-in-out",
+    };
+
+    const logoStyle = {
+        width: "120px",
+        height: "120px",
+        marginBottom: "1rem",
+        borderRadius: "50%",
+        animation: "pulse 2s infinite",
+    };
+
+    const messageStyle = {
+        fontSize: "1.2rem",
+        fontWeight: "400",
+        textAlign: "center",
+        opacity: 0.8,
     };
 
     return (
         <div style={splashScreenStyle}>
-            <h1>Loading...</h1>
+            <Image style={logoStyle} src={logo} alt="App Logo" />
+            <p style={messageStyle}>{loadingMessage}</p>
+            <style jsx>{`
+                @keyframes fadeIn {
+                    from {
+                        opacity: 0;
+                    }
+                    to {
+                        opacity: 1;
+                    }
+                }
+
+                @keyframes pulse {
+                    0%, 100% {
+                        transform: scale(1);
+                    }
+                    50% {
+                        transform: scale(1.1);
+                    }
+                }
+            `}</style>
         </div>
     );
 };
 
-export default SplashScreen;
+export default SplashScreen;

frontend/app/globals.css

@@ -3,8 +3,9 @@
 @tailwind utilities;
 
 :root {
-  --background: #121212; /* Deeper dark background */
+  --background: #100b1a; /* Deeper dark background */
   --foreground: #E0E0E0; /* Light gray text */
+  --sidebar-background: #14141b; /* Darker sidebar background */
   --primary: #1F1F2A; /* Darker primary for sidebar */
   --secondary: #2A2A3B; /* Soft secondary background for content */
   --accent: #4a4a7f;
@@ -35,185 +36,29 @@ body {
   margin: 0;
 }
 
-a {
-  text-decoration: none;
-  color: inherit;
-}
-
-a:hover {
-  text-decoration: underline;
-}
-
-/* Sidebar */
-.sidebar {
-  width: 280px;
-  background-color: var(--primary);
-  color: var(--foreground);
-  padding: 30px;
-  position: fixed;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  border-right: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.sidebar .logo {
-  font-size: 2rem;
-  font-weight: bold;
-  margin-bottom: 40px;
-  color: var(--foreground);
-}
-
-.logo-container {
-  display: flex;
-  flex-direction: column;
-  align-items: left;
-  justify-content: center;
-}
-
-.version {
-  color: var(--hover-accent);
-  font-size: 0.8em;
-  margin-top: 20px;
-  text-align: end;
-}
-
-.sidebar .nav-links {
-  list-style-type: none;
-  margin-top: 20px;
-}
-
-.sidebar .nav-links li {
-  margin-bottom: 24px;
-}
-
-.sidebar .nav-links a {
-  color: var(--foreground);
-  font-size: 1.2em;
-  transition: all 0.3s ease;
-}
-
-.sidebar .nav-links a:hover {
-  color: var(--accent);
-  transform: scale(1.05);
-}
-
-/* Content Area */
-.content {
-  margin-left: 280px;
-  padding: 30px;
-  flex-grow: 1;
-  height: 100vh;
-  overflow-y: auto;
-  background-color: var(--secondary);
-}
-
-/* Header */
-.header {
-  margin-bottom: 40px;
-}
-
-.header h1 {
-  color: var(--foreground);
-  font-size: 2.5rem;
-  font-weight: 600;
-  margin-bottom: 10px;
-}
-
-/* Main content */
-.main-content {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-
 .user-info-card {
   background-color: var(--secondary);
-  padding: 40px;
-  border-radius: 12px;
+  padding: 20px;
+  border-radius: 5px;
   box-shadow: 0 4px 12px var(--shadow-dark);
   text-align: center;
-  width: 500px;
+  width: 90%; /* Adjust for smaller screens */
+  max-width: 500px; /* Limit for larger screens */
   margin-bottom: 30px;
   transition: all 0.3s ease-in-out;
 }
 
-.user-info-card:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
-}
-
-.user-info-card h3 {
-  font-size: 1.8em;
-  color: var(--accent);
-  margin-bottom: 20px;
-}
-
-.user-info-card p {
-  color: var(--foreground);
-  margin-bottom: 20px;
-}
-
 .logout-button {
   padding: 12px 24px;
   background-color: var(--button-background);
   color: var(--foreground);
   border: none;
   border-radius: 8px;
-  font-size: 1.1em;
+  font-size: 1em;
   cursor: pointer;
   transition: background-color 0.3s ease;
 }
 
 .logout-button:hover {
-  background-color: var(--button-hover);
-}
-
-/* Login Prompt */
-.login-prompt {
-  text-align: center;
-  color: var(--foreground);
-  font-size: 1.3em;
-  margin-top: 40px;
-}
-
-.login-prompt a {
-  color: var(--accent);
-  text-decoration: none;
-}
-
-.login-prompt a:hover {
-  text-decoration: underline;
-}
-
-/* Responsive Design */
-@media (max-width: 1024px) {
-  .sidebar {
-    width: 240px;
-    padding: 20px;
-  }
-
-  .content {
-    margin-left: 240px;
-  }
-
-  .user-info-card {
-    width: 90%;
-  }
-}
-
-@media (max-width: 768px) {
-  .sidebar {
-    width: 200px;
-    padding: 15px;
-  }
-
-  .content {
-    margin-left: 200px;
-  }
-
-  .user-info-card {
-    width: 90%;
-  }
+  background-color: darken(var(--button-background), 10%);
 }

frontend/app/layout.js

@@ -1,9 +1,11 @@
 'use client';
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
-import { NexusAuthWrapper } from "./components/NexusAuth";
+import { useState } from "react";
+import { NexusAuthWrapper } from "@/app/components/NexusAuth";
 import { ToastContainer, toast, Flip } from 'react-toastify';
 import { CheckCircleIcon, InformationCircleIcon, ExclamationCircleIcon } from '@heroicons/react/20/solid';
+import Sidebar from "@/app/components/Sidebar";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -16,30 +18,60 @@ const geistMono = Geist_Mono({
 });
 
 export default function RootLayout({ children }) {
+  const [isCollapsed, setIsCollapsed] = useState(true);
+  const toggleSidebar = () => {
+    setIsCollapsed(!isCollapsed);
+  };
+  const contentStyle = {
+    padding: "30px",
+    flexGrow: 1,
+    height: "100vh",
+    overflowY: "auto",
+    backgroundColor: "var(--background)",
+    transition: "margin-left 0.3s ease",
+  };
+
+    const headerStyle = {
+    marginBottom: "30px",
+    display: "flex",
+    justifyContent: "center",
+  };
+
   return (
     <html lang="en">
       <body className={`${geistSans.variable} ${geistMono.variable}`}>
-      <ToastContainer
-                transition={Flip}
-                theme="dark"
-                icon={({ type, theme }) => {
-                    // theme is not used in this example but you could
-                    switch (type) {
-                        case 'info':
-                            return <InformationCircleIcon className="text-indigo-400" />;
-                        case 'error':
-                            return <InformationCircleIcon className="text-red-500" />;
-                        case 'success':
-                            return <CheckCircleIcon className="h-5 w-5 text-green-500" />;
-                        case 'warning':
-                            return <ExclamationCircleIcon className="text-yellow-500" />;
-                        default:
-                            return null;
-                    }
-                }}
-            />
+        <ToastContainer
+          transition={Flip}
+          theme="dark"
+          icon={({ type, theme }) => {
+            // theme is not used in this example but you could
+            switch (type) {
+              case 'info':
+                return <InformationCircleIcon className="text-indigo-400" />;
+              case 'error':
+                return <InformationCircleIcon className="text-red-500" />;
+              case 'success':
+                return <CheckCircleIcon className="h-5 w-5 text-green-500" />;
+              case 'warning':
+                return <ExclamationCircleIcon className="text-yellow-500" />;
+              default:
+                return null;
+            }
+          }}
+        />
+
         <NexusAuthWrapper toast={toast}>
-        {children}
+          <div className="dashboard-container">
+            <Sidebar isCollapsed={isCollapsed} toggleSidebar={toggleSidebar} />
+            <div style={contentStyle}>
+              <header style={headerStyle}>
+                <h1>Welcome to Your Dashboard</h1>
+              </header>
+              <div className="main-content">
+              {children}
+              </div>
+            </div>
+          </div>
         </NexusAuthWrapper>
       </body>
     </html>

frontend/app/lib/config.js

@@ -1,3 +1,5 @@
 export const API_BASE_URL = "https://hans-r-d-auth-nexus.hf.space/v1/api";
-export const DEBUG = true; // Toggle for enabling/disabling debugging
-export const VERSION = "0.0.1 Debug";
+export const DEBUG = true;
+export const VERSION = "v0.0.2 Debug";
+export const APP_NAME = "Nexus Auth";
+export const APP_DESCRIPTION = "A simple authentication service";

frontend/app/page.js

@@ -1,7 +1,7 @@
 'use client';
+
 import { useState, useEffect } from "react";
-import NexusAuthApi from "./lib/Nexus_Auth_API";
-import { VERSION } from "./lib/config";
+import NexusAuthApi from "@/app/lib/Nexus_Auth_API";
 
 export default function Home() {
   const [username, setUsername] = useState(null);
@@ -33,39 +33,14 @@ export default function Home() {
   };
 
   return (
-    <div className="dashboard-container">
-      <div className="sidebar">
-        <div className="logo-container">
-          <sup className="version">{VERSION}</sup>
-          <h2 className="logo">Nexus Auth</h2>
-
-        </div>
-        <ul className="nav-links">
-          <li><a href="/profile">Profile</a></li>
-          <li><a href="/settings">Settings</a></li>
-          <li><a href="/support">Support</a></li>
-        </ul>
-      </div>
-
-      <div className="content">
-        <header className="header">
-          <h1>Welcome to Your Dashboard</h1>
-        </header>
-
-        <div className="main-content">
-          {username ? (
-            <div className="user-info-card">
-              <h3>Hello, <strong>{username}</strong></h3>
-              <p>User ID: <strong>{userID}</strong></p>
-              <button onClick={handleLogout} className="logout-button">Logout</button>
-            </div>
-          ) : (
-            <div className="login-prompt">
-              <p>You are not logged in. Please <a href="/login">login</a> to access your account.</p>
-            </div>
-          )}
+    <>
+      {username && (
+        <div className="user-info-card">
+          <h3>Hello, <strong>{username}</strong></h3>
+          <p>User ID: <strong>{userID}</strong></p>
+          <button onClick={handleLogout} className="logout-button">Logout</button>
         </div>
-      </div>
-    </div>
+      )}
+    </>
   );
 }

frontend/app/page.module.css

@@ -1,168 +0,0 @@
-.page {
-  --gray-rgb: 0, 0, 0;
-  --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
-  --gray-alpha-100: rgba(var(--gray-rgb), 0.05);
-
-  --button-primary-hover: #383838;
-  --button-secondary-hover: #f2f2f2;
-
-  display: grid;
-  grid-template-rows: 20px 1fr 20px;
-  align-items: center;
-  justify-items: center;
-  min-height: 100svh;
-  padding: 80px;
-  gap: 64px;
-  font-family: var(--font-geist-sans);
-}
-
-@media (prefers-color-scheme: dark) {
-  .page {
-    --gray-rgb: 255, 255, 255;
-    --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
-    --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
-
-    --button-primary-hover: #ccc;
-    --button-secondary-hover: #1a1a1a;
-  }
-}
-
-.main {
-  display: flex;
-  flex-direction: column;
-  gap: 32px;
-  grid-row-start: 2;
-}
-
-.main ol {
-  font-family: var(--font-geist-mono);
-  padding-left: 0;
-  margin: 0;
-  font-size: 14px;
-  line-height: 24px;
-  letter-spacing: -0.01em;
-  list-style-position: inside;
-}
-
-.main li:not(:last-of-type) {
-  margin-bottom: 8px;
-}
-
-.main code {
-  font-family: inherit;
-  background: var(--gray-alpha-100);
-  padding: 2px 4px;
-  border-radius: 4px;
-  font-weight: 600;
-}
-
-.ctas {
-  display: flex;
-  gap: 16px;
-}
-
-.ctas a {
-  appearance: none;
-  border-radius: 128px;
-  height: 48px;
-  padding: 0 20px;
-  border: none;
-  border: 1px solid transparent;
-  transition:
-    background 0.2s,
-    color 0.2s,
-    border-color 0.2s;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: 500;
-}
-
-a.primary {
-  background: var(--foreground);
-  color: var(--background);
-  gap: 8px;
-}
-
-a.secondary {
-  border-color: var(--gray-alpha-200);
-  min-width: 180px;
-}
-
-.footer {
-  grid-row-start: 3;
-  display: flex;
-  gap: 24px;
-}
-
-.footer a {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.footer img {
-  flex-shrink: 0;
-}
-
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
-  a.primary:hover {
-    background: var(--button-primary-hover);
-    border-color: transparent;
-  }
-
-  a.secondary:hover {
-    background: var(--button-secondary-hover);
-    border-color: transparent;
-  }
-
-  .footer a:hover {
-    text-decoration: underline;
-    text-underline-offset: 4px;
-  }
-}
-
-@media (max-width: 600px) {
-  .page {
-    padding: 32px;
-    padding-bottom: 80px;
-  }
-
-  .main {
-    align-items: center;
-  }
-
-  .main ol {
-    text-align: center;
-  }
-
-  .ctas {
-    flex-direction: column;
-  }
-
-  .ctas a {
-    font-size: 14px;
-    height: 40px;
-    padding: 0 16px;
-  }
-
-  a.secondary {
-    min-width: auto;
-  }
-
-  .footer {
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .logo {
-    filter: invert();
-  }
-}

frontend/app/settings/page.js

@@ -0,0 +1,5 @@
+export default function Settings() {
+    return (
+        <></>
+    )
+};

frontend/app/support/page.js

@@ -0,0 +1,5 @@
+export default function Support() {
+    return (
+        <></>
+    )
+};