| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>TestComix - A Splashy Visual Narrative</title> |
| | <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| | <link rel="stylesheet" href="style.css"> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script> |
| | tailwind.config = { |
| | theme: { |
| | extend: { |
| | colors: { |
| | electric: { |
| | 50: '#f0f9ff', |
| | 100: '#e0f2fe', |
| | 200: '#bae6fd', |
| | 300: '#7dd3fc', |
| | 400: '#38bdf8', |
| | 500: '#0ea5e9', |
| | 600: '#0284c7', |
| | 700: '#0369a1', |
| | 800: '#075985', |
| | 900: '#0c4a6e', |
| | }, |
| | neon: { |
| | 50: '#fdf2f8', |
| | 100: '#fce7f3', |
| | 200: '#fbcfe8', |
| | 300: '#f9a8d4', |
| | 400: '#f472b6', |
| | 500: '#ec4899', |
| | 600: '#db2777', |
| | 700: '#be185d', |
| | 800: '#9d174d', |
| | 900: '#831843', |
| | } |
| | } |
| | } |
| | } |
| | } |
| | </script> |
| | <script src="https://unpkg.com/feather-icons"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| | </head> |
| | <body class="bg-gradient-to-br from-gray-900 via-purple-900 to-black min-h-screen overflow-x-hidden"> |
| | <custom-header></custom-header> |
| | |
| | <main class="container mx-auto px-4 py-12 md:py-24"> |
| | |
| | <section class="text-center mb-16 md:mb-24"> |
| | <div class="relative inline-block mb-8"> |
| | <div class="absolute -inset-4 bg-gradient-to-r from-electric-500 via-purple-500 to-neon-500 rounded-full blur-xl opacity-70 animate-pulse"></div> |
| | <h1 class="relative text-6xl md:text-8xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-electric-300 via-white to-neon-300 leading-tight"> |
| | TEST |
| | </h1> |
| | </div> |
| | <p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto mb-12"> |
| | A visual narrative told through the dynamic language of comic book art. |
| | Each panel below tells a unique chapter of our story. |
| | </p> |
| | |
| | <div class="flex flex-wrap justify-center gap-6"> |
| | <div class="flex items-center text-electric-300"> |
| | <i data-feather="zap" class="w-6 h-6 mr-2"></i> |
| | <span>Electric Visuals</span> |
| | </div> |
| | <div class="flex items-center text-neon-400"> |
| | <i data-feather="image" class="w-6 h-6 mr-2"></i> |
| | <span>Comic Book Style</span> |
| | </div> |
| | <div class="flex items-center text-purple-300"> |
| | <i data-feather="layout" class="w-6 h-6 mr-2"></i> |
| | <span>Dynamic Layout</span> |
| | </div> |
| | </div> |
| | </section> |
| | |
| | |
| | <section class="mb-20"> |
| | <div class="comic-panels-container"> |
| | <div class="comic-divider mb-12"> |
| | <div class="flex items-center"> |
| | <div class="h-1 bg-gradient-to-r from-electric-500 to-transparent flex-grow"></div> |
| | <div class="mx-4 flex items-center"> |
| | <div class="w-8 h-8 rounded-full bg-electric-500 animate-ping opacity-70"></div> |
| | <div class="w-10 h-10 rounded-full bg-electric-500 border-4 border-gray-900 ml-2"></div> |
| | <div class="w-8 h-8 rounded-full bg-neon-500 animate-ping opacity-70 ml-2 delay-300"></div> |
| | </div> |
| | <div class="h-1 bg-gradient-to-l from-neon-500 to-transparent flex-grow"></div> |
| | </div> |
| | <h2 class="text-center mt-6 text-3xl font-bold text-white"> |
| | <span class="bg-gradient-to-r from-electric-300 to-neon-300 bg-clip-text text-transparent"> |
| | CHAPTER I: THE VISUAL SAGA |
| | </span> |
| | </h2> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-4"> |
| | |
| | <div class="comic-panel group" data-panel="1"> |
| | <div class="comic-frame"> |
| | <div class="comic-image"> |
| | <img src="http://static.photos/gradient/1024x576/101" |
| | alt="Abstract Gradient" |
| | class="panel-img"> |
| | <div class="comic-overlay"> |
| | <div class="speech-bubble"> |
| | <span>"Behold the dawn of digital art!"</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="comic-caption"> |
| | <h3 class="text-2xl font-bold mb-2 text-electric-300">THE DAWN</h3> |
| | <p class="text-gray-300">Where colors awaken and pixels come to life in a symphony of light.</p> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="comic-panel group" data-panel="2"> |
| | <div class="comic-frame"> |
| | <div class="comic-image"> |
| | <img src="http://static.photos/cityscape/1024x576/202" |
| | alt="Cityscape at Dusk" |
| | class="panel-img"> |
| | <div class="comic-overlay"> |
| | <div class="sound-effect">BOOM!</div> |
| | </div> |
| | </div> |
| | <div class="comic-caption"> |
| | <h3 class="text-2xl font-bold mb-2 text-neon-400">THE CONVERGENCE</h3> |
| | <p class="text-gray-300">Urban landscapes meet digital dreams in explosive harmony.</p> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="comic-panel group" data-panel="3"> |
| | <div class="comic-frame"> |
| | <div class="comic-image"> |
| | <img src="http://static.photos/abstract/1024x576/303" |
| | alt="Abstract Art" |
| | class="panel-img"> |
| | <div class="comic-overlay"> |
| | <div class="thought-bubble"> |
| | <span>"What lies beyond the canvas?"</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="comic-caption"> |
| | <h3 class="text-2xl font-bold mb-2 text-purple-300">THE BEYOND</h3> |
| | <p class="text-gray-300">Exploring the uncharted territories of visual imagination.</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="comic-divider mt-12"> |
| | <div class="flex items-center"> |
| | <div class="h-1 bg-gradient-to-r from-purple-500 to-transparent flex-grow"></div> |
| | <div class="mx-8 text-center"> |
| | <button id="nextChapterBtn" class="bg-gradient-to-r from-electric-500 to-neon-500 hover:from-electric-600 hover:to-neon-600 text-white font-bold py-3 px-8 rounded-full transform hover:scale-105 transition-all duration-300 shadow-2xl shadow-electric-500/30 flex items-center"> |
| | <i data-feather="arrow-right" class="w-5 h-5 mr-2"></i> |
| | Continue the Adventure |
| | </button> |
| | </div> |
| | <div class="h-1 bg-gradient-to-l from-purple-500 to-transparent flex-grow"></div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| | |
| | |
| | <section class="bg-gradient-to-r from-gray-800/50 to-gray-900/50 rounded-2xl p-8 mb-16 backdrop-blur-sm border border-gray-700/50"> |
| | <h2 class="text-3xl font-bold text-center mb-8 text-white"> |
| | <span class="bg-gradient-to-r from-electric-300 to-neon-300 bg-clip-text text-transparent"> |
| | CREATE YOUR OWN COMIC |
| | </span> |
| | </h2> |
| | <div class="grid md:grid-cols-3 gap-8"> |
| | <div class="text-center"> |
| | <div class="w-20 h-20 mx-auto mb-4 rounded-full bg-gradient-to-br from-electric-500 to-purple-500 flex items-center justify-center"> |
| | <i data-feather="palette" class="w-10 h-10 text-white"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-2 text-electric-300">Choose Colors</h3> |
| | <p class="text-gray-300">Pick from our electric palette to set the mood</p> |
| | </div> |
| | <div class="text-center"> |
| | <div class="w-20 h-20 mx-auto mb-4 rounded-full bg-gradient-to-br from-purple-500 to-neon-500 flex items-center justify-content-center"> |
| | <i data-feather="edit-3" class="w-10 h-10 text-white"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-2 text-neon-400">Add Dialogue</h3> |
| | <p class="text-gray-300">Craft compelling stories with speech bubbles</p> |
| | </div> |
| | <div class="text-center"> |
| | <div class="w-20 h-20 mx-auto mb-4 rounded-full bg-gradient-to-br from-neon-500 to-electric-500 flex items-center justify-center"> |
| | <i data-feather="share-2" class="w-10 h-10 text-white"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-2 text-purple-300">Share & Shine</h3> |
| | <p class="text-gray-300">Publish your masterpiece to the world</p> |
| | </div> |
| | </div> |
| | </section> |
| | </main> |
| | |
| | <custom-footer></custom-footer> |
| | |
| | |
| | <script src="components/header.js"></script> |
| | <script src="components/footer.js"></script> |
| | <script src="script.js"></script> |
| | <script> |
| | feather.replace(); |
| | </script> |
| | <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| | </body> |
| | </html> |
