Hugging Face's logo

Spaces:
Aissa170
/
aissahost
Running

App Files Community
aissahost / index.html
Aissa170's picture
Aissa170
Add 2 files
1e1f12d verified
raw
history blame contribute delete
25.7 kB
 <!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>50 مقولة تحفيزية</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;900&display=swap');
body {
font-family: 'Tajawal', sans-serif;
}
.quote-card {
width: 100%;
aspect-ratio: 9/16;
position: relative;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.quote-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.quote-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 85%;
text-align: center;
font-weight: 700;
line-height: 1.5;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}
.gradient-bg-1 {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.gradient-bg-2 {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.gradient-bg-3 {
background: linear-gradient(135deg, #5ee7df 0%, #b490ca 100%);
}
.gradient-bg-4 {
background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%);
}
.gradient-bg-5 {
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}
.gradient-bg-6 {
background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
}
.gradient-bg-7 {
background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
}
.gradient-bg-8 {
background: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%);
}
.gradient-bg-9 {
background: linear-gradient(135deg, #ffc3a0 0%, #ffafbd 100%);
}
.gradient-bg-10 {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.pattern-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.1;
background-image: radial-gradient(#000 1px, transparent 1px);
background-size: 15px 15px;
}
.floating-icon {
position: absolute;
font-size: 50px;
opacity: 0.2;
}
</style>
</head>
<body class="bg-gray-100 p-4">
<div class="max-w-4xl mx-auto">
<h1 class="text-3xl font-bold text-center mb-8 text-indigo-800">50 مقولة تحفيزية</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card 1 -->
<div class="quote-card gradient-bg-1">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-star" style="top: 15%; left: 20%;"></i>
<i class="floating-icon fas fa-heart" style="bottom: 10%; right: 25%;"></i>
<div class="quote-text text-white text-3xl">
"لا تنتظر الظروف المثالية، ابدأ حيث أنت واستخدم ما لديك"
</div>
</div>
<!-- Card 2 -->
<div class="quote-card gradient-bg-2">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-lightbulb" style="top: 20%; right: 15%;"></i>
<div class="quote-text text-white text-2xl">
"كل يوم هو فرصة جديدة لتكون أفضل مما كنت عليه بالأمس"
</div>
</div>
<!-- Card 3 -->
<div class="quote-card gradient-bg-3">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-mountain" style="bottom: 15%; left: 20%;"></i>
<div class="quote-text text-gray-800 text-3xl font-bold">
"التحديات هي ما تجعل الحياة مثيرة، والتغلب عليها هو ما يجعلها ذات معنى"
</div>
</div>
<!-- Card 4 -->
<div class="quote-card gradient-bg-4">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-feather-alt" style="top: 30%; right: 25%;"></i>
<div class="quote-text text-purple-800 text-2xl">
"لا تقارن نفسك بالآخرين، قارن نفسك بما كنت عليه سابقًا"
</div>
</div>
<!-- Card 5 -->
<div class="quote-card gradient-bg-5">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-rocket" style="bottom: 20%; right: 15%;"></i>
<div class="quote-text text-gray-900 text-3xl">
"النجاح هو مجموع الجهود الصغيرة المتكررة يومًا بعد يوم"
</div>
</div>
<!-- Card 6 -->
<div class="quote-card gradient-bg-6">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-sun" style="top: 15%; left: 15%;"></i>
<div class="quote-text text-red-700 text-2xl">
"إذا كنت تؤمن بها، يمكنك تحقيقها"
</div>
</div>
<!-- Card 7 -->
<div class="quote-card gradient-bg-7">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-seedling" style="bottom: 25%; right: 20%;"></i>
<div class="quote-text text-white text-3xl">
"كل شيء يبدو مستحيلاً حتى يتم تحقيقه"
</div>
</div>
<!-- Card 8 -->
<div class="quote-card gradient-bg-8">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-anchor" style="top: 20%; left: 25%;"></i>
<div class="quote-text text-white text-2xl">
"لا يوجد مصعد للنجاح، عليك أن تستخدم الدرج"
</div>
</div>
<!-- Card 9 -->
<div class="quote-card gradient-bg-9">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-fire" style="bottom: 15%; right: 15%;"></i>
<div class="quote-text text-red-900 text-3xl">
"الشغف هو الوقود الذي يدفعك نحو النجاح"
</div>
</div>
<!-- Card 10 -->
<div class="quote-card gradient-bg-10">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-compass" style="top: 25%; right: 20%;"></i>
<div class="quote-text text-white text-2xl">
"المستقبل ينتمي لأولئك الذين يؤمنون بجمال أحلامهم"
</div>
</div>
<!-- Card 11 -->
<div class="quote-card gradient-bg-1">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-brain" style="bottom: 20%; left: 20%;"></i>
<div class="quote-text text-white text-3xl">
"عقلك قوي، أفكارك أقوى، إرادتك هي الأقوى"
</div>
</div>
<!-- Card 12 -->
<div class="quote-card gradient-bg-2">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-dove" style="top: 15%; right: 15%;"></i>
<div class="quote-text text-white text-2xl">
"السعادة ليست محطة تصل إليها، بل طريقة للسفر"
</div>
</div>
<!-- Card 13 -->
<div class="quote-card gradient-bg-3">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-gem" style="bottom: 25%; right: 25%;"></i>
<div class="quote-text text-gray-800 text-3xl">
"أنت المبدع الوحيد لمصيرك"
</div>
</div>
<!-- Card 14 -->
<div class="quote-card gradient-bg-4">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-umbrella-beach" style="top: 30%; left: 20%;"></i>
<div class="quote-text text-purple-800 text-2xl">
"استمتع بالرحلة، فالحياة ليست مجرد وصول"
</div>
</div>
<!-- Card 15 -->
<div class="quote-card gradient-bg-5">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-bolt" style="bottom: 15%; right: 15%;"></i>
<div class="quote-text text-gray-900 text-3xl">
"الطاقة الإيجابية تولد النتائج الإيجابية"
</div>
</div>
<!-- Card 16 -->
<div class="quote-card gradient-bg-6">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-paint-brush" style="top: 20%; left: 15%;"></i>
<div class="quote-text text-red-700 text-2xl">
"ارسم حياتك كما تحب، أنت الفنان"
</div>
</div>
<!-- Card 17 -->
<div class="quote-card gradient-bg-7">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-book" style="bottom: 20%; right: 20%;"></i>
<div class="quote-text text-white text-3xl">
"المعرفة هي القوة، والتعلم هو السلاح"
</div>
</div>
<!-- Card 18 -->
<div class="quote-card gradient-bg-8">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-cloud" style="top: 15%; right: 25%;"></i>
<div class="quote-text text-white text-2xl">
"احلم بعيدًا، فالأحلام الكبيرة فقط تغير العالم"
</div>
</div>
<!-- Card 19 -->
<div class="quote-card gradient-bg-9">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-tree" style="bottom: 25%; left: 20%;"></i>
<div class="quote-text text-red-900 text-3xl">
"النمو يأتي من خارج منطقة الراحة"
</div>
</div>
<!-- Card 20 -->
<div class="quote-card gradient-bg-10">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-water" style="top: 30%; left: 15%;"></i>
<div class="quote-text text-white text-2xl">
"كن كالماء، ليّنًا في شكله، قويًا في تأثيره"
</div>
</div>
<!-- Card 21 -->
<div class="quote-card gradient-bg-1">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-moon" style="bottom: 15%; right: 20%;"></i>
<div class="quote-text text-white text-3xl">
"حتى أطول رحلة تبدأ بخطوة واحدة"
</div>
</div>
<!-- Card 22 -->
<div class="quote-card gradient-bg-2">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-globe" style="top: 25%; left: 20%;"></i>
<div class="quote-text text-white text-2xl">
"العالم مكان كبير، لا تقيد نفسك بحدود ضيقة"
</div>
</div>
<!-- Card 23 -->
<div class="quote-card gradient-bg-3">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-crown" style="bottom: 20%; right: 25%;"></i>
<div class="quote-text text-gray-800 text-3xl">
"أنت ملك حياتك، تصرف بهذه الروح"
</div>
</div>
<!-- Card 24 -->
<div class="quote-card gradient-bg-4">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-feather" style="top: 15%; right: 15%;"></i>
<div class="quote-text text-purple-800 text-2xl">
"الخوف هو مجرد وهم، الشجاعة هي الحقيقة"
</div>
</div>
<!-- Card 25 -->
<div class="quote-card gradient-bg-5">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-bullseye" style="bottom: 15%; left: 20%;"></i>
<div class="quote-text text-gray-900 text-3xl">
"التركيز هو سر القوة"
</div>
</div>
<!-- Card 26 -->
<div class="quote-card gradient-bg-6">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-infinity" style="top: 30%; right: 20%;"></i>
<div class="quote-text text-red-700 text-2xl">
"إمكانياتك لا حدود لها، فقط آمن بها"
</div>
</div>
<!-- Card 27 -->
<div class="quote-card gradient-bg-7">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-puzzle-piece" style="bottom: 25%; left: 15%;"></i>
<div class="quote-text text-white text-3xl">
"كل مشكلة تحمل في طياتها فرصة عظيمة"
</div>
</div>
<!-- Card 28 -->
<div class="quote-card gradient-bg-8">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-hourglass" style="top: 20%; right: 25%;"></i>
<div class="quote-text text-white text-2xl">
"الوقت هو أغلى ما تملك، استثمره بحكمة"
</div>
</div>
<!-- Card 29 -->
<div class="quote-card gradient-bg-9">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-dragon" style="bottom: 15%; right: 15%;"></i>
<div class="quote-text text-red-900 text-3xl">
"كن أسطوريًا في كل ما تفعل"
</div>
</div>
<!-- Card 30 -->
<div class="quote-card gradient-bg-10">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-atom" style="top: 25%; left: 20%;"></i>
<div class="quote-text text-white text-2xl">
"التغيير يبدأ من الداخل، كن التغيير الذي تريد رؤيته"
</div>
</div>
<!-- Card 31 -->
<div class="quote-card gradient-bg-1">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-mountain" style="bottom: 20%; right: 20%;"></i>
<div class="quote-text text-white text-3xl">
"كل قمة تبدو مستحيلة حتى تتسلقها"
</div>
</div>
<!-- Card 32 -->
<div class="quote-card gradient-bg-2">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-lightbulb" style="top: 15%; left: 15%;"></i>
<div class="quote-text text-white text-2xl">
"الأفكار العظيمة تحتاج إلى شجاعة لتنفيذها"
</div>
</div>
<!-- Card 33 -->
<div class="quote-card gradient-bg-3">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-rocket" style="bottom: 25%; left: 25%;"></i>
<div class="quote-text text-gray-800 text-3xl">
"ضع أهدافًا تبدو مستحيلة، ثم اجعلها ممكنة"
</div>
</div>
<!-- Card 34 -->
<div class="quote-card gradient-bg-4">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-leaf" style="top: 30%; right: 20%;"></i>
<div class="quote-text text-purple-800 text-2xl">
"النمو الحقيقي يأتي عندما تتحدى نفسك"
</div>
</div>
<!-- Card 35 -->
<div class="quote-card gradient-bg-5">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-fire" style="bottom: 15%; right: 15%;"></i>
<div class="quote-text text-gray-900 text-3xl">
"الشغف هو ما يدفعك، المثابرة هي ما يبقيك"
</div>
</div>
<!-- Card 36 -->
<div class="quote-card gradient-bg-6">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-star" style="top: 20%; left: 20%;"></i>
<div class="quote-text text-red-700 text-2xl">
"كن نجمًا في سماء أحلامك"
</div>
</div>
<!-- Card 37 -->
<div class="quote-card gradient-bg-7">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-anchor" style="bottom: 20%; right: 20%;"></i>
<div class="quote-text text-white text-3xl">
"الثبات هو سر النجاح الطويل"
</div>
</div>
<!-- Card 38 -->
<div class="quote-card gradient-bg-8">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-compass" style="top: 15%; right: 25%;"></i>
<div class="quote-text text-white text-2xl">
"ابحث عن شغفك، وسوف تجد طريقك"
</div>
</div>
<!-- Card 39 -->
<div class="quote-card gradient-bg-9">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-gem" style="bottom: 25%; left: 20%;"></i>
<div class="quote-text text-red-900 text-3xl">
"أنت كنز ثمين، تصرف بهذه الروح"
</div>
</div>
<!-- Card 40 -->
<div class="quote-card gradient-bg-10">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-water" style="top: 30%; left: 15%;"></i>
<div class="quote-text text-white text-2xl">
"كن مرنًا كالماء، قويًا كالجبال"
</div>
</div>
<!-- Card 41 -->
<div class="quote-card gradient-bg-1">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-brain" style="bottom: 15%; right: 20%;"></i>
<div class="quote-text text-white text-3xl">
"عقلك هو أقوى أداة تملكها، دربه جيدًا"
</div>
</div>
<!-- Card 42 -->
<div class="quote-card gradient-bg-2">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-dove" style="top: 25%; left: 20%;"></i>
<div class="quote-text text-white text-2xl">
"السعادة اختيار، اخترها كل يوم"
</div>
</div>
<!-- Card 43 -->
<div class="quote-card gradient-bg-3">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-book" style="bottom: 20%; right: 25%;"></i>
<div class="quote-text text-gray-800 text-3xl">
"اقرأ كثيرًا، فالمعرفة هي السلاح"
</div>
</div>
<!-- Card 44 -->
<div class="quote-card gradient-bg-4">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-umbrella-beach" style="top: 15%; right: 15%;"></i>
<div class="quote-text text-purple-800 text-2xl">
"استمتع باللحظة، فهي لن تعود"
</div>
</div>
<!-- Card 45 -->
<div class="quote-card gradient-bg-5">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-bolt" style="bottom: 15%; left: 20%;"></i>
<div class="quote-text text-gray-900 text-3xl">
"كن سريعًا في التحرك، حكيمًا في التفكير"
</div>
</div>
<!-- Card 46 -->
<div class="quote-card gradient-bg-6">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-paint-brush" style="top: 30%; right: 20%;"></i>
<div class="quote-text text-red-700 text-2xl">
"ارسم حياتك بألوان أحلامك"
</div>
</div>
<!-- Card 47 -->
<div class="quote-card gradient-bg-7">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-moon" style="bottom: 25%; left: 15%;"></i>
<div class="quote-text text-white text-3xl">
"حتى في أحلك الليالي، هناك أمل"
</div>
</div>
<!-- Card 48 -->
<div class="quote-card gradient-bg-8">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-cloud" style="top: 20%; right: 25%;"></i>
<div class="quote-text text-white text-2xl">
"الأحلام الكبيرة تحتاج إلى صبر كبير"
</div>
</div>
<!-- Card 49 -->
<div class="quote-card gradient-bg-9">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-tree" style="bottom: 15%; right: 15%;"></i>
<div class="quote-text text-red-900 text-3xl">
"كن كالشجرة، متجذرًا في الأرض، ممتدًا نحو السماء"
</div>
</div>
<!-- Card 50 -->
<div class="quote-card gradient-bg-10">
<div class="pattern-overlay"></div>
<i class="floating-icon fas fa-globe" style="top: 25%; left: 20%;"></i>
<div class="quote-text text-white text-2xl">
"العالم بين يديك، ما عليك سوى أن تأخذه"
</div>
</div>
</div>
</div>
<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=Aissa170/aissahost" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>