File size: 15,676 Bytes
14eabf4
4c317d9
 
 
 
 
14eabf4
4c317d9
 
 
 
 
 
 
 
 
 
 
 
 
 
14eabf4
 
 
4c317d9
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14eabf4
 
4c317d9
 
 
14eabf4
 
 
 
 
 
 
 
 
 
 
 
4c317d9
 
 
 
 
14eabf4
4c317d9
 
 
 
 
 
 
14eabf4
 
 
4c317d9
 
 
 
14eabf4
 
 
4c317d9
14eabf4
 
 
4c317d9
14eabf4
 
 
4c317d9
14eabf4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4c317d9
 
14eabf4
 
4c317d9
 
 
 
 
14eabf4
 
4c317d9
 
 
14eabf4
 
4c317d9
14eabf4
 
4c317d9
 
14eabf4
 
 
 
 
 
 
 
4c317d9
14eabf4
 
 
 
4c317d9
14eabf4
 
 
4c317d9
 
 
14eabf4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4c317d9
 
 
 
 
14eabf4
4c317d9
 
14eabf4
 
4c317d9
14eabf4
 
4c317d9
 
 
 
 
 
 
14eabf4
 
 
 
 
 
 
 
4c317d9
 
 
 
 
 
 
 
 
 
14eabf4
4c317d9
 
14eabf4
 
 
4c317d9
14eabf4
 
 
4c317d9
 
 
 
 
 
 
 
14eabf4
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243

<!DOCTYPE html>
<html lang="fa" 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 href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css" rel="stylesheet" type="text/css" />
    <script src="https://unpkg.com/feather-icons"></script>
    <link rel="stylesheet" href="style.css">
    <style>
        body { font-family: 'Vazirmatn', sans-serif; }
        .wiki-content h2 { font-size: 1.5rem; border-bottom: 1px solid #a2a9b1; margin-top: 1.5rem; margin-bottom: 0.5rem; padding-bottom: 0.25rem; color: #202122; }
        .wiki-content h3 { font-size: 1.25rem; font-weight: bold; margin-top: 1.25rem; margin-bottom: 0.5rem; color: #202122; }
        .wiki-content p { line-height: 1.8; margin-bottom: 0.75rem; text-align: justify; }
        .wiki-content a { color: #0645ad; text-decoration: none; }
        .wiki-content a:hover { text-decoration: underline; }
        .wiki-content ul, .wiki-content ol { margin-right: 2rem; margin-bottom: 0.75rem; line-height: 1.6; }
        .wiki-infobox { float: left; margin-left: 1rem; margin-bottom: 0.5rem; width: 300px; background: #f8f9fa; border: 1px solid #a2a9b1; padding: 5px; font-size: 0.9rem; }
        .reference { font-size: 0.8rem; vertical-align: super; color: #0645ad; }
        .internal-link { color: #0645ad; cursor: pointer; text-decoration: none; }
        .internal-link:hover { text-decoration: underline; }
        .internal-link.new { color: #ba0000; }
    </style>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        wiki: { 100: '#f8f9fa', 200: '#eaecf0', 500: '#a2a9b1', 700: '#54595d', 900: '#202122' }
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-wiki-100 text-wiki-900 antialiased">

    <!-- Header -->
    <header class="border-b border-wiki-200 bg-white mb-4 shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 h-16 flex items-center justify-between">
            <div class="flex items-center gap-4">
                <a href="index.html" class="text-2xl font-bold flex items-center gap-2">
                    <span class="bg-wiki-900 text-white p-1 rounded">ویکی</span>
                    <span class="hidden sm:inline">پدیا</span>
                </a>
            </div>
            <div class="flex items-center gap-2">
                <a href="#" class="text-sm px-3 py-1.5 bg-blue-600 text-white rounded hover:bg-blue-700 transition shadow-sm">ورود</a>
            </div>
        </div>
    </header>

    <div class="container mx-auto px-4 flex flex-col lg:flex-row gap-6">

        <!-- Sidebar -->
        <aside class="hidden lg:block w-64 shrink-0 order-3 lg:order-1">
            <nav class="bg-white border border-wiki-200 rounded p-2 sticky top-24">
                <div class="mb-2 text-sm font-bold text-gray-500 px-2 py-1">محتوا</div>
                <ul class="space-y-1 text-sm">
                    <li><a href="#" class="block px-2 py-1 hover:bg-gray-100 rounded internal-link">زندگی‌نامه</a></li>
                    <li><a href="#background" class="block px-2 py-1 hover:bg-gray-100 rounded internal-link">پیش‌زمینه</a></li>
                    <li><a href="#achievements" class="block px-2 py-1 hover:bg-gray-100 rounded internal-link">دستاوردها</a></li>
                    <li><a href="#legacy" class="block px-2 py-1 hover:bg-gray-100 rounded internal-link">میراث</a></li>
                    <li><a href="#see-also" class="block px-2 py-1 hover:bg-gray-100 rounded internal-link">همچنین ببینید</a></li>
                </ul>
                
                <div class="mt-4 mb-2 text-sm font-bold text-gray-500 px-2 py-1">دسته‌بندی‌ها</div>
                <ul class="space-y-1 text-sm">
                    <li><a href="#" class="block px-2 py-1 hover:bg-gray-100 rounded internal-link text-blue-600">امپراتوری هخامنشی</a></li>
                    <li><a href="#" class="block px-2 py-1 hover:bg-gray-100 rounded internal-link text-blue-600">تاریخ ایران</a></li>
                    <li><a href="#" class="block px-2 py-1 hover:bg-gray-100 rounded internal-link text-blue-600">شاهان هخامنشی</a></li>
                </ul>
            </nav>
        </aside>

        <!-- Main Content -->
        <main class="flex-1 min-w-0 bg-white border border-wiki-200 p-6 lg:p-8 rounded shadow-sm relative order-2 lg:order-2">
            
            <!-- Breadcrumbs -->
            <nav class="text-sm text-gray-500 mb-4 flex gap-2 items-center">
                <a href="index.html" class="hover:underline">صفحه اصلی</a>
                <span>/</span>
                <a href="#" class="hover:underline">تاریخ</a>
                <span>/</span>
                <a href="#" class="hover:underline">هخامنشیان</a>
                <span>/</span>
                <span class="text-gray-800">کوروش بزرگ</span>
            </nav>

            <div class="wiki-content relative">
                <!-- Infobox -->
                <div class="wiki-infobox hidden md:block border border-gray-300 bg-gray-50 p-0">
                    <div class="bg-gray-200 text-center font-bold py-3 border-b border-gray-300 text-lg">کوروش بزرگ</div>
                    <img src="https://via.placeholder.com/300x200?text=Cyrus+Statue" alt="تندیس کوروش" class="w-full h-48 object-cover bg-gray-300">
                    <table class="w-full text-right text-sm mt-2">
                        <tr class="border-b border-gray-200">
                            <td class="p-2 font-bold align-top">نام</td>
                            <td class="p-2 align-top">کوروش دوم</td>
                        </tr>
                        <tr class="border-b border-gray-200">
                            <td class="p-2 font-bold align-top">لقب</td>
                            <td class="p-2 align-top">کوروش کبیر، پدر</td>
                        </tr>
                        <tr class="border-b border-gray-200">
                            <td class="p-2 font-bold align-top">دودمان</td>
                            <td class="p-2 align-top"><a href="#" class="internal-link">هخامنشی</a></td>
                        </tr>
                        <tr class="border-b border-gray-200">
                            <td class="p-2 font-bold align-top">پدر</td>
                            <td class="p-2 align-top"><a href="#" class="internal-link">کمبوجیه یکم</a></td>
                        </tr>
                        <tr class="border-b border-gray-200">
                            <td class="p-2 font-bold align-top">دوره</td>
                            <td class="p-2 align-top">۵۵۹ - ۵۳۰ ق.م</td>
                        </tr>
                        <tr class="border-b border-gray-200">
                            <td class="p-2 font-bold align-top">پیشین</td>
                            <td class="p-2 align-top">کمبوجیه یکم</td>
                        </tr>
                        <tr>
                            <td class="p-2 font-bold align-top">جانشین</td>
                            <td class="p-2 align-top"><a href="#" class="internal-link">کمبوجیه دوم</a></td>
                        </tr>
                    </table>
                </div>

                <!-- Title -->
                <h1 class="text-4xl font-bold mb-2 text-wiki-900">کوروش بزرگ</h1>
                <div class="text-gray-500 text-sm mb-4 italic">از دایره المعارف فارسی، دانشنامهٔ آزاد</div>
                <hr class="border-wiki-200 mb-4">

                <!-- Lead Paragraph -->
                <p class="lead mb-4 text-gray-800">
                    <b>کوروش دوم</b> (زادهٔ حدود ۵۷۵ پ.م - درگذشته ۵۳۰ پ.م)، که بیشتر با نام <b>کوروش بزرگ</b> شناخته می‌شود، بنیان‌گذار و نخستین شاه <a href="#" class="internal-link"><b>امپراتوری هخامنشی</b></a> بود. او با گسترش قلمرو خود از <a href="#" class="internal-link">رود سند</a> تا <a href="#" class="internal-link">دریای اژه</a>، بزرگ‌ترین امپراتوری تا آن زمان را بنا کرد.
                </p>
                <p class="mb-4">
                    کوروش به دلیل سیاست‌های انسان‌دوستانه و مدارای نسبت به مغلوبین، به ویژه در <a href="#" class="internal-link">بازپس‌گیری بابل</a> و آزادسازی <a href="#" class="internal-link">یهودیان</a> از اسارت، شهرت یافت. <span class="reference">[۱]</span>
                </p>

                <h2 id="background">پیش‌زمینه و عصر کودکی</h2>
                <p class="mb-4">
                    کوروش فرزند <a href="#" class="internal-link">کمبوجیه یکم</a> (شاه پارس) و ماندان، دختر آستیاگes (شاه ماد) بود. <a href="#" class="internal-link">روابط پیچیده</a> میان مادها و پارسان در نهایت به قیام کوروش علیه پدربزرگش آستیاگes انجامید. 
                </p>
                
                <h2 id="conquests">فتوحات</h2>
                <p class="mb-4">
                    نخستین گام کوروش، متحد کردن قبایل <a href="#" class="internal-link">پارس</a> بود. سپس در نبردی که حدود ۵۵۰ پ.م رخ داد، مادها را شکست داد و پایتخت خود را به <a href="#" class="internal-link">پاسارگاد</a> منتقل کرد. پس از آن، <a href="#" class="internal-link">لیدیه</a> (در آناتولی) و <a href="#" class="internal-link">بابل</a> را فتح کرد. <span class="reference">[۲]</span>
                </p>
                <ul class="list-disc mr-6 mb-4 text-gray-700">
                    <li><b>پیروزی بر مادها:</b> وحدت ایران زیر فرمان کوروش.</li>
                    <li><b>فتح بابل:</b> ۵۳۹ پ.م، پایان حکومت نئو-بابلی.</li>
                </ul>

                <h2 id="legacy">میراث و منشور کوروش</h2>
                <p class="mb-4">
                    <a href="#" class="internal-link">منشور کوروش</a> (یا استوانه کوروش) سندی است که در آن کوروش اعلام می‌کند که بابل را به عنوان نمایندهٔ مردم و نه فاتح ویرانگر فتح کرده است. این منشور را «نخستین منشور حقوق بشر» نامیده‌اند. <span class="reference">[۳]</span>
                </p>

                <div class="clearfix"></div>
                
                <hr class="my-8 border-gray-300">
                
                <!-- References Section -->
                <div class="mt-8">
                    <h3 class="text-xl font-bold mb-4 text-gray-800 border-b border-gray-200 pb-2">پانویس</h3>
                    <ol class="list-decimal list-inside text-sm text-gray-600 space-y-2 mr-4">
                        <li>بری، تاریخ ایران (کمبریج)، جلد.</li>
                        <li>هرودوت، تاریخ، کتاب اول.</li>
                        <li>عیسی بن مopp، تاریخ کلیسا.</li>
                    </ol>
                </div>

                <!-- See Also Section -->
                <div id="see-also" class="mt-8 bg-gray-50 p-4 rounded border border-gray-200">
                    <h3 class="text-lg font-bold mb-3 text-gray-800">همچنین ببینید</h3>
                    <div class="flex flex-wrap gap-2">
                        <a href="#" class="px-3 py-1 bg-white border border-gray-300 rounded text-sm hover:bg-blue-50 internal-link">امپراتوری هخامنشی</a>
                        <a href="#" class="px-3 py-1 bg-white border border-gray-300 rounded text-sm hover:bg-blue-50 internal-link">تخت جمشید</a>
                        <a href="#" class="px-3 py-1 bg-white border border-gray-300 rounded text-sm hover:bg-blue-50 internal-link">داریوش بزرگ</a>
                        <a href="#" class="px-3 py-1 bg-white border border-gray-300 rounded text-sm hover:bg-blue-50 internal-link">زبان فارسی باستان</a>
                    </div>
                </div>

            </div>

            <!-- Footer Info inside article -->
            <div class="mt-8 pt-4 border-t border-wiki-200 text-sm text-gray-600 flex justify-between items-center">
                <div>
                    آخرین بازبینی: ۲۴ مهر ۱۴۰۳
                </div>
                <div class="flex gap-2">
                    <button class="flex items-center gap-1 hover:bg-gray-100 p-2 rounded border border-gray-300 text-gray-700">
                        <i data-feather="share-2" class="w-4 h-4"></i> اشتراک‌گذاری
                    </button>
                    <button class="flex items-center gap-1 hover:bg-gray-100 p-2 rounded border border-gray-300 text-gray-700">
                        <i data-feather="printer" class="w-4 h-4"></i> چاپ
                    </button>
                </div>
            </div>

        </main>

        <!-- Table of Contents (Right side on desktop) -->
        <aside class="hidden xl:block w-56 shrink-0 order-3">
            <div class="bg-white border border-wiki-200 p-3 rounded sticky top-24 shadow-sm">
                <div class="font-bold text-sm mb-2 border-b border-gray-200 pb-2 text-gray-700">فهرست مطالب</div>
                <ul class="text-sm space-y-2">
                    <li><a href="#background" class="block hover:bg-gray-50 px-2 py-1 rounded internal-link">۱ پیش‌زمینه</a></li>
                    <li><a href="#conquests" class="block hover:bg-gray-50 px-2 py-1 rounded internal-link">۲ فتوحات</a></li>
                    <li><a href="#legacy" class="block hover:bg-gray-50 px-2 py-1 rounded internal-link">۳ میراث</a></li>
                    <li class="pl-4 text-gray-400">۳.۱ منشور کوروش</li>
                </ul>
            </div>
        </aside>

    </div>

    <!-- Footer -->
    <footer class="bg-wiki-100 border-t border-wiki-200 py-8 mt-8">
        <div class="container mx-auto px-4 text-center text-sm text-gray-600">
            <p class="mb-2">
                تمامی محتویات تحت مجوز <span class="font-bold">Creative Commons BY-SA</span> در دسترس است.
            </p>
            <p class="mb-4">
                <a href="#" class="hover:underline text-blue-600">حریم خصوصی</a> | 
                <a href="#" class="hover:underline text-blue-600">دربارهٔ دایره المعارف</a> | 
                <a href="#" class="hover:underline text-blue-600">سلب مسئولیت</a>
            </p>
            <div class="text-xs text-gray-400">
                قدرت گرفته از هوش مصنوعی
            </div>
        </div>
    </footer>

    <script src="script.js"></script>
    <script>
        feather.replace();
    </script>
</body>
</html>