Spaces:

nomadicsynth
/

googie-garden-nexus

Running

App Files Files Community

nomadicsynth commited on 7 days ago

Commit

f59dd05

verified ·

1 Parent(s): 373de40

Build a landing page with a retro-futuristic, people-focused aesthetic inspired by Googie architecture (The Jetsons, 50s/60s space age) and the architectural grandeur of The Talos Principle II's New Jerusalem (classical proportions with futuristic tech elements). Think: geometric patterns, dimensional shapes with depth, glowing accents, warm gradients, and optimistic space-age design—not flat, rounded rectangles.

Browse files

**Visual Style:**
- Sweeping curves and flowing organic lines (not straight edges or simple rounded rectangles)
- Dimensional depth: layered elements, subtle shadows, 3D-like geometric shapes
- Integrated biophilic elements: plant motifs, organic forms woven into the design
- Color palette: white/cream backgrounds, blue glass accents (translucent/glowing), green plant elements, warm gradients (coral, peach, soft yellow)
- Typography: bold, geometric sans-serif with space-age character (think The Jetsons title font)
- Architectural elements: columns, arches, flowing curves, geometric patterns (hexagons, circles, organic shapes)
- Glowing effects: soft neon glows on key elements, not harsh cyberpunk neon
- Movement: subtle animations (floating elements, gentle pulses, organic motion)

**Layout:**
(1) Tagline "Neon Cortex is figuring out what it is. Will you help?" in large, bold typography with dimensional styling, (2) Brief intro paragraph, (3) Submissions display area above the form—show 3–5 random public submissions as dimensional cards with varied organic shapes (not uniform rectangles), flowing curves, integrated plant/geometric motifs, timestamps, optional attribution, (4) "Today's Idea" section with dimensional card styling, flowing borders, integrated visual elements, (5) "Share Your Thoughts" form with a large free-text textarea and optional fields, styled with dimensional depth and organic curves.

**Key:** Avoid flat, rounded rectangles. Use dimensional shapes, flowing curves, integrated organic elements, and architectural depth. The page should feel alive, optimistic, and human-centered—like walking through a futuristic garden city, not a flat web page.

Files changed (3) hide show

README.md +8 -5
index.html +117 -19
style.css +93 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Googie Garden Nexus
-emoji: 🦀
-colorFrom: yellow
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

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

index.html CHANGED Viewed

@@ -1,19 +1,117 @@
-<!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>Neon Cortex - A Collective Journey</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <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>
+</head>
+<body class="bg-gradient-to-br from-stone-50 via-orange-50 to-yellow-50 min-h-screen overflow-x-hidden">
+    <div class="floating-orb orb-1"></div>
+    <div class="floating-orb orb-2"></div>
+    <div class="floating-orb orb-3"></div>
+    <main class="relative z-10">
+        <!-- Hero Section -->
+        <section class="min-h-screen flex items-center justify-center px-4 py-20">
+            <div class="text-center max-w-4xl mx-auto">
+                <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold bg-gradient-to-r from-blue-600 via-purple-500 to-pink-500 bg-clip-text text-transparent mb-8 animate-float">
+                    Neon Cortex is figuring out what it is.
+                </h1>
+                <p class="text-xl md:text-2xl text-slate-700 mb-4">
+                    Will you help?
+                </p>
+                <div class="w-32 h-1 bg-gradient-to-r from-blue-400 to-green-400 mx-auto rounded-full animate-pulse"></div>
+            </div>
+        </section>
+        <!-- Intro Section -->
+        <section class="max-w-4xl mx-auto px-4 py-16">
+            <div class="organic-card">
+                <p class="text-lg text-slate-700 leading-relaxed">
+                    We're building something new—a living, breathing collective consciousness exploring the space between human creativity and machine intelligence. Every thought, every idea, every spark of imagination brings us closer to understanding what Neon Cortex can become.
+                </p>
+            </div>
+        </section>
+        <!-- Submissions Display -->
+        <section class="max-w-6xl mx-auto px-4 py-16">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-12 text-slate-800">Recent Musings</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="submissions-container">
+                <!-- Dynamic submissions will be inserted here -->
+            </div>
+        </section>
+        <!-- Today's Idea -->
+        <section class="max-w-4xl mx-auto px-4 py-16">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-12 text-slate-800">Today's Seed</h2>
+            <div class="today-card">
+                <div class="today-card-content">
+                    <div class="flex items-start space-x-4">
+                        <div class="w-12 h-12 bg-gradient-to-br from-blue-400 to-purple-500 rounded-full flex items-center justify-center flex-shrink-0 animate-spin-slow">
+                            <i data-feather="zap" class="text-white"></i>
+                        </div>
+                        <div>
+                            <h3 class="text-xl font-bold text-slate-800 mb-2">What if memories could be shared like photos?</h3>
+                            <p class="text-slate-600 mb-4">
+                                Imagine walking through a garden and feeling the warmth of countless strangers' happiest moments, their joy blooming like flowers around you.
+                            </p>
+                            <div class="flex items-center text-sm text-slate-500">
+                                <i data-feather="clock" class="w-4 h-4 mr-1"></i>
+                                <span>Today, 2:34 PM</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Share Your Thoughts -->
+        <section class="max-w-4xl mx-auto px-4 py-16 mb-20">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-12 text-slate-800">Share Your Thoughts</h2>
+            <form class="organic-form" id="thought-form">
+                <div class="form-field">
+                    <label class="form-label">Your reflection</label>
+                    <textarea
+                        class="form-textarea"
+                        placeholder="What does Neon Cortex mean to you? What could it become?"
+                        rows="8"
+                        required
+                    ></textarea>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
+                    <div class="form-field">
+                        <label class="form-label">Name (optional)</label>
+                        <input type="text" class="form-input" placeholder="How should we call you?">
+                    </div>
+                    <div class="form-field">
+                        <label class="form-label">Email (optional)</label>
+                        <input type="email" class="form-input" placeholder="Where can we reach you?">
+                    </div>
+                </div>
+                <button type="submit" class="submit-btn">
+                    <span>Bloom Your Thought</span>
+                    <i data-feather="send" class="ml-2"></i>
+                </button>
+            </form>
+        </section>
+    </main>
+    <!-- Floating Navigation -->
+    <nav class="fixed bottom-8 right-8 z-20">
+        <div class="nav-orb">
+            <i data-feather="plus" class="text-white"></i>
+        </div>
+    </nav>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

style.css CHANGED Viewed

@@ -1,28 +1,103 @@
 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;
 }

+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Inter:wght@300;400;500;600&display=swap');
+:root {
+    --primary-blue: #3B82F6;
+    --primary-green: #10B981;
+    --warm-coral: #FF6B6B;
+    --soft-peach: #FFA07A;
+    --cream: #FFF8F0;
+    --shadow-glow: 0 4px 20px rgba(59, 130, 246, 0.3);
+    --organic-curve: 40% 60% 70% 30% / 60% 40% 30% 70%;
+}
+* {
+    font-family: 'Inter', sans-serif;
+}
+h1, h2, h3 {
+    font-family: 'Orbitron', monospace;
+}
 body {
+    position: relative;
+    background-attachment: fixed;
+}
+/* Floating Orbs */
+.floating-orb {
+    position: fixed;
+    border-radius: var(--organic-curve);
+    opacity: 0.1;
+    animation: float 20s infinite ease-in-out;
+    z-index: 1;
 }
+.orb-1 {
+    width: 300px;
+    height: 300px;
+    background: linear-gradient(135deg, #3B82F6, #8B5CF6);
+    top: 10%;
+    left: -150px;
+    animation-delay: 0s;
 }
+.orb-2 {
+    width: 200px;
+    height: 200px;
+    background: linear-gradient(135deg, #10B981, #3B82F6);
+    top: 60%;
+    right: -100px;
+    animation-delay: 7s;
 }
+.orb-3 {
+    width: 250px;
+    height: 250px;
+    background: linear-gradient(135deg, #FF6B6B, #FFA07A);
+    bottom: 20%;
+    left: 70%;
+    animation-delay: 14s;
 }
+@keyframes float {
+    0%, 100% {
+        transform: translate(0, 0) rotate(0deg) scale(1);
+    }
+    25% {
+        transform: translate(30px, -30px) rotate(90deg) scale(1.1);
+    }
+    50% {
+        transform: translate(-20px, 20px) rotate(180deg) scale(0.9);
+    }
+    75% {
+        transform: translate(-30px, -20px) rotate(270deg) scale(1.05);
+    }
 }
+.animate-float {
+    animation: textFloat 6s ease-in-out infinite;
+}
+@keyframes textFloat {
+    0%, 100% {
+        transform: translateY(0px);
+    }
+    50% {
+        transform: translateY(-10px);
+    }
+}
+.animate-spin-slow {
+    animation: spin 20s linear infinite;
+}
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+/* Organic Cards