Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Сервисы аренды мобильных приложений</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| scroll-behavior: smooth; | |
| background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%); | |
| color: #1a202c; | |
| } | |
| .slide { | |
| min-height: 100vh; | |
| padding: 4rem; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: all 0.6s ease-out; | |
| } | |
| .slide.active { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .platform-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .platform-icon:hover { | |
| transform: scale(1.1); | |
| } | |
| .progress-bar { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| height: 4px; | |
| background: linear-gradient(90deg, #4f46e5 0%, #10b981 100%); | |
| z-index: 100; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .floating { | |
| animation: float 4s ease-in-out infinite; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="progress-bar" id="progressBar"></div> | |
| <div class="slide active" id="slide1"> | |
| <div class="max-w-6xl mx-auto text-center"> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-8 text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-emerald-500"> | |
| Аренда мобильных приложений | |
| </h1> | |
| <p class="text-xl md:text-2xl text-gray-600 mb-12 max-w-3xl mx-auto"> | |
| Современные решения для бизнеса без затрат на разработку | |
| </p> | |
| <div class="flex justify-center space-x-8 mb-16"> | |
| <div class="platform-icon"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/226/226770.png" alt="Android" class="w-24 h-24 floating" style="animation-delay: 0.2s;"> | |
| </div> | |
| <div class="platform-icon"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/226/226772.png" alt="iOS" class="w-24 h-24 floating" style="animation-delay: 0.4s;"> | |
| </div> | |
| <div class="platform-icon"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/1126/1126012.png" alt="PWA" class="w-24 h-24 floating" style="animation-delay: 0.6s;"> | |
| </div> | |
| </div> | |
| <div class="animate__animated animate__fadeInUp animate__delay-1s"> | |
| <p class="text-gray-500 italic">Листайте вниз для продолжения...</p> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 mx-auto mt-4 text-gray-400 animate-bounce" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" /> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="slide" id="slide2"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-4xl font-bold mb-12 text-center text-gray-800">Что такое аренда приложений?</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow"> | |
| <div class="text-indigo-500 mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Готовые решения</h3> | |
| <p class="text-gray-600">Использование уже разработанных приложений с возможностью кастомизации под ваш бренд</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow"> | |
| <div class="text-emerald-500 mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Экономия бюджета</h3> | |
| <p class="text-gray-600">Значительно меньшие затраты по сравнению с разработкой собственного приложения с нуля</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow"> | |
| <div class="text-purple-500 mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Быстрый запуск</h3> | |
| <p class="text-gray-600">Возможность начать использовать приложение уже через несколько дней после оформления заявки</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="slide" id="slide3"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-4xl font-bold mb-12 text-center text-gray-800">Платформы для аренды</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-xl shadow-lg"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/226/226770.png" alt="Android" class="w-16 h-16 mr-4"> | |
| <h3 class="text-2xl font-semibold">Android</h3> | |
| </div> | |
| <ul class="space-y-3 text-gray-600"> | |
| <li class="flex items-start"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /> | |
| </svg> | |
| <span>Доступ через Google Play</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /> | |
| </svg> | |
| <span>Широкий охват пользователей</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /> | |
| </svg> | |
| <span>Гибкие настройки</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-lg"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/226/226772.png" alt="iOS" class="w-16 h-16 mr-4"> | |
| <h3 class="text-2xl font-semibold">iOS</h3> | |
| </div> | |
| <ul class="space-y-3 text-gray-600"> | |
| <li class="flex items-start"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /> | |
| </svg> | |
| <span>Присутствие в App Store</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /> | |
| </svg> | |
| <span>Премиальная аудитория</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /> | |
| </svg> | |
| <span>Высокая безопасность</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-lg"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/1126/1126012.png" alt="PWA" class="w-16 h-16 mr-4"> | |
| <h3 class="text-2xl font-semibold">PWA</h3> | |
| </div> | |
| <ul class="space-y-3 text-gray-600"> | |
| <li class="flex items-start"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /> | |
| </svg> | |
| <span>Не требует установки</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /> | |
| </svg> | |
| <span>Кроссплатформенность</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2 mt-0.5" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /> | |
| </svg> | |
| <span>Быстрая разработка</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="slide" id="slide4"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-4xl font-bold mb-12 text-center text-gray-800">Преимущества аренды</h2> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div class="bg-gradient-to-br from-indigo-50 to-blue-50 p-8 rounded-xl shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-indigo-100 p-3 rounded-full mr-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-2xl font-semibold text-gray-800">Безопасность</h3> | |
| </div> | |
| <p class="text-gray-600">Все приложения проходят строгую проверку и соответствуют требованиям магазинов приложений. Ваши данные защищены современными методами шифрования.</p> | |
| </div> | |
| <div class="bg-gradient-to-br from-emerald-50 to-green-50 p-8 rounded-xl shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-emerald-100 p-3 rounded-full mr-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-2xl font-semibold text-gray-800">Скорость</h3> | |
| </div> | |
| <p class="text-gray-600">Быстрое развертывание приложений благодаря готовым решениям. Вы получаете работающее приложение в несколько раз быстрее, чем при самостоятельной разработке.</p> | |
| </div> | |
| <div class="bg-gradient-to-br from-purple-50 to-pink-50 p-8 rounded-xl shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-2xl font-semibold text-gray-800">Кастомизация</h3> | |
| </div> | |
| <p class="text-gray-600">Возможность адаптировать приложение под ваш бренд: цвета, логотипы, контент. Создайте уникальный пользовательский опыт без затрат на полный цикл разработки.</p> | |
| </div> | |
| <div class="bg-gradient-to-br from-amber-50 to-yellow-50 p-8 rounded-xl shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-amber-100 p-3 rounded-full mr-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-2xl font-semibold text-gray-800">Облачные технологии</h3> | |
| </div> | |
| <p class="text-gray-600">Все приложения работают на надежных облачных серверах с автоматическим масштабированием. Вам не нужно беспокоиться о технической инфраструктуре.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="slide" id="slide5"> | |
| <div class="max-w-6xl mx-auto text-center"> | |
| <h2 class="text-4xl font-bold mb-8 text-gray-800">Как это работает?</h2> | |
| <div class="relative"> | |
| <div class="hidden md:block absolute top-1/2 left-0 right-0 h-1 bg-gray-200 -translate-y-1/2"></div> | |
| <div class="grid md:grid-cols-4 gap-8 relative"> | |
| <div class="bg-white p-6 rounded-xl shadow-lg z-10"> | |
| <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-indigo-600 font-bold text-xl">1</span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Выбор платформы</h3> | |
| <p class="text-gray-600">Определите, какое приложение вам нужно: Android, iOS или PWA</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-lg z-10"> | |
| <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-indigo-600 font-bold text-xl">2</span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Настройка</h3> | |
| <p class="text-gray-600">Выберите дизайн и функционал под ваши задачи</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-lg z-10"> | |
| <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-indigo-600 font-bold text-xl">3</span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Публикация</h3> | |
| <p class="text-gray-600">Мы размещаем приложение в магазинах или предоставляем ссылку</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-lg z-10"> | |
| <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-indigo-600 font-bold text-xl">4</span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Использование</h3> | |
| <p class="text-gray-600">Вы получаете готовое решение и начинаете им пользоваться</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="slide" id="slide6"> | |
| <div class="max-w-6xl mx-auto text-center"> | |
| <h2 class="text-4xl font-bold mb-8 text-gray-800">Кому подходит аренда приложений?</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow"> | |
| <div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Малый бизнес</h3> | |
| <p class="text-gray-600">Для компаний, которые хотят иметь мобильное присутствие без больших инвестиций в разработку</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow"> | |
| <div class="bg-purple-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Стартапы</h3> | |
| <p class="text-gray-600">Для тестирования гипотез и быстрого запуска MVP без технических сложностей</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow"> | |
| <div class="bg-green-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">События</h3> | |
| <p class="text-gray-600">Для конференций, фестивалей и временных мероприятий, где нужно мобильное приложение на короткий срок</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="slide" id="slide7"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-4xl font-bold mb-8 text-gray-800">Будущее мобильных технологий</h2> | |
| <p class="text-xl text-gray-600 mb-12"> | |
| Аренда приложений становится новым стандартом для бизнеса, сочетая в себе доступность, качество и скорость внедрения. Это решение, которое позволяет сосредоточиться на вашем основном бизнесе, оставив технические вопросы профессионалам. | |
| </p> | |
| <div class="flex justify-center space-x-6"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/226/226770.png" alt="Android" class="w-16 h-16 animate__animated animate__pulse animate__infinite" style="animation-delay: 0.2s;"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/226/226772.png" alt="iOS" class="w-16 h-16 animate__animated animate__pulse animate__infinite" style="animation-delay: 0.4s;"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/1126/1126012.png" alt="PWA" class="w-16 h-16 animate__animated animate__pulse animate__infinite" style="animation-delay: 0.6s;"> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const slides = document.querySelectorAll('.slide'); | |
| const progressBar = document.getElementById('progressBar'); | |
| let currentSlide = 0; | |
| // Инициализация первого слайда | |
| slides[currentSlide].classList.add('active'); | |
| // Обработка скролла | |
| let isScrolling = false; | |
| window.addEventListener('wheel', function(e) { | |
| if (isScrolling) return; | |
| isScrolling = true; | |
| if (e.deltaY > 0 && currentSlide < slides.length - 1) { | |
| // Скролл вниз | |
| currentSlide++; | |
| } else if (e.deltaY < 0 && currentSlide > 0) { | |
| // Скролл вверх | |
| currentSlide--; | |
| } | |
| updateSlides(); | |
| setTimeout(function() { | |
| isScrolling = false; | |
| }, 1000); | |
| }, { passive: true }); | |
| // Обработка касаний для мобильных устройств | |
| let startY; | |
| document.addEventListener('touchstart', function(e) { | |
| startY = e.touches[0].clientY; | |
| }, { passive: true }); | |
| document.addEventListener('touchmove', function(e) { | |
| if (!startY || isScrolling) return; | |
| const y = e.touches[0].clientY; | |
| const diff = startY - y; | |
| if (diff > 50 && currentSlide < slides.length - 1) { | |
| // Свайп вверх | |
| currentSlide++; | |
| startY = null; | |
| isScrolling = true; | |
| updateSlides(); | |
| } else if (diff < -50 && currentSlide > 0) { | |
| // Свайп вниз | |
| currentSlide--; | |
| startY = null; | |
| isScrolling = true; | |
| updateSlides(); | |
| } | |
| if (isScrolling) { | |
| setTimeout(function() { | |
| isScrolling = false; | |
| }, 1000); | |
| } | |
| }, { passive: true }); | |
| // Обновление слайдов | |
| function updateSlides() { | |
| slides.forEach((slide, index) => { | |
| if (index === currentSlide) { | |
| slide.classList.add('active'); | |
| } else { | |
| slide.classList.remove('active'); | |
| } | |
| }); | |
| // Прокрутка к текущему слайду | |
| slides[currentSlide].scrollIntoView({ behavior: 'smooth' }); | |
| // Обновление прогресс-бара | |
| const progress = ((currentSlide + 1) / slides.length) * 100; | |
| progressBar.style.width = progress + '%'; | |
| } | |
| // Инициализация прогресс-бара | |
| progressBar.style.width = '14%'; | |
| }); | |
| </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=timoon811/mobileapps" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |