Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>App Rental Services | Android · iOS · PWA</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@900&family=JetBrains+Mono:wght@400;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #000; | |
| color: white; | |
| overflow-x: hidden; | |
| } | |
| .tech-bg { | |
| background: | |
| radial-gradient(circle at 70% 30%, rgba(56, 182, 255, 0.1) 0%, transparent 30%), | |
| radial-gradient(circle at 30% 70%, rgba(138, 43, 226, 0.1) 0%, transparent 30%), | |
| linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,1)); | |
| position: relative; | |
| } | |
| .phone-mockup { | |
| perspective: 1000px; | |
| transform-style: preserve-3d; | |
| } | |
| .phone-screen { | |
| transform: rotateY(-15deg) rotateX(5deg); | |
| box-shadow: 0 20px 50px rgba(56, 182, 255, 0.3); | |
| border-radius: 30px; | |
| overflow: hidden; | |
| } | |
| .app-icon { | |
| transition: all 0.3s ease; | |
| filter: drop-shadow(0 0 10px rgba(56, 182, 255, 0.5)); | |
| } | |
| .app-icon:hover { | |
| transform: translateY(-5px) scale(1.05); | |
| filter: drop-shadow(0 0 15px rgba(138, 43, 226, 0.7)); | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 10px rgba(56, 182, 255, 0.7), | |
| 0 0 20px rgba(138, 43, 226, 0.5); | |
| } | |
| .neon-border { | |
| box-shadow: 0 0 10px rgba(56, 182, 255, 0.7), | |
| 0 0 20px rgba(138, 43, 226, 0.5); | |
| } | |
| .code-snippet { | |
| font-family: 'JetBrains Mono', monospace; | |
| background: rgba(20, 20, 30, 0.7); | |
| border-left: 3px solid #38b6ff; | |
| } | |
| .floating { | |
| animation: floating 6s ease-in-out infinite; | |
| } | |
| .floating-delay-1 { | |
| animation-delay: 1s; | |
| } | |
| .floating-delay-2 { | |
| animation-delay: 2s; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 0.7; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.7; } | |
| } | |
| </style> | |
| </head> | |
| <body class="tech-bg min-h-screen"> | |
| <div class="absolute inset-0 overflow-hidden opacity-30"> | |
| <!-- Abstract background elements --> | |
| <div class="absolute top-10 left-10 w-20 h-20 rounded-full bg-purple-500 blur-3xl opacity-20"></div> | |
| <div class="absolute bottom-20 right-20 w-32 h-32 rounded-full bg-cyan-500 blur-3xl opacity-20"></div> | |
| <div class="absolute top-1/3 right-1/4 w-24 h-24 rounded-full bg-blue-500 blur-3xl opacity-20"></div> | |
| <!-- App icons floating around --> | |
| <div class="absolute top-1/4 left-1/5 floating"> | |
| <div class="w-12 h-12 bg-white rounded-xl flex items-center justify-center shadow-lg"> | |
| <i class="fab fa-android text-2xl text-green-500"></i> | |
| </div> | |
| </div> | |
| <div class="absolute top-1/3 right-1/5 floating floating-delay-1"> | |
| <div class="w-12 h-12 bg-white rounded-xl flex items-center justify-center shadow-lg"> | |
| <i class="fab fa-apple text-2xl text-gray-800"></i> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-1/4 left-1/3 floating floating-delay-2"> | |
| <div class="w-12 h-12 bg-white rounded-xl flex items-center justify-center shadow-lg"> | |
| <i class="fas fa-globe text-2xl text-blue-500"></i> | |
| </div> | |
| </div> | |
| <!-- Code elements floating --> | |
| <div class="absolute top-1/5 right-1/3 text-xs code-snippet p-2 rounded floating"> | |
| <span class="text-purple-400">const</span> <span class="text-blue-400">app</span> = <span class="text-cyan-400">await</span> <span class="text-yellow-300">rentApp</span>({<br> | |
| <span class="text-green-400">platform</span>: <span class="text-orange-300">'android'</span>,<br> | |
| <span class="text-green-400">duration</span>: <span class="text-orange-300">'30d'</span><br> | |
| }); | |
| </div> | |
| <div class="absolute bottom-1/5 left-1/4 text-xs code-snippet p-2 rounded floating floating-delay-1"> | |
| <span class="text-purple-400">import</span> <span class="text-blue-400">PWA</span> <span class="text-purple-400">from</span> <span class="text-orange-300">'@arbitrage/core'</span>;<br> | |
| <span class="text-cyan-400">new</span> <span class="text-yellow-300">PWA</span>().<span class="text-blue-400">install</span>(); | |
| </div> | |
| </div> | |
| <div class="container mx-auto px-4 py-16 md:py-24 relative z-10"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <!-- Left side with text --> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <div class="text-cyan-400 font-bold mb-2 text-lg md:text-xl">Сервисы аренды приложений</div> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-4 neon-text"> | |
| Android · iOS · PWA | |
| </h1> | |
| <h2 class="text-2xl md:text-4xl font-bold mb-8 text-white"> | |
| Аренда приложений для арбитража | |
| </h2> | |
| <div class="mb-8 max-w-md"> | |
| <p class="text-gray-300 mb-4"> | |
| Получите готовые приложения под ключ для вашего арбитража трафика. Быстро. Надёжно. Без разработки. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-6"> | |
| <div class="px-3 py-1 bg-gray-800 rounded-full text-xs flex items-center"> | |
| <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span> | |
| .apk | |
| </div> | |
| <div class="px-3 py-1 bg-gray-800 rounded-full text-xs flex items-center"> | |
| <span class="w-2 h-2 bg-gray-400 rounded-full mr-2"></span> | |
| .ipa | |
| </div> | |
| <div class="px-3 py-1 bg-gray-800 rounded-full text-xs flex items-center"> | |
| <span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span> | |
| PWA | |
| </div> | |
| <div class="px-3 py-1 bg-gray-800 rounded-full text-xs flex items-center"> | |
| <i class="fas fa-bolt text-yellow-400 mr-1"></i> | |
| Быстрый запуск | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right side with phone mockup and app showcase --> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="phone-mockup relative"> | |
| <div class="phone-screen w-64 h-auto bg-gray-900 border-8 border-gray-800 relative"> | |
| <!-- Phone status bar --> | |
| <div class="bg-gray-800 p-2 flex justify-between items-center text-xs"> | |
| <div class="text-white">9:41</div> | |
| <div class="flex space-x-1"> | |
| <i class="fas fa-signal text-white"></i> | |
| <i class="fas fa-wifi text-white"></i> | |
| <i class="fas fa-battery-three-quarters text-white"></i> | |
| </div> | |
| </div> | |
| <!-- App showcase inside phone --> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-white font-bold">App Rental</h3> | |
| <div class="flex space-x-2"> | |
| <div class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-download text-white text-xs"></i> | |
| </div> | |
| <div class="w-6 h-6 bg-purple-500 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-share-alt text-white text-xs"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- App icons grid --> | |
| <div class="grid grid-cols-3 gap-4 mb-4"> | |
| <div class="app-icon bg-blue-500 rounded-xl p-3 flex flex-col items-center"> | |
| <i class="fas fa-shopping-cart text-white text-2xl mb-1"></i> | |
| <span class="text-white text-xs">E-commerce</span> | |
| </div> | |
| <div class="app-icon bg-purple-500 rounded-xl p-3 flex flex-col items-center"> | |
| <i class="fas fa-gamepad text-white text-2xl mb-1"></i> | |
| <span class="text-white text-xs">Games</span> | |
| </div> | |
| <div class="app-icon bg-green-500 rounded-xl p-3 flex flex-col items-center"> | |
| <i class="fas fa-video text-white text-2xl mb-1"></i> | |
| <span class="text-white text-xs">Video</span> | |
| </div> | |
| <div class="app-icon bg-yellow-500 rounded-xl p-3 flex flex-col items-center"> | |
| <i class="fas fa-newspaper text-white text-2xl mb-1"></i> | |
| <span class="text-white text-xs">News</span> | |
| </div> | |
| <div class="app-icon bg-red-500 rounded-xl p-3 flex flex-col items-center"> | |
| <i class="fas fa-music text-white text-2xl mb-1"></i> | |
| <span class="text-white text-xs">Music</span> | |
| </div> | |
| <div class="app-icon bg-cyan-500 rounded-xl p-3 flex flex-col items-center"> | |
| <i class="fas fa-chart-line text-white text-2xl mb-1"></i> | |
| <span class="text-white text-xs">Analytics</span> | |
| </div> | |
| </div> | |
| <!-- App details --> | |
| <div class="bg-gray-800 rounded-lg p-3 mb-3"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-white text-sm font-bold">Premium App</span> | |
| <span class="text-green-400 text-xs">Доступно</span> | |
| </div> | |
| <div class="flex justify-between items-center text-xs text-gray-300"> | |
| <span>Android/iOS/PWA</span> | |
| <span class="flex items-center"> | |
| <i class="fas fa-clock mr-1"></i> 30 дней | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Floating elements around phone --> | |
| <div class="absolute -top-8 -left-8 w-16 h-16 bg-purple-500 rounded-full blur-xl opacity-30"></div> | |
| <div class="absolute -bottom-8 -right-8 w-20 h-20 bg-cyan-500 rounded-full blur-xl opacity-30"></div> | |
| <div class="absolute -top-12 right-4"> | |
| <div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center shadow-lg rotate-12"> | |
| <i class="fab fa-android text-xl text-green-500"></i> | |
| </div> | |
| </div> | |
| <div class="absolute -bottom-12 left-4"> | |
| <div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center shadow-lg -rotate-12"> | |
| <i class="fab fa-apple text-xl text-gray-800"></i> | |
| </div> | |
| </div> | |
| <div class="absolute top-1/4 -right-16"> | |
| <div class="w-12 h-12 bg-white rounded-lg flex items-center justify-center shadow-lg"> | |
| <i class="fas fa-window-restore text-xl text-blue-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tech process flow --> | |
| <div class="mt-24 md:mt-32 max-w-4xl mx-auto"> | |
| <h3 class="text-2xl md:text-3xl font-bold text-center mb-12 neon-text">Как это работает</h3> | |
| <div class="relative"> | |
| <!-- Connection lines --> | |
| <div class="hidden md:block absolute top-1/2 left-0 right-0 h-1 bg-gradient-to-r from-cyan-500 via-purple-500 to-cyan-500 opacity-30"></div> | |
| <div class="grid md:grid-cols-3 gap-8 md:gap-4 relative z-10"> | |
| <div class="bg-gray-900 bg-opacity-70 rounded-xl p-6 border border-gray-800 hover:border-cyan-400 transition-all duration-300"> | |
| <div class="w-16 h-16 bg-cyan-900 bg-opacity-50 rounded-full flex items-center justify-center mb-4 mx-auto neon-border"> | |
| <i class="fas fa-mobile-alt text-2xl text-cyan-400"></i> | |
| </div> | |
| <h4 class="text-xl font-bold text-center mb-2">Выбираете приложение</h4> | |
| <p class="text-gray-300 text-center text-sm"> | |
| Подберите готовое решение из каталога под вашу нишу арбитража | |
| </p> | |
| </div> | |
| <div class="bg-gray-900 bg-opacity-70 rounded-xl p-6 border border-gray-800 hover:border-purple-400 transition-all duration-300"> | |
| <div class="w-16 h-16 bg-purple-900 bg-opacity-50 rounded-full flex items-center justify-center mb-4 mx-auto neon-border"> | |
| <i class="fas fa-handshake text-2xl text-purple-400"></i> | |
| </div> | |
| <h4 class="text-xl font-bold text-center mb-2">Оформляете аренду</h4> | |
| <p class="text-gray-300 text-center text-sm"> | |
| Получаете доступ к приложению на выбранный срок без лишних сложностей | |
| </p> | |
| </div> | |
| <div class="bg-gray-900 bg-opacity-70 rounded-xl p-6 border border-gray-800 hover:border-blue-400 transition-all duration-300"> | |
| <div class="w-16 h-16 bg-blue-900 bg-opacity-50 rounded-full flex items-center justify-center mb-4 mx-auto neon-border"> | |
| <i class="fas fa-rocket text-2xl text-blue-400"></i> | |
| </div> | |
| <h4 class="text-xl font-bold text-center mb-2">Запускаете арбитраж</h4> | |
| <p class="text-gray-300 text-center text-sm"> | |
| Начинаете получать трафик сразу после подключения | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Floating tech elements --> | |
| <div class="hidden md:block"> | |
| <div class="absolute bottom-20 left-20 w-8 h-8 bg-cyan-400 rounded-full opacity-20 pulse"></div> | |
| <div class="absolute top-32 right-32 w-12 h-12 bg-purple-400 rounded-full opacity-20 pulse"></div> | |
| <div class="absolute bottom-40 right-40 w-6 h-6 bg-blue-400 rounded-full opacity-20 pulse"></div> | |
| <div class="absolute top-1/4 left-1/4 text-xs code-snippet p-2 rounded floating"> | |
| <span class="text-purple-400">function</span> <span class="text-blue-400">installApp</span>() {<br> | |
| <span class="text-cyan-400">return</span> <span class="text-orange-300">'success'</span>;<br> | |
| } | |
| </div> | |
| </div> | |
| <script> | |
| // Simple animation for app icons in phone mockup | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const appIcons = document.querySelectorAll('.app-icon'); | |
| appIcons.forEach((icon, index) => { | |
| // Random delay for each icon | |
| icon.style.animationDelay = `${index * 0.1}s`; | |
| // Add hover effect | |
| icon.addEventListener('mouseenter', () => { | |
| icon.style.transform = 'translateY(-5px) scale(1.05)'; | |
| }); | |
| icon.addEventListener('mouseleave', () => { | |
| icon.style.transform = ''; | |
| }); | |
| }); | |
| }); | |
| </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/appsthema41321" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |