|
|
<!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> |
