Spaces:

S-Dreamer
/

prompt-crafting-lander

Running

File size: 26,356 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Counter-Culture Game Hub</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;600&display=swap" rel="stylesheet">
    <style>
        :root {
            --neon-green: #39ff14;
            --neon-pink: #ff073a;
            --neon-blue: #00f3ff;
            --dark-bg: #0a0a0a;
            --slate-900: #0f172a;
        }

        body {
            font-family: 'Rajdhani', sans-serif;
            background: var(--dark-bg);
            overflow-x: hidden;
        }

        .orbitron {
            font-family: 'Orbitron', monospace;
        }

        .neon-text {
            text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
            animation: neon-pulse 2s ease-in-out infinite;
        }

        @keyframes neon-pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        .cyber-grid {
            background-image: 
                linear-gradient(rgba(57, 255, 20, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(57, 255, 20, 0.1) 1px, transparent 1px);
            background-size: 40px 40px;
        }

        .game-card {
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.8));
            border: 1px solid rgba(57, 255, 20, 0.3);
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }

        .game-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(57, 255, 20, 0.3);
            border-color: rgba(57, 255, 20, 0.6);
        }

        .glitch {
            position: relative;
            animation: glitch-skew 1s infinite linear alternate-reverse;
        }

        @keyframes glitch-skew {
            0% { transform: skew(0deg); }
            10% { transform: skew(-2deg); }
            20% { transform: skew(1deg); }
            30% { transform: skew(-1deg); }
            40% { transform: skew(2deg); }
            50% { transform: skew(-1deg); }
            60% { transform: skew(0deg); }
            70% { transform: skew(1deg); }
            80% { transform: skew(-2deg); }
            90% { transform: skew(1deg); }
            100% { transform: skew(0deg); }
        }

        .vhs-effect {
            position: relative;
            overflow: hidden;
        }

        .vhs-effect::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            animation: vhs-scan 3s linear infinite;
        }

        @keyframes vhs-scan {
            0% { left: -100%; }
            100% { left: 100%; }
        }

        .modal-backdrop {
            background: rgba(0, 0, 0, 0.9);
            backdrop-filter: blur(5px);
        }

        .progress-bar {
            background: linear-gradient(90deg, var(--neon-green), var(--neon-blue));
            transition: width 0.3s ease;
        }

        .floating-particles {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            pointer-events: none;
        }

        .particle {
            position: absolute;
            width: 2px;
            height: 2px;
            background: var(--neon-green);
            border-radius: 50%;
            animation: float 10s linear infinite;
        }

        @keyframes float {
            0% {
                transform: translateY(100vh) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateY(-100vh) rotate(360deg);
                opacity: 0;
            }
        }

        .btn-cyber {
            background: linear-gradient(45deg, transparent, rgba(57, 255, 20, 0.1));
            border: 1px solid var(--neon-green);
            color: var(--neon-green);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .btn-cyber:hover {
            box-shadow: 0 0 20px rgba(57, 255, 20, 0.5);
            background: rgba(57, 255, 20, 0.1);
        }

        .btn-cyber::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;
        }

        .btn-cyber:hover::before {
            left: 100%;
        }

        #gameModal {
            display: none;
        }

        #gameModal.active {
            display: flex;
        }

        .game-stats {
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(57, 255, 20, 0.3);
            border-radius: 10px;
            padding: 1rem;
        }

        .stat-item {
            display: flex;
            justify-content: space-between;
            margin: 0.5rem 0;
            font-size: 0.9rem;
        }

        .stat-bar {
            width: 100px;
            height: 4px;
            background: rgba(57, 255, 20, 0.2);
            border-radius: 2px;
            overflow: hidden;
            margin-top: 0.25rem;
        }

        .stat-fill {
            height: 100%;
            background: var(--neon-green);
            transition: width 0.5s ease;
        }
    </style>
</head>
<body class="bg-slate-900 text-white min-h-screen">
    <!-- Floating Particles -->
    <div class="floating-particles">
        <div class="particle" style="left: 10%; animation-delay: 0s;"></div>
        <div class="particle" style="left: 20%; animation-delay: 2s;"></div>
        <div class="particle" style="left: 30%; animation-delay: 4s;"></div>
        <div class="particle" style="left: 40%; animation-delay: 1s;"></div>
        <div class="particle" style="left: 50%; animation-delay: 3s;"></div>
        <div class="particle" style="left: 60%; animation-delay: 5s;"></div>
        <div class="particle" style="left: 70%; animation-delay: 2.5s;"></div>
        <div class="particle" style="left: 80%; animation-delay: 4.5s;"></div>
        <div class="particle" style="left: 90%; animation-delay: 1.5s;"></div>
    </div>

    <!-- Header -->
    <header class="relative py-8 px-4">
        <div class="cyber-grid absolute inset-0 opacity-30"></div>
        <div class="relative z-10 text-center">
            <h1 class="orbitron text-5xl md:text-7xl font-black mb-4">
                <span class="text-green-400 neon-text glitch">COUNTER-CULTURE</span>
                <br>
                <span class="text-pink-400 text-3xl md:text-5xl">GAME HUB</span>
            </h1>
            <p class="text-xl text-gray-300 max-w-2xl mx-auto">
                Explore the underground world of rebellion, music, and revolution through interactive gaming experiences
            </p>
        </div>
    </header>

    <!-- Game Selection Grid -->
    <main class="container mx-auto px-4 py-8">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- Revolution Chronicles -->
            <div class="game-card rounded-lg p-6 vhs-effect">
                <div class="mb-4">
                    <i class="fas fa-fist-raised text-4xl text-green-400 mb-2"></i>
                    <h3 class="orbitron text-2xl font-bold text-green-400">Revolution Chronicles</h3>
                </div>
                <p class="text-gray-300 mb-4">
                    Lead the 1960s social movements through strategic planning, peaceful protests, and cultural revolution. 
                    Balance activism with survival in this turn-based strategy game.
                </p>
                <div class="game-stats mb-4">
                    <div class="stat-item">
                        <span>Strategy</span>
                        <div class="stat-bar">
                            <div class="stat-fill" style="width: 85%"></div>
                        </div>
                    </div>
                    <div class="stat-item">
                        <span>History</span>
                        <div class="stat-bar">
                            <div class="stat-fill" style="width: 95%"></div>
                        </div>
                    </div>
                    <div class="stat-item">
                        <span>Difficulty</span>
                        <div class="stat-bar">
                            <div class="stat-fill" style="width: 75%"></div>
                        </div>
                    </div>
                </div>
                <button onclick="openGameModal('revolution')" class="btn-cyber px-6 py-2 rounded w-full">
                    <i class="fas fa-play mr-2"></i>LAUNCH GAME
                </button>
            </div>

            <!-- Underground Radio -->
            <div class="game-card rounded-lg p-6 vhs-effect">
                <div class="mb-4">
                    <i class="fas fa-broadcast-tower text-4xl text-pink-400 mb-2"></i>
                    <h3 class="orbitron text-2xl font-bold text-pink-400">Underground Radio</h3>
                </div>
                <p class="text-gray-300 mb-4">
                    Manage a pirate radio station broadcasting counter-culture music and messages. 
                    Evade authorities while building your listener base and cultural impact.
                </p>
                <div class="game-stats mb-4">
                    <div class="stat-item">
                        <span>Simulation</span>
                        <div class="stat-bar">
                            <div class="stat-fill" style="width: 80%"></div>
                        </div>
                    </div>
                    <div class="stat-item">
                        <span>Music</span>
                        <div class="stat-bar">
                            <div class="stat-fill" style="width: 100%"></div>
                        </div>
                    </div>
                    <div class="stat-item">
                        <span>Stealth</span>
                        <div class="stat-bar">
                            <div class="stat-fill" style="width: 70%"></div>
                        </div>
                    </div>
                </div>
                <button onclick="openGameModal('radio')" class="btn-cyber px-6 py-2 rounded w-full">
                    <i class="fas fa-play mr-2"></i>LAUNCH GAME
                </button>
            </div>

            <!-- Festival Organizer -->
            <div class="game-card rounded-lg p-6 vhs-effect">
                <div class="mb-4">
                    <i class="fas fa-music text-4xl text-blue-400 mb-2"></i>
                    <h3 class="orbitron text-2xl font-bold text-blue-400">Festival Organizer</h3>
                </div>
                <p class="text-gray-300 mb-4">
                    Build and manage iconic music festivals from the 1960s-70s. 
                    Navigate permits, security, and cultural impact while creating legendary events.
                </p>
                <div class="game-stats mb-4">
                    <div class="stat-item">
                        <span>Management</span>
                        <div class="stat-bar">
                            <div class="stat-fill" style="width: 90%"></div>
                        </div>
                    </div>
                    <div class="stat-item">
                        <span>Creativity</span>
                        <div class="stat-bar">
                            <div class="stat-fill" style="width: 85%"></div>
                        </div>
                    </div>
                    <div class="stat-item">
                        <span>Logistics</span>
                        <div class="stat-bar">
                            <div class="stat-fill" style="width: 75%"></div>
                        </div>
                    </div>
                </div>
                <button onclick="openGameModal('festival')" class="btn-cyber px-6 py-2 rounded w-full">
                    <i class="fas fa-play mr-2"></i>LAUNCH GAME
                </button>
            </div>

            <!-- Potion Rebellion -->
            <div class="game-card rounded-lg p-6 vhs-effect">
                <div class="mb-4">
                    <i class="fas fa-flask text-4xl text-purple-400 mb-2"></i>
                    <h3 class="orbitron text-2xl font-bold text-purple-400">Potion Rebellion</h3>
                </div>
                <p class="text-gray-300 mb-4">
                    Fantasy RPG where you're an alchemist creating healing potions to help oppressed villages. 
                    Fight corporate magical monopolies with your herbal remedies.
                </p>
                <div class="game-stats mb-4">
                    <div class="stat-item">
                        <span>RPG</span>
                        <div class="stat-bar">
                            <div class="stat-fill" style="width: 95%"></div>
                        </div>
                    </div>
                    <div class="stat-item">
                        <span>Crafting</span>
                        <div class="stat-bar">
                            <div class="stat-fill" style="width: 90%"></div>
                        </div>
                    </div>
                    <div class="stat-item">
                        <span>Adventure</span>
                        <div class="stat-bar">
                            <div class="stat-fill" style="width: 85%"></div>
                        </div>
                    </div>
                </div>
                <button onclick="openGameModal('potion')" class="btn-cyber px-6 py-2 rounded w-full">
                    <i class="fas fa-play mr-2"></i>LAUNCH GAME
                </button>
            </div>

            <!-- Neon Underground -->
            <div class="game-card rounded-lg p-6 vhs-effect">
                <div class="mb-4">
                    <i class="fas fa-user-secret text-4xl text-cyan-400 mb-2"></i>
                    <h3 class="orbitron text-2xl font-bold text-cyan-400">Neon Underground</h3>
                </div>
                <p class="text-gray-300 mb-4">
                    Cyberpunk hacking game where you infiltrate corporate control systems. 
                    Use your skills to liberate data and expose corporate corruption.
                </p>
                <div class="game-stats mb-4">
                    <div class="stat-item">
                        <span>Hacking</span>
                        <div class="stat-bar">
                            <div class="stat-fill" style="width: 100%"></div>
                        </div>
                    </div>
                    <div class="stat-item">
                        <span>Stealth</span>
                        <div class="stat-bar">
                            <div class="stat-fill" style="width: 90%"></div>
                        </div>
                    </div>
                    <div class="stat-item">
                        <span>Puzzle</span>
                        <div class="stat-bar">
                            <div class="stat-fill" style="width: 85%"></div>
                        </div>
                    </div>
                </div>
                <button onclick="openGameModal('neon')" class="btn-cyber px-6 py-2 rounded w-full">
                    <i class="fas fa-play mr-2"></i>LAUNCH GAME
                </button>
            </div>

            <!-- Band Manager -->
            <div class="game-card rounded-lg p-6 vhs-effect">
                <div class="mb-4">
                    <i class="fas fa-guitar text-4xl text-yellow-400 mb-2"></i>
                    <h3 class="orbitron text-2xl font-bold text-yellow-400">Band Manager '69</h3>
                </div>
                <p class="text-gray-300 mb-4">
                    Manage a counter-culture band's rise to fame. Book gigs, create music, 
                    and navigate the politics of the revolutionary music scene.
                </p>
                <div class="game-stats mb-4">
                    <div class="stat-item">
                        <span>Music</span>
                        <div class="stat-bar">
                            <div class="stat-fill" style="width: 95%"></div>
                        </div>
                    </div>
                    <div class="stat-item">
                        <span>Management</span>
                        <div class="stat-bar">
                            <div class="stat-fill" style="width: 85%"></div>
                        </div>
                    </div>
                    <div class="stat-item">
                        <span>Story</span>
                        <div class="stat-bar">
                            <div class="stat-fill" style="width: 80%"></div>
                        </div>
                    </div>
                </div>
                <button onclick="openGameModal('band')" class="btn-cyber px-6 py-2 rounded w-full">
                    <i class="fas fa-play mr-2"></i>LAUNCH GAME
                </button>
            </div>
        </div>
    </main>

    <!-- Game Modal -->
    <div id="gameModal" class="modal-backdrop fixed inset-0 z-50 flex items-center justify-center">
        <div class="game-card rounded-lg p-8 max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
            <div class="flex justify-between items-center mb-6">
                <h2 id="modalTitle" class="orbitron text-3xl font-bold text-green-400"></h2>
                <button onclick="closeGameModal()" class="text-gray-400 hover:text-white text-2xl">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <div id="modalContent" class="text-gray-300">
                <!-- Dynamic content will be loaded here -->
            </div>

            <div class="mt-6 flex gap-4">
                <button onclick="startGame()" class="btn-cyber px-6 py-3 rounded flex-1">
                    <i class="fas fa-play mr-2"></i>START GAME
                </button>
                <button onclick="closeGameModal()" class="btn-cyber px-6 py-3 rounded flex-1">
                    <i class="fas fa-times mr-2"></i>CANCEL
                </button>
            </div>
        </div>
    </div>

    <script>
        const gameData = {
            revolution: {
                title: "Revolution Chronicles",
                description: `
                    <p class="mb-4">Step into the turbulent 1960s and lead the social revolution as a strategic mastermind.</p>
                    <h4 class="text-green-400 font-bold mb-2">Game Features:</h4>
                    <ul class="list-disc list-inside mb-4">
                        <li>Turn-based strategy gameplay</li>
                        <li>Historical accuracy with real events</li>
                        <li>Multiple endings based on your choices</li>
                        <li>Resource management and tactical planning</li>
                    </ul>
                    <h4 class="text-green-400 font-bold mb-2">Objective:</h4>
                    <p>Successfully organize peaceful protests, manage resources, and achieve social change without violence.</p>
                `
            },
            radio: {
                title: "Underground Radio",
                description: `
                    <p class="mb-4">Run a pirate radio station broadcasting counter-culture music and revolutionary messages.</p>
                    <h4 class="text-pink-400 font-bold mb-2">Game Features:</h4>
                    <ul class="list-disc list-inside mb-4">
                        <li>Real-time broadcasting simulation</li>
                        <li>Music mixing and playlist creation</li>
                        <li>Evade authorities with location changes</li>
                        <li>Build listener base and cultural impact</li>
                    </ul>
                    <h4 class="text-pink-400 font-bold mb-2">Objective:</h4>
                    <p>Grow your underground network while avoiding detection and creating lasting cultural change.</p>
                `
            },
            festival: {
                title: "Festival Organizer",
                description: `
                    <p class="mb-4">Create and manage legendary music festivals from the counter-culture era.</p>
                    <h4 class="text-blue-400 font-bold mb-2">Game Features:</h4>
                    <ul class="list-disc list-inside mb-4">
                        <li>Festival planning and management</li>
                        <li>Iconic band bookings and negotiations</li>
                        <li>Permit acquisition and legal challenges</li>
                        <li>Cultural impact measurement</li>
                    </ul>
                    <h4 class="text-blue-400 font-bold mb-2">Objective:</h4>
                    <p>Successfully organize historic festivals that define generations while managing logistics and politics.</p>
                `
            },
            potion: {
                title: "Potion Rebellion",
                description: `
                    <p class="mb-4">In a fantasy world, fight corporate magical monopolies with your herbal remedies.</p>
                    <h4 class="text-purple-400 font-bold mb-2">Game Features:</h4>
                    <ul class="list-disc list-inside mb-4">
                        <li>Alchemy crafting system</li>
                        <li>RPG character progression</li>
                        <li>Quest system for helping villages</li>
                        <li>Underground network building</li>
                    </ul>
                    <h4 class="text-purple-400 font-bold mb-2">Objective:</h4>
                    <p>Create and distribute healing potions to oppressed communities while evading corporate enforcers.</p>
                `
            },
            neon: {
                title: "Neon Underground",
                description: `
                    <p class="mb-4">Cyberpunk hacking game where you infiltrate corporate systems to liberate data.</p>
                    <h4 class="text-cyan-400 font-bold mb-2">Game Features:</h4>
                    <ul class="list-disc list-inside mb-4">
                        <li>Realistic hacking simulation</li>
                        <li>Cyberpunk aesthetics and storyline</li>
                        <li>Corporate infiltration missions</li>
                        <li>Data liberation and exposure mechanics</li>
                    </ul>
                    <h4 class="text-cyan-400 font-bold mb-2">Objective:</h4>
                    <p>Hack into corporate networks, expose corruption, and liberate information for the people.</p>
                `
            },
            band: {
                title: "Band Manager '69",
                description: `
                    <p class="mb-4">Manage a counter-culture band's rise from garage to stadium during the revolutionary era.</p>
                    <h4 class="text-yellow-400 font-bold mb-2">Game Features:</h4>
                    <ul class="list-disc list-inside mb-4">
                        <li>Music creation and recording</li>
                        <li>Gig booking and negotiations</li>
                        <li>Band member relationships</li>
                        <li>Cultural impact and legacy building</li>
                    </ul>
                    <h4 class="text-yellow-400 font-bold mb-2">Objective:</h4>
                    <p>Guide your band to fame while maintaining revolutionary ideals and creating timeless music.</p>
                `
            }
        };

        function openGameModal(gameKey) {
            const modal = document.getElementById('gameModal');
            const title = document.getElementById('modalTitle');
            const content = document.getElementById('modalContent');
            const game = gameData[gameKey];

            title.textContent = game.title;
            content.innerHTML = game.description;
            modal.classList.add('active');
        }

        function closeGameModal() {
            const modal = document.getElementById('gameModal');
            modal.classList.remove('active');
        }

        function startGame() {
            alert('Game launching soon! This is a demo showcasing the game concepts and UI design.');
        }

        // Add keyboard support
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                closeGameModal();
            }
        });

        // Add particle effects on hover
        document.querySelectorAll('.game-card').forEach(card => {
            card.addEventListener('mouseenter', () => {
                const particles = card.querySelectorAll('.particle');
                particles.forEach(p => p.style.animationDuration = '5s');
            });
        });
    </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=S-Dreamer/prompt-crafting-lander" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>