Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Mintaş Temizlik Ürünleri - Coming Soon</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"> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'soft-blue': '#e6f0ff', | |
| 'primary-blue': '#3a86ff', | |
| 'light-blue': '#a7c7ff', | |
| 'dark-blue': '#1d3557' | |
| }, | |
| fontFamily: { | |
| 'sans': ['Poppins', 'sans-serif'] | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .bubble { | |
| position: absolute; | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.4); | |
| backdrop-filter: blur(2px); | |
| animation: float 8s infinite ease-in-out; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0) translateX(0); } | |
| 25% { transform: translateY(-20px) translateX(10px); } | |
| 50% { transform: translateY(-40px) translateX(-10px); } | |
| 75% { transform: translateY(-20px) translateX(-15px); } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); opacity: 1; } | |
| 50% { transform: scale(1.05); opacity: 0.9; } | |
| 100% { transform: scale(1); opacity: 1; } | |
| } | |
| .wave { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| overflow: hidden; | |
| line-height: 0; | |
| } | |
| .wave svg { | |
| position: relative; | |
| display: block; | |
| width: calc(100% + 1.3px); | |
| height: 100px; | |
| } | |
| .wave .shape-fill { | |
| fill: #FFFFFF; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-b from-soft-blue to-white min-h-screen flex flex-col overflow-x-hidden"> | |
| <!-- Decorative bubbles --> | |
| <div class="bubble w-12 h-12 top-1/4 left-1/4"></div> | |
| <div class="bubble w-8 h-8 top-1/3 right-1/4 animation-delay-2000"></div> | |
| <div class="bubble w-16 h-16 bottom-1/4 left-1/3 animation-delay-4000"></div> | |
| <div class="bubble w-10 h-10 top-1/2 right-1/3 animation-delay-6000"></div> | |
| <main class="flex-grow flex flex-col items-center justify-center px-4 py-12 relative z-10"> | |
| <div class="max-w-2xl w-full text-center"> | |
| <!-- Logo --> | |
| <div class="mb-8"> | |
| <div class="bg-white rounded-full p-4 shadow-lg inline-flex items-center justify-center"> | |
| <div class="bg-primary-blue rounded-full p-5"> | |
| <i class="fas fa-spray-can text-white text-4xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <h1 class="text-4xl md:text-5xl font-light text-dark-blue mb-6"> | |
| We're <span class="font-semibold">Upgrading</span> Our Website | |
| </h1> | |
| <div class="bg-white rounded-2xl shadow-lg p-6 mb-8 max-w-md mx-auto"> | |
| <p class="text-lg md:text-xl text-gray-600 leading-relaxed"> | |
| We are upgrading our website to serve you better. | |
| </p> | |
| </div> | |
| <div class="flex justify-center space-x-4 mb-12"> | |
| <div class="w-3 h-3 rounded-full bg-light-blue animate-pulse"></div> | |
| <div class="w-3 h-3 rounded-full bg-primary-blue animate-pulse animation-delay-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-light-blue animate-pulse animation-delay-1000"></div> | |
| </div> | |
| <!-- Cleaning Products Banner --> | |
| <div class="relative w-full max-w-md mx-auto mb-12"> | |
| <div class="bg-white rounded-xl shadow-lg p-4"> | |
| <div class="flex items-center justify-center space-x-4"> | |
| <div class="bg-primary-blue bg-opacity-10 p-3 rounded-lg"> | |
| <i class="fas fa-spray-can text-primary-blue text-2xl"></i> | |
| </div> | |
| <div class="text-left"> | |
| <h3 class="font-medium text-dark-blue">Premium Cleaning Products</h3> | |
| <p class="text-sm text-gray-600">Eco-friendly & effective solutions</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute -bottom-4 left-1/2 transform -translate-x-1/2"> | |
| <div class="w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-lg pulse"> | |
| <i class="fas fa-broom text-primary-blue text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Wave Divider --> | |
| <div class="wave"> | |
| <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"> | |
| <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" class="shape-fill"></path> | |
| <path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" opacity=".5" class="shape-fill"></path> | |
| <path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" class="shape-fill"></path> | |
| </svg> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-white py-6 text-center"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-xl font-semibold text-dark-blue mb-2">Mintaş Temizlik Ürünleri</h2> | |
| <p class="text-gray-600">© 2023 All Rights Reserved</p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Create dynamic bubbles | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const container = document.body; | |
| const bubbleCount = 12; | |
| for (let i = 0; i < bubbleCount; i++) { | |
| const bubble = document.createElement('div'); | |
| bubble.classList.add('bubble'); | |
| // Random size between 20px and 80px | |
| const size = Math.floor(Math.random() * 60) + 20; | |
| bubble.style.width = `${size}px`; | |
| bubble.style.height = `${size}px`; | |
| // Random position | |
| const top = Math.floor(Math.random() * 100); | |
| const left = Math.floor(Math.random() * 100); | |
| bubble.style.top = `${top}%`; | |
| bubble.style.left = `${left}%`; | |
| // Random animation delay | |
| const delay = Math.floor(Math.random() * 8000); | |
| bubble.style.animationDelay = `${delay}ms`; | |
| container.appendChild(bubble); | |
| } | |
| }); | |
| </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=xtechnology/comming-soon" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |