Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Photo Restore - Восстановление старых фотографий с помощью ИИ</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> | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .animate-fade-in { | |
| animation: fadeIn 0.8s ease-out forwards; | |
| } | |
| .photo-upload-area { | |
| border: 2px dashed #cbd5e0; | |
| transition: all 0.3s; | |
| } | |
| .photo-upload-area:hover { | |
| border-color: #4f46e5; | |
| background-color: #f8fafc; | |
| } | |
| .photo-upload-area.dragover { | |
| border-color: #4f46e5; | |
| background-color: #e0e7ff; | |
| } | |
| .before-after-container { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .before-after-slider { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| width: 50%; | |
| left: 0; | |
| overflow: hidden; | |
| resize: horizontal; | |
| min-width: 20px; | |
| max-width: calc(100% - 20px); | |
| } | |
| .slider-handle { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| width: 4px; | |
| background: #4f46e5; | |
| right: 0; | |
| cursor: ew-resize; | |
| } | |
| .slider-handle::after { | |
| content: ""; | |
| position: absolute; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: white; | |
| border: 2px solid #4f46e5; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Шапка --> | |
| <header class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-camera-retro text-2xl"></i> | |
| <h1 class="text-2xl font-bold">AI Photo Restore</h1> | |
| </div> | |
| <nav> | |
| <ul class="flex space-x-6"> | |
| <li><a href="#how-it-works" class="hover:underline">Как это работает</a></li> | |
| <li><a href="#examples" class="hover:underline">Примеры</a></li> | |
| <li><a href="#pricing" class="hover:underline">Тарифы</a></li> | |
| <li><a href="#faq" class="hover:underline">FAQ</a></li> | |
| </ul> | |
| </nav> | |
| <button class="bg-white text-indigo-600 px-4 py-2 rounded-lg font-medium hover:bg-gray-100 transition"> | |
| <i class="fas fa-sign-in-alt mr-2"></i>Войти | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Герой секция --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 animate-fade-in"> | |
| <h2 class="text-4xl font-bold text-gray-800 mb-4">Восстановите старые фотографии с помощью искусственного интеллекта</h2> | |
| <p class="text-xl text-gray-600 mb-8">Наша нейросеть автоматически устраняет повреждения, восстанавливает цвета и улучшает качество ваших старых фотографий.</p> | |
| <div class="flex space-x-4"> | |
| <button class="bg-indigo-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-indigo-700 transition flex items-center"> | |
| <i class="fas fa-upload mr-2"></i>Попробовать бесплатно | |
| </button> | |
| <button class="border border-indigo-600 text-indigo-600 px-6 py-3 rounded-lg font-medium hover:bg-indigo-50 transition flex items-center"> | |
| <i class="fas fa-play-circle mr-2"></i>Смотреть видео | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 relative animate-fade-in" style="animation-delay: 0.2s;"> | |
| <div class="before-after-container h-96 w-full rounded-xl overflow-hidden shadow-xl"> | |
| <img src="https://example.com/before-photo.jpg" alt="До восстановления" class="h-full w-full object-cover"> | |
| <div class="before-after-slider"> | |
| <img src="https://example.com/after-photo.jpg" alt="После восстановления" class="h-full w-full object-cover"> | |
| <div class="slider-handle"></div> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-4 left-4 bg-black bg-opacity-50 text-white px-3 py-1 rounded">До</div> | |
| <div class="absolute bottom-4 right-4 bg-black bg-opacity-50 text-white px-3 py-1 rounded">После</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Форма загрузки --> | |
| <section class="py-16 bg-gray-100" id="upload"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden animate-fade-in"> | |
| <div class="p-8"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Загрузите фотографию для восстановления</h2> | |
| <div id="uploadArea" class="photo-upload-area rounded-lg p-12 text-center cursor-pointer mb-6"> | |
| <i class="fas fa-cloud-upload-alt text-4xl text-indigo-500 mb-4"></i> | |
| <p class="text-lg text-gray-600 mb-2">Перетащите сюда вашу фотографию или</p> | |
| <button class="bg-indigo-100 text-indigo-600 px-6 py-2 rounded-lg font-medium hover:bg-indigo-200 transition"> | |
| Выберите файл | |
| </button> | |
| <p class="text-sm text-gray-500 mt-4">Поддерживаемые форматы: JPG, PNG, BMP до 20MB</p> | |
| <input type="file" id="photoInput" class="hidden" accept="image/*"> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="bg-indigo-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-broom text-indigo-600"></i> | |
| </div> | |
| <h3 class="font-medium">Удаление дефектов</h3> | |
| </div> | |
| <p class="text-sm text-gray-600">Устраняем царапины, пятна, разрывы и другие повреждения</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="bg-indigo-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-palette text-indigo-600"></i> | |
| </div> | |
| <h3 class="font-medium">Восстановление цвета</h3> | |
| </div> | |
| <p class="text-sm text-gray-600">Возвращаем естественные цвета и устраняем желтизну</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="bg-indigo-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-search-plus text-indigo-600"></i> | |
| </div> | |
| <h3 class="font-medium">Улучшение качества</h3> | |
| </div> | |
| <p class="text-sm text-gray-600">Повышаем резкость и детализацию изображения</p> | |
| </div> | |
| </div> | |
| <button id="processBtn" class="w-full bg-indigo-600 text-white py-3 rounded-lg font-medium hover:bg-indigo-700 transition flex items-center justify-center disabled:opacity-50" disabled> | |
| <i class="fas fa-magic mr-2"></i>Восстановить фотографию | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Как это работает --> | |
| <section class="py-16 bg-white" id="how-it-works"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Как работает наш сервис</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-sm animate-fade-in"> | |
| <div class="text-indigo-600 text-4xl mb-4">1</div> | |
| <h3 class="text-xl font-semibold mb-3">Загрузка фотографии</h3> | |
| <p class="text-gray-600">Загрузите поврежденную или старую фотографию через наш сайт или мобильное приложение.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-sm animate-fade-in" style="animation-delay: 0.2s;"> | |
| <div class="text-indigo-600 text-4xl mb-4">2</div> | |
| <h3 class="text-xl font-semibold mb-3">Обработка ИИ</h3> | |
| <p class="text-gray-600">Наша нейросеть анализирует изображение и автоматически устраняет все дефекты.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-sm animate-fade-in" style="animation-delay: 0.4s;"> | |
| <div class="text-indigo-600 text-4xl mb-4">3</div> | |
| <h3 class="text-xl font-semibold mb-3">Скачивание результата</h3> | |
| <p class="text-gray-600">Получите восстановленную фотографию в высоком качестве и поделитесь ей с близкими.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Примеры работ --> | |
| <section class="py-16 bg-gray-100" id="examples"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Примеры восстановленных фотографий</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Пример 1 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md animate-fade-in"> | |
| <div class="before-after-container h-64"> | |
| <img src="https://example.com/example1-before.jpg" alt="Пример до" class="h-full w-full object-cover"> | |
| <div class="before-after-slider"> | |
| <img src="https://example.com/example1-after.jpg" alt="Пример после" class="h-full w-full object-cover"> | |
| <div class="slider-handle"></div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold mb-2">Семейная фотография, 1965 год</h3> | |
| <p class="text-sm text-gray-600">Устранены царапины, восстановлены цвета, улучшена резкость</p> | |
| </div> | |
| </div> | |
| <!-- Пример 2 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md animate-fade-in" style="animation-delay: 0.2s;"> | |
| <div class="before-after-container h-64"> | |
| <img src="https://example.com/example2-before.jpg" alt="Пример до" class="h-full w-full object-cover"> | |
| <div class="before-after-slider"> | |
| <img src="https://example.com/example2-after.jpg" alt="Пример после" class="h-full w-full object-cover"> | |
| <div class="slider-handle"></div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold mb-2">Портрет, 1940-е годы</h3> | |
| <p class="text-sm text-gray-600">Удалены пятна и разрывы, восстановлены недостающие фрагменты</p> | |
| </div> | |
| </div> | |
| <!-- Пример 3 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md animate-fade-in" style="animation-delay: 0.4s;"> | |
| <div class="before-after-container h-64"> | |
| <img src="https://example.com/example3-before.jpg" alt="Пример до" class="h-full w-full object-cover"> | |
| <div class="before-after-slider"> | |
| <img src="https://example.com/example3-after.jpg" alt="Пример после" class="h-full w-full object-cover"> | |
| <div class="slider-handle"></div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold mb-2">Свадебное фото, 1978 год</h3> | |
| <p class="text-sm text-gray-600">Устранена желтизна, улучшена детализация, восстановлен фон</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Тарифы --> | |
| <section class="py-16 bg-white" id="pricing"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Наши тарифы</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <!-- Бесплатный тариф --> | |
| <div class="border border-gray-200 rounded-xl p-6 hover:border-indigo-300 hover:shadow-lg transition animate-fade-in"> | |
| <div class="text-center mb-6"> | |
| <h3 class="text-xl font-semibold mb-2">Бесплатный</h3> | |
| <p class="text-gray-600">Для ознакомления с сервисом</p> | |
| </div> | |
| <div class="text-center mb-6"> | |
| <span class="text-4xl font-bold">0₽</span> | |
| <span class="text-gray-500">/ всегда</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>1 бесплатная фотография в месяц</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Ограниченное качество (до 1MP)</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i class="fas fa-times mr-2"></i> | |
| <span>Приоритетная обработка</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i class="fas fa-times mr-2"></i> | |
| <span>Пакетная обработка</span> | |
| </li> | |
| </ul> | |
| <button class="w-full border border-indigo-600 text-indigo-600 py-2 rounded-lg font-medium hover:bg-indigo-50 transition"> | |
| Начать бесплатно | |
| </button> | |
| </div> | |
| <!-- Популярный тариф --> | |
| <div class="border-2 border-indigo-500 rounded-xl p-6 shadow-lg relative animate-fade-in" style="animation-delay: 0.2s;"> | |
| <div class="absolute top-0 right-0 bg-indigo-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg"> | |
| ПОПУЛЯРНЫЙ | |
| </div> | |
| <div class="text-center mb-6"> | |
| <h3 class="text-xl font-semibold mb-2">Премиум</h3> | |
| <p class="text-gray-600">Для частого использования</p> | |
| </div> | |
| <div class="text-center mb-6"> | |
| <span class="text-4xl font-bold">299₽</span> | |
| <span class="text-gray-500">/ месяц</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>До 20 фотографий в месяц</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Высокое качество (до 8MP)</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Приоритетная обработка</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i class="fas fa-times mr-2"></i> | |
| <span>Пакетная обработка</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-indigo-600 text-white py-2 rounded-lg font-medium hover:bg-indigo-700 transition"> | |
| Выбрать тариф | |
| </button> | |
| </div> | |
| <!-- Профессиональный тариф --> | |
| <div class="border border-gray-200 rounded-xl p-6 hover:border-indigo-300 hover:shadow-lg transition animate-fade-in" style="animation-delay: 0.4s;"> | |
| <div class="text-center mb-6"> | |
| <h3 class="text-xl font-semibold mb-2">Профессиональный</h3> | |
| <p class="text-gray-600">Для архивов и профессионального использования</p> | |
| </div> | |
| <div class="text-center mb-6"> | |
| <span class="text-4xl font-bold">999₽</span> | |
| <span class="text-gray-500">/ месяц</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Неограниченное количество фото</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Максимальное качество (до 16MP)</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Приоритетная обработка</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Пакетная обработка</span> | |
| </li> | |
| </ul> | |
| <button class="w-full border border-indigo-600 text-indigo-600 py-2 rounded-lg font-medium hover:bg-indigo-50 transition"> | |
| Выбрать тариф | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Отзывы --> | |
| <section class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Отзывы наших клиентов</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Отзыв 1 --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm animate-fade-in"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold mr-4">АК</div> | |
| <div> | |
| <h4 class="font-semibold">Анна К.</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"Восстановила фотографию бабушки и дедушки 1950-х годов. Результат превзошел все ожидания! Теперь это главный подарок для всей семьи."</p> | |
| </div> | |
| <!-- Отзыв 2 --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm animate-fade-in" style="animation-delay: 0.2s;"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold mr-4">ИП</div> | |
| <div> | |
| <h4 class="font-semibold">Игорь П.</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"Как историк часто работаю со старыми фотоархивами. Этот сервис сэкономил мне десятки часов ручной реставрации. Качество на уровне профессионалов."</p> | |
| </div> | |
| <!-- Отзыв 3 --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm animate-fade-in" style="animation-delay: 0.4s;"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold mr-4">МС</div> | |
| <div> | |
| <h4 class="font-semibold">Марина С.</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"Восстановила все детские фотографии, которые были в ужасном состоянии. Теперь могу показать их своим детям. Очень благодарна создателям!"</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ --> | |
| <section class="py-16 bg-white" id="faq"> | |
| <div class="container mx-auto px-4 max-w-3xl"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Часто задаваемые вопросы</h2> | |
| <div class="space-y-4"> | |
| <!-- Вопрос 1 --> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden animate-fade-in"> | |
| <button class="faq-question w-full text-left p-4 bg-gray-50 hover:bg-gray-100 transition flex justify-between items-center"> | |
| <span class="font-medium">Какой формат фотографий поддерживается?</span> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </button> | |
| <div class="faq-answer p-4 hidden"> | |
| <p class="text-gray-600">Мы поддерживаем все популярные форматы изображений: JPEG, PNG, BMP. Максимальный размер файла - 20MB. Для лучшего качества восстановления рекомендуем загружать изображения в максимально возможном качестве.</p> | |
| </div> | |
| </div> | |
| <!-- Вопрос 2 --> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden animate-fade-in" style="animation-delay: 0.1s;"> | |
| <button class="faq-question w-full text-left p-4 bg-gray-50 hover:bg-gray-100 transition flex justify-between items-center"> | |
| <span class="font-medium">Сколько времени занимает обработка?</span> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </button> | |
| <div class="faq-answer p-4 hidden"> | |
| <p class="text-gray-600">Время обработки зависит от загрузки сервера и выбранного тарифа. Обычно обработка занимает от 30 секунд до 5 минут. Пользователи с премиум и профессиональными тарифами получают приоритет в очереди на обработку.</p> | |
| </div> | |
| </div> | |
| <!-- Вопрос 3 --> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden animate-fade-in" style="animation-delay: 0.2s;"> | |
| <button class="faq-question w-full text-left p-4 bg-gray-50 hover:bg-gray-100 transition flex justify-between items-center"> | |
| <span class="font-medium">Можно ли восстановить сильно поврежденные фотографии?</span> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </button> | |
| <div class="faq-answer p-4 hidden"> | |
| <p class="text-gray-600">Наш ИИ справляется даже с сильно поврежденными фотографиями, однако есть ограничения. Если отсутствует более 30% изображения или повреждения критичны, результат может быть неидеальным. В таких случаях мы рекомендуем заказать профессиональную реставрацию у наших специалистов.</p> | |
| </div> | |
| </div> | |
| <!-- Вопрос 4 --> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden animate-fade-in" style="animation-delay: 0.3s;"> | |
| <button class="faq-question w-full text-left p-4 bg-gray-50 hover:bg-gray-100 transition flex justify-between items-center"> | |
| <span class="font-medium">Как долго хранятся мои фотографии на вашем сервере?</span> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </button> | |
| <div class="faq-answer p-4 hidden"> | |
| <p class="text-gray-600">Мы храним оригиналы и восстановленные фотографии в течение 30 дней с момента последней обработки. Вы можете в любой момент удалить свои фотографии из личного кабинета. Все изображения хранятся в защищенном виде и не передаются третьим лицам.</p> | |
| </div> | |
| </div> | |
| <!-- Вопрос 5 --> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden animate-fade-in" style="animation-delay: 0.4s;"> | |
| <button class="faq-question w-full text-left p-4 bg-gray-50 hover:bg-gray-100 transition flex justify-between items-center"> | |
| <span class="font-medium">Есть ли мобильное приложение?</span> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </button> | |
| <div class="faq-answer p-4 hidden"> | |
| <p class="text-gray-600">Да, наше мобильное приложение доступно для iOS и Android. Оно включает все функции веб-версии плюс возможность сканировать фотографии прямо с телефона с автоматической коррекцией перспективы и освещения.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA --> | |
| <section class="py-16 bg-indigo-600 text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Готовы восстановить свои воспоминания?</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Загрузите свою первую фотографию прямо сейчас и убедитесь в качестве нашей технологии.</p> | |
| <button class="bg-white text-indigo-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition inline-flex items-center"> | |
| <i class="fas fa-upload mr-2"></i>Начать восстановление | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Подвал --> | |
| <footer class="bg-gray-800 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-camera-retro mr-2"></i> AI Photo Restore | |
| </h3> | |
| <p class="text-gray-400">Лучший сервис по восстановлению старых фотографий с помощью искусственного интеллекта.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Сервис</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Как это работает</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Примеры работ</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Тарифы</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Блог</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Поддержка</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Центр помощи</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Контакты</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Политика конфиденциальности</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Условия использования</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Контакты</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope mr-2 text-gray-400"></i> | |
| <a href="mailto:[email protected]" class="text-gray-400 hover:text-white transition">[email protected]</a> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone mr-2 text-gray-400"></i> | |
| <a href="tel:+78001234567" class="text-gray-400 hover:text-white transition">8 (800) 123-45-67</a> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-map-marker-alt mr-2 text-gray-400"></i> | |
| <span class="text-gray-400">Москва, ул. Примерная, 123</span> | |
| </li> | |
| </ul> | |
| <div class="flex space-x-4 mt-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-vk"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-telegram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-youtube"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2023 AI Photo Restore. Все права защищены.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Drag and drop для загрузки фото | |
| const uploadArea = document.getElementById('uploadArea'); | |
| const photoInput = document.getElementById('photoInput'); | |
| const processBtn = document.getElementById('processBtn'); | |
| uploadArea.addEventListener('click', function() { | |
| photoInput.click(); | |
| }); | |
| photoInput.addEventListener('change', function(e) { | |
| if (e.target.files.length) { | |
| handleFileUpload(e.target.files[0]); | |
| } | |
| }); | |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { | |
| uploadArea.addEventListener(eventName, preventDefaults, false); | |
| }); | |
| function preventDefaults(e) { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| } | |
| ['dragenter', 'dragover'].forEach(eventName => { | |
| uploadArea.addEventListener(eventName, highlight, false); | |
| }); | |
| ['dragleave', 'drop'].forEach(eventName => { | |
| uploadArea.addEventListener(eventName, unhighlight, false); | |
| }); | |
| function highlight() { | |
| uploadArea.classList.add('dragover'); | |
| } | |
| function unhighlight() { | |
| uploadArea.classList.remove('dragover'); | |
| } | |
| uploadArea.addEventListener('drop', function(e) { | |
| const dt = e.dataTransfer; | |
| const file = dt.files[0]; | |
| handleFileUpload(file); | |
| }); | |
| function handleFileUpload(file) { | |
| if (!file.type.match('image.*')) { | |
| alert('Пожалуйста, загрузите файл изображения'); | |
| return; | |
| } | |
| if (file.size > 20 * 1024 * 1024) { | |
| alert('Файл слишком большой. Максимальный размер - 20MB'); | |
| return; | |
| } | |
| const reader = new FileReader(); | |
| reader.onload = function(e) { | |
| uploadArea.innerHTML = ` | |
| <div class="flex flex-col items-center"> | |
| <i class="fas fa-check-circle text-4xl text-green-500 mb-2"></i> | |
| <p class="text-lg">${file.name}</p> | |
| <p class="text-sm text-gray-500 mt-2">${(file.size / 1024 / 1024).toFixed(1)} MB</p> | |
| </div> | |
| `; | |
| processBtn.disabled = false; | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| // Обработка кнопки восстановления | |
| processBtn.addEventListener('click', function() { | |
| // Здесь должна быть логика отправки на сервер | |
| alert('Фотография отправлена на обработку. Результат будет доступен через несколько минут.'); | |
| // В реальном приложении здесь был бы AJAX-запрос к API | |
| }); | |
| // FAQ аккордеон | |
| const faqQuestions = document.querySelectorAll('.faq-question'); | |
| faqQuestions.forEach(question => { | |
| question.addEventListener('click', function() { | |
| const answer = this.nextElementSibling; | |
| const icon = this.querySelector('i'); | |
| if (answer.classList.contains('hidden')) { | |
| answer.classList.remove('hidden'); | |
| icon.classList.add('rotate-180'); | |
| } else { | |
| answer.classList.add('hidden'); | |
| icon.classList.remove('rotate-180'); | |
| } | |
| }); | |
| }); | |
| // Передвижение слайдера "до/после" | |
| const sliders = document.querySelectorAll('.before-after-slider'); | |
| sliders.forEach(slider => { | |
| const handle = slider.querySelector('.slider-handle'); | |
| let isDragging = false; | |
| handle.addEventListener('mousedown', function(e) { | |
| isDragging = true; | |
| document.addEventListener('mousemove', moveSlider); | |
| document.addEventListener('mouseup', stopDrag); | |
| e.preventDefault(); | |
| }); | |
| function moveSlider(e) { | |
| if (!isDragging) return; | |
| const sliderRect = slider.parentElement.getBoundingClientRect(); | |
| let newWidth = e.clientX - sliderRect.left; | |
| // Ограничения | |
| newWidth = Math.max(20, Math.min(sliderRect.width - 20, newWidth)); | |
| slider.style.width = `${newWidth}px`; | |
| } | |
| function stopDrag() { | |
| isDragging = false; | |
| document.removeEventListener('mousemove', moveSlider); | |
| document.removeEventListener('mouseup', stopDrag); | |
| } | |
| }); | |
| }); | |
| </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=Greats/ai-photo-restore" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |