fatum
в игре: март 2030

свалка №4

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » свалка №4 » forbidden fruits of eden » о городе


о городе

Сообщений 1 страница 4 из 4

1

вау, огород

0

2

[hideprofile][html]
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');

.hkmap-wrap{
  width:900px;
  margin:0 auto;
  font-family:'Manrope', sans-serif;
  color:#111;
  overflow:visible;
}
.hkmap-main{
  display:flex;
  align-items:flex-start;
  position:relative;
}
.hkmap-content{
  width:690px;
  flex:0 0 690px;
  padding:0 10px 0 0;
  box-sizing:border-box;
  position:relative;
  z-index:2;
}
.hkmap-hero{
  height:92px;
  min-height:92px;
  padding:0 0 0 52px;
  box-sizing:border-box;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-start;
}
.hkmap-logo{
  font-family:'Dela Gothic One', sans-serif;
  font-size:84px;
  color:#2f2f2f;
  letter-spacing:2px;
  text-transform:uppercase;
  transform:translateY(-4px);
  white-space:nowrap;
  user-select:none;
  opacity:.9;
}
.hkmap-panel-wrap{
  margin-top:6px;
  padding-left:6px;
}
.hkmap-panel-title,
.hkmap-head,
.hkmap-item{
  display:block;
  background:#111111;
  color:#e5c070;
  text-decoration:none;
  text-align:left;
  font-family:'Dela Gothic One', sans-serif;
  line-height:1.1;
  box-sizing:border-box;
  text-transform:lowercase;
  letter-spacing:.1px;
  padding:7px 8px;
}
.hkmap-panel-title{
  width:300px;
  font-size:10px;
  margin:0 0 8px auto;
}
.hkmap-box{
  width:calc(100% + 95px);
  background:#efefef;
  border:1px solid #2a2a2a;
  padding:12px 12px 12px 0;
  box-sizing:border-box;
  position:relative;
  margin-right:-95px;
  z-index:3;
}
.hkmap-stage-wrap{
  padding-left:12px;
}
.hkmap-frame{
  width:100%;
  height:690px;
  background:#d8d8d8;
  border:1px solid rgba(0,0,0,.1);
  position:relative;
  overflow:hidden;
}
.hkmap-hover{
  position:absolute;
  top:14px;
  left:14px;
  z-index:20;
  min-width:190px;
  max-width:280px;
  background:#111;
  color:#e5c070;
  font:400 11px/1.1 'Dela Gothic One', sans-serif;
  text-transform:lowercase;
  padding:9px 11px;
  box-sizing:border-box;
  pointer-events:none;
}
.hkmap-controls{
  position:absolute;
  top:14px;
  right:14px;
  z-index:20;
  display:flex;
  gap:8px;
}
.hkmap-controls button{
  width:36px;
  height:36px;
  border:none;
  background:#111;
  color:#e5c070;
  font:700 22px/36px 'Manrope', sans-serif;
  cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,.18);
}
.hkmap-controls button:hover{
  color:#fff;
}
.hkmap-stage{
  position:absolute;
  top:0;
  left:0;
  transform-origin:top left;
  cursor:grab;
  user-select:none;
}
.hkmap-stage.dragging{
  cursor:grabbing;
}
.hkmap-stage img{
  display:block;
  width:2048px;
  height:1525px;
  max-width:none;
  pointer-events:none;
  -webkit-user-drag:none;
}
.hkmap-overlay{
  position:absolute;
  top:0;
  left:0;
  width:2048px;
  height:1525px;
}
.hkmap-zone{
  fill:rgba(229,192,112,0);
  stroke:rgba(17,17,17,0);
  stroke-width:2;
  cursor:pointer;
  transition:fill .2s ease, stroke .2s ease;
}
.hkmap-zone:hover{
  fill:rgba(229,192,112,.34);
  stroke:rgba(17,17,17,.65);
}
.hkmap-side{
  width:230px;
  flex:0 0 230px;
  min-height:560px;
  background:
    linear-gradient(rgba(55,55,55,.78), rgba(55,55,55,.78)),
    linear-gradient(rgba(215,215,215,.18), rgba(215,215,215,.18)),
    url('https://i.pinimg.com/1200x/88/f8/7e/88f87ea498e2699cc83f137290d3c426.jpg') center center / cover no-repeat;
  padding:14px 0 12px;
  box-sizing:border-box;
  text-align:left;
  position:relative;
  z-index:1;
}
.hkmap-head{
  width:192px;
  font-size:15px;
  color:#ffffff;
  margin:0 0 8px auto;
  text-align:right;
}
.hkmap-note{
  width:192px;
  margin:0 10px 10px auto;
  color:#fff;
  font-size:9px;
  line-height:1.25;
  font-weight:700;
  text-align:right;
}
.hkmap-list{
  width:192px;
  margin:14px 10px 0 auto;
}
.hkmap-item{
  font-size:10px;
  margin:0 0 6px;
  text-align:right;
}
.hkmap-dots{
  position:absolute;
  right:115px;
  bottom:80px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.hkmap-dot{
  width:22px;
  height:22px;
  border-radius:50%;
  background:#e5c070;
  display:block;
}
</style>

<div class="hkmap-wrap">
  <div class="hkmap-main">
    <div class="hkmap-content">
      <div class="hkmap-hero">
        <div class="hkmap-logo">hong kong</div>
      </div>

      <div class="hkmap-panel-wrap">
        <div class="hkmap-panel-title">интерактивная карта районов города</div>

        <div class="hkmap-box">
          <div class="hkmap-stage-wrap">
            <div class="hkmap-frame" id="hkmap-frame">

              <div class="hkmap-hover" id="hkmap-hover">наведи на район</div>

              <div class="hkmap-controls">
                <button type="button" id="hkmap-zoom-in">+</button>
                <button type="button" id="hkmap-zoom-out">−</button>
              </div>

              <div class="hkmap-stage" id="hkmap-stage">
                <img src="https://upforme.ru/uploads/0018/97/e9/2/444972.png" alt="Карта Гонконга">

                <svg class="hkmap-overlay" viewBox="0 0 2048 1525" preserveAspectRatio="none">

                  <path class="hkmap-zone" data-name="islands" d="M 725,881 L 594,880 L 525,929 L 418,953 L 383,1005 L 349,960 L 279,963 L 270,992 L 246,1009 L 249,1041 L 233,1030 L 199,1042 L 172,1077 L 193,1110 L 166,1095 L 163,1119 L 133,1129 L 135,1166 L 100,1165 L 101,1245 L 127,1270 L 112,1296 L 136,1289 L 146,1267 L 183,1269 L 232,1211 L 263,1199 L 325,1257 L 338,1238 L 357,1253 L 381,1246 L 385,1222 L 344,1214 L 362,1190 L 387,1193 L 451,1160 L 488,1163 L 522,1138 L 543,1144 L 544,1132 L 554,1156 L 540,1180 L 560,1199 L 550,1222 L 573,1236 L 596,1216 L 618,1226 L 674,1175 L 646,1159 L 625,1165 L 589,1139 L 612,1110 L 649,1097 L 615,1051 L 593,1048 L 615,1026 L 653,1051 L 681,1048 L 684,986 L 671,955 L 687,957 L 693,941 L 659,942 L 673,923 L 651,913 L 670,891 L 719,895 Z" />

                  <path class="hkmap-zone" data-name="kwai tsing" d="M 1070,637 L 1051,641 L 1053,672 L 1049,677 L 1011,681 L 995,705 L 970,715 L 970,720 L 976,722 L 980,754 L 992,761 L 1008,794 L 1019,791 L 1023,802 L 1013,807 L 1018,830 L 1041,823 L 1045,827 L 1046,834 L 1006,847 L 1003,851 L 1026,866 L 1033,865 L 1026,855 L 1057,828 L 1059,815 L 1043,810 L 1043,798 L 1034,799 L 1025,781 L 1037,786 L 1047,780 L 1061,785 L 1070,781 L 1082,783 L 1078,780 L 1080,771 L 1073,760 L 1063,756 L 1061,725 L 1076,709 L 1070,695 L 1077,681 L 1072,668 L 1084,657 L 1071,652 Z" />

                  <path class="hkmap-zone" data-name="north" d="M 873,117 L 907,151 L 913,189 L 901,203 L 911,255 L 900,341 L 978,323 L 1018,343 L 1101,292 L 1100,262 L 1138,257 L 1139,272 L 1159,274 L 1191,239 L 1328,268 L 1387,206 L 1419,247 L 1512,231 L 1580,261 L 1683,191 L 1595,223 L 1587,238 L 1555,205 L 1545,217 L 1519,193 L 1481,207 L 1485,170 L 1506,178 L 1530,139 L 1510,153 L 1514,128 L 1455,142 L 1472,104 L 1452,109 L 1456,87 L 1436,93 L 1436,55 L 1429,71 L 1389,61 L 1361,116 L 1283,143 L 1282,105 L 1340,59 L 1312,36 L 1190,35 L 1154,13 L 1128,12 L 1103,35 L 1086,81 L 1053,73 L 1015,85 L 973,121 L 963,101 L 942,114 L 913,98 Z" />

                  <path class="hkmap-zone" data-name="sai kung" d="M 1897,451 L 1783,433 L 1796,492 L 1754,559 L 1603,483 L 1593,523 L 1541,524 L 1516,572 L 1438,585 L 1427,625 L 1341,680 L 1330,807 L 1394,853 L 1391,977 L 1430,936 L 1415,910 L 1432,897 L 1456,919 L 1463,898 L 1483,958 L 1465,1018 L 1492,1010 L 1505,1046 L 1544,1032 L 1573,1066 L 1598,1044 L 1578,1037 L 1582,998 L 1553,1021 L 1535,971 L 1582,973 L 1612,928 L 1586,894 L 1551,916 L 1543,857 L 1483,848 L 1473,752 L 1421,746 L 1458,675 L 1480,699 L 1465,728 L 1487,720 L 1496,750 L 1478,655 L 1507,597 L 1608,629 L 1604,607 L 1648,582 L 1633,641 L 1689,653 L 1677,708 L 1712,762 L 1744,738 L 1761,803 L 1766,747 L 1813,742 L 1833,705 L 1815,668 L 1840,658 L 1853,696 L 1868,689 L 1864,622 L 1819,586 L 1802,599 L 1790,570 L 1806,576 L 1848,503 L 1911,532 L 1880,475 Z" />

                  <path class="hkmap-zone" data-name="sha tin" d="M 1399,454 L 1376,450 L 1380,466 L 1343,482 L 1317,549 L 1325,560 L 1312,556 L 1266,608 L 1294,636 L 1259,615 L 1195,670 L 1182,655 L 1142,663 L 1176,649 L 1193,662 L 1215,653 L 1253,612 L 1243,597 L 1259,604 L 1307,549 L 1295,536 L 1300,507 L 1281,486 L 1267,488 L 1264,499 L 1254,491 L 1248,516 L 1207,516 L 1206,525 L 1151,534 L 1148,600 L 1078,668 L 1086,680 L 1077,693 L 1082,710 L 1066,727 L 1069,754 L 1080,746 L 1084,768 L 1096,760 L 1120,766 L 1134,754 L 1152,764 L 1222,750 L 1225,738 L 1241,743 L 1249,729 L 1290,731 L 1295,722 L 1324,718 L 1336,678 L 1379,658 L 1398,620 L 1423,619 L 1416,541 L 1403,530 L 1408,484 L 1393,461 Z" />

                  <path class="hkmap-zone" data-name="tai po" d="M 1662,219 L 1579,269 L 1513,237 L 1417,253 L 1384,215 L 1328,275 L 1215,244 L 1182,250 L 1164,284 L 1133,266 L 1102,268 L 1108,298 L 1026,342 L 971,428 L 1013,519 L 1073,516 L 1081,532 L 1244,511 L 1254,482 L 1274,483 L 1231,436 L 1210,453 L 1209,435 L 1154,400 L 1230,398 L 1260,366 L 1295,380 L 1286,401 L 1316,401 L 1276,360 L 1281,335 L 1299,320 L 1317,337 L 1353,324 L 1365,340 L 1391,287 L 1386,231 L 1396,254 L 1456,284 L 1471,263 L 1518,252 L 1544,277 L 1513,316 L 1459,326 L 1446,345 L 1462,350 L 1444,375 L 1424,368 L 1406,397 L 1446,379 L 1467,334 L 1580,294 Z" />

                  <path class="hkmap-zone" data-name="tsuen wan" d="M 1141,535 L 1115,541 L 1105,535 L 1077,538 L 1074,523 L 1023,521 L 1012,526 L 1003,548 L 984,543 L 971,557 L 953,562 L 933,555 L 909,582 L 884,574 L 865,592 L 851,593 L 850,603 L 824,611 L 817,633 L 790,632 L 780,639 L 761,631 L 758,655 L 732,647 L 723,660 L 715,658 L 719,678 L 742,686 L 700,722 L 700,735 L 784,709 L 800,693 L 806,698 L 812,691 L 814,705 L 837,705 L 867,686 L 895,694 L 927,689 L 944,675 L 975,700 L 976,708 L 995,697 L 1007,676 L 1045,672 L 1047,648 L 1041,640 L 1078,625 L 1097,590 L 1103,600 L 1094,616 L 1110,615 L 1086,642 L 1106,637 L 1144,596 L 1147,561 L 1139,549 Z" />

                  <path class="hkmap-zone" data-name="tuen mun" d="M 297,556 L 338,574 L 337,602 L 355,620 L 351,651 L 338,663 L 369,691 L 401,686 L 444,702 L 472,673 L 517,681 L 505,634 L 532,563 L 512,649 L 532,644 L 574,679 L 597,676 L 586,696 L 607,713 L 632,700 L 663,711 L 677,696 L 667,720 L 690,734 L 732,689 L 705,669 L 667,674 L 666,639 L 757,591 L 705,647 L 734,639 L 756,648 L 758,626 L 812,627 L 815,590 L 788,589 L 788,559 L 798,550 L 776,550 L 775,562 L 645,562 L 644,528 L 629,527 L 629,504 L 597,501 L 588,469 L 566,478 L 448,465 L 417,514 L 397,492 L 378,509 L 377,499 L 337,506 Z" />

                  <path class="hkmap-zone" data-name="yuen long" d="M 1015,349 L 999,350 L 979,330 L 894,346 L 902,155 L 864,170 L 834,162 L 806,178 L 790,213 L 742,211 L 713,234 L 704,278 L 718,287 L 709,296 L 719,316 L 707,327 L 700,294 L 610,323 L 594,356 L 601,389 L 593,340 L 612,313 L 641,309 L 650,269 L 607,259 L 591,297 L 551,338 L 557,349 L 520,382 L 468,396 L 435,467 L 413,483 L 415,499 L 445,459 L 565,470 L 597,459 L 594,487 L 635,499 L 635,523 L 650,524 L 650,556 L 770,556 L 771,544 L 802,544 L 794,584 L 819,584 L 823,605 L 885,567 L 907,576 L 930,549 L 962,554 L 982,536 L 999,540 L 1007,508 L 965,422 Z" />

                  <path class="hkmap-zone" data-name="kowloon city" d="M 1172,761 L 1169,765 L 1172,771 L 1167,779 L 1174,783 L 1180,798 L 1179,826 L 1193,826 L 1193,861 L 1202,862 L 1201,868 L 1179,868 L 1179,880 L 1192,894 L 1201,910 L 1200,915 L 1208,920 L 1208,928 L 1229,918 L 1231,903 L 1226,894 L 1226,878 L 1238,864 L 1219,868 L 1212,862 L 1209,839 L 1212,831 L 1221,824 L 1230,825 L 1236,831 L 1239,856 L 1244,856 L 1305,914 L 1307,910 L 1302,906 L 1302,900 L 1294,898 L 1275,878 L 1283,871 L 1257,843 L 1266,837 L 1266,807 L 1258,807 L 1238,821 L 1225,819 L 1224,812 L 1212,817 L 1210,808 L 1206,807 L 1206,795 L 1197,790 L 1200,777 L 1190,771 L 1185,760 Z" />

                  <path class="hkmap-zone" data-name="kwun tong" d="M 1272,812 L 1272,840 L 1267,846 L 1290,870 L 1288,879 L 1297,876 L 1307,886 L 1310,881 L 1318,881 L 1318,852 L 1309,854 L 1308,848 L 1325,846 L 1325,881 L 1333,881 L 1334,887 L 1311,890 L 1325,904 L 1333,900 L 1338,903 L 1332,912 L 1343,929 L 1351,935 L 1365,933 L 1371,939 L 1361,946 L 1361,950 L 1369,960 L 1375,958 L 1380,962 L 1376,971 L 1384,976 L 1385,945 L 1388,941 L 1396,943 L 1391,923 L 1380,913 L 1376,903 L 1391,890 L 1393,879 L 1379,878 L 1387,861 L 1361,852 L 1361,881 L 1369,881 L 1370,887 L 1346,888 L 1344,882 L 1353,881 L 1353,852 L 1345,854 L 1343,848 L 1357,845 L 1344,813 L 1301,818 L 1290,810 Z" />

                  <path class="hkmap-zone" data-name="wong tai sin" d="M 1164,769 L 1141,769 L 1136,763 L 1127,765 L 1122,772 L 1117,772 L 1111,768 L 1103,770 L 1097,768 L 1093,774 L 1086,774 L 1090,780 L 1105,780 L 1105,815 L 1113,815 L 1113,822 L 1090,822 L 1088,820 L 1089,815 L 1097,815 L 1097,786 L 1085,787 L 1079,791 L 1069,788 L 1063,792 L 1052,786 L 1046,786 L 1044,792 L 1051,797 L 1048,806 L 1065,811 L 1064,830 L 1072,832 L 1075,828 L 1096,842 L 1107,835 L 1118,844 L 1125,838 L 1124,834 L 1128,829 L 1171,828 L 1175,815 L 1175,801 L 1169,787 L 1161,781 L 1160,776 Z" />

                  <path class="hkmap-zone" data-name="sham shui po" d="M 1318,723 L 1298,728 L 1294,736 L 1252,738 L 1248,741 L 1246,749 L 1259,749 L 1259,784 L 1267,784 L 1267,791 L 1243,790 L 1244,784 L 1252,784 L 1252,755 L 1243,757 L 1244,748 L 1236,748 L 1232,743 L 1228,743 L 1226,755 L 1213,757 L 1200,755 L 1192,758 L 1196,768 L 1207,776 L 1203,787 L 1211,792 L 1212,803 L 1216,804 L 1216,809 L 1226,806 L 1237,814 L 1256,801 L 1268,801 L 1277,807 L 1290,803 L 1301,812 L 1324,808 L 1316,743 Z" />

                  <path class="hkmap-zone" data-name="yau tsim mong" d="M 1105,843 L 1103,848 L 1110,856 L 1111,878 L 1119,909 L 1123,905 L 1131,905 L 1131,876 L 1122,878 L 1121,872 L 1129,869 L 1138,870 L 1138,905 L 1147,906 L 1146,914 L 1150,918 L 1150,945 L 1157,953 L 1171,954 L 1179,940 L 1190,934 L 1193,928 L 1203,931 L 1202,922 L 1194,917 L 1195,911 L 1181,890 L 1179,890 L 1179,896 L 1184,896 L 1185,901 L 1179,902 L 1178,912 L 1172,911 L 1172,902 L 1153,901 L 1154,894 L 1169,872 L 1163,851 L 1166,835 L 1134,835 L 1138,841 L 1125,844 L 1118,854 L 1108,843 Z" />

                  <path class="hkmap-zone" data-name="central and western" d="M 987,1002 L 987,1012 L 990,1019 L 993,1018 L 999,1023 L 1006,1023 L 1021,1015 L 1031,1015 L 1045,1021 L 1070,1056 L 1074,1069 L 1081,1075 L 1081,1086 L 1092,1082 L 1097,1077 L 1099,1068 L 1106,1063 L 1119,1071 L 1128,1068 L 1134,1069 L 1143,1054 L 1142,1027 L 1149,1017 L 1150,1008 L 1148,1002 L 1144,1001 L 1145,998 L 1140,997 L 1138,992 L 1131,991 L 1124,984 L 1129,973 L 1114,968 L 1104,973 L 1082,964 L 1061,964 L 1031,975 L 1017,987 L 996,995 Z" />

                  <path class="hkmap-zone" data-name="eastern" d="M 1207,986 L 1217,994 L 1231,985 L 1232,993 L 1247,1017 L 1253,1015 L 1254,1008 L 1260,1005 L 1279,1026 L 1261,1046 L 1251,1052 L 1251,1073 L 1267,1068 L 1276,1071 L 1299,1063 L 1307,1071 L 1322,1076 L 1346,1076 L 1355,1085 L 1362,1085 L 1368,1078 L 1379,1078 L 1405,1089 L 1415,1108 L 1429,1108 L 1429,1098 L 1435,1084 L 1431,1066 L 1436,1060 L 1416,1041 L 1391,1037 L 1388,1032 L 1393,1022 L 1386,1012 L 1387,1007 L 1367,985 L 1362,984 L 1358,988 L 1338,987 L 1321,968 L 1304,965 L 1288,957 L 1259,953 L 1225,965 L 1217,973 L 1221,982 Z" />

                  <path class="hkmap-zone" data-name="southern" d="M 999,1028 L 1049,1110 L 1139,1119 L 1140,1147 L 1163,1174 L 1192,1120 L 1217,1127 L 1220,1150 L 1246,1151 L 1247,1193 L 1238,1198 L 1261,1216 L 1247,1226 L 1247,1241 L 1274,1231 L 1284,1215 L 1296,1218 L 1303,1234 L 1293,1249 L 1297,1297 L 1329,1291 L 1313,1248 L 1325,1228 L 1300,1203 L 1331,1166 L 1349,1173 L 1324,1120 L 1331,1113 L 1339,1133 L 1367,1137 L 1369,1203 L 1390,1216 L 1391,1247 L 1449,1251 L 1430,1239 L 1429,1205 L 1416,1183 L 1433,1177 L 1418,1170 L 1426,1154 L 1404,1120 L 1413,1114 L 1388,1087 L 1355,1091 L 1300,1070 L 1226,1083 L 1235,1086 L 1235,1121 L 1244,1126 L 1220,1128 L 1227,1092 L 1105,1070 L 1081,1093 L 1042,1026 Z" />

                  <path class="hkmap-zone" data-name="wan chai" d="M 1165,981 L 1162,985 L 1161,993 L 1156,996 L 1151,996 L 1157,1010 L 1155,1013 L 1156,1018 L 1148,1028 L 1149,1055 L 1143,1068 L 1172,1081 L 1176,1081 L 1182,1075 L 1188,1075 L 1194,1081 L 1203,1081 L 1206,1084 L 1212,1084 L 1223,1078 L 1244,1075 L 1245,1049 L 1258,1041 L 1271,1028 L 1267,1020 L 1260,1015 L 1250,1024 L 1246,1024 L 1236,1013 L 1231,999 L 1228,999 L 1227,996 L 1223,996 L 1213,1006 L 1206,992 L 1175,992 L 1173,990 L 1174,981 Z" />

                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="hkmap-side">
      <div class="hkmap-head">карта города</div>

      <div class="hkmap-note">
        теперь hover идёт по реальным цветовым контурам районов с карты, а не по заглушкам поверх неё.
      </div>

      <div class="hkmap-note">
        следующим этапом уже можно добавлять крупные точки и мелкие локации с окнами.
      </div>

      <div class="hkmap-list">
        <span class="hkmap-item">районы — hover</span>
        <span class="hkmap-item">масштаб — кнопками</span>
        <span class="hkmap-item">перемещение — мышкой</span>
      </div>

      <div class="hkmap-dots">
        <span class="hkmap-dot"></span>
        <span class="hkmap-dot"></span>
        <span class="hkmap-dot"></span>
        <span class="hkmap-dot"></span>
        <span class="hkmap-dot"></span>
        <span class="hkmap-dot"></span>
      </div>
    </div>
  </div>
</div>

<script>
(function(){
  if(window.__HKMAP_DISTRICTS_REAL__) return;
  window.__HKMAP_DISTRICTS_REAL__ = true;

  var scale = 0.43;
  var translateX = -70;
  var translateY = -8;

  var isDragging = false;
  var startX = 0;
  var startY = 0;

  var stage = document.getElementById('hkmap-stage');
  var frame = document.getElementById('hkmap-frame');
  var hoverBox = document.getElementById('hkmap-hover');

  function updateTransform(){
    stage.style.transform = 'translate(' + translateX + 'px,' + translateY + 'px) scale(' + scale + ')';
  }

  updateTransform();

  document.getElementById('hkmap-zoom-in').addEventListener('click', function(){
    scale = Math.min(scale + 0.1, 2.2);
    updateTransform();
  });

  document.getElementById('hkmap-zoom-out').addEventListener('click', function(){
    scale = Math.max(scale - 0.1, 0.28);
    updateTransform();
  });

  stage.addEventListener('mousedown', function(e){
    if(e.target.classList.contains('hkmap-zone')) return;
    isDragging = true;
    stage.classList.add('dragging');
    startX = e.clientX - translateX;
    startY = e.clientY - translateY;
  });

  window.addEventListener('mousemove', function(e){
    if(!isDragging) return;
    translateX = e.clientX - startX;
    translateY = e.clientY - startY;
    updateTransform();
  });

  window.addEventListener('mouseup', function(){
    isDragging = false;
    stage.classList.remove('dragging');
  });

  frame.querySelectorAll('.hkmap-zone').forEach(function(zone){
    zone.addEventListener('mouseenter', function(){
      hoverBox.textContent = this.getAttribute('data-name');
    });

    zone.addEventListener('mouseleave', function(){
      hoverBox.textContent = 'наведи на район';
    });
  });
})();
</script>
[/html][/hideprofile]

0

3

[html]
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');

.place-wrap{
  width:900px;
  margin:0 auto;
  font-family:'Manrope', sans-serif;
  color:#111;
  overflow:visible;
}

.place-tab{
  position:fixed;
  left:-9999px;
  top:0;
  opacity:0;
  pointer-events:none;
}

.place-main{
  display:flex;
  flex-direction:row-reverse;
  align-items:flex-start;
  position:relative;
}

.place-content{
  width:670px;
  flex:0 0 670px;
  padding:0 0 0 10px;
  box-sizing:border-box;
  position:relative;
  z-index:2;
}

.place-hero{
  height:92px;
  min-height:92px;
  padding:0 5px 0 0;
  box-sizing:border-box;
    left: 10px;
  position:relative;
  overflow:hidden;
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
}

.place-logo{
  font-family:'Dela Gothic One', sans-serif;
  font-size:85px;
  color:#2f2f2f;
  letter-spacing:2px;
  text-transform:uppercase;
  transform:translateY(22px);
  white-space:nowrap;
  user-select:none;
  opacity:.9;
}

.place-panel-wrap{
  margin-top:6px;
  padding-right:6px;
}

.place-panel-title,
.place-block-title,
.place-head,
.place-nav-btn{
  display:block;
  background:#111111;
  color:#9bcb01;
  text-decoration:none;
  text-align:left;
  font-family:'Dela Gothic One', sans-serif;
  line-height:1.1;
  box-sizing:border-box;
  text-transform:lowercase;
  letter-spacing:.1px;
  padding:7px 8px;
}

.place-panel-title{
font-size:10px;
  margin:0 auto 8px 0;
  position:relative;
  left:10px;
  padding-left:20px;
}

.place-block-title{
  width:auto;
  display:inline-block;
  font-size:10px;
  margin:0 0 10px 0;
  position:relative;
  left:-12px;
  padding-left:20px;
}

.place-box{
  width:calc(100% + 95px);
  background:#efefef;
  border:1px solid #2a2a2a;
  padding:12px 0 12px 0;
  box-sizing:border-box;
  position:relative;
  text-transform:lowercase;
  margin-left:-85px;
  z-index:3;
}

.place-scroll{
  max-height:690px;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:6px;
  box-sizing:border-box;
  scrollbar-width:thin;
  scrollbar-color:#4a4a4a transparent;
}

.place-scroll::-webkit-scrollbar{
  width:4px;
}

.place-scroll::-webkit-scrollbar-track{
  background:transparent;
}

.place-scroll::-webkit-scrollbar-thumb{
  background:#4a4a4a;
  border:none;
  border-radius:0;
}

.place-scroll::-webkit-scrollbar-button{
  display:none;
  width:0;
  height:0;
}

.place-panel{
  display:none;
}

#place-tab-1:checked ~ .place-main .place-content .place-panel-1,
#place-tab-2:checked ~ .place-main .place-content .place-panel-2,
#place-tab-3:checked ~ .place-main .place-content .place-panel-3{
  display:block;
}

.place-block{
  margin:0 0 16px;
  padding:0 0 12px;
  border-bottom:1px solid rgba(0,0,0,.08);
}

.place-block:last-child{
  margin-bottom:0;
  border-bottom:none;
}

.place-block-inner{
  padding:0 12px 0 12px;
}

.place-sub{
  font-family:'Dela Gothic One', sans-serif;
  font-size:13px;
  line-height:1.35;
  color:#111;
  text-transform:lowercase;
  margin:0 0 8px;
  letter-spacing:.15px;
  font-weight:400;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.place-a{
  font-family:'Manrope', sans-serif;
  font-size:11px;
  line-height:1.5;
  text-transform:lowercase;
  color:#3f3f3f;
  font-weight:600;
}

.place-a + .place-a{
  margin-top:8px;
}

.place-a b{
  font-weight:800;
  color:#111;
}

.place-list{
  margin:8px 0 0;
  padding:0;
  list-style:none;
}

.place-list li{
  position:relative;
  padding-left:16px;
  margin:0 0 8px;
  font-size:11px;
  line-height:1.45;
  color:#3f3f3f;
}

.place-list li:before{
  content:"✶";
  position:absolute;
  left:0;
  top:0;
  color:#4f4f4f;
  font-size:11px;
}

.place-side{
  width:230px;
  flex:0 0 230px;
  min-height:560px;
  background:
    linear-gradient(rgba(55,55,55,.78), rgba(55,55,55,.78)),
    linear-gradient(rgba(215,215,215,.18), rgba(215,215,215,.18)),
    url('https://i.pinimg.com/1200x/88/f8/7e/88f87ea498e2699cc83f137290d3c426.jpg') center center / cover no-repeat;
  padding:14px 0 12px;
  box-sizing:border-box;
  text-align:left;
  position:relative;
  z-index:1;
}

.place-head{
  width:192px;
  font-size:15px;
  color:#ffffff;
  margin:0 0 8px 0;
}

.place-note{
  width:192px;
  margin:0 0 10px 10px;
  color:#fff;
  font-size:9px;
  line-height:1.25;
  font-weight:700;
  text-align:left;
}

.place-nav{
  width:192px;
  margin-left:10px;
  margin-top:14px;
}

.place-nav-btn{
  width:100%;
  font-size:10px;
  margin:0 -10px 6px;
  cursor:pointer;
  transition:.25s ease;
}

.place-nav-btn:hover{
  color:#646464;
}

#place-tab-1:checked ~ .place-main .place-side label[for="place-tab-1"],
#place-tab-2:checked ~ .place-main .place-side label[for="place-tab-2"],
#place-tab-3:checked ~ .place-main .place-side label[for="place-tab-3"]{
  color:#fff;
  box-shadow:inset 3px 0 0 #9bcb01;
}

.place-dots{
  position:absolute;
  left:490px;
  bottom:432px;
  display:flex;
  gap:8px;
}

.place-dot{
  width:22px;
  height:22px;
  border-radius:50%;
  background:#9bcb01;
  display:block;
}

.place-q{
  font-family:'Dela Gothic One', sans-serif;
  font-size:12px;
  line-height:1.3;
  color:#111;
  text-transform:lowercase;
  margin:0 0 8px;
  letter-spacing:.12px;
  font-weight:400;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.place-table-wrap{
  margin:12px 0 6px;
  overflow-x:auto;
}

.place-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  background:#f4f4f4;
  border:1px solid rgba(0,0,0,.12);
}

.place-table th,
.place-table td{
  border:1px solid rgba(0,0,0,.08);
  padding:10px 10px;
  text-transform:lowercase;
  vertical-align:top;
  text-align:left;
}

.place-table th{
  font-family:'Manrope', sans-serif;
  font-size:11px;
  line-height:1.3;
  font-weight:800;
  color:#111;
  background:rgba(0,0,0,.03);
}

.place-table td{
  font-family:'Manrope', sans-serif;
  font-size:11px;
  line-height:1.45;
  font-weight:600;
  color:#3f3f3f;
}

.place-table b{
  color:#111;
  font-weight:800;
}

/* картинки */
.place-pic{
  display:block;
  width:100%;
  margin:10px 0 12px;
}

.place-pic img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid rgba(0,0,0,.12);
}

.place-cap{
  margin-top:6px;
  font-size:10px;
  line-height:1.35;
  color:#4b4b4b;
  font-weight:700;
}

.place-pic.left,
.place-pic.right{
  width:235px;
  margin-top:2px;
}

.place-pic.left{
  float:left;
  margin-right:14px;
  margin-bottom:10px;
}

.place-pic.right{
  float:right;
  margin-left:14px;
  margin-bottom:10px;
}

.place-pic.small{
  width:180px;
}

.place-pic.tiny{
  width:150px;
}

.place-clear{
  clear:both;
}
</style>

<div class="place-wrap">

  <input class="place-tab" type="radio" name="place-tabs" id="place-tab-1" checked>
  <input class="place-tab" type="radio" name="place-tabs" id="place-tab-2">
  <input class="place-tab" type="radio" name="place-tabs" id="place-tab-3">

  <div class="place-main">

    <div class="place-content">
      <div class="place-hero">
        <div class="place-logo">hong kong</div>
      </div>

      <div class="place-panel-wrap">
        <div class="place-panel-title">место действия, районы, архитектура и атмосфера города</div>

        <div class="place-box">
          <div class="place-scroll">

            <div class="place-panel place-panel-1">

              <div class="place-block">
                <div class="place-block-title">место действия</div>
                <div class="place-block-inner">
                  <div class="place-a"><b>независимый город-государство:</b> гонконг.</div>
                  <div class="place-a"><b>расположение:</b> юго-восточное побережье китая</div>
                  <div class="place-a"><b>официальные языки:</b> китайский, английский, диалект гонконга</div>
                  <div class="place-a"><b>состояние к 2030 г.:</b> многонациональный город, поделенный на районы</div>
                  <div class="place-a"><b>валюта:</b> гонконгский доллар</div>
                  <div class="place-a"><b>население:</b> около 7,5 млн человек</div>
                </div>
              </div>

              <div class="place-block">
                <div class="place-block-title">общая сводка</div>
                <div class="place-block-inner">

                  <div class="place-pic right">
                    <img src="https://commons.wikimedia.org/wiki/Special:FilePath/Hong%20Kong%20Skyline%20from%20Victoria%20Harbour%20%2854750093251%29.jpg" alt="hong kong skyline from victoria harbour">
                    <div class="place-cap">общий вид</div>
                  </div>

                  <div class="place-a">Гонконг - самостоятельный город-государство, в прошлом колония Великобритании, набирающая мощь в современно мире. Казалось бы, это город Китая, но нет, Гонконг - самая настоящая страна внутри страны, где восточная и европейская культуры переплетены в единую и гармоничную систему. Вернее, некогда принадлежала к Китаю, но получила независимость и стала самостоятельным городом-государством. Состоит из острова Гонконг, полуострова Коулун и Новых территорий, что стали появляться с возникающими по всему миру аномалиями. В мире город получил широкое название “благоухающая гавань” неспроста: именно в этот город стали стекаться силы самых разных стран в погоне за ответами на вопрос “что в мире вообще, вашу мать, происходит?!”.</div>

                  <div class="place-a">Гонконг отличается сочетанием стеклянных небоскребов и яркой зелени, активной ночной жизнью, а также развитой транспортной системой, включая знаменитые двухэтажные трамваи и водные трамвайчики. Здесь каждый путник “свой”, и любому найдется место, будь то оживленные ночные базары или островки спокойствия под взглядом Будды, что удалось сохранить несмотря на творящийся вокруг хаос.</div>
                  <div class="place-clear"></div>
                </div>
              </div>

              <div class="place-block">
                <div class="place-block-title">климат</div>
                <div class="place-block-inner">
                  <div class="place-a">Гонконг находится в зоне субтропического климата, поэтому самым комфортным для проживания временем считается с середины мая по середину октября. В это время температура воздуха держится у отметки +30°C, при этом в городе душно, влажно и пасмурно.</div>
                  <div class="place-a">Зима длится с декабря по март и не радует хорошей погодой, пригодной для пляжного отдыха: в эти месяцы температура редко поднимается выше +20°C днём. Однако именно зимой Гонконг чаще всего залит солнцем.</div>
                  <div class="place-a">Оптимальное время для всех и вся — короткое межсезонье: апрель и ноябрь, когда и малооблачно, и столбик термометра показывает комфортные +25°C.</div>

                  <div class="place-table-wrap">
                    <table class="place-table">
                      <tr>
                        <th>месяц</th>
                        <th>макс. / мин. (°c)</th>
                      </tr>
                      <tr><td>январь</td><td>18° / 14°</td></tr>
                      <tr><td>февраль</td><td>18° / 14°</td></tr>
                      <tr><td>март</td><td>21° / 17°</td></tr>
                      <tr><td>апрель</td><td>25° / 20°</td></tr>
                      <tr><td>май</td><td>28° / 24°</td></tr>
                      <tr><td>июнь</td><td>30° / 26°</td></tr>
                      <tr><td>июль</td><td>31° / 27°</td></tr>
                      <tr><td>август</td><td>31° / 26°</td></tr>
                      <tr><td>сентябрь</td><td>30° / 25°</td></tr>
                      <tr><td>октябрь</td><td>27° / 23°</td></tr>
                      <tr><td>ноябрь</td><td>23° / 19°</td></tr>
                      <tr><td>декабрь</td><td>20° / 15°</td></tr>
                    </table>
                  </div>
                </div>
              </div>

              <div class="place-block">
                <div class="place-block-title">особенности архитектуры</div>
                <div class="place-block-inner">
                  <div class="place-sub">гонконг 2030 года</div>
                  <div class="place-a">Гонконг 2030 года — это город, который никогда не выключает свет. Не только потому, что он всегда был городом-огнями, но и потому, что тьма стала слишком опасной.</div>

                  <div class="place-sub">вертикальный город-крепость</div>
                  <div class="place-a">Небоскребы, которые раньше были символом капитала, теперь — бастионы. Каждое здание выше 20 этажей имеет:</div>
                  <ul class="place-list">
                    <li>обсидиановую крошку в бетоне фасадов;</li>
                    <li>серебряные сетки, вплетенные в стеклянные панели (это создает характерный мерцающий узор — «чешую дракона», как говорят местные);</li>
                    <li>световые пояса — горизонтальные линии подсветки на каждом этаже, которые горят всю ночь. с высоты город похож на схематичную микросхему, где каждый чип — жилой дом.</li>
                  </ul>

                  <div class="place-sub">улицы: бетон, граффити и капсулы</div>

                  <div class="place-pic left small">
                    <img src="https://commons.wikimedia.org/wiki/Special:FilePath/Causewaybay.JPG" alt="hong kong street">
                    <div class="place-cap">типичный уличный ритм города: плотность, свет, вывески</div>
                  </div>

                  <div class="place-a">Улицы сузились. Не физически, а психологически. Между зданиями натянуты защитные сетки (на случай, если человек в панике выпрыгнет сам).</div>
                  <div class="place-a">Граффити — отдельный язык города. Их два типа:</div>
                  <ul class="place-list">
                    <li><b>официальные</b> — нанесенные городскими службами. Это схемы эвакуации, указатели к убежищам, qr-коды для скачивания SafeRoute. Сделаны в едином стиле: белый шрифт на темно-синем фоне;</li>
                    <li><b>неофициальные</b> — уличное искусство. Здесь и портреты павших охотников, и стилизованные демоны, и надписи вроде «мы пережили сингапур», «пепел стучится в двери».</li>
                  </ul>
                  <div class="place-a">Уличные капсулы (общественные «белые купола») — привычный элемент пейзажа. Они похожи на старые телефонные будки, но больше и массивнее. Изнутри всегда горит мягкий белый свет. Часто возле них стоят очереди — люди ждут свои 20 минут тишины. Кто-то плачет. Кто-то просто смотрит в стену.</div>
                  <div class="place-clear"></div>
                </div>
              </div>

              <div class="place-block">
                <div class="place-block-title">краткая карта районов</div>
                <div class="place-block-inner">
                  <div class="place-table-wrap">
                    <table class="place-table">
                      <tr>
                        <th>район</th>
                        <th>внутренние территории</th>
                        <th>особенности</th>
                 
                      </tr>
                      <tr>
                        <td>централ</td>
                        <td>адмиралти / шунг-ван / пик</td>
                        <td>штаб, правительство / артефактный рынок, храм / частные дома</td>
                     
                      </tr>
                      <tr>
                        <td>ван чай</td>
                        <td>козвей-бей / саутерн</td>
                        <td>молодежь, арт-купола / плавучие дома</td>
                     
                      </tr>
                      <tr>
                        <td>коулун-сити</td>
                        <td>цим-ша-цуй / монгкок / вест-коулун / шам-шуй-по</td>
                        <td>рынок амулетов, мемориалы / плотная городская жизнь / культурный центр / нелегальные мастерские, контрабанда</td>
                   
                      </tr>
                      <tr>
                        <td>новые территории</td>
                        <td>сатхинь / лантау / сайкун</td>
                        <td>спальный район, устаревшие дома / научный центр, хранилища / побережье, природные зоны</td>
                       
                      </tr>
                    </table>
                  </div>
                </div>
              </div>

            </div>

            <div class="place-panel place-panel-2">

              <div class="place-block">
                <div class="place-block-title">центральный (central)</div>
                <div class="place-block-inner">

                  <div class="place-pic right small">
                    <img src="https://commons.wikimedia.org/wiki/Special:FilePath/Hong%20Kong%20Park%201.JPG" alt="hong kong park">
                    <div class="place-cap">гонконгский парк — зеленая передышка внутри центра</div>
                  </div>

                  <div class="place-a"><b>статус:</b> сердце власти и капитала. самое защищенное место города. здесь принимают решения, которые меняют мир.</div>
                  <div class="place-a">Финансовый центр, небоскребы, ночная жизнь. Он же — сердце всего Гонконга. Район зажат на узкой полоске земли между крутыми склонами гор и заливом Виктория. Из-за нехватки места город здесь рос не вширь, а вверх, превращаясь в те самые «каменные джунгли», которые стали визитной карточкой острова.</div>
                  <div class="place-a">Главная особенность централ, которую замечаешь сразу — его «двухэтажность». Из-за плотного трафика и сложного рельефа здесь развита сеть крытых надземных пешеходных переходов (Central Elevated Walkway). Это целая система эстакад и мостов, которая позволяет пройти пешком огромные расстояния, ни разу не коснувшись асфальта и не пересекаясь с машинами. Эти коридоры связывают между собой крупнейшие башни города, в одной из которых располагается головной штаб азиатского подразделения МООД.</div>
                  <div class="place-a"><b>что может заинтересовать:</b> колесо обозрения, Central Elevated Walkway, интернациональный финансовый центр, зоологический и ботанический сады гонконга, сеть магазинов (The Landmark), музей денег HKMA.</div>
                  <div class="place-clear"></div>
                </div>
              </div>

              <div class="place-block">
                <div class="place-block-title">адмиралти  (admiralty)</div>
                <div class="place-block-inner">

                  <div class="place-pic left small">
                    <img src="https://commons.wikimedia.org/wiki/Special:FilePath/Sculptures%20in%20Tamar%20Park.JPG" alt="tamar park hong kong">
                    <div class="place-cap">тамар парк у правительственного комплекса</div>
                  </div>

                  <div class="place-a">Несмотря на плотную застройку небоскребами, адмиралти не кажется очередными «каменными джунглями» благодаря обилию продуманных зеленых зон. В 2011 году здесь открыли комплекс Тамар, где разместились правительственные здания и штаб-квартиры.</div>
                  <div class="place-a">Главное здание — башня МООД, 60 этажей, из них 15 под землей. Фасад из обсидианового стекла с серебряной сеткой («чешуя дракона»), на крыше — вертолетная площадка для конвертопланов «Гром».</div>
                  <div class="place-a">Здания спроектированы таким образом, чтобы символизировать открытость власти, а прилегающий парк Тамар с его ровными газонами стал популярным местом, где можно просто посидеть на траве с видом на гавань Виктория. Здесь по выходным собираются и устраивают пикники сотни местных жителей.</div>
                  <div class="place-a"><b>что может заинтересовать:</b> гонконгский парк, тамар парк, пасифик-плейс, липпо-центр.</div>
                  <div class="place-clear"></div>
                </div>
              </div>

              <div class="place-block">
                <div class="place-block-title">шунг-ван (sheung wan)</div>
                <div class="place-block-inner">

                  <div class="place-pic right">
                    <img src="https://commons.wikimedia.org/wiki/Special:FilePath/Man%20Mo%20Temple%20in%20Hong%20Kong%20%286847500820%29.jpg" alt="man mo temple sheung wan">
                    <div class="place-cap">храм ман мо  — ключевая точка шунг-вана</div>
                  </div>

                  <div class="place-a">Смесь старого и нового. Исторические здания колониальной эпохи соседствуют с небоскребами. Узкие улочки, где раньше торговали травами и антиквариатом, теперь забиты ларьками с «анти-страх» амулетами и поддельными детекторами.</div>
                  <div class="place-a">Главная достопримечательность — храм Ман Мо, который теперь стал местом паломничества тех, кто молит о защите от демонов.</div>
                  <div class="place-a">Главная особенность шунг-вана — его рельеф. Район буквально карабкается вверх по склону пика Виктория, заставляя прохожих привыкать к бесконечным лестницам. Одна из самых известных — антикварная улица Ladder Street, каменный каскад, который когда-то был основной артерией для носильщиков паланкинов.</div>
                  <div class="place-a">В нижней, равнинной части района жизнь подчинена другому ритму. Здесь проходят пути знаменитого двухэтажного трамвая, который местные ласково называют «дин-дин». Поездка на нем вдоль Дес Ву Роуд Централ позволяет рассмотреть фасады колониальных зданий и современные витрины, не вставая с деревянного сиденья. Еще одна важная точка — Паромный терминал Гонконг–Макао. Отсюда скоростные суда уходят в Макао, превращая район в важный логистический узел для тех, чьи планы выходят за пределы острова.</div>
                  <div class="place-a"><b>что может заинтересовать:</b> Улица сушеных морепродуктов, Улица Фитотерапии, Hollywood Road, рынок Western Market, храм Ман Мо, антикварная улица Ladder Street, Паромный терминал Гонконг–Макао.</div>
                  <div class="place-clear"></div>
                </div>
              </div>

              <div class="place-block">
                <div class="place-block-title">пик виктория (the peak)</div>
                <div class="place-block-inner">

                  <div class="place-pic left">
                    <img src="https://commons.wikimedia.org/wiki/Special:FilePath/Skyline%20and%20Victoria%20Harbour%20at%20night%2C%20view%20from%20Victoria%20Peak%2C%20Hong%20Kong%2C%20China%20-%20%E9%A6%99%E6%B8%AF%EF%BC%8C%E4%B8%AD%E5%9B%BD%20%2819863406821%29.jpg" alt="view from victoria peak">
                    <div class="place-cap">вид с пика виктория</div>
                  </div>

                  <div class="place-a">Высочайшая точка острова Гонконг. Здесь располагаются особняки миллиардеров, защищенные как маленькие крепости. Пик Виктория представляет собой возвышенность с несколькими вершинами (наибольшая высота — 554 м над уровнем моря). На горе находятся здания, парки, кафе, смотровые площадки, популярные среди туристов, так как с них открывается живописный вид на Гонконг.</div>
                  <div class="place-a"><b>атмосфера:</b> тишина, дорого, безопасно. Те, кто живет здесь, не спускаются вниз без крайней необходимости. У них есть всё: свой детектор, свой психолог, свой запас Н-блокаторов. Они говорят о демонах так, как другие говорят о погоде — как о досадной, но управляемой помехе.</div>
                  <div class="place-clear"></div>
                </div>
              </div>

              <div class="place-block">
                <div class="place-block-title">ваньчай (wan chai) / козвей-бей (causeway bay) / саутерн (southern district) </div>
                <div class="place-block-inner">
                  <div class="place-a"><b>ваньчай:</b> исторический район, сочетающий офисы и жилые кварталы. статус: культурное сердце. старый город, который не сдался.</div>

                  <div class="place-pic right small">
                    <img src="https://commons.wikimedia.org/wiki/Special:FilePath/Causewaybay.JPG" alt="causeway bay hong kong">
                    <div class="place-cap">козвей-бей — ритм, свет и плотная коммерция</div>
                  </div>

                  <div class="place-a"><b>козвей-бей:</b> крупнейший торговый и шоппинг-район. Для Гонконга это место является главным торговым узлом. Здесь фиксируется самая высокая стоимость аренды коммерческой недвижимости в мире, что напрямую влияет на количество и уровень магазинов. Район представляет собой сетку узких улиц, которые практически полностью заняты торговыми центрами и высотными зданиями.</div>
                  <div class="place-a">Но теперь здесь же — «молодежные купола»: бесплатные капсулы для всех, кто не может позволить себе частную защиту. Они выглядят как яркие арт-объекты — расписаны граффити, внутри — мягкие подушки, зарядки для телефонов.</div>
                  <div class="place-a">Главная достопримечательность — «Стена смеха». Ежегодно 1 мая (в Фестиваль смеха) ее расписывают заново. В остальное время — это просто белая стена, на которой кто-то оставил надпись: «Смейся, и демон уйдет. Не работает? Смейся громче».</div>
                  <div class="place-a"><b>атмосфера:</b> днем — шопинг, еда, обычная жизнь. вечером — молодежь, тусовки, музыка. симбиот здесь чувствует себя уверенно — это их территория.</div>
                  <div class="place-a"><b>что может заинтересовать:</b> универмаги SOGO, гонконгский Таймс-сквер, парк Виктория, Lee Gardens.</div>
                  <div class="place-clear"></div>

                  <div class="place-pic left small">
                    <img src="https://commons.wikimedia.org/wiki/Special:FilePath/Repulse%20Bay%2C%20Hong%20Kong%2C%20from%20west.jpg" alt="repulse bay hong kong">
                    <div class="place-cap">репульс-бей — южный район у моря</div>
                  </div>

                  <div class="place-a"><b>саутерн:</b> прибрежный район с пляжами (репульс-бей) и Абердином — рыбацкими райончиками. Престижный жилой район южного округа острова Гонконг. Он расположен вдоль одноимённой бухты и включает современные жилые комплексы, частные виллы, бутик-магазины и рестораны. Район известен высоким уровнем жизни, красивыми видами на море и популярностью среди экспатов и состоятельных семей.</div>
                  <div class="place-a">Его ценят за сочетание природы и городской инфраструктуры. Здесь расположены элитные жилые дома, торговые комплексы и культовые достопримечательности. Район считается одним из самых респектабельных и при этом остаётся туристическим направлением благодаря своей атмосфере и расположению у моря.</div>
                  <div class="place-a">Символ района — жилой и торговый комплекс The Repulse Bay, в котором работают рестораны, бутики и культурные пространства. Популярный центр  предлагает кафе, фитнес-студии, бары и магазины с видом на море. Одной из достопримечательностей является храмовый ансамбль с фигурами богини Гуаньинь и морской богини Тин Хау. Район окружён зелёными склонами и виллами, что создаёт атмосферу престижного пригорода у моря.</div>
                  <div class="place-clear"></div>
                </div>
              </div>

            </div>

            <div class="place-panel place-panel-3">

              <div class="place-block">
                <div class="place-block-title">коулун-сити  (kowloon)</div>
                <div class="place-block-inner">
                  <div class="place-a"><b>статус:</b> теневая столица. город в городе. место, где хэйлун чувствуют себя хозяевами.</div>
                </div>
              </div>

              <div class="place-block">
                <div class="place-block-title">цим-ша-цуй (tsim sha tsui)</div>
                <div class="place-block-inner">

                  <div class="place-pic right">
                    <img src="https://commons.wikimedia.org/wiki/Special:FilePath/Tsim%20Sha%20Tsui%2C%20Hong%20Kong%20-%20panoramio%20%2827%29.jpg" alt="tsim sha tsui hong kong">
                    <div class="place-cap">цим-ша-цуй  — южная оконечность коулуна</div>
                  </div>

                  <div class="place-a">Представляет собой южную оконечность Коулунского полуострова в Гонконге, являясь крупным коммерческим, туристическим и культурным центром. Район известен панорамными видами на залив Виктория, множеством музеев, торговых комплексов, отелей и ресторанов, привлекая как местных жителей, так и гостей города.</div>
                  <div class="place-a">Здесь же располагается Нейтан-роуд. Эта легендарная улица Гонконга, пронзающая полуостров коулун с юга на север.</div>
                  <div class="place-a"><b>что может заинтересовать:</b> аллея звезд, K11 MUSEA, гонконгский музей искусств, нейтан-роуд, набережная Виктория Харбор.</div>
                  <div class="place-clear"></div>
                </div>
              </div>

              <div class="place-block">
                <div class="place-block-title">набережная виктория харбор  (victoria harbour)</div>
                <div class="place-block-inner">

                  <div class="place-pic left small">
                    <img src="https://commons.wikimedia.org/wiki/Special:FilePath/Hong%20Kong%20Skyline%20from%20Victoria%20Harbour%20%2854750093251%29.jpg" alt="victoria harbour">
                    <div class="place-cap">береговая линия виктория харбор</div>
                  </div>

                  <div class="place-a">Бухта Виктория (Виктория Харбор)  — это естественная глубоководная гавань, расположенная между островом Гонконг и полуостровом Коулун. Благодаря своему стратегическому положению и защищенным водам, она стала одним из самых оживленных морских портов в мире и ключевым фактором исторического и экономического развития города.</div>
                  <div class="place-clear"></div>
                </div>
              </div>

              <div class="place-block">
                <div class="place-block-title">монгкок  (mong kok)</div>
                <div class="place-block-inner">

                  <div class="place-pic right small">
                    <img src="https://commons.wikimedia.org/wiki/Special:FilePath/Mong%20Kok%20street%201.jpg" alt="mong kok hong kong">
                    <div class="place-cap">монгкок — теснота, вывески, бесконечное движение</div>
                  </div>

                  <div class="place-a">Самый плотнонаселенный район мира. Это квинтэссенция гонконгского урбанизма на полуострове коулун. Район официально признан одним из самых густонаселенных мест на планете, и это ощущается сразу. Здесь нет простора, зато в избытке неонового света, шума и движения. Свое название, которое переводится как «оживленный мыс», место оправдывает полностью.</div>
                  <div class="place-a">Изначально сельскохозяйственный и прибрежный, район быстро застроился, превратившись в лабиринт из бетона, где торговля идет на каждом квадратном метре. Здесь же расположен известный Женский рынок и рынок “золотых рыбок”.</div>
                  <div class="place-a"><b>атмосфера:</b> круглосуточная жизнь. Здесь всегда кто-то есть, всегда что-то происходит. Люди привыкли жить в толпе и не боятся ее — это их естественная среда. Но есть и обратная сторона: теснота рождает агрессию, агрессия — страх, страх — демонов.</div>
                  <div class="place-clear"></div>
                </div>
              </div>

              <div class="place-block">
                <div class="place-block-title">вест-коулун  (west kowloon)</div>
                <div class="place-block-inner">
                  <div class="place-a">Динамичный район с культурными объектами. Это, по сути, огромная бетонная платформа, которую отвоевали у моря на юге полуострова Kowloon. Еще лет тридцать назад здесь были портовые доки и плескалась вода, а сегодня выросли одни из самых дорогих башен в городе.</div>
                  <div class="place-a">Район получился масштабным, здесь нет привычной для Гонконга тесноты, зато много открытого пространства и видов на бухту. вест-коулун объединил в себе огромный вокзал, музеи и длинную набережную, которая выглядит странно на фоне плотных и шумных кварталов.</div>
                  <div class="place-a"><b>атмосфера:</b> здесь сталкиваются два мира. Днем — деловая жизнь, презентации новых систем защиты, переговоры о поставках обсидиана. Вечером — культурная жизнь, но с оглядкой на сирены. Люди здесь одеваются лучше, чем в Монгкоке, но хуже, чем в Централ. Они уже не бедны, но еще не богаты. И они очень боятся это потерять.</div>
                </div>
              </div>

              <div class="place-block">
                <div class="place-block-title">шам-шуй-по (sham shui po)</div>
                <div class="place-block-inner">

                  <div class="place-pic left small">
                    <img src="https://commons.wikimedia.org/wiki/Special:FilePath/Sham%20Shui%20Po%20Hong%20Kong%20%2816072371561%29.jpg" alt="sham shui po hong kong">
                    <div class="place-cap">шам-шуй-по — старые кварталы и суровый быт</div>
                  </div>

                  <div class="place-a">Район выглядит как декорация к фильмам о старом Гонконге: нагромождение вывесок, узкие тротуары и бесконечный поток людей. Район славится местными рынками, электроникой, доступной едой.</div>
                  <div class="place-a">Самый бедный район Коулуна. Старые дома, узкие улочки, запах жареного лука и дешевых благовоний. «Белые купола» — только в школах и полицейском участке. Жители полагаются на уличные капсулы (которые часто ломаются) и на соседей.</div>
                  <div class="place-a">Здесь же — нелегальные мастерские, где собирают фальшивые детекторы, поддельные артефакты, «анти-страх» амулеты из пластика. И здесь же — перевалочные склады настоящей контрабанды.</div>
                  <div class="place-a"><b>атмосфера:</b> суровая, но живая. Люди здесь не жалуются. Они выживают. Местные знают, когда приходит патруль МООД, а когда — Рамус. И те, и другие здесь бывают часто.</div>
                  <div class="place-clear"></div>
                </div>
              </div>

              <div class="place-block">
                <div class="place-block-title">новые территории  (new territories)</div>
                <div class="place-block-inner">

                  <div class="place-sub">ша тин (sha tin) </div>

                  <div class="place-pic right tiny">
                    <img src="https://commons.wikimedia.org/wiki/Special:FilePath/Sha%20Tin%2C%20Hong%20Kong%20-%20panoramio%20%284%29.jpg" alt="sha tin hong kong">
                    <div class="place-cap">ша тин</div>
                  </div>

                  <div class="place-a">Жилой район, парк, ипподром. Район Ша Тин — это история о том, как за сорок лет рисовые поля и тихие заводи превратились в бесконечные ряды высоток. Когда-то здесь была обычная сельская глушь, а теперь живет почти 700 тысяч человек. Главная достопримечательность — храм Чеконг, превращенный в центр психологической поддержки.</div>
                  <div class="place-a"><b>атмосфера:</b> спокойно, уныло, предсказуемо. Люди здесь работают на город, но живут за его пределами. Они устают от дороги, от постоянной тревоги, от мысли, что их район — первый, кого бросят в случае серьезной угрозы.</div>
                  <div class="place-clear"></div>

                  <div class="place-sub">лантау (lantau island)</div>

                  <div class="place-pic left small">
                    <img src="https://commons.wikimedia.org/wiki/Special:FilePath/Tian%20Tan%20Buddha%202023081302.jpg" alt="tian tan buddha lantau">
                    <div class="place-cap">лантау — большой будда и другой ритм острова</div>
                  </div>

                  <div class="place-a">Крупнейший остров, Диснейленд, Большой Будда. Лантау — самый крупный остров Гонконга, который по размеру почти вдвое превосходит главный остров с его небоскребами и суетой. Расположенный в устье Жемчужной реки, он долгое время оставался лишь территорией рыбацких деревень и монастырей. Сегодня здесь соседствуют современный технологичный аэропорт и пространства, где время словно остановилось.</div>
                  <div class="place-a">Это место для тех, кто хочет увидеть другой Гонконг: с горными тропами, дикими пляжами и неспешным ритмом жизни. Южная часть — НИИЭД. Лаборатории, хранилища артефактов, жилые комплексы для сотрудников. Зона строгого режима. Вход только по пропускам.</div>
                  <div class="place-clear"></div>

                  <div class="place-sub">сайкун (sai kung)</div>

                  <div class="place-pic right small">
                    <img src="https://commons.wikimedia.org/wiki/Special:FilePath/Sai%20Kung%2C%20Hong%20Kong.jpg" alt="sai kung hong kong">
                    <div class="place-cap">сайкун — спокойнее, зеленее, ближе к морю</div>
                  </div>

                  <div class="place-a">Живописный район с морепродуктами. Район в восточной части Новых территорий, известный как «задний сад» Гонконга из-за обилия парков и чистых пляжей. Территория включает Сайкун Таун, полуостров Сайкун и многочисленные острова. Это центр экологического туризма, сохранивший атмосферу рыбацкой деревни и природный ландшафт.</div>
                  <div class="place-a"><b>атмосфера:</b> здесь время течет иначе. Люди не смотрят SafeRoute каждые пять минут. Они знают: если придет беда, они встретят ее лицом к лицу. И возможно, это лучше, чем умирать в очереди к уличной капсуле.</div>
                  <div class="place-clear"></div>

                </div>
              </div>

            </div>

          </div>
        </div>
      </div>
    </div>

    <div class="place-side">
      <div class="place-head">гонконг</div>
      <div class="place-note">
        город-государство, где стекло, зелень, тревога, неон и бытовое выживание давно сплавились в один привычный ритм.
<br><br><br><br><br><br><br><br>
      </div>

      <div class="place-nav">
        <label for="place-tab-1" class="place-nav-btn">общая сводка</label>
        <label for="place-tab-2" class="place-nav-btn">остров гонконг</label>
        <label for="place-tab-3" class="place-nav-btn">коулун и новые территории</label>
      </div>

    </div>

  </div>
</div>
[/html][hideprofile]

0

4

[html]
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');

.cityfest-wrap{
  width:900px;
  margin:0 auto;
  font-family:'Manrope', sans-serif;
  color:#111;
  overflow:visible;
}

.cityfest-tab{
  position:fixed;
  left:-9999px;
  top:0;
  opacity:0;
  pointer-events:none;
}

.cityfest-main{
  display:flex;
  align-items:flex-start;
  position:relative;
}

.cityfest-content{
  width:670px;
  flex:0 0 670px;
  padding:0 10px 0 0;
  box-sizing:border-box;
  position:relative;
  z-index:2;
}

.cityfest-hero{
  height:92px;
  min-height:92px;
  padding:0 0 0 158px;
  box-sizing:border-box;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-start;
}

.cityfest-logo{
  font-family:'Dela Gothic One', sans-serif;
  font-size:84px;
  color:#2f2f2f;

  text-transform:uppercase;
  transform:translateY(16px);
  white-space:nowrap;
  user-select:none;
  opacity:.9;
}

.cityfest-panel-wrap{
  margin-top:6px;
  padding-left:6px;
}

.cityfest-panel-title,
.cityfest-block-title,
.cityfest-head,
.cityfest-nav-btn{
  display:block;
  background:#111111;
  color:#9bcb01;
  text-decoration:none;
  text-align:left;
  font-family:'Dela Gothic One', sans-serif;
  line-height:1.1;
  box-sizing:border-box;
  text-transform:lowercase;
  letter-spacing:.1px;
  padding:7px 8px;
}

.cityfest-panel-title{
  text-align: right;
  font-size:10px;
  margin:0 0 8px auto;
}

.cityfest-box{
  width:calc(100% + 95px);
  background:#efefef;
  border:1px solid #2a2a2a;
  padding:12px 12px 12px 0;
  box-sizing:border-box;
  position:relative;
  margin-right:-95px;
  z-index:3;
}

.cityfest-scroll{
  max-height:690px;
  overflow-y:auto;
  overflow-x:visible;
  padding-right:4px;
  box-sizing:border-box;
  scrollbar-width:thin;
  scrollbar-color:#4a4a4a transparent;
}

.cityfest-scroll::-webkit-scrollbar{
  width:4px;
}

.cityfest-scroll::-webkit-scrollbar-track{
  background:transparent;
}

.cityfest-scroll::-webkit-scrollbar-thumb{
  background:#4a4a4a;
  border:none;
  border-radius:0;
}

.cityfest-scroll::-webkit-scrollbar-button{
  display:none;
  width:0;
  height:0;
}

.cityfest-panel{
  display:none;
}

#cityfest-tab-1:checked ~ .cityfest-main .cityfest-content .cityfest-panel-1,
#cityfest-tab-2:checked ~ .cityfest-main .cityfest-content .cityfest-panel-2,
#cityfest-tab-3:checked ~ .cityfest-main .cityfest-content .cityfest-panel-3{
  display:block;
}

.cityfest-block{
  margin:0 0 16px;
  padding:0 0 12px;
  text-transform:lowercase;
  border-bottom:1px solid rgba(0,0,0,.08);
}

.cityfest-block:last-child{
  margin-bottom:0;
  border-bottom:none;
}

.cityfest-block-title{
  width:auto;
  display:inline-block;
  font-size:10px;
  margin:0 0 10px 0;
}

.cityfest-block-inner{
  padding-left:12px;
}

.cityfest-sub{
  font-family:'Dela Gothic One', sans-serif;
  font-size:13px;
  line-height:1.35;
  color:#111;
  text-transform:lowercase;
  margin:0 0 8px;
  letter-spacing:.15px;
  font-weight:400;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.cityfest-meta{
  margin:0 0 8px;
  font-family:'Manrope', sans-serif;
  font-size:11px;
  line-height:1.45;
  color:#3f3f3f;
  font-weight:700;
}

.cityfest-a{
  font-family:'Manrope', sans-serif;
  font-size:11px;
  line-height:1.5;
  color:#3f3f3f;
  font-weight:600;
}

.cityfest-a + .cityfest-a{
  margin-top:8px;
}

.cityfest-a b{
  font-weight:800;
  color:#111;
}

.cityfest-list{
  margin:8px 0 0;
  padding:0;
  list-style:none;
}

.cityfest-list li{
  position:relative;
  padding-left:16px;
  margin:0 0 8px;
  font-size:11px;
  line-height:1.45;
  color:#3f3f3f;
  font-weight:600;
}

.cityfest-list li:before{
  content:"✶";
  position:absolute;
  left:0;
  top:0;
  color:#4f4f4f;
  font-size:11px;
}

.cityfest-side{
  width:230px;
  flex:0 0 230px;
  min-height:560px;
  background:
    linear-gradient(rgba(55,55,55,.78), rgba(55,55,55,.78)),
    linear-gradient(rgba(215,215,215,.18), rgba(215,215,215,.18)),
    url('https://i.pinimg.com/1200x/88/f8/7e/88f87ea498e2699cc83f137290d3c426.jpg') center center / cover no-repeat;
  padding:14px 0 12px;
  box-sizing:border-box;
  text-align:left;
  position:relative;
  z-index:1;
}

.cityfest-head{
  width:192px;
  font-size:15px;
  color:#ffffff;
  margin:0 0 8px auto;
  text-align:right;
}

.cityfest-note{
  width:192px;
  margin:0 10px 10px auto;
  color:#fff;
  font-size:9px;
  line-height:1.25;
  font-weight:700;
  text-align:right;
}

.cityfest-nav{
  width:192px;
  margin:14px 10px 0 auto;
}

.cityfest-nav-btn{
  width:100%;
  font-size:10px;
  margin:0 10px 6px;
  cursor:pointer;
  transition:.25s ease;
  text-align:right;
}

.cityfest-nav-btn:hover{
  color:#646464;
}

#cityfest-tab-1:checked ~ .cityfest-main .cityfest-side label[for="cityfest-tab-1"],
#cityfest-tab-2:checked ~ .cityfest-main .cityfest-side label[for="cityfest-tab-2"],
#cityfest-tab-3:checked ~ .cityfest-main .cityfest-side label[for="cityfest-tab-3"]{
  color:#fff;
  box-shadow:inset -3px 0 0 #9bcb01;
}

.cityfest-dots{
  position:absolute;
  right:115px;
  bottom:54px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.cityfest-caps{
  text-transform:uppercase !important;
}

.cityfest-dot{
  width:22px;
  height:22px;
  border-radius:50%;
  background:#9bcb01;
  display:block;
}

.cityfest-table-wrap{
  margin:10px 0 6px;
  overflow-x:auto;
}

.cityfest-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  background:#f4f4f4;
  border:1px solid rgba(0,0,0,.12);
}

.cityfest-table th,
.cityfest-table td{
  border:1px solid rgba(0,0,0,.08);
  padding:10px 10px;
  vertical-align:top;
  text-align:left;
}

.cityfest-table th{
  font-family:'Manrope', sans-serif;
  font-size:11px;
  line-height:1.3;
  font-weight:800;
  color:#111;
  background:rgba(0,0,0,.03);
}

.cityfest-table td{
  font-family:'Manrope', sans-serif;
  font-size:11px;
  line-height:1.45;
  font-weight:600;
  color:#3f3f3f;
}
</style>

<div class="cityfest-wrap">

  <input class="cityfest-tab" type="radio" name="cityfest-tabs" id="cityfest-tab-1" checked>
  <input class="cityfest-tab" type="radio" name="cityfest-tabs" id="cityfest-tab-2">
  <input class="cityfest-tab" type="radio" name="cityfest-tabs" id="cityfest-tab-3">

  <div class="cityfest-main">

    <div class="cityfest-content">
      <div class="cityfest-hero">
        <div class="cityfest-logo">rituals</div>
      </div>

      <div class="cityfest-panel-wrap">
        <div class="cityfest-panel-title">городские праздники, память и ритуалы повседневного сопротивления</div>

        <div class="cityfest-box">
          <div class="cityfest-scroll">

            <div class="cityfest-panel cityfest-panel-1">

              <div class="cityfest-block">
                <div class="cityfest-block-title">краткий календарь</div>
                <div class="cityfest-block-inner">
                  <div class="cityfest-table-wrap">
                    <table class="cityfest-table">
                      <tr>
                        <th>праздник</th>
                        <th>дата</th>
                        <th>статус</th>
                      </tr>
                      <tr>
                        <td>Праздник фонарей (Чжунцю)</td>
                        <td>15-й день 8-го лунного месяца</td>
                        <td>Государственный праздник, выходной</td>
                      </tr>
                      <tr>
                        <td>Цинмин</td>
                        <td>4 или 5 апреля</td>
                        <td>Официальный выходной во всех странах-членах <span class="cityfest-caps">ВСБ</span></td>
                      </tr>
                      <tr>
                        <td>День памяти Сингапура</td>
                        <td>9 ноября</td>
                        <td>Международный день траура, выходной</td>
                      </tr>
                      <tr>
                        <td>«Час тишины»</td>
                        <td>Каждый день, 20:00</td>
                        <td>Неофициальный, но повсеместный</td>
                      </tr>
                      <tr>
                        <td>Новый год</td>
                        <td>31 декабря — 1 января</td>
                        <td>Выходной</td>
                      </tr>
                      <tr>
                        <td>Фестиваль смеха</td>
                        <td>Первое воскресенье мая</td>
                        <td>Городской праздник</td>
                      </tr>
                      <tr>
                        <td>Фестиваль фонариков</td>
                        <td>15 июня</td>
                        <td>Международный</td>
                      </tr>
                      <tr>
                        <td>День светлячков</td>
                        <td>21 декабря</td>
                        <td>Детский праздник</td>
                      </tr>
                      <tr>
                        <td>Фестиваль «Зеленый маршрут»</td>
                        <td>Первая суббота октября</td>
                        <td>Городской праздник</td>
                      </tr>
                    </table>
                  </div>
                </div>
              </div>

              <div class="cityfest-block">
                <div class="cityfest-block-title">праздники и ритуалы: жизнь наперекор</div>
                <div class="cityfest-block-inner">
                  <div class="cityfest-a">Даже в городе, живущем под постоянным фоном угрозы, праздники не исчезли. Они просто изменились. Где-то стали тише, где-то строже, где-то — наоборот, ярче и упрямее. Для Гонконга праздник давно перестал быть только развлечением: теперь это ещё и способ пережить страх, удержать память и напомнить себе, что жизнь всё ещё сильнее ужаса.</div>
                </div>
              </div>

              <div class="cityfest-block">
                <div class="cityfest-block-title">праздник фонарей (чжунцю)</div>
                <div class="cityfest-block-inner">
                  <div class="cityfest-meta"><b>Дата:</b> 15-й день 8-го лунного месяца (сентябрь — начало октября по григорианскому календарю)</div>
                  <div class="cityfest-meta"><b>Статус:</b> Государственный праздник, выходной день.</div>

                  <div class="cityfest-a">Раньше это был праздник урожая. Теперь — праздник света. В ночь полнолуния люди выходят на улицы с фонариками. Но не бумажными, а светодиодными, на артефактных батарейках. Их развешивают на балконах, на крышах, на защитных сетках. Говорят, свет отпугивает демонов, которые боятся яркого, ровного сияния. Город превращается в россыпь огней. Люди загадывают желания. Самые смелые загадывают: «Пусть Сингапур не повторится». Остальные просто просят тишины.</div>

                  <div class="cityfest-sub">ритуалы</div>
                  <ul class="cityfest-list">
                    <li>За 2-3 дня до праздника горожане начинают развешивать светодиодные фонари. Каждый район имеет свой цвет: в Цим Ша Цуй — теплый желтый, в Центральном районе — белый, в старых кварталах — красный (хотя красный в мирное время считается «цветом тревоги», в этот день он символизирует не опасность, а жизнь).</li>
                    <li>В ночь праздника люди выходят на крыши, на набережную, на смотровые площадки. Зажигают фонари и просто смотрят на город, который превращается в море огней.</li>
                    <li>Едят лунные пряники (юэбин). Теперь они выпускаются в двух версиях: традиционные (с бобовой пастой и соленым желтком) и «спокойные» (с добавлением экстракта мелиссы и лемонграсса, в упаковке с инструкцией: «Съешьте за 20 минут до сна. Не вызывает тревожных снов»).</li>
                    <li>Дети получают «светлячков» — маленькие брелоки с мягким мерцающим светом, которые работают на артефактных батарейках. Их вешают на рюкзаки, на коляски, на шею домашним животным. Считается, что свет защищает от демонов, притаившихся в темноте.</li>
                  </ul>

                  <div class="cityfest-a"><b>Особенность:</b> В эту ночь уровень уличного освещения намеренно снижают на 30%. Город должен быть не залит холодным светом, а мерцать — как живой. Это единственная ночь в году, когда Гонконг позволяет себе быть немного темным.</div>
                </div>
              </div>

              <div class="cityfest-block">
                <div class="cityfest-block-title">цинмин (день поминовения усопших)</div>
                <div class="cityfest-block-inner">
                  <div class="cityfest-meta"><b>Дата:</b> 4 или 5 апреля</div>
                  <div class="cityfest-meta"><b>Статус:</b> Официальный выходной день во всех странах-членах <span class="cityfest-caps">ВСБ</span>.</div>

                  <div class="cityfest-a">Стал главным праздником года. Люди приходят к импровизированным мемориалам — тем, что выросли на месте старых разломов, у стен с именами погибших охотников, на набережной, откуда видно море — туда, где был Сингапур. Жгут благовония, оставляют еду, зажигают свечи. Но главный ритуал — молчание. Город затихает на 15 минут. Даже сирены не воют. Только гул генераторов. Говорят, в эти минуты можно услышать голоса тех, кто не вернулся. Никто не знает, правда ли это. Но каждый год кто-то клянется, что слышал.</div>

                  <div class="cityfest-sub">ритуалы</div>
                  <ul class="cityfest-list">
                    <li>С 8:00 до 20:00 — люди приходят к мемориалам, стенам с именами погибших, к местам старых разломов.</li>
                    <li>Зажигают благовония (обязательно — с ароматом сандала или ладана, они считаются «чистыми»).</li>
                    <li>Оставляют подношения: еду (чаще всего рисовые шарики с бобовой пастой, традиционные для Цинмин), чай, фрукты.</li>
                    <li>В 12:00 — «Час молчания». Останавливается движение, затихают сирены, люди молчат 15 минут. Даже генераторы белого шума переводят на пониженную мощность.</li>
                    <li>В 20:00 — зажигают бумажные фонарики (теперь светодиодные, но стилизованные под старые). Их развешивают на балконах, на защитных сетках, на специальных стойках у мемориалов. Говорят, свет помогает душам найти дорогу.</li>
                  </ul>
                </div>
              </div>

              <div class="cityfest-block">
                <div class="cityfest-block-title">день памяти сингапура</div>
                <div class="cityfest-block-inner">
                  <div class="cityfest-meta"><b>Дата:</b> 9 ноября (фиксированная)</div>
                  <div class="cityfest-meta"><b>Статус:</b> Международный день траура. Выходной во всех странах-членах <span class="cityfest-caps">ВСБ</span>.</div>

                  <div class="cityfest-sub">ритуалы</div>
                  <ul class="cityfest-list">
                    <li>С 00:00 до 06:00 — городские сирены молчат. Это единственные 6 часов в году, когда их не слышно.</li>
                    <li>В 08:00 — на набережной Виктория-Харбор зачитывают имена погибших. Не всех — это заняло бы больше суток. Зачитывают имена тех, кто служил в Восточно-Азиатском штабе: охотников, ученых, волонтеров. Церемония длится 3 часа.</li>
                    <li>В 14:00 — минута молчания по всему городу. Город погружается в абсолютную тишину на 60 секунд. Говорят, в эту минуту слышно, как бьется сердце города.</li>
                    <li>Вечером люди выходят на набережную с алыми лентами. Ленты привязывают к перилам, к фонарным столбам, к защитным сеткам. К утру следующего дня город становится алым. Коммунальные службы убирают ленты только через неделю.</li>
                    <li>На SafeRoute в этот день вместо обычной карты — черный экран с одной надписью: «Сингапур. 2027. Мы помним». Кнопка «Тревога» работает, но перед вызовом появляется предупреждение: «Вы уверены?».</li>
                  </ul>

                  <div class="cityfest-a"><b>Особенность:</b> В этот день не работают кафе, не продают алкоголь, не проводят развлекательные мероприятия. Штраф за нарушение — 50 000 гонконгских долларов. Но штрафуют редко — горожане чтят память сами.</div>
                </div>
              </div>

            </div>

            <div class="cityfest-panel cityfest-panel-2">

              <div class="cityfest-block">
                <div class="cityfest-block-title">«час тишины»</div>
                <div class="cityfest-block-inner">
                  <div class="cityfest-meta"><b>Дата:</b> Каждый день, 20:00</div>
                  <div class="cityfest-meta"><b>Статус:</b> Неофициальный, но повсеместный. Не закреплен законодательно, но соблюдается большинством горожан.</div>

                  <div class="cityfest-a">Каждый день в 20:00 люди на 5 минут выключают звук в наушниках, закрывают глаза и просто молчат. Это не религиозное, не государственное. Это народное. Так люди «перезагружают» мозг, сбрасывают накопившийся за день страх. В это время в городе становится чуть тише. Кто-то говорит, что это единственное время, когда Гонконг действительно отдыхает.</div>
                </div>
              </div>

              <div class="cityfest-block">
                <div class="cityfest-block-title">фестиваль смеха (гонконг)</div>
                <div class="cityfest-block-inner">
                  <div class="cityfest-meta"><b>Дата:</b> Первое воскресенье мая</div>
                  <div class="cityfest-meta"><b>Статус:</b> Городской праздник. Выходной в Гонконге и Макао. В других регионах отмечается факультативно.</div>

                  <div class="cityfest-a"><b>Легенда:</b> Говорят, в 2015 году психологи <span class="cityfest-caps">ЭМРТ</span>доказали, что коллективный смех создает вибрации, которые дезориентируют демонов классов <span class="cityfest-caps">С</span> и <span class="cityfest-caps">В</span>. Первый фестиваль устроили ветераны Сингапура — просто чтобы перестать плакать. Теперь это «анти-траурный» день в году.</div>

                  <div class="cityfest-sub">уличные представления</div>
                  <ul class="cityfest-list">
                    <li>Клоуны, мимы, уличные театры. Но с условием: никакой грусти, никаких слез. Лучшие номера получают премию «Золотая улыбка».</li>
                    <li>Жонглеры с обсидиановыми шарами — это и зрелище, и демонстрация того, что даже опасный материал может быть частью радости.</li>
                    <li>Стендап-комики выступают прямо на улицах. Главное правило шуток: никаких демонов, никакой политики, никакого Сингапура. Только бытовое, человеческое, смешное. Говорят, лучшие шутки рождаются в очередях к «белым куполам».</li>
                    <li>Уличные конкурсы и забавы: от поедания острой еды на скорость до конкурса по самой ослепительной улыбке.</li>
                  </ul>

                  <div class="cityfest-sub">вечерний карнавал: «шествие света»</div>
                  <div class="cityfest-a">В 20:00 начинается главное событие. Люди идут по набережной с фонариками, но не белыми и не алыми, а разноцветными — желтыми, зелеными, синими, розовыми.</div>
                </div>
              </div>

              <div class="cityfest-block">
                <div class="cityfest-block-title">фестиваль фонариков (гавайи, перенято гонконгом)</div>
                <div class="cityfest-block-inner">
                  <div class="cityfest-meta"><b>Дата:</b> 15 июня</div>
                  <div class="cityfest-meta"><b>Статус:</b> Международный. Выходной на Гавайях, в Гонконге — рабочий день, но вечером гуляют все.</div>

                  <div class="cityfest-a"><b>Легенда:</b> Пришел с Гавайев, где после победы над демоном Цунами люди запускали фонарики в океан, чтобы показать: жизнь сильнее смерти. В Гонконге прижился как праздник, который не про смерть, а про жизнь.</div>

                  <div class="cityfest-sub">ритуалы</div>

                  <div class="cityfest-a"><b>Запуск бумажных корабликов</b></div>
                  <div class="cityfest-a">Днем дети мастерят кораблики из вощеной бумаги. Пишут на них свои желания. Вечером запускают в гавани. Кораблики должны проплыть как можно дальше, не перевернувшись. Если доплыл до середины бухты — желание сбудется. Если утонул — значит, желание было не тем, что нужно.</div>

                  <div class="cityfest-a"><b>«Живые фонари»</b></div>
                  <div class="cityfest-a">Взрослые запускают в небо светодиодные фонарики на тонких тросах. Они парят на высоте 10-20 метров, похожие на светлячков. К 22:00 небо над бухтой превращается в мерцающее полотно. Это единственный вечер в году, когда свет не отпугивает демонов, а зовет жизнь.</div>

                  <div class="cityfest-a"><b>Музыка: «Океанские ритмы»</b></div>
                  <div class="cityfest-a">На набережной играют музыку — не эмбиент, не лоу-фай, а живые барабаны, гитары, голоса. Люди танцуют. Танцы — это тоже защита: движение не дает страху застыть в теле.</div>
                </div>
              </div>

              <div class="cityfest-block">
                <div class="cityfest-block-title">фестиваль «зеленый маршрут» (велосипедный праздник)</div>
                <div class="cityfest-block-inner">
                  <div class="cityfest-meta"><b>Дата:</b> Первая суббота октября</div>
                  <div class="cityfest-meta"><b>Статус:</b> Городской праздник. Выходной для всех, кто хочет участвовать.</div>

                  <div class="cityfest-a"><b>Легенда:</b> Придуман молодежью как способ показать, что город может быть не только крепостью, но и местом для жизни. «Зеленый маршрут» — это безопасный путь, но в этот день он становится еще и красивым.</div>

                  <div class="cityfest-sub">вело-карнавал</div>
                  <div class="cityfest-a">Тысячи людей выезжают на велосипедах, самокатах, роликах. Украшают транспорт гирляндами, колокольчиками, смешными игрушками. Едут по специально подготовленному «зеленому маршруту» — от Западного рынка до набережной, 15 километров без единой «красной» зоны.</div>

                  <div class="cityfest-sub">пикник на набережной</div>
                  <div class="cityfest-a">В финале — общий пикник. Люди приносят еду, делятся друг с другом. В этот день не работают генераторы белого шума — их заменяет живая музыка. Гитары, флейты, губные гармошки. Кто умеет — играет. Кто не умеет — подпевает.</div>
                </div>
              </div>

            </div>

            <div class="cityfest-panel cityfest-panel-3">

              <div class="cityfest-block">
                <div class="cityfest-block-title">детская традиция: «смешные маски»</div>
                <div class="cityfest-block-inner">
                  <div class="cityfest-a">За неделю до фестиваля дети в школах и дет.садах мастерят маски — смешные, страшные, нелепые. Носят их весь день. Считается, что маска «обманывает» демона: он видит не лицо, не страх, а только гримасу. Лучшие маски награждают на «Битве улыбок».</div>
                </div>
              </div>

              <div class="cityfest-block">
                <div class="cityfest-block-title">детский праздник: «день светлячков»</div>
                <div class="cityfest-block-inner">
                  <div class="cityfest-meta"><b>Дата:</b> 21 декабря (день зимнего солнцестояния)</div>
                  <div class="cityfest-meta"><b>Статус:</b> Детский праздник. В Гонконге — выходной для родителей с детьми до 14 лет.</div>

                  <div class="cityfest-a"><b>Легенда:</b> Самый темный день в году — день, когда страх подступает ближе всего. Люди придумали дать детям свет, чтобы они не боялись. Светлячки — символ того, что даже в полной тьме есть маленькие огоньки.</div>

                  <div class="cityfest-sub">утром: «световой мешок»</div>
                  <div class="cityfest-a">Каждый ребенок получает «мешок светлячков» — маленький рюкзачок с мягкими светодиодами внутри. Рюкзачок светится изнутри, и кажется, что у ребенка за спиной целый рой светлячков. Дети ходят с ними весь день. Вечером мешочки забирают родители — но дети знают, что на следующий год им дадут новые.</div>

                  <div class="cityfest-sub">днем: «охота на страх» (игра)</div>
                  <div class="cityfest-a">В парках и школьных дворах проходят игры. Ведущие (охотники в отставке или волонтеры) прячут карточки с изображениями демонов. Дети должны их найти. Но не просто найти — а «посмеяться» над каждой. Кто громче и веселее смеется над «страшилкой» — тот победил. Психологи говорят, что это лучшая терапия от детских ночных кошмаров.</div>

                  <div class="cityfest-sub">мастер-классы: «мой первый артефакт»</div>
                  <div class="cityfest-a">Дети делают простейшие «артефакты» из картона и фольги: «детекторы страха» (работают на воображении), «обсидиановые мечи» (из черного картона), «защитные браслеты» (из фольги и бусин). Это не магия — это игра. Но дети верят, что браслеты работают. И, возможно, вера — лучшая защита.</div>

                  <div class="cityfest-sub">вечером: «шествие светлячков»</div>
                  <div class="cityfest-a">В 18:00 (когда темнеет) дети выходят на главные улицы со своими светящимися рюкзачками. Идут парадом, поют песенки (специально написанные для праздника — простые, веселые, с глупыми рифмами). Взрослые стоят вдоль дорог и хлопают.</div>

                  <div class="cityfest-a"><b>В 20:00 — «Зажги светлячка».</b> Каждый ребенок получает настоящего светлячка — маленький светодиодный брелок, который мерцает, как живой. Брелок крепится на рюкзак, на куртку, на шапку. Дети клянутся, что брелоки светятся ярче, когда рядом взрослые. Взрослые не спорят.</div>

                  <div class="cityfest-sub">подарки</div>
                  <div class="cityfest-a">В этот день дарят не игрушки, а книги. Сказки. Но не страшные, не про демонов, а про обычных людей, про смешных зверей, про приключения. Лучший подарок — книга, которую можно читать вслух перед сном. Считается, что хорошая сказка — лучший «белый шум».</div>
                </div>
              </div>

            </div>

          </div>
        </div>
      </div>
    </div>

    <div class="cityfest-side">
      <div class="cityfest-head">городские праздники</div>

      <div class="cityfest-note">
        в гонконге праздник давно перестал быть просто отдыхом. теперь это еще и память, бытовая защита, привычка держаться вместе и способ не дать страху стать нормой. <br><br><br>
      </div>

      <div class="cityfest-nav">
        <label for="cityfest-tab-1" class="cityfest-nav-btn">основные праздники</label>
        <label for="cityfest-tab-2" class="cityfest-nav-btn">народные ритуалы</label>
        <label for="cityfest-tab-3" class="cityfest-nav-btn">детские праздники</label>
      </div>

      <div class="cityfest-dots">
        <span class="cityfest-dot"></span>
        <span class="cityfest-dot"></span>
        <span class="cityfest-dot"></span>
        <span class="cityfest-dot"></span>
        <span class="cityfest-dot"></span>
        <span class="cityfest-dot"></span>
      </div>
    </div>

  </div>
</div>
[/html][hideprofile]

0


Вы здесь » свалка №4 » forbidden fruits of eden » о городе


Рейтинг форумов | Создать форум бесплатно