Hugging Face's logo

Spaces:
TopBoss
/
minimalist-russia-map
Running

App Files Community
TopBoss commited on
Commit
d71ab49
·
verified ·
1 Parent(s): ec5ca23

i want you to create a clean minimalist website with a map of russia(pre 2022), the website should include the map and nothing else, no buttons no headers no tabs no navigation tools no logos no text no banner, the map is divided into each oblast of russia with the capital city of each oblast shown, other cities are not shown, the map is minimalistic

Browse files
Files changed (4) hide show
  1. README.md +8 -5
  2. index.html +322 -19
  3. script.js +42 -0
  4. style.css +45 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Minimalist Russia Map
3
- emoji: 🌖
4
- colorFrom: pink
5
- colorTo: yellow
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: Minimalist Russia Map 🗺️
3
+ colorFrom: gray
4
+ colorTo: pink
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
index.html CHANGED
@@ -1,19 +1,322 @@
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>Russia Oblast Map</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ </head>
10
+ <body class="bg-white min-h-screen flex items-center justify-center p-4">
11
+ <div class="w-full max-w-7xl">
12
+ <svg viewBox="0 0 1200 800" class="w-full h-auto" xmlns="http://www.w3.org/2000/svg">
13
+ <defs>
14
+ <style>
15
+ .oblast {
16
+ fill: #f5f5f5;
17
+ stroke: #e5e5e5;
18
+ stroke-width: 1;
19
+ transition: all 0.3s ease;
20
+ cursor: pointer;
21
+ }
22
+ .oblast:hover {
23
+ fill: #e0e0e0;
24
+ stroke: #d0d0d0;
25
+ stroke-width: 1.5;
26
+ }
27
+ .capital {
28
+ fill: #525252;
29
+ font-size: 11px;
30
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
31
+ font-weight: 500;
32
+ pointer-events: none;
33
+ }
34
+ .capital-dot {
35
+ fill: #737373;
36
+ }
37
+ </style>
38
+ </defs>
39
+
40
+ <!-- Western Russia -->
41
+ <!-- Moscow Oblast -->
42
+ <path class="oblast" d="M 620 280 L 680 275 L 685 320 L 675 340 L 640 345 L 615 320 Z"/>
43
+ <circle class="capital-dot" cx="652" cy="305" r="3"/>
44
+ <text class="capital" x="660" y="308">Moscow</text>
45
+
46
+ <!-- Saint Petersburg -->
47
+ <path class="oblast" d="M 580 180 L 620 175 L 625 210 L 610 225 L 585 220 L 575 195 Z"/>
48
+ <circle class="capital-dot" cx="600" cy="198" r="3"/>
49
+ <text class="capital" x="608" y="201">Saint Petersburg</text>
50
+
51
+ <!-- Kaliningrad Oblast -->
52
+ <path class="oblast" d="M 480 210 L 520 205 L 525 235 L 515 250 L 490 245 L 475 225 Z"/>
53
+ <circle class="capital-dot" cx="500" cy="228" r="3"/>
54
+ <text class="capital" x="508" y="231">Kaliningrad</text>
55
+
56
+ <!-- Northwestern -->
57
+ <!-- Novgorod Oblast -->
58
+ <path class="oblast" d="M 560 240 L 600 235 L 605 265 L 595 280 L 570 275 L 555 255 Z"/>
59
+ <circle class="capital-dot" cx="578" cy="258" r="3"/>
60
+ <text class="capital" x="586" y="261">Novgorod</text>
61
+
62
+ <!-- Pskov Oblast -->
63
+ <path class="oblast" d="M 540 260 L 580 255 L 585 285 L 575 300 L 550 295 L 535 275 Z"/>
64
+ <circle class="capital-dot" cx="558" cy="278" r="3"/>
65
+ <text class="capital" x="566" y="281">Pskov</text>
66
+
67
+ <!-- Tver Oblast -->
68
+ <path class="oblast" d="M 600 220 L 640 215 L 645 250 L 635 265 L 610 260 L 595 240 Z"/>
69
+ <circle class="capital-dot" cx="618" cy="243" r="3"/>
70
+ <text class="capital" x="626" y="246">Tver</text>
71
+
72
+ <!-- Central -->
73
+ <!-- Tula Oblast -->
74
+ <path class="oblast" d="M 640 340 L 680 335 L 685 365 L 675 380 L 650 375 L 635 355 Z"/>
75
+ <circle class="capital-dot" cx="658" cy="358" r="3"/>
76
+ <text class="capital" x="666" y="361">Tula</text>
77
+
78
+ <!-- Ryazan Oblast -->
79
+ <path class="oblast" d="M 680 330 L 720 325 L 725 355 L 715 370 L 690 365 L 675 345 Z"/>
80
+ <circle class="capital-dot" cx="698" cy="348" r="3"/>
81
+ <text class="capital" x="706" y="351">Ryazan</text>
82
+
83
+ <!-- Vladimir Oblast -->
84
+ <path class="oblast" d="M 700 290 L 740 285 L 745 315 L 735 330 L 710 325 L 695 305 Z"/>
85
+ <circle class="capital-dot" cx="718" cy="308" r="3"/>
86
+ <text class="capital" x="726" y="311">Vladimir</text>
87
+
88
+ <!-- Ivanovo Oblast -->
89
+ <path class="oblast" d="M 720 260 L 760 255 L 765 285 L 755 300 L 730 295 L 715 275 Z"/>
90
+ <circle class="capital-dot" cx="738" cy="278" r="3"/>
91
+ <text class="capital" x="746" y="281">Ivanovo</text>
92
+
93
+ <!-- Yaroslavl Oblast -->
94
+ <path class="oblast" d="M 680 240 L 720 235 L 725 265 L 715 280 L 690 275 L 675 255 Z"/>
95
+ <circle class="capital-dot" cx="698" cy="258" r="3"/>
96
+ <text class="capital" x="706" y="261">Yaroslavl</text>
97
+
98
+ <!-- Kostroma Oblast -->
99
+ <path class="oblast" d="M 740 240 L 780 235 L 785 265 L 775 280 L 750 275 L 735 255 Z"/>
100
+ <circle class="capital-dot" cx="758" cy="258" r="3"/>
101
+ <text class="capital" x="766" y="261">Kostroma</text>
102
+
103
+ <!-- Southern -->
104
+ <!-- Voronezh Oblast -->
105
+ <path class="oblast" d="M 620 420 L 660 415 L 665 445 L 655 460 L 630 455 L 615 435 Z"/>
106
+ <circle class="capital-dot" cx="638" cy="438" r="3"/>
107
+ <text class="capital" x="646" y="441">Voronezh</text>
108
+
109
+ <!-- Lipetsk Oblast -->
110
+ <path class="oblast" d="M 640 390 L 680 385 L 685 415 L 675 430 L 650 425 L 635 405 Z"/>
111
+ <circle class="capital-dot" cx="658" cy="408" r="3"/>
112
+ <text class="capital" x="666" y="411">Lipetsk</text>
113
+
114
+ <!-- Tambov Oblast -->
115
+ <path class="oblast" d="M 660 450 L 700 445 L 705 475 L 695 490 L 670 485 L 655 465 Z"/>
116
+ <circle class="capital-dot" cx="678" cy="468" r="3"/>
117
+ <text class="capital" x="686" y="471">Tambov</text>
118
+
119
+ <!-- Belgorod Oblast -->
120
+ <path class="oblast" d="M 580 440 L 620 435 L 625 465 L 615 480 L 590 475 L 575 455 Z"/>
121
+ <circle class="capital-dot" cx="598" cy="458" r="3"/>
122
+ <text class="capital" x="606" y="461">Belgorod</text>
123
+
124
+ <!-- Kursk Oblast -->
125
+ <path class="oblast" d="M 580 410 L 620 405 L 625 435 L 615 450 L 590 445 L 575 425 Z"/>
126
+ <circle class="capital-dot" cx="598" cy="428" r="3"/>
127
+ <text class="capital" x="606" y="431">Kursk</text>
128
+
129
+ <!-- Oryol Oblast -->
130
+ <path class="oblast" d="M 600 380 L 640 375 L 645 405 L 635 420 L 610 415 L="595 395 Z"/>
131
+ <circle class="capital-dot" cx="618" cy="398" r="3"/>
132
+ <text class="capital" x="626" y="401">Oryol</text>
133
+
134
+ <!-- Bryansk Oblast -->
135
+ <path class="oblast" d="M 560 390 L 600 385 L 605 415 L 595 430 L 570 425 L 555 405 Z"/>
136
+ <circle class="capital-dot" cx="578" cy="408" r="3"/>
137
+ <text class="capital" x="586" y="411">Bryansk</text>
138
+
139
+ <!-- Volga -->
140
+ <!-- Nizhny Novgorod Oblast -->
141
+ <path class="oblast" d="M 700 320 L 740 315 L 745 345 L 735 360 L 710 355 L 695 335 Z"/>
142
+ <circle class="capital-dot" cx="718" cy="338" r="3"/>
143
+ <text class="capital" x="726" y="341">Nizhny Novgorod</text>
144
+
145
+ <!-- Kazan (Tatarstan) -->
146
+ <path class="oblast" d="M 720 360 L 760 355 L 765 385 L 755 400 L 730 395 L 715 375 Z"/>
147
+ <circle class="capital-dot" cx="738" cy="378" r="3"/>
148
+ <text class="capital" x="746" y="381">Kazan</text>
149
+
150
+ <!-- Ulyanovsk Oblast -->
151
+ <path class="oblast" d="M 700 420 L 740 415 L 745 445 L 735 460 L 710 455 L 695 435 Z"/>
152
+ <circle class="capital-dot" cx="718" cy="438" r="3"/>
153
+ <text class="capital" x="726" y="441">Ulyanovsk</text>
154
+
155
+ <!-- Samara Oblast -->
156
+ <path class="oblast" d="M 720 450 L 760 445 L 765 475 L 755 490 L 730 485 L 715 465 Z"/>
157
+ <circle class="capital-dot" cx="738" cy="468" r="3"/>
158
+ <text class="capital" x="746" y="471">Samara</text>
159
+
160
+ <!-- Saratov Oblast -->
161
+ <path class="oblast" d="M 680 480 L 720 475 L 725 505 L 715 520 L 690 515 L 675 495 Z"/>
162
+ <circle class="capital-dot" cx="698" cy="498" r="3"/>
163
+ <text class="capital" x="706" y="501">Saratov</text>
164
+
165
+ <!-- Volgograd Oblast -->
166
+ <path class="oblast" d="M 640 510 L 680 505 L 685 535 L 675 550 L 650 545 L 635 525 Z"/>
167
+ <circle class="capital-dot" cx="658" cy="528" r="3"/>
168
+ <text class="capital" x="666" y="531">Volgograd</text>
169
+
170
+ <!-- Penza Oblast -->
171
+ <path class="oblast" d="M 700 480 L 740 475 L 745 505 L 735 520 L 710 515 L 695 495 Z"/>
172
+ <circle class="capital-dot" cx="718" cy="498" r="3"/>
173
+ <text class="capital" x="726" y="501">Penza</text>
174
+
175
+ <!-- Ural -->
176
+ <!-- Yekaterinburg (Sverdlovsk) -->
177
+ <path class="oblast" d="M 780 280 L 820 275 L 825 305 L 815 320 L 790 315 L 775 295 Z"/>
178
+ <circle class="capital-dot" cx="798" cy="298" r="3"/>
179
+ <text class="capital" x="806" y="301">Yekaterinburg</text>
180
+
181
+ <!-- Chelyabinsk Oblast -->
182
+ <path class="oblast" d="M 820 320 L 860 315 L 865 345 L 855 360 L 830 355 L 815 335 Z"/>
183
+ <circle class="capital-dot" cx="838" cy="338" r="3"/>
184
+ <text class="capital" x="846" y="341">Chelyabinsk</text>
185
+
186
+ <!-- Orenburg Oblast -->
187
+ <path class="oblast" d="M 780 400 L 820 395 L 825 425 L 815 440 L 790 435 L 775 415 Z"/>
188
+ <circle class="capital-dot" cx="798" cy="418" r="3"/>
189
+ <text class="capital" x="806" y="421">Orenburg</text>
190
+
191
+ <!-- Kurgan Oblast -->
192
+ <path class="oblast" d="M 840 280 L 880 275 L 885 305 L 875 320 L 850 315 L 835 295 Z"/>
193
+ <circle class="capital-dot" cx="858" cy="298" r="3"/>
194
+ <text class="capital" x="866" y="301">Kurgan</text>
195
+
196
+ <!-- Perm Krai -->
197
+ <path class="oblast" d="M 840 240 L 880 235 L 885 265 L 875 280 L 850 275 L 835 255 Z"/>
198
+ <circle class="capital-dot" cx="858" cy="258" r="3"/>
199
+ <text class="capital" x="866" y="261">Perm</text>
200
+
201
+ <!-- Udmurt Republic -->
202
+ <path class="oblast" d="M 780 240 L 820 235 L 825 265 L 815 280 L 790 275 L 775 255 Z"/>
203
+ <circle class="capital-dot" cx="798" cy="258" r="3"/>
204
+ <text class="capital" x="806" y="261">Izhevsk</text>
205
+
206
+ <!-- Bashkortostan -->
207
+ <path class="oblast" d="M 760 320 L 800 315 L 805 345 L 795 360 L 770 355 L 755 335 Z"/>
208
+ <circle class="capital-dot" cx="778" cy="338" r="3"/>
209
+ <text class="capital" x="786" y="341">Ufa</text>
210
+
211
+ <!-- Siberia -->
212
+ <!-- Omsk Oblast -->
213
+ <path class="oblast" d="M 880 320 L 920 315 L 925 345 L 915 360 L 890 355 L 875 335 Z"/>
214
+ <circle class="capital-dot" cx="898" cy="338" r="3"/>
215
+ <text class="capital" x="906" y="341">Omsk</text>
216
+
217
+ <!-- Novosibirsk Oblast -->
218
+ <path class="oblast" d="M 920 320 L 960 315 L 965 345 L 955 360 L 930 355 L 915 335 Z"/>
219
+ <circle class="capital-dot" cx="938" cy="338" r="3"/>
220
+ <text class="capital" x="946" y="341">Novosibirsk</text>
221
+
222
+ <!-- Kemerovo Oblast -->
223
+ <path class="oblast" d="M 960 340 L 1000 335 L 1005 365 L 995 380 L 970 375 L 955 355 Z"/>
224
+ <circle class="capital-dot" cx="978" cy="358" r="3"/>
225
+ <text class="capital" x="986" y="361">Kemerovo</text>
226
+
227
+ <!-- Tomsk Oblast -->
228
+ <path class="oblast" d="M 920 360 L 960 355 L 965 385 L 955 400 L 930 395 L 915 375 Z"/>
229
+ <circle class="capital-dot" cx="938" cy="378" r="3"/>
230
+ <text class="capital" x="946" y="381">Tomsk</text>
231
+
232
+ <!-- Krasnoyarsk Krai -->
233
+ <path class="oblast" d="M 1000 280 L 1080 275 L 1085 365 L 1075 380 L 1010 375 L 995 295 Z"/>
234
+ <circle class="capital-dot" cx="1040" cy="328" r="3"/>
235
+ <text class="capital" x="1048" y="331">Krasnoyarsk</text>
236
+
237
+ <!-- Irkutsk Oblast -->
238
+ <path class="oblast" d="M 1080 360 L 1140 355 L 1145 405 L 1135 420 L 1090 415 L 1075 375 Z"/>
239
+ <circle class="capital-dot" cx="1110" cy="388" r="3"/>
240
+ <text class="capital" x="1118" y="391">Irkutsk</text>
241
+
242
+ <!-- Far East -->
243
+ <!-- Yakutsk (Sakha Republic) -->
244
+ <path class="oblast" d="M 1080 420 L 1180 415 L 1185 520 L 1175 535 L 1090 530 L 1075 435 Z"/>
245
+ <circle class="capital-dot" cx="1130" cy="473" r="3"/>
246
+ <text class="capital" x="1138" y="476">Yakutsk</text>
247
+
248
+ <!-- Primorsky Krai -->
249
+ <path class="oblast" d="M 1140 520 L 1200 515 L 1205 545 L 1195 560 L 1150 555 L 1135 535 Z"/>
250
+ <circle class="capital-dot" cx="1168" cy="538" r="3"/>
251
+ <text class="capital" x="1176" y="541">Vladivostok</text>
252
+
253
+ <!-- Khabarovsk Krai -->
254
+ <path class="oblast" d="M 1120 480 L 1180 475 L 1185 505 L 1175 520 L 1130 515 L 1115 495 Z"/>
255
+ <circle class="capital-dot" cx="1148" cy="498" r="3"/>
256
+ <text class="capital" x="1156" y="501">Khabarovsk</text>
257
+
258
+ <!-- Amur Oblast -->
259
+ <path class="oblast" d="M 1060 460 L 1120 455 L 1125 485 L 1115 500 L 1070 495 L 1055 475 Z"/>
260
+ <circle class="capital-dot" cx="1088" cy="478" r="3"/>
261
+ <text class="capital" x="1096" y="481">Blagoveshchensk</text>
262
+
263
+ <!-- Jewish Autonomous Oblast -->
264
+ <path class="oblast" d="M 1140 500 L 1180 495 L 1185 515 L 1175 525 L 1150 520 L 1135 505 Z"/>
265
+ <circle class="capital-dot" cx="1158" cy="510" r="3"/>
266
+ <text class="capital" x="1166" y="513">Birobidzhan</text>
267
+
268
+ <!-- Sakhalin Oblast -->
269
+ <path class="oblast" d="M 1160 580 L 1200 575 L 1205 605 L 1195 620 L 1170 615 L 1155 595 Z"/>
270
+ <circle class="capital-dot" cx="1178" cy="598" r="3"/>
271
+ <text class="capital" x="1186" y="601">Yuzhno-Sakhalinsk</text>
272
+
273
+ <!-- North Caucasus -->
274
+ <!-- Rostov Oblast -->
275
+ <path class="oblast" d="M 580 500 L 620 495 L 625 525 L 615 540 L 590 535 L 575 515 Z"/>
276
+ <circle class="capital-dot" cx="598" cy="518" r="3"/>
277
+ <text class="capital" x="606" y="521">Rostov-on-Don</text>
278
+
279
+ <!-- Krasnodar Krai -->
280
+ <path class="oblast" d="M 560 540 L 600 535 L 605 565 L 595 580 L 570 575 L 555 555 Z"/>
281
+ <circle class="capital-dot" cx="578" cy="558" r="3"/>
282
+ <text class="capital" x="586" y="561">Krasnodar</text>
283
+
284
+ <!-- Stavropol Krai -->
285
+ <path class="oblast" d="M 580 560 L 620 555 L 625 585 L 615 600 L 590 595 L 575 575 Z"/>
286
+ <circle class="capital-dot" cx="598" cy="578" r="3"/>
287
+ <text class="capital" x="606" y="581">Stavropol</text>
288
+
289
+ <!-- Chechen Republic -->
290
+ <path class="oblast" d="M 600 590 L 640 585 L 645 605 L 635 615 L 610 610 L 595 595 Z"/>
291
+ <circle class="capital-dot" cx="618" cy="600" r="3"/>
292
+ <text class="capital" x="626" y="603">Grozny</text>
293
+
294
+ <!-- Ingushetia -->
295
+ <path class="oblast" d="M 580 600 L 620 595 L 625 615 L 615 625 L 590 620 L 575 605 Z"/>
296
+ <circle class="capital-dot" cx="598" cy="610" r="3"/>
297
+ <text class="capital" x="606" y="613">Magas</text>
298
+
299
+ <!-- Dagestan -->
300
+ <path class="oblast" d="M 620 600 L 660 595 L 665 625 L 655 635 L 630 630 L 615 610 Z"/>
301
+ <circle class="capital-dot" cx="638" cy="615" r="3"/>
302
+ <text class="capital" x="646" y="618">Makhachkala</text>
303
+
304
+ <!-- North Ossetia -->
305
+ <path class="oblast" d="M 640 580 L 680 575 L 685 595 L 675 605 L 650 600 L 635 585 Z"/>
306
+ <circle class="capital-dot" cx="658" cy="590" r="3"/>
307
+ <text class="capital" x="666" y="593">Vladikavkaz</text>
308
+
309
+ <!-- Kabardino-Balkaria -->
310
+ <path class="oblast" d="M 560 580 L 600 575 L 605 595 L 595 605 L 570 600 L 555 585 Z"/>
311
+ <circle class="capital-dot" cx="578" cy="590" r="3"/>
312
+ <text class="capital" x="586" y="593">Nalchik</text>
313
+
314
+ <!-- Adygea -->
315
+ <path class="oblast" d="M 540 550 L 580 545 L 585 565 L 575 575 L 550 570 L 535 555 Z"/>
316
+ <circle class="capital-dot" cx="558" cy="560" r="3"/>
317
+ <text class="capital" x="566" y="563">Maykop</text>
318
+ </svg>
319
+ </div>
320
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
321
+ </body>
322
+ </html>
script.js ADDED
@@ -0,0 +1,42 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Interactive map functionality
2
+ document.addEventListener('DOMContentLoaded', function() {
3
+ const oblasts = document.querySelectorAll('.oblast');
4
+
5
+ oblasts.forEach(oblast => {
6
+ // Add click event for potential future functionality
7
+ oblast.addEventListener('click', function(e) {
8
+ e.preventDefault();
9
+
10
+ // Create a subtle visual feedback
11
+ this.style.fill = '#d0d0d0';
12
+ setTimeout(() => {
13
+ this.style.fill = '';
14
+ }, 200);
15
+ });
16
+
17
+ // Enhanced hover effects
18
+ oblast.addEventListener('mouseenter', function() {
19
+ this.style.zIndex = '10';
20
+ });
21
+
22
+ oblast.addEventListener('mouseleave', function() {
23
+ this.style.zIndex = '';
24
+ });
25
+ });
26
+
27
+ // Add smooth transitions
28
+ const style = document.createElement('style');
29
+ style.textContent = `
30
+ .oblast {
31
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
32
+ }
33
+ .capital-dot {
34
+ transition: all 0.2s ease;
35
+ }
36
+ .oblast:hover .capital-dot {
37
+ r: 4;
38
+ fill: #404040;
39
+ }
40
+ `;
41
+ document.head.appendChild(style);
42
+ });
style.css CHANGED
@@ -1,28 +1,55 @@
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Additional custom styles for enhanced minimalist design */
2
  body {
3
+ margin: 0;
4
+ padding: 0;
5
+ overflow-x: auto;
6
  }
7
 
8
+ svg {
9
+ filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05));
 
10
  }
11
 
12
+ .oblast {
13
+ transform-origin: center;
 
 
 
14
  }
15
 
16
+ .oblast:hover {
17
+ filter: brightness(0.95);
18
+ transform: scale(1.02);
 
 
 
19
  }
20
 
21
+ .capital {
22
+ user-select: none;
23
+ -webkit-user-select: none;
24
+ -moz-user-select: none;
25
+ -ms-user-select: none;
26
  }
27
+
28
+ .capital-dot {
29
+ animation: pulse 2s infinite;
30
+ }
31
+
32
+ @keyframes pulse {
33
+ 0% {
34
+ opacity: 1;
35
+ }
36
+ 50% {
37
+ opacity: 0.7;
38
+ }
39
+ 100% {
40
+ opacity: 1;
41
+ }
42
+ }
43
+
44
+ /* Responsive scaling */
45
+ @media (max-width: 768px) {
46
+ .capital {
47
+ font-size: 9px;
48
+ }
49
+ }
50
+
51
+ @media (max-width: 480px) {
52
+ .capital {
53
+ font-size: 8px;
54
+ }
55
+ }