Spaces:

Jaspior
/

vibegaming

Running

App Files Files Community

Jaspior commited on May 26, 2025

Commit

5e0103c

verified ·

1 Parent(s): e024ee6

Add 3 files

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +746 -19
prompts.txt +0 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Vibegaming
-emoji: 💻
-colorFrom: yellow
 colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: vibegaming
+emoji: 🐳
+colorFrom: pink
 colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,746 @@
-<!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>Vibe Gaming | Cyberpunk AI-Co-Created Games</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        cyberpink: '#ff2a6d',
+                        cyberblue: '#05d9fe',
+                        cyberpurple: '#d300c5',
+                        cyberyellow: '#ffe70d',
+                        dark: '#0d0221',
+                        darker: '#070118',
+                    },
+                    fontFamily: {
+                        'cyber': ['"Rajdhani"', 'sans-serif'],
+                        'retro': ['"Press Start 2P"', 'cursive'],
+                    },
+                    boxShadow: {
+                        'neon': '0 0 10px #05d9fe, 0 0 20px #05d9fe, 0 0 40px #05d9fe',
+                        'neon-pink': '0 0 10px #ff2a6d, 0 0 20px #ff2a6d, 0 0 40px #ff2a6d',
+                        'neon-purple': '0 0 10px #d300c5, 0 0 20px #d300c5, 0 0 40px #d300c5',
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+        body {
+            font-family: 'Rajdhani', sans-serif;
+            background-color: #0d0221;
+            color: #05d9fe;
+            overflow-x: hidden;
+        }
+        .cyber-text {
+            text-shadow: 0 0 5px #05d9fe, 0 0 10px #05d9fe;
+        }
+        .pink-text {
+            text-shadow: 0 0 5px #ff2a6d, 0 0 10px #ff2a6d;
+        }
+        .purple-text {
+            text-shadow: 0 0 5px #d300c5, 0 0 10px #d300c5;
+        }
+        .scanlines {
+            position: relative;
+        }
+        .scanlines::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(
+                to bottom,
+                rgba(5, 217, 254, 0.05) 0%,
+                rgba(5, 217, 254, 0.05) 50%,
+                transparent 50%,
+                transparent 100%
+            );
+            background-size: 100% 4px;
+            pointer-events: none;
+            z-index: 10; /* Lowered z-index as the main vignette is removed */
+        }
+        .glitch {
+            position: relative;
+        }
+        .glitch::before, .glitch::after {
+            content: attr(data-text);
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: #0d0221; /* Match body background */
+        }
+        .glitch::before {
+            left: 2px;
+            text-shadow: -2px 0 #ff2a6d;
+            clip: rect(44px, 450px, 56px, 0);
+            animation: glitch-anim-1 2s infinite linear alternate-reverse;
+        }
+        .glitch::after {
+            left: -2px;
+            text-shadow: -2px 0 #05d9fe;
+            clip: rect(44px, 450px, 56px, 0);
+            animation: glitch-anim-2 2s infinite linear alternate-reverse;
+        }
+        @keyframes glitch-anim-1 {
+            0% { clip: rect(32px, 9999px, 78px, 0); }
+            20% { clip: rect(74px, 9999px, 98px, 0); }
+            40% { clip: rect(23px, 9999px, 34px, 0); }
+            60% { clip: rect(85px, 9999px, 99px, 0); }
+            80% { clip: rect(12px, 9999px, 56px, 0); }
+            100% { clip: rect(54px, 9999px, 87px, 0); }
+        }
+        @keyframes glitch-anim-2 {
+            0% { clip: rect(65px, 9999px, 119px, 0); }
+            20% { clip: rect(25px, 9999px, 145px, 0); }
+            40% { clip: rect(88px, 9999px, 132px, 0); }
+            60% { clip: rect(12px, 9999px, 77px, 0); }
+            80% { clip: rect(34px, 9999px, 111px, 0); }
+            100% { clip: rect(76px, 9999px, 92px, 0); }
+        }
+        .neon-card {
+            position: relative;
+            background: linear-gradient(135deg, #0d0221 0%, #1a0345 100%);
+            border: 1px solid #05d9fe;
+            box-shadow: 0 0 15px rgba(5, 217, 254, 0.5);
+            transition: all 0.3s ease;
+            overflow: hidden;
+        }
+        .neon-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 0 25px rgba(5, 217, 254, 0.8);
+        }
+        .neon-card::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: linear-gradient(
+                to bottom right,
+                rgba(5, 217, 254, 0) 0%,
+                rgba(5, 217, 254, 0) 35%,
+                rgba(5, 217, 254, 0.1) 45%,
+                rgba(5, 217, 254, 0.3) 50%,
+                rgba(5, 217, 254, 0.1) 55%,
+                rgba(5, 217, 254, 0) 65%,
+                rgba(5, 217, 254, 0) 100%
+            );
+            transform: rotate(30deg);
+            animation: shine 3s infinite;
+        }
+        @keyframes shine {
+            0% { left: -50%; }
+            20% { left: 100%; }
+            100% { left: 100%; }
+        }
+        .neon-button {
+            position: relative;
+            overflow: hidden;
+            transition: all 0.3s ease;
+            z-index: 1;
+        }
+        .neon-button::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(
+                90deg,
+                transparent,
+                rgba(5, 217, 254, 0.4),
+                transparent
+            );
+            transition: all 0.5s ease;
+            z-index: -1;
+        }
+        .neon-button:hover::before {
+            left: 100%;
+        }
+        .grid-pattern {
+            background:
+                linear-gradient(rgba(5, 217, 254, 0.1) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(5, 217, 254, 0.1) 1px, transparent 1px);
+            background-size: 20px 20px;
+        }
+        .terminal {
+            background-color: rgba(13, 2, 33, 0.8);
+            border: 1px solid #05d9fe;
+            box-shadow: 0 0 15px rgba(5, 217, 254, 0.5);
+            font-family: 'Courier New', monospace;
+            color: #05d9fe;
+            padding: 20px;
+            position: relative;
+        }
+        .terminal::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 20px;
+            background: linear-gradient(90deg, #ff2a6d, #d300c5, #05d9fe);
+            opacity: 0.3;
+        }
+        .blink {
+            animation: blink 1s step-end infinite;
+        }
+        @keyframes blink {
+            from, to { opacity: 1; }
+            50% { opacity: 0; }
+        }
+        .pixel-grid {
+            background-image:
+                linear-gradient(rgba(5, 217, 254, 0.3) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(5, 217, 254, 0.3) 1px, transparent 1px);
+            background-size: 20px 20px;
+        }
+    </style>
+</head>
+<body class="scanlines">
+    <nav class="bg-darker bg-opacity-90 backdrop-blur-md fixed w-full z-50 border-b border-cyberblue border-opacity-30">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex items-center justify-between h-16">
+                <div class="flex items-center">
+                    <div class="flex-shrink-0">
+                        <span class="text-2xl font-bold cyber-text">VIBE<span class="pink-text">GAMING</span></span>
+                    </div>
+                </div>
+                <div class="hidden md:block">
+                    <div class="ml-10 flex items-baseline space-x-4">
+                        <a href="#games" class="px-3 py-2 rounded-md text-sm font-medium hover:text-cyberyellow transition-all duration-300 hover:bg-black hover:bg-opacity-30">GAMES</a>
+                        <a href="#about" class="px-3 py-2 rounded-md text-sm font-medium hover:text-cyberyellow transition-all duration-300 hover:bg-black hover:bg-opacity-30">ABOUT</a>
+                        <a href="#process" class="px-3 py-2 rounded-md text-sm font-medium hover:text-cyberyellow transition-all duration-300 hover:bg-black hover:bg-opacity-30">AI PROCESS</a>
+                        <a href="#contact" class="px-3 py-2 rounded-md text-sm font-medium hover:text-cyberyellow transition-all duration-300 hover:bg-black hover:bg-opacity-30">CONTACT</a>
+                    </div>
+                </div>
+                <div class="md:hidden">
+                    <button class="mobile-menu-button p-2 rounded-md hover:bg-black hover:bg-opacity-30 focus:outline-none">
+                        <svg class="h-6 w-6 text-cyberblue" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div class="mobile-menu hidden md:hidden bg-darker border-t border-cyberblue border-opacity-30">
+            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
+                <a href="#games" class="block px-3 py-2 rounded-md text-base font-medium hover:text-cyberyellow transition-all duration-300 hover:bg-black hover:bg-opacity-30">GAMES</a>
+                <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium hover:text-cyberyellow transition-all duration-300 hover:bg-black hover:bg-opacity-30">ABOUT</a>
+                <a href="#process" class="block px-3 py-2 rounded-md text-base font-medium hover:text-cyberyellow transition-all duration-300 hover:bg-black hover:bg-opacity-30">AI PROCESS</a>
+                <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium hover:text-cyberyellow transition-all duration-300 hover:bg-black hover:bg-opacity-30">CONTACT</a>
+            </div>
+        </div>
+    </nav>
+    <header class="relative pt-24 pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden">
+        <div class="absolute inset-0 pixel-grid"></div>
+        <div class="absolute top-1/4 left-1/4 w-32 h-32 rounded-full bg-cyberblue opacity-20 blur-3xl"></div>
+        <div class="absolute bottom-1/4 right-1/4 w-40 h-40 rounded-full bg-cyberpink opacity-20 blur-3xl"></div>
+        <div class="max-w-7xl mx-auto text-center relative z-10">
+            <h1 class="text-4xl md:text-6xl font-bold mb-6 glitch" data-text="AI-CO-CREATED">
+                <span class="cyber-text">AI-CO-CREATED</span>
+            </h1>
+            <h2 class="text-3xl md:text-5xl font-bold mb-6">
+                <span class="pink-text">CYBERPUNK</span> <span class="cyber-text">GAMING</span> <span class="purple-text">EXPERIENCES</span>
+            </h2>
+            <p class="text-xl md:text-2xl text-cyberblue max-w-3xl mx-auto mb-8">
+                WHERE HUMAN CREATIVITY MEETS ARTIFICIAL INTELLIGENCE IN A NEON-DRENCHED FUTURE
+            </p>
+            <div class="flex flex-wrap justify-center gap-4">
+                <a href="#games" class="px-8 py-3 bg-cyberblue text-dark font-bold rounded-sm hover:shadow-neon transition-all duration-300 transform hover:scale-105 neon-button">
+                    EXPLORE GAMES
+                </a>
+                <a href="#process" class="px-8 py-3 border border-cyberblue text-cyberblue font-bold rounded-sm hover:shadow-neon transition-all duration-300 transform hover:scale-105 neon-button">
+                    LEARN ABOUT AI
+                </a>
+            </div>
+        </div>
+        <div class="absolute bottom-0 left-0 w-full h-10 overflow-hidden opacity-20">
+            <div class="absolute whitespace-nowrap text-cyberblue font-mono text-sm" style="animation: scroll-left 30s linear infinite;">
+                01010100 01001000 01000101 00100000 01000110 01010101 01010100 01010101 01010010 01000101 00100000 01001001 01010011 00100000 01001110 01001111 01010111 00100000 01010100 01001000 01000101 00100000 01000110 01010101 01010100 01010101 01010010 01000101 00100000 01001001 01010011 00100000 01001110 01001111 01010111 00100000 01010100 01001000 01000101 00100000 01000110 01010101 01010100 01010101 01010010 01000101 00100000 01001001 01010011 00100000 01001110 01001111 01010111
+            </div>
+        </div>
+    </header>
+    <section id="games" class="py-16 px-4 sm:px-6 lg:px-8 bg-dark bg-opacity-70 backdrop-blur-sm">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4 cyber-text">OUR <span class="pink-text">AI-CO-CREATED</span> GAME COLLECTION</h2>
+                <div class="terminal max-w-2xl mx-auto">
+                    <p class="text-cyberblue mb-2">> INITIALIZING GAME DATABASE...</p>
+                    <p class="text-cyberpink mb-2">> LOADING NEURAL NETWORK MODELS...</p>
+                    <p class="text-cyberblue">> <span class="blink">READY TO EXPERIENCE THE FUTURE OF GAMING</span></p>
+                </div>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <div class="neon-card h-80">
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <div class="w-full h-full bg-gradient-to-br from-cyberblue to-cyberpurple opacity-20"></div>
+                    </div>
+                    <div class="relative h-full flex flex-col justify-end p-6">
+                        <h3 class="text-2xl font-bold mb-2 cyber-text">BALALITE</h3>
+                        <p class="text-gray-300 mb-4">A CYBERPUNK PUZZLE ADVENTURE WITH MINIMALIST AESTHETICS</p>
+                        <a href="https://v0.dev/community/balalite-dSrNMLBzmHf" target="_blank" class="inline-block px-4 py-2 bg-cyberblue text-dark font-bold rounded-sm hover:shadow-neon transition-all duration-300 neon-button">
+                            PLAY NOW
+                        </a>
+                    </div>
+                </div>
+                <div class="neon-card h-80">
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <div class="w-full h-full bg-gradient-to-br from-cyberpink to-cyberyellow opacity-20"></div>
+                    </div>
+                    <div class="relative h-full flex flex-col justify-end p-6">
+                        <h3 class="text-2xl font-bold mb-2 pink-text">EMOJI SURVIVOR</h3>
+                        <p class="text-gray-300 mb-4">NEON BATTLE ROYALE WITH EMOJI CHARACTERS</p>
+                        <a href="https://v0.dev/community/emoji-survivor-eN01Gw56Obg" target="_blank" class="inline-block px-4 py-2 bg-cyberpink text-dark font-bold rounded-sm hover:shadow-neon-pink transition-all duration-300 neon-button">
+                            PLAY NOW
+                        </a>
+                    </div>
+                </div>
+                <div class="neon-card h-80">
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <div class="w-full h-full bg-gradient-to-br from-cyberpurple to-cyberblue opacity-20"></div>
+                    </div>
+                    <div class="relative h-full flex flex-col justify-end p-6">
+                        <h3 class="text-2xl font-bold mb-2 purple-text">UNDERPANTS</h3>
+                        <p class="text-gray-300 mb-4">A QUIRKY CYBERPUNK ADVENTURE</p>
+                        <a href="https://v0.dev/community/underpants-9G0V5UZWfnk" target="_blank" class="inline-block px-4 py-2 bg-cyberpurple text-dark font-bold rounded-sm hover:shadow-neon-purple transition-all duration-300 neon-button">
+                            PLAY NOW
+                        </a>
+                    </div>
+                </div>
+                <div class="neon-card h-80">
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <div class="w-full h-full bg-gradient-to-br from-cyberyellow to-cyberpink opacity-20"></div>
+                    </div>
+                    <div class="relative h-full flex flex-col justify-end p-6">
+                        <h3 class="text-2xl font-bold mb-2 text-cyberyellow">SLAY THE EMOJI</h3>
+                        <p class="text-gray-300 mb-4">STRATEGIC CARD BATTLER WITH NEON CHARACTERS</p>
+                        <a href="https://v0.dev/community/slay-the-emoji-0w2O0Gzojkt" target="_blank" class="inline-block px-4 py-2 bg-cyberyellow text-dark font-bold rounded-sm hover:shadow-lg hover:shadow-cyberyellow/50 transition-all duration-300 neon-button">
+                            PLAY NOW
+                        </a>
+                    </div>
+                </div>
+                <div class="neon-card h-80">
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <div class="w-full h-full bg-gradient-to-br from-cyberblue to-cyberpink opacity-20"></div>
+                    </div>
+                    <div class="relative h-full flex flex-col justify-end p-6">
+                        <h3 class="text-2xl font-bold mb-2 cyber-text">AUTOBATTLER</h3>
+                        <p class="text-gray-300 mb-4">STRATEGIC AUTO-COMBAT IN A CYBERPUNK WORLD</p>
+                        <a href="https://v0.dev/community/autobattler-game-design-1bTU3TV97n9" target="_blank" class="inline-block px-4 py-2 bg-cyberblue text-dark font-bold rounded-sm hover:shadow-neon transition-all duration-300 neon-button">
+                            PLAY NOW
+                        </a>
+                    </div>
+                </div>
+                <div class="neon-card h-80">
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <div class="w-full h-full bg-gradient-to-br from-cyberpurple to-cyberyellow opacity-20"></div>
+                    </div>
+                    <div class="relative h-full flex flex-col justify-end p-6">
+                        <h3 class="text-2xl font-bold mb-2 purple-text">2D EARTHBOUND</h3>
+                        <p class="text-gray-300 mb-4">RETRO-STYLE RPG WITH CYBERPUNK TWIST</p>
+                        <a href="https://v0.dev/community/2d-earthbound-game-U4DOs4gMyAt" target="_blank" class="inline-block px-4 py-2 bg-cyberpurple text-dark font-bold rounded-sm hover:shadow-neon-purple transition-all duration-300 neon-button">
+                            PLAY NOW
+                        </a>
+                    </div>
+                </div>
+                <div class="neon-card h-80">
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <div class="w-full h-full bg-gradient-to-br from-cyberblue to-cyberyellow opacity-20"></div>
+                    </div>
+                    <div class="relative h-full flex flex-col justify-end p-6">
+                        <h3 class="text-2xl font-bold mb-2 cyber-text">STARCLICKER</h3>
+                        <p class="text-gray-300 mb-4">ADDICTIVE INCREMENTAL GAME IN CYBERSPACE</p>
+                        <a href="https://v0.dev/community/starclicker-dqQOG1W1zo3" target="_blank" class="inline-block px-4 py-2 bg-cyberblue text-dark font-bold rounded-sm hover:shadow-neon transition-all duration-300 neon-button">
+                            PLAY NOW
+                        </a>
+                    </div>
+                </div>
+                <div class="neon-card h-80">
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <div class="w-full h-full bg-gradient-to-br from-cyberpink to-cyberpurple opacity-20"></div>
+                    </div>
+                    <div class="relative h-full flex flex-col justify-end p-6">
+                        <h3 class="text-2xl font-bold mb-2 pink-text">EARTHBATTLE</h3>
+                        <p class="text-gray-300 mb-4">STRATEGIC PLANET-BASED COMBAT GAME</p>
+                        <a href="https://huggingface.co/spaces/Jaspior/earthbattle" target="_blank" class="inline-block px-4 py-2 bg-cyberpink text-dark font-bold rounded-sm hover:shadow-neon-pink transition-all duration-300 neon-button">
+                            PLAY NOW
+                        </a>
+                    </div>
+                </div>
+                <div class="neon-card h-80">
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <div class="w-full h-full bg-gradient-to-br from-cyberyellow to-cyberblue opacity-20"></div>
+                    </div>
+                    <div class="relative h-full flex flex-col justify-end p-6">
+                        <h3 class="text-2xl font-bold mb-2 text-cyberyellow">ROGELIKE</h3>
+                        <p class="text-gray-300 mb-4">PROCEDURALLY GENERATED DUNGEON CRAWLER</p>
+                        <a href="https://huggingface.co/spaces/Jaspior/rogelike" target="_blank" class="inline-block px-4 py-2 bg-cyberyellow text-dark font-bold rounded-sm hover:shadow-lg hover:shadow-cyberyellow/50 transition-all duration-300 neon-button">
+                            PLAY NOW
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section id="about" class="py-16 px-4 sm:px-6 lg:px-8 bg-darker bg-opacity-70 backdrop-blur-sm border-t border-b border-cyberblue border-opacity-30">
+        <div class="max-w-7xl mx-auto">
+            <div class="lg:flex items-center gap-12">
+                <div class="lg:w-1/2 mb-12 lg:mb-0">
+                    <h2 class="text-3xl md:text-4xl font-bold mb-6 cyber-text">WHAT IS <span class="pink-text">VIBE GAMING</span>?</h2>
+                    <div class="terminal mb-6">
+                        <p class="text-cyberblue mb-2">> INITIALIZING SYSTEM PROTOCOLS...</p>
+                        <p class="text-cyberpink">> LOADING CREATIVE MANIFESTO...</p>
+                    </div>
+                    <p class="text-gray-300 mb-6 text-lg">
+                        VIBE GAMING IS A CYBERPUNK MANIFESTATION OF THE FUTURE OF GAME DEVELOPMENT - WHERE HUMAN CREATIVITY AND ARTIFICIAL INTELLIGENCE MERGE TO CREATE IMMERSIVE EXPERIENCES THAT RESONATE ON A NEURAL LEVEL.
+                    </p>
+                    <p class="text-gray-300 mb-6 text-lg">
+                        EACH GAME IN OUR COLLECTION WAS DEVELOPED THROUGH A SYMBIOTIC PROCESS BETWEEN HUMAN VISION AND AI CAPABILITIES, RESULTING IN TITLES THAT BLEND FAMILIAR GAMEPLAY MECHANICS WITH UNEXPECTED TWISTS AND FRESH PERSPECTIVES.
+                    </p>
+                    <div class="space-y-4">
+                        <div class="flex items-start">
+                            <div class="flex-shrink-0 mt-1">
+                                <div class="flex items-center justify-center h-8 w-8 rounded-sm bg-cyberblue text-dark">
+                                    <i class="fas fa-gamepad"></i>
+                                </div>
+                            </div>
+                            <div class="ml-4">
+                                <h3 class="text-lg font-medium text-cyberblue">NEURAL RESONANCE</h3>
+                                <p class="text-gray-400">GAMES DESIGNED TO CREATE SPECIFIC BRAINWAVE PATTERNS AND EMOTIONAL RESPONSES</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="flex-shrink-0 mt-1">
+                                <div class="flex items-center justify-center h-8 w-8 rounded-sm bg-cyberpink text-dark">
+                                    <i class="fas fa-brain"></i>
+                                </div>
+                            </div>
+                            <div class="ml-4">
+                                <h3 class="text-lg font-medium text-cyberpink">AI-ENHANCED CREATIVITY</h3>
+                                <p class="text-gray-400">LEVERAGING AI TO EXPAND CREATIVE POSSIBILITIES BEYOND HUMAN LIMITATIONS</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="flex-shrink-0 mt-1">
+                                <div class="flex items-center justify-center h-8 w-8 rounded-sm bg-cyberpurple text-dark">
+                                    <i class="fas fa-lightbulb"></i>
+                                </div>
+                            </div>
+                            <div class="ml-4">
+                                <h3 class="text-lg font-medium text-cyberpurple">EXPERIMENTAL GAMEPLAY</h3>
+                                <p class="text-gray-400">EXPLORING NEW MECHANICS AND INTERACTIONS THROUGH AI COLLABORATION</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="lg:w-1/2">
+                    <div class="neon-card h-96">
+                        <div class="absolute inset-0 flex items-center justify-center">
+                            <div class="w-full h-full bg-gradient-to-br from-cyberblue to-cyberpurple opacity-20"></div>
+                        </div>
+                        <div class="relative h-full flex flex-col justify-end p-8">
+                            <h3 class="text-2xl font-bold mb-2 cyber-text">THE FUTURE OF GAME DEVELOPMENT</h3>
+                            <p class="text-gray-300">WHERE HUMAN AND ARTIFICIAL CREATIVITY MERGE TO CREATE UNFORGETTABLE EXPERIENCES</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section id="process" class="py-16 px-4 sm:px-6 lg:px-8 bg-dark bg-opacity-70 backdrop-blur-sm">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4 cyber-text">THE AI <span class="pink-text">CO-PROGRAMMING</span> PROCESS</h2>
+                <div class="terminal max-w-3xl mx-auto">
+                    <p class="text-cyberblue mb-2">> INITIALIZING NEURAL NETWORK...</p>
+                    <p class="text-cyberpink">> LOADING CREATIVE ALGORITHMS...</p>
+                </div>
+            </div>
+            <div class="grid md:grid-cols-3 gap-8">
+                <div class="neon-card p-8 hover:shadow-neon transition-all duration-300">
+                    <div class="w-14 h-14 rounded-sm bg-cyberblue flex items-center justify-center text-2xl font-bold text-dark mb-6">
+                        1
+                    </div>
+                    <h3 class="text-xl font-bold mb-4 cyber-text">HUMAN VISION</h3>
+                    <p class="text-gray-400">
+                        THE PROCESS BEGINS WITH HUMAN DEVELOPERS DEFINING THE CORE CONCEPT, EMOTIONAL TONE, AND GAMEPLAY PILLARS THAT WILL SHAPE THE EXPERIENCE.
+                    </p>
+                </div>
+                <div class="neon-card p-8 hover:shadow-neon-pink transition-all duration-300">
+                    <div class="w-14 h-14 rounded-sm bg-cyberpink flex items-center justify-center text-2xl font-bold text-dark mb-6">
+                        2
+                    </div>
+                    <h3 class="text-xl font-bold mb-4 pink-text">AI EXPANSION</h3>
+                    <p class="text-gray-400">
+                        AI TOOLS ANALYZE THE CONCEPT AND GENERATE VARIATIONS, UNEXPECTED MECHANICS, ART DIRECTIONS, AND NARRATIVE POSSIBILITIES THAT ALIGN WITH BUT EXPAND UPON THE ORIGINAL VISION.
+                    </p>
+                </div>
+                <div class="neon-card p-8 hover:shadow-neon-purple transition-all duration-300">
+                    <div class="w-14 h-14 rounded-sm bg-cyberpurple flex items-center justify-center text-2xl font-bold text-dark mb-6">
+                        3
+                    </div>
+                    <h3 class="text-xl font-bold mb-4 purple-text">COLLABORATIVE REFINEMENT</h3>
+                    <p class="text-gray-400">
+                        HUMAN DEVELOPERS CURATE AND REFINE THE AI'S CONTRIBUTIONS, MAINTAINING CREATIVE CONTROL WHILE INCORPORATING THE MOST COMPELLING AI-GENERATED ELEMENTS.
+                    </p>
+                </div>
+            </div>
+            <div class="mt-16 neon-card p-8 md:p-12 border border-cyberblue">
+                <div class="max-w-4xl mx-auto text-center">
+                    <h3 class="text-2xl md:text-3xl font-bold mb-6 cyber-text">WHY AI CO-PROGRAMMING WORKS</h3>
+                    <p class="text-gray-300 mb-8 text-lg">
+                        THIS COLLABORATIVE APPROACH ALLOWS US TO BREAK FREE FROM CREATIVE RUTS AND CONVENTIONAL DESIGN PATTERNS. THE AI SERVES AS AN INFINITE IDEA GENERATOR, WHILE HUMAN DEVELOPERS ENSURE QUALITY, COHERENCE, AND EMOTIONAL RESONANCE.
+                    </p>
+                    <div class="inline-flex items-center px-6 py-3 bg-black bg-opacity-30 rounded-sm border border-cyberblue">
+                        <i class="fas fa-robot text-2xl mr-3 text-cyberblue"></i>
+                        <span class="font-medium cyber-text">"THE AI DOESN'T REPLACE HUMAN CREATIVITY—IT AMPLIFIES IT"</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="py-16 px-4 sm:px-6 lg:px-8 bg-darker bg-opacity-70 backdrop-blur-sm border-t border-b border-cyberblue border-opacity-30">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4 cyber-text">WHAT PLAYERS ARE SAYING</h2>
+                <div class="terminal max-w-2xl mx-auto">
+                    <p class="text-cyberblue">> LOADING USER FEEDBACK DATABASE...</p>
+                </div>
+            </div>
+            <div class="grid md:grid-cols-3 gap-8">
+                <div class="neon-card p-6">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 rounded-sm bg-cyberblue flex items-center justify-center text-xl font-bold text-dark mr-4">J</div>
+                        <div>
+                            <h4 class="font-bold text-cyberblue">JAMIE K.</h4>
+                            <div class="flex text-cyberyellow">
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 italic">
+                        "THE COMBINATION OF FAMILIAR MECHANICS WITH COMPLETELY UNEXPECTED TWISTS MAKES THESE GAMES FEEL FRESH AND EXCITING. I CAN'T WAIT TO SEE WHAT COMES NEXT FROM THIS COLLABORATION!"
+                    </p>
+                </div>
+                <div class="neon-card p-6">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 rounded-sm bg-cyberpink flex items-center justify-center text-xl font-bold text-dark mr-4">M</div>
+                        <div>
+                            <h4 class="font-bold text-cyberpink">MARCUS T.</h4>
+                            <div class="flex text-cyberyellow">
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star-half-alt"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 italic">
+                        "THERE'S SOMETHING UNIQUELY CHARMING ABOUT THESE GAMES. THEY HAVE THE POLISH OF PROFESSIONAL DEVELOPMENT BUT WITH CREATIVE RISKS YOU RARELY SEE IN MAINSTREAM TITLES."
+                    </p>
+                </div>
+                <div class="neon-card p-6">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 rounded-sm bg-cyberpurple flex items-center justify-center text-xl font-bold text-dark mr-4">A</div>
+                        <div>
+                            <h4 class="font-bold text-cyberpurple">ALEX R.</h4>
+                            <div class="flex text-cyberyellow">
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 italic">
+                        "THE EMOTIONAL TONE IN THESE GAMES IS INCREDIBLE. EACH ONE CREATES A DISTINCT MOOD THAT STAYS WITH YOU LONG AFTER PLAYING. THIS IS THE FUTURE OF INDIE DEVELOPMENT."
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section id="contact" class="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-cyberpurple/20 to-cyberblue/20">
+        <div class="max-w-4xl mx-auto text-center">
+            <h2 class="text-3xl md:text-4xl font-bold mb-6 cyber-text">JOIN THE <span class="pink-text">VIBE GAMING</span> NETWORK</h2>
+            <div class="terminal max-w-2xl mx-auto mb-8">
+                <p class="text-cyberblue">> CONNECTING TO CYBERSPACE...</p>
+            </div>
+            <p class="text-gray-300 mb-8 text-lg max-w-2xl mx-auto">
+                INTERESTED IN AI CO-PROGRAMMING OR WANT TO COLLABORATE ON FUTURE PROJECTS? TRANSMIT YOUR DATA TO OUR NETWORK!
+            </p>
+            <form class="max-w-md mx-auto">
+                <div class="flex flex-col sm:flex-row gap-4">
+                    <input type="email" placeholder="YOUR EMAIL" class="flex-grow px-4 py-3 rounded-sm bg-black bg-opacity-50 border border-cyberblue focus:border-cyberpink focus:outline-none text-white placeholder-cyberblue placeholder-opacity-50 font-mono">
+                    <button type="submit" class="px-6 py-3 bg-cyberblue text-dark font-bold rounded-sm hover:shadow-neon transition-all duration-300 neon-button">
+                        TRANSMIT
+                    </button>
+                </div>
+            </form>
+            <div class="mt-8 flex justify-center space-x-6">
+                <a href="#" class="text-cyberblue hover:text-cyberpink transition-all duration-300 hover:scale-110">
+                    <i class="fab fa-twitter text-2xl"></i>
+                </a>
+                <a href="#" class="text-cyberblue hover:text-cyberpink transition-all duration-300 hover:scale-110">
+                    <i class="fab fa-discord text-2xl"></i>
+                </a>
+                <a href="#" class="text-cyberblue hover:text-cyberpink transition-all duration-300 hover:scale-110">
+                    <i class="fab fa-github text-2xl"></i>
+                </a>
+                <a href="#" class="text-cyberblue hover:text-cyberpink transition-all duration-300 hover:scale-110">
+                    <i class="fab fa-youtube text-2xl"></i>
+                </a>
+            </div>
+        </div>
+    </section>
+    <footer class="bg-darker py-8 px-4 sm:px-6 lg:px-8 border-t border-cyberblue border-opacity-30">
+        <div class="max-w-7xl mx-auto">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="mb-4 md:mb-0">
+                    <span class="text-2xl font-bold cyber-text">VIBE<span class="pink-text">GAMING</span></span>
+                </div>
+                <div class="flex flex-wrap justify-center gap-4 md:gap-8">
+                    <a href="#games" class="text-gray-400 hover:text-cyberblue transition-all duration-300">GAMES</a>
+                    <a href="#about" class="text-gray-400 hover:text-cyberblue transition-all duration-300">ABOUT</a>
+                    <a href="#process" class="text-gray-400 hover:text-cyberblue transition-all duration-300">AI PROCESS</a>
+                    <a href="#contact" class="text-gray-400 hover:text-cyberblue transition-all duration-300">CONTACT</a>
+                    <a href="#" class="text-gray-400 hover:text-cyberblue transition-all duration-300">PRIVACY</a>
+                    <a href="#" class="text-gray-400 hover:text-cyberblue transition-all duration-300">TERMS</a>
+                </div>
+            </div>
+            <div class="mt-8 text-center text-gray-500 text-sm">
+                <p>© 2023 VIBE GAMING. ALL GAMES CREATED THROUGH HUMAN-AI COLLABORATION.</p>
+                <p class="mt-2">THIS WEBSITE WAS ALSO CREATED WITH AI ASSISTANCE AND THROUGH VIBE-CODING.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Mobile menu toggle
+        const mobileMenuButton = document.querySelector('.mobile-menu-button');
+        const mobileMenu = document.querySelector('.mobile-menu');
+        mobileMenuButton.addEventListener('click', () => {
+            mobileMenu.classList.toggle('hidden');
+        });
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                // Close mobile menu if open
+                mobileMenu.classList.add('hidden');
+                document.querySelector(this.getAttribute('href')).scrollIntoView({
+                    behavior: 'smooth'
+                });
+            });
+        });
+        // Animated binary code
+        const binaryCodeContainer = document.querySelector('.overflow-hidden .absolute.whitespace-nowrap');
+        if (binaryCodeContainer) {
+            // Generate longer binary string for the existing element if needed, or ensure it's populated.
+            // The original code already populates it sufficiently.
+            // If further generation is needed for variety:
+            /*
+            let binaryString = '';
+            for (let i = 0; i < 100; i++) { // Increased length
+                 binaryString += Math.random() > 0.5 ? '01010100 ' : '01001000 ';
+            }
+            binaryCodeContainer.textContent = binaryString + binaryString; // Repeat for seamless loop
+            */
+        }
+        // Ensure scroll-left animation is defined (it's already in the <style> block, but good to be aware)
+        // The original script for adding @keyframes scroll-left is fine as is.
+        // If it wasn't in <style>, it would be added like this:
+        const existingScrollAnimationStyle = document.head.querySelector('style[data-animation-type="scroll-left"]');
+        if (!existingScrollAnimationStyle) {
+            const style = document.createElement('style');
+            style.setAttribute('data-animation-type', 'scroll-left'); // To avoid re-adding
+            style.innerHTML = `
+                @keyframes scroll-left {
+                    from { transform: translateX(0); }
+                    to { transform: translateX(-50%); } /* Ensure this matches the duplicated content length */
+                }
+            `;
+            document.head.appendChild(style);
+        }
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Jaspior/vibegaming" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

File without changes