Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GTA-Vice Team | Видео галерея</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: { | |
| primary: '#FF6B00', | |
| secondary: '#1A1A2E', | |
| accent: '#00B4D8', | |
| dark: '#0F0F1B', | |
| neon: '#00FF9D', | |
| }, | |
| fontFamily: { | |
| 'sans': ['"Exo 2"', 'sans-serif'], | |
| 'orbitron': ['Orbitron', 'sans-serif'], | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'glow': 'glow 2s ease-in-out infinite alternate', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-10px)' }, | |
| }, | |
| glow: { | |
| 'from': { 'text-shadow': '0 0 5px #fff, 0 0 10px #fff, 0 0 15px #FF6B00, 0 0 20px #FF6B00' }, | |
| 'to': { 'text-shadow': '0 0 10px #fff, 0 0 20px #fff, 0 0 30px #FF6B00, 0 0 40px #FF6B00' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700;800;900&family=Orbitron:wght@400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Exo 2', sans-serif; | |
| background-color: #0F0F1B; | |
| color: #E6E6E6; | |
| overflow-x: hidden; | |
| } | |
| .logo-text { | |
| font-family: 'Orbitron', sans-serif; | |
| text-shadow: 0 0 10px rgba(255, 107, 0, 0.7); | |
| } | |
| .video-card { | |
| transition: all 0.3s ease; | |
| transform: translateY(0); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .video-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(135deg, rgba(255,107,0,0.1) 0%, rgba(0,180,216,0.1) 100%); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| z-index: 1; | |
| } | |
| .video-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(255, 107, 0, 0.5); | |
| } | |
| .video-card:hover::before { | |
| opacity: 1; | |
| } | |
| .category-btn { | |
| transition: all 0.2s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .category-btn::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); | |
| transition: all 0.5s ease; | |
| } | |
| .category-btn:hover::before { | |
| left: 100%; | |
| } | |
| .category-btn.active { | |
| background-color: #FF6B00; | |
| color: white; | |
| box-shadow: 0 0 15px rgba(255, 107, 0, 0.5); | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #1A1A2E 0%, #0F0F1B 100%); | |
| } | |
| .neon-border { | |
| position: relative; | |
| } | |
| .neon-border::after { | |
| content: ''; | |
| position: absolute; | |
| top: -2px; | |
| left: -2px; | |
| right: -2px; | |
| bottom: -2px; | |
| background: linear-gradient(45deg, #FF6B00, #00B4D8, #00FF9D); | |
| z-index: -1; | |
| border-radius: inherit; | |
| background-size: 200% 200%; | |
| animation: gradient 3s ease infinite; | |
| } | |
| @keyframes gradient { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .animate-fade-in { | |
| animation: fadeIn 0.6s ease-out forwards; | |
| } | |
| .delay-1 { animation-delay: 0.1s; } | |
| .delay-2 { animation-delay: 0.2s; } | |
| .delay-3 { animation-delay: 0.3s; } | |
| .delay-4 { animation-delay: 0.4s; } | |
| .delay-5 { animation-delay: 0.5s; } | |
| .pagination-btn { | |
| transition: all 0.3s ease; | |
| } | |
| .pagination-btn:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 0 15px rgba(255, 107, 0, 0.5); | |
| } | |
| .pagination-btn.active { | |
| background-color: #FF6B00; | |
| color: white; | |
| box-shadow: 0 0 15px rgba(255, 107, 0, 0.5); | |
| } | |
| .floating-logo { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .particles { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| z-index: 0; | |
| } | |
| .particle { | |
| position: absolute; | |
| background: rgba(255, 107, 0, 0.5); | |
| border-radius: 50%; | |
| pointer-events: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Particles Background --> | |
| <div class="particles" id="particles"></div> | |
| <!-- Header --> | |
| <header class="hero-gradient border-b border-gray-800 relative overflow-hidden"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <div class="flex flex-col md:flex-row items-center justify-between"> | |
| <div class="mb-8 md:mb-0 animate-fade-in"> | |
| <div class="flex items-center"> | |
| <div class="w-20 h-20 bg-gradient-to-br from-primary to-accent rounded-full flex items-center justify-center mr-4 shadow-lg floating-logo"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-10 h-10 text-white"> | |
| <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path> | |
| </svg> | |
| </div> | |
| <div> | |
| <h1 class="text-4xl md:text-5xl font-bold text-white logo-text">GTA-VICE TEAM</h1> | |
| <p class="text-accent font-medium mt-1">Официальный видеоархив</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="animate-fade-in delay-1"> | |
| <a href="https://youtube.com/@gta-viceteam" target="_blank" class="bg-gradient-to-r from-primary to-accent hover:from-primary hover:to-primary hover:shadow-lg text-white font-medium py-3 px-6 rounded-full flex items-center transition-all neon-border"> | |
| <i class="fab fa-youtube mr-2 text-xl"></i> Наш YouTube канал | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-12 relative z-10"> | |
| <!-- Categories --> | |
| <div class="mb-12 animate-fade-in delay-2"> | |
| <h2 class="text-3xl font-bold text-white mb-6 flex items-center"> | |
| <span class="bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">Категории видео</span> | |
| <span class="ml-3 text-primary animate-pulse-slow">•</span> | |
| </h2> | |
| <div class="flex flex-wrap gap-3"> | |
| <button class="category-btn active bg-secondary hover:bg-gray-800 text-white py-2 px-4 rounded-full border border-gray-700" data-category="all"> | |
| <i class="fas fa-list mr-2"></i> Все видео | |
| </button> | |
| <button class="category-btn bg-secondary hover:bg-gray-800 text-white py-2 px-4 rounded-full border border-gray-700" data-category="gameplay"> | |
| <i class="fas fa-gamepad mr-2"></i> Геймплей | |
| </button> | |
| <button class="category-btn bg-secondary hover:bg-gray-800 text-white py-2 px-4 rounded-full border border-gray-700" data-category="mods"> | |
| <i class="fas fa-cogs mr-2"></i> Моды | |
| </button> | |
| <button class="category-btn bg-secondary hover:bg-gray-800 text-white py-2 px-4 rounded-full border border-gray-700" data-category="tutorials"> | |
| <i class="fas fa-graduation-cap mr-2"></i> Обучение | |
| </button> | |
| <button class="category-btn bg-secondary hover:bg-gray-800 text-white py-2 px-4 rounded-full border border-gray-700" data-category="streams"> | |
| <i class="fas fa-video mr-2"></i> Стримы | |
| </button> | |
| <button class="category-btn bg-secondary hover:bg-gray-800 text-white py-2 px-4 rounded-full border border-gray-700" data-category="reviews"> | |
| <i class="fas fa-star mr-2"></i> Обзоры | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Video Grid --> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" id="video-grid"> | |
| <!-- Video 1 --> | |
| <div class="video-card animate-fade-in delay-3 bg-secondary rounded-xl overflow-hidden border border-gray-800" data-category="gameplay"> | |
| <div class="relative pb-[56.25%]"> | |
| <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| <div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded"> | |
| <i class="fas fa-clock mr-1"></i> 15:42 | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-start justify-between"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-white mb-2">Эпичный геймплей GTA Vice City</h3> | |
| <p class="text-gray-400 text-sm mb-3">Потрясающие моменты из игры с нашими модами</p> | |
| </div> | |
| <button class="text-gray-400 hover:text-white transition-colors"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <span><i class="fas fa-eye mr-1"></i> 245K</span> | |
| <span class="mx-2">•</span> | |
| <span><i class="far fa-calendar-alt mr-1"></i> 2 недели назад</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video 2 --> | |
| <div class="video-card animate-fade-in delay-3 bg-secondary rounded-xl overflow-hidden border border-gray-800" data-category="mods"> | |
| <div class="relative pb-[56.25%]"> | |
| <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| <div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded"> | |
| <i class="fas fa-clock mr-1"></i> 22:18 | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-start justify-between"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-white mb-2">Лучшие моды для GTA Vice City 2023</h3> | |
| <p class="text-gray-400 text-sm mb-3">Топ 10 модов, которые изменят вашу игру</p> | |
| </div> | |
| <button class="text-gray-400 hover:text-white transition-colors"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <span><i class="fas fa-eye mr-1"></i> 180K</span> | |
| <span class="mx-2">•</span> | |
| <span><i class="far fa-calendar-alt mr-1"></i> 1 месяц назад</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video 3 --> | |
| <div class="video-card animate-fade-in delay-4 bg-secondary rounded-xl overflow-hidden border border-gray-800" data-category="tutorials"> | |
| <div class="relative pb-[56.25%]"> | |
| <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| <div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded"> | |
| <i class="fas fa-clock mr-1"></i> 35:07 | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-start justify-between"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-white mb-2">Как установить моды в GTA Vice City</h3> | |
| <p class="text-gray-400 text-sm mb-3">Подробное руководство для новичков</p> | |
| </div> | |
| <button class="text-gray-400 hover:text-white transition-colors"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <span><i class="fas fa-eye mr-1"></i> 320K</span> | |
| <span class="mx-2">•</span> | |
| <span><i class="far fa-calendar-alt mr-1"></i> 3 месяца назад</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video 4 --> | |
| <div class="video-card animate-fade-in delay-4 bg-secondary rounded-xl overflow-hidden border border-gray-800" data-category="gameplay"> | |
| <div class="relative pb-[56.25%]"> | |
| <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| <div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded"> | |
| <i class="fas fa-clock mr-1"></i> 1:02:45 | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-start justify-between"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-white mb-2">Прохождение GTA Vice City за 1 час</h3> | |
| <p class="text-gray-400 text-sm mb-3">Скоростной раунд с комментариями</p> | |
| </div> | |
| <button class="text-gray-400 hover:text-white transition-colors"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <span><i class="fas fa-eye mr-1"></i> 150K</span> | |
| <span class="mx-2">•</span> | |
| <span><i class="far fa-calendar-alt mr-1"></i> 2 месяца назад</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video 5 --> | |
| <div class="video-card animate-fade-in delay-5 bg-secondary rounded-xl overflow-hidden border border-gray-800" data-category="streams"> | |
| <div class="relative pb-[56.25%]"> | |
| <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| <div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded"> | |
| <i class="fas fa-clock mr-1"></i> 2:18:32 | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-start justify-between"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-white mb-2">Стрим: Играем в GTA Vice City с подписчиками</h3> | |
| <p class="text-gray-400 text-sm mb-3">Веселый стрим с интерактивом</p> | |
| </div> | |
| <button class="text-gray-400 hover:text-white transition-colors"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <span><i class="fas fa-eye mr-1"></i> 95K</span> | |
| <span class="mx-2">•</span> | |
| <span><i class="far fa-calendar-alt mr-1"></i> 1 неделю назад</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video 6 --> | |
| <div class="video-card animate-fade-in delay-5 bg-secondary rounded-xl overflow-hidden border border-gray-800" data-category="mods"> | |
| <div class="relative pb-[56.25%]"> | |
| <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| <div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded"> | |
| <i class="fas fa-clock mr-1"></i> 18:24 | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-start justify-between"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-white mb-2">Обзор графических модов для GTA Vice City</h3> | |
| <p class="text-gray-400 text-sm mb- | |
| </html> |