Spaces:

nomadicsynth
/

neon-cortex-retro-future-oasis

Running

App Files Files Community

nomadicsynth commited on 26 days ago

Commit

0d11506

verified ·

1 Parent(s): 8bdaaaa

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 (2) hide show

README.md +8 -5
index.html +114 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Neon Cortex Retro Future Oasis
-emoji: 🐢
-colorFrom: blue
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Neon Cortex Retro-Future Oasis 🌌
+colorFrom: pink
+colorTo: pink
+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,114 @@
-<!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 | Retro-Future Oasis</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="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="components/submission-card.js"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        'peach': '#FFD6C0',
+                        'coral': '#FF8C6B',
+                        'glass-blue': 'rgba(100, 210, 255, 0.2)',
+                        'glow-blue': 'rgba(100, 210, 255, 0.6)'
+                    },
+                    fontFamily: {
+                        'space-age': ['"Space Age"', 'sans-serif'],
+                        'geometric': ['"Rajdhani"', 'sans-serif']
+                    }
+                }
+            }
+        }
+    </script>
+    <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;700&display=swap" rel="stylesheet">
+</head>
+<body class="bg-cream-50 font-geometric text-gray-800">
+    <custom-navbar></custom-navbar>
+    <main class="max-w-6xl mx-auto px-4 py-12">
+        <!-- Hero Section -->
+        <section class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-peach to-coral p-12 mb-16 shadow-2xl">
+            <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjA1KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNwYXR0ZXJuKSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIvPjwvc3ZnPg==')]"></div>
+            <div class="relative z-10">
+                <h1 class="text-5xl md:text-7xl font-bold mb-6 text-white font-space-age tracking-wide">NEON CORTEX <span class="text-3xl md:text-5xl block mt-2">is figuring out what it is.</span></h1>
+                <p class="text-xl md:text-2xl text-white/90 mb-8 max-w-2xl">Will you help shape this evolving collective consciousness? Join our retro-future community of thinkers and dreamers.</p>
+                <a href="#share" class="inline-block bg-white text-coral px-8 py-3 rounded-full font-bold text-lg hover:bg-gray-100 transition-all transform hover:scale-105 shadow-lg">Share Your Vision</a>
+            </div>
+            <div class="absolute -bottom-20 -right-20 w-64 h-64 rounded-full bg-glass-blue backdrop-blur-md border-2 border-white/20"></div>
+            <div class="absolute -top-10 -left-10 w-40 h-40 rounded-full bg-glow-blue opacity-70"></div>
+        </section>
+        <!-- Community Thoughts -->
+        <section class="mb-20">
+            <h2 class="text-3xl font-bold mb-8 text-center font-space-age">Community Thoughts</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="submissions-container">
+                <!-- Submission cards will be injected here by JavaScript -->
+            </div>
+        </section>
+        <!-- Today's Idea -->
+        <section class="mb-20 relative">
+            <div class="absolute -z-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full h-64 bg-gradient-to-r from-glass-blue to-transparent rounded-full blur-xl opacity-30"></div>
+            <h2 class="text-3xl font-bold mb-8 text-center font-space-age">Today's Featured Idea</h2>
+            <div class="bg-white p-8 rounded-3xl shadow-xl border border-gray-100 relative overflow-hidden">
+                <div class="absolute top-0 right-0 w-32 h-32 bg-glow-blue rounded-full filter blur-3xl opacity-30"></div>
+                <div class="absolute bottom-0 left-0 w-20 h-20 bg-peach rounded-full filter blur-xl opacity-20"></div>
+                <h3 class="text-2xl font-bold mb-4 text-coral">The Biomorphic Network</h3>
+                <p class="text-lg mb-6">Imagine a digital ecosystem that grows and evolves like a living organism, with neural pathways that mimic plant root systems. Each user interaction becomes a nutrient that feeds the collective intelligence.</p>
+                <div class="flex items-center">
+                    <div class="w-10 h-10 rounded-full bg-gradient-to-br from-peach to-coral mr-3"></div>
+                    <div>
+                        <p class="font-bold">Lena K.</p>
+                        <p class="text-sm text-gray-500">Submitted 2 days ago</p>
+                    </div>
+                </div>
+                <div class="absolute bottom-4 right-4">
+                    <i data-feather="hexagon" class="text-glass-blue w-12 h-12"></i>
+                </div>
+            </div>
+        </section>
+        <!-- Share Form -->
+        <section id="share" class="bg-white rounded-3xl shadow-xl p-8 border border-gray-100 relative overflow-hidden">
+            <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-peach via-coral to-glass-blue"></div>
+            <div class="absolute -bottom-20 -right-20 w-64 h-64 rounded-full bg-glass-blue backdrop-blur-md border-2 border-white/20"></div>
+            <h2 class="text-3xl font-bold mb-8 text-center font-space-age">Share Your Thoughts</h2>
+            <form id="submission-form" class="max-w-2xl mx-auto">
+                <div class="mb-6">
+                    <label for="name" class="block text-lg mb-2">Your Name (optional)</label>
+                    <input type="text" id="name" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-coral focus:border-transparent bg-white/80 backdrop-blur-sm">
+                </div>
+                <div class="mb-6">
+                    <label for="thought" class="block text-lg mb-2">Your Idea</label>
+                    <textarea id="thought" rows="6" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-coral focus:border-transparent bg-white/80 backdrop-blur-sm" placeholder="What vision of the future excites you?"></textarea>
+                </div>
+                <button type="submit" class="w-full bg-gradient-to-r from-peach to-coral text-white px-6 py-4 rounded-xl font-bold text-lg hover:opacity-90 transition-all transform hover:scale-[1.01] shadow-lg">
+                    Submit to the Collective
+                </button>
+            </form>
+        </section>
+    </main>
+    <custom-footer></custom-footer>
+    <script>
+        feather.replace();
+        // Sample submissions data
+        const submissions = [
+            {
+                id: 1,
+                title: "Floating Cities",
+                content: "Why can't our cities float among the clouds? With anti-gravity tech, we could create mobile metropolises that follow the sun.",
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>