philo-qawla / index.html
methodya's picture
Add 2 files
e04107a verified
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ู†ู…ูˆุฐุฌ ุชุญู„ูŠู„ ู‚ูˆู„ุฉ ูู„ุณููŠุฉ </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;
background-color: #f8fafc;
}
.quote-box {
border-right: 5px solid #3b82f6;
}
.section-card {
transition: all 0.3s ease;
}
.section-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.philosopher-img {
filter: grayscale(30%);
transition: all 0.3s ease;
}
.philosopher-img:hover {
filter: grayscale(0%);
transform: scale(1.05);
}
.highlight {
background: linear-gradient(120deg, #93c5fd 0%, #3b82f6 100%);
background-repeat: no-repeat;
background-size: 100% 40%;
background-position: 0 88%;
}
</style>
</head>
<body class="bg-gray-50 text-gray-800">
<div class="container mx-auto px-4 py-8 max-w-5xl">
<!-- Header -->
<header class="text-center mb-12">
<h1 class="text-4xl font-bold text-blue-800 mb-2">ู†ู…ูˆุฐุฌ ุชุญู„ูŠู„ ู‚ูˆู„ุฉ ูู„ุณููŠุฉ ู…ุฑูู‚ุฉ ุจุณุคุงู„</h1>
<div class="w-24 h-1 bg-blue-500 mx-auto mt-4 rounded-full"></div>
</header>
<!-- Quote Section -->
<section class="bg-white rounded-xl shadow-md p-6 mb-12 quote-box">
<div class="flex items-start">
<div class="text-blue-500 mr-4 mt-1">
<i class="fas fa-quote-right text-3xl"></i>
</div>
<div>
<blockquote class="text-xl font-medium text-gray-800 leading-relaxed">
"ุฅู† ุงู„ุฏูˆู„ุฉ ู„ุง ูŠุฌุจ ุฃู† ุชู‚ูˆู… ุนู„ู‰ ุงู„ุนู†ู ุงู„ู…ุดุฑูˆุนุŒ ุจู„ ุนู„ู‰ ุฑูˆุญ ุงู„ู‚ุงู†ูˆู† ูˆุงู„ุญู‚ ูˆุงู„ูƒุฑุงู…ุฉ."
</blockquote>
<p class="text-gray-600 mt-4 font-medium">ุญู„ู„ ุงู„ู‚ูˆู„ุฉ ู…ุจูŠู†ู‹ุง ู‡ู„ ูˆุงุฌุจ ุงู„ุฏูˆู„ุฉ ู‡ูˆ ู…ู…ุงุฑุณุฉ ุงู„ุนู†ู ุงู„ู…ุดุฑูˆุน ุฃู… ุญูุธ ุงู„ูƒุฑุงู…ุฉุŸ</p>
</div>
</div>
</section>
<!-- Analysis Navigation -->
<div class="flex justify-center mb-8">
<div class="inline-flex rounded-md shadow-sm">
<button onclick="showSection('understanding')" class="px-4 py-2 text-sm font-medium rounded-r-lg border border-gray-200 bg-blue-600 text-white focus:z-10 focus:ring-2 focus:ring-blue-500">
<i class="fas fa-brain mr-2"></i> ุงู„ูู‡ู…
</button>
<button onclick="showSection('analysis')" class="px-4 py-2 text-sm font-medium border-t border-b border-gray-200 bg-white text-gray-700 hover:bg-gray-50 focus:z-10 focus:ring-2 focus:ring-blue-500">
<i class="fas fa-search mr-2"></i> ุงู„ุชุญู„ูŠู„
</button>
<button onclick="showSection('discussion')" class="px-4 py-2 text-sm font-medium border-t border-b border-gray-200 bg-white text-gray-700 hover:bg-gray-50 focus:z-10 focus:ring-2 focus:ring-blue-500">
<i class="fas fa-comments mr-2"></i> ุงู„ู…ู†ุงู‚ุดุฉ
</button>
<button onclick="showSection('synthesis')" class="px-4 py-2 text-sm font-medium rounded-l-lg border border-gray-200 bg-white text-gray-700 hover:bg-gray-50 focus:z-10 focus:ring-2 focus:ring-blue-500">
<i class="fas fa-puzzle-piece mr-2"></i> ุงู„ุชุฑูƒูŠุจ
</button>
</div>
</div>
<!-- Understanding Section -->
<section id="understanding" class="section-card bg-white rounded-xl shadow-md p-8 mb-8">
<div class="flex items-center mb-6">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-brain text-blue-600 text-xl"></i>
</div>
<h2 class="text-2xl font-bold text-gray-800">ุงู„ูู‡ู… (4 ู†ู‚ุงุท)</h2>
</div>
<div class="space-y-4 text-gray-700 leading-relaxed">
<p>ุงู„ุฅู†ุณุงู† ูƒุงุฆู† ุณูŠุงุณูŠ ุจุงู…ุชูŠุงุฒ ู„ุฃู†ู‡ ูƒุงุฆู† ุนุงู‚ู„ุŒ ุบูŠุฑ ุฃู† ู‡ุฐุง ู„ุง ูŠู†ููŠ ุฃู† ุงู„ุฅู†ุณุงู† ู…ู†ุฐ ูˆุฌุฏ ุนู„ู‰ ุงู„ุฃุฑุถ ูƒุงู† ูƒุงุฆู†ู‹ุง ุนู†ูŠูู‹ุง ุบูŠุฑ ู…ู†ุธู…ุŒ ูƒู…ุง ู„ุง ู†ู†ูƒุฑ ุฃู† ุงู„ุจุดุฑูŠุฉ ู…ู†ุฐ ุจุฏุงูŠุชู‡ุง ุนุงุดุช ุนุตูˆุฑู‹ุง ู…ุธู„ู…ุฉ ู…ู† ู‚ุงู†ูˆู† ุงู„ุบุงุจ ูˆุญุงู„ุฉ ุงู„ุทุจูŠุนุฉ ุงู„ุชูŠ ุฃุฑู‡ู‚ุช ุงู„ุฅู†ุณุงู† ูˆุฏู…ุฑุช ู†ุณู„ู‡ ูˆู‡ุฏุฏุช ูˆุฌูˆุฏู‡ุŒ ู…ู…ุง ุงุถุทุฑู‡ ุฅู„ู‰ ุงู„ุชููƒูŠุฑ ููŠ ุงู„ุชู†ุธูŠู… ูˆุงู„ุณู„ู… ูˆุงู„ุชุญุถุฑุŒ ูˆู…ู† ู‡ู†ุงูƒ ูƒุงู†ุช ุงู„ุญุงุฌุฉ ุฅู„ู‰ ุงู„ุฏูˆู„ุฉ.</p>
<p>ุชูุนุฏ ุงู„ุฏูˆู„ุฉ ู…ู† ุฃุจุฑุฒ ุงู„ู…ุคุณุณุงุช ุงู„ุชูŠ ุนุฑูู‡ุง ุงู„ุฅู†ุณุงู† ู„ุชู†ุธูŠู… ุดุคูˆู†ู‡ ุงู„ุฌู…ุงุนูŠุฉ ูˆุชุญู‚ูŠู‚ ุงู„ุฃู…ู† ูˆุงู„ุงุณุชู‚ุฑุงุฑ. ุบูŠุฑ ุฃู† ุงู„ูˆุณุงุฆู„ ุงู„ุชูŠ ุชุนุชู…ุฏู‡ุง ุงู„ุฏูˆู„ุฉ ููŠ ู…ู…ุงุฑุณุฉ ุณู„ุทุชู‡ุง ุชูุซูŠุฑ ุฌุฏู„ุงู‹ ูู„ุณููŠู‹ุง ุฏุงุฆู…ู‹ุงุŒ ุฎุตูˆุตู‹ุง ุนู†ุฏู…ุง ูŠุชุนู„ู‚ ุงู„ุฃู…ุฑ ุจุงุณุชุฎุฏุงู… ุงู„ุนู†ูุŒ ุญุชู‰ ูˆุฅู† ูƒุงู† ููŠ ุฅุทุงุฑ ู…ุดุฑูˆุน.</p>
<p>ุงู„ู‚ูˆู„ุฉ ุงู„ุชูŠ ุจูŠู† ุฃูŠุฏูŠู†ุง ูŠุจุฏูˆ ุฃู†ู‡ุง ุชู†ุชู…ูŠ ุฅู„ู‰ <span class="highlight font-medium">ู…ุฌุฒูˆุกุฉ ุงู„ุณูŠุงุณุฉ</span>ุŒ ูˆุชู†ุฏุฑุฌ ุถู…ู† <span class="highlight font-medium">ู…ูู‡ูˆู… ุงู„ุฏูˆู„ุฉ</span>ุŒ ููŠ <span class="highlight font-medium">ู…ุญูˆุฑ ุงู„ุฏูˆู„ุฉ ุจูŠู† ุงู„ุญู‚ ูˆุงู„ุนู†ู</span>ุŒ ูˆุชุทุฑุญ ุฅุดูƒุงู„ู‹ุง ูู„ุณููŠู‹ุง ู…ุญูˆุฑูŠู‹ุง ู…ูุงุฏู‡: ู‡ู„ ุชุณุชู…ุฏ ุงู„ุฏูˆู„ุฉ ู…ุดุฑูˆุนูŠุชู‡ุง ู…ู† ุงุญุชูƒุงุฑ ุงู„ุนู†ู ุงู„ู…ุดุฑูˆุนุŒ ุฃู… ู…ู† ุงู„ุชุฒุงู…ู‡ุง ุจุฑูˆุญ ุงู„ู‚ุงู†ูˆู† ูˆุญู…ุงูŠุฉ ูƒุฑุงู…ุฉ ุงู„ู…ูˆุงุทู†ูŠู†ุŸ</p>
<p>ูˆูŠู†ุฏุฑุฌ ุชุญุช ู‡ุฐุง ุงู„ุฅุดูƒุงู„ ุชุณุงุคู„ุงุช ุฃุฎุฑู‰ ู…ู† ู‚ุจูŠู„: ู‡ู„ ูŠูุนุฏ ุงู„ุนู†ู ุงู„ู…ุดุฑูˆุน ู…ุจุฑุฑู‹ุง ูƒุงููŠู‹ุง ู„ุณู„ุทุฉ ุงู„ุฏูˆู„ุฉุŸ ูˆู‡ู„ ูŠู…ูƒู† ู„ู„ุฏูˆู„ุฉ ุฃู† ุชุญู‚ู‚ ุบุงูŠุงุชู‡ุง ุฏูˆู† ุงู„ู…ุณุงุณ ุจุงู„ุญู‚ ูˆุงู„ูƒุฑุงู…ุฉ ุงู„ุฅู†ุณุงู†ูŠุฉุŸ</p>
</div>
</section>
<!-- Analysis Section (hidden by default) -->
<section id="analysis" class="section-card bg-white rounded-xl shadow-md p-8 mb-8 hidden">
<div class="flex items-center mb-6">
<div class="bg-green-100 p-3 rounded-full mr-4">
<i class="fas fa-search text-green-600 text-xl"></i>
</div>
<h2 class="text-2xl font-bold text-gray-800">ุงู„ุชุญู„ูŠู„ (5 ู†ู‚ุงุท)</h2>
</div>
<div class="space-y-6 text-gray-700 leading-relaxed">
<p>ู„ูู‡ู… ุงู„ู‚ูˆู„ุฉุŒ ูŠู†ุจุบูŠ ุฃู† ู†ู‚ูˆู… ุจุชุญุฏูŠุฏ ู…ูุงู‡ูŠู…ู‡ุง ุงู„ุฃุณุงุณูŠุฉ:</p>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-blue-50 p-4 rounded-lg">
<h3 class="font-bold text-blue-800 mb-2">ุงู„ุฏูˆู„ุฉ</h3>
<p>ู…ุคุณุณุฉ ุณูŠุงุณูŠุฉ ุชุญุชูƒุฑ ู…ู…ุงุฑุณุฉ ุงู„ุณู„ุทุฉ ุฏุงุฎู„ ู…ุฌุชู…ุน ู…ุนูŠู† ูˆูู‚ ุงู„ู‚ุงู†ูˆู†.</p>
</div>
<div class="bg-blue-50 p-4 rounded-lg">
<h3 class="font-bold text-blue-800 mb-2">ุงู„ุนู†ู ุงู„ู…ุดุฑูˆุน</h3>
<p>ุงุณุชุนู…ุงู„ ุงู„ุฏูˆู„ุฉ ู„ู„ู‚ูˆุฉ ุจุตูุฉ ู‚ุงู†ูˆู†ูŠุฉ ู„ุชู†ููŠุฐ ุณู„ุทุชู‡ุง.</p>
</div>
<div class="bg-blue-50 p-4 rounded-lg">
<h3 class="font-bold text-blue-800 mb-2">ุฑูˆุญ ุงู„ู‚ุงู†ูˆู†</h3>
<p>ุชู„ูƒ ุงู„ู…ุจุงุฏุฆ ุงู„ุนุงู…ุฉ ุงู„ุชูŠ ุชุฑู…ูŠ ุฅู„ู‰ ุชุญู‚ูŠู‚ ุงู„ุนุฏุงู„ุฉ ูˆุงู„ู…ุณุงูˆุงุฉ.</p>
</div>
<div class="bg-blue-50 p-4 rounded-lg">
<h3 class="font-bold text-blue-800 mb-2">ุงู„ูƒุฑุงู…ุฉ</h3>
<p>ุงู„ู‚ูŠู…ุฉ ุงู„ุฅู†ุณุงู†ูŠุฉ ุงู„ุชูŠ ุชุนู†ูŠ ุงุญุชุฑุงู… ุงู„ูุฑุฏ ุจุงุนุชุจุงุฑู‡ ุบุงูŠุฉ ู„ุง ูˆุณูŠู„ุฉ.</p>
</div>
</div>
<p>ุฅู† ุงู„ุนู„ุงู‚ุฉ ุจูŠู† ู‡ุฐู‡ ุงู„ู…ูุงู‡ูŠู… ุชุจูŠู† ู„ู†ุง ุงู„ุชู‚ุงุจู„ ุจูŠู† ุฏูˆู„ุฉ ุงู„ุญู‚ ูˆุฏูˆู„ุฉ ุงู„ุนู†ูุŒ ูˆุจุงู„ุชุงู„ูŠ ุชูุจุฑุฒ ู„ู†ุง ุงู„ู‚ูˆู„ุฉ ุฃุทุฑูˆุญุฉ ู…ูุงุฏู‡ุง ุฃู† ุงู„ุฏูˆู„ุฉ ู„ุง ูŠุฌุจ ุฃู† ุชุคุณุณ ู…ุดุฑูˆุนูŠุชู‡ุง ุนู„ู‰ ุงู„ุนู†ูุŒ ุญุชู‰ ูˆุฅู† ูƒุงู† ู‚ุงู†ูˆู†ูŠู‹ุงุŒ ุจู„ ุนู„ู‰ ุฑูˆุญ ุงู„ู‚ุงู†ูˆู† ูˆุงู„ุญู‚ุŒ ูˆุนู„ู‰ ุงุญุชุฑุงู… ูƒุฑุงู…ุฉ ุงู„ุฅู†ุณุงู†.</p>
<p class="bg-yellow-50 border-l-4 border-yellow-400 p-4">ูˆุฌูˆุงุจู‹ุง ุนู„ู‰ ุงู„ุณุคุงู„ ุงู„ู…ุฑูู‚ ุจุงู„ู‚ูˆู„ุฉุŒ ู†ู‚ูˆู„ ุฃู† ุงู„ู‚ูˆู„ุฉ ุชุฏุนูˆ ุฅู„ู‰ ุฏูˆู„ุฉ ุงู„ุญู‚ุŒ ู„ุง ุฏูˆู„ุฉ ุงู„ู‚ูˆุฉ. ูƒู…ุง ุชูู„ู…ุญ ุงู„ู‚ูˆู„ุฉ ุฅู„ู‰ ุฃู† ุงู„ุนู†ูุŒ ูˆู„ูˆ ูƒุงู† ู…ุดุฑูˆุนู‹ุงุŒ ูู‡ูˆ ู‚ุฏ ูŠูู‡ุฏุฏ ุงู„ู‚ูŠู… ุงู„ุชูŠ ูŠุฌุจ ุฃู† ุชู‚ูˆู… ุนู„ูŠู‡ุง ุงู„ุฏูˆู„ุฉ ุงู„ุนุงุฏู„ุฉ.</p>
<p>ุชุนุชู…ุฏ ุงู„ู‚ูˆู„ุฉ ุนู„ู‰ ุญุฌุงุฌ ู‚ุงุฆู… ุนู„ู‰ ุงู„ุชู‚ุงุจู„ ูˆุงู„ู†ููŠ ูุงู„ู‚ูˆู„ุฉ ุชู†ููŠ (ุงู„ุนู†ู ุงู„ู…ุดุฑูˆุน) ูˆุชุซุจุช (ุฑูˆุญ ุงู„ู‚ุงู†ูˆู† ูˆุงู„ุญู‚ ูˆุงู„ูƒุฑุงู…ุฉ) ูˆุงู„ุบุงูŠุฉ ู…ู† ุฐู„ูƒ ู‡ูŠ ุฅุธู‡ุงุฑ ุงู„ุชูˆุชุฑ ุจูŠู† ู…ู†ุทู‚ ุงู„ู‚ูˆุฉ ูˆู…ู†ุทู‚ ุงู„ุญู‚ ูˆุงู„ู‚ุงู†ูˆู†ุŒ ูƒู…ุง ุฃู† ุงู„ู‚ูˆู„ุฉ ุชุนุชู…ุฏ ุฃุณู„ูˆุจ ุงู„ุงุณุชูู‡ุงู… ููŠ ุงู„ุณุคุงู„ ุงู„ู…ุทุฑูˆุญ ุชุญุชู‡ุง ู„ูƒูŠ ุชุจูŠู† ุงู„ุฅุดูƒุงู„ูŠุฉ ุงู„ุญุงุตู„ุฉ ุจูŠู† ุงู„ุญู‚ ูˆุงู„ุนู†ู ุฏุงุฎู„ ุงู„ุฏูˆู„ุฉ.</p>
<p>ูˆุชุฌุฏุฑ ุงู„ุฅุดุงุฑุฉ ุฅู„ู‰ ุฃู† ุฃุทุฑูˆุญุฉ ุงู„ู‚ูˆู„ุฉ ู„ู‡ุง ู‚ูŠู…ุฉ ูู„ุณููŠุฉ ุนู…ูŠู‚ุฉุŒ ู„ุฃู†ู‡ุง ุชุจูŠู† ุงู„ุจุนุฏ ุงู„ุฃุฎู„ุงู‚ูŠ ุงู„ุฅู†ุณุงู†ูŠ ุงู„ุฐูŠ ูŠุฌุจ ุฃู† ุชุธู‡ุฑ ุจู‡ ุงู„ุฏูˆู„ุฉ ูˆุงู„ุฐูŠ ูŠู‚ูˆู… ุนู„ู‰ ู…ุจุงุฏุฆ ุงู„ูƒุฑุงู…ุฉ ูˆุงู„ุนุฏุงู„ุฉ ุจุฏู„ู‹ุง ู…ู† ุงู„ู‡ูŠู…ู†ุฉ ูˆุงู„ู‚ูˆุฉ. ูˆู‡ูˆ ู…ุง ู†ุฑุงู‡ ููŠ ุงู„ุฃู†ุธู…ุฉ ุงู„ุฏูŠู…ูˆู‚ุฑุงุทูŠุฉ ุงู„ุญุฏูŠุซุฉ ุงู„ุชูŠ ุชุชุฌู†ุจ ุงู„ุฅูุฑุงุท ููŠ ุงุณุชุนู…ุงู„ ุงู„ุนู†ูุŒ ูˆุชุนู…ู„ ุนู„ู‰ ุถู…ุงู† ุงู„ุญู‚ูˆู‚ ูˆุงู„ุญุฑูŠุงุชุŒ ุฃู…ุง ุนู„ู‰ ุงู„ู…ุณุชูˆู‰ ุงู„ูู„ุณููŠ ูู‡ูŠ ุชุจูŠู† ู„ู†ุง ุฃูŠุถู‹ุง ุฃู† ุงู„ุฏูˆู„ ู„ูŠุณ ู„ู‡ุง ู…ู†ุทู‚ ู…ุญุฏุฏ ููƒู„ ุฏูˆู„ุฉ ูŠู…ูƒู†ู‡ุง ุฃู† ุชู„ุฌุฃ ู„ู„ุนู†ู ู„ุถู…ุงู† ู…ุตุงู„ุญู‡ุง.</p>
</div>
</section>
<!-- Discussion Section (hidden by default) -->
<section id="discussion" class="section-card bg-white rounded-xl shadow-md p-8 mb-8 hidden">
<div class="flex items-center mb-6">
<div class="bg-purple-100 p-3 rounded-full mr-4">
<i class="fas fa-comments text-purple-600 text-xl"></i>
</div>
<h2 class="text-2xl font-bold text-gray-800">ุงู„ู…ู†ุงู‚ุดุฉ (5 ู†ู‚ุงุท)</h2>
</div>
<div class="space-y-8 text-gray-700 leading-relaxed">
<p>ุชุชูˆุงูู‚ ุงู„ู‚ูˆู„ุฉ ู…ุน ู…ูˆู‚ู <span class="font-bold text-purple-700">ุฌุงูƒู„ูŠู† ุฑูˆุณ</span>ุŒ ุงู„ุชูŠ ุชุคูƒุฏ ุนู„ู‰ ุถุฑูˆุฑุฉ ุฃู† ุชู‚ูˆู… ุงู„ุฏูˆู„ุฉ ุนู„ู‰ ู…ุจุงุฏุฆ ุงู„ุญู‚ ูˆุงู„ู‚ุงู†ูˆู† ูˆุงุญุชุฑุงู… ูƒุฑุงู…ุฉ ุงู„ุฅู†ุณุงู†. ูุจุงู„ู†ุณุจุฉ ุฅู„ูŠู‡ุงุŒ ุฅู† ุงุณุชุฎุฏุงู… ุงู„ุฏูˆู„ุฉ ู„ู„ุนู†ูุŒ ูˆู„ูˆ ูƒุงู† ู…ุดุฑูˆุนู‹ุงุŒ ูŠุฌุจ ุฃู† ูŠูƒูˆู† ู…ุญุฏูˆุฏู‹ุง ูˆู…ุคุทุฑู‹ุง ู‚ุงู†ูˆู†ูŠู‹ุงุŒ ูˆุฃู„ุง ูŠูุตุจุญ ูˆุณูŠู„ุฉ ุฃุณุงุณูŠุฉ ู„ู…ู…ุงุฑุณุฉ ุงู„ุชุณู„ุท ูˆุฅุฑู‡ุงุจ ุงู„ุฏูˆู„ุฉ ุงู„ุฐูŠ ูŠู‡ุฏุฏ ุญุฑูŠุฉ ุงู„ู…ูˆุงุทู†ูŠู† ูˆูŠุถุฑุจ ููŠ ุงู„ุนู…ู‚ ุฃุณุงุณ ู‚ูŠุงู… ุงู„ุฏูˆู„ุฉ.</p>
<div class="flex flex-col md:flex-row items-center bg-purple-50 p-4 rounded-lg">
<div class="md:w-1/4 mb-4 md:mb-0 flex justify-center">
<img src="https://via.placeholder.com/150?text=J.Russ" alt="ุฌุงูƒู„ูŠู† ุฑูˆุณ" class="rounded-full h-24 w-24 object-cover philosopher-img border-4 border-purple-200">
</div>
<div class="md:w-3/4 md:pr-4">
<h3 class="font-bold text-purple-800 mb-2">ู…ูˆู‚ู ุฌุงูƒู„ูŠู† ุฑูˆุณ</h3>
<p>"ุงู„ุฏูˆู„ุฉ ุงู„ุนุงุฏู„ุฉ ู‡ูŠ ุงู„ุชูŠ ุชูู…ุงุฑุณ ุณู„ุทุชู‡ุง ููŠ ุฅุทุงุฑ ุงุญุชุฑุงู… ุงู„ุญู‚ูˆู‚ ูˆุงู„ุญุฑูŠุงุชุŒ ูˆุชุญูุธ ูƒุฑุงู…ุฉ ุงู„ุฅู†ุณุงู† ูƒู…ุจุฏุฃ ุฃุณุงุณูŠ."</p>
</div>
</div>
<p>ููŠ ุงู„ู…ู‚ุงุจู„ุŒ ูŠูุนุงุฑุถ ู‡ุฐู‡ ุงู„ู‚ูˆู„ุฉ ู…ูˆู‚ู <span class="font-bold text-red-700">ู…ุงูƒุณ ููŠุจุฑ</span>ุŒ ุงู„ุฐูŠ ูŠุฑู‰ ุฃู† ุงู„ุนู†ู ุงู„ู…ุดุฑูˆุน ู‡ูˆ ู…ุง ูŠูู…ูŠุฒ ุงู„ุฏูˆู„ุฉ ุนู† ุบูŠุฑู‡ุง ู…ู† ุงู„ุชู†ุธูŠู…ุงุช ุงู„ุงุฌุชู…ุงุนูŠุฉ. ูุจุงู„ู†ุณุจุฉ ู„ู‡ุŒ ู„ุง ูŠู…ูƒู† ุชุตูˆุฑ ูˆุฌูˆุฏ ุฏูˆู„ุฉ ุฏูˆู† ุฃู† ุชุญุชูƒุฑ ูˆุญุฏู‡ุง ุญู‚ ุงุณุชุนู…ุงู„ ุงู„ู‚ูˆุฉ ุฏุงุฎู„ ุงู„ู…ุฌุชู…ุน ูˆูŠุฑู‰ ุฃู† ู‡ุฐุง ุงู„ุนู†ู ุถุฑูˆุฑูŠ ู„ุจู‚ุงุก ุงู„ู†ุธุงู… ูˆุชุญู‚ูŠู‚ ุงู„ุงุณุชู‚ุฑุงุฑุŒ ูุงู„ุนู†ู ู„ูŠุณ ุงู„ูˆุณูŠู„ุฉ ุงู„ุนุงุฏูŠุฉ ุงู„ุชูŠ ุชู„ุฌุฃ ู„ู‡ุง ุงู„ุฏูˆู„ุฉ ู„ูุฑุถ ุงู„ู†ุธุงู… ุจู„ ู‡ูˆ ูˆุณูŠู„ุชู‡ุง ุงู„ู…ู…ูŠุฒุฉ!</p>
<div class="flex flex-col md:flex-row items-center bg-red-50 p-4 rounded-lg">
<div class="md:w-1/4 mb-4 md:mb-0 flex justify-center">
<img src="https://via.placeholder.com/150?text=M.Weber" alt="ู…ุงูƒุณ ููŠุจุฑ" class="rounded-full h-24 w-24 object-cover philosopher-img border-4 border-red-200">
</div>
<div class="md:w-3/4 md:pr-4">
<h3 class="font-bold text-red-800 mb-2">ู…ูˆู‚ู ู…ุงูƒุณ ููŠุจุฑ</h3>
<p>"ุงู„ุนู†ู ุงู„ู…ุดุฑูˆุน ู‡ูˆ ู…ุง ูŠูู…ูŠุฒ ุงู„ุฏูˆู„ุฉ ุนู† ุบูŠุฑู‡ุง ู…ู† ุงู„ุชู†ุธูŠู…ุงุชุŒ ูˆู‡ูˆ ุถุฑูˆุฑุฉ ู„ุงุณุชู…ุฑุงุฑ ุงู„ู†ุธุงู…."</p>
</div>
</div>
<p>ุฅู† ุงู„ุชุนุงุฑุถ ุจูŠู† ุงู„ู…ูˆู‚ููŠู† ูŠูุฌุณุฏ ุงู„ุฎู„ุงู ุจูŠู† ุชุตูˆุฑ ุฃุฎู„ุงู‚ูŠ ู…ุซุงู„ูŠ ู„ู„ุฏูˆู„ุฉ ูƒุญุงู…ูŠุฉ ู„ู„ุญู‚ูˆู‚ ูˆุงู„ูƒุฑุงู…ุฉุŒ ูˆุชุตูˆุฑ ูˆุงู‚ุนูŠ ูŠุนุชุจุฑ ุฃู† ุงุณุชู…ุฑุงุฑ ุงู„ุฏูˆู„ุฉ ู…ุฑู‡ูˆู† ุจู‚ุฏุฑุชู‡ุง ุนู„ู‰ ูุฑุถ ุณู„ุทุชู‡ุง ุจูˆุงุณุทุฉ ุงู„ุนู†ู ุงู„ู…ุดุฑูˆุน.</p>
</div>
</section>
<!-- Synthesis Section (hidden by default) -->
<section id="synthesis" class="section-card bg-white rounded-xl shadow-md p-8 mb-8 hidden">
<div class="flex items-center mb-6">
<div class="bg-indigo-100 p-3 rounded-full mr-4">
<i class="fas fa-puzzle-piece text-indigo-600 text-xl"></i>
</div>
<h2 class="text-2xl font-bold text-gray-800">ุงู„ุชุฑูƒูŠุจ (3 ู†ู‚ุงุท)</h2>
</div>
<div class="space-y-6 text-gray-700 leading-relaxed">
<p>ู„ู‚ุฏ ุนุงู„ุฌู†ุง ููŠ ู…ุฑุงุญู„ ุงู„ุชุญู„ูŠู„ ูˆุงู„ู…ู†ุงู‚ุดุฉ ู„ู‡ุฐู‡ ุงู„ู‚ูˆู„ุฉ ู…ุดูƒู„ุฉ ุงู„ุนู„ุงู‚ุฉ ุจูŠู† ุงู„ุนู†ู ุงู„ู…ุดุฑูˆุน ูˆุงู„ุญู‚ุŒ ูˆู‡ู„ ุชู‚ูˆู… ุงู„ุฏูˆู„ุฉ ุนู„ู‰ ุงู„ู‚ูˆุฉ ุฃู… ุนู„ู‰ ุงู„ูƒุฑุงู…ุฉ. ูˆู‚ุฏ ุญุตุฑู†ุง ู…ุฌุฒูˆุกุชู‡ุง ููŠ ู…ุฌุฒูˆุกุฉ ุงู„ุณูŠุงุณุฉุŒ ูˆุฅุทุงุฑู‡ุง ููŠ ู…ูู‡ูˆู… ุงู„ุฏูˆู„ุฉุŒ ูˆุจุฏู‚ุฉ ุฃูƒุซุฑ ููŠ ู…ุญูˆุฑ ุงู„ุฏูˆู„ุฉ ุจูŠู† ุงู„ุญู‚ ูˆุงู„ุนู†ู.</p>
<p>ูˆุฃุฌุจู†ุง ุนู„ู‰ ุณุคุงู„ ุงู„ู‚ูˆู„ุฉ ุถู…ู† ุงู„ุชุญู„ูŠู„ ูˆุงู„ู…ู†ุงู‚ุดุฉุŒ ุญูŠุซ ุจูŠู†ู‘ุง ุฃู† ุฃุทุฑูˆุญุชู‡ุง ุชู…ุญูˆุฑุช ุญูˆู„ ุถุฑูˆุฑุฉ ุชุฃุณูŠุณ ุงู„ุฏูˆู„ุฉ ุนู„ู‰ ุฑูˆุญ ุงู„ู‚ุงู†ูˆู† ูˆุงู„ูƒุฑุงู…ุฉ ุงู„ุฅู†ุณุงู†ูŠุฉุŒ ุจุฏู„ู‹ุง ู…ู† ุงู„ุงุนุชู…ุงุฏ ุนู„ู‰ ุงู„ุนู†ู ุงู„ู…ุดุฑูˆุน ูƒูˆุณูŠู„ุฉ ูˆุญูŠุฏุฉ ู„ู…ู…ุงุฑุณุฉ ุงู„ุณู„ุทุฉ.</p>
<p>ุซู… ู†ุงู‚ุดู†ุง ู‡ุฐู‡ ุงู„ุฃุทุฑูˆุญุฉ ู…ู† ุฎู„ุงู„ ู…ูˆู‚ู ุฌุงูƒู„ูŠู† ุฑูˆุณ ุงู„ุชูŠ ุฏุนู…ุช ู…ุถู…ูˆู† ุงู„ู‚ูˆู„ุฉุŒ ู…ุนุชุจุฑุฉู‹ ุฃู† ุงู„ุฏูˆู„ุฉ ุงู„ุนุงุฏู„ุฉ ู‡ูŠ ุงู„ุชูŠ ุชูู…ุงุฑุณ ุณู„ุทุชู‡ุง ููŠ ุฅุทุงุฑ ุงุญุชุฑุงู… ุงู„ุญู‚ูˆู‚ ูˆุงู„ุญุฑูŠุงุชุŒ ูˆุชุญูุธ ูƒุฑุงู…ุฉ ุงู„ุฅู†ุณุงู† ูƒู…ุจุฏุฃ ุฃุณุงุณูŠ.</p>
<p>ูˆููŠ ุงู„ู…ู‚ุงุจู„ุŒ ุงุณุชุญุถุฑู†ุง ู…ูˆู‚ู ู…ุงูƒุณ ููŠุจุฑ ุงู„ุฐูŠ ุนุงุฑุถ ู…ุถู…ูˆู† ุงู„ู‚ูˆู„ุฉุŒ ูˆุงุนุชุจุฑ ุฃู† ุงู„ุนู†ู ุงู„ู…ุดุฑูˆุน ู‡ูˆ ู…ุง ูŠูู…ูŠุฒ ุงู„ุฏูˆู„ุฉ ุนู† ุบูŠุฑู‡ุง ู…ู† ุงู„ุชู†ุธูŠู…ุงุชุŒ ูˆุฃู†ู‡ ุถุฑูˆุฑุฉ ู„ุงุณุชู…ุฑุงุฑ ุงู„ู†ุธุงู….</p>
<div class="bg-indigo-50 p-4 rounded-lg border-l-4 border-indigo-400">
<p class="font-medium text-indigo-800">ุงู„ุฎู„ุงุตุฉ:</p>
<p>ุงู„ูุฑู‚ ุจูŠู† ู‡ุฐูŠู† ุงู„ู…ูˆู‚ููŠู† ูŠุชู…ุซู„ ููŠ ุฃู† ุฌุงูƒู„ูŠู† ุฑูˆุณ ุชูุคุณุณ ุงู„ุฏูˆู„ุฉ ุนู„ู‰ ุงู„ู…ุจุงุฏุฆ ุงู„ุฃุฎู„ุงู‚ูŠุฉ ูˆุงู„ู‚ุงู†ูˆู†ูŠุฉุŒ ุจูŠู†ู…ุง ู…ุงูƒุณ ููŠุจุฑ ูŠูุคุณุณู‡ุง ุนู„ู‰ ู…ุจุฏุฃ ุงู„ุณูŠุทุฑุฉ ูˆุงุญุชูƒุงุฑ ุงู„ู‚ูˆุฉ.</p>
</div>
<p>ูˆุจุงู„ุชุงู„ูŠุŒ ูุฅู† ู…ูˆู‚ููŠ ุงู„ุดุฎุตูŠ ูŠุชู…ุซู„ ููŠ ุชุฃูŠูŠุฏ ุงู„ุชุตูˆุฑ ุงู„ุฐูŠ ูŠุฌุนู„ ู…ู† ุงู„ุฏูˆู„ุฉ ุฃุฏุงุฉ ู„ุฎุฏู…ุฉ ุงู„ู…ูˆุงุทู†ูŠู† ูˆุญู…ุงูŠุฉ ูƒุฑุงู…ุชู‡ู…ุŒ ู„ุง ูˆุณูŠู„ุฉ ู„ู„ู‡ูŠู…ู†ุฉ ุนู„ูŠู‡ู…ุŒ ูˆุงู„ุฏู„ูŠู„ ุนู„ู‰ ุฐู„ูƒ ู…ุง ู†ุฑุงู‡ ููŠ ุฃู†ุธู…ุฉ ุฏูŠู…ู‚ุฑุงุทูŠุฉ ุญุฏูŠุซุฉ ู…ุซู„ ุงู„ุณูˆูŠุฏ ุฃูˆ ูƒู†ุฏุงุŒ ุญูŠุซ ุชูˆุงุฒู† ุงู„ุฏูˆู„ุฉ ุจูŠู† ุณู„ุทุชู‡ุง ูˆุงุญุชุฑุงู…ู‡ุง ู„ุญู‚ูˆู‚ ุงู„ุฅู†ุณุงู†ุŒ ู…ู…ุง ูŠุฌุนู„ู‡ุง ุฃูƒุซุฑ ุงุณุชู‚ุฑุงุฑู‹ุง ูˆุฃู‚ุฑุจ ุฅู„ู‰ ู…ูู‡ูˆู… ุฏูˆู„ุฉ ุงู„ุญู‚.</p>
</div>
</section>
<!-- Footer -->
<footer class="mt-12 text-center text-gray-600 text-sm">
<p>ุซุงู†ูˆูŠุฉ ุงู„ู…ุฑูŠู†ูŠูŠู† ุงู„ุชุฃู‡ูŠู„ูŠุฉ ยฉ 2025 . ุฌู…ูŠุน ุงู„ุญู‚ูˆู‚ ู…ุญููˆุธุฉ.</p>
<div class="flex justify-center space-x-4 mt-2">
<a href="#" class="text-blue-600 hover:text-blue-800"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-blue-600 hover:text-blue-800"><i class="fab fa-facebook"></i></a>
<a href="#" class="text-blue-600 hover:text-blue-800"><i class="fab fa-linkedin"></i></a>
</div>
</footer>
</div>
<script>
// Show the understanding section by default
document.addEventListener('DOMContentLoaded', function() {
showSection('understanding');
});
function showSection(sectionId) {
// Hide all sections
document.querySelectorAll('section[id$="Section"]').forEach(section => {
section.classList.add('hidden');
});
// Show the selected section
document.getElementById(sectionId).classList.remove('hidden');
// Update active button
document.querySelectorAll('button').forEach(btn => {
btn.classList.remove('bg-blue-600', 'text-white');
btn.classList.add('bg-white', 'text-gray-700');
});
// Highlight the active button
const activeBtn = document.querySelector(`button[onclick="showSection('${sectionId}')"]`);
activeBtn.classList.remove('bg-white', 'text-gray-700');
activeBtn.classList.add('bg-blue-600', 'text-white');
}
</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=methodya/philo-qawla" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>