upgrade the ui backend thing is same just topo bar not full page also add more use light bluw light green color just header not full page full of animation backend same import React, { useContext, useState } from 'react';

import { Link, useNavigate } from 'react-router-dom';
import { UserContext } from '../context/User';
import {
Button,
Container,
Icon,
Menu,
Segment,
} from 'semantic-ui-react';
import {
API,
getLogo,
getSystemName,
isAdmin,
isMobile,
showSuccess,
} from '../helpers';
import '../index.css';

// Header Buttons
let headerButtons = [
{
name: 'Channel',
to: '/channel',
icon: 'sitemap',
admin: true,
},
{
name: 'Token',
to: '/token',
icon: 'key',
},
{
name: 'Redemption',
to: '/redemption',
icon: 'dollar sign',
admin: true,
},
{
name: 'Topup',
to: '/topup',
icon: 'cart',
},
{
name: 'Users',
to: '/user',
icon: 'user',
admin: true,
},
{
name: 'Dashboard',
to: '/dashboard',
icon: 'chart bar',
},
{
name: 'Logs',
to: '/log',
icon: 'book',
},
{
name: 'Settings',
to: '/setting',
icon: 'setting',
},
{
name: 'Docs',
external: 'https://doc.llmx.in',
icon: 'file alternate outline',
},
];

if (localStorage.getItem('chat_link')) {
headerButtons.splice(1, 0, {
name: 'Chat',
to: '/chat',
icon: 'comments',
});
}

const Header = () => {
const [userState, userDispatch] = useContext(UserContext);
const navigate = useNavigate();
const [showSidebar, setShowSidebar] = useState(false);
const systemName = getSystemName();
const logo = getLogo();

async function logout() {
setShowSidebar(false);
await API.get('/api/user/logout');
showSuccess('Logout successful!');
userDispatch({ type: 'logout' });
localStorage.removeItem('user');
navigate('/login');
}

const toggleSidebar = () => setShowSidebar(!showSidebar);
const goHome = () => (window.location.href = 'https://llmx.in');

const renderButtons = (isMobile) =>
headerButtons.map((button) => {
if (button.admin && !isAdmin()) return null;
if (button.external) {
return (
<Menu.Item
key={button.name}
onClick={() => window.open(button.external, '_blank')}
style={{
fontSize: '15px',
fontWeight: '400',
color: '#555',
cursor: 'pointer',
}}
>
<Icon name={button.icon} style={{ marginRight: '4px' }} />
{button.name}
</Menu.Item>
);
}

if (isMobile) {
return (
<Menu.Item
key={button.name}
onClick={() => {
navigate(button.to);
setShowSidebar(false);
}}
style={{ fontSize: '15px' }}
>
<Icon name={button.icon} style={{ marginRight: '4px' }} />
{button.name}
</Menu.Item>
);
}

return (
<Menu.Item
key={button.name}
as={Link}
to={button.to}
style={{
fontSize: '15px',
fontWeight: '400',
color: '#555',
}}
>
<Icon name={button.icon} style={{ marginRight: '4px' }} />
{button.name}
</Menu.Item>
);
});

if (isMobile()) {
return (
<>
<Menu
borderless
size='large'
style={
showSidebar
? {
borderBottom: 'none',
marginBottom: '0',
borderTop: 'none',
height: '51px',
}
: { borderTop: 'none', height: '52px' }
}
>
<Container
style={{
width: '100%',
maxWidth: isMobile() ? '100%' : '1200px',
padding: isMobile() ? '0 10px' : '0 20px',
}}
>
<Menu.Item onClick={goHome} style={{ cursor: 'pointer' }}>
<img src={logo} alt='logo' style={{ marginRight: '0.75em' }} />
<div style={{ fontSize: '20px' }}>
<b>{systemName}</b>
</div>
</Menu.Item>
<Menu.Menu position='right'>
<Menu.Item onClick={toggleSidebar}>
<Icon name={showSidebar ? 'close' : 'sidebar'} />
</Menu.Item>
</Menu.Menu>
</Container>
</Menu>
{showSidebar ? (
<Segment style={{ marginTop: 0, borderTop: '0' }}>
<Menu secondary vertical style={{ width: '100%', margin: 0 }}>
{renderButtons(true)}
<Menu.Item>
{userState.user ? (
<Button onClick={logout} style={{ color: '#666666' }}>
Logout
</Button>
) : (
<>
<Button
onClick={() => {
setShowSidebar(false);
navigate('/login');
}}
>
Login
</Button>
<Button
onClick={() => {
setShowSidebar(false);
navigate('/register');
}}
>
Register
</Button>
</>
)}
</Menu.Item>
</Menu>
</Segment>
) : null}
</>
);
}

return (
<>
<Menu
borderless
style={{
borderTop: 'none',
boxShadow: 'rgba(0, 0, 0, 0.04) 0px 2px 12px 0px',
border: 'none',
}}
>
<Container
style={{
width: '100%',
maxWidth: isMobile() ? '100%' : '1200px',
padding: isMobile() ? '0 10px' : '0 20px',
}}
>
<Menu.Item onClick={goHome} style={{ cursor: 'pointer' }}>
<img src={logo} alt='logo' style={{ marginRight: '0.75em' }} />
<div
style={{
fontSize: '18px',
fontWeight: '500',
color: '#333',
}}
>
{systemName}
</div>
</Menu.Item>
{renderButtons(false)}
<Menu.Menu position='right'>
{userState.user ? (
<Menu.Item
name='Logout'
onClick={logout}
style={{
fontSize: '15px',
fontWeight: '400',
color: '#666',
cursor: 'pointer',
}}
/>
) : (
<Menu.Item
name='Login'
as={Link}
to='/login'
className='btn btn-link'
style={{
fontSize: '15px',
fontWeight: '400',
color: '#666',
}}
/>
)}
</Menu.Menu>
</Container>
</Menu>
</>
);
};

export default Header;

README.md

@@ -1,10 +1,13 @@
 ---
-title: Lightstream Dashboard
-emoji: 🔥
-colorFrom: green
-colorTo: pink
+title: LightStream Dashboard 🌊
+colorFrom: yellow
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

components/footer.js

@@ -0,0 +1,91 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background: linear-gradient(90deg, rgba(255,255,255,0.9) 0%, rgba(236, 253, 245, 0.9) 100%);
+          backdrop-filter: blur(10px);
+          padding: 2rem 1rem;
+          text-align: center;
+          margin-top: 3rem;
+          border-top: 1px solid rgba(0, 0, 0, 0.05);
+        }
+        
+        .footer-content {
+          max-width: 1200px;
+          margin: 0 auto;
+          display: flex;
+          flex-direction: column;
+          gap: 1.5rem;
+        }
+        
+        .footer-links {
+          display: flex;
+          justify-content: center;
+          gap: 1.5rem;
+          flex-wrap: wrap;
+        }
+        
+        .footer-link {
+          color: #475569;
+          text-decoration: none;
+          font-weight: 500;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          transition: color 0.2s ease;
+        }
+        
+        .footer-link:hover {
+          color: #0ea5e9;
+        }
+        
+        .copyright {
+          color: #64748b;
+          font-size: 0.875rem;
+        }
+        
+        .social-links {
+          display: flex;
+          justify-content: center;
+          gap: 1rem;
+        }
+        
+        .social-link {
+          color: #64748b;
+          transition: all 0.2s ease;
+        }
+        
+        .social-link:hover {
+          color: #0ea5e9;
+          transform: translateY(-2px);
+        }
+      </style>
+      
+      <footer>
+        <div class="footer-content">
+          <div class="footer-links">
+            <a href="/about" class="footer-link"><i data-feather="info"></i> About</a>
+            <a href="/terms" class="footer-link"><i data-feather="file-text"></i> Terms</a>
+            <a href="/privacy" class="footer-link"><i data-feather="shield"></i> Privacy</a>
+            <a href="/contact" class="footer-link"><i data-feather="mail"></i> Contact</a>
+          </div>
+          
+          <div class="social-links">
+            <a href="#" class="social-link"><i data-feather="twitter"></i></a>
+            <a href="#" class="social-link"><i data-feather="github"></i></a>
+            <a href="#" class="social-link"><i data-feather="linkedin"></i></a>
+            <a href="#" class="social-link"><i data-feather="discord"></i></a>
+          </div>
+          
+          <p class="copyright">&copy; ${new Date().getFullYear()} LightStream Dashboard. All rights reserved.</p>
+        </div>
+        
+        <script>feather.replace();</script>
+      </footer>
+    `;
+  }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,243 @@
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          position: relative;
+          height: 80px;
+          width: 100%;
+          overflow: hidden;
+          z-index: 10;
+        }
+        
+        nav {
+          background: rgba(255, 255, 255, 0.9);
+          backdrop-filter: blur(10px);
+          box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
+          padding: 0 2rem;
+          height: 80px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          position: relative;
+          z-index: 2;
+        }
+        
+        .logo-container {
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+        }
+        
+        .logo {
+          color: #0ea5e9;
+          font-weight: 700;
+          font-size: 1.5rem;
+          letter-spacing: -0.5px;
+        }
+        
+        .logo-img {
+          height: 2.5rem;
+          width: auto;
+        }
+        
+        .nav-links {
+          display: flex;
+          gap: 1.25rem;
+          list-style: none;
+          margin: 0;
+          padding: 0;
+        }
+        
+        .nav-link {
+          color: #334155;
+          text-decoration: none;
+          font-weight: 500;
+          font-size: 0.95rem;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          padding: 0.5rem 0;
+          position: relative;
+        }
+        
+        .nav-link:hover {
+          color: #0ea5e9;
+        }
+        
+        .nav-link::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 0;
+          height: 2px;
+          background: linear-gradient(90deg, #7dd3fc 0%, #4ade80 100%);
+          transition: width 0.3s ease;
+        }
+        
+        .nav-link:hover::after {
+          width: 100%;
+        }
+        
+        .nav-actions {
+          display: flex;
+          gap: 1rem;
+          align-items: center;
+        }
+        
+        .login-btn {
+          background: linear-gradient(90deg, #7dd3fc 0%, #4ade80 100%);
+          color: white;
+          border: none;
+          padding: 0.5rem 1.25rem;
+          border-radius: 9999px;
+          font-weight: 600;
+          cursor: pointer;
+          transition: all 0.2s ease;
+        }
+        
+        .login-btn:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 4px 15px rgba(125, 211, 252, 0.3);
+        }
+        
+        .logout-btn {
+          color: #64748b;
+          font-weight: 500;
+          cursor: pointer;
+          transition: color 0.2s ease;
+        }
+        
+        .logout-btn:hover {
+          color: #ef4444;
+        }
+        
+        .mobile-menu-btn {
+          display: none;
+          background: none;
+          border: none;
+          cursor: pointer;
+          color: #334155;
+        }
+        
+        .mobile-menu {
+          display: none;
+          position: absolute;
+          top: 80px;
+          left: 0;
+          right: 0;
+          background: white;
+          padding: 1rem;
+          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+          border-radius: 0 0 1rem 1rem;
+          z-index: 1;
+        }
+        
+        .mobile-menu.open {
+          display: block;
+        }
+        
+        .mobile-nav-links {
+          list-style: none;
+          margin: 0;
+          padding: 0;
+          display: flex;
+          flex-direction: column;
+          gap: 0.5rem;
+        }
+        
+        .mobile-nav-link {
+          color: #334155;
+          text-decoration: none;
+          font-weight: 500;
+          padding: 0.75rem 1rem;
+          border-radius: 0.5rem;
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+        }
+        
+        .mobile-nav-link:hover {
+          background: #f1f5f9;
+          color: #0ea5e9;
+        }
+        
+        @media (max-width: 1024px) {
+          .desktop-nav {
+            display: none;
+          }
+          
+          .mobile-menu-btn {
+            display: block;
+          }
+        }
+      </style>
+      
+      <nav>
+        <div class="logo-container">
+          <img src="http://static.photos/blue/200x200/42" alt="Logo" class="logo-img">
+          <span class="logo">LightStream</span>
+        </div>
+        
+        <div class="desktop-nav">
+          <ul class="nav-links">
+            <li><a href="/channel" class="nav-link"><i data-feather="sitemap"></i> Channel</a></li>
+            <li><a href="/token" class="nav-link"><i data-feather="key"></i> Token</a></li>
+            <li><a href="/redemption" class="nav-link"><i data-feather="dollar-sign"></i> Redemption</a></li>
+            <li><a href="/topup" class="nav-link"><i data-feather="shopping-cart"></i> Topup</a></li>
+            <li><a href="/user" class="nav-link"><i data-feather="users"></i> Users</a></li>
+            <li><a href="/dashboard" class="nav-link"><i data-feather="bar-chart-2"></i> Dashboard</a></li>
+            <li><a href="/log" class="nav-link"><i data-feather="book"></i> Logs</a></li>
+            <li><a href="/setting" class="nav-link"><i data-feather="settings"></i> Settings</a></li>
+            <li><a href="https://doc.llmx.in" target="_blank" class="nav-link"><i data-feather="file-text"></i> Docs</a></li>
+          </ul>
+        </div>
+        
+        <div class="nav-actions">
+          <button class="login-btn">Login</button>
+          <button class="logout-btn">Logout</button>
+          
+          <button id="menu-button" class="mobile-menu-btn">
+            <i data-feather="menu"></i>
+          </button>
+        </div>
+      </nav>
+      
+      <div id="mobile-menu" class="mobile-menu hidden">
+        <ul class="mobile-nav-links">
+          <li><a href="/channel" class="mobile-nav-link"><i data-feather="sitemap"></i> Channel</a></li>
+          <li><a href="/token" class="mobile-nav-link"><i data-feather="key"></i> Token</a></li>
+          <li><a href="/redemption" class="mobile-nav-link"><i data-feather="dollar-sign"></i> Redemption</a></li>
+          <li><a href="/topup" class="mobile-nav-link"><i data-feather="shopping-cart"></i> Topup</a></li>
+          <li><a href="/user" class="mobile-nav-link"><i data-feather="users"></i> Users</a></li>
+          <li><a href="/dashboard" class="mobile-nav-link"><i data-feather="bar-chart-2"></i> Dashboard</a></li>
+          <li><a href="/log" class="mobile-nav-link"><i data-feather="book"></i> Logs</a></li>
+          <li><a href="/setting" class="mobile-nav-link"><i data-feather="settings"></i> Settings</a></li>
+          <li><a href="https://doc.llmx.in" target="_blank" class="mobile-nav-link"><i data-feather="file-text"></i> Docs</a></li>
+        </ul>
+      </div>
+      
+      <script>
+        feather.replace();
+        
+        this.shadowRoot.getElementById('menu-button').addEventListener('click', () => {
+          const menu = this.shadowRoot.getElementById('mobile-menu');
+          menu.classList.toggle('hidden');
+          
+          const icon = this.shadowRoot.querySelector('#menu-button i');
+          if (menu.classList.contains('hidden')) {
+            icon.setAttribute('data-feather', 'menu');
+          } else {
+            icon.setAttribute('data-feather', 'x');
+          }
+          feather.replace();
+        });
+      </script>
+    `;
+  }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,39 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LightStream Dashboard</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
+</head>
+<body class="bg-gradient-to-br from-blue-50 to-green-50 min-h-screen">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-8">
+        <!-- Content will be loaded here by React -->
+        <div id="root" class="bg-white rounded-xl shadow-md p-6"></div>
+    </main>
+
+    <custom-footer></custom-footer>
+    
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        VANTA.WAVES({
+            el: "custom-navbar",
+            color: 0x7dd3fc,
+            waveHeight: 20,
+            shininess: 50,
+            waveSpeed: 1.5,
+            zoom: 0.8
+        });
+    </script>
+<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,23 @@
+// Shared JavaScript across all pages
+console.log('LightStream Dashboard loaded');
+
+// Mobile detection helper
+function isMobile() {
+    return window.innerWidth <= 768;
+}
+
+// Toggle mobile menu
+function toggleMobileMenu() {
+    const menu = document.getElementById('mobile-menu');
+    menu.classList.toggle('hidden');
+}
+
+// Close mobile menu when clicking outside
+document.addEventListener('click', (e) => {
+    const mobileMenu = document.getElementById('mobile-menu');
+    const menuButton = document.getElementById('menu-button');
+    
+    if (mobileMenu && !mobileMenu.contains(e.target) && !menuButton.contains(e.target)) {
+        mobileMenu.classList.add('hidden');
+    }
+});

style.css

@@ -1,28 +1,26 @@
+/* Shared styles across all pages */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Smooth transitions */
+a, button {
+    transition: all 0.2s ease-in-out;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
 }
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
 }
-
-.card p:last-child {
-	margin-bottom: 0;
+::-webkit-scrollbar-thumb {
+    background: #7dd3fc;
+    border-radius: 4px;
 }
+::-webkit-scrollbar-thumb:hover {
+    background: #0ea5e9;
+}