ӨГӨГДӨЛ: Өвлийн саруудын цаг агаарын төлөвийг хялбараар уншаарай

Ирэх өвлийн сарууд буюу 12, 1, 2-р саруудын цаг агаарын төлөвийг цаг уурын байгууллагаас мэдээлснийг уншигч танд уншихад хялбар байдлаар хүргэж байна. 12-р сард нутгийн хойд, төв, зүүн хэсгээр хүйтэн, зүүн, төв, говийн аймгуудаар цас их орно. 1-р сард нутгийн баруун, хойд хэсгээр дулаан, хойд, зүүн аймгуудаар цас их орно. 2-р сард ихэнх нутгаар дулаан, төв, зүүн аймгуудаар цас их орно. МЭДЭЭЛЭЛ УНШИХ ЗААВАР: Тухайн сарын олон жилийн дундаж цаг агаарын төлөв ямар байдаг, энэ жил тухайн дунджаас ямар байх талаар мэдээллийг АЙМГААР НЬ ХАЙЖ харахаас гадна харьцуулсан газрын ЗУРГУУДЫГ ГҮЙЛГЭЖ үзвэл илүү ойлгомжтой байх болно. Олон жилийн дундаж гэдэг нь 1991–2020 оны хоорондох тухайн цаг уурын хэмжигдэхүүний дундаж утга юм. /* ---------- Үндсэн өнгө (гэрэл / харанхуй горим) ---------- */ :root { --bg: #ffffff; --surface: #f5f5f2; --text: #1f1f1d; --text2: #5f5e5a; --muted: #888780; --border: rgba(0,0,0,.15); --border-strong: rgba(0,0,0,.35); /* Табын өнгө */ --temp: #185FA5; --temp-soft: #E6F1FB; --temp-text: #0C447C; /* цэнхэр */ --rain: #3B6D11; --rain-soft: #EAF3DE; --rain-text: #27500A; /* ногоон */ } @media (prefers-color-scheme: dark) { :root { --bg: #1c1c1a; --surface: #2a2a27; --text: #f1efe8; --text2: #b4b2a9; --muted: #888780; --border: rgba(255,255,255,.18); --border-strong: rgba(255,255,255,.4); --temp: #378ADD; --temp-soft: #0C447C; --temp-text: #B5D4F4; --rain: #639922; --rain-soft: #27500A; --rain-text: #C0DD97; } } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; line-height: 1.5; } .wrap { max-width: 1040px; margin: 0 auto; padding: 24px 16px 40px; } button, input { font: inherit; font-size: 14px; color: var(--text); background: var(--bg); border: .5px solid var(--border-strong); border-radius: 8px; height: 36px; padding: 0 12px; } button { cursor: pointer; } button:focus-visible, input:focus-visible, .cmp:focus-visible { outline: 2px solid #378ADD; outline-offset: 2px; } /* ---------- Сарууд (дарж нээгддэг) ---------- */ .month { border: .5px solid var(--border-strong); border-radius: 12px; margin-bottom: 12px; overflow: hidden; } .month-head { width: 100%; height: auto; min-height: 48px; padding: 10px 14px; text-align: left; border: 0; border-radius: 0; background: var(--surface); display: flex; justify-content: space-between; align-items: center; font-size: 16px; font-weight: 500; } .month-head .chev { transition: transform .15s; } .month.open .chev { transform: rotate(180deg); } .month-body { padding: 14px; } /* ---------- Табууд: температур = цэнхэр, хур тунадас = ногоон ---------- */ .tabs { display: flex; gap: 8px; margin-bottom: 18px; } .tab { padding: 0 16px; } .tab-temp { background: var(--temp-soft); color: var(--temp-text); border-color: var(--temp); } .tab-rain { background: var(--rain-soft); color: var(--rain-text); border-color: var(--rain); } .tab-temp.active { background: var(--temp); color: #fff; } .tab-rain.active { background: var(--rain); color: #fff; } /* ---------- 1. ОЖД туузан диаграм (туузны хэсэг бүр + доор нь тайлбар) ---------- */ .zones { display: flex; margin-bottom: 28px; } .zitem { width: var(--w); } .zone { height: 34px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; } .zitem:first-child .zone { border-radius: 6px 0 0 6px; } .zitem:last-child .zone { border-radius: 0 6px 6px 0; } .zcap { padding: 8px 10px 0 0; font-size: 14px; color: var(--text2); line-height: 1.4; } .zcap b { font-weight: 500; color: var(--text); } /* ---------- 2. Аймгийн схем ---------- */ .search { display: flex; gap: 8px; margin-bottom: 10px; } .search input { flex: 1; } .result { font-size: 14px; margin-bottom: 10px; min-height: 22px; } .result:empty { min-height: 0; margin: 0; } .result .row { display: flex; align-items: center; gap: 8px; padding: 2px 0; } .dot, .swatch { width: 14px; height: 14px; border-radius: 4px; flex: none; border: .5px solid var(--border-strong); } .grid-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .grid-hint { display: none; font-size: 12px; color: var(--muted); margin: 0 0 6px; } .grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 96px; gap: 6px; margin-bottom: 10px; } .tile { border: .5px solid var(--border-strong); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; font-size: 14px; line-height: 1.25; text-align: center; transition: opacity .15s; } .tile-full { align-items: center; justify-content: center; padding: 2px; } .tile-name { background: var(--surface); font-weight: 500; padding: 3px 2px; } .tile-parts { flex: 1; display: flex; } .tile-parts.col { flex-direction: column; } .tile-parts > div { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2px; } .tile.dim { opacity: .22; } .tile.hit { outline: 2px solid var(--text); outline-offset: 1px; } .legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--text2); } .legend span { display: flex; align-items: center; gap: 6px; } /* ---------- Газрын зураг товч ---------- */ .mapcard { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; height: auto; margin-top: 16px; padding: 12px 14px; text-align: left; background: #FCEBEB; border: .5px solid #F09595; border-radius: 12px; color: #791F1F; } .mapcard:hover { background: #F9DEDE; } .mapcard .big { display: block; font-size: 20px; font-weight: 500; line-height: 1.3; } .mapcard .small { display: block; font-size: 13px; color: #A32D2D; } .mapcard .thumb { display: block; width: 180px; flex: none; border-radius: 8px; border: .5px solid #F09595; background: #fff; overflow: hidden; } @media (prefers-color-scheme: dark) { .mapcard { background: #501313; border-color: #A32D2D; color: #F7C1C1; } .mapcard:hover { background: #611818; } .mapcard .small { color: #F09595; } } /* ---------- Харьцуулах цонх ---------- */ .modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: none; align-items: center; justify-content: center; padding: 12px; z-index: 10; } .modal.on { display: flex; } .dialog { background: var(--bg); border-radius: 12px; width: 100%; max-width: 960px; max-height: 100%; overflow: auto; padding: 14px; } .dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .dialog-head h3 { font-size: 16px; font-weight: 500; margin: 0; } .cmp { position: relative; width: 100%; aspect-ratio: 841 / 463; overflow: hidden; border-radius: 8px; background: #fff; user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: ew-resize; } .cmp .layer { position: absolute; inset: 0; pointer-events: none; } .layer img, .thumb img, .colorbar img { display: block; width: 100%; } .crop { position: relative; overflow: hidden; width: 100%; background: #fff; } .crop img { position: absolute; width: auto; max-width: none; } .cmp .line { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.5); pointer-events: none; } .cmp .knob { position: absolute; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: #fff; border: 1.5px solid #1f1f1d; color: #1f1f1d; display: flex; align-items: center; justify-content: center; pointer-events: none; } .chip { position: absolute; top: 8px; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; background: rgba(255,255,255,.92); color: #1f1f1d; border: .5px solid rgba(0,0,0,.3); pointer-events: none; } .chip.left { left: 8px; } .chip.right { right: 8px; } .colorbar { width: 100%; margin-top: 8px; background: #fff; border-radius: 6px; overflow: hidden; } .hint { font-size: 12px; color: var(--muted); margin: 8px 0 0; } @media (max-width: 480px) { .mapcard .big { font-size: 17px; } .mapcard .thumb { width: 92px; } } /* ---------- Бүс нутгийн тайлбар (notes) ---------- */ .notes { margin-top: 18px; font-size: 14px; color: var(--text2); } .notes p { margin: 0 0 10px; } .notes b { font-weight: 500; color: var(--text); } .swatch { display: inline-block; } .notes h2 { color: var(--text); } /* Зураг дээрх тэмдэглэгээний тайлбар */ .map-note { font-size: 14px; color: var(--text); margin: 10px 0 0; } .map-note:empty { display: none; } /* ---------- Утасны дэлгэц ---------- */ @media (max-width: 600px) { .wrap { padding: 12px 8px 28px; } .month-body { padding: 10px; } .tabs { gap: 6px; } .tab { flex: 1; padding: 0 6px; font-size: 13px; } /* Туузны хэсгүүд босоо жагсана */ .zones { flex-direction: column; gap: 12px; margin-bottom: 20px; } .zitem { width: 100%; } .zitem .zone { border-radius: 6px !important; } .zcap { padding-right: 0; } /* Аймгийн схем: багтахгүй тул хажуу тийш гүйлгэнэ, нүд нь уншигдахуйц */ .grid-hint { display: block; } .grid { min-width: 640px; grid-auto-rows: 72px; } .tile { font-size: 12px; } .tile-name { font-size: 11px; padding: 2px 1px; } .search input { min-width: 0; } .dialog { padding: 10px; } .dialog-head h3 { font-size: 14px; } .chip { font-size: 11px; padding: 2px 8px; } .map-note { font-size: 13px; } } /* ---------- Аймгийн газрын зураг ---------- */ :root { --sea: #eef3f8; } @media (prefers-color-scheme: dark) { :root { --sea: #232a31; } } .map-scroll { background: var(--sea); border: .5px solid var(--border); border-radius: 12px; overflow-x: auto; margin-bottom: 10px; } .amap { display: block; width: 100%; height: auto; } .amap .outline { fill: transparent; stroke: #fff; stroke-width: .8; stroke-linejoin: round; cursor: pointer; pointer-events: all; } .amap .ag:hover .outline { stroke: #1f1f1d; stroke-width: 1.3; } .amap .ag { transition: opacity .15s; } .amap .ag.dim { opacity: .22; } .amap .ag.hit .outline { stroke: #1f1f1d; stroke-width: 2; } .amap .lbl { font-size: 8.5px; font-weight: 500; fill: #1f1f1d; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: rgba(255,255,255,.75); stroke-width: 2px; } .amap .lbl.small { font-size: 6.5px; stroke-width: 1.5px; } @media (max-width: 600px) { .map-inner { min-width: 580px; } .amap .lbl { font-size: 9px; } .amap .lbl.small { font-size: 7px; } } /* ---------- Сарын гарчиг, хайлтын гарчиг, дээд талын тайлбар ---------- */ .month-head > span:first-child { display: block; } .mh-name { display: block; font-size: 16px; font-weight: 500; } .mh-sum { display: block; font-size: 14px; font-weight: 400; color: var(--text2); margin-top: 2px; line-height: 1.4; } .legend-top { margin: 0 0 14px; } .search-title { font-size: 22px; font-weight: 500; letter-spacing: .02em; margin: 6px 0 8px; } .amap .tiny .outline { stroke: #1f1f1d; stroke-width: 1.2; } .amap .leader { stroke: #1f1f1d; stroke-width: .6; pointer-events: none; } /* ---------- Цас, жаврын хөдөлгөөний давхарга ---------- */ .map-inner { position: relative; } .fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* ---------- Үндсэн өнгө (гэрэл / харанхуй горим) ---------- */ :root { --bg: #ffffff; --surface: #f5f5f2; --text: #1f1f1d; --text2: #5f5e5a; --muted: #888780; --border: rgba(0,0,0,.15); --border-strong: rgba(0,0,0,.35); /* Табын өнгө */ --temp: #185FA5; --temp-soft: #E6F1FB; --temp-text: #0C447C; /* цэнхэр */ --rain: #3B6D11; --rain-soft: #EAF3DE; --rain-text: #27500A; /* ногоон */ } @media (prefers-color-scheme: dark) { :root { --bg: #1c1c1a; --surface: #2a2a27; --text: #f1efe8; --text2: #b4b2a9; --muted: #888780; --border: rgba(255,255,255,.18); --border-strong: rgba(255,255,255,.4); --temp: #378ADD; --temp-soft: #0C447C; --temp-text: #B5D4F4; --rain: #639922; --rain-soft: #27500A; --rain-text: #C0DD97; } } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; line-height: 1.5; } .wrap { max-width: 1040px; margin: 0 auto; padding: 24px 16px 40px; } button, input { font: inherit; font-size: 14px; color: var(--text); background: var(--bg); border: .5px solid var(--border-strong); border-radius: 8px; height: 36px; padding: 0 12px; } button { cursor: pointer; } button:focus-visible, input:focus-visible, .cmp:focus-visible { outline: 2px solid #378ADD; outline-offset: 2px; } /* ---------- Сарууд (дарж нээгддэг) ---------- */ .month { border: .5px solid var(--border-strong); border-radius: 12px; margin-bottom: 12px; overflow: hidden; } .month-head { width: 100%; height: auto; min-height: 48px; padding: 10px 14px; text-align: left; border: 0; border-radius: 0; background: var(--surface); display: flex; justify-content: space-between; align-items: center; font-size: 16px; font-weight: 500; } .month-head .chev { transition: transform .15s; } .month.open .chev { transform: rotate(180deg); } .month-body { padding: 14px; } /* ---------- Табууд: температур = цэнхэр, хур тунадас = ногоон ---------- */ .tabs { display: flex; gap: 8px; margin-bottom: 18px; } .tab { padding: 0 16px; } .tab-temp { background: var(--temp-soft); color: var(--temp-text); border-color: var(--temp); } .tab-rain { background: var(--rain-soft); color: var(--rain-text); border-color: var(--rain); } .tab-temp.active { background: var(--temp); color: #fff; } .tab-rain.active { background: var(--rain); color: #fff; } /* ---------- 1. ОЖД туузан диаграм (туузны хэсэг бүр + доор нь тайлбар) ---------- */ .zones { display: flex; margin-bottom: 28px; } .zitem { width: var(--w); } .zone { height: 34px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; } .zitem:first-child .zone { border-radius: 6px 0 0 6px; } .zitem:last-child .zone { border-radius: 0 6px 6px 0; } .zcap { padding: 8px 10px 0 0; font-size: 14px; color: var(--text2); line-height: 1.4; } .zcap b { font-weight: 500; color: var(--text); } /* ---------- 2. Аймгийн схем ---------- */ .search { display: flex; gap: 8px; margin-bottom: 10px; } .search input { flex: 1; } .result { font-size: 14px; margin-bottom: 10px; min-height: 22px; } .result:empty { min-height: 0; margin: 0; } .result .row { display: flex; align-items: center; gap: 8px; padding: 2px 0; } .dot, .swatch { width: 14px; height: 14px; border-radius: 4px; flex: none; border: .5px solid var(--border-strong); } .grid-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .grid-hint { display: none; font-size: 12px; color: var(--muted); margin: 0 0 6px; } .grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 96px; gap: 6px; margin-bottom: 10px; } .tile { border: .5px solid var(--border-strong); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; font-size: 14px; line-height: 1.25; text-align: center; transition: opacity .15s; } .tile-full { align-items: center; justify-content: center; padding: 2px; } .tile-name { background: var(--surface); font-weight: 500; padding: 3px 2px; } .tile-parts { flex: 1; display: flex; } .tile-parts.col { flex-direction: column; } .tile-parts > div { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2px; } .tile.dim { opacity: .22; } .tile.hit { outline: 2px solid var(--text); outline-offset: 1px; } .legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--text2); } .legend span { display: flex; align-items: center; gap: 6px; } /* ---------- Газрын зураг товч ---------- */ .mapcard { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; height: auto; margin-top: 16px; padding: 12px 14px; text-align: left; background: #FCEBEB; border: .5px solid #F09595; border-radius: 12px; color: #791F1F; } .mapcard:hover { background: #F9DEDE; } .mapcard .big { display: block; font-size: 20px; font-weight: 500; line-height: 1.3; } .mapcard .small { display: block; font-size: 13px; color: #A32D2D; } .mapcard .thumb { display: block; width: 180px; flex: none; border-radius: 8px; border: .5px solid #F09595; background: #fff; overflow: hidden; } @media (prefers-color-scheme: dark) { .mapcard { background: #501313; border-color: #A32D2D; color: #F7C1C1; } .mapcard:hover { background: #611818; } .mapcard .small { color: #F09595; } } /* ---------- Харьцуулах цонх ---------- */ .modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: none; align-items: center; justify-content: center; padding: 12px; z-index: 10; } .modal.on { display: flex; } .dialog { background: var(--bg); border-radius: 12px; width: 100%; max-width: 960px; max-height: 100%; overflow: auto; padding: 14px; } .dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .dialog-head h3 { font-size: 16px; font-weight: 500; margin: 0; } .cmp { position: relative; width: 100%; aspect-ratio: 841 / 463; overflow: hidden; border-radius: 8px; background: #fff; user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: ew-resize; } .cmp .layer { position: absolute; inset: 0; pointer-events: none; } .layer img, .thumb img, .colorbar img { display: block; width: 100%; } .crop { position: relative; overflow: hidden; width: 100%; background: #fff; } .crop img { position: absolute; width: auto; max-width: none; } .cmp .line { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.5); pointer-events: none; } .cmp .knob { position: absolute; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: #fff; border: 1.5px solid #1f1f1d; color: #1f1f1d; display: flex; align-items: center; justify-content: center; pointer-events: none; } .chip { position: absolute; top: 8px; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; background: rgba(255,255,255,.92); color: #1f1f1d; border: .5px solid rgba(0,0,0,.3); pointer-events: none; } .chip.left { left: 8px; } .chip.right { right: 8px; } .colorbar { width: 100%; margin-top: 8px; background: #fff; border-radius: 6px; overflow: hidden; } .hint { font-size: 12px; color: var(--muted); margin: 8px 0 0; } @media (max-width: 480px) { .mapcard .big { font-size: 17px; } .mapcard .thumb { width: 92px; } } /* ---------- Бүс нутгийн тайлбар (notes) ---------- */ .notes { margin-top: 18px; font-size: 14px; color: var(--text2); } .notes p { margin: 0 0 10px; } .notes b { font-weight: 500; color: var(--text); } .swatch { display: inline-block; } .notes h2 { color: var(--text); } /* Зураг дээрх тэмдэглэгээний тайлбар */ .map-note { font-size: 14px; color: var(--text); margin: 10px 0 0; } .map-note:empty { display: none; } /* ---------- Утасны дэлгэц ---------- */ @media (max-width: 600px) { .wrap { padding: 12px 8px 28px; } h1 { font-size: 19px; } .month-body { padding: 10px; } .tabs { gap: 6px; } .tab { flex: 1; padding: 0 6px; font-size: 13px; } /* Туузны хэсгүүд босоо жагсана */ .zones { flex-direction: column; gap: 12px; margin-bottom: 20px; } .zitem { width: 100%; } .zitem .zone { border-radius: 6px !important; } .zcap { padding-right: 0; } /* Аймгийн схем: багтахгүй тул хажуу тийш гүйлгэнэ, нүд нь уншигдахуйц */ .grid-hint { display: block; } .grid { min-width: 640px; grid-auto-rows: 72px; } .tile { font-size: 12px; } .tile-name { font-size: 11px; padding: 2px 1px; } .search input { min-width: 0; } .dialog { padding: 10px; } .dialog-head h3 { font-size: 14px; } .chip { font-size: 11px; padding: 2px 8px; } .map-note { font-size: 13px; } } .h2-sub { font-weight: 400; color: var(--text2); font-size: 13px; } /* ---------- Аймгийн газрын зураг ---------- */ :root { --sea: #eef3f8; } @media (prefers-color-scheme: dark) { :root { --sea: #232a31; } } .map-scroll { background: var(--sea); border: .5px solid var(--border); border-radius: 12px; overflow-x: auto; margin-bottom: 10px; } .amap { display: block; width: 100%; height: auto; } .amap .edge { fill: rgba(0,0,0,0); stroke: #fff; stroke-width: .8; stroke-linejoin: round; cursor: pointer; pointer-events: all; } .amap .ag:hover .edge { stroke: #1f1f1d; stroke-width: 1.3; } .amap .ag.dim { opacity: .22; } .amap .ag.hit .edge { stroke: #1f1f1d; stroke-width: 2; } .amap .lbl { font-size: 8.5px; font-weight: 500; fill: #1f1f1d; text-anchor: middle; pointer-events: none; } .amap .lbl.halo { fill: none; stroke: rgba(255,255,255,.8); stroke-width: 2.2px; stroke-linejoin: round; } .amap .lbl.small { font-size: 6.5px; } .amap .lbl.small.halo { stroke-width: 1.6px; } @media (max-width: 600px) { .map-inner { min-width: 580px; } .amap .lbl { font-size: 9px; } .amap .lbl.small { font-size: 7px; } } /* ---------- Сарын гарчиг, хайлтын гарчиг, дээд талын тайлбар ---------- */ .month-head > span:first-child { display: block; } .mh-name { display: block; font-size: 16px; font-weight: 500; } .mh-sum { display: block; font-size: 14px; font-weight: 400; color: var(--text2); margin-top: 2px; line-height: 1.4; } .legend-top { margin: 0 0 14px; } .search-title { font-size: 22px; font-weight: 500; letter-spacing: .02em; margin: 6px 0 8px; } .amap .tiny .edge { stroke: #1f1f1d; stroke-width: 1.2; } .amap .leader { stroke: #1f1f1d; stroke-width: .6; pointer-events: none; } /* ---------- Цас, жаврын хөдөлгөөний давхарга ---------- */ .map-inner { position: relative; } .fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } Өвлийн цаг агаарын төлөв Хаах ОЖД ↔ Зураг дээр чирж эсвэл ← → товчоор гүйлгэнэ. // ===================================================== // АЙМГУУД БА ӨНГӨ: бүх сарын хуудсанд нийтлэг. // ===================================================== // Аймгийн хил (аймгуудын өнгөт газрын зургаас гаргасан SVG зам, d) ба нэрийн байрлал (lx, ly). Координат 0 0 800 393 хэмжээст. Засах шаардлагагүй. const SHAPES = { "Баян-Өлгий": {"d": "M12.5,100.5 L10.5,103.5 L10.5,106.5 L3.5,113.5 L3.5,118.5 L0.5,120.5 L0.5,124.5 L4.5,124.5 L7.5,127.5 L7.5,133.5 L18.5,138.5 L21.5,141.5 L22.5,146.5 L29.5,149.5 L33.5,153.5 L38.5,154.5 L40.5,152.5 L44.5,152.5 L52.5,160.5 L57.5,159.5 L61.5,164.5 L65.5,166.5 L68.5,171.5 L69.5,180.5 L73.5,188.5 L79.5,193.5 L82.5,201.5 L87.5,203.5 L90.5,208.5 L97.5,205.5 L102.5,206.5 L103.5,203.5 L91.5,194.5 L92.5,185.5 L86.5,177.5 L87.5,171.5 L84.5,168.5 L80.5,155.5 L76.5,150.5 L75.5,143.5 L76.5,134.5 L74.5,131.5 L75.5,130.5 L79.5,131.5 L85.5,127.5 L87.5,128.5 L88.5,127.5 L87.5,122.5 L84.5,118.5 L79.5,115.5 L77.5,107.5 L74.5,106.5 L70.5,102.5 L69.5,97.5 L59.5,88.5 L58.5,83.5 L56.5,81.5 L48.5,82.5 L46.5,84.5 L47.5,90.5 L40.5,95.5 L38.5,95.5 L34.5,99.5 L30.5,99.5 L27.5,101.5 L23.5,101.5 L21.5,99.5Z", "lx": 47, "ly": 125}, "Увс": {"d": "M56.5,78.5 L56.5,80.5 L59.5,83.5 L60.5,89.5 L69.5,96.5 L71.5,103.5 L78.5,108.5 L80.5,112.5 L80.5,116.5 L83.5,117.5 L87.5,121.5 L89.5,128.5 L98.5,119.5 L102.5,118.5 L104.5,120.5 L104.5,124.5 L108.5,125.5 L112.5,131.5 L120.5,131.5 L126.5,134.5 L130.5,130.5 L132.5,130.5 L137.5,137.5 L140.5,138.5 L149.5,129.5 L157.5,125.5 L164.5,127.5 L171.5,127.5 L174.5,129.5 L182.5,128.5 L193.5,121.5 L193.5,112.5 L197.5,107.5 L197.5,104.5 L191.5,99.5 L189.5,93.5 L191.5,87.5 L190.5,82.5 L180.5,82.5 L177.5,79.5 L169.5,79.5 L163.5,71.5 L163.5,65.5 L160.5,59.5 L158.5,58.5 L133.5,59.5 L130.5,56.5 L128.5,51.5 L119.5,53.5 L113.5,50.5 L110.5,54.5 L100.5,53.5 L89.5,63.5 L80.5,64.5 L71.5,72.5 L65.5,73.5 L62.5,76.5Z", "lx": 130, "ly": 94}, "Ховд": {"d": "M99.5,119.5 L91.5,128.5 L85.5,128.5 L80.5,131.5 L74.5,131.5 L77.5,138.5 L76.5,140.5 L77.5,151.5 L83.5,160.5 L85.5,168.5 L88.5,172.5 L87.5,177.5 L93.5,186.5 L92.5,194.5 L101.5,200.5 L103.5,204.5 L101.5,206.5 L95.5,206.5 L91.5,209.5 L87.5,204.5 L83.5,202.5 L82.5,203.5 L82.5,212.5 L79.5,218.5 L81.5,221.5 L81.5,228.5 L77.5,232.5 L74.5,238.5 L73.5,247.5 L77.5,255.5 L79.5,257.5 L83.5,257.5 L86.5,260.5 L92.5,260.5 L94.5,262.5 L108.5,262.5 L110.5,264.5 L121.5,264.5 L122.5,263.5 L135.5,264.5 L133.5,238.5 L139.5,233.5 L142.5,221.5 L146.5,215.5 L144.5,207.5 L146.5,205.5 L150.5,206.5 L154.5,202.5 L161.5,201.5 L163.5,197.5 L158.5,189.5 L156.5,182.5 L149.5,177.5 L148.5,174.5 L142.5,169.5 L135.5,158.5 L134.5,151.5 L141.5,145.5 L142.5,143.5 L141.5,140.5 L134.5,134.5 L133.5,131.5 L129.5,131.5 L126.5,134.5 L122.5,132.5 L111.5,131.5 L109.5,126.5 L106.5,126.5 L103.5,123.5 L103.5,120.5Z", "lx": 107, "ly": 233}, "Завхан": {"d": "M193.5,82.5 L191.5,85.5 L190.5,95.5 L192.5,99.5 L197.5,103.5 L197.5,108.5 L193.5,114.5 L193.5,121.5 L182.5,129.5 L174.5,130.5 L172.5,128.5 L164.5,128.5 L161.5,126.5 L156.5,126.5 L153.5,129.5 L148.5,130.5 L147.5,133.5 L141.5,138.5 L142.5,145.5 L134.5,152.5 L136.5,155.5 L136.5,159.5 L142.5,167.5 L161.5,162.5 L167.5,166.5 L178.5,166.5 L182.5,170.5 L193.5,171.5 L211.5,183.5 L212.5,192.5 L214.5,196.5 L222.5,194.5 L226.5,198.5 L230.5,206.5 L235.5,207.5 L239.5,203.5 L244.5,206.5 L247.5,201.5 L248.5,193.5 L251.5,186.5 L253.5,184.5 L257.5,184.5 L262.5,179.5 L261.5,174.5 L264.5,171.5 L264.5,169.5 L258.5,163.5 L260.5,152.5 L262.5,150.5 L268.5,150.5 L272.5,146.5 L282.5,141.5 L281.5,131.5 L284.5,126.5 L282.5,113.5 L280.5,111.5 L278.5,113.5 L275.5,113.5 L269.5,119.5 L264.5,117.5 L257.5,118.5 L251.5,117.5 L243.5,111.5 L233.5,110.5 L226.5,104.5 L226.5,99.5 L231.5,92.5 L228.5,85.5 L218.5,85.5 L207.5,81.5Z", "lx": 222, "ly": 145}, "Говь-Алтай": {"d": "M145.5,167.5 L143.5,169.5 L151.5,178.5 L157.5,182.5 L157.5,185.5 L164.5,199.5 L161.5,202.5 L155.5,202.5 L151.5,206.5 L145.5,206.5 L147.5,214.5 L141.5,226.5 L140.5,233.5 L133.5,239.5 L133.5,242.5 L135.5,245.5 L136.5,263.5 L138.5,265.5 L145.5,266.5 L176.5,290.5 L182.5,293.5 L188.5,292.5 L190.5,294.5 L190.5,301.5 L193.5,302.5 L197.5,308.5 L200.5,320.5 L203.5,325.5 L203.5,330.5 L215.5,344.5 L216.5,349.5 L237.5,347.5 L250.5,350.5 L251.5,343.5 L249.5,328.5 L252.5,324.5 L254.5,311.5 L253.5,289.5 L259.5,284.5 L260.5,281.5 L260.5,267.5 L262.5,265.5 L266.5,254.5 L265.5,236.5 L258.5,227.5 L248.5,218.5 L244.5,207.5 L240.5,204.5 L235.5,207.5 L230.5,207.5 L225.5,198.5 L221.5,194.5 L214.5,197.5 L212.5,195.5 L211.5,184.5 L207.5,180.5 L205.5,180.5 L194.5,172.5 L183.5,171.5 L179.5,167.5 L167.5,167.5 L161.5,163.5Z", "lx": 198, "ly": 244}, "Хөвсгөл": {"d": "M276.5,0.5 L273.5,11.5 L262.5,19.5 L261.5,25.5 L254.5,30.5 L252.5,36.5 L251.5,45.5 L254.5,48.5 L254.5,53.5 L256.5,57.5 L262.5,61.5 L261.5,72.5 L253.5,83.5 L246.5,83.5 L241.5,89.5 L237.5,91.5 L233.5,91.5 L227.5,98.5 L226.5,103.5 L233.5,109.5 L242.5,110.5 L252.5,117.5 L264.5,116.5 L269.5,118.5 L272.5,117.5 L275.5,113.5 L278.5,113.5 L281.5,111.5 L283.5,113.5 L284.5,127.5 L281.5,134.5 L282.5,142.5 L285.5,145.5 L296.5,143.5 L299.5,137.5 L304.5,137.5 L308.5,139.5 L311.5,135.5 L314.5,135.5 L312.5,128.5 L314.5,123.5 L318.5,120.5 L316.5,117.5 L322.5,110.5 L338.5,118.5 L343.5,118.5 L344.5,111.5 L353.5,102.5 L361.5,100.5 L367.5,92.5 L369.5,93.5 L371.5,90.5 L355.5,82.5 L355.5,80.5 L362.5,72.5 L366.5,64.5 L359.5,58.5 L359.5,51.5 L357.5,49.5 L357.5,43.5 L355.5,39.5 L355.5,31.5 L353.5,29.5 L343.5,26.5 L337.5,26.5 L335.5,24.5 L332.5,24.5 L316.5,16.5 L302.5,16.5 L296.5,10.5 L287.5,9.5 L282.5,5.5 L280.5,5.5Z", "lx": 309, "ly": 66}, "Архангай": {"d": "M259.5,155.5 L260.5,159.5 L259.5,164.5 L263.5,168.5 L272.5,164.5 L275.5,167.5 L275.5,170.5 L281.5,174.5 L288.5,173.5 L291.5,169.5 L294.5,169.5 L297.5,167.5 L299.5,169.5 L298.5,170.5 L299.5,174.5 L302.5,177.5 L303.5,187.5 L304.5,188.5 L307.5,186.5 L313.5,185.5 L316.5,191.5 L322.5,197.5 L337.5,198.5 L339.5,196.5 L349.5,196.5 L352.5,192.5 L362.5,190.5 L366.5,193.5 L367.5,188.5 L371.5,184.5 L370.5,179.5 L371.5,176.5 L380.5,179.5 L384.5,184.5 L393.5,184.5 L396.5,181.5 L395.5,178.5 L388.5,172.5 L385.5,167.5 L374.5,157.5 L374.5,152.5 L372.5,147.5 L369.5,145.5 L366.5,145.5 L362.5,141.5 L362.5,139.5 L359.5,136.5 L358.5,126.5 L356.5,124.5 L353.5,125.5 L351.5,122.5 L349.5,122.5 L345.5,118.5 L339.5,119.5 L324.5,111.5 L321.5,111.5 L317.5,117.5 L319.5,120.5 L315.5,123.5 L313.5,127.5 L314.5,135.5 L310.5,136.5 L308.5,140.5 L300.5,137.5 L295.5,144.5 L285.5,146.5 L281.5,143.5 L273.5,146.5 L267.5,151.5 L261.5,151.5Z", "lx": 336, "ly": 161}, "Булган": {"d": "M365.5,67.5 L363.5,72.5 L357.5,78.5 L356.5,82.5 L358.5,84.5 L369.5,88.5 L371.5,91.5 L369.5,93.5 L365.5,93.5 L365.5,96.5 L361.5,101.5 L353.5,103.5 L345.5,111.5 L345.5,117.5 L348.5,121.5 L358.5,126.5 L360.5,136.5 L363.5,139.5 L363.5,142.5 L366.5,144.5 L369.5,144.5 L374.5,149.5 L375.5,157.5 L386.5,167.5 L396.5,180.5 L398.5,181.5 L406.5,180.5 L407.5,179.5 L406.5,173.5 L410.5,169.5 L421.5,166.5 L420.5,158.5 L418.5,156.5 L415.5,156.5 L412.5,152.5 L412.5,144.5 L416.5,140.5 L417.5,124.5 L403.5,116.5 L406.5,112.5 L410.5,113.5 L416.5,111.5 L417.5,103.5 L420.5,98.5 L419.5,94.5 L421.5,91.5 L415.5,84.5 L416.5,75.5 L413.5,71.5 L407.5,76.5 L391.5,75.5 L388.5,73.5 L385.5,73.5 L382.5,69.5 L374.5,69.5 L372.5,67.5Z", "lx": 380, "ly": 117}, "Сэлэнгэ": {"d": "M414.5,70.5 L417.5,75.5 L416.5,84.5 L422.5,91.5 L420.5,93.5 L420.5,100.5 L416.5,110.5 L418.5,116.5 L414.5,121.5 L418.5,125.5 L416.5,127.5 L417.5,130.5 L428.5,135.5 L438.5,131.5 L439.5,126.5 L445.5,122.5 L452.5,122.5 L454.5,124.5 L453.5,127.5 L454.5,129.5 L459.5,129.5 L464.5,131.5 L467.5,134.5 L471.5,134.5 L479.5,130.5 L484.5,132.5 L487.5,132.5 L490.5,130.5 L493.5,131.5 L496.5,124.5 L491.5,118.5 L493.5,115.5 L498.5,113.5 L505.5,115.5 L515.5,110.5 L516.5,106.5 L507.5,96.5 L504.5,95.5 L500.5,91.5 L499.5,82.5 L482.5,81.5 L478.5,77.5 L478.5,75.5 L472.5,70.5 L455.5,69.5 L451.5,65.5 L434.5,64.5 L431.5,66.5 L426.5,66.5 L424.5,68.5 L419.5,68.5Z", "lx": 449, "ly": 95, "dx": -4, "dy": -4}, "Төв": {"d": "M517.5,113.5 L513.5,112.5 L505.5,116.5 L501.5,114.5 L494.5,115.5 L492.5,119.5 L497.5,124.5 L493.5,131.5 L490.5,131.5 L487.5,133.5 L479.5,131.5 L470.5,135.5 L458.5,129.5 L454.5,130.5 L453.5,129.5 L454.5,124.5 L451.5,122.5 L443.5,123.5 L439.5,126.5 L440.5,129.5 L431.5,135.5 L418.5,132.5 L417.5,140.5 L413.5,144.5 L412.5,150.5 L415.5,155.5 L421.5,158.5 L422.5,165.5 L406.5,173.5 L408.5,177.5 L407.5,180.5 L408.5,185.5 L413.5,190.5 L411.5,198.5 L414.5,202.5 L414.5,208.5 L420.5,213.5 L427.5,207.5 L432.5,207.5 L436.5,210.5 L439.5,210.5 L446.5,201.5 L450.5,201.5 L455.5,205.5 L474.5,207.5 L481.5,213.5 L490.5,212.5 L494.5,207.5 L497.5,207.5 L499.5,205.5 L500.5,200.5 L503.5,198.5 L515.5,199.5 L521.5,196.5 L522.5,191.5 L513.5,173.5 L508.5,168.5 L509.5,158.5 L511.5,156.5 L518.5,156.5 L525.5,150.5 L528.5,144.5 L528.5,139.5 L526.5,135.5 L524.5,124.5 L522.5,119.5Z", "lx": 472, "ly": 171, "dx": 22, "dy": 26}, "Хэнтий": {"d": "M604.5,103.5 L589.5,104.5 L575.5,112.5 L568.5,112.5 L564.5,109.5 L560.5,111.5 L540.5,109.5 L534.5,105.5 L518.5,105.5 L516.5,107.5 L517.5,113.5 L522.5,118.5 L525.5,124.5 L529.5,143.5 L526.5,149.5 L519.5,156.5 L515.5,158.5 L515.5,165.5 L513.5,168.5 L513.5,173.5 L516.5,177.5 L520.5,188.5 L529.5,198.5 L528.5,211.5 L532.5,215.5 L535.5,221.5 L539.5,222.5 L548.5,220.5 L552.5,215.5 L553.5,207.5 L556.5,205.5 L564.5,215.5 L569.5,224.5 L571.5,225.5 L578.5,224.5 L583.5,218.5 L584.5,214.5 L583.5,203.5 L586.5,199.5 L587.5,193.5 L589.5,190.5 L589.5,184.5 L595.5,177.5 L602.5,178.5 L604.5,176.5 L604.5,168.5 L607.5,165.5 L614.5,161.5 L618.5,161.5 L618.5,157.5 L616.5,154.5 L614.5,145.5 L615.5,136.5 L608.5,124.5 L608.5,115.5 L606.5,112.5 L606.5,106.5Z", "lx": 566, "ly": 150}, "Дорнод": {"d": "M605.5,102.5 L607.5,107.5 L607.5,112.5 L609.5,115.5 L608.5,123.5 L616.5,136.5 L615.5,146.5 L616.5,153.5 L620.5,161.5 L620.5,168.5 L622.5,169.5 L627.5,167.5 L630.5,169.5 L648.5,173.5 L664.5,186.5 L663.5,197.5 L668.5,200.5 L674.5,208.5 L692.5,207.5 L696.5,205.5 L698.5,206.5 L708.5,205.5 L711.5,208.5 L714.5,215.5 L717.5,217.5 L721.5,215.5 L734.5,215.5 L738.5,207.5 L747.5,209.5 L750.5,206.5 L758.5,202.5 L769.5,203.5 L771.5,201.5 L776.5,201.5 L779.5,204.5 L794.5,206.5 L797.5,203.5 L799.5,203.5 L799.5,195.5 L796.5,193.5 L795.5,188.5 L780.5,172.5 L780.5,169.5 L778.5,167.5 L773.5,166.5 L769.5,162.5 L766.5,156.5 L757.5,154.5 L744.5,155.5 L739.5,160.5 L736.5,166.5 L733.5,166.5 L724.5,159.5 L707.5,160.5 L702.5,165.5 L698.5,165.5 L690.5,157.5 L690.5,148.5 L696.5,143.5 L696.5,133.5 L702.5,125.5 L702.5,120.5 L718.5,86.5 L716.5,82.5 L710.5,80.5 L704.5,80.5 L701.5,74.5 L695.5,73.5 L691.5,70.5 L686.5,74.5 L686.5,77.5 L684.5,79.5 L680.5,79.5 L672.5,72.5 L660.5,70.5 L649.5,78.5 L636.5,84.5 L625.5,98.5 L623.5,99.5 L613.5,98.5Z", "lx": 657, "ly": 124}, "Сүхбаатар": {"d": "M590.5,184.5 L587.5,199.5 L584.5,203.5 L585.5,212.5 L583.5,218.5 L591.5,223.5 L596.5,230.5 L596.5,245.5 L602.5,254.5 L601.5,260.5 L602.5,261.5 L613.5,261.5 L620.5,268.5 L632.5,272.5 L643.5,273.5 L647.5,269.5 L652.5,267.5 L661.5,258.5 L663.5,253.5 L667.5,249.5 L680.5,250.5 L693.5,247.5 L701.5,239.5 L704.5,239.5 L707.5,236.5 L707.5,229.5 L715.5,219.5 L712.5,211.5 L708.5,206.5 L695.5,206.5 L692.5,208.5 L687.5,207.5 L675.5,209.5 L662.5,195.5 L663.5,186.5 L660.5,183.5 L657.5,182.5 L645.5,172.5 L635.5,171.5 L628.5,168.5 L622.5,169.5 L620.5,167.5 L619.5,161.5 L613.5,162.5 L605.5,168.5 L604.5,176.5 L602.5,178.5 L596.5,177.5Z", "lx": 634, "ly": 224}, "Дорноговь": {"d": "M555.5,205.5 L553.5,206.5 L552.5,216.5 L547.5,221.5 L536.5,222.5 L532.5,218.5 L530.5,213.5 L528.5,212.5 L526.5,213.5 L520.5,223.5 L521.5,227.5 L517.5,231.5 L517.5,236.5 L515.5,238.5 L517.5,252.5 L520.5,260.5 L515.5,263.5 L515.5,266.5 L511.5,270.5 L502.5,270.5 L499.5,273.5 L495.5,291.5 L498.5,295.5 L501.5,308.5 L503.5,311.5 L503.5,329.5 L505.5,332.5 L505.5,351.5 L504.5,352.5 L505.5,359.5 L519.5,359.5 L520.5,360.5 L525.5,360.5 L528.5,358.5 L537.5,359.5 L548.5,352.5 L555.5,351.5 L567.5,341.5 L569.5,336.5 L579.5,324.5 L591.5,319.5 L600.5,311.5 L599.5,305.5 L592.5,298.5 L588.5,290.5 L588.5,284.5 L590.5,281.5 L593.5,269.5 L601.5,260.5 L601.5,254.5 L595.5,245.5 L596.5,234.5 L594.5,227.5 L592.5,224.5 L585.5,220.5 L582.5,220.5 L576.5,226.5 L569.5,225.5 L562.5,213.5Z", "lx": 546, "ly": 296}, "Өмнөговь": {"d": "M291.5,300.5 L292.5,326.5 L297.5,354.5 L311.5,353.5 L314.5,351.5 L327.5,351.5 L339.5,354.5 L342.5,356.5 L351.5,357.5 L362.5,369.5 L368.5,371.5 L376.5,371.5 L393.5,381.5 L400.5,383.5 L419.5,382.5 L421.5,384.5 L422.5,389.5 L428.5,390.5 L430.5,392.5 L432.5,392.5 L432.5,390.5 L436.5,386.5 L447.5,380.5 L453.5,375.5 L471.5,366.5 L482.5,364.5 L488.5,360.5 L502.5,360.5 L504.5,358.5 L505.5,339.5 L504.5,332.5 L502.5,329.5 L503.5,313.5 L500.5,306.5 L499.5,299.5 L495.5,292.5 L495.5,284.5 L486.5,283.5 L483.5,285.5 L475.5,286.5 L459.5,296.5 L454.5,296.5 L448.5,291.5 L448.5,288.5 L445.5,285.5 L441.5,277.5 L427.5,278.5 L413.5,274.5 L410.5,271.5 L409.5,264.5 L406.5,259.5 L400.5,259.5 L396.5,265.5 L387.5,272.5 L382.5,282.5 L381.5,287.5 L378.5,291.5 L379.5,293.5 L378.5,297.5 L358.5,298.5 L336.5,309.5 L317.5,309.5 L316.5,310.5 L312.5,309.5 L304.5,300.5 L299.5,297.5Z", "lx": 416, "ly": 331}, "Дундговь": {"d": "M508.5,205.5 L501.5,200.5 L499.5,206.5 L497.5,208.5 L494.5,208.5 L491.5,212.5 L488.5,213.5 L480.5,213.5 L472.5,207.5 L458.5,207.5 L449.5,201.5 L447.5,201.5 L439.5,211.5 L428.5,207.5 L421.5,214.5 L419.5,221.5 L416.5,224.5 L411.5,225.5 L408.5,230.5 L408.5,235.5 L405.5,238.5 L398.5,238.5 L396.5,240.5 L395.5,246.5 L399.5,251.5 L399.5,257.5 L401.5,259.5 L407.5,259.5 L409.5,261.5 L410.5,269.5 L415.5,274.5 L425.5,277.5 L441.5,277.5 L448.5,287.5 L449.5,291.5 L454.5,295.5 L459.5,295.5 L476.5,285.5 L481.5,285.5 L484.5,283.5 L495.5,283.5 L498.5,278.5 L498.5,274.5 L501.5,270.5 L513.5,269.5 L514.5,264.5 L519.5,260.5 L515.5,245.5 L516.5,231.5 L511.5,231.5 L507.5,225.5 L509.5,220.5 L509.5,215.5 L507.5,212.5Z", "lx": 466, "ly": 248}, "Өвөрхангай": {"d": "M406.5,181.5 L402.5,182.5 L397.5,181.5 L394.5,184.5 L389.5,185.5 L384.5,184.5 L375.5,177.5 L371.5,177.5 L372.5,183.5 L368.5,188.5 L368.5,192.5 L366.5,194.5 L361.5,190.5 L357.5,192.5 L353.5,192.5 L349.5,197.5 L339.5,197.5 L338.5,198.5 L342.5,206.5 L343.5,212.5 L342.5,222.5 L337.5,231.5 L338.5,234.5 L337.5,242.5 L333.5,249.5 L334.5,264.5 L345.5,272.5 L344.5,279.5 L348.5,288.5 L349.5,298.5 L351.5,300.5 L359.5,297.5 L366.5,296.5 L374.5,297.5 L379.5,295.5 L378.5,289.5 L381.5,286.5 L382.5,280.5 L386.5,272.5 L394.5,266.5 L399.5,259.5 L398.5,251.5 L395.5,248.5 L395.5,240.5 L398.5,237.5 L406.5,237.5 L408.5,234.5 L407.5,230.5 L410.5,227.5 L410.5,225.5 L412.5,223.5 L417.5,223.5 L419.5,220.5 L420.5,214.5 L413.5,207.5 L413.5,201.5 L411.5,199.5 L412.5,190.5 L407.5,185.5Z", "lx": 366, "ly": 249}, "Баянхонгор": {"d": "M270.5,165.5 L265.5,168.5 L262.5,174.5 L262.5,180.5 L258.5,184.5 L251.5,186.5 L251.5,189.5 L249.5,191.5 L248.5,200.5 L245.5,205.5 L248.5,217.5 L259.5,227.5 L260.5,230.5 L265.5,235.5 L267.5,243.5 L267.5,252.5 L265.5,260.5 L261.5,267.5 L260.5,283.5 L254.5,288.5 L254.5,302.5 L255.5,303.5 L253.5,324.5 L250.5,328.5 L251.5,349.5 L253.5,351.5 L262.5,353.5 L294.5,355.5 L295.5,354.5 L295.5,343.5 L291.5,320.5 L291.5,300.5 L293.5,298.5 L300.5,297.5 L304.5,299.5 L313.5,309.5 L337.5,308.5 L349.5,301.5 L347.5,287.5 L343.5,279.5 L344.5,272.5 L340.5,268.5 L334.5,265.5 L332.5,257.5 L333.5,248.5 L337.5,240.5 L337.5,229.5 L341.5,222.5 L342.5,210.5 L339.5,202.5 L334.5,197.5 L322.5,198.5 L320.5,194.5 L315.5,191.5 L314.5,185.5 L304.5,188.5 L302.5,186.5 L301.5,176.5 L298.5,173.5 L297.5,168.5 L290.5,170.5 L287.5,174.5 L283.5,175.5 L276.5,172.5 L274.5,170.5 L274.5,166.5Z", "lx": 301, "ly": 228}, "Орхон": {"d": "M417.5,114.5 L415.5,112.5 L412.5,112.5 L410.5,114.5 L408.5,113.5 L405.5,113.5 L403.5,117.5 L405.5,118.5 L410.5,118.5 L413.5,121.5 L413.5,120.5 L416.5,117.5 L417.5,117.5Z", "lx": 413, "ly": 115, "dx": -12, "dy": -18}, "Дархан-Уул": {"d": "M456.5,84.5 L455.5,86.5 L453.5,88.5 L452.5,88.5 L449.5,92.5 L449.5,96.5 L451.5,99.5 L450.5,101.5 L450.5,107.5 L449.5,108.5 L449.5,112.5 L452.5,115.5 L452.5,116.5 L455.5,116.5 L457.5,114.5 L457.5,112.5 L459.5,110.5 L461.5,110.5 L465.5,112.5 L468.5,112.5 L472.5,114.5 L473.5,112.5 L473.5,110.5 L472.5,109.5 L472.5,102.5 L473.5,100.5 L472.5,98.5 L468.5,95.5 L465.5,95.5 L463.5,97.5 L459.5,97.5 L457.5,95.5 L456.5,95.5 L454.5,93.5 L454.5,91.5 L458.5,86.5 L458.5,85.5Z", "lx": 465, "ly": 104, "dx": 2, "dy": 20}, "Говьсүмбэр": {"d": "M524.5,192.5 L522.5,196.5 L517.5,199.5 L510.5,199.5 L509.5,198.5 L505.5,198.5 L504.5,199.5 L502.5,199.5 L502.5,200.5 L503.5,200.5 L509.5,205.5 L508.5,213.5 L510.5,215.5 L510.5,218.5 L509.5,219.5 L509.5,223.5 L508.5,224.5 L508.5,226.5 L512.5,231.5 L516.5,230.5 L520.5,227.5 L520.5,224.5 L519.5,223.5 L522.5,220.5 L526.5,212.5 L528.5,211.5 L528.5,206.5 L527.5,205.5 L528.5,197.5 L526.5,196.5 L526.5,194.5Z", "lx": 518, "ly": 208, "dx": 40, "dy": -2}, "Улаанбаатар": {"d": "M463.5,145.5 L463.5,152.5 L466.5,158.5 L465.5,162.5 L467.5,164.5 L470.5,164.5 L471.5,165.5 L474.5,165.5 L476.5,163.5 L477.5,164.5 L481.5,164.5 L485.5,168.5 L490.5,168.5 L492.5,166.5 L492.5,163.5 L491.5,162.5 L492.5,161.5 L492.5,156.5 L490.5,155.5 L487.5,155.5 L485.5,151.5 L483.5,149.5 L482.5,149.5 L480.5,146.5 L479.5,147.5 L472.5,147.5 L471.5,146.5 L468.5,146.5 L467.5,145.5Z M512.5,156.5 L510.5,157.5 L509.5,159.5 L510.5,160.5 L508.5,162.5 L508.5,165.5 L509.5,166.5 L509.5,169.5 L510.5,170.5 L512.5,170.5 L513.5,166.5 L514.5,165.5 L514.5,157.5Z", "lx": 474, "ly": 155, "dx": -10, "dy": 24} }; // Хайлтад нэмж олдох нэр const ALIASES = {}; // хайлтад нэмж олдох нэр (хэрэгтэй бол: { 'Төв': ['...'] }) // Газрын зураг дээр харагдах нэр (олон мөр бол массив) const LABELS = {}; // олон мөртэй нэр хэрэгтэй бол: { 'Нэр': ['1-р мөр', '2-р мөр'] } // Өнгөний багц (давтахгүйн тулд нэг газар) const AMBER = { bg: '#FAEEDA', fg: '#633806' }; // "Дунджийн орчим" const COLD = { bg: '#85B7EB', fg: '#042C53' }; // хүйтэн (цэнхэр) const WARM = { bg: '#F0997B', fg: '#4A1B0C' }; // дулаан (улбар шар) const WET = { bg: '#97C459', fg: '#173404' }; // хур тунадас ахиу (ногоон) const LOW = { bg: '#C8AF72', fg: '#412402' }; // хур тунадас бага (хүрэн) // Зураг: бүтэн зургаас газрын зургийн хүрээг (841x463) тайрч харуулна. // w,h = зургийн бодит хэмжээ, x,y = хүрээний зүүн дээд өнцөг, cw,ch = тайрах хэмжээ. const crop = (url, w, h, x, y, cw = 841, ch = 463) => ({ url, w, h, x, y, cw, ch }); // Төлөвийг өөр аймгаас авдаг нутаг: Улаанбаатар нь Төв аймагт багтдаг тул Төвтэй ижил төлөвтэй. const STATUS_AS = { 'Улаанбаатар': 'Төв' }; // ДАТА ФАЙЛ: 11-р, 12-р, 1-р сарын мэдээлэл (бүгд нэг дор). Аймаг, өнгө нь aimags.js-д байна. // Сар нэмэх бол доорх MONTHS жагсаалтын төгсгөлд нэг блок хуулж, зураг болон жагсаалтаа солино. // ----------------------------------------------------- // САР БҮР: нэр + температур + хур тунадас (11-р сар нь data-nov.js дотор тусдаа) // // Нэг үзүүлэлтийн (temp / rain) бүтэц: // scaleTitle : 1-р хэсгийн гарчиг // zones : ОЖД-ийн туузны хэсгүүд (size = өргөн %, нийлбэр 100) // cats : ангилалууд (effect: 'snow' = цас, 'frost' = жавар хөдөлгөөн нэмнэ). hi = онцгой (хүйтэн/дулаан/ахиу), mid = дунджийн орчим (3-р ангилал нэмж болно) // areas : ангилал бүрд орох аймгуудын жагсаалт (жишээ нь hi: [...], mid: [...]) // rest : жагсаалтад ороогүй аймаг ямар ангилал болох ('hi' эсвэл 'mid') // split : хоёр хэсэгт хуваагдсан аймаг. dir: 'row' (зүүн|баруун) эсвэл 'col' (дээр/доор) // images : газрын зургууд (images хавтсанд) // ----------------------------------------------------- // Зургийн хаягууд: сар бүрт 4 зураг. Эхний 2 = температур, сүүлийн 2 = хур тунадас. // "Төлөв" ба "ОЖД"-ийг зургийн хэмжээгээр (өргөн нь том нь = төлөв) автоматаар ялгадаг тул дараалал нь чухал биш. const IMG_BASE = 'https://content.ikon.mn/news/2026/11/5/'; const PICS = { dec: ['o3flvl_image-1793192187474_xhd.jpg', 'fn09iv_image-1793192213856_xhd.jpg', 'md19ur_image-1793192256760_xhd.jpg', 'ksneb6_image-1793192275529_xhd.jpg'], jan: ['bgdajv_image-1793192326844_xhd.jpg', 'zhgf52_image-1793192350168_xhd.jpg', 't79c1e_image-1793192403048_xhd.jpg', 'nvdx9k_image-1793192437801_xhd.jpg'], feb: ['zms7wb_image-1793192484747_xhd.jpg', '3oq10s_image-1793192503416_xhd.jpg', 'jwc038_image-1793192538399_xhd.jpg', 'lyuqi9_image-1793192570680_xhd.jpg'], }; const pic = (month, i) => IMG_BASE + PICS[month][i]; const MONTHS = [ { name: '2026 оны 12-р сар', headline: '12-р сард нутгийн хойд, төв, зүүн хэсгээр хүйтэн, зүүн, төвийн, говийн аймгуудаар цас их орно.', forecastLabel: '2026 оны төлөв', temp: { scaleTitle: '12-р сард хэр хүйтэн байдаг вэ?', zones: [ { label: '-10…-16°C', size: 36.4, bg: '#D85A30', fg: '#fff', name: 'Хамгийн дулаан', where: 'Алтайн өвөр говь, говийн аймгууд' }, { label: '-16…-22°C', size: 27.2, bg: '#9FE1CB', fg: '#04342C', name: 'Дунд зэрэг', where: 'Бусад нутаг' }, { label: '-22…-30°C', size: 36.4, bg: '#185FA5', fg: '#fff', name: 'Хамгийн хүйтэн', where: 'Алтай, Хангай, Хөвсгөл, Хэнтийн уулархаг нутаг, Увс нуур, Их нууруудын хотгор, Идэр, Онон голын сав' }, ], cats: { hi: { effect: 'frost', label: 'ОЖД-аас хүйтэн', legend: 'ОЖД-аас хүйтэн (зураг дээрх Х)', ...COLD }, mid: { label: 'Дунджийн орчим', legend: 'Дунджийн орчим (зураг дээрх Н)', ...AMBER }, }, areas: { hi: ['Хөвсгөл', 'Архангай', 'Булган', 'Сэлэнгэ', 'Төв', 'Хэнтий', 'Говьсүмбэр'], mid: [] }, rest: 'mid', split: { 'Завхан': { dir: 'row', parts: [['зүүн', 'hi'], ['баруун', 'mid' }, 'Баянхонгор':{ dir: 'col', parts: [['хойд', 'hi'], ['урд', 'mid' }, 'Дорнод': { dir: 'col', parts: [['хойд', 'hi'], ['баруун', 'mid' }, 'Сүхбаатар': { dir: 'col', parts: [['баруун хойд', 'hi'], ['урд', 'mid' }, }, mapNote: 'Н – агаарын температур ОЖД-ийн орчим, Х – агаарын температур ОЖД-аас хүйтэн', sources: [pic('dec', 0), pic('dec', 1)], }, rain: { scaleTitle: '12-р сард хэр их цас ордог вэ?', zones: [ { label: '❄ 0–2 мм', size: 50, bg: '#FFDD00', fg: '#412402', name: 'Бага', where: 'Бусад нутаг' }, { label: '❄❄❄ 2–4 мм', size: 50, bg: '#D8FFD8', fg: '#173404', name: 'Арай их', where: 'Увс нуурын хотгор, Орхон, Сэлэнгийн сав газар' }, ], cats: { hi: { effect: 'snow', label: 'ОЖД-аас ахиу', legend: 'ОЖД-аас ахиу (зураг дээрх И)', ...WET }, mid: { label: 'Дунджийн орчим', legend: 'Дунджийн орчим (зураг дээрх Н)', ...AMBER }, }, areas: { hi: ['Хэнтий', 'Дорнод', 'Сүхбаатар', 'Говьсүмбэр', 'Дорноговь', 'Сэлэнгэ', 'Төв', 'Дундговь'], mid: [] }, rest: 'mid', split: { 'Өмнөговь': { dir: 'row', parts: [['зүүн', 'hi'], ['баруун', 'mid' }, }, mapNote: 'Н – хур тунадас ОЖД-ийн орчим, И – хур тунадас ОЖД-аас ахиу', sources: [pic('dec', 2), pic('dec', 3)], }, }, { name: '2027 оны 1-р сар', headline: '1-р сард нутгийн баруун, хойд хэсгээр дулаан, хойд, зүүн аймгуудаар цас их орно.', forecastLabel: '2027 оны төлөв', temp: { scaleTitle: '1-р сард хэр хүйтэн байдаг вэ?', zones: [ { label: '-12…-16°C', size: 22.2, bg: '#D85A30', fg: '#fff', name: 'Хамгийн дулаан', where: 'Алтайн өвөр говь, говийн аймгууд' }, { label: '-18…-22°C', size: 22.2, bg: '#9FE1CB', fg: '#04342C', name: 'Дунд зэрэг', where: 'Бусад нутаг' }, { label: '-22…-26°C', size: 22.2, bg: '#85B7EB', fg: '#042C53', name: 'Хүйтэн', where: 'Хэнтийн уулархаг нутаг, Туул, Тэрэлж голын хөндий' }, { label: '-26…-32°C', size: 33.4, bg: '#185FA5', fg: '#fff', name: 'Хамгийн хүйтэн', where: 'Хангай, Хөвсгөлийн уулархаг нутаг, Увс нуур, Идэр, Тэс голын хөндий, Их нууруудын хотгор' }, ], cats: { hi: { label: 'ОЖД-аас дулаан', legend: 'ОЖД-аас дулаан (зураг дээрх Д)', ...WARM }, mid: { label: 'ОЖД-ийн орчим', legend: 'ОЖД-ийн орчим (зураг дээрх Н)', ...AMBER }, }, areas: { hi: [], mid: ['Сэлэнгэ', 'Төв', 'Хэнтий', 'Дорнод', 'Сүхбаатар', 'Говьсүмбэр', 'Дундговь', 'Дорноговь'] }, rest: 'hi', split: { 'Булган': { dir: 'row', parts: [['зүүн', 'mid'], ['баруун', 'hi' }, }, mapNote: 'Н – агаарын температур ОЖД-ийн орчим, Д – агаарын температур ОЖД-аас дулаан', sources: [pic('jan', 0), pic('jan', 1)], }, rain: { scaleTitle: '1-р сард хэр их цас ордог вэ?', zones: [ { label: '❄ 0–2 мм', size: 50, bg: '#FFDD00', fg: '#412402', name: 'Бага', where: 'Бусад нутаг' }, { label: '❄❄❄ 2–4 мм', size: 50, bg: '#B8FFB8', fg: '#173404', name: 'Арай их', where: 'Увс нуурын хотгор, Орхон, Сэлэнгийн сав газар, Дорнодын тал нутаг' }, ], cats: { hi: { effect: 'snow', label: 'ОЖД-аас ахиу', legend: 'ОЖД-аас ахиу (зураг дээрх И)', ...WET }, mid: { label: 'Дунджийн орчим', legend: 'Дунджийн орчим (зураг дээрх Н)', ...AMBER }, }, areas: { hi: ['Хөвсгөл', 'Булган', 'Сэлэнгэ', 'Төв', 'Говьсүмбэр', 'Хэнтий', 'Дорнод', 'Сүхбаатар'], mid: [] }, rest: 'mid', split: { 'Архангай': { dir: 'col', parts: [['ихэнх', 'hi'], ['бусад', 'mid' }, 'Дорноговь': { dir: 'col', parts: [['хойд', 'hi'], ['урд', 'mid' }, }, mapNote: 'Н – хур тунадас ОЖД-ийн орчим, И – хур тунадас ОЖД-аас ахиу', sources: [pic('jan', 2), pic('jan', 3)], }, }, { name: '2027 оны 2-р сар', headline: '2-р сард ихэнх нутгаар дулаан, төв, зүүн аймгуудаар цас их орно.', forecastLabel: '2027 оны төлөв', temp: { scaleTitle: '2-р сард хэр хүйтэн байдаг вэ?', zones: [ { label: '-6…-12°C', size: 30, bg: '#D85A30', fg: '#fff', name: 'Хамгийн дулаан', where: 'Алтайн өвөр говь, говийн аймгууд' }, { label: '-13…-21°C', size: 40, bg: '#9FE1CB', fg: '#04342C', name: 'Дунд зэрэг', where: 'Бусад нутаг' }, { label: '-22…-28°C', size: 30, bg: '#185FA5', fg: '#fff', name: 'Хамгийн хүйтэн', where: 'Алтай, Хангай, Хөвсгөл, Хэнтийн уулархаг нутаг' }, ], cats: { hi: { label: 'ОЖД-аас дулаан', legend: 'ОЖД-аас дулаан (зураг дээрх Д)', ...WARM }, mid: { label: 'ОЖД-ийн орчим', legend: 'ОЖД-ийн орчим (зураг дээрх Н)', ...AMBER }, }, areas: { hi: [], mid: ['Говьсүмбэр', 'Хэнтий', 'Дорнод', 'Сүхбаатар'] }, rest: 'hi', split: { 'Дорноговь': { dir: 'col', parts: [['хойд', 'mid'], ['урд', 'hi' }, }, mapNote: 'Н – агаарын температур ОЖД-ийн орчим, Д – агаарын температур ОЖД-аас дулаан', sources: [pic('feb', 0), pic('feb', 1)], }, rain: { scaleTitle: '2-р сард хэр их цас ордог вэ?', zones: [ { label: '❄ 0–2 мм', size: 50, bg: '#FFDD00', fg: '#412402', name: 'Бага', where: 'Бусад нутаг' }, { label: '❄❄❄ 2–4 мм', size: 50, bg: '#B8FFB8', fg: '#173404', name: 'Арай их', where: 'Хангайн нурууны төгсгөл, Хөвсгөл, Хэнтийн уулархаг нутаг, Дорнодын тал нутаг' }, ], cats: { hi: { effect: 'snow', label: 'ОЖД-аас ахиу', legend: 'ОЖД-аас ахиу (зураг дээрх И)', ...WET }, mid: { label: 'Дунджийн орчим', legend: 'Дунджийн орчим (зураг дээрх Н)', ...AMBER }, }, areas: { hi: ['Хэнтий', 'Булган', 'Сэлэнгэ', 'Дорнод', 'Сүхбаатар'], mid: [] }, rest: 'mid', split: { 'Төв': { dir: 'row', parts: [['зүүн', 'hi'], ['баруун', 'mid' }, 'Дорноговь': { dir: 'col', parts: [['хойд', 'hi'], ['урд', 'mid' }, }, mapNote: 'Н – хур тунадас ОЖД-ийн орчим, И – хур тунадас ОЖД-аас ахиу', sources: [pic('feb', 2), pic('feb', 3)], }, }, ]; // ===================================================== // APP: хуудсыг data-аас зурдаг код. Ихэнхдээ засах шаардлагагүй. // Мэдээллийг data.js / data-nov.js / aimags.js-д засна. // ===================================================== const KINDS = { temp: 'Агаарын температур', rain: 'Хур тунадас' }; const app = document.getElementById('app'); // Зураг: нэг файлд шигтгэсэн бол IMG-ээс, үгүй бол images/ хавтсаас авна const src = p => (typeof IMG !== 'undefined' && IMG[p]) || p; let openIndex = 0; // аль сар нээлттэй байгаа (-1 = бүгд хаалттай) const kindOf = MONTHS.map(() => 'temp'); // сар бүрийн сонгосон таб: 'temp' эсвэл 'rain' // ---------- Туслах функцүүд ---------- // Хайлтад "ө"="о", "ү"="у" гэж тооцно const fold = s => s.toLowerCase().replace(/ө/g, 'о').replace(/ү/g, 'у').replace(/\s+/g, ''); function current() { const m = MONTHS[openIndex], kind = kindOf[openIndex]; return { m, kind, ds: m[kind] }; } function categoryOf(ds, name) { for (const [cat, list] of Object.entries(ds.areas)) { if (list.includes(name)) return cat; } return ds.rest; } // Зураг: string = бэлэн (тайрсан) зураг, object = crop(...) -ээр тайрч харуулна function imgHTML(spec, alt = '') { if (typeof spec === 'string') return ` `; const { url, w, h, x, y, cw, ch } = spec; return ` `; } // ---------- HTML бүтээх ---------- // Аймгийн хилийн хүрээ (хуваахад хэрэгтэй) const bboxCache = {}; function bboxOf(name) { if (!bboxCache[name]) { const n = SHAPES[name].d.match(/-?\d+\.?\d*/g).map(Number); let x0 = 1e9, y0 = 1e9, x1 = -1e9, y1 = -1e9; for (let k = 0; k = x0 && cx = y0 && cy `; } else { const cat = STATUS_AS[name] ? catAs(ds, name) : categoryOf(ds, name); fill = ` `; } const lines = LABELS[name] || [name]; const tiny = ['Орхон', 'Дархан-Уул', 'Говьсүмбэр', 'Улаанбаатар'].includes(name); const small = tiny || lines.length > 1; const x = s.lx + (s.dx || 0), y = s.ly + (s.dy || 0) - (lines.length - 1) * 4; const label = lines.map((t, k) => ` ${t} `).join(''); // Жижиг нутгийн хүрээг тодруулж, нэрийг нь шугамаар холбоно const leader = tiny ? ` ` : ''; return ` ${fill} ${name} ${leader} ${label} ${label} `; } // ---------- Хөдөлгөөнт эффект: цас (ахиу хур тунадас), жавар (хүйтэн) ---------- // Эффект бүхий ангилалтай хэсгүүдийн жагсаалт: { effect, d, rect, invert } function effectItems(ds) { const items = [], add = (cat, d, rect, invert) => { const e = ds.cats[cat].effect; if (e) items.push({ effect: e, d, rect, invert }); }; Object.keys(SHAPES).forEach(name => { const d = SHAPES[name].d; if (STATUS_AS[name]) return add(catAs(ds, name), d); const si = splitInfo(ds, name); if (si) { add(si.d[1], d, si.rect, false); add(si.r[1], d, si.rect, true); } else add(categoryOf(ds, name), d); }); return items; } const VBOX = { w: 800, h: 393 }; let fxFrame = 0, fxState = null; function startEffects() { cancelAnimationFrame(fxFrame); fxState = null; const cv = app.querySelector('.fx'); if (!cv) return; const ctx = cv.getContext('2d'), { ds } = current(); const items = effectItems(ds).map(it => { let clip = null; if (it.rect) { clip = new Path2D(); if (it.invert) clip.rect(0, 0, VBOX.w, VBOX.h); clip.rect(it.rect[0], it.rect[1], it.rect[2] - it.rect[0], it.rect[3] - it.rect[1]); } return { effect: it.effect, poly: new Path2D(it.d), clip, invert: it.invert }; }); if (!items.length) return; const rnd = (a, b) => a + Math.random() * (b - a); const flakes = Array.from({ length: 700 }, () => ({ x: rnd(0, VBOX.w), y: rnd(0, VBOX.h), r: rnd(.9, 2.3), v: rnd(.25, .7), ph: rnd(0, 6.28) })); const crystals = Array.from({ length: 260 }, () => ({ x: rnd(0, VBOX.w), y: rnd(0, VBOX.h), r: rnd(3, 7), ph: rnd(0, 6.28), sp: rnd(.015, .04) })); const still = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches; function size() { const r = cv.parentElement.getBoundingClientRect(), dpr = window.devicePixelRatio || 1; cv.width = Math.round(r.width * dpr); cv.height = Math.round(r.height * dpr); } size(); fxState = { size }; function drawSnow(dt) { ctx.fillStyle = '#fff'; ctx.strokeStyle = 'rgba(40,80,20,.45)'; ctx.lineWidth = .35; flakes.forEach(f => { f.y += f.v * dt * 1.6; f.ph += .03 * dt; f.x += Math.sin(f.ph) * .35 * dt + .15 * dt; if (f.y > VBOX.h) { f.y = -3; f.x = rnd(0, VBOX.w); } if (f.x > VBOX.w) f.x = 0; ctx.beginPath(); ctx.arc(f.x, f.y, f.r, 0, 6.283); ctx.fill(); ctx.stroke(); }); } // Жавар: анивчих мөсөн оч (6 үзүүртэй од) ба хүрээний дагуух хүйтэн манан function drawFrost(dt, poly) { ctx.save(); const pulse = .5 + .5 * Math.sin(performance.now() / 900); ctx.lineJoin = 'round'; ctx.strokeStyle = `rgba(255,255,255,${.28 + .22 * pulse})`; ctx.lineWidth = 9; ctx.stroke(poly); ctx.strokeStyle = `rgba(200,230,255,${.35 + .25 * pulse})`; ctx.lineWidth = 3.5; ctx.stroke(poly); crystals.forEach(c => { c.ph += c.sp * dt; const a = .5 + .5 * Math.sin(c.ph); if (a { ctx.save(); if (it.clip) ctx.clip(it.clip, it.invert ? 'evenodd' : 'nonzero'); ctx.clip(it.poly); if (it.effect === 'snow') drawSnow(dt); else drawFrost(dt, it.poly); ctx.restore(); }); if (!still) fxFrame = requestAnimationFrame(frame); } fxFrame = requestAnimationFrame(frame); } window.addEventListener('resize', () => { if (fxState) fxState.size(); }); function viewHTML(ds, m) { const zones = ds.zones.map(z => ` ${z.label} ${z.name} ${z.where} `).join(''); const shapes = Object.keys(SHAPES).map((name, i) => aimagHTML(ds, name, i)).join(''); const legend = Object.values(ds.cats).map(c => ` ${c.legend || c.label} `).join(''); const notes = ds.notes ? ` Бүс нутгаар ${ds.notes.map(n => ` ${n.title} ${n.text} `).join('')} ` : ''; return ` ${ds.scaleTitle} · олон жилийн дундаж ${zones} ${m.name}ыг ОЖД-тай харьцуулахад ${legend} АЙМГААР ХАЙХ Цэвэрлэх Газрын зургийг хажуу тийш гүйлгэж үзнэ үү → ${shapes} ${notes} Газрын зураг дээр харах ОЖД болон төлөвийг гүйлгэж харьцуулах ${imgHTML(ds.images.forecast, 'Газрын зургийн жижиг зураг')} `; } function monthHTML(m, i) { const open = i === openIndex; let body = ''; if (open) { const tabs = Object.entries(KINDS).map(([k, name]) => ` ${name} `).join(''); body = ` ${tabs} ${viewHTML(m[kindOf[i , m)} `; } return ` ${m.name} ${m.headline || ''} ▾ ${body} `; } function render() { app.innerHTML = MONTHS.map(monthHTML).join(''); startEffects(); } // ---------- Аймгаар хайх ---------- function runSearch(text) { const { ds } = current(); const v = fold(text), rows = []; app.querySelectorAll('.ag').forEach(tile => { tile.classList.remove('dim', 'hit'); if (!v) return; const name = tile.dataset.name; const names = [name, ...(ALIASES[name] || [])].filter(n => fold(n).includes(v)); if (!names.length) { tile.classList.add('dim'); return; } tile.classList.add('hit'); const split = ds.split[name]; const statuses = STATUS_AS[name] ? [['', catAs(ds, name) : split ? split.parts.map(([t, c]) => [` (${t})`, c]) : [['', categoryOf(ds, name) ; names.forEach(n => statuses.forEach(([suffix, cat]) => { const c = ds.cats[cat]; rows.push(` ${n}${suffix} : ${c.label} `); })); }); app.querySelector('.result').innerHTML = v && !rows.length ? 'Олдсонгүй. Аймгийн нэрийг шалгана уу.' : rows.join(''); } // ---------- Товч дарах, хайх ---------- app.addEventListener('click', e => { const head = e.target.closest('[data-month]'); if (head) { const i = +head.dataset.month; openIndex = openIndex === i ? -1 : i; render(); return; } const tab = e.target.closest('[data-kind]'); if (tab) { kindOf[openIndex] = tab.dataset.kind; render(); return; } if (e.target.closest('[data-clear]')) { const input = app.querySelector('.search input'); input.value = ''; runSearch(''); input.focus(); return; } if (e.target.closest('[data-map]')) openModal(); }); app.addEventListener('input', e => { if (e.target.matches('.search input')) runSearch(e.target.value); }); // ---------- Зургийг бэлтгэх ---------- // Сар бүрийн хоёр зургаас өргөн нь том (≈1000) нь "төлөв", жижиг (≈936) нь "ОЖД". Хэмжээ нь ижил бол 1-р зургийг "төлөв" гэж авна. function loadImage(url) { return new Promise(res => { const i = new Image(); i.onload = () => res(i); i.onerror = () => res(null); i.src = url; }); } function makeImages([u1, u2], [a, b]) { let fcUrl = u1, noUrl = u2, fc = a, no = b; if (a && b && b.naturalWidth > a.naturalWidth) { fcUrl = u2; noUrl = u1; fc = b; no = a; } const fw = fc ? fc.naturalWidth : 1000, fh = fc ? fc.naturalHeight : 640; const nw = no ? no.naturalWidth : 936, nh = no ? no.naturalHeight : 634; const f = fw / 1000, n = nw / 936; // зураг өөр хэмжээтэй байвал харьцуулж тохируулна return { forecast: crop(fcUrl, fw, fh, 80 * f, 30 * f, 841 * f, 463 * f), normal: crop(noUrl, nw, nh, 48 * n, 29 * n, 841 * n, 463 * n), bar: crop(fcUrl, fw, fh, 80 * f, 556 * f, 841 * f, fh - 556 * f), }; } function prepareImages() { const jobs = []; MONTHS.forEach(m => ['temp', 'rain'].forEach(k => { const ds = m[k]; if (ds.images) return; // бэлэн зурагтай бол алгасна jobs.push(Promise.all(ds.sources.map(loadImage)).then(imgs => { ds.images = makeImages(ds.sources, imgs); })); })); return Promise.all(jobs); } // ---------- Харьцуулах цонх (гүйлгэгч) ---------- const modal = document.getElementById('modal'); const cmp = document.getElementById('cmp'); const layerForecast = document.getElementById('layerForecast'); const line = document.getElementById('line'); const knob = document.getElementById('knob'); let pos = 50; function setPos(p) { pos = Math.max(0, Math.min(100, p)); layerForecast.style.clipPath = `inset(0 0 0 ${pos}%)`; line.style.left = knob.style.left = pos + '%'; cmp.setAttribute('aria-valuenow', Math.round(pos)); } function openModal() { const { m, kind, ds } = current(); document.getElementById('modalTitle').textContent = `${m.name}: ${KINDS[kind]}`; document.getElementById('layerNormal').innerHTML = imgHTML(ds.images.normal, 'ОЖД'); layerForecast.innerHTML = imgHTML(ds.images.forecast, 'Төлөв'); document.getElementById('barBox').innerHTML = imgHTML(ds.images.bar, 'Өнгөний шкал'); document.getElementById('mapNote').textContent = ds.mapNote ? 'Зураг дээрх тэмдэглэгээ: ' + ds.mapNote : ''; document.getElementById('chipRight').textContent = m.forecastLabel; modal.classList.add('on'); setPos(50); document.getElementById('closeBtn').focus(); } function closeModal() { modal.classList.remove('on'); } let dragging = false; const fromEvent = e => { const r = cmp.getBoundingClientRect(); setPos((e.clientX - r.left) / r.width * 100); }; cmp.addEventListener('pointerdown', e => { dragging = true; cmp.setPointerCapture(e.pointerId); fromEvent(e); }); cmp.addEventListener('pointermove', e => { if (dragging) fromEvent(e); }); cmp.addEventListener('pointerup', () => dragging = false); cmp.addEventListener('pointercancel', () => dragging = false); cmp.addEventListener('keydown', e => { if (e.key === 'ArrowLeft') { setPos(pos - 4); e.preventDefault(); } if (e.key === 'ArrowRight') { setPos(pos + 4); e.preventDefault(); } }); document.getElementById('closeBtn').addEventListener('click', closeModal); modal.addEventListener('click', e => { if (e.target === modal) closeModal(); }); document.addEventListener('keydown', e => { if (e.key === 'Escape') closeModal(); }); // Бүх скрипт (зургийн сан ч) ачаалагдсаны дараа зурна window.addEventListener('DOMContentLoaded', () => { app.innerHTML = ' Зураг ачаалж байна… '; prepareImages().then(render); }); const IMG = { };