Hugging Face's logo

Spaces:
Premkatwal7
/
katwal
Running

App Files Community
Premkatwal7 commited on
Commit
c140631
·
verified ·
1 Parent(s): 72d5b74

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +630 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Katwal
3
- emoji: 🌍
4
- colorFrom: green
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: katwal
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,630 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Learning from China's Economic Success</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
12
+ }
13
+ .chart-container {
14
+ height: 300px;
15
+ position: relative;
16
+ }
17
+ .timeline-item {
18
+ position: relative;
19
+ padding-left: 30px;
20
+ margin-bottom: 20px;
21
+ }
22
+ .timeline-item:before {
23
+ content: '';
24
+ position: absolute;
25
+ left: 0;
26
+ top: 5px;
27
+ width: 15px;
28
+ height: 15px;
29
+ border-radius: 50%;
30
+ background: #3b82f6;
31
+ }
32
+ .timeline-connector {
33
+ position: absolute;
34
+ left: 7px;
35
+ top: 20px;
36
+ bottom: -25px;
37
+ width: 2px;
38
+ background: #3b82f6;
39
+ }
40
+ .flip-card {
41
+ perspective: 1000px;
42
+ }
43
+ .flip-card-inner {
44
+ transition: transform 0.6s;
45
+ transform-style: preserve-3d;
46
+ }
47
+ .flip-card:hover .flip-card-inner {
48
+ transform: rotateY(180deg);
49
+ }
50
+ .flip-card-front, .flip-card-back {
51
+ backface-visibility: hidden;
52
+ }
53
+ .flip-card-back {
54
+ transform: rotateY(180deg);
55
+ }
56
+ </style>
57
+ </head>
58
+ <body class="gradient-bg min-h-screen">
59
+ <div class="container mx-auto px-4 py-8">
60
+ <!-- Header -->
61
+ <header class="text-center mb-12">
62
+ <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Learning from China's Economic Success</h1>
63
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Analyzing the drivers of China's growth and mutual learning opportunities between nations</p>
64
+ </header>
65
+
66
+ <!-- Introduction Section -->
67
+ <section class="bg-white rounded-xl shadow-lg p-6 mb-12">
68
+ <div class="flex flex-col md:flex-row items-center">
69
+ <div class="md:w-1/2 mb-6 md:mb-0 md:pr-8">
70
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">China's Economic Miracle</h2>
71
+ <p class="text-gray-600 mb-4">Since implementing economic reforms in 1978, China has transformed from a largely agrarian society into the world's second-largest economy, lifting hundreds of millions out of poverty in the process.</p>
72
+ <p class="text-gray-600">This remarkable growth offers valuable lessons for other developing nations seeking to accelerate their own economic development while maintaining social stability.</p>
73
+ </div>
74
+ <div class="md:w-1/2">
75
+ <div class="bg-blue-50 rounded-lg p-4">
76
+ <div class="flex justify-between items-center mb-2">
77
+ <h3 class="font-semibold text-blue-800">China GDP Growth (1978-2022)</h3>
78
+ <span class="text-sm text-blue-600"><i class="fas fa-chart-line mr-1"></i> Annual %</span>
79
+ </div>
80
+ <div class="chart-container">
81
+ <canvas id="growthChart"></canvas>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ </div>
86
+ </section>
87
+
88
+ <!-- Key Factors Section -->
89
+ <section class="mb-12">
90
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-8">Key Drivers of China's Economic Success</h2>
91
+
92
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
93
+ <!-- Card 1 -->
94
+ <div class="flip-card h-full">
95
+ <div class="flip-card-inner h-full rounded-xl shadow-lg">
96
+ <div class="flip-card-front bg-white p-6 rounded-xl h-full flex flex-col">
97
+ <div class="text-blue-500 text-4xl mb-4">
98
+ <i class="fas fa-industry"></i>
99
+ </div>
100
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Manufacturing Powerhouse</h3>
101
+ <p class="text-gray-600 flex-grow">China became the "world's factory" by developing massive industrial capacity and supply chain ecosystems.</p>
102
+ <button class="mt-4 text-blue-500 font-medium self-start">Learn more →</button>
103
+ </div>
104
+ <div class="flip-card-back bg-blue-600 text-white p-6 rounded-xl h-full flex flex-col justify-center">
105
+ <h3 class="text-xl font-bold mb-3">Manufacturing Strategy</h3>
106
+ <ul class="list-disc pl-5 space-y-1">
107
+ <li>Special Economic Zones attracted foreign investment</li>
108
+ <li>State-led development of industrial clusters</li>
109
+ <li>Gradual technology transfer policies</li>
110
+ <li>Massive infrastructure investment</li>
111
+ </ul>
112
+ </div>
113
+ </div>
114
+ </div>
115
+
116
+ <!-- Card 2 -->
117
+ <div class="flip-card h-full">
118
+ <div class="flip-card-inner h-full rounded-xl shadow-lg">
119
+ <div class="flip-card-front bg-white p-6 rounded-xl h-full flex flex-col">
120
+ <div class="text-green-500 text-4xl mb-4">
121
+ <i class="fas fa-graduation-cap"></i>
122
+ </div>
123
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Human Capital Development</h3>
124
+ <p class="text-gray-600 flex-grow">Massive investments in education created a skilled workforce to support economic modernization.</p>
125
+ <button class="mt-4 text-green-500 font-medium self-start">Learn more →</button>
126
+ </div>
127
+ <div class="flip-card-back bg-green-600 text-white p-6 rounded-xl h-full flex flex-col justify-center">
128
+ <h3 class="text-xl font-bold mb-3">Education Reforms</h3>
129
+ <ul class="list-disc pl-5 space-y-1">
130
+ <li>9-year compulsory education implemented</li>
131
+ <li>Massive expansion of higher education</li>
132
+ <li>Focus on STEM fields</li>
133
+ <li>Overseas study programs with return incentives</li>
134
+ </ul>
135
+ </div>
136
+ </div>
137
+ </div>
138
+
139
+ <!-- Card 3 -->
140
+ <div class="flip-card h-full">
141
+ <div class="flip-card-inner h-full rounded-xl shadow-lg">
142
+ <div class="flip-card-front bg-white p-6 rounded-xl h-full flex flex-col">
143
+ <div class="text-purple-500 text-4xl mb-4">
144
+ <i class="fas fa-route"></i>
145
+ </div>
146
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Strategic Planning</h3>
147
+ <p class="text-gray-600 flex-grow">Five-Year Plans provided clear direction while allowing flexibility to adapt to changing conditions.</p>
148
+ <button class="mt-4 text-purple-500 font-medium self-start">Learn more →</button>
149
+ </div>
150
+ <div class="flip-card-back bg-purple-600 text-white p-6 rounded-xl h-full flex flex-col justify-center">
151
+ <h3 class="text-xl font-bold mb-3">Planning Approach</h3>
152
+ <ul class="list-disc pl-5 space-y-1">
153
+ <li>Long-term vision with medium-term targets</li>
154
+ <li>Balanced regional development strategies</li>
155
+ <li>Gradual market liberalization</li>
156
+ <li>Pilot programs before nationwide rollout</li>
157
+ </ul>
158
+ </div>
159
+ </div>
160
+ </div>
161
+
162
+ <!-- Card 4 -->
163
+ <div class="flip-card h-full">
164
+ <div class="flip-card-inner h-full rounded-xl shadow-lg">
165
+ <div class="flip-card-front bg-white p-6 rounded-xl h-full flex flex-col">
166
+ <div class="text-yellow-500 text-4xl mb-4">
167
+ <i class="fas fa-globe-asia"></i>
168
+ </div>
169
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Global Integration</h3>
170
+ <p class="text-gray-600 flex-grow">WTO accession and export-oriented policies connected China to global markets.</p>
171
+ <button class="mt-4 text-yellow-500 font-medium self-start">Learn more →</button>
172
+ </div>
173
+ <div class="flip-card-back bg-yellow-600 text-white p-6 rounded-xl h-full flex flex-col justify-center">
174
+ <h3 class="text-xl font-bold mb-3">Globalization Strategy</h3>
175
+ <ul class="list-disc pl-5 space-y-1">
176
+ <li>Phased approach to trade liberalization</li>
177
+ <li>Currency management policies</li>
178
+ <li>Belt and Road Initiative for connectivity</li>
179
+ <li>Dual circulation strategy</li>
180
+ </ul>
181
+ </div>
182
+ </div>
183
+ </div>
184
+
185
+ <!-- Card 5 -->
186
+ <div class="flip-card h-full">
187
+ <div class="flip-card-inner h-full rounded-xl shadow-lg">
188
+ <div class="flip-card-front bg-white p-6 rounded-xl h-full flex flex-col">
189
+ <div class="text-red-500 text-4xl mb-4">
190
+ <i class="fas fa-lightbulb"></i>
191
+ </div>
192
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Innovation Ecosystem</h3>
193
+ <p class="text-gray-600 flex-grow">From imitation to innovation, China built research capacity and tech champions.</p>
194
+ <button class="mt-4 text-red-500 font-medium self-start">Learn more →</button>
195
+ </div>
196
+ <div class="flip-card-back bg-red-600 text-white p-6 rounded-xl h-full flex flex-col justify-center">
197
+ <h3 class="text-xl font-bold mb-3">Innovation Policies</h3>
198
+ <ul class="list-disc pl-5 space-y-1">
199
+ <li>Massive R&D investment growth</li>
200
+ <li>Made in China 2025 industrial policy</li>
201
+ <li>Technology parks and incubators</li>
202
+ <li>Venture capital ecosystem development</li>
203
+ </ul>
204
+ </div>
205
+ </div>
206
+ </div>
207
+
208
+ <!-- Card 6 -->
209
+ <div class="flip-card h-full">
210
+ <div class="flip-card-inner h-full rounded-xl shadow-lg">
211
+ <div class="flip-card-front bg-white p-6 rounded-xl h-full flex flex-col">
212
+ <div class="text-indigo-500 text-4xl mb-4">
213
+ <i class="fas fa-balance-scale"></i>
214
+ </div>
215
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Political Stability</h3>
216
+ <p class="text-gray-600 flex-grow">Consistent policy direction created favorable conditions for long-term investments.</p>
217
+ <button class="mt-4 text-indigo-500 font-medium self-start">Learn more →</button>
218
+ </div>
219
+ <div class="flip-card-back bg-indigo-600 text-white p-6 rounded-xl h-full flex flex-col justify-center">
220
+ <h3 class="text-xl font-bold mb-3">Governance Model</h3>
221
+ <ul class="list-disc pl-5 space-y-1">
222
+ <li>Meritocratic bureaucracy</li>
223
+ <li>Performance-based local official evaluation</li>
224
+ <li>Balanced approach to reform/opening vs stability</li>
225
+ <li>Anti-corruption campaigns</li>
226
+ </ul>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </section>
232
+
233
+ <!-- Timeline Section -->
234
+ <section class="bg-white rounded-xl shadow-lg p-8 mb-12">
235
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-8">China's Economic Reform Timeline</h2>
236
+
237
+ <div class="max-w-3xl mx-auto">
238
+ <!-- 1978-1989 -->
239
+ <div class="timeline-item">
240
+ <div class="timeline-connector"></div>
241
+ <div class="bg-blue-50 rounded-lg p-4">
242
+ <div class="flex justify-between items-start mb-2">
243
+ <h3 class="text-xl font-bold text-blue-800">Initial Reforms (1978-1989)</h3>
244
+ <span class="bg-blue-100 text-blue-800 text-sm px-2 py-1 rounded">First Phase</span>
245
+ </div>
246
+ <ul class="list-disc pl-5 text-gray-700 space-y-1">
247
+ <li>Household Responsibility System in agriculture</li>
248
+ <li>Creation of Special Economic Zones (SEZs)</li>
249
+ <li>Dual-track pricing system</li>
250
+ <li>TVEs (Township and Village Enterprises) emerge</li>
251
+ </ul>
252
+ </div>
253
+ </div>
254
+
255
+ <!-- 1990-2001 -->
256
+ <div class="timeline-item">
257
+ <div class="timeline-connector"></div>
258
+ <div class="bg-green-50 rounded-lg p-4">
259
+ <div class="flex justify-between items-start mb-2">
260
+ <h3 class="text-xl font-bold text-green-800">Market Transition (1990-2001)</h3>
261
+ <span class="bg-green-100 text-green-800 text-sm px-2 py-1 rounded">Second Phase</span>
262
+ </div>
263
+ <ul class="list-disc pl-5 text-gray-700 space-y-1">
264
+ <li>Price liberalization for most goods</li>
265
+ <li>SOE (State-Owned Enterprise) reforms</li>
266
+ <li>Private sector officially recognized</li>
267
+ <li>Preparation for WTO accession</li>
268
+ </ul>
269
+ </div>
270
+ </div>
271
+
272
+ <!-- 2001-2012 -->
273
+ <div class="timeline-item">
274
+ <div class="timeline-connector"></div>
275
+ <div class="bg-yellow-50 rounded-lg p-4">
276
+ <div class="flex justify-between items-start mb-2">
277
+ <h3 class="text-xl font-bold text-yellow-800">Global Integration (2001-2012)</h3>
278
+ <span class="bg-yellow-100 text-yellow-800 text-sm px-2 py-1 rounded">Third Phase</span>
279
+ </div>
280
+ <ul class="list-disc pl-5 text-gray-700 space-y-1">
281
+ <li>WTO membership accelerates export growth</li>
282
+ <li>Massive infrastructure investment</li>
283
+ <li>Urbanization and real estate boom</li>
284
+ <li>Global financial crisis response</li>
285
+ </ul>
286
+ </div>
287
+ </div>
288
+
289
+ <!-- 2013-Present -->
290
+ <div class="timeline-item">
291
+ <div class="bg-red-50 rounded-lg p-4">
292
+ <div class="flex justify-between items-start mb-2">
293
+ <h3 class="text-xl font-bold text-red-800">New Normal (2013-Present)</h3>
294
+ <span class="bg-red-100 text-red-800 text-sm px-2 py-1 rounded">Current Phase</span>
295
+ </div>
296
+ <ul class="list-disc pl-5 text-gray-700 space-y-1">
297
+ <li>Shift to domestic consumption and services</li>
298
+ <li>Belt and Road Initiative launched</li>
299
+ <li>Focus on technological self-sufficiency</li>
300
+ <li>Common prosperity and green development</li>
301
+ </ul>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </section>
306
+
307
+ <!-- Mutual Learning Section -->
308
+ <section class="bg-blue-600 rounded-xl shadow-lg p-8 mb-12 text-white">
309
+ <h2 class="text-3xl font-bold text-center mb-8">Mutual Learning Opportunities</h2>
310
+
311
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
312
+ <!-- What China Can Learn -->
313
+ <div class="bg-white bg-opacity-10 rounded-lg p-6 backdrop-blur-sm">
314
+ <h3 class="text-2xl font-bold mb-4 flex items-center">
315
+ <i class="fas fa-exchange-alt mr-3"></i> What China Can Learn
316
+ </h3>
317
+ <ul class="space-y-3">
318
+ <li class="flex items-start">
319
+ <i class="fas fa-check-circle mt-1 mr-3 text-green-200"></i>
320
+ <span>Advanced innovation ecosystems from Silicon Valley and other tech hubs</span>
321
+ </li>
322
+ <li class="flex items-start">
323
+ <i class="fas fa-check-circle mt-1 mr-3 text-green-200"></i>
324
+ <span>Financial market sophistication from Western economies</span>
325
+ </li>
326
+ <li class="flex items-start">
327
+ <i class="fas fa-check-circle mt-1 mr-3 text-green-200"></i>
328
+ <span>Environmental protection technologies from Europe</span>
329
+ </li>
330
+ <li class="flex items-start">
331
+ <i class="fas fa-check-circle mt-1 mr-3 text-green-200"></i>
332
+ <span>Social welfare systems from Nordic countries</span>
333
+ </li>
334
+ <li class="flex items-start">
335
+ <i class="fas fa-check-circle mt-1 mr-3 text-green-200"></i>
336
+ <span>Agricultural productivity techniques from Israel and Netherlands</span>
337
+ </li>
338
+ </ul>
339
+ </div>
340
+
341
+ <!-- What Other Countries Can Learn -->
342
+ <div class="bg-white bg-opacity-10 rounded-lg p-6 backdrop-blur-sm">
343
+ <h3 class="text-2xl font-bold mb-4 flex items-center">
344
+ <i class="fas fa-exchange-alt mr-3"></i> What Other Countries Can Learn
345
+ </h3>
346
+ <ul class="space-y-3">
347
+ <li class="flex items-start">
348
+ <i class="fas fa-check-circle mt-1 mr-3 text-green-200"></i>
349
+ <span>Long-term strategic planning and implementation capacity</span>
350
+ </li>
351
+ <li class="flex items-start">
352
+ <i class="fas fa-check-circle mt-1 mr-3 text-green-200"></i>
353
+ <span>Large-scale infrastructure development approaches</span>
354
+ </li>
355
+ <li class="flex items-start">
356
+ <i class="fas fa-check-circle mt-1 mr-3 text-green-200"></i>
357
+ <span>Pragmatic experimentation with pilot programs</span>
358
+ </li>
359
+ <li class="flex items-start">
360
+ <i class="fas fa-check-circle mt-1 mr-3 text-green-200"></i>
361
+ <span>Human capital development at scale</span>
362
+ </li>
363
+ <li class="flex items-start">
364
+ <i class="fas fa-check-circle mt-1 mr-3 text-green-200"></i>
365
+ <span>Digital economy governance models</span>
366
+ </li>
367
+ </ul>
368
+ </div>
369
+ </div>
370
+ </section>
371
+
372
+ <!-- Country Comparison Tool -->
373
+ <section class="bg-white rounded-xl shadow-lg p-8 mb-12">
374
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-8">Compare With Your Country</h2>
375
+
376
+ <div class="max-w-2xl mx-auto">
377
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
378
+ <div>
379
+ <label class="block text-gray-700 font-medium mb-2">Select Your Country</label>
380
+ <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
381
+ <option>United States</option>
382
+ <option>India</option>
383
+ <option>Brazil</option>
384
+ <option>Nigeria</option>
385
+ <option>Indonesia</option>
386
+ <option>Vietnam</option>
387
+ </select>
388
+ </div>
389
+ <div>
390
+ <label class="block text-gray-700 font-medium mb-2">Comparison Metric</label>
391
+ <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
392
+ <option>GDP Growth Rate</option>
393
+ <option>Manufacturing Output</option>
394
+ <option>R&D Investment</option>
395
+ <option>Infrastructure Quality</option>
396
+ <option>Education Attainment</option>
397
+ </select>
398
+ </div>
399
+ </div>
400
+
401
+ <div class="bg-gray-50 rounded-lg p-6">
402
+ <div class="flex justify-between items-center mb-4">
403
+ <h3 class="font-semibold text-gray-800">Comparison Results: China vs [Your Country]</h3>
404
+ <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition">
405
+ <i class="fas fa-download mr-2"></i> Export Data
406
+ </button>
407
+ </div>
408
+ <div class="chart-container">
409
+ <canvas id="comparisonChart"></canvas>
410
+ </div>
411
+ </div>
412
+ </div>
413
+ </section>
414
+
415
+ <!-- Conclusion -->
416
+ <section class="bg-gray-800 text-white rounded-xl shadow-lg p-8">
417
+ <h2 class="text-3xl font-bold text-center mb-6">Key Takeaways</h2>
418
+ <div class="max-w-3xl mx-auto">
419
+ <div class="space-y-4">
420
+ <p>China's economic success demonstrates that development paths must be tailored to each country's unique historical, cultural and institutional context.</p>
421
+ <p>While specific policies may not be directly transferable, the underlying principles of pragmatic experimentation, long-term planning, and balanced reform sequencing offer valuable insights.</p>
422
+ <p>The most effective approach for any nation is selective adaptation - learning from China's experience while developing solutions appropriate to local conditions.</p>
423
+ </div>
424
+ <div class="mt-8 text-center">
425
+ <button id="quizBtn" class="bg-yellow-400 text-gray-900 font-bold px-6 py-3 rounded-lg hover:bg-yellow-500 transition">
426
+ <i class="fas fa-question-circle mr-2"></i> Test Your Knowledge
427
+ </button>
428
+ </div>
429
+ </div>
430
+ </section>
431
+ </div>
432
+
433
+ <!-- Quiz Modal -->
434
+ <div id="quizModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
435
+ <div class="bg-white rounded-xl p-8 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
436
+ <div class="flex justify-between items-center mb-6">
437
+ <h3 class="text-2xl font-bold text-gray-800">China's Economic Development Quiz</h3>
438
+ <button id="closeQuiz" class="text-gray-500 hover:text-gray-700">
439
+ <i class="fas fa-times"></i>
440
+ </button>
441
+ </div>
442
+
443
+ <div class="space-y-6">
444
+ <!-- Question 1 -->
445
+ <div>
446
+ <p class="font-medium text-gray-800 mb-3">1. What was the first major economic reform implemented in China in 1978?</p>
447
+ <div class="space-y-2">
448
+ <label class="flex items-center space-x-3">
449
+ <input type="radio" name="q1" class="h-4 w-4 text-blue-600">
450
+ <span>Privatization of state-owned enterprises</span>
451
+ </label>
452
+ <label class="flex items-center space-x-3">
453
+ <input type="radio" name="q1" class="h-4 w-4 text-blue-600">
454
+ <span>Household Responsibility System in agriculture</span>
455
+ </label>
456
+ <label class="flex items-center space-x-3">
457
+ <input type="radio" name="q1" class="h-4 w-4 text-blue-600">
458
+ <span>Establishment of stock markets</span>
459
+ </label>
460
+ <label class="flex items-center space-x-3">
461
+ <input type="radio" name="q1" class="h-4 w-4 text-blue-600">
462
+ <span>Free floating of the currency</span>
463
+ </label>
464
+ </div>
465
+ </div>
466
+
467
+ <!-- Question 2 -->
468
+ <div>
469
+ <p class="font-medium text-gray-800 mb-3">2. Which of these was NOT a key factor in China's economic success?</p>
470
+ <div class="space-y-2">
471
+ <label class="flex items-center space-x-3">
472
+ <input type="radio" name="q2" class="h-4 w-4 text-blue-600">
473
+ <span>Gradual reform approach</span>
474
+ </label>
475
+ <label class="flex items-center space-x-3">
476
+ <input type="radio" name="q2" class="h-4 w-4 text-blue-600">
477
+ <span>Massive infrastructure investment</span>
478
+ </label>
479
+ <label class="flex items-center space-x-3">
480
+ <input type="radio" name="q2" class="h-4 w-4 text-blue-600">
481
+ <span>Immediate full democratization</span>
482
+ </label>
483
+ <label class="flex items-center space-x-3">
484
+ <input type="radio" name="q2" class="h-4 w-4 text-blue-600">
485
+ <span>Export-oriented industrialization</span>
486
+ </label>
487
+ </div>
488
+ </div>
489
+
490
+ <!-- Question 3 -->
491
+ <div>
492
+ <p class="font-medium text-gray-800 mb-3">3. What is the most important lesson other developing countries can learn from China's experience?</p>
493
+ <div class="space-y-2">
494
+ <label class="flex items-center space-x-3">
495
+ <input type="radio" name="q3" class="h-4 w-4 text-blue-600">
496
+ <span>The need to copy China's political system</span>
497
+ </label>
498
+ <label class="flex items-center space-x-3">
499
+ <input type="radio" name="q3" class="h-4 w-4 text-blue-600">
500
+ <span>The importance of pragmatic, context-specific reforms</span>
501
+ </label>
502
+ <label class="flex items-center space-x-3">
503
+ <input type="radio" name="q3" class="h-4 w-4 text-blue-600">
504
+ <span>That rapid liberalization always works best</span>
505
+ </label>
506
+ <label class="flex items-center space-x-3">
507
+ <input type="radio" name="q3" class="h-4 w-4 text-blue-600">
508
+ <span>That foreign aid is essential for development</span>
509
+ </label>
510
+ </div>
511
+ </div>
512
+
513
+ <button class="w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition">
514
+ Submit Answers
515
+ </button>
516
+ </div>
517
+ </div>
518
+ </div>
519
+
520
+ <!-- Footer -->
521
+ <footer class="bg-gray-900 text-white py-8">
522
+ <div class="container mx-auto px-4">
523
+ <div class="flex flex-col md:flex-row justify-between items-center">
524
+ <div class="mb-4 md:mb-0">
525
+ <p class="text-gray-400">© 2023 Economic Development Research</p>
526
+ </div>
527
+ <div class="flex space-x-6">
528
+ <a href="#" class="text-gray-400 hover:text-white transition">
529
+ <i class="fab fa-twitter text-xl"></i>
530
+ </a>
531
+ <a href="#" class="text-gray-400 hover:text-white transition">
532
+ <i class="fab fa-linkedin text-xl"></i>
533
+ </a>
534
+ <a href="#" class="text-gray-400 hover:text-white transition">
535
+ <i class="fas fa-envelope text-xl"></i>
536
+ </a>
537
+ </div>
538
+ </div>
539
+ </div>
540
+ </footer>
541
+
542
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
543
+ <script>
544
+ // Growth Chart
545
+ const growthCtx = document.getElementById('growthChart').getContext('2d');
546
+ const growthChart = new Chart(growthCtx, {
547
+ type: 'line',
548
+ data: {
549
+ labels: ['1978', '1985', '1990', '1995', '2000', '2005', '2010', '2015', '2020', '2022'],
550
+ datasets: [{
551
+ label: 'GDP Growth (%)',
552
+ data: [11.7, 13.5, 3.9, 10.9, 8.5, 11.4, 10.6, 7.0, 2.2, 3.0],
553
+ borderColor: 'rgb(59, 130, 246)',
554
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
555
+ tension: 0.3,
556
+ fill: true
557
+ }]
558
+ },
559
+ options: {
560
+ responsive: true,
561
+ plugins: {
562
+ legend: {
563
+ display: false
564
+ }
565
+ },
566
+ scales: {
567
+ y: {
568
+ beginAtZero: false
569
+ }
570
+ }
571
+ }
572
+ });
573
+
574
+ // Comparison Chart
575
+ const comparisonCtx = document.getElementById('comparisonChart').getContext('2d');
576
+ const comparisonChart = new Chart(comparisonCtx, {
577
+ type: 'bar',
578
+ data: {
579
+ labels: ['China', 'Your Country'],
580
+ datasets: [{
581
+ label: 'GDP Growth Rate (%)',
582
+ data: [5.2, 2.1],
583
+ backgroundColor: [
584
+ 'rgba(59, 130, 246, 0.8)',
585
+ 'rgba(75, 192, 192, 0.8)'
586
+ ],
587
+ borderColor: [
588
+ 'rgba(59, 130, 246, 1)',
589
+ 'rgba(75, 192, 192, 1)'
590
+ ],
591
+ borderWidth: 1
592
+ }]
593
+ },
594
+ options: {
595
+ responsive: true,
596
+ plugins: {
597
+ legend: {
598
+ display: false
599
+ }
600
+ },
601
+ scales: {
602
+ y: {
603
+ beginAtZero: true
604
+ }
605
+ }
606
+ }
607
+ });
608
+
609
+ // Quiz Modal
610
+ const quizBtn = document.getElementById('quizBtn');
611
+ const quizModal = document.getElementById('quizModal');
612
+ const closeQuiz = document.getElementById('closeQuiz');
613
+
614
+ quizBtn.addEventListener('click', () => {
615
+ quizModal.classList.remove('hidden');
616
+ });
617
+
618
+ closeQuiz.addEventListener('click', () => {
619
+ quizModal.classList.add('hidden');
620
+ });
621
+
622
+ // Close modal when clicking outside
623
+ window.addEventListener('click', (e) => {
624
+ if (e.target === quizModal) {
625
+ quizModal.classList.add('hidden');
626
+ }
627
+ });
628
+ </script>
629
+ <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=Premkatwal7/katwal" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
630
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ lf you were the president of your country, whatwould you like to learn from China's economicdevelopment? Assignment: summarize the causes of China's“economic success" and analyze what China andyour own country can learn from each other.