Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Shangri-La Frontier - MMORPG</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); | |
| * { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .hero-bg { | |
| background: linear-gradient(135deg, rgba(0,0,0,0.8), rgba(0,0,0,0.6)), | |
| url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><rect fill="%23000" width="1200" height="800"/><circle fill="%23333" cx="200" cy="200" r="100" opacity="0.3"/><circle fill="%23444" cx="800" cy="400" r="150" opacity="0.2"/><circle fill="%23222" cx="1000" cy="600" r="80" opacity="0.4"/></svg>'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .game-title { | |
| font-size: clamp(3rem, 8vw, 6rem); | |
| font-weight: 900; | |
| letter-spacing: 0.1em; | |
| text-shadow: 0 0 20px rgba(255,255,255,0.3); | |
| } | |
| .feature-card { | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.3); | |
| } | |
| .btn-primary { | |
| background: linear-gradient(45deg, #ff6b35, #f7931e); | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(255,107,53,0.4); | |
| } | |
| .news-card { | |
| background: rgba(255,255,255,0.05); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255,255,255,0.1); | |
| } | |
| .trailer-overlay { | |
| background: linear-gradient(45deg, rgba(255,107,53,0.9), rgba(247,147,30,0.9)); | |
| } | |
| .anycoder-link { | |
| position: fixed; | |
| top: 20px; | |
| right: 20px; | |
| z-index: 1000; | |
| background: rgba(0,0,0,0.7); | |
| padding: 8px 16px; | |
| border-radius: 20px; | |
| font-size: 12px; | |
| color: white; | |
| text-decoration: none; | |
| backdrop-filter: blur(10px); | |
| } | |
| .anycoder-link:hover { | |
| background: rgba(0,0,0,0.9); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black text-white overflow-x-hidden"> | |
| <!-- Anycoder Link --> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank"> | |
| <i class="fas fa-code"></i> Built with anycoder | |
| </a> | |
| <!-- Header --> | |
| <header class="fixed top-0 w-full z-50 bg-black bg-opacity-90 backdrop-blur-sm"> | |
| <nav class="container mx-auto px-6 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 bg-gradient-to-r from-orange-500 to-yellow-500 rounded"></div> | |
| <span class="text-xl font-bold">SHANGRI-LA FRONTIER</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#" class="hover:text-orange-400 transition-colors">Home</a> | |
| <a href="#" class="hover:text-orange-400 transition-colors">About</a> | |
| <a href="#" class="hover:text-orange-400 transition-colors">Features</a> | |
| <a href="#" class="hover:text-orange-400 transition-colors">News</a> | |
| <a href="#" class="hover:text-orange-400 transition-colors">Contact</a> | |
| </div> | |
| <button class="md:hidden text-2xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </nav> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-bg min-h-screen flex items-center justify-center relative pt-20"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h1 class="game-title text-white mb-8">SHANGRI-LA FRONTIER</h1> | |
| <p class="text-xl md:text-2xl mb-12 max-w-3xl mx-auto text-gray-300"> | |
| Embark on a journey through a vast and immersive world filled with danger, adventure, and endless possibilities. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <button class="btn-primary px-8 py-3 rounded-lg font-semibold text-white"> | |
| PLAY NOW | |
| </button> | |
| <button class="border border-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-black transition-colors"> | |
| LEARN MORE | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Trailer Section --> | |
| <section class="py-20 bg-gray-900"> | |
| <div class="container mx-auto px-6"> | |
| <div class="relative rounded-2xl overflow-hidden shadow-2xl"> | |
| <div class="aspect-video bg-gradient-to-r from-orange-600 to-yellow-600 flex items-center justify-center relative"> | |
| <div class="text-center z-10"> | |
| <h2 class="text-4xl md:text-6xl font-bold mb-4">WATCH THE TRAILER</h2> | |
| <button class="trailer-overlay w-20 h-20 rounded-full flex items-center justify-center mx-auto text-white text-3xl hover:scale-110 transition-transform"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| <div class="absolute inset-0 bg-black bg-opacity-30"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Game Description --> | |
| <section class="py-20 bg-black"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-6 text-orange-400">SHANGRI-LA FRONTIER</h2> | |
| <p class="text-gray-300 mb-8 leading-relaxed"> | |
| Shangri-La Frontier is a groundbreaking MMORPG that pushes the boundaries of virtual reality gaming. Set in a vast and immersive world filled with danger, adventure, and endless possibilities, players will embark on a journey like no other. With stunning graphics, innovative gameplay mechanics, and a richly detailed world to explore, Shangri-La Frontier offers an unparalleled gaming experience that will keep players coming back for more. | |
| </p> | |
| <button class="btn-primary px-6 py-3 rounded-lg font-semibold"> | |
| READ MORE | |
| </button> | |
| </div> | |
| <div class="relative"> | |
| <div class="w-full h-96 bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl flex items-center justify-center"> | |
| <div class="w-64 h-64 bg-gradient-to-r from-orange-500 to-yellow-500 rounded-full opacity-80"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-20 bg-gray-900"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4">GAME FEATURES</h2> | |
| <p class="text-gray-300 max-w-3xl mx-auto"> | |
| Explore the unique features that make Shangri-La Frontier stand out from other MMORPGs. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <div class="feature-card bg-gray-800 rounded-2xl p-8 text-center"> | |
| <div class="w-16 h-16 bg-gradient-to-r from-orange-500 to-yellow-500 rounded-lg mx-auto mb-6 flex items-center justify-center"> | |
| <i class="fas fa-sword text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4">IMMERSIVE GAMEPLAY</h3> | |
| <p class="text-gray-300"> | |
| Dive into a world where every action feels real and every decision matters. | |
| </p> | |
| </div> | |
| <div class="feature-card bg-gray-800 rounded-2xl p-8 text-center"> | |
| <div class="w-16 h-16 bg-gradient-to-r from-orange-500 to-yellow-500 rounded-lg mx-auto mb-6 flex items-center justify-center"> | |
| <i class="fas fa-users text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4">MULTIPLAYER EXPERIENCE</h3> | |
| <p class="text-gray-300"> | |
| Team up with friends or compete against other players in epic battles. | |
| </p> | |
| </div> | |
| <div class="feature-card bg-gray-800 rounded-2xl p-8 text-center"> | |
| <div class="w-16 h-16 bg-gradient-to-r from-orange-500 to-yellow-500 rounded-lg mx-auto mb-6 flex items-center justify-center"> | |
| <i class="fas fa-map text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4">VAST OPEN WORLD</h3> | |
| <p class="text-gray-300"> | |
| Explore a massive world filled with diverse landscapes and hidden secrets. | |
| </p> | |
| </div> | |
| <div class="feature-card bg-gray-800 rounded-2xl p-8 text-center"> | |
| <div class="w-16 h-16 bg-gradient-to-r from-orange-500 to-yellow-500 rounded-lg mx-auto mb-6 flex items-center justify-center"> | |
| <i class="fas fa-cog text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4">CUSTOMIZATION</h3> | |
| <p class="text-gray-300"> | |
| Create your unique character with extensive customization options. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- System Requirements --> | |
| <section class="py-20 bg-black"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid md:grid-cols-2 gap-12"> | |
| <div> | |
| <h2 class="text-4xl font-bold mb-8 text-orange-400">SYSTEM REQUIREMENTS</h2> | |
| <p class="text-gray-300 mb-8"> | |
| Ensure your system meets these requirements for optimal gameplay experience. | |
| </p> | |
| </div> | |
| <div class="space-y-6"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">MINIMUM</h3> | |
| <ul class="space-y-2 text-gray-300"> | |
| <li>• OS: Windows 10 (64-bit)</li> | |
| <li>• Processor: Intel Core i5-4460 or AMD FX-6300</li> | |
| <li>• Memory: 8 GB RAM</li> | |
| <li>• Graphics: NVIDIA GeForce GTX 760 or AMD Radeon R7 260x</li> | |
| <li>• DirectX: Version 11</li> | |
| <li>• Storage: 50 GB available space</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">RECOMMENDED</h3> | |
| <ul class="space-y-2 text-gray-300"> | |
| <li>• OS: Windows 10 (64-bit)</li> | |
| <li>• Processor: Intel Core i7-4790 or AMD Ryzen 5 1500X</li> | |
| <li>• Memory: 16 GB RAM</li> | |
| <li>• Graphics: NVIDIA GeForce GTX 1060 or AMD Radeon RX 580</li> | |
| <li>• DirectX: Version 12</li> | |
| <li>• Storage: 50 GB available space</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- News Section --> | |
| <section class="py-20 bg-gray-900"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4">LATEST NEWS</h2> | |
| <p class="text-gray-300 max-w-3xl mx-auto"> | |
| Stay updated with the latest news and updates from the world of Shangri-La Frontier. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="news-card rounded-2xl overflow-hidden"> | |
| <div class="h-48 bg-gradient-to-br from-orange-600 to-yellow-600"></div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-3">NEW EXPANSION ANNOUNCED</h3> | |
| <p class="text-gray-300 mb-4"> | |
| Get ready for the biggest update yet with new areas, quests, and challenges. | |
| </p> | |
| <button class="text-orange-400 font-semibold hover:text-orange-300 transition-colors"> | |
| READ MORE → | |
| </button> | |
| </div> | |
| </div> | |
| <div class="news-card rounded-2xl overflow-hidden"> | |
| <div class="h-48 bg-gradient-to-br from-blue-600 to-purple-600"></div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-3">COMMUNITY EVENT</h3> | |
| <p class="text-gray-300 mb-4"> | |
| Join us for an exciting community event with exclusive rewards and challenges. | |
| </p> | |
| <button class="text-orange-400 font-semibold hover:text-orange-300 transition-colors"> | |
| READ MORE → | |
| </button> | |
| </div> | |
| </div> | |
| <div class="news-card rounded-2xl overflow-hidden"> | |
| <div class="h-48 bg-gradient-to-br from-green-600 to-teal-600"></div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-3">GAME UPDATE 1.2</h3> | |
| <p class="text-gray-300 mb-4"> | |
| Discover the latest features and improvements in our newest update. | |
| </p> | |
| <button class="text-orange-400 font-semibold hover:text-orange-300 transition-colors"> | |
| READ MORE → | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-black py-12 border-t border-gray-800"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">SHANGRI-LA FRONTIER</h3> | |
| <p class="text-gray-400"> | |
| The ultimate MMORPG experience awaits. Join thousands of players in an epic adventure. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">QUICK LINKS</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white transition-colors">Home</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">About</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Features</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">News</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">LEGAL</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white transition-colors">Privacy Policy</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Terms of Service</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Refund Policy</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">FOLLOW US</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-orange-500 transition-colors"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-orange-500 transition-colors"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-orange-500 transition-colors"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-orange-500 transition-colors"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2023 Shangri-La Frontier. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.querySelector('.md\\:hidden').addEventListener('click', function() { | |
| const menu = document.querySelector('.md\\:flex'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ | |
| behavior: 'smooth', | |
| block: 'start' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Add scroll effect to header | |
| window.addEventListener('scroll', function() { | |
| const header = document.querySelector('header'); | |
| if (window.scrollY > 100) { | |
| header.classList.add('bg-opacity-95'); | |
| } else { | |
| header.classList.remove('bg-opacity-95'); | |
| } | |
| }); | |
| // Trailer play button functionality | |
| document.querySelector('.trailer-overlay').addEventListener('click', function() { | |
| // In a real implementation, this would open a video modal | |
| alert('Trailer would play here in a real implementation'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |