Spaces:

Donmega2050
/

omnihive-glassos

Running

App Files Files Community

Donmega2050 commited on Oct 14, 2025

Commit

fe47c0d

verified ·

1 Parent(s): a69a804

“Redesign this site around the principle Invisible AI, Intuitive Experience.

Browse files

Use an Apple-level minimal glass aesthetic.
Include sections in this order:

Hero (headline: ‘One vision. Quietly handled by many agents.’; sub: ‘You share a problem. We return working software.’; primary CTA ‘Submit an idea’; secondary ‘See the Hive’).

Proof row with 3 trust badges: Private by default · Transparent R&D · Audit-ready.

‘How it works’ in 3 steps with clean icons: Idea → Agents Build → You Launch.

Live Hive feed block (blog-style cards) pulling from /hive.

Showcase grid with Problem → Outcome → 30-sec demo video per card.

About (organism metaphor, values, governance).

Contact & Gated Access (investors/partners).

Design system: Inter font; H48/56, B16/28; neutral palette, subtle glass blur; two elevations (card, modal).
Components to include: Glass Card, Stat Tile, Step Row, Trust Badge, Idea Form, Update Chip.
Microcopy exactly as provided above.
Accessibility AA+, keyboard first, reduced motion mode.
Performance targets: LCP < 2s on 4G, JS < 120KB, no blocking fonts.
Security banners: set CSP, HSTS, SRI, and remove third-party scripts unless essential.”

Files changed (2) hide show

README.md +8 -4
index.html +695 -18

README.md CHANGED Viewed

@@ -1,10 +1,14 @@
 ---
-title: Omnihive Glassos
-emoji: 📊
 colorFrom: purple
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: OmniHive GlassOS 🐝
 colorFrom: purple
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,696 @@
-<!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">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https:; connect-src 'self'">
+    <meta http-equiv="Strict-Transport-Security" content="max-age=31536000; includeSubDomains">
+    <title>OmniHive - Invisible AI, Intuitive Experience</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: #fafafa;
+            --bg-secondary: rgba(255, 255, 255, 0.8);
+            --bg-glass: rgba(255, 255, 255, 0.6);
+            --bg-modal: rgba(255, 255, 255, 0.95);
+            --text-primary: #1a1a1a;
+            --text-secondary: #666;
+            --accent: #007AFF;
+            --border: rgba(0, 0, 0, 0.1);
+            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
+            --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
+            --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
+        }
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --bg-primary: #000;
+                --bg-secondary: rgba(30, 30, 30, 0.8);
+                --bg-glass: rgba(30, 30, 30, 0.6);
+                --bg-modal: rgba(40, 40, 40, 0.95);
+                --text-primary: #fff;
+                --text-secondary: #ccc;
+                --border: rgba(255, 255, 255, 0.1);
+            }
+        }
+        @media (prefers-reduced-motion: reduce) {
+            * {
+                animation-duration: 0.01ms !important;
+                animation-iteration-count: 1 !important;
+                transition-duration: 0.01ms !important;
+            }
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.6;
+            font-size: 16px;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+        /* Typography */
+        h1 { font-size: 56px; font-weight: 600; line-height: 1.1; }
+        h2 { font-size: 48px; font-weight: 600; line-height: 1.2; }
+        h3 { font-size: 32px; font-weight: 600; }
+        h4 { font-size: 24px; font-weight: 500; }
+        .body-large { font-size: 28px; font-weight: 400; }
+        .body-regular { font-size: 16px; font-weight: 400; }
+        /* Glass Components */
+        .glass-card {
+            background: var(--bg-glass);
+            backdrop-filter: blur(20px);
+            border: 1px solid var(--border);
+            border-radius: 20px;
+            box-shadow: var(--shadow-sm);
+        }
+        .glass-modal {
+            background: var(--bg-modal);
+            backdrop-filter: blur(40px);
+            border: 1px solid var(--border);
+            border-radius: 24px;
+            box-shadow: var(--shadow-lg);
+        }
+        .stat-tile {
+            padding: 24px;
+            text-align: center;
+            border-radius: 16px;
+        }
+        .trust-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 16px;
+            background: var(--bg-secondary);
+            border-radius: 100px;
+            font-size: 14px;
+            font-weight: 500;
+        }
+        .step-row {
+            display: flex;
+            gap: 32px;
+            align-items: flex-start;
+        }
+        .step-item {
+            flex: 1;
+            text-align: center;
+        }
+        .step-icon {
+            width: 64px;
+            height: 64px;
+            margin: 0 auto 20px;
+            background: var(--accent);
+            border-radius: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .update-chip {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 4px 12px;
+            background: var(--accent);
+            color: white;
+            border-radius: 100px;
+            font-size: 12px;
+            font-weight: 500;
+        }
+        /* Sections */
+        .hero {
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            padding: 80px 20px;
+        }
+        .section {
+            padding: 80px 0;
+        }
+        .proof-row {
+            display: flex;
+            justify-content: center;
+            gap: 24px;
+            flex-wrap: wrap;
+        }
+        .hive-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 24px;
+            margin-top: 40px;
+        }
+        .showcase-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+            gap: 32px;
+        }
+        .showcase-card {
+            padding: 24px;
+        }
+        /* Buttons & Forms */
+        .btn-primary {
+            background: var(--accent);
+            color: white;
+            padding: 16px 32px;
+            border-radius: 100px;
+            border: none;
+            font-size: 16px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+        .btn-primary:hover {
+            transform: translateY(-1px);
+            box-shadow: var(--shadow-md);
+        }
+        .btn-secondary {
+            background: transparent;
+            color: var(--text-primary);
+            padding: 16px 32px;
+            border: 1px solid var(--border);
+            border-radius: 100px;
+            font-size: 16px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+        .idea-form {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            max-width: 400px;
+            margin: 0 auto;
+        }
+        .form-input {
+            padding: 16px;
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            background: var(--bg-secondary);
+            font-size: 16px;
+        }
+        /* Navigation */
+        .nav {
+            position: fixed;
+            top: 0;
+            width: 100%;
+            padding: 20px;
+            background: var(--bg-secondary);
+            backdrop-filter: blur(20px);
+            z-index: 1000;
+        }
+        .nav-content {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        /* Accessibility */
+        @media (max-width: 768px) {
+            h1 { font-size: 40px; }
+            h2 { font-size: 32px; }
+            .body-large { font-size: 20px; }
+            .step-row {
+                flex-direction: column;
+                gap: 40px;
+            }
+            .proof-row {
+                flex-direction: column;
+                align-items: center;
+            }
+        }
+        .skip-link {
+            position: absolute;
+            top: -40px;
+            left: 0;
+            background: var(--accent);
+            color: white;
+            padding: 8px 16px;
+            z-index: 1001;
+        }
+        .skip-link:focus {
+            top: 0;
+        }
+        /* Focus styles */
+        button:focus,
+        input:focus,
+        textarea:focus {
+            outline: 2px solid var(--accent);
+            outline-offset: 2px;
+        }
+    </style>
+<style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: #000010;
+            color: white;
+            overflow-x: hidden;
+        }
+        #vanta-bg {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 0;
+        }
+        .hero-section {
+            position: relative;
+            height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+        }
+        .liquid-background {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0.3;
+            z-index: 1;
+        }
+        .liquid-particle {
+            position: absolute;
+            background: radial-gradient(circle, #00D4FF 0%, transparent 70%);
+            border-radius: 50%;
+            animation: float 6s infinite ease-in-out;
+        }
+        @keyframes float {
+            0%, 100% { transform: translateY(0px) scale(1); }
+            50% { transform: translateY(-20px) scale(1.1); }
+        }
+        .glass-container {
+            position: relative;
+            z-index: 20;
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 24px;
+            padding: 60px 40px;
+            text-align: center;
+            max-width: 800px;
+            margin: 0 20px;
+            box-shadow: 0 25px 50px rgba(0, 212, 255, 0.1);
+        }
+        .logo {
+            font-size: 4.5rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, #00D4FF 0%, #00FFE0 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 1rem;
+            letter-spacing: -2px;
+        }
+        .tagline {
+            font-size: 1.3rem;
+            font-weight: 300;
+            color: rgba(255, 255, 255, 0.8);
+            letter-spacing: 3px;
+            margin-bottom: 3rem;
+            text-transform: uppercase;
+        }
+        .cta-button {
+            background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 255, 224, 0.2) 100%);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(0, 212, 255, 0.3);
+            color: white;
+            padding: 18px 40px;
+            font-size: 1.1rem;
+            border-radius: 50px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        .cta-button::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+            transition: left 0.5s;
+        }
+        .cta-button:hover::before {
+            left: 100%;
+        }
+        .cta-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
+        }
+        .email-form {
+            margin-top: 2rem;
+            display: flex;
+            gap: 15px;
+            justify-content: center;
+        }
+        .email-input {
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 50px;
+            padding: 15px 25px;
+            color: white;
+            font-size: 1rem;
+            min-width: 300px;
+            backdrop-filter: blur(10px);
+        }
+        .email-input::placeholder {
+            color: rgba(255, 255, 255, 0.6);
+        }
+        .nav-container {
+            position: fixed;
+            top: 0;
+            width: 100%;
+            z-index: 100;
+            padding: 1.5rem 2rem;
+            backdrop-filter: blur(10px);
+            background: rgba(0, 0, 16, 0.7);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .nav-content {
+            max-width: 1200px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .nav-logo {
+            font-size: 1.8rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, #00D4FF 0%, #00FFE0 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .nav-links {
+            display: flex;
+            gap: 2rem;
+        }
+        .nav-link {
+            color: rgba(255, 255, 255, 0.8);
+            text-decoration: none;
+            font-weight: 500;
+            transition: color 0.3s ease;
+        }
+        .nav-link:hover {
+            color: #00D4FF;
+        }
+        .mobile-menu-btn {
+            display: none;
+        }
+        @media (max-width: 768px) {
+            .glass-container {
+                padding: 40px 20px;
+                margin: 0 15px;
+            }
+            .logo {
+                font-size: 3rem;
+            }
+            .tagline {
+                font-size: 1rem;
+                letter-spacing: 2px;
+            }
+            .email-form {
+                flex-direction: column;
+                align-items: center;
+            }
+            .email-input {
+                min-width: 250px;
+            }
+            .nav-links {
+                display: none;
+            }
+            .mobile-menu-btn {
+                display: block;
+            }
+        }
+    </style>
+</head>
+<body>
+    <a href="#main" class="skip-link">Skip to main content</a>
+    <nav class="nav">
+        <div class="nav-content">
+            <div class="nav-logo">OmniHive</div>
+            <button class="btn-secondary">See the Hive</button>
+        </div>
+    </nav>
+    <main id="main">
+        <!-- Hero Section -->
+        <section class="hero">
+            <div class="container">
+                <h1>One vision. Quietly handled by many agents.</h1>
+                <p class="body-large">You share a problem. We return working software.</p>
+                <div style="margin: 40px 0; display: flex; gap: 16px; justify-content: center;">
+                    <button class="btn-primary">Submit an idea</button>
+                    <button class="btn-secondary">See the Hive</button>
+                </div>
+            </div>
+        </section>
+        <!-- Proof Row -->
+        <section class="section">
+            <div class="container">
+                <div class="proof-row">
+                    <span class="trust-badge">Private by default</span>
+                    <span class="trust-badge">Transparent R&D</span>
+                    <span class="trust-badge">Audit-ready</span>
+                </div>
+            </div>
+        </section>
+        <!-- How It Works -->
+        <section class="section">
+            <div class="container">
+                <h2 style="text-align: center; margin-bottom: 60px;">How it works</h2>
+                <div class="step-row">
+                    <div class="step-item">
+                        <div class="step-icon">💡</div>
+                        <h4>Idea</h4>
+                        <p class="body-regular">Share your problem or vision with our system</p>
+                    </div>
+                    <div class="step-item">
+                        <div class="step-icon">🤖</div>
+                        <h4>Agents Build</h4>
+                        <p class="body-regular">Our AI agents collaborate to create the solution</p>
+                    </div>
+                    <div class="step-item">
+                        <div class="step-icon">🚀</div>
+                        <h4>You Launch</h4>
+                        <p class="body-regular">Receive working software ready for deployment</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Live Hive Feed -->
+        <section class="section">
+            <div class="container">
+                <h2 style="text-align: center; margin-bottom: 40px;">Live Hive Activity</h2>
+                <div class="hive-grid">
+                    <div class="glass-card" style="padding: 24px;">
+                        <span class="update-chip">New</span>
+                        <h4 style="margin: 16px 0 8px;">E-commerce API Integration</h4>
+                        <p class="body-regular">Completed integration with Shopify API for inventory management</p>
+                    </div>
+                    <div class="glass-card" style="padding: 24px;">
+                        <span class="update-chip">In Progress</span>
+                        <h4 style="margin: 16px 0 8px;">Data Visualization Dashboard</h4>
+                        <p class="body-regular">Building real-time analytics dashboard with D3.js integration</p>
+                    </div>
+                    <div class="glass-card" style="padding: 24px;">
+                        <span class="update-chip">Completed</span>
+                        <h4 style="margin: 16px 0 8px;">Mobile App Prototype</h4>
+                        <p class="body-regular">Delivered React Native prototype for fitness tracking application</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Showcase Grid -->
+        <section class="section">
+            <div class="container">
+                <h2 style="text-align: center; margin-bottom: 40px;">Problem → Outcome</h2>
+                <div class="showcase-grid">
+                    <div class="glass-card showcase-card">
+                        <h4>Problem: Inventory Management</h4>
+                        <p style="margin: 16px 0;">Small business struggling with stock tracking</p>
+                        <div style="background: var(--border); height: 180px; border-radius: 12px; display: flex; align-items: center; justify-content: center;">
+                            <span>30-sec demo video</span>
+                        </div>
+                        <p style="margin-top: 16px; font-weight: 500;">Outcome: Automated inventory system with real-time updates</p>
+                    </div>
+                    <div class="glass-card showcase-card">
+                        <h4>Problem: Customer Support</h4>
+                        <p style="margin: 16px 0;">High volume of repetitive support queries</p>
+                        <div style="background: var(--border); height: 180px; border-radius: 12px; display: flex; align-items: center; justify-content: center;">
+                            <span>30-sec demo video</span>
+                        </div>
+                        <p style="margin-top: 16px; font-weight: 500;">Outcome: AI-powered chatbot handling 80% of queries</p>
+                    </div>
+                    <div class="glass-card showcase-card">
+                        <h4>Problem: Data Analysis</h4>
+                        <p style="margin: 16px 0;">Manual data processing taking hours daily</p>
+                        <div style="background: var(--border); height: 180px; border-radius: 12px; display: flex; align-items: center; justify-content: center;">
+                            <span>30-sec demo video</span>
+                        </div>
+                        <p style="margin-top: 16px; font-weight: 500;">Outcome: Automated reporting system with one-click generation</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- About Section -->
+        <section class="section">
+            <div class="container">
+                <h2 style="text-align: center; margin-bottom: 40px;">The Organism</h2>
+                <div class="glass-card" style="padding: 40px; text-align: center;">
+                    <h3 style="margin-bottom: 24px;">Our values shape every interaction</h3>
+                    <p class="body-regular" style="margin-bottom: 32px;">
+                        Like a complex organism, our system operates through specialized agents working in harmony.
+                        Each component has a purpose, each interaction is intentional, and the whole is greater than the sum of its parts.
+                    </p>
+                    <div class="proof-row">
+                        <span class="trust-badge">Transparency</span>
+                        <span class="trust-badge">Efficiency</span>
+                        <span class="trust-badge">Privacy</span>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Contact Section -->
+        <section class="section">
+            <div class="container">
+                <h2 style="text-align: center; margin-bottom: 40px;">Gated Access</h2>
+                <div class="glass-modal" style="padding: 40px; max-width: 500px; margin: 0 auto;">
+                    <h4 style="text-align: center; margin-bottom: 24px;">For investors & partners</h4>
+                    <form class="idea-form">
+                        <input type="text" class="form-input" placeholder="Name" required>
+                        <input type="email" class="form-input" placeholder="Email" required>
+                        <input type="text" class="form-input" placeholder="Company">
+                        <textarea class="form-input" placeholder="Message" rows="4" required></textarea>
+                        <button type="submit" class="btn-primary">Request Access</button>
+                    </form>
+                </div>
+            </div>
+        </section>
+    </main>
+<script>
+    <script>
+        // Minimal interactive enhancements
+        document.querySelectorAll('.btn-primary, .btn-secondary').forEach(button => {
+            button.addEventListener('click', function(e) {
+                e.preventDefault();
+                if (this.textContent === 'Submit an idea') {
+                    // Scroll to contact form
+                    document.querySelector('.idea-form')?.scrollIntoView({ behavior: 'smooth' });
+                } else if (this.textContent === 'See the Hive') {
+                    // Scroll to hive section
+                    document.querySelector('.hive-grid')?.scrollIntoView({ behavior: 'smooth' });
+                }
+            });
+        });
+        // Form handling
+        document.querySelector('.idea-form')?.addEventListener('submit', function(e) {
+            e.preventDefault();
+            const formData = new FormData(this);
+            console.log('Form submitted:', Object.fromEntries(formData));
+            this.innerHTML = '<p style="text-align: center; padding: 40px;">Thank you for your interest. We\'ll be in touch soon.</p>';
+        });
+        // Keyboard navigation
+        document.addEventListener('keydown', function(e) {
+            if (e.key === 'Tab') {
+                document.documentElement.style.scrollBehavior = 'smooth';
+            }
+        });
+    </script>
+</body>
 </html>