Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI-Visionary Tube | AI Videos & Images</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/video-card.js"></script> | |
| <script src="components/footer.js"></script> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .video-grid { | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg rounded-xl text-white p-8 mb-10"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <h1 class="text-4xl font-bold mb-4">Explore the Future of AI-Generated Content</h1> | |
| <p class="text-xl mb-8">Discover stunning AI videos, images, and creative tools from visionary creators worldwide</p> | |
| <div class="relative max-w-xl mx-auto"> | |
| <input type="text" placeholder="Search AI content..." class="w-full py-3 px-5 rounded-full text-gray-800 focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-purple-600 text-white p-2 rounded-full hover:bg-purple-700 transition"> | |
| <i data-feather="search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Categories --> | |
| <section class="mb-12"> | |
| <h2 class="text-2xl font-bold mb-6">Browse Categories</h2> | |
| <div class="flex space-x-4 overflow-x-auto pb-4"> | |
| <a href="#" class="flex-shrink-0 px-4 py-2 bg-white rounded-full shadow-sm hover:bg-gray-200 transition">All</a> | |
| <a href="#" class="flex-shrink-0 px-4 py-2 bg-white rounded-full shadow-sm hover:bg-gray-200 transition">AI Videos</a> | |
| <a href="#" class="flex-shrink-0 px-4 py-2 bg-white rounded-full shadow-sm hover:bg-gray-200 transition">AI Images</a> | |
| <a href="#" class="flex-shrink-0 px-4 py-2 bg-white rounded-full shadow-sm hover:bg-gray-200 transition">Tutorials</a> | |
| <a href="#" class="flex-shrink-0 px-4 py-2 bg-white rounded-full shadow-sm hover:bg-gray-200 transition">Tools</a> | |
| <a href="#" class="flex-shrink-0 px-4 py-2 bg-white rounded-full shadow-sm hover:bg-gray-200 transition">Showcase</a> | |
| </div> | |
| </section> | |
| <!-- Featured Content --> | |
| <section class="mb-12"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold">Trending Now</h2> | |
| <a href="#" class="text-purple-600 hover:text-purple-800 flex items-center"> | |
| View all <i data-feather="chevron-right" class="ml-1"></i> | |
| </a> | |
| </div> | |
| <div class="video-grid grid gap-6"> | |
| <custom-video-card | |
| title="Stunning AI-Generated Nature Documentary" | |
| creator="AI Vision Studios" | |
| views="1.2M" | |
| duration="12:34" | |
| thumbnail="http://static.photos/nature/640x360/1" | |
| ></custom-video-card> | |
| <custom-video-card | |
| title="How to Create AI Art with Midjourney" | |
| creator="Digital Creators" | |
| views="856K" | |
| duration="8:21" | |
| thumbnail="http://static.photos/technology/640x360/2" | |
| ></custom-video-card> | |
| <custom-video-card | |
| title="AI-Generated Cityscapes of the Future" | |
| creator="Future Visions" | |
| views="543K" | |
| duration="15:42" | |
| thumbnail="http://static.photos/cityscape/640x360/3" | |
| ></custom-video-card> | |
| <custom-video-card | |
| title="Turning Text into Video with AI" | |
| creator="Tech Innovators" | |
| views="723K" | |
| duration="6:15" | |
| thumbnail="http://static.photos/abstract/640x360/4" | |
| ></custom-video-card> | |
| </div> | |
| </section> | |
| <!-- For You Section --> | |
| <section class="mb-12"> | |
| <h2 class="text-2xl font-bold mb-6">Recommended For You</h2> | |
| <div class="video-grid grid gap-6"> | |
| <custom-video-card | |
| title="AI Animation Tools Compared" | |
| creator="Animation Hub" | |
| views="412K" | |
| duration="18:09" | |
| thumbnail="http://static.photos/education/640x360/5" | |
| ></custom-video-card> | |
| <custom-video-card | |
| title="Creating AI-Generated Music Videos" | |
| creator="Sound & Vision" | |
| views="328K" | |
| duration="9:47" | |
| thumbnail="http://static.photos/music/640x360/6" | |
| ></custom-video-card> | |
| <custom-video-card | |
| title="AI in Film Production" | |
| creator="Cinema Tech" | |
| views="276K" | |
| duration="22:31" | |
| thumbnail="http://static.photos/studio/640x360/7" | |
| ></custom-video-card> | |
| <custom-video-card | |
| title="Ethics of AI-Generated Content" | |
| creator="Future Ethics" | |
| views="198K" | |
| duration="14:22" | |
| thumbnail="http://static.photos/science/640x360/8" | |
| ></custom-video-card> | |
| </div> | |
| </section> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="script.js"></script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |