| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Egyptian Morning Chat</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'); |
| |
| body { |
| font-family: 'Tajawal', sans-serif; |
| background-color: #f8f4e9; |
| } |
| |
| .speech-bubble { |
| position: relative; |
| background: #ffffff; |
| border-radius: 1.5rem; |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); |
| } |
| |
| .speech-bubble:after { |
| content: ''; |
| position: absolute; |
| bottom: -10px; |
| left: 20px; |
| border-width: 10px 10px 0; |
| border-style: solid; |
| border-color: #ffffff transparent; |
| } |
| |
| .street-scene { |
| background: linear-gradient(180deg, #6bb9f0 0%, #89c4f4 50%, #aed6f1 100%); |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .building { |
| position: absolute; |
| background: #e67e22; |
| bottom: 0; |
| } |
| |
| .window { |
| position: absolute; |
| background: #f9e79f; |
| border: 1px solid #f1c40f; |
| } |
| |
| .palm-tree { |
| position: absolute; |
| } |
| |
| .palm-trunk { |
| position: absolute; |
| background: #8b4513; |
| width: 15px; |
| } |
| |
| .palm-leaves { |
| position: absolute; |
| width: 0; |
| height: 0; |
| border-left: 15px solid transparent; |
| border-right: 15px solid transparent; |
| border-bottom: 40px solid #27ae60; |
| bottom: 100%; |
| transform-origin: bottom center; |
| } |
| |
| .animated { |
| animation: float 3s ease-in-out infinite; |
| } |
| |
| @keyframes float { |
| 0%, 100% { transform: translateY(0); } |
| 50% { transform: translateY(-10px); } |
| } |
| |
| .forsa-logo { |
| background: linear-gradient(135deg, #3498db, #9b59b6); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| font-weight: 700; |
| } |
| </style> |
| </head> |
| <body class="min-h-screen flex items-center justify-center p-4"> |
| <div class="street-scene w-full max-w-4xl rounded-3xl shadow-xl overflow-hidden relative h-96"> |
| |
| <div class="building w-24 h-48 left-10 rounded-t-lg" style="background: #d35400;"></div> |
| <div class="building w-32 h-64 left-40 rounded-t-lg" style="background: #e67e22;"></div> |
| <div class="building w-20 h-56 left-80 rounded-t-lg" style="background: #f39c12;"></div> |
| <div class="building w-28 h-60 right-10 rounded-t-lg" style="background: #d35400;"></div> |
| |
| |
| <div class="window w-6 h-8 left-16 bottom-32 rounded-sm"></div> |
| <div class="window w-6 h-8 left-16 bottom-44 rounded-sm"></div> |
| <div class="window w-8 h-8 left-52 bottom-40 rounded-sm"></div> |
| <div class="window w-8 h-8 left-52 bottom-56 rounded-sm"></div> |
| <div class="window w-6 h-8 left-88 bottom-44 rounded-sm"></div> |
| <div class="window w-6 h-8 right-20 bottom-48 rounded-sm"></div> |
| |
| |
| <div class="palm-tree left-24 bottom-0"> |
| <div class="palm-trunk h-24"></div> |
| <div class="palm-leaves" style="left: -15px; transform: rotate(-20deg);"></div> |
| <div class="palm-leaves" style="left: -15px; transform: rotate(0deg);"></div> |
| <div class="palm-leaves" style="left: -15px; transform: rotate(20deg);"></div> |
| </div> |
| |
| <div class="palm-tree right-32 bottom-0"> |
| <div class="palm-trunk h-32"></div> |
| <div class="palm-leaves" style="left: -15px; transform: rotate(-15deg);"></div> |
| <div class="palm-leaves" style="left: -15px; transform: rotate(5deg);"></div> |
| <div class="palm-leaves" style="left: -15px; transform: rotate(25deg);"></div> |
| </div> |
| |
| |
| <div class="absolute top-8 right-12 w-16 h-16 bg-yellow-300 rounded-full shadow-lg"></div> |
| |
| |
| <div class="absolute bottom-8 left-1/4 transform -translate-x-1/2 flex items-end animated"> |
| |
| <div class="relative mr-4"> |
| <div class="w-16 h-16 bg-yellow-100 rounded-full border-4 border-white shadow-md flex items-center justify-center"> |
| <div class="w-4 h-4 bg-green-500 rounded-full absolute top-3 right-3"></div> |
| <div class="w-8 h-4 bg-pink-200 rounded-full absolute bottom-2"></div> |
| </div> |
| <div class="absolute -top-12 left-1/2 transform -translate-x-1/2 w-48"> |
| <div class="speech-bubble p-4 text-sm text-gray-800"> |
| <p>سمعت يا نها؟ فيه موقع وتطبيق اسمه <span class="forsa-logo">فرصة</span> بيبيع كل حاجة. أسعاره جامدة!</p> |
| </div> |
| </div> |
| <div class="w-12 h-20 bg-green-200 absolute -bottom-20 left-2 rounded-t-full" style="background-color: #a3e4d7;"></div> |
| <div class="w-16 h-8 bg-blue-500 absolute -bottom-8 left-0 rounded-t-full"></div> |
| </div> |
| |
| |
| <div class="relative"> |
| <div class="w-16 h-16 bg-amber-200 rounded-full border-4 border-white shadow-md flex items-center justify-center"> |
| <div class="w-4 h-4 bg-brown-500 rounded-full absolute top-3 right-3" style="background-color: #8d6e63;"></div> |
| <div class="w-8 h-4 bg-pink-200 rounded-full absolute bottom-2"></div> |
| </div> |
| <div class="absolute -top-12 left-1/2 transform -translate-x-1/2 w-48"> |
| <div class="speech-bubble p-4 text-sm text-gray-800"> |
| <p>ايوه سمعت عنه. ليه ما تجربي وتشوفي بنفسك؟</p> |
| </div> |
| </div> |
| <div class="w-12 h-20 bg-pink-200 absolute -bottom-20 left-2 rounded-t-full" style="background-color: #f8bbd0;"></div> |
| <div class="w-16 h-8 bg-pink-500 absolute -bottom-8 left-0 rounded-t-full"></div> |
| </div> |
| </div> |
| |
| |
| <div class="absolute bottom-0 w-full h-16 bg-gray-400"></div> |
| <div class="absolute bottom-16 w-full h-2 bg-gray-300"></div> |
| <div class="absolute bottom-14 w-full h-4 bg-gray-500 opacity-30"></div> |
| |
| |
| <div class="absolute top-8 left-8 bg-white rounded-xl shadow-2xl p-3 w-32 transform rotate-6 hidden md:block"> |
| <div class="bg-gradient-to-br from-blue-400 to-purple-500 rounded-lg p-2 text-center"> |
| <i class="fas fa-shopping-bag text-white text-2xl"></i> |
| <div class="text-white font-bold mt-1 text-xs">Forsa</div> |
| </div> |
| <div class="mt-2 text-center text-xs font-semibold text-gray-700">كل ما تحتاجه في مكان واحد</div> |
| </div> |
| |
| |
| <div class="absolute top-16 left-1/4"> |
| <i class="fas fa-dove text-gray-200 text-xl opacity-70"></i> |
| </div> |
| <div class="absolute top-20 left-1/3"> |
| <i class="fas fa-dove text-gray-200 text-xl opacity-70"></i> |
| </div> |
| </div> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const appMockup = document.querySelector('.absolute.top-8.left-8'); |
| if(appMockup) { |
| setInterval(() => { |
| appMockup.classList.toggle('scale-105'); |
| }, 1500); |
| } |
| |
| |
| const bubbles = document.querySelectorAll('.speech-bubble'); |
| bubbles.forEach((bubble, index) => { |
| bubble.style.animation = `float ${3 + index}s ease-in-out infinite`; |
| }); |
| }); |
| </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=ABO3MR/df" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
