| | <!DOCTYPE html> |
| | <html lang="ru"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Game Translations Hub</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"> |
| | <style> |
| | .game-card { |
| | transition: all 0.3s ease; |
| | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); |
| | } |
| | .game-card:hover { |
| | transform: translateY(-5px); |
| | box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); |
| | } |
| | .progress-bar { |
| | height: 6px; |
| | border-radius: 3px; |
| | overflow: hidden; |
| | } |
| | .progress-fill { |
| | height: 100%; |
| | transition: width 0.5s ease; |
| | } |
| | .timeline-item:not(:last-child)::after { |
| | content: ''; |
| | position: absolute; |
| | left: 11px; |
| | top: 24px; |
| | height: calc(100% - 24px); |
| | width: 2px; |
| | background-color: #e2e8f0; |
| | } |
| | .dropdown-content { |
| | display: none; |
| | opacity: 0; |
| | transition: opacity 0.3s ease, transform 0.3s ease; |
| | transform: translateY(-10px); |
| | } |
| | .dropdown:hover .dropdown-content { |
| | display: block; |
| | opacity: 1; |
| | transform: translateY(0); |
| | } |
| | @keyframes pulse { |
| | 0%, 100% { opacity: 1; } |
| | 50% { opacity: 0.5; } |
| | } |
| | .animate-pulse { |
| | animation: pulse 2s infinite; |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-gray-50 font-sans text-gray-800"> |
| | |
| | <header class="bg-white shadow-sm sticky top-0 z-10"> |
| | <div class="container mx-auto px-4 py-4 flex justify-between items-center"> |
| | <div class="flex items-center space-x-2"> |
| | <i class="fas fa-language text-2xl text-indigo-600"></i> |
| | <h1 class="text-xl font-bold text-gray-800">GameTranslator</h1> |
| | </div> |
| | <nav class="hidden md:flex space-x-6"> |
| | <a href="#" class="text-indigo-600 font-medium">Главная</a> |
| | <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Проекты</a> |
| | <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Блог</a> |
| | <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Контакты</a> |
| | </nav> |
| | <div class="flex items-center space-x-4"> |
| | <button class="md:hidden text-gray-600"> |
| | <i class="fas fa-bars text-xl"></i> |
| | </button> |
| | <div class="relative dropdown"> |
| | <button class="flex items-center space-x-1 text-gray-600 hover:text-indigo-600 transition"> |
| | <span class="hidden md:inline">Профиль</span> |
| | <i class="fas fa-user-circle text-xl"></i> |
| | </button> |
| | <div class="dropdown-content absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-20"> |
| | <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-indigo-50">Настройки</a> |
| | <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-indigo-50">Выйти</a> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </header> |
| |
|
| | |
| | <section class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-16"> |
| | <div class="container mx-auto px-4 text-center"> |
| | <h2 class="text-3xl md:text-4xl font-bold mb-4">Добро пожаловать в мир локализаций</h2> |
| | <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Следите за прогрессом переводов ваших любимых игр</p> |
| | <div class="flex flex-col sm:flex-row justify-center gap-4"> |
| | <button class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition">Подписаться</button> |
| | <button class="bg-transparent border-2 border-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:bg-opacity-10 transition">Узнать больше</button> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <main class="container mx-auto px-4 py-12"> |
| | |
| | <div class="mb-8 flex flex-col md:flex-row justify-between items-start md:items-center gap-4"> |
| | <div> |
| | <h3 class="text-2xl font-bold text-gray-800">Активные проекты</h3> |
| | <p class="text-gray-600">Последние обновления по переводам</p> |
| | </div> |
| | <div class="flex flex-wrap gap-3"> |
| | <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">Все</button> |
| | <button class="px-4 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition">В работе</button> |
| | <button class="px-4 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition">Завершённые</button> |
| | <button class="px-4 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition">Популярные</button> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| | |
| | <div class="game-card bg-white rounded-xl overflow-hidden border border-gray-100"> |
| | <div class="relative"> |
| | <img src="https://via.placeholder.com/600x400/4f46e5/ffffff?text=Cyberpunk+2077" alt="Cyberpunk 2077" class="w-full h-48 object-cover"> |
| | <div class="absolute top-3 left-3 bg-indigo-600 text-white text-xs px-2 py-1 rounded">В работе</div> |
| | </div> |
| | <div class="p-5"> |
| | <div class="flex justify-between items-start mb-3"> |
| | <h4 class="text-xl font-bold text-gray-800">Cyberpunk 2077</h4> |
| | <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">v2.1</span> |
| | </div> |
| | <p class="text-gray-600 text-sm mb-4">Полный перевод интерфейса, субтитров и озвучки</p> |
| | |
| | <div class="mb-4"> |
| | <div class="flex justify-between text-sm text-gray-600 mb-1"> |
| | <span>Прогресс</span> |
| | <span>78%</span> |
| | </div> |
| | <div class="progress-bar bg-gray-200"> |
| | <div class="progress-fill bg-indigo-600" style="width: 78%"></div> |
| | </div> |
| | </div> |
| | |
| | <div class="flex justify-between text-sm text-gray-500 mb-4"> |
| | <div class="flex items-center"> |
| | <i class="fas fa-calendar-alt mr-1"></i> |
| | <span>Начато: 15.01.2023</span> |
| | </div> |
| | <div class="flex items-center"> |
| | <i class="fas fa-users mr-1"></i> |
| | <span>3 переводчика</span> |
| | </div> |
| | </div> |
| | |
| | <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded-lg transition flex items-center justify-center"> |
| | <i class="fas fa-info-circle mr-2"></i> |
| | <span>Подробнее</span> |
| | </button> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="game-card bg-white rounded-xl overflow-hidden border border-gray-100"> |
| | <div class="relative"> |
| | <img src="https://via.placeholder.com/600x400/10b981/ffffff?text=Baldur's+Gate+3" alt="Baldur's Gate 3" class="w-full h-48 object-cover"> |
| | <div class="absolute top-3 left-3 bg-green-600 text-white text-xs px-2 py-1 rounded">Завершён</div> |
| | </div> |
| | <div class="p-5"> |
| | <div class="flex justify-between items-start mb-3"> |
| | <h4 class="text-xl font-bold text-gray-800">Baldur's Gate 3</h4> |
| | <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">v1.0</span> |
| | </div> |
| | <p class="text-gray-600 text-sm mb-4">Полный перевод интерфейса и субтитров</p> |
| | |
| | <div class="mb-4"> |
| | <div class="flex justify-between text-sm text-gray-600 mb-1"> |
| | <span>Прогресс</span> |
| | <span>100%</span> |
| | </div> |
| | <div class="progress-bar bg-gray-200"> |
| | <div class="progress-fill bg-green-600" style="width: 100%"></div> |
| | </div> |
| | </div> |
| | |
| | <div class="flex justify-between text-sm text-gray-500 mb-4"> |
| | <div class="flex items-center"> |
| | <i class="fas fa-calendar-alt mr-1"></i> |
| | <span>Начато: 10.03.2022</span> |
| | </div> |
| | <div class="flex items-center"> |
| | <i class="fas fa-users mr-1"></i> |
| | <span>5 переводчиков</span> |
| | </div> |
| | </div> |
| | |
| | <button class="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded-lg transition flex items-center justify-center"> |
| | <i class="fas fa-history mr-2"></i> |
| | <span>История версий</span> |
| | </button> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="game-card bg-white rounded-xl overflow-hidden border border-gray-100"> |
| | <div class="relative"> |
| | <img src="https://via.placeholder.com/600x400/f59e0b/ffffff?text=The+Witcher+3" alt="The Witcher 3" class="w-full h-48 object-cover"> |
| | <div class="absolute top-3 left-3 bg-yellow-500 text-white text-xs px-2 py-1 rounded">Обновляется</div> |
| | </div> |
| | <div class="p-5"> |
| | <div class="flex justify-between items-start mb-3"> |
| | <h4 class="text-xl font-bold text-gray-800">The Witcher 3</h4> |
| | <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">v4.04</span> |
| | </div> |
| | <p class="text-gray-600 text-sm mb-4">Обновление перевода для Next-Gen версии</p> |
| | |
| | <div class="mb-4"> |
| | <div class="flex justify-between text-sm text-gray-600 mb-1"> |
| | <span>Прогресс</span> |
| | <span>45%</span> |
| | </div> |
| | <div class="progress-bar bg-gray-200"> |
| | <div class="progress-fill bg-yellow-500" style="width: 45%"></div> |
| | </div> |
| | </div> |
| | |
| | <div class="flex justify-between text-sm text-gray-500 mb-4"> |
| | <div class="flex items-center"> |
| | <i class="fas fa-calendar-alt mr-1"></i> |
| | <span>Начато: 05.12.2022</span> |
| | </div> |
| | <div class="flex items-center"> |
| | <i class="fas fa-users mr-1"></i> |
| | <span>2 переводчика</span> |
| | </div> |
| | </div> |
| | |
| | <button class="w-full bg-yellow-500 hover:bg-yellow-600 text-white py-2 rounded-lg transition flex items-center justify-center"> |
| | <i class="fas fa-comment-dots mr-2"></i> |
| | <span>Обсудить</span> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <section class="mt-16"> |
| | <h3 class="text-2xl font-bold text-gray-800 mb-6">История переводов</h3> |
| | |
| | <div class="bg-white rounded-xl border border-gray-100 overflow-hidden"> |
| | <div class="p-5 border-b border-gray-100"> |
| | <h4 class="text-lg font-semibold text-gray-800 flex items-center"> |
| | <i class="fas fa-scroll mr-2 text-indigo-600"></i> |
| | The Witcher 3: Wild Hunt |
| | </h4> |
| | </div> |
| | |
| | <div class="divide-y divide-gray-100"> |
| | |
| | <div class="p-5 relative timeline-item"> |
| | <div class="flex items-start"> |
| | <div class="flex-shrink-0 bg-indigo-100 text-indigo-600 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1"> |
| | <i class="fas fa-code-branch text-xs"></i> |
| | </div> |
| | <div> |
| | <div class="flex items-center mb-1"> |
| | <span class="font-medium text-gray-800 mr-2">Версия 4.04</span> |
| | <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-0.5 rounded-full">В работе</span> |
| | </div> |
| | <p class="text-sm text-gray-600 mb-2">Обновление перевода для Next-Gen версии игры. Добавлены новые строки, исправлены ошибки.</p> |
| | <div class="text-xs text-gray-500 flex items-center"> |
| | <i class="fas fa-calendar-alt mr-1"></i> |
| | <span>Начато: 14.12.2022</span> |
| | <span class="mx-2">•</span> |
| | <i class="fas fa-user mr-1"></i> |
| | <span>Ведущий переводчик: AlexTranslator</span> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="p-5 relative timeline-item"> |
| | <div class="flex items-start"> |
| | <div class="flex-shrink-0 bg-green-100 text-green-600 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1"> |
| | <i class="fas fa-check text-xs"></i> |
| | </div> |
| | <div> |
| | <div class="flex items-center mb-1"> |
| | <span class="font-medium text-gray-800 mr-2">Версия 3.7</span> |
| | <span class="text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded-full">Завершён</span> |
| | </div> |
| | <p class="text-sm text-gray-600 mb-2">Полный перевод всех дополнений. Исправлены многочисленные ошибки в основном сюжете.</p> |
| | <div class="text-xs text-gray-500 flex items-center"> |
| | <i class="fas fa-calendar-alt mr-1"></i> |
| | <span>Завершён: 22.08.2021</span> |
| | <span class="mx-2">•</span> |
| | <i class="fas fa-user mr-1"></i> |
| | <span>Ведущий переводчик: GameLocalizer</span> |
| | </div> |
| | <div class="mt-2 flex"> |
| | <a href="#" class="text-xs text-indigo-600 hover:underline mr-3 flex items-center"> |
| | <i class="fas fa-download mr-1"></i> Скачать |
| | </a> |
| | <a href="#" class="text-xs text-indigo-600 hover:underline flex items-center"> |
| | <i class="fas fa-list mr-1"></i> Список изменений |
| | </a> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="p-5 relative timeline-item"> |
| | <div class="flex items-start"> |
| | <div class="flex-shrink-0 bg-gray-100 text-gray-600 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1"> |
| | <i class="fas fa-archive text-xs"></i> |
| | </div> |
| | <div> |
| | <div class="flex items-center mb-1"> |
| | <span class="font-medium text-gray-800 mr-2">Версия 2.1</span> |
| | <span class="text-xs bg-gray-100 text-gray-800 px-2 py-0.5 rounded-full">Архив</span> |
| | </div> |
| | <p class="text-sm |
| | <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=SallyHS/translate" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| | </html> |
