Spaces:

Kon2hai
/

awesome

Running

App Files Files Community

Kon2hai commited on Jun 7, 2025

Commit

1d1576a

verified ·

1 Parent(s): 0a2ba9b

undefined - Initial Deployment

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +700 -19
prompts.txt +0 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Awesome
-emoji: 🚀
-colorFrom: indigo
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: awesome
+emoji: 🐳
+colorFrom: green
+colorTo: yellow
 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,700 @@
-<!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>AnimaGraph - High-Quality 3D Anime Characters</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: {
+                        sakura: '#ff7eb9',
+                        midnight: '#150734',
+                        lavender: '#c2b1fa',
+                        neonblue: '#00c3ff',
+                        velvet: '#a13d99',
+                    },
+                    fontFamily: {
+                        'japanese': ['"Noto Sans JP"', 'sans-serif'],
+                        'anime': ['"Anime Ace"', 'sans-serif'],
+                    }
+                }
+            }
+        }
+    </script>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style type="text/css">
+        @font-face {
+            font-family: 'Anime Ace';
+            src: url('https://raw.githubusercontent.com/AlexWarnes/fonts/master/OTF/Anime%20Ace.otf') format('opentype');
+        }
+        body {
+            background: linear-gradient(135deg, #0f0c29 0%, #150734 25%, #2a0d6e 75%, #0f0c29 100%);
+            color: #e5e7eb;
+            overflow-x: hidden;
+            font-family: 'Noto Sans JP', sans-serif;
+        }
+        .character-card {
+            background: rgba(26, 16, 64, 0.8);
+            border-radius: 16px;
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            overflow: hidden;
+            border: 1px solid rgba(194, 177, 250, 0.2);
+        }
+        .character-card:hover {
+            transform: translateY(-10px) scale(1.02);
+            box-shadow: 0 20px 30px rgba(178, 12, 248, 0.25);
+            border-color: rgba(194, 177, 250, 0.5);
+        }
+        .model-viewer {
+            position: relative;
+            width: 100%;
+            height: 300px;
+            border-radius: 12px 12px 0 0;
+            overflow: hidden;
+            background: linear-gradient(135deg, #21005d 0%, #6750a4 100%);
+        }
+        .model-placeholder {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            opacity: 0.9;
+        }
+        .glowing-border {
+            border: 2px solid transparent;
+            border-image: linear-gradient(45deg, #ff7eb9, #8a2be2, #00c3ff);
+            border-image-slice: 1;
+            box-shadow: 0 0 20px rgba(138, 43, 226, 0.5);
+        }
+        .nav-link {
+            position: relative;
+            padding-bottom: 5px;
+        }
+        .nav-link::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 0;
+            height: 2px;
+            background: linear-gradient(90deg, #ff7eb9, #00c3ff);
+            transition: width 0.3s ease;
+        }
+        .nav-link:hover::after {
+            width: 100%;
+        }
+        .hero-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(ellipse at center, rgba(21, 7, 52, 0.7) 0%, rgba(21, 7, 52, 0.9) 70%, rgba(21, 7, 52, 1) 100%);
+        }
+        .model-shadow {
+            filter: drop-shadow(0 10px 15px rgba(138, 43, 226, 0.6));
+        }
+        .glow-text {
+            text-shadow: 0 0 10px rgba(255, 126, 185, 0.7), 0 0 20px rgba(255, 126, 185, 0.5);
+        }
+        .stagger-animation > * {
+            opacity: 0;
+            transform: translateY(20px);
+            animation: fadeInUp 0.6s forwards;
+        }
+        .stagger-animation > *:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+        .stagger-animation > *:nth-child(3) {
+            animation-delay: 0.4s;
+        }
+        @keyframes fadeInUp {
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        @media (max-width: 768px) {
+            .model-viewer {
+                height: 250px;
+            }
+            .hero-text {
+                font-size: 2.5rem !important;
+            }
+        }
+    </style>
+</head>
+<body class="min-h-screen">
+    <!-- Header/Navigation -->
+    <header class="fixed w-full z-50 py-4 px-6 backdrop-blur-md bg-opacity-80">
+        <div class="max-w-7xl mx-auto flex justify-between items-center">
+            <div class="flex items-center">
+                <i class="fas fa-ghost text-sakura text-3xl mr-2"></i>
+                <span class="text-2xl font-bold font-anime tracking-wider text-white">ANIMAGRAPH</span>
+            </div>
+            <nav class="hidden md:flex space-x-10">
+                <a href="#" class="nav-link text-lavender font-medium hover:text-white transition-colors duration-300">HOME</a>
+                <a href="#" class="nav-link text-lavender font-medium hover:text-white transition-colors duration-300">GALLERY</a>
+                <a href="#" class="nav-link text-lavender font-medium hover:text-white transition-colors duration-300">TECH</a>
+                <a href="#" class="nav-link text-lavender font-medium hover:text-white transition-colors duration-300">ABOUT</a>
+                <a href="#" class="nav-link text-lavender font-medium hover:text-white transition-colors duration-300">CONTACT</a>
+            </nav>
+            <div class="flex items-center space-x-4">
+                <button class="bg-transparent border-2 border-lavender hover:bg-lavender hover:text-midnight text-lavender px-4 py-2 rounded-full transition-all duration-300">
+                    LOG IN
+                </button>
+                <button class="bg-gradient-to-r from-sakura to-velvet text-white px-5 py-2 rounded-full hover:shadow-lg hover:shadow-purple-900/50 transition-all duration-300">
+                    SIGN UP
+                </button>
+                <button class="md:hidden text-lavender text-2xl">
+                    <i class="fas fa-bars"></i>
+                </button>
+            </div>
+        </div>
+    </header>
+    <!-- Hero Section -->
+    <section class="relative pt-32 pb-20 px-6 overflow-hidden">
+        <div class="hero-overlay"></div>
+        <div class="max-w-7xl mx-auto relative z-10">
+            <div class="flex flex-col lg:flex-row items-center">
+                <div class="lg:w-1/2 mb-16 lg:mb-0 stagger-animation">
+                    <h1 class="hero-text text-5xl md:text-6xl font-bold leading-tight mb-6 text-white">
+                        <span class="block glow-text">ULTRA HD</span>
+                        <span class="block bg-gradient-to-r from-sakura to-neonblue bg-clip-text text-transparent">3D ANIME CHARACTERS</span>
+                    </h1>
+                    <p class="text-lavender text-lg mb-8 max-w-lg leading-relaxed">
+                        Experience breathtaking 3D anime characters with cinematic quality rendering, hyper-realistic textures, and next-generation lighting techniques. Designed for games, animation, and digital art.
+                    </p>
+                    <div class="flex flex-wrap gap-4">
+                        <button class="bg-gradient-to-r from-sakura to-velvet text-white px-8 py-3 rounded-full flex items-center hover:shadow-lg hover:shadow-purple-900/50 transition-all duration-300">
+                            <i class="fas fa-play-circle mr-2"></i> SHOWCASE DEMO
+                        </button>
+                        <button class="bg-transparent border-2 border-neonblue text-neonblue hover:bg-neonblue/10 px-8 py-3 rounded-full transition-all duration-300">
+                            LEARN TECH
+                        </button>
+                    </div>
+                </div>
+                <div class="lg:w-1/2 flex justify-center stagger-animation">
+                    <div class="model-viewer glowing-border relative">
+                        <div class="model-placeholder">
+                            <img src="https://cdn.donmai.us/original/1c/8d/1c8da8c19c34c1f7ca7a8b4a36c28c71.gif" alt="3D Anime Character Showcase" class="w-full h-full object-cover">
+                        </div>
+                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-midnight to-transparent p-4 text-center">
+                            <h3 class="font-bold text-xl text-white">YUMI - Cyber Samurai Edition</h3>
+                            <p class="text-lavender text-sm">PGR-inspired Combat Model</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Floating elements -->
+        <div class="absolute top-1/4 left-10 w-24 h-24 rounded-full bg-gradient-to-br from-sakura/20 to-transparent blur-xl"></div>
+        <div class="absolute bottom-20 right-20 w-32 h-32 rounded-full bg-gradient-to-br from-neonblue/20 to-transparent blur-xl"></div>
+    </section>
+    <!-- Tech Features Section -->
+    <section class="py-20 px-6">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-20">
+                <h2 class="text-4xl font-bold text-white mb-4">NEXT-GEN CHARACTER TECHNOLOGY</h2>
+                <div class="h-1 w-32 bg-gradient-to-r from-sakura to-neonblue mx-auto rounded-full"></div>
+                <p class="text-lavender max-w-2xl mx-auto mt-6">
+                    Our characters feature industry-leading technologies that bring anime designs to life with unprecedented realism and detail.
+                </p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+                <div class="p-8 character-card flex flex-col items-center text-center">
+                    <div class="w-20 h-20 rounded-full bg-gradient-to-br from-sakura to-velvet flex items-center justify-center mb-6">
+                        <i class="fas fa-atom text-white text-3xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-white mb-3">Subsurface Scattering</h3>
+                    <p class="text-lavender">
+                        Realistic skin rendering with advanced light penetration simulation for natural-looking skin.
+                    </p>
+                </div>
+                <div class="p-8 character-card flex flex-col items-center text-center">
+                    <div class="w-20 h-20 rounded-full bg-gradient-to-br from-lavender to-blue-600 flex items-center justify-center mb-6">
+                        <i class="fas fa-hat-wizard text-white text-3xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-white mb-3">HDRI Lighting</h3>
+                    <p class="text-lavender">
+                        Photorealistic environment-based lighting with accurate reflections and highlights.
+                    </p>
+                </div>
+                <div class="p-8 character-card flex flex-col items-center text-center">
+                    <div class="w-20 h-20 rounded-full bg-gradient-to-br from-neonblue to-cyan-400 flex items-center justify-center mb-6">
+                        <i class="fas fa-wind text-white text-3xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-white mb-3">Dynamic Simulation</h3>
+                    <p class="text-lavender">
+                        Physics-based cloth, hair, and accessory movement that responds realistically to motion.
+                    </p>
+                </div>
+                <div class="p-8 character-card flex flex-col items-center text-center">
+                    <div class="w-20 h-20 rounded-full bg-gradient-to-br from-velvet to-purple-600 flex items-center justify-center mb-6">
+                        <i class="fas fa-eye text-white text-3xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-white mb-3">Expressive Rigging</h3>
+                    <p class="text-lavender">
+                        Sophisticated facial rigs with 100+ controls for lifelike expressions and emotions.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Character Gallery -->
+    <section class="py-20 px-6 bg-gradient-to-b from-midnight/60 to-midnight">
+        <div class="max-w-7xl mx-auto">
+            <div class="flex justify-between items-center mb-12 flex-wrap">
+                <h2 class="text-4xl font-bold text-white">FEATURED CHARACTERS</h2>
+                <div class="mt-4 md:mt-0">
+                    <div class="flex space-x-2">
+                        <button class="px-4 py-2 text-lavender border border-lavender hover:bg-lavender/10 rounded-full transition-colors">PGR Series</button>
+                        <button class="px-4 py-2 text-lavender border border-lavender hover:bg-lavender/10 rounded-full transition-colors">Bishoujo</button>
+                        <button class="px-4 py-2 text-lavender border border-lavender hover:bg-lavender/10 rounded-full transition-colors">Cyberpunk</button>
+                    </div>
+                </div>
+            </div>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Character 1 -->
+                <div class="character-card">
+                    <div class="model-viewer">
+                        <div class="model-placeholder">
+                            <img src="https://cdn.donmai.us/original/7d/c9/7dc9f70b77d25c1acf1dda7c3d9b7c9d.gif" alt="Cyber Angel" class="w-full h-full object-cover">
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <div class="flex justify-between items-start">
+                            <div>
+                                <h3 class="font-bold text-xl text-white">ASTRIA</h3>
+                                <p class="text-lavender">Celestial Guardian</p>
+                            </div>
+                            <div class="bg-sakura/10 text-sakura px-3 py-1 rounded-full text-sm">NEW</div>
+                        </div>
+                        <div class="flex mt-4 mb-3">
+                            <div class="bg-midnight rounded-full px-3 py-1 mr-2 text-xs text-lavender">#PGR</div>
+                            <div class="bg-midnight rounded-full px-3 py-1 mr-2 text-xs text-lavender">#Bishoujo</div>
+                            <div class="bg-midnight rounded-full px-3 py-1 text-xs text-lavender">#Fantasy</div>
+                        </div>
+                        <p class="text-lavender text-sm mt-4">
+                            High-poly model with physically based rendering. Advanced armor dynamics and glowing energy effects.
+                        </p>
+                    </div>
+                </div>
+                <!-- Character 2 -->
+                <div class="character-card">
+                    <div class="model-viewer">
+                        <div class="model-placeholder">
+                            <img src="https://cdn.donmai.us/original/5d/5f/5d5fb9c1d0b1d6c8f07d0a5d1ff6ddaf.gif" alt="Cyber Ninja" class="w-full h-full object-cover">
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <div class="flex justify-between items-start">
+                            <div>
+                                <h3 class="font-bold text-xl text-white">KIRAKIRA</h3>
+                                <p class="text-lavender">Neon Shinobi</p>
+                            </div>
+                            <div class="bg-neonblue/10 text-neonblue px-3 py-1 rounded-full text-sm">POPULAR</div>
+                        </div>
+                        <div class="flex mt-4 mb-3">
+                            <div class="bg-midnight rounded-full px-3 py-1 mr-2 text-xs text-lavender">#Cyberpunk</div>
+                            <div class="bg-midnight rounded-full px-3 py-1 mr-2 text-xs text-lavender">#Ninja</div>
+                            <div class="bg-midnight rounded-full px-3 py-1 text-xs text-lavender">#Stealth</div>
+                        </div>
+                        <p class="text-lavender text-sm mt-4">
+                            Advanced cloth simulation with dynamic slicing effects and holographic weapon system.
+                        </p>
+                    </div>
+                </div>
+                <!-- Character 3 -->
+                <div class="character-card">
+                    <div class="model-viewer">
+                        <div class="model-placeholder">
+                            <img src="https://cdn.donmai.us/original/44/d1/44d15d0f19c7f7b6cfa7f9a5f00e6b4f.gif" alt="Void Sorceress" class="w-full h-full object-cover">
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <div class="flex justify-between items-start">
+                            <div>
+                                <h3 class="font-bold text-xl text-white">LUMINA</h3>
+                                <p class="text-lavender">Void Sorceress</p>
+                            </div>
+                            <div class="bg-velvet/10 text-velvet px-3 py-1 rounded-full text-sm">PREMIUM</div>
+                        </div>
+                        <div class="flex mt-4 mb-3">
+                            <div class="bg-midnight rounded-full px-3 py-1 mr-2 text-xs text-lavender">#Mage</div>
+                            <div class="bg-midnight rounded-full px-3 py-1 mr-2 text-xs text-lavender">#Magic</div>
+                            <div class="bg-midnight rounded-full px-3 py-1 text-xs text-lavender">#Ethereal</div>
+                        </div>
+                        <p class="text-lavender text-sm mt-4">
+                            Dynamic particle effects system with reactive magic trails. Real-time hair and cloak physics.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Art Style Showcase -->
+    <section class="py-20 px-6">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-4xl font-bold text-white mb-4">ANIME VISUAL STYLES</h2>
+                <div class="h-1 w-32 bg-gradient-to-r from-lavender to-sakura mx-auto rounded-full"></div>
+                <p class="text-lavender max-w-2xl mx-auto mt-6">
+                    We specialize in various anime art styles, blending traditional aesthetics with modern 3D techniques.
+                </p>
+            </div>
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-12 items-center">
+                <div class="lg:col-span-2">
+                    <div class="grid grid-cols-2 gap-8">
+                        <div>
+                            <div class="bg-gradient-to-br from-purple-900/70 to-transparent border border-lavender/30 p-6 rounded-xl mb-8">
+                                <i class="fas fa-fire text-sakura text-3xl mb-4"></i>
+                                <h3 class="text-xl font-bold text-white mb-2">2.5D Cel Shading</h3>
+                                <p class="text-lavender">
+                                    Hybrid style combining 2D anime aesthetics with 3D depth for the perfect blend.
+                                </p>
+                            </div>
+                            <div class="bg-gradient-to-br from-blue-900/70 to-transparent border border-lavender/30 p-6 rounded-xl">
+                                <i class="fas fa-bolt text-neonblue text-3xl mb-4"></i>
+                                <h3 class="text-xl font-bold text-white mb-2">Dynamic Lighting</h3>
+                                <p class="text-lavender">
+                                    Cinematic lighting techniques adapted for anime-style characters.
+                                </p>
+                            </div>
+                        </div>
+                        <div class="pt-10">
+                            <div class="bg-gradient-to-br from-pink-900/70 to-transparent border border-lavender/30 p-6 rounded-xl mb-8">
+                                <i class="fas fa-rainbow text-lavender text-3xl mb-4"></i>
+                                <h3 class="text-xl font-bold text-white mb-2">PBR Textures</h3>
+                                <p class="text-lavender">
+                                    Physically-based materials with anime-inspired color palettes.
+                                </p>
+                            </div>
+                            <div class="bg-gradient-to-br from-purple-900/70 to-transparent border border-lavender/30 p-6 rounded-xl">
+                                <i class="fas fa-magic text-velvet text-3xl mb-4"></i>
+                                <h3 class="text-xl font-bold text-white mb-2">Post-processing FX</h3>
+                                <p class="text-lavender">
+                                    Bloom, rim lighting, and anime-specific effects to enhance the visuals.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex justify-center stagger-animation">
+                    <div class="relative">
+                        <div class="model-shadow">
+                            <div class="w-72 h-72 rounded-full bg-gradient-to-r from-sakura to-velvet absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 blur-3xl opacity-40"></div>
+                            <img src="https://cdn.donmai.us/original/c6/9d/c69d31f6ffed0b3f7d5fcce6d3cbc8c1.png" alt="Art Style Comparison" class="relative rounded-2xl border-2 border-lavender/30">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Technology Comparison -->
+    <section class="py-20 px-6 bg-gradient-to-b from-midnight/70 to-midnight">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-4xl font-bold text-white mb-4">RENDERING TECHNOLOGY</h2>
+                <div class="h-1 w-32 bg-gradient-to-r from-neonblue to-cyan-400 mx-auto rounded-full"></div>
+                <p class="text-lavender max-w-2xl mx-auto mt-6">
+                    Our rendering engine surpasses traditional anime character models with industry-leading technology.
+                </p>
+            </div>
+            <div class="bg-gradient-to-br from-midnight/90 to-purple-900/20 rounded-3xl border border-lavender/30 p-8">
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-10">
+                    <div>
+                        <h3 class="text-2xl font-bold text-white mb-4 glow-text">CHARACTER DETAILS</h3>
+                        <ul class="space-y-4">
+                            <li class="flex items-start">
+                                <div class="bg-neonblue/20 p-2 rounded-full mr-3">
+                                    <i class="fas fa-check text-neonblue"></i>
+                                </div>
+                                <span class="text-lavender">4K-8K texture resolution with advanced compression</span>
+                            </li>
+                            <li class="flex items-start">
+                                <div class="bg-neonblue/20 p-2 rounded-full mr-3">
+                                    <i class="fas fa-check text-neonblue"></i>
+                                </div>
+                                <span class="text-lavender">Ray-traced reflections on metallic surfaces</span>
+                            </li>
+                            <li class="flex items-start">
+                                <div class="bg-neonblue/20 p-2 rounded-full mr-3">
+                                    <i class="fas fa-check text-neonblue"></i>
+                                </div>
+                                <span class="text-lavender">Advanced multi-layered subsurface scattering</span>
+                            </li>
+                            <li class="flex items-start">
+                                <div class="bg-neonblue/20 p-2 rounded-full mr-3">
+                                    <i class="fas fa-check text-neonblue"></i>
+                                </div>
+                                <span class="text-lavender">Anime-specific eye shaders with parallax effect</span>
+                            </li>
+                        </ul>
+                    </div>
+                    <div>
+                        <h3 class="text-2xl font-bold text-white mb-4 glow-text">TECHNICAL SPECS</h3>
+                        <div class="space-y-5">
+                            <div>
+                                <div class="flex justify-between mb-1">
+                                    <span class="text-lavender">Polygon Count</span>
+                                    <span class="text-sakura">200K+</span>
+                                </div>
+                                <div class="w-full bg-gray-700 rounded-full h-2">
+                                    <div class="bg-gradient-to-r from-sakura to-velvet h-2 rounded-full" style="width: 95%"></div>
+                                </div>
+                            </div>
+                            <div>
+                                <div class="flex justify-between mb-1">
+                                    <span class="text-lavender">Texture Layers</span>
+                                    <span class="text-sakura">12-20 Layers</span>
+                                </div>
+                                <div class="w-full bg-gray-700 rounded-full h-2">
+                                    <div class="bg-gradient-to-r from-neonblue to-cyan-400 h-2 rounded-full" style="width: 85%"></div>
+                                </div>
+                            </div>
+                            <div>
+                                <div class="flex justify-between mb-1">
+                                    <span class="text-lavender">Bone Rigging</span>
+                                    <span class="text-sakura">150-250 Bones</span>
+                                </div>
+                                <div class="w-full bg-gray-700 rounded-full h-2">
+                                    <div class="bg-gradient-to-r from-lavender to-blue-500 h-2 rounded-full" style="width: 75%"></div>
+                                </div>
+                            </div>
+                            <div>
+                                <div class="flex justify-between mb-1">
+                                    <span class="text-lavender">Animation Support</span>
+                                    <span class="text-sakura">600+ Blendshapes</span>
+                                </div>
+                                <div class="w-full bg-gray-700 rounded-full h-2">
+                                    <div class="bg-gradient-to-r from-velvet to-purple-600 h-2 rounded-full" style="width: 90%"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex items-center">
+                        <div class="bg-gradient-to-br from-midnight to-purple-900/30 border border-lavender/30 rounded-2xl p-6 text-center w-full">
+                            <div class="inline-block bg-gradient-to-br from-sakura to-velvet p-4 rounded-full mb-6">
+                                <i class="fas fa-dice-d20 text-white text-4xl"></i>
+                            </div>
+                            <h3 class="text-xl font-bold text-white mb-3">REALTIME RAYTRACING</h3>
+                            <p class="text-lavender mb-6">
+                                Our proprietary engine supports real-time raytracing for reflections, shadows, and global illumination.
+                            </p>
+                            <button class="bg-gradient-to-r from-sakura to-velvet text-white px-6 py-2 rounded-full">
+                                Tech Demo
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- CTA Section -->
+    <section class="py-20 px-6">
+        <div class="max-w-5xl mx-auto text-center bg-gradient-to-br from-midnight to-purple-900/20 rounded-3xl border border-lavender/30 p-12 relative overflow-hidden">
+            <div class="absolute -top-20 -right-20 w-64 h-64 rounded-full bg-gradient-to-br from-sakura/20 to-transparent blur-3xl"></div>
+            <div class="absolute -bottom-20 -left-20 w-64 h-64 rounded-full bg-gradient-to-br from-neonblue/20 to-transparent blur-3xl"></div>
+            <div class="relative z-10">
+                <h2 class="text-4xl font-bold text-white mb-6 glow-text">START CREATING TODAY</h2>
+                <p class="text-lavender text-xl max-w-2xl mx-auto mb-10">
+                    Join thousands of developers and artists using our high-quality 3D anime characters in their projects.
+                </p>
+                <div class="flex flex-col md:flex-row justify-center gap-6">
+                    <button class="bg-gradient-to-r from-sakura to-velvet hover:from-sakura/90 hover:to-velvet/90 text-white px-8 py-4 rounded-full flex items-center justify-center transition-all duration-300">
+                        <i class="fas fa-download text-xl mr-3"></i> DOWNLOAD STARTER KIT
+                    </button>
+                    <button class="bg-gradient-to-r from-neonblue to-cyan-500 hover:from-neonblue/90 hover:to-cyan-500/90 text-white px-8 py-4 rounded-full flex items-center justify-center transition-all duration-300">
+                        <i class="fas fa-user-plus text-xl mr-3"></i> JOIN COMMUNITY
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="border-t border-lavender/20 py-12 px-6">
+        <div class="max-w-7xl mx-auto">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-10">
+                <div>
+                    <div class="flex items-center mb-6">
+                        <i class="fas fa-ghost text-sakura text-2xl mr-2"></i>
+                        <span class="text-xl font-bold font-anime tracking-wider text-white">ANIMAGRAPH</span>
+                    </div>
+                    <p class="text-lavender mb-6">
+                        High-quality 3D anime characters with AAA game-quality graphics for all your creative projects.
+                    </p>
+                    <div class="flex space-x-4">
+                        <a href="#" class="w-10 h-10 rounded-full bg-midnight/80 flex items-center justify-center hover:bg-sakura/20 transition-colors">
+                            <i class="fab fa-twitter text-lavender"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 rounded-full bg-midnight/80 flex items-center justify-center hover:bg-sakura/20 transition-colors">
+                            <i class="fab fa-discord text-lavender"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 rounded-full bg-midnight/80 flex items-center justify-center hover:bg-sakura/20 transition-colors">
+                            <i class="fab fa-artstation text-lavender"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 rounded-full bg-midnight/80 flex items-center justify-center hover:bg-sakura/20 transition-colors">
+                            <i class="fab fa-youtube text-lavender"></i>
+                        </a>
+                    </div>
+                </div>
+                <div>
+                    <h3 class="text-white font-bold text-lg mb-6">RESOURCES</h3>
+                    <ul class="space-y-3">
+                        <li><a href="#" class="text-lavender hover:text-neonblue transition-colors">Character Library</a></li>
+                        <li><a href="#" class="text-lavender hover:text-neonblue transition-colors">Documentation</a></li>
+                        <li><a href="#" class="text-lavender hover:text-neonblue transition-colors">Tutorials</a></li>
+                        <li><a href="#" class="text-lavender hover:text-neonblue transition-colors">Asset Store</a></li>
+                        <li><a href="#" class="text-lavender hover:text-neonblue transition-colors">Shader Library</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-white font-bold text-lg mb-6">COMPANY</h3>
+                    <ul class="space-y-3">
+                        <li><a href="#" class="text-lavender hover:text-neonblue transition-colors">About Us</a></li>
+                        <li><a href="#" class="text-lavender hover:text-neonblue transition-colors">Careers</a></li>
+                        <li><a href="#" class="text-lavender hover:text-neonblue transition-colors">Contact</a></li>
+                        <li><a href="#" class="text-lavender hover:text-neonblue transition-colors">Blog</a></li>
+                        <li><a href="#" class="text-lavender hover:text-neonblue transition-colors">License</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-white font-bold text-lg mb-6">SUBSCRIBE</h3>
+                    <p class="text-lavender mb-4">
+                        Get updates on new characters, features, and technology releases.
+                    </p>
+                    <div class="flex">
+                        <input type="email" placeholder="Your email" class="bg-midnight/70 border border-lavender/30 text-white rounded-l-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-sakura w-full">
+                        <button class="bg-gradient-to-r from-sakura to-velvet px-4 rounded-r-lg">
+                            <i class="fas fa-paper-plane text-white"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t border-lavender/10 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
+                <p class="text-lavender text-sm mb-4 md:mb-0">
+                    © 2023 ANIMAGRAPH. All rights reserved. Anime characters for demonstration purposes only.
+                </p>
+                <div class="flex space-x-8">
+                    <a href="#" class="text-lavender hover:text-neonblue text-sm">Terms</a>
+                    <a href="#" class="text-lavender hover:text-neonblue text-sm">Privacy</a>
+                    <a href="#" class="text-lavender hover:text-neonblue text-sm">Cookies</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Simple scroll animation for sections
+        document.addEventListener('DOMContentLoaded', function() {
+            // Stagger animation trigger on scroll
+            const staggerElements = document.querySelectorAll('.stagger-animation');
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.style.visibility = 'visible';
+                        const children = entry.target.children;
+                        for (let i = 0; i < children.length; i++) {
+                            setTimeout(() => {
+                                children[i].style.opacity = 1;
+                                children[i].style.transform = 'translateY(0)';
+                            }, 200 * i);
+                        }
+                        observer.unobserve(entry.target);
+                    }
+                });
+            }, { threshold: 0.2 });
+            staggerElements.forEach(el => {
+                el.style.visibility = 'hidden';
+                observer.observe(el);
+            });
+            // Character card hover effect enhancement
+            const characterCards = document.querySelectorAll('.character-card');
+            characterCards.forEach(card => {
+                card.addEventListener('mousemove', (e) => {
+                    const cardRect = card.getBoundingClientRect();
+                    const x = e.clientX - cardRect.left;
+                    const y = e.clientY - cardRect.top;
+                    const centerX = cardRect.width / 2;
+                    const centerY = cardRect.height / 2;
+                    const angleY = (x - centerX) / 25;
+                    const angleX = (centerY - y) / 25;
+                    card.style.transform = `perspective(1000px) rotateX(${angleX}deg) rotateY(${angleY}deg) scale(1.02)`;
+                });
+                card.addEventListener('mouseleave', () => {
+                    card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale(1)';
+                });
+            });
+        });
+    </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=Kon2hai/awesome" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

File without changes