Spaces:

chenjunzhou
/

blockverse

Running

App Files Files Community

chenjunzhou commited on Apr 14

Commit

fc5c726

verified ·

1 Parent(s): 22b1826

Add 2 files

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +511 -19

README.md CHANGED Viewed

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

 ---
+title: blockverse
+emoji: 🐳
+colorFrom: purple
 colorTo: green
 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,511 @@
-<!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>BlockVerse - Next-Gen Voxel Adventure</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">
+    <style>
+        :root {
+            --primary: #4f46e5;
+            --secondary: #10b981;
+            --accent: #f59e0b;
+            --dark: #1e293b;
+            --darker: #0f172a;
+        }
+        body {
+            background-color: var(--darker);
+            color: white;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            overflow-x: hidden;
+        }
+        .glow {
+            text-shadow: 0 0 10px rgba(79, 70, 229, 0.7);
+        }
+        .glow-box {
+            box-shadow: 0 0 15px rgba(79, 70, 229, 0.5);
+        }
+        .cylindrical-tree {
+            width: 80px;
+            height: 120px;
+            background: linear-gradient(to bottom, #3a5f0b, #2c4a08);
+            border-radius: 40px;
+            position: relative;
+        }
+        .cylindrical-tree::before {
+            content: '';
+            position: absolute;
+            top: -40px;
+            left: -20px;
+            width: 120px;
+            height: 80px;
+            background: linear-gradient(to bottom, #4a7c0b, #3a5f0b);
+            border-radius: 60px;
+        }
+        .pixel-art {
+            image-rendering: pixelated;
+            image-rendering: -moz-crisp-edges;
+            image-rendering: crisp-edges;
+        }
+        .block-hover {
+            transition: all 0.3s ease;
+            transform-style: preserve-3d;
+        }
+        .block-hover:hover {
+            transform: translateY(-5px) rotateX(5deg);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+        }
+        .parallax {
+            background-attachment: fixed;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+        }
+        @keyframes float {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+            100% { transform: translateY(0px); }
+        }
+        .floating {
+            animation: float 3s ease-in-out infinite;
+        }
+        .minecraft-btn {
+            background: linear-gradient(to bottom, #727272, #3a3a3a);
+            border: 2px solid #2d2d2d;
+            border-radius: 0;
+            color: white;
+            text-shadow: 2px 2px 0 #000;
+            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
+            transition: all 0.2s;
+        }
+        .minecraft-btn:hover {
+            background: linear-gradient(to bottom, #838383, #4a4a4a);
+            transform: translateY(-2px);
+        }
+        .voxel-character {
+            width: 100px;
+            height: 150px;
+            background: linear-gradient(to bottom, #4f46e5, #3730a3);
+            position: relative;
+            border-radius: 10px;
+        }
+        .voxel-character::before {
+            content: '';
+            position: absolute;
+            top: 20px;
+            left: 25px;
+            width: 50px;
+            height: 40px;
+            background: #f1f5f9;
+            border-radius: 10px;
+        }
+        .voxel-character::after {
+            content: '';
+            position: absolute;
+            top: 30px;
+            left: 35px;
+            width: 10px;
+            height: 10px;
+            background: #1e293b;
+            border-radius: 50%;
+            box-shadow: 20px 0 0 #1e293b;
+        }
+        .world-preview {
+            perspective: 1000px;
+        }
+        .world-container {
+            transform-style: preserve-3d;
+            transform: rotateX(20deg) rotateY(-20deg);
+            transition: transform 0.5s ease;
+        }
+        .world-container:hover {
+            transform: rotateX(25deg) rotateY(-25deg);
+        }
+        .block {
+            position: absolute;
+            width: 40px;
+            height: 40px;
+            background: linear-gradient(135deg, #3b82f6, #1d4ed8);
+            border: 1px solid #1e40af;
+            box-sizing: border-box;
+        }
+    </style>
+</head>
+<body>
+    <!-- Navigation -->
+    <nav class="bg-gray-900/80 backdrop-blur-md fixed w-full z-50 border-b border-gray-800">
+        <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 glow text-indigo-400">BLOCK<span class="text-emerald-400">VERSE</span></span>
+                    </div>
+                    <div class="hidden md:block">
+                        <div class="ml-10 flex items-baseline space-x-4">
+                            <a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium bg-indigo-900/50">Home</a>
+                            <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Explore</a>
+                            <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Create</a>
+                            <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Community</a>
+                            <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Shop</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="hidden md:block">
+                    <div class="ml-4 flex items-center md:ml-6">
+                        <button class="minecraft-btn px-4 py-2 mr-4">
+                            <i class="fas fa-download mr-2"></i> Download
+                        </button>
+                        <button class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-md text-sm font-medium">
+                            Sign In
+                        </button>
+                    </div>
+                </div>
+                <div class="-mr-2 flex md:hidden">
+                    <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
+                        <span class="sr-only">Open main menu</span>
+                        <i class="fas fa-bars"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section class="relative h-screen flex items-center justify-center overflow-hidden">
+        <div class="absolute inset-0 bg-gradient-to-b from-indigo-900/20 to-gray-900 z-10"></div>
+        <div class="absolute inset-0 parallax" style="background-image: url('https://images.unsplash.com/photo-1607513746994-51f730a44832?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div>
+        <div class="relative z-20 text-center px-4">
+            <h1 class="text-5xl md:text-7xl font-bold mb-6 glow">
+                <span class="text-indigo-400">BUILD</span>
+                <span class="text-white">YOUR</span>
+                <span class="text-emerald-400">DREAM</span>
+                <span class="text-amber-400">WORLD</span>
+            </h1>
+            <p class="text-xl md:text-2xl text-gray-300 mb-10 max-w-3xl mx-auto">
+                Experience the ultimate voxel adventure with infinite possibilities. Craft, explore, and survive in a dynamically generated universe.
+            </p>
+            <div class="flex flex-col sm:flex-row justify-center gap-4">
+                <button class="minecraft-btn px-8 py-4 text-lg font-bold flex items-center justify-center">
+                    <i class="fas fa-play mr-3"></i> PLAY NOW
+                </button>
+                <button class="bg-gray-800 hover:bg-gray-700 px-8 py-4 text-lg font-bold border border-gray-700 flex items-center justify-center">
+                    <i class="fas fa-book mr-3"></i> LEARN MORE
+                </button>
+            </div>
+        </div>
+        <!-- Floating elements -->
+        <div class="absolute bottom-20 left-10 floating">
+            <div class="cylindrical-tree"></div>
+        </div>
+        <div class="absolute top-1/4 right-20 floating" style="animation-delay: 0.5s;">
+            <div class="cylindrical-tree" style="width: 60px; height: 90px;"></div>
+        </div>
+        <div class="absolute bottom-1/3 right-1/4 floating" style="animation-delay: 1s;">
+            <div class="voxel-character"></div>
+        </div>
+    </section>
+    <!-- Features Section -->
+    <section class="py-20 bg-gradient-to-b from-gray-900 to-gray-800">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-16">
+                <h2 class="text-4xl font-bold mb-4 text-white">ENDLESS POSSIBILITIES</h2>
+                <p class="text-xl text-gray-400 max-w-3xl mx-auto">
+                    BlockVerse combines the best of creativity, adventure, and survival in a stunning voxel universe.
+                </p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- Feature 1 -->
+                <div class="bg-gray-800/50 p-8 rounded-xl glow-box border border-gray-700 block-hover">
+                    <div class="text-indigo-400 text-4xl mb-4">
+                        <i class="fas fa-cubes"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold mb-3 text-white">Infinite Worlds</h3>
+                    <p class="text-gray-400">
+                        Explore procedurally generated worlds with unique biomes, from lush forests to scorching deserts and frozen tundras.
+                    </p>
+                </div>
+                <!-- Feature 2 -->
+                <div class="bg-gray-800/50 p-8 rounded-xl glow-box border border-gray-700 block-hover">
+                    <div class="text-emerald-400 text-4xl mb-4">
+                        <i class="fas fa-hammer"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold mb-3 text-white">Creative Building</h3>
+                    <p class="text-gray-400">
+                        Craft anything you can imagine with our intuitive building system and hundreds of unique blocks and items.
+                    </p>
+                </div>
+                <!-- Feature 3 -->
+                <div class="bg-gray-800/50 p-8 rounded-xl glow-box border border-gray-700 block-hover">
+                    <div class="text-amber-400 text-4xl mb-4">
+                        <i class="fas fa-users"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold mb-3 text-white">Multiplayer Fun</h3>
+                    <p class="text-gray-400">
+                        Join friends or meet new players in massive online worlds. Collaborate or compete in exciting game modes.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- World Preview Section -->
+    <section class="py-20 bg-gray-900 relative overflow-hidden">
+        <div class="absolute inset-0 opacity-20">
+            <div class="absolute top-0 left-0 w-32 h-32 bg-indigo-500 rounded-full filter blur-3xl"></div>
+            <div class="absolute bottom-0 right-0 w-32 h-32 bg-emerald-500 rounded-full filter blur-3xl"></div>
+        </div>
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
+            <div class="flex flex-col lg:flex-row items-center gap-12">
+                <div class="lg:w-1/2 world-preview">
+                    <div class="world-container mx-auto">
+                        <!-- Simple 3D voxel representation -->
+                        <div class="relative w-64 h-64 mx-auto">
+                            <!-- Ground -->
+                            <div class="block" style="transform: translate3d(80px, 160px, 0px) scale3d(1, 0.2, 3); background: linear-gradient(135deg, #10b981, #059669);"></div>
+                            <!-- Trees -->
+                            <div class="block" style="transform: translate3d(100px, 120px, 40px) scale3d(0.5, 1, 0.5); background: linear-gradient(135deg, #3a5f0b, #2c4a08);"></div>
+                            <div class="block" style="transform: translate3d(140px, 100px, 80px) scale3d(0.5, 1.5, 0.5); background: linear-gradient(135deg, #3a5f0b, #2c4a08);"></div>
+                            <!-- House -->
+                            <div class="block" style="transform: translate3d(40px, 80px, 40px) scale3d(2, 1.5, 2); background: linear-gradient(135deg, #b45309, #92400e);"></div>
+                            <div class="block" style="transform: translate3d(60px, 40px, 60px) scale3d(1, 1, 1); background: linear-gradient(135deg, #3b82f6, #1d4ed8);"></div>
+                            <!-- Mountains -->
+                            <div class="block" style="transform: translate3d(180px, 60px, 120px) scale3d(3, 2, 3); background: linear-gradient(135deg, #6b7280, #4b5563);"></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="lg:w-1/2">
+                    <h2 class="text-4xl font-bold mb-6 text-white">A WORLD THAT NEVER ENDS</h2>
+                    <p class="text-xl text-gray-400 mb-8">
+                        BlockVerse's advanced world generation creates stunning landscapes that stretch infinitely in all directions.
+                        Every biome is carefully crafted with our unique cylindrical tree design and realistic terrain features.
+                    </p>
+                    <div class="space-y-6">
+                        <div class="flex items-start">
+                            <div class="flex-shrink-0 mt-1">
+                                <div class="flex items-center justify-center h-8 w-8 rounded-full bg-indigo-500 text-white">
+                                    <i class="fas fa-check"></i>
+                                </div>
+                            </div>
+                            <div class="ml-4">
+                                <h3 class="text-lg font-medium text-white">Dynamic Weather System</h3>
+                                <p class="text-gray-400">
+                                    Experience realistic rain, snow, and storms that affect gameplay and visuals.
+                                </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-full bg-emerald-500 text-white">
+                                    <i class="fas fa-check"></i>
+                                </div>
+                            </div>
+                            <div class="ml-4">
+                                <h3 class="text-lg font-medium text-white">Day/Night Cycle</h3>
+                                <p class="text-gray-400">
+                                    Watch beautiful sunsets and prepare for dangerous nights when monsters emerge.
+                                </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-full bg-amber-500 text-white">
+                                    <i class="fas fa-check"></i>
+                                </div>
+                            </div>
+                            <div class="ml-4">
+                                <h3 class="text-lg font-medium text-white">Unique Creatures</h3>
+                                <p class="text-gray-400">
+                                    Encounter dozens of creatures, from friendly animals to terrifying monsters.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Game Modes Section -->
+    <section class="py-20 bg-gradient-to-b from-gray-800 to-gray-900">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-16">
+                <h2 class="text-4xl font-bold mb-4 text-white">MULTIPLE WAYS TO PLAY</h2>
+                <p class="text-xl text-gray-400 max-w-3xl mx-auto">
+                    Whether you're a creative builder or a hardcore survivalist, BlockVerse has a mode for you.
+                </p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                <!-- Mode 1 -->
+                <div class="bg-gray-800/50 rounded-xl overflow-hidden border border-gray-700 block-hover">
+                    <div class="h-48 bg-indigo-900/30 flex items-center justify-center">
+                        <i class="fas fa-home text-6xl text-indigo-400"></i>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2 text-white">Creative</h3>
+                        <p class="text-gray-400 mb-4">
+                            Unlimited resources and flight let you build anything without limits.
+                        </p>
+                        <button class="minecraft-btn w-full py-2">
+                            Learn More
+                        </button>
+                    </div>
+                </div>
+                <!-- Mode 2 -->
+                <div class="bg-gray-800/50 rounded-xl overflow-hidden border border-gray-700 block-hover">
+                    <div class="h-48 bg-emerald-900/30 flex items-center justify-center">
+                        <i class="fas fa-fire text-6xl text-emerald-400"></i>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2 text-white">Survival</h3>
+                        <p class="text-gray-400 mb-4">
+                            Gather resources, craft tools, and survive against monsters and hunger.
+                        </p>
+                        <button class="minecraft-btn w-full py-2">
+                            Learn More
+                        </button>
+                    </div>
+                </div>
+                <!-- Mode 3 -->
+                <div class="bg-gray-800/50 rounded-xl overflow-hidden border border-gray-700 block-hover">
+                    <div class="h-48 bg-amber-900/30 flex items-center justify-center">
+                        <i class="fas fa-trophy text-6xl text-amber-400"></i>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2 text-white">Adventure</h3>
+                        <p class="text-gray-400 mb-4">
+                            Play custom maps with unique stories, puzzles, and challenges.
+                        </p>
+                        <button class="minecraft-btn w-full py-2">
+                            Learn More
+                        </button>
+                    </div>
+                </div>
+                <!-- Mode 4 -->
+                <div class="bg-gray-800/50 rounded-xl overflow-hidden border border-gray-700 block-hover">
+                    <div class="h-48 bg-purple-900/30 flex items-center justify-center">
+                        <i class="fas fa-users text-6xl text-purple-400"></i>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2 text-white">Multiplayer</h3>
+                        <p class="text-gray-400 mb-4">
+                            Join servers with thousands of players for mini-games and collaborations.
+                        </p>
+                        <button class="minecraft-btn w-full py-2">
+                            Learn More
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- CTA Section -->
+    <section class="py-20 bg-gradient-to-r from-indigo-900 to-purple-900 relative overflow-hidden">
+        <div class="absolute inset-0 opacity-20">
+            <div class="absolute top-0 left-0 w-64 h-64 bg-white rounded-full filter blur-3xl"></div>
+            <div class="absolute bottom-0 right-0 w-64 h-64 bg-emerald-400 rounded-full filter blur-3xl"></div>
+        </div>
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative text-center">
+            <h2 class="text-4xl md:text-5xl font-bold mb-6 text-white glow">READY TO BEGIN YOUR ADVENTURE?</h2>
+            <p class="text-xl text-gray-300 mb-10 max-w-3xl mx-auto">
+                Join millions of players worldwide in the ultimate voxel experience. Available on PC, consoles, and mobile devices.
+            </p>
+            <div class="flex flex-col sm:flex-row justify-center gap-4">
+                <button class="minecraft-btn px-8 py-4 text-lg font-bold flex items-center justify-center bg-white text-gray-900">
+                    <i class="fas fa-download mr-3"></i> DOWNLOAD NOW
+                </button>
+                <button class="bg-transparent border-2 border-white hover:bg-white/10 px-8 py-4 text-lg font-bold text-white flex items-center justify-center">
+                    <i class="fas fa-play-circle mr-3"></i> WATCH TRAILER
+                </button>
+            </div>
+            <div class="mt-12 flex flex-wrap justify-center gap-6">
+                <div class="bg-black/30 px-6 py-3 rounded-lg border border-gray-700 flex items-center">
+                    <i class="fab fa-windows text-2xl mr-3 text-blue-400"></i>
+                    <span>Windows</span>
+                </div>
+                <div class="bg-black/30 px-6 py-3 rounded-lg border border-gray-700 flex items-center">
+                    <i class="fab fa-apple text-2xl mr-3 text-gray-300"></i>
+                    <span>macOS</span>
+                </div>
+                <div class="bg-black/30 px-6 py-3 rounded-lg border border-gray-700 flex items-center">
+                    <i class="fab fa-linux text-2xl mr-3 text-amber-400"></i>
+                    <span>Linux</span>
+                </div>
+                <div class="bg-black/30 px-6 py-3 rounded-lg border border-gray-700 flex items-center">
+                    <i class="fab fa-playstation text-2xl mr-3 text-blue-500"></i>
+                    <span>PlayStation</span>
+                </div>
+                <div class="bg-black/30 px-6 py-3 rounded-lg border border-gray-700 flex items-center">
+                    <i class="fab fa-xbox text-2xl mr-3 text-green-500"></i>
+                    <span>Xbox</span>
+                </div>
+                <div class="bg-black/30 px-6 py-3 rounded-lg border border-gray-700 flex items-center">
+                    <i class="fas fa-mobile-alt text-2xl mr-3 text-purple-400"></i>
+                    <span>iOS & Android</span>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-gray-900 border-t border-gray-800">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
+                <div>
+                    <h3 class="text-lg font-semibold text-white mb-4">BlockVerse</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">News</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold text-white mb-4">Resources</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Community</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Tutorials</a
+</html>