Spaces:
Running
Running
don't write [ Site Maintenance] and make the image big enough to be seen - Initial Deployment
daf503f verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Site Maintenance | Helmenaa</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=Tajawal:wght@400;500;700&display=swap'); | |
| .arabic-text { | |
| font-family: 'Tajawal', sans-serif; | |
| direction: rtl; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| } | |
| .hover-grow { | |
| transition: transform 0.3s ease; | |
| } | |
| .hover-grow:hover { | |
| transform: scale(1.03); | |
| } | |
| .fade-in { | |
| animation: fadeIn 1.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg min-h-screen flex flex-col items-center justify-center p-4"> | |
| <div class="max-w-4xl w-full bg-white rounded-xl shadow-2xl overflow-hidden fade-in"> | |
| <!-- Header Section --> | |
| <div class="bg-indigo-600 text-white p-6 md:p-8 text-center"> | |
| <div class="flex justify-center mb-4"> | |
| <img src="https://helmenaa.com/logo.jpg" alt="Helmenaa Logo" class="h-20 w-20 rounded-full border-4 border-white shadow-lg"> | |
| </div> | |
| <h1 class="text-3xl md:text-4xl font-bold mb-2">Helmenaa VB</h1> | |
| <p class="text-indigo-100">منتدي حلمنا</p> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="p-6 md:p-8 space-y-6"> | |
| <!-- English Message --> | |
| <div class="bg-gray-50 p-6 rounded-lg border border-gray-200 hover-grow"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 pt-1"> | |
| <div class="flex items-center justify-center h-8 w-8 rounded-full bg-indigo-100 text-indigo-600"> | |
| <i class="fas fa-info-circle"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Site Maintenance Notice</h3> | |
| <p class="text-gray-600"> | |
| Sorry for the inconvenience we've made something good we shared a thrilling moments but we aren't that active anymore. | |
| If you need to say salam or reach us feel free to | |
| <a href="https://www.facebook.com/helmenaaVb" class="text-indigo-600 hover:text-indigo-800 font-medium">contact us</a>, | |
| just be happy...take care everyone! | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Arabic Message --> | |
| <div class="bg-gray-50 p-6 rounded-lg border border-gray-200 hover-grow arabic-text"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 pt-1"> | |
| <div class="flex items-center justify-center h-8 w-8 rounded-full bg-indigo-100 text-indigo-600"> | |
| <i class="fas fa-heart"></i> | |
| </div> | |
| </div> | |
| <div class="mr-4"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">رسالة إلى أعزائنا</h3> | |
| <p class="text-gray-600 leading-relaxed"> | |
| رغم مرور 15عاماً علي تدشين هذا الموقع عام 2009 حاولت الحفاظ علي بقاء الإسم وكل ما إرتبط به من ذكريات ولحظات جميلة والتي لا أزال وفيا لها مكان لم تخلو منه القيم الحسنة والحب والتعاون وروح الأخوة وحب الخير ممتن لكل من ساهم في صنع هذا الود وكان جزء من هذا البناء وأسأل الله لكم التوفيق في الدنيا والآخرة. | |
| </p> | |
| <p class="text-gray-600 mt-4 font-medium"> | |
| — كل الحب لمتابعينا المخلصين وطاقم الإدارة والأعضاء | |
| </p> | |
| <p class="text-gray-600 mt-2"> | |
| مدير ومؤسس المنتدي ،، هيثم | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Contact Button --> | |
| <div class="text-center pt-4"> | |
| <a href="https://www.facebook.com/helmenaaVb" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-300 hover-grow"> | |
| <i class="fab fa-facebook-f mr-2"></i> تواصل معنا على فيسبوك | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <div class="bg-gray-50 px-6 py-4 border-t border-gray-200 text-center text-gray-500 text-sm"> | |
| <p>© 2009-2025 Helmenaa VB. All memories preserved with love.</p> | |
| <p class="mt-1">Published: Mon, 19 May 2025 20:04:19 GMT</p> | |
| </div> | |
| </div> | |
| <!-- Floating Hearts Animation --> | |
| <div id="hearts-container" class="fixed inset-0 pointer-events-none overflow-hidden z-0"></div> | |
| <script> | |
| // Create floating hearts animation | |
| function createHeart() { | |
| const heart = document.createElement('div'); | |
| heart.innerHTML = '❤️'; | |
| heart.className = 'absolute text-red-400 opacity-70 text-xl'; | |
| // Random position | |
| const startPosX = Math.random() * window.innerWidth; | |
| const startPosY = window.innerHeight + 50; | |
| // Random animation duration (10-20s) | |
| const duration = Math.random() * 10 + 10; | |
| // Random size | |
| const size = Math.random() * 0.5 + 0.5; | |
| heart.style.left = `${startPosX}px`; | |
| heart.style.top = `${startPosY}px`; | |
| heart.style.transform = `scale(${size})`; | |
| heart.style.animation = `floatUp ${duration}s linear forwards`; | |
| document.getElementById('hearts-container').appendChild(heart); | |
| // Remove heart after animation completes | |
| setTimeout(() => { | |
| heart.remove(); | |
| }, duration * 1000); | |
| } | |
| // Add CSS for floating animation | |
| const style = document.createElement('style'); | |
| style.innerHTML = ` | |
| @keyframes floatUp { | |
| 0% { | |
| transform: translateY(0) scale(${Math.random() * 0.5 + 0.5}); | |
| opacity: 0.7; | |
| } | |
| 100% { | |
| transform: translateY(-100vh) scale(0.2); | |
| opacity: 0; | |
| } | |
| } | |
| `; | |
| document.head.appendChild(style); | |
| // Create hearts periodically | |
| setInterval(createHeart, 800); | |
| // Initial hearts | |
| for (let i = 0; i < 10; i++) { | |
| setTimeout(createHeart, i * 300); | |
| } | |
| </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=WhatABigWorld/helm01" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |