Spaces:

Logistics
/

ai-mirror-nebula

Running

App Files Files Community

Logistics commited on Dec 11, 2025

Commit

041c6bd

verified ·

1 Parent(s): 9361cfd

<!DOCTYPE html>

Browse files

<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>AI Mirror</title>


<script src="https://telegram.org/js/telegram-web-app.js"></script>


<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="theme-color" content="#000000">
<link rel="apple-touch-icon" href="icon.png">


<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
tg: {
bg: 'var(--tg-theme-bg-color, #ffffff)',
text: 'var(--tg-theme-text-color, #000000)',
hint: 'var(--tg-theme-hint-color, #999999)',
link: 'var(--tg-theme-link-color, #2481cc)',
button: 'var(--tg-theme-button-color, #2481cc)',
'button-text': 'var(--tg-theme-button-text-color, #ffffff)',
secondary: 'var(--tg-theme-secondary-bg-color, #efeff4)',
header: 'var(--tg-theme-header-bg-color, #ffffff)',
section: 'var(--tg-theme-section-bg-color, #ffffff)',
}
},
fontFamily: {
sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'],
}
}
}
}
</script>
<link rel="stylesheet" href="css/style.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="text-tg-text overflow-hidden select-none bg-tg-bg">


<div id="app" class="h-[100dvh] w-full relative overflow-hidden flex flex-col bg-tg-bg">

<main id="main-view" class="w-full flex-1 overflow-y-auto overflow-x-hidden relative scroll-smooth bg-tg-bg"></main>


<nav id="bottom-nav" class="fixed bottom-0 left-0 right-0 z-40 flex justify-around items-center px-4 pb-safe-bottom pt-2 min-h-[60px] bg-tg-header border-t border-tg-hint/20 transition-transform duration-300">
<button data-nav="home" class="nav-btn active"><i class="fas fa-comment-alt text-2xl mb-1"></i><span class="text-[10px]">Чаты</span></button>
<button data-nav="architect" class="nav-btn"><i class="fas fa-plus-circle text-4xl text-blue-500 -mt-4"></i></button>
<button data-nav="settings" class="nav-btn"><i class="fas fa-cog text-2xl mb-1"></i><span class="text-[10px]">Настройки</span></button>
</nav>
</div>


<div id="modal-container" class="fixed inset-0 z-50 pointer-events-none opacity-0 transition-opacity duration-300 flex items-end sm:items-center justify-center">
<div class="absolute inset-0 bg-black/50 backdrop-blur-sm" id="modal-backdrop"></div>
<div id="modal-content" class="bg-white/90 dark:bg-slate-900/90 w-full max-w-md p-6 rounded-t-2xl sm:rounded-2xl shadow-2xl transform translate-y-full sm:translate-y-0 transition-transform duration-300">

</div>
</div>


<div id="global-loader" class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-md flex items-center justify-center hidden">
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
</div>


<div id="lock-screen" class="fixed inset-0 z-[70] bg-tg-bg hidden flex-col items-center justify-center transition-opacity duration-300">

</div>

<script type="module" src="js/app.js"></script>
</body>
</html>

Files changed (7) hide show

README.md +8 -5
components/footer.js +161 -0
components/lockscreen.js +245 -0
components/navbar.js +179 -0
index.html +96 -19
script.js +337 -0
style.css +205 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Ai Mirror Nebula
-emoji: 🌍
-colorFrom: indigo
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: AI Mirror Nebula 👁️
+colorFrom: yellow
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js ADDED Viewed

	@@ -0,0 +1,161 @@

+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    margin-top: auto;
+                }
+                footer {
+                    background: var(--surface);
+                    border-top: 1px solid rgba(255, 255, 255, 0.1);
+                }
+                .footer-link {
+                    transition: all 0.3s ease;
+                    color: var(--subtle);
+                }
+                .footer-link:hover {
+                    color: var(--accent);
+                    transform: translateY(-2px);
+                }
+                .social-icon {
+                    width: 40px;
+                    height: 40px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border-radius: 50%;
+                    background: rgba(255, 255, 255, 0.05);
+                    transition: all 0.3s ease;
+                }
+                .social-icon:hover {
+                    background: var(--primary);
+                    transform: translateY(-5px) rotate(10deg);
+                }
+                .copyright {
+                    font-size: 0.875rem;
+                    color: var(--subtle);
+                }
+                .theme-toggle {
+                    background: var(--surface);
+                    border: 1px solid rgba(255, 255, 255, 0.1);
+                    border-radius: 50%;
+                    width: 44px;
+                    height: 44px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    cursor: pointer;
+                    transition: all 0.3s ease;
+                }
+                .theme-toggle:hover {
+                    transform: rotate(180deg);
+                    background: linear-gradient(135deg, var(--primary), var(--secondary));
+                }
+            </style>
+            <footer class="py-8 px-6">
+                <div class="container mx-auto">
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
+                        <div>
+                            <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
+                                <i data-feather="zap" class="text-accent"></i>
+                            <span>AI Mirror Nebula</span>
+                        </h3>
+                        <p class="text-subtle text-sm">A neural interface exploring the boundaries of artificial intelligence.</p>
+                        </div>
+                        <div>
+                            <h3 class="text-lg font-bold mb-4">Quick Links</h3>
+                        <div class="flex flex-col gap-2">
+                            <a href="/home" class="footer-link flex items-center gap-2">
+                            <i data-feather="chevron-right" class="w-4 h-4"></i>
+                            <span>Home</span>
+                        </a>
+                            <a href="/features" class="footer-link flex items-center gap-2">
+                                <i data-feather="chevron-right" class="w-4 h-4"></i>
+                            <span>Features</span>
+                        </a>
+                            <a href="/api" class="footer-link flex items-center gap-2">
+                                    <i data-feather="chevron-right" class="w-4 h-4"></i>
+                                <span>API</span>
+                            </a>
+                            <a href="/docs" class="footer-link flex items-center gap-2">
+                                <i data-feather="chevron-right" class="w-4 h-4"></i>
+                                <span>Documentation</span>
+                            </a>
+                        </div>
+                    </div>
+                    <div>
+                        <h3 class="text-lg font-bold mb-4">Connect</h3>
+                        <div class="flex gap-4">
+                            <a href="https://twitter.com" class="social-icon">
+                                <i data-feather="twitter"></i>
+                            </a>
+                            <a href="https://github.com" class="social-icon">
+                                <i data-feather="github"></i>
+                            </a>
+                            <a href="https://discord.com" class="social-icon">
+                                    <i data-feather="discord"></i>
+                            </a>
+                            <a href="https://telegram.org" class="social-icon">
+                                <i data-feather="send"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex flex-col md:flex-row items-center justify-between gap-4 pt-8 border-t border-white/10">
+                    <p class="copyright">© ${new Date().getFullYear()} AI Mirror Nebula. All neural patterns reserved.</p>
+                    <div class="flex items-center gap-4">
+                        <button onclick="toggleTheme()" class="theme-toggle">
+                        <i data-feather="moon" id="theme-icon"></i>
+                    </button>
+                </div>
+            </footer>
+        `;
+        this.initThemeToggle();
+    }
+    initThemeToggle() {
+        const themeToggle = this.shadowRoot.querySelector('.theme-toggle');
+        const themeIcon = this.shadowRoot.getElementById('theme-icon');
+        themeToggle.addEventListener('click', () => {
+            const isDark = document.documentElement.classList.contains('dark');
+            if (isDark) {
+                document.documentElement.classList.remove('dark');
+                localStorage.setItem('theme', 'light');
+                themeIcon.setAttribute('data-feather', 'sun');
+            } else {
+                document.documentElement.classList.add('dark');
+                localStorage.setItem('theme', 'dark');
+                themeIcon.setAttribute('data-feather', 'moon');
+            }
+            feather.replace();
+        });
+    }
+}
+customElements.define('custom-footer', CustomFooter);
+// Global theme toggle function
+function toggleTheme() {
+    const isDark = document.documentElement.classList.contains('dark');
+    const themeToggle = document.querySelector('custom-footer')?.shadowRoot?.querySelector('.theme-toggle');
+    if (themeToggle) {
+        themeToggle.click();
+    }
+}

components/lockscreen.js ADDED Viewed

	@@ -0,0 +1,245 @@

+class CustomLockscreen extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    position: fixed;
+                    inset: 0;
+                    z-index: 70;
+                    background: var(--background);
+                    display: none;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                    transition: opacity 0.3s ease;
+                }
+                .lockscreen {
+                    background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(236, 72, 153, 0.1));
+                    backdrop-filter: blur(20px);
+                    border: 1px solid rgba(255, 255, 255, 0.1);
+                    border-radius: 2rem;
+                    padding: 3rem 2rem;
+                    text-align: center;
+                    max-width: 90%;
+                    width: 400px;
+                }
+                .unlock-btn {
+                    background: linear-gradient(135deg, var(--primary), var(--secondary));
+                    color: white;
+                    border: none;
+                    border-radius: 1rem;
+                    padding: 1rem 2rem;
+                    font-weight: 600;
+                    transition: all 0.3s ease;
+                    position: relative;
+                    overflow: hidden;
+                }
+                .unlock-btn::before {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    bottom: 0;
+                    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+                    transform: translateX(-100%);
+                    transition: transform 0.5s ease;
+                }
+                .unlock-btn:hover::before {
+                    transform: translateX(100%);
+                }
+                .pattern-grid {
+                    display: grid;
+                    grid-template-columns: repeat(3, 1fr);
+                    gap: 1rem;
+                    margin: 2rem 0;
+                }
+                .pattern-dot {
+                    width: 20px;
+                    height: 20px;
+                    background: var(--subtle);
+                    border-radius: 50%;
+                    transition: all 0.3s ease;
+                    cursor: pointer;
+                }
+                .pattern-dot.selected {
+                    background: var(--accent);
+                    transform: scale(1.2);
+                }
+                .pattern-line {
+                    position: absolute;
+                    background: var(--accent);
+                    height: 4px;
+                    border-radius: 2px;
+                }
+                .time-display {
+                    font-size: 4rem;
+                    font-weight: 300;
+                    letter-spacing: -2px;
+                }
+                .date-display {
+                    font-size: 1.2rem;
+                    color: var(--subtle);
+                    margin-bottom: 2rem;
+                }
+                .hint-text {
+                    color: var(--subtle);
+                    font-size: 0.9rem;
+                    margin-top: 1rem;
+                }
+                .lock-icon {
+                    width: 60px;
+                    height: 60px;
+                    background: linear-gradient(135deg, var(--primary), var(--secondary));
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    margin-bottom: 2rem;
+                }
+            </style>
+            <div class="lockscreen p-8">
+                <div class="lock-icon mb-6">
+                    <i data-feather="lock" class="w-8 h-8 text-white"></i>
+                </div>
+                <div class="time-display mb-2">00:00</div>
+                <div class="date-display mb-8">Loading...</div>
+                <div class="pattern-grid relative">
+                    ${Array.from({ length: 9 }, (_, i) => `
+                    <div class="pattern-dot" data-dot="${i}"></div>
+                `).join('')}
+            </div>
+            <p class="hint-text mt-6">Draw your pattern to unlock</p>
+        </div>
+        `;
+        this.initTime();
+        this.initPatternLock();
+    }
+    initTime() {
+        const timeElement = this.shadowRoot.querySelector('.time-display');
+        const dateElement = this.shadowRoot.querySelector('.date-display');
+        const updateTime = () => {
+            const now = new Date();
+            const timeString = now.toLocaleTimeString('en-US', {
+                hour12: false,
+                hour: '2-digit',
+                minute: '2-digit'
+            });
+            const dateString = now.toLocaleDateString('en-US', {
+                weekday: 'long',
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric'
+            });
+            timeElement.textContent = timeString;
+            dateElement.textContent = dateString;
+        };
+        updateTime();
+        setInterval(updateTime, 1000);
+    }
+    initPatternLock() {
+        const dots = this.shadowRoot.querySelectorAll('.pattern-dot');
+        let selectedDots = [];
+        const correctPattern = [0, 3, 6, 7, 8];
+        dots.forEach((dot, index) => {
+            dot.addEventListener('click', () => {
+                if (!selectedDots.includes(index)) {
+                    selectedDots.push(index);
+                    dot.classList.add('selected');
+                    // Draw lines between selected dots
+                    if (selectedDots.length > 1) {
+                        const prevIndex = selectedDots[selectedDots.length - 2];
+                    const prevDot = dots[prevIndex];
+                    const line = document.createElement('div');
+                    line.className = 'pattern-line';
+                    // Calculate line position and dimensions
+                    const rect1 = prevDot.getBoundingClientRect();
+                    const rect2 = dot.getBoundingClientRect();
+                    const x1 = rect1.left + rect1.width / 2;
+                    const y1 = rect1.top + rect1.height / 2;
+                    const x2 = rect2.left + rect2.width / 2;
+                    const y2 = rect2.top + rect2.height / 2;
+                    const length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2);
+                    const angle = Math.atan2(y2 - y1, x2 - x1);
+                    line.style.width = `${length}px`;
+                    line.style.transform = `rotate(${angle}rad)';
+                    line.style.left = `${x1}px`;
+                    line.style.top = `${y1}px';
+                    this.shadowRoot.querySelector('.pattern-grid').appendChild(line);
+                }
+                // Check if pattern is complete
+                if (selectedDots.length === correctPattern.length) {
+                    if (JSON.stringify(selectedDots) === JSON.stringify(correctPattern)) {
+                        this.toggleLock();
+                    } else {
+                        // Wrong pattern - reset
+                        setTimeout(() => {
+                            this.resetPattern();
+                        }, 500);
+                    }
+                }
+            });
+        });
+        // Reset pattern on mouse up (for mobile)
+        document.addEventListener('mouseup', () => this.resetPattern());
+        document.addEventListener('touchend', () => this.resetPattern());
+    }
+    resetPattern() {
+        const dots = this.shadowRoot.querySelectorAll('.pattern-dot');
+        const lines = this.shadowRoot.querySelectorAll('.pattern-line');
+        lines.forEach(line => line.remove());
+        dots.forEach(dot => dot.classList.remove('selected'));
+        selectedDots = [];
+    }
+    toggleLock() {
+        if (this.style.display === 'none') {
+            this.style.display = 'flex';
+            document.body.style.overflow = 'hidden';
+        } else {
+            this.style.display = 'none';
+            document.body.style.overflow = '';
+            // Remove all pattern lines
+            this.shadowRoot.querySelectorAll('.pattern-line').forEach(line => line.remove());
+            selectedDots = [];
+        }
+    }
+}
+customElements.define('custom-lockscreen', CustomLockscreen);

components/navbar.js ADDED Viewed

	@@ -0,0 +1,179 @@

+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    z-index: 100;
+                }
+                nav {
+                    background: rgba(30, 41, 59, 0.8);
+                    backdrop-filter: blur(10px);
+                    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+                }
+                .logo {
+                    background: linear-gradient(135deg, var(--primary), var(--secondary));
+                    -webkit-background-clip: text;
+                    background-clip: text;
+                    color: transparent;
+                    font-weight: 800;
+                    letter-spacing: -0.5px;
+                }
+                .nav-link {
+                    transition: all 0.3s ease;
+                    position: relative;
+                }
+                .nav-link.active::after {
+                    content: '';
+                    position: absolute;
+                    bottom: -2px;
+                    left: 0;
+                    right: 0;
+                    height: 2px;
+                    background: linear-gradient(90deg, var(--primary), var(--accent));
+                    border-radius: 2px;
+                    animation: neon-glow 2s ease-in-out infinite alternate;
+                }
+                .hamburger span {
+                    transition: all 0.3s ease;
+                }
+                .hamburger.active span:nth-child(1) {
+                    transform: rotate(45deg) translate(6px, 6px);
+                }
+                .hamburger.active span:nth-child(2) {
+                    opacity: 0;
+                }
+                .hamburger.active span:nth-child(3) {
+                    transform: rotate(-45deg) translate(6px, -6px);
+                }
+                @keyframes neon-glow {
+                    0% {
+                        box-shadow: 0 0 5px var(--primary), 0 0 10px var(--primary);
+                    }
+                    100% {
+                        box-shadow: 0 0 10px var(--secondary), 0 0 20px var(--secondary);
+                    }
+                }
+            </style>
+            <nav class="py-4 px-6">
+                <div class="container mx-auto flex items-center justify-between">
+                    <div class="flex items-center gap-2">
+                        <i data-feather="eye" class="w-6 h-6 text-accent"></i>
+                        <h1 class="logo text-xl">AI Mirror Nebula</h1>
+                    </div>
+                    <div class="hidden md:flex items-center gap-8">
+                        <a href="/home" class="nav-link flex items-center gap-2">
+                            <i data-feather="home"></i>
+                            <span>Home</span>
+                        </a>
+                        <a href="/chat" class="nav-link flex items-center gap-2">
+                                <i data-feather="message-square"></i>
+                            <span>Chat</span>
+                        </a>
+                        <a href="/features" class="nav-link flex items-center gap-2">
+                            <i data-feather="grid"></i>
+                            <span>Features</span>
+                        </a>
+                        <a href="/settings" class="nav-link flex items-center gap-2">
+                                <i data-feather="settings"></i>
+                            <span>Settings</span>
+                        </a>
+                    </div>
+                    <div class="flex items-center gap-4">
+                        <button onclick="window.appFunctions.toggleLockScreen()" class="p-2 rounded-lg hover:bg-surface transition">
+                            <i data-feather="lock"></i>
+                        </button>
+                        <div class="hamburger md:hidden cursor-pointer">
+                            <span class="block w-6 h-0.5 bg-text mb-1.5"></span>
+                            <span class="block w-6 h-0.5 bg-text"></span>
+                            <span class="block w-6 h-0.5 bg-text mt-1.5"></span>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+        `;
+        this.initNavigation();
+        this.initHamburger();
+    }
+    initNavigation() {
+        const links = this.shadowRoot.querySelectorAll('.nav-link');
+        links.forEach(link => {
+            link.addEventListener('click', (e) => {
+                e.preventDefault();
+                const page = link.getAttribute('href').replace('/', '');
+                window.appFunctions.loadPageContent(page);
+            });
+        });
+    }
+    initHamburger() {
+        const hamburger = this.shadowRoot.querySelector('.hamburger');
+        const mobileMenu = document.createElement('div');
+        hamburger.addEventListener('click', () => {
+            hamburger.classList.toggle('active');
+            if (hamburger.classList.contains('active')) {
+                mobileMenu.className = 'fixed inset-0 top-20 z-50 bg-background/95 backdrop-blur-md md:hidden';
+            mobileMenu.innerHTML = `
+                <div class="p-6 space-y-6">
+                    <a href="/home" class="flex items-center gap-3 p-3 rounded-lg hover:bg-surface transition">
+                    <i data-feather="home"></i>
+                    <span>Home</span>
+                </a>
+                    <a href="/chat" class="flex items-center gap-3 p-3 rounded-lg hover:bg-surface transition">
+                    <i data-feather="message-square"></i>
+                    <span>Chat</span>
+                </a>
+                <a href="/features" class="flex items-center gap-3 p-3 rounded-lg hover:bg-surface transition">
+                    <i data-feather="grid"></i>
+                    <span>Features</span>
+                </a>
+                    <a href="/settings" class="flex items-center gap-3 p-3 rounded-lg hover:bg-surface transition">
+                        <i data-feather="settings"></i>
+                        <span>Settings</span>
+                    </a>
+                </div>
+            `;
+            document.body.appendChild(mobileMenu);
+            feather.replace();
+            // Add event listeners to mobile menu links
+            mobileMenu.querySelectorAll('a').forEach(link => {
+                link.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    hamburger.classList.remove('active');
+                    mobileMenu.remove();
+                    const page = link.getAttribute('href').replace('/', '');
+                    window.appFunctions.loadPageContent(page);
+            });
+        } else {
+            document.querySelector('.fixed.inset-0.top-20')?.remove();
+        }
+    });
+    }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html CHANGED Viewed

@@ -1,19 +1,96 @@
-<!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>AI Mirror Nebula 👁️</title>
+    <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>
+    <link rel="stylesheet" href="style.css">
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#4F46E5',
+                        secondary: '#EC4899',
+                        accent: '#06B6D4',
+                        background: '#0F172A',
+                        surface: '#1E293B',
+                        text: '#F8FAFC',
+                        subtle: '#94A3B8'
+                    },
+                    fontFamily: {
+                        sans: ['Inter', 'system-ui', 'sans-serif'],
+                        mono: ['JetBrains Mono', 'monospace']
+                    },
+                    animation: {
+                        'pulse-slow': 'pulse 3s ease-in-out infinite',
+                        'float': 'float 6s ease-in-out infinite',
+                        'gradient': 'gradient 8s ease infinite',
+                        'neon-glow': 'neonGlow 2s ease-in-out infinite alternate'
+                    },
+                    keyframes: {
+                        float: {
+                            '0%, 100%': { transform: 'translateY(0)' },
+                            '50%': { transform: 'translateY(-20px)' }
+                        },
+                        gradient: {
+                            '0%, 100%': { backgroundPosition: '0% 50%' },
+                            '50%': { backgroundPosition: '100% 50%' }
+                        },
+                        neonGlow: {
+                            '0%': { boxShadow: '0 0 5px theme(colors.primary), 0 0 10px theme(colors.primary), 0 0 15px theme(colors.primary)' },
+                            '100%': { boxShadow: '0 0 10px theme(colors.secondary), 0 0 20px theme(colors.secondary), 0 0 30px theme(colors.secondary)' }
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="dark bg-background text-text font-sans min-h-screen">
+    <custom-navbar></custom-navbar>
+    <custom-lockscreen></custom-lockscreen>
+    <main id="main-content" class="container mx-auto px-4 py-8 max-w-7xl">
+        <section class="hero-section mb-16">
+            <div class="relative rounded-3xl overflow-hidden p-8 md:p-12 bg-gradient-to-br from-primary/20 via-surface to-secondary/20 animate-gradient">
+                <div class="absolute inset-0 bg-grid-white/10 opacity-10"></div>
+            </div>
+        </section>
+        <section class="features-section mb-16">
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Feature cards will be dynamically loaded here -->
+            </div>
+        </section>
+        <section class="ai-chat-section mb-16">
+            <div class="bg-surface rounded-2xl p-6 shadow-2xl">
+                <h2 class="text-2xl font-bold mb-6 flex items-center gap-3">
+                    <i data-feather="message-circle" class="text-accent"></i>
+                    Neural Conversations
+                </h2>
+                <div class="chat-interface">
+                    <!-- Chat messages will appear here -->
+                </div>
+            </div>
+        </section>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/lockscreen.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        document.documentElement.classList.add('dark');
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,337 @@

+// Global State
+let appState = {
+    theme: 'dark',
+    isLocked: false,
+    currentPage: 'home',
+    userSettings: {
+        animations: true,
+        sounds: true,
+        notifications: true
+    }
+};
+// Initialize App
+document.addEventListener('DOMContentLoaded', () => {
+    initTheme();
+    initNavigation();
+    loadFeatures();
+    initChat();
+    createParticles();
+});
+// Theme Management
+function initTheme() {
+    const savedTheme = localStorage.getItem('theme') || 'dark';
+    appState.theme = savedTheme;
+    document.documentElement.classList.add(savedTheme);
+    // Set theme colors based on user preference
+    if (appState.theme === 'dark') {
+        document.documentElement.style.setProperty('--primary', '#4F46E5');
+    document.documentElement.style.setProperty('--secondary', '#EC4899');
+    document.documentElement.style.setProperty('--accent', '#06B6D4');
+    document.documentElement.style.setProperty('--background', '#0F172A');
+    document.documentElement.style.setProperty('--surface', '#1E293B');
+        document.documentElement.style.setProperty('--text', '#F8FAFC');
+        document.documentElement.style.setProperty('--subtle', '#94A3B8');
+    }
+}
+// Navigation System
+function initNavigation() {
+    const navButtons = document.querySelectorAll('.nav-btn');
+    const mainContent = document.getElementById('main-content');
+    navButtons.forEach(btn => {
+        btn.addEventListener('click', () => {
+            const targetPage = btn.dataset.nav;
+            // Update active state
+            navButtons.forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            // Update app state
+            appState.currentPage = targetPage;
+            // Load page content
+            loadPageContent(targetPage);
+            // Update URL without reload
+            history.pushState({ page: targetPage }, '', `/${targetPage}`);
+        });
+    });
+    // Handle browser back/forward
+    window.addEventListener('popstate', (event) => {
+        if (event.state && event.state.page) {
+            loadPageContent(event.state.page);
+        }
+    });
+}
+async function loadPageContent(page) {
+    const mainContent = document.getElementById('main-content');
+    // Show loading state
+    mainContent.innerHTML = `
+        <div class="flex items-center justify-center min-h-[60vh]">
+            <div class="text-center">
+                <div class="loading-dots inline-block mb-4">
+                    <span></span><span></span><span></span>
+            </div>
+            <p class="text-subtle">Loading ${page}...</p>
+        </div>
+    `;
+    try {
+        const response = await fetch(`pages/${page}.html`);
+        const content = await response.text();
+        // Add fade-in animation
+        mainContent.innerHTML = content;
+        mainContent.classList.add('opacity-0');
+        setTimeout(() => {
+            mainContent.classList.remove('opacity-0');
+            mainContent.classList.add('opacity-100');
+        }, 50);
+        // Re-initialize page-specific functionality
+        switch(page) {
+            case 'home':
+                loadFeatures();
+                break;
+            case 'chat':
+                initChat();
+                break;
+            case 'settings':
+                initSettings();
+                break;
+        }
+    } catch (error) {
+        mainContent.innerHTML = `
+            <div class="text-center py-12">
+                <i data-feather="alert-triangle" class="w-16 h-16 mx-auto text-secondary mb-4"></i>
+                <h3 class="text-xl font-bold mb-2">Page Not Found</h3>
+                <p class="text-subtle mb-6">The requested page could not be loaded.</p>
+                <button onclick="loadPageContent('home')" class="bg-primary text-white px-6 py-3 rounded-lg hover:bg-primary/80 transition">
+                    Return Home
+                </button>
+            </div>
+        `;
+        feather.replace();
+    }
+}
+// Load Features from Public API
+async function loadFeatures() {
+    const featuresContainer = document.querySelector('.features-section .grid');
+    if (!featuresContainer) return;
+    try {
+        // Using NASA APOD API for demonstration
+        const response = await fetch('https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY&count=6');
+        const features = await response.json();
+        featuresContainer.innerHTML = features.map((feature, index) => `
+            <div class="hover-card glass rounded-2xl p-6 transform transition-all duration-300 hover:scale-[1.02] animate-float" style="animation-delay: ${index * 0.1}s">
+                <div class="flex items-center gap-4 mb-4">
+                    <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
+                <i data-feather="${getRandomIcon()}" class="text-white"></i>
+            </div>
+                <h3 class="text-lg font-bold mb-2">${feature.title}</h3>
+                <p class="text-subtle text-sm mb-4">${feature.explanation.substring(0, 100)}...</p>
+                <div class="flex items-center justify-between">
+                    <span class="text-xs bg-surface px-3 py-1 rounded-full">
+                    ${new Date(feature.date).toLocaleDateString()}
+                    </span>
+                    <button onclick="openFeatureModal(${index})" class="text-accent hover:text-accent/80 transition">
+                        <i data-feather="arrow-right"></i>
+                    </button>
+                </div>
+            </div>
+        `).join('');
+        feather.replace();
+    } catch (error) {
+        featuresContainer.innerHTML = `
+            <div class="col-span-3 text-center py-8">
+                <p class="text-subtle">Unable to load features at this time.</p>
+        </div>
+        `;
+    }
+}
+// Chat System
+function initChat() {
+    const chatInterface = document.querySelector('.chat-interface');
+    if (!chatInterface) return;
+    chatInterface.innerHTML = `
+        <div class="flex flex-col space-y-4 mb-6">
+            <div class="chat-message user">
+                <p>Hello AI Mirror!</p>
+            </div>
+            <div class="chat-message ai">
+                <p>Greetings! I am your neural companion. How can I assist you today?</p>
+        </div>
+        </div>
+        <div class="flex gap-2">
+            <input type="text" placeholder="Ask me anything..." class="flex-1 bg-surface border border-white/10 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary">
+            <button onclick="sendMessage()" class="bg-primary text-white px-6 py-3 rounded-lg hover:bg-primary/80 transition">
+                <i data-feather="send"></i>
+            </button>
+        </div>
+    `;
+    feather.replace();
+}
+function sendMessage() {
+    const input = document.querySelector('.chat-interface input');
+    const message = input.value.trim();
+    if (!message) return;
+    const chatInterface = document.querySelector('.chat-interface');
+    // Add user message
+    chatInterface.insertAdjacentHTML('beforeend', `
+        <div class="chat-message user">
+            <p>${message}</p>
+        </div>
+    `);
+    // Clear input
+    input.value = '';
+    // Show typing indicator
+    chatInterface.insertAdjacentHTML('beforeend', `
+        <div class="typing-indicator">
+            <span></span><span></span><span></span>
+        </div>
+    `);
+    // Simulate AI response after delay
+    setTimeout(() => {
+        document.querySelector('.typing-indicator')?.remove();
+        // Using public AI API (example with DeepAI)
+        fetchAIResponse(message).then(response => {
+            chatInterface.insertAdjacentHTML('beforeend', `
+                <div class="chat-message ai">
+                    <p>${response}</p>
+                </div>
+            `);
+            // Scroll to bottom
+            chatInterface.scrollTop = chatInterface.scrollHeight;
+        });
+    }, 1500);
+}
+async function fetchAIResponse(message) {
+    try {
+        // Using OpenAI-like API (example)
+        const response = await fetch('https://api.deepai.org/api/text-generator', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'api-key': 'quickstart-QUdJIGlzIGNvbWluZy4uLi4K',
+            },
+            body: JSON.stringify({
+                text: message,
+                model: 'gpt-3'
+            })
+        });
+        const data = await response.json();
+        return data.output || "I'm processing your request. Please try again.";
+    } catch (error) {
+        return "I apologize, but I'm having trouble processing your request right now.";
+    }
+}
+// Utility Functions
+function getRandomIcon() {
+    const icons = ['star', 'moon', 'sun', 'cloud', 'compass', 'zap', 'heart', 'cpu', 'globe', 'eye'];
+    return icons[Math.floor(Math.random() * icons.length)];
+}
+function openFeatureModal(index) {
+    const modal = document.createElement('div');
+    modal.className = 'fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm';
+    modal.innerHTML = `
+        <div class="bg-surface rounded-2xl p-6 max-w-md w-full">
+            <h3 class="text-xl font-bold mb-4">Feature Details</h3>
+            <p>Detailed information about feature ${index + 1}.</p>
+            <div class="flex justify-end gap-2 mt-6">
+                <button onclick="this.closest('.fixed').remove()" class="px-4 py-2 rounded-lg bg-surface hover:bg-surface/80 transition">
+                Close
+            </button>
+        </div>
+        </div>
+    `;
+    document.body.appendChild(modal);
+    feather.replace();
+}
+// Particle Background
+function createParticles() {
+    const particleCount = 50;
+    for (let i = 0; i < particleCount; i++) {
+        const particle = document.createElement('div');
+        particle.className = 'particle';
+        // Random position and size
+        const size = Math.random() * 3 + 1;
+        particle.style.width = `${size}px`;
+        particle.style.height = `${size}px`;
+        particle.style.left = `${Math.random() * 100}vw`;
+        particle.style.top = `${Math.random() * 100}vh`;
+        // Random animation
+        particle.style.animation = `float ${Math.random() * 10 + 10}s ease-in-out infinite`;
+        particle.style.animationDelay = `${Math.random() * 5}s`;
+        document.body.appendChild(particle);
+    }
+}
+// Settings Management
+function initSettings() {
+    const settingsElements = document.querySelectorAll('.setting-toggle');
+    settingsElements.forEach(element => {
+        element.addEventListener('change', (e) => {
+            const setting = e.target.dataset.setting;
+            const value = e.target.checked;
+            appState.userSettings[setting] = value;
+            localStorage.setItem('settings', JSON.stringify(appState.userSettings));
+            // Apply setting changes
+            if (setting === 'animations') {
+                document.body.classList.toggle('no-animations', !value);
+        }
+    });
+}
+// Lock Screen Management
+function toggleLockScreen() {
+    const lockScreen = document.querySelector('custom-lockscreen');
+    if (lockScreen) {
+        lockScreen.toggleLock();
+    }
+}
+// Export functions for components
+window.appFunctions = {
+    loadPageContent,
+    toggleLockScreen,
+    sendMessage
+};

style.css CHANGED Viewed

@@ -1,28 +1,215 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Global Styles */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@300;400;500&display=swap');
+:root {
+    --primary: #4F46E5;
+    --secondary: #EC4899;
+    --accent: #06B6D4;
+    --background: #0F172A;
+    --surface: #1E293B;
+    --text: #F8FAFC;
+    --subtle: #94A3B8;
+}
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
 body {
+    background: var(--background);
+    color: var(--text);
+    font-family: 'Inter', sans-serif;
+    min-height: 100vh;
+    position: relative;
+    overflow-x: hidden;
+}
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+::-webkit-scrollbar-track {
+    background: var(--surface);
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb {
+    background: var(--primary);
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: var(--secondary);
+}
+/* Glass Effect */
+.glass {
+    background: rgba(30, 41, 59, 0.7);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+/* Gradient Background */
+.gradient-bg {
+    background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
+    background-size: 400% 400%;
+    animation: gradient 15s ease infinite;
+}
+/* Animated Background Grid */
+.bg-grid-white\/10 {
+    background-image:
+        linear-gradient(to right, rgba(255,255,255,.1) 1px, transparent 1px),
+        linear-gradient(to bottom, rgba(255,255,255,.1) 1px, transparent 1px);
+    background-size: 50px 50px;
+}
+/* Neon Glow Effect */
+.neon-glow {
+    position: relative;
+}
+.neon-glow::after {
+    content: '';
+    position: absolute;
+    inset: -2px;
+    background: linear-gradient(45deg, var(--primary), var(--secondary), var(--accent));
+    border-radius: inherit;
+    filter: blur(10px);
+    opacity: 0.5;
+    z-index: -1;
+}
+/* Floating Animation */
+@keyframes float {
+    0%, 100% {
+        transform: translateY(0) rotate(0deg);
+    }
+    50% {
+        transform: translateY(-20px) rotate(5deg);
+    }
+}
+/* Particle Effect */
+.particle {
+    position: absolute;
+    border-radius: 50%;
+    background: radial-gradient(circle at center, var(--accent) 0%, transparent 70%);
+    pointer-events: none;
+}
+/* Responsive Design */
+@media (max-width: 768px) {
+    .container {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+    .hero-section {
+        padding: 2rem 1rem !important;
+    }
+}
+/* Dark Mode Enhancements */
+.dark .invert-dark {
+    filter: invert(1) hue-rotate(180deg);
+}
+/* Loading Animation */
+.loading-dots {
+    display: inline-flex;
+    align-items: center;
+}
+.loading-dots span {
+    width: 8px;
+    height: 8px;
+    margin: 0 3px;
+    background: var(--accent);
+    border-radius: 50%;
+    animation: loading 1.4s ease-in-out infinite;
+}
+.loading-dots span:nth-child(2) {
+    animation-delay: 0.2s;
+}
+.loading-dots span:nth-child(3) {
+    animation-delay: 0.4s;
+}
+@keyframes loading {
+    0%, 100% {
+        transform: scale(1);
+        opacity: 1;
+    }
+    50% {
+        transform: scale(0.5);
+        opacity: 0.5;
+    }
+}
+/* Chat Message Styles */
+.chat-message {
+    max-width: 80%;
+    margin: 1rem 0;
+    padding: 1rem;
+    border-radius: 1rem;
+    position: relative;
+}
+.chat-message.user {
+    background: linear-gradient(135deg, var(--primary), var(--accent));
+    margin-left: auto;
+    border-bottom-right-radius: 0;
 }
+.chat-message.ai {
+    background: var(--surface);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    margin-right: auto;
+    border-bottom-left-radius: 0;
 }
+/* Card Hover Effects */
+.hover-card {
+    transition: all 0.3s ease;
 }
+.hover-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
 }
+/* Typing Animation */
+.typing-indicator {
+    display: inline-flex;
+    align-items: center;
+    padding: 12px 20px;
+    background: var(--surface);
+    border-radius: 25px;
 }
+.typing-indicator span {
+    width: 6px;
+    height: 6px;
+    margin: 0 2px;
+    background: var(--accent);
+    border-radius: 50%;
+    opacity: 0.4;
+    animation: typing 1.5s infinite;
+}
+@keyframes typing {
+    0%, 100% {
+        opacity: 0.4;
+        transform: translateY(0);
+    }
+    50% {
+        opacity: 1;
+        transform: translateY(-5px);
+    }
+}