Spaces:
Running
Running
| <html lang="nl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CloudShare Haven | Simple File Sharing</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#64748b', // slate-500 | |
| secondary: '#000000', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .hero-gradient { | |
| background: linear-gradient(135deg, rgba(100, 116, 139, 0.9) 0%, rgba(15, 23, 42, 0.9) 100%); | |
| } | |
| .nav-shadow { | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); | |
| } | |
| </style> | |
| <style> | |
| :root{ --speed: 6s; } | |
| /* Base */ | |
| *{ box-sizing:border-box; } | |
| html,body{ height:100%; } | |
| body{ | |
| margin:0; | |
| background:#ffffff; /* Ensure full-page white background */ | |
| color:#0b0c10; | |
| font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; | |
| display:grid; | |
| place-items:center; | |
| min-height:100svh; | |
| } | |
| main{ | |
| display:grid; | |
| place-items:center; | |
| gap:16px; | |
| padding:28px; | |
| text-align:center; | |
| } | |
| /* Animated logo stage — background explicitly white */ | |
| .stage{ | |
| --logo-size: min(360px, 64vw); | |
| background:#ffffff; /* required white background */ | |
| border-radius:16px; | |
| display:grid; | |
| place-items:center; | |
| padding:24px; | |
| } | |
| .logo-wrap{ | |
| position:relative; | |
| width:var(--logo-size); | |
| aspect-ratio:1/1; | |
| display:grid; | |
| place-items:center; | |
| animation: floatY var(--speed) ease-in-out infinite; | |
| } | |
| .logo{ | |
| width:100%; | |
| height:100%; | |
| object-fit:contain; | |
| will-change:transform; | |
| animation: zoomIn var(--speed) linear infinite; | |
| } | |
| /* Animations (from logo.html, simplified) */ | |
| @keyframes floatY{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } } | |
| @keyframes zoomIn{ 0%{ transform:scale(1) } 100%{ transform:scale(1.1) } } | |
| /* Respect reduced motion */ | |
| @media (prefers-reduced-motion: reduce){ | |
| .logo, .logo-wrap{ animation: none ; } | |
| } | |
| h1{ | |
| margin:0; | |
| font-weight:700; | |
| letter-spacing:.2px; | |
| font-size:clamp(18px,2.6vw,24px); | |
| } | |
| .muted{ | |
| margin:0; | |
| color:#6b7280; | |
| font-size:14px; | |
| letter-spacing:.02em; | |
| } | |
| </style> | |
| <style> | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| @keyframes bubble { | |
| 0% { transform: translateY(0) scale(0.5); opacity: 0; } | |
| 50% { opacity: 0.1; } | |
| 100% { transform: translateY(-100vh) scale(1.5); opacity: 0; } | |
| } | |
| .animate-float { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| .animate-float-delay { | |
| animation: float 3s ease-in-out 0.5s infinite; | |
| } | |
| .animate-bubble { | |
| animation: bubble 15s linear infinite; | |
| } | |
| .animate-bubble-delay { | |
| animation: bubble 15s linear 5s infinite; | |
| } | |
| .animate-bubble-delay2 { | |
| animation: bubble 15s linear 10s infinite; | |
| } | |
| .bubble { | |
| width: 80px; | |
| height: 80px; | |
| bottom: -80px; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-15px); } | |
| } | |
| @keyframes bubble { | |
| 0% { transform: translateY(0) scale(0.5); opacity: 0; } | |
| 20% { opacity: 0.1; } | |
| 100% { transform: translateY(-100vh) scale(1.8); opacity: 0; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-white text-slate-800 font-sans antialiased"> | |
| <!-- Full-width Header --> | |
| <header class="w-full bg-primary text-white"> | |
| <div class="container mx-auto px-6 py-4 flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <i data-feather="cloud" class="w-8 h-8 mr-2 animate-pulse"></i> | |
| <h1 class="text-xl font-bold">CloudShare Haven</h1> | |
| </div> | |
| <nav class="flex space-x-6"> | |
| <a href="#" class="hover:text-secondary transition-colors flex items-center"> | |
| <i data-feather="home" class="mr-1 w-4 h-4"></i> Home | |
| </a> | |
| <a href="#" class="hover:text-secondary transition-colors flex items-center"> | |
| <i data-feather="upload" class="mr-1 w-4 h-4"></i> Upload | |
| </a> | |
| <a href="#" class="hover:text-secondary transition-colors flex items-center"> | |
| <i data-feather="user" class="mr-1 w-4 h-4"></i> Account | |
| </a> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="min-h-screen flex flex-col items-center justify-center p-8"> | |
| <div class="relative w-64 h-64 mb-8"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="w-full h-full rounded-full bg-gradient-to-br from-blue-200 to-blue-500 opacity-20 animate-pulse"></div> | |
| </div> | |
| <div class="relative flex items-center justify-center"> | |
| <img | |
| src="https://thijsdezeeuw.com/assets/zorgvooronssamen/logo_upscale_nb.png" | |
| alt="CloudShare Haven Logo" | |
| class="w-48 h-48 object-contain animate-float" | |
| /> | |
| <!-- Floating bubbles --> | |
| <div class="absolute bubble rounded-full bg-white opacity-10 animate-bubble" style="left: 10%;"></div> | |
| <div class="absolute bubble rounded-full bg-white opacity-10 animate-bubble-delay" style="left: 30%;"></div> | |
| <div class="absolute bubble rounded-full bg-white opacity-10 animate-bubble-delay2" style="left: 70%;"></div> | |
| </div> | |
| </div> | |
| <h1 class="text-4xl font-bold text-gray-800 mb-4">CloudShare Haven</h1> | |
| <p class="text-gray-600 max-w-md text-center mb-8"> | |
| Your secure and simple file sharing solution. Upload, share, and manage files effortlessly. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <button class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg shadow-md transition-all flex items-center"> | |
| <i data-feather="upload" class="mr-2"></i> Upload Files | |
| </button> | |
| <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 px-6 py-3 rounded-lg shadow-md transition-all flex items-center"> | |
| <i data-feather="folder" class="mr-2"></i> Browse Files | |
| </button> | |
| </div> | |
| </main> | |
| </body> | |
| </html> | |