{"id":4831,"date":"2026-04-17T11:55:37","date_gmt":"2026-04-17T11:55:37","guid":{"rendered":"https:\/\/bukowina1856.eu\/?page_id=4831"},"modified":"2026-10-11T09:33:11","modified_gmt":"2026-10-11T09:33:11","slug":"metamorfoze","status":"publish","type":"page","link":"https:\/\/bukowina1856.eu\/en\/metamorfoze\/","title":{"rendered":""},"content":{"rendered":"\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<!DOCTYPE html>\r\n<html lang=\"ro\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">\r\n  <title>Hart\u0103 Dashboard Istoric<\/title>\r\n  <!-- Baza de date externa -->\r\n  <script src=\"https:\/\/bukowina1856.eu\/wp-content\/uploads\/meta\/surse.js\"><\/script>\r\n  \r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,600;1,600&#038;display=swap\" rel=\"stylesheet\">\r\n  \r\n  <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" \/>\r\n  <script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\r\n  <script src=\"https:\/\/unpkg.com\/esri-leaflet@3.0.12\/dist\/esri-leaflet.js\"><\/script>\r\n  <script src=\"https:\/\/cdn.jsdelivr.net\/gh\/digidem\/leaflet-side-by-side@gh-pages\/leaflet-side-by-side.min.js\"><\/script>\r\n\r\n  <style>\r\n    body {\r\n      margin: 0; padding: 0;\r\n      font-family: 'Segoe UI', Arial, sans-serif;\r\n      background: #f8fafc;\r\n      \/* Urmatoarele 4 reguli asigura fixarea ecranului pe mobil *\/\r\n      overflow: hidden; \r\n      position: fixed;\r\n      width: 100%;\r\n      height: 100dvh;\r\n      overscroll-behavior: none;\r\n    }\r\n\r\n    \/* --- SPLASH SCREEN --- *\/\r\n    #splash-screen-overlay {\r\n      position: fixed;\r\n      top: 0; left: 0;\r\n      width: 100vw; height: 100vh;\r\n      background-color: rgba(15, 23, 42, 0.95);\r\n      z-index: 1000000;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      transition: opacity 0.8s ease-out, visibility 0.8s ease-out;\r\n    }\r\n\r\n    #splash-screen-overlay.ascuns {\r\n      opacity: 0;\r\n      visibility: hidden;\r\n    }\r\n\r\n    .splash-caseta {\r\n      width: 800px;\r\n      max-width: 90vw;\r\n      background-color: #ffffff;\r\n      border-radius: 4px;\r\n      box-shadow: 0 25px 50px -12px rgba(0,0,0,0.7);\r\n      overflow: hidden;\r\n      display: flex;\r\n      flex-direction: column;\r\n      animation: intrareSplash 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;\r\n      transform: translateY(30px);\r\n      opacity: 0;\r\n    }\r\n\r\n    \/* Inlocuit .splash-imagine cu .splash-video *\/\r\n    .splash-video {\r\n      width: 100%;\r\n      height: 380px;\r\n      object-fit: cover;\r\n      filter: contrast(1.15) sepia(0.15) brightness(0.9);\r\n      border-bottom: 4px solid #1e293b;\r\n      display: block;\r\n    }\r\n\r\n    .splash-continut {\r\n      padding: 40px 40px 30px 40px;\r\n      text-align: center;\r\n      background-color: #ffffff;\r\n    }\r\n\r\n    .splash-titlu {\r\n      font-family: 'Playfair Display', Georgia, serif;\r\n      font-size: 2.5rem;\r\n      color: #0f172a;\r\n      margin: 0;\r\n      letter-spacing: 3px;\r\n      text-transform: uppercase;\r\n      \/* ANIMATIA PENTRU TITLU - dureaza 5s, in ton cu clipul *\/\r\n      animation: metamorfozaText 5s ease-out forwards;\r\n    }\r\n\r\n    .splash-linie {\r\n      width: 50px;\r\n      height: 3px;\r\n      background-color: #dc2626;\r\n      margin: 15px auto;\r\n    }\r\n\r\n    .splash-subtitlu {\r\n      font-family: 'Segoe UI', Arial, sans-serif;\r\n      font-size: 1.1rem;\r\n      color: #475569;\r\n      margin: 0;\r\n      line-height: 1.6;\r\n      font-style: italic;\r\n    }\r\n\r\n    .splash-footer {\r\n      margin-top: 25px;\r\n      padding-top: 15px;\r\n      border-top: 1px solid #f1f5f9;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      gap: 8px;\r\n      font-size: 0.85rem;\r\n      color: #94a3b8;\r\n    }\r\n\r\n    .splash-footer input {\r\n      cursor: pointer;\r\n    }\r\n\r\n    @keyframes intrareSplash {\r\n      to { transform: translateY(0); opacity: 1; }\r\n    }\r\n\r\n    \/* KEYFRAMES PENTRU ANIMATIA TITLULUI (DESKTOP) *\/\r\n    @keyframes metamorfozaText {\r\n      0% {\r\n        opacity: 0;\r\n        filter: blur(15px);\r\n        letter-spacing: -2px;\r\n      }\r\n      30% {\r\n        opacity: 1;\r\n        filter: blur(0);\r\n        letter-spacing: 3px;\r\n      }\r\n      100% {\r\n        opacity: 1;\r\n        filter: blur(0);\r\n        letter-spacing: 8px;\r\n      }\r\n    }\r\n\r\n    \/* KEYFRAMES PENTRU ANIMATIA TITLULUI (MOBIL) - expandare foarte fin\u0103 *\/\r\n    @keyframes metamorfozaTextMobil {\r\n      0% {\r\n        opacity: 0;\r\n        filter: blur(10px);\r\n        letter-spacing: -2px;\r\n      }\r\n      30% {\r\n        opacity: 1;\r\n        filter: blur(0);\r\n        letter-spacing: 0px;\r\n      }\r\n      100% {\r\n        opacity: 1;\r\n        filter: blur(0);\r\n        letter-spacing: 0.5px; \/* Cre\u0219tere abia perceptibil\u0103 *\/\r\n      }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      .splash-video { height: 220px; }\r\n      .splash-titlu { \r\n        font-size: 1.5rem; \/* U\u0219or redus pentru a \u00eenc\u0103pea perfect *\/\r\n        white-space: nowrap; \/* For\u021beaz\u0103 textul s\u0103 nu treac\u0103 pe r\u00e2ndul 2 niciodat\u0103 *\/\r\n        animation: metamorfozaTextMobil 5s ease-out forwards; \r\n      }\r\n      .splash-continut { padding: 30px 20px; }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      .splash-video { height: 220px; }\r\n      .splash-titlu { \r\n \u00a0font-size: 1rem; \/* U\u0219or redus pentru a \u00eenc\u0103pea perfect *\/        \r\n        animation: metamorfozaTextMobil 5s ease-out forwards; \r\n      }\r\n      .splash-continut { padding: 30px 20px; }\r\n    }\r\n\r\n    \/* --- RESTUL STILURILOR APLICA\u021aIEI --- *\/\r\n    .dashboard-container {\r\n      display: flex; \r\n      flex-wrap: wrap; \r\n      gap: 20px; \r\n      width: 100%;\r\n      height: 100vh;\r\n      box-sizing: border-box;\r\n      padding: 10px;\r\n      align-items: stretch;\r\n    }\r\n\r\n    \/* ST\u00c2NGA (Harta Detaliat\u0103) *\/\r\n    #harta-wrapper {\r\n      flex: 2; \r\n      min-width: 300px; \r\n      position: relative; \r\n      border-radius: 8px; \r\n      overflow: hidden; \r\n      box-shadow: 0 4px 10px rgba(0,0,0,0.15);\r\n      height: calc(100vh - 20px);\r\n    }\r\n    #map-div { width: 100%; height: 100%; z-index: 1; }\r\n\r\n    \/* DREAPTA (Coloana cu Atlas + Info) *\/\r\n    #dreapta-wrapper {\r\n      flex: 1;\r\n      min-width: 250px;\r\n      display: flex;\r\n      flex-direction: column; \r\n      gap: 20px;\r\n      height: calc(100vh - 20px); \r\n    }\r\n\r\n    #atlas-wrapper {\r\n      flex: 1; \r\n      min-height: 0; \r\n      position: relative; \r\n      border-radius: 8px; \r\n      overflow: hidden; \r\n      box-shadow: 0 4px 10px rgba(0,0,0,0.15);\r\n    }\r\n    #atlas-div { width: 100%; height: 100%; z-index: 1; }\r\n    \r\n    \/* Caseta de informa\u021bii *\/\r\n    #info-box {\r\n      flex: 1; \r\n      min-height: 0; \r\n      background: #ffffff;\r\n      border-radius: 8px;\r\n      box-shadow: 0 4px 10px rgba(0,0,0,0.15);\r\n      padding: 20px;\r\n      color: #334155;\r\n      overflow-y: auto; \r\n      box-sizing: border-box;\r\n      display: flex;\r\n      flex-direction: column;\r\n    }\r\n    \r\n    .info-title {\r\n      font-family: 'Playfair Display', Georgia, serif;\r\n      font-size: 20px;\r\n      line-height: 1.3;\r\n      font-style: normal;\r\n      color: #0f172a;\r\n      border-bottom: 2px solid #e2e8f0;\r\n      padding-bottom: 10px;\r\n      margin-bottom: 15px;\r\n      display: flex;\r\n      align-items: flex-start;\r\n      gap: 8px;\r\n    }\r\n    \r\n    \/* STILURI INDICATOR ACURATE\u021aE *\/\r\n    .indicator-acuratete {\r\n      display: inline-block;\r\n      width: 14px;\r\n      height: 14px;\r\n      border-radius: 3px;\r\n      flex-shrink: 0;\r\n      margin-top: 5px; \r\n      margin-right: 10px;\r\n      cursor: help;\r\n      box-shadow: 0 1px 3px rgba(0,0,0,0.2);\r\n    }\r\n    .acuratete-verde { background-color: #22c55e; }\r\n    .acuratete-galben { background-color: #eab308; }\r\n    .acuratete-rosu { background-color: #ef4444; }\r\n    .acuratete-nespecificat { display: none; }\r\n    \r\n    #info-text { font-size: 15px; line-height: 1.7; }\r\n\r\n    .eticheta-oras {\r\n      background: transparent !important;\r\n      border: none !important;\r\n      box-shadow: none !important;\r\n      font-weight: 700;\r\n      font-size: 13px;\r\n      color: #0f172a;\r\n      text-shadow: 1px 1px 2px #ffffff, -1px -1px 2px #ffffff, 1px -1px 2px #ffffff, -1px 1px 2px #ffffff;\r\n    }\r\n\r\n    \/* Stiluri Galerie Foto *\/\r\n    #galerie-foto {\r\n      margin-top: 20px;\r\n      display: flex;\r\n      flex-direction: row; \r\n      gap: 15px;\r\n    }\r\n    .galerie-item {\r\n      flex: 1; \r\n      border-top: 1px solid #e2e8f0;\r\n      padding-top: 15px;\r\n      display: flex;\r\n      flex-direction: column;\r\n    }\r\n    .galerie-item img {\r\n      width: 100%;\r\n      height: 200px; \r\n      object-fit: cover; \r\n      border-radius: 6px;\r\n      box-shadow: 0 2px 4px rgba(0,0,0,0.15);\r\n      display: block;\r\n      cursor: pointer;\r\n      transition: transform 0.2s ease, box-shadow 0.2s ease;\r\n    }\r\n    .galerie-item img:hover {\r\n      transform: scale(1.02);\r\n      box-shadow: 0 4px 12px rgba(0,0,0,0.2);\r\n    }\r\n    .galerie-explicatie {\r\n      font-size: 13px;\r\n      color: #64748b;\r\n      text-align: center;\r\n      font-style: italic;\r\n      margin-top: 6px;\r\n    }\r\n\r\n    \/* Efect Lightbox *\/\r\n    #lightbox-modal {\r\n      position: fixed; top: 0; left: 0; width: 100%; height: 100%;\r\n      background-color: rgba(15, 23, 42, 0.9);\r\n      z-index: 10000;\r\n      display: flex; flex-direction: column; align-items: center; justify-content: center;\r\n      transition: opacity 0.3s ease;\r\n    }\r\n    #lightbox-modal.lightbox-hidden { display: none; opacity: 0; }\r\n    #lightbox-img { max-width: 90%; max-height: 85%; border-radius: 6px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); }\r\n    #lightbox-caption { color: #f8fafc; margin-top: 15px; font-size: 16px; font-style: italic; text-align: center; max-width: 80%; }\r\n    #lightbox-close { position: absolute; top: 20px; right: 30px; color: #ffffff; font-size: 40px; font-weight: bold; cursor: pointer; transition: 0.2s; }\r\n    #lightbox-close:hover { color: #94a3b8; }\r\n\r\n    \/* CONTROALE ST\u00c2NGA *\/\r\n    .control-panel { position: absolute; background: rgba(255, 255, 255, 0.95); border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.3); z-index: 1000; }\r\n    \r\n    #basemap-container { position: absolute; top: 15px; right: 15px; z-index: 1000; }\r\n    .action-icon { background: white; width: 40px; height: 40px; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; font-size: 22px; cursor: pointer; transition: background 0.2s; }\r\n    .action-icon:hover { background: #f1f5f9; }\r\n    \r\n    .basemap-menu { display: none; position: absolute; top: 0; right: 45px; background: white; padding: 8px; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.3); white-space: nowrap; }\r\n    .basemap-menu.active { display: block; }\r\n    \r\n    #gps-container { position: absolute; top: 65px; right: 15px; z-index: 1000; }\r\n    #swipe-toggle-container { position: absolute; top: 115px; right: 15px; z-index: 1000; }\r\n    #opacity-control { top: 50%; left: 15px; transform: translateY(-50%); padding: 12px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: 0.3s; }\r\n    \r\n    #time-control { bottom: 25px; left: 15px; width: 600px; max-width: calc(100vw - 50px); padding: 15px 20px 15px 20px; box-sizing: border-box; }\r\n    #labels-container { position: relative; width: 100%; height: 18px; margin-top: 6px; }\r\n    .year-label { font-size: 13px; font-weight: bold; color: #94a3b8; position: absolute; top: 0; transition: opacity 0.2s; }\r\n    .active-floating { color: #dc2626; font-size: 14px; z-index: 2; transition: left 0.1s linear, transform 0.1s linear; text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; }\r\n\r\n    .btn-secvential { background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 5px; padding: 5px 12px; cursor: pointer; font-size: 14px; font-weight: bold; color: #3b82f6; transition: background 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.1); outline: none; -webkit-tap-highlight-color: transparent; }\r\n    .btn-secvential:focus { outline: none; }\r\n    .btn-secvential:hover { background: #e2e8f0; color: #2563eb; }\r\n    .btn-secvential:active { background: #cbd5e1; }\r\n\r\n    #slider-timp, #slider-opacitate { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; margin: 0; }\r\n    #slider-timp:focus, #slider-opacitate:focus { outline: none; }\r\n\r\n    #slider-timp::-webkit-slider-runnable-track, #slider-opacitate::-webkit-slider-runnable-track { width: 100%; height: 4px; background: #cbd5e1; border-radius: 2px; }\r\n    #slider-timp::-moz-range-track, #slider-opacitate::-moz-range-track { width: 100%; height: 4px; background: #cbd5e1; border-radius: 2px; border: none; }\r\n\r\n    #slider-timp::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: #dc2626; border-radius: 50%; margin-top: -8px; box-shadow: 0 1px 3px rgba(0,0,0,0.4); border: none; }\r\n    #slider-timp::-moz-range-thumb { width: 20px; height: 20px; background: #dc2626; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.4); border: none; }\r\n\r\n    .slider-rotit-wrapper { width: 20px; height: 120px; display: flex; align-items: center; justify-content: center; }\r\n    #slider-opacitate { width: 120px; transform: rotate(-90deg); background: transparent; }\r\n    \r\n    #slider-opacitate::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 8px; background: #dc2626; border-radius: 3px; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.4); margin-top: -2px; border: none; }\r\n    #slider-opacitate::-moz-range-thumb { width: 16px; height: 8px; background: #dc2626; border-radius: 3px; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.4); border: none; }\r\n\r\n    .icon-opac { width: 12px; height: 12px; background-color: #64748b; border-radius: 50%; }\r\n    .icon-transp { width: 12px; height: 12px; border: 2px solid #64748b; border-radius: 50%; box-sizing: border-box; }\r\n\r\n    \/* SWIPE PLUGIN *\/\r\n    .leaflet-sbs-range { z-index: 9999 !important; cursor: ew-resize !important; touch-action: none !important; -webkit-appearance: none !important; appearance: none !important; background: transparent !important; }\r\n    .leaflet-sbs-divider { z-index: 9998 !important; background-color: #3b82f6 !important; width: 4px !important; margin-left: -2px !important; }\r\n    .leaflet-sbs-range::-webkit-slider-thumb { -webkit-appearance: none !important; appearance: none !important; width: 40px !important; height: 40px !important; background-color: #ffffff !important; background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 8 20 12 16 16'%3E%3C\/polyline%3E%3Cpolyline points='8 8 4 12 8 16'%3E%3C\/polyline%3E%3Cline x1='4' y1='12' x2='20' y2='12'%3E%3C\/line%3E%3C\/svg%3E\") !important; background-size: 24px !important; background-position: center !important; background-repeat: no-repeat !important; border: 2px solid #3b82f6 !important; border-radius: 50% !important; box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important; cursor: ew-resize !important; }\r\n    .leaflet-sbs-range::-moz-range-thumb { width: 40px !important; height: 40px !important; background-color: #ffffff !important; background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 8 20 12 16 16'%3E%3C\/polyline%3E%3Cpolyline points='8 8 4 12 8 16'%3E%3C\/polyline%3E%3Cline x1='4' y1='12' x2='20' y2='12'%3E%3C\/line%3E%3C\/svg%3E\") !important; background-size: 24px !important; background-position: center !important; background-repeat: no-repeat !important; border: 2px solid #3b82f6 !important; border-radius: 50% !important; box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important; cursor: ew-resize !important; }\r\n\r\n    \/* Text Atlas doar pentru Desktop ascuns implicit *\/\r\n    .ascuns-pe-desktop { display: none; }\r\n\r\n    \/* NAVIGA\u021aIE MOBIL *\/\r\n    .mobile-tabs { display: none; }\r\n    @media (max-width: 768px) {\r\n      body { \r\n        background: #ffffff; \r\n        overflow: hidden; \r\n        position: fixed; \r\n        width: 100%; \r\n        height: 100dvh; \r\n        overscroll-behavior: none;\r\n      }\r\n      .dashboard-container { padding: 0; padding-bottom: 60px; height: 100dvh; gap: 0; }\r\n      .mobile-tabs { display: flex; position: fixed; bottom: 0; left: 0; width: 100%; background: #ffffff; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); z-index: 9999; }\r\n      .tab-btn { flex: 1; padding: 15px 5px; border: none; background: none; font-weight: bold; font-size: 14px; color: #64748b; cursor: pointer; border-top: 3px solid transparent; transition: 0.3s; }\r\n      .tab-btn.active { color: #3b82f6; border-top: 3px solid #3b82f6; background: #f8fafc; }\r\n      .ascuns-pe-mobil { display: none !important; }\r\n      #harta-wrapper, #atlas-wrapper, #info-box { border-radius: 0; height: calc(100dvh - 60px); flex: none; width: 100%; box-shadow: none; }\r\n      #dreapta-wrapper { display: block; gap: 0; height: 100%; }\r\n      #time-control { width: calc(100% - 30px); bottom: 65px; left: 15px; } \r\n      .leaflet-control-zoom { display: none !important; }\r\n\r\n      \/* Mesajul pe Atlas doar pe mobil *\/\r\n      .ascuns-pe-desktop { display: block; }\r\n      #atlas-prompt {\r\n        position: absolute;\r\n        top: 15px;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        z-index: 1000;\r\n        background: rgba(255, 255, 255, 0.95);\r\n        padding: 8px 20px;\r\n        border-radius: 20px;\r\n        font-weight: bold;\r\n        color: #0f172a;\r\n        box-shadow: 0 2px 10px rgba(0,0,0,0.2);\r\n        font-size: 14px;\r\n        pointer-events: none;\r\n      }\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"splash-screen-overlay\">\r\n  <div class=\"splash-caseta\">\r\n    <video class=\"splash-video\" src=\"https:\/\/bukowina1856.eu\/wp-content\/uploads\/2026\/05\/fotor-ai-20260514131448.mp4\" autoplay muted playsinline><\/video>\r\n    <div class=\"splash-continut\">\r\n      <h1 class=\"splash-titlu\">Metamorfoze Urbane<\/h1>\r\n      <div class=\"splash-linie\"><\/div>\r\n      <p class=\"splash-subtitlu\">&#8211; o experien\u021b\u0103 cartografic\u0103 interactiv\u0103 &#8211;<\/p>\r\n      \r\n      <div class=\"splash-footer\">\r\n        <input type=\"checkbox\" id=\"check-nu-mai-afisa\">\r\n        <label for=\"check-nu-mai-afisa\">Nu mai afi\u0219a din nou<\/label>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div class=\"mobile-tabs\">\r\n  <button class=\"tab-btn active\" data-target=\"atlas-wrapper\">\ud83c\udf0d Atlas<\/button>\r\n  <button class=\"tab-btn\" data-target=\"harta-wrapper\">\ud83d\uddfa\ufe0f Hart\u0103<\/button>\r\n  <button class=\"tab-btn\" data-target=\"info-box\">Detalii<\/button>\r\n<\/div>\r\n\r\n<div class=\"dashboard-container\">\r\n  \r\n  <div id=\"harta-wrapper\" class=\"ascuns-pe-mobil\">\r\n    <div id=\"basemap-container\" class=\"control-panel\">\r\n      <div class=\"action-icon\" id=\"toggle-basemap\" title=\"Schimb\u0103 Fundalul\">\r\n        <img decoding=\"async\" src=\"https:\/\/images.icon-icons.com\/54\/PNG\/256\/map_search_find_maps_10803.png\" alt=\"Fundal Hart\u0103\" style=\"width: 24px; height: 24px; border: none; background: transparent;\">\r\n      <\/div>\r\n      <div class=\"basemap-menu\" id=\"meniu-fundal\">\r\n        <select id=\"select-fundal\" style=\"font-size:13px; padding:6px; cursor: pointer; border: 1px solid #cbd5e1; border-radius: 4px;\">\r\n          <option value=\"Imagery\">Satelit<\/option>\r\n          <option value=\"ImageryLabels\">Satelit Hibrid (Satelit + Referin\u021be)<\/option>\r\n          <option value=\"OSM\">OpenStreetMap (OSM)<\/option>\r\n          <option value=\"Streets\">Str\u0103zi (ESRI)<\/option>\r\n          <option value=\"Topographic\">Topografic\u0103<\/option>\r\n          <option value=\"Gray\">Minimalist\u0103 (Gri deschis)<\/option>\r\n          <option value=\"DarkGray\">\u00centunecat\u0103 (Gri \u00eenchis)<\/option>\r\n        <\/select>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"gps-container\" class=\"control-panel\">\r\n      <div class=\"action-icon\" id=\"btn-gps\" title=\"Arat\u0103 Loca\u021bia Mea\">\r\n        <img decoding=\"async\" src=\"https:\/\/png.pngtree.com\/png-vector\/20231008\/ourmid\/pngtree-target-marker-location-vector-png-image_10196003.png\" alt=\"Localizare\" style=\"width: 20px; height: 20px; background: transparent; border: none;\">\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"swipe-toggle-container\" class=\"control-panel\">\r\n      <div class=\"action-icon\" id=\"btn-toggle-swipe\" title=\"Comut\u0103 \u00eentre Opacitate \u0219i Glisare\">\r\n        <span style=\"font-size: 18px; color: #475569; font-weight: bold;\">\u2194\ufe0f<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"opacity-control\" class=\"control-panel\">\r\n      <div class=\"icon-opac\"><\/div>\r\n      <div class=\"slider-rotit-wrapper\">\r\n        <input type=\"range\" id=\"slider-opacitate\" min=\"0\" max=\"1\" step=\"0.05\" value=\"0.8\">\r\n      <\/div>\r\n      <div class=\"icon-transp\"><\/div>\r\n    <\/div>\r\n\r\n    <div id=\"time-control\" class=\"control-panel\">\r\n      <div style=\"display: flex; align-items: center; width: 100%;\">\r\n        <button id=\"btn-prev-harta\" class=\"btn-secvential\" title=\"Harta anterioar\u0103\">\u25c0<\/button>\r\n        <div style=\"flex: 1; position: relative; margin: 0 15px;\">\r\n          <div id=\"slider-container-dinamic\"><\/div>\r\n          <div id=\"labels-container\"><\/div>\r\n        <\/div>\r\n        <button id=\"btn-next-harta\" class=\"btn-secvential\" title=\"Harta urm\u0103toare\">\u25b6<\/button>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"map-div\"><\/div>\r\n  <\/div>\r\n\r\n  <div id=\"dreapta-wrapper\">\r\n    <div id=\"atlas-wrapper\">\r\n      <div id=\"atlas-prompt\" class=\"ascuns-pe-desktop\">Alege o localitate<\/div>\r\n      <div id=\"atlas-div\"><\/div>\r\n    <\/div>\r\n    \r\n    <div id=\"info-box\" class=\"ascuns-pe-mobil\">\r\n      <div class=\"info-title\">\r\n        <span id=\"info-nume-oras\">\r\n            <span class=\"ascuns-pe-mobil\">Selecteaz\u0103 o hart\u0103<\/span>\r\n            <span class=\"ascuns-pe-desktop\">Alege un ora\u0219 din atlas<\/span>\r\n        <\/span>\r\n      <\/div>\r\n      <div id=\"info-text\">\r\n          <span class=\"ascuns-pe-mobil\">Folose\u0219te glisorul pentru a explora colec\u021bia.<\/span>\r\n      <\/div>\r\n      \r\n      <div id=\"galerie-foto\"><\/div>\r\n\r\n      <div style=\"flex-grow: 1;\"><\/div>\r\n\r\n      <div class=\"ascuns-pe-desktop\" style=\"margin-top: 30px; padding-top: 15px; border-top: 1px solid #e2e8f0;\">\r\n        <strong style=\"display: block; margin-bottom: 12px; font-size: 14px; color: #1e293b;\">Acurate\u021bea pozi\u021bion\u0103rii:<\/strong>\r\n        <div style=\"display: flex; align-items: center; gap: 8px; margin-bottom: 8px;\">\r\n          <div class=\"indicator-acuratete acuratete-verde\" style=\"margin:0;\"><\/div> \r\n          <span style=\"font-size: 13px; color: #475569;\">Erori sub 10 m (Precizie ridicat\u0103)<\/span>\r\n        <\/div>\r\n        <div style=\"display: flex; align-items: center; gap: 8px; margin-bottom: 8px;\">\r\n          <div class=\"indicator-acuratete acuratete-galben\" style=\"margin:0;\"><\/div> \r\n          <span style=\"font-size: 13px; color: #475569;\">Erori sub 50 m (Precizie medie)<\/span>\r\n        <\/div>\r\n        <div style=\"display: flex; align-items: center; gap: 8px;\">\r\n          <div class=\"indicator-acuratete acuratete-rosu\" style=\"margin:0;\"><\/div> \r\n          <span style=\"font-size: 13px; color: #475569;\">Erori peste 50 m (Precizie sc\u0103zut\u0103)<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<div id=\"lightbox-modal\" class=\"lightbox-hidden\">\r\n  <span id=\"lightbox-close\">\u00d7<\/span>\r\n  <img decoding=\"async\" id=\"lightbox-img\" src=\"\" alt=\"Imagine m\u0103rit\u0103\">\r\n  <div id=\"lightbox-caption\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\nwindow.addEventListener('load', function() {\r\n    if (typeof L === 'undefined') return;\r\n\r\n    \/* --- LOGIC\u0102 SPLASH SCREEN --- *\/\r\n    var splashOverlay = document.getElementById('splash-screen-overlay');\r\n    var checkboxNuMaiAfisa = document.getElementById('check-nu-mai-afisa');\r\n    \r\n    \/\/ 1. Verific\u0103m dac\u0103 utilizatorul a bifat c\u0103su\u021ba \u00een trecut\r\n    if (localStorage.getItem('skipSplashScreen') === 'true') {\r\n        splashOverlay.style.display = 'none'; \/\/ Ascundem complet din start\r\n    } else {\r\n        \/\/ 2. Set\u0103m timerul de \u00eenchidere automat\u0103\r\n        var splashTimeout = setTimeout(function() {\r\n            splashOverlay.classList.add('ascuns');\r\n            setTimeout(function() {\r\n                splashOverlay.style.display = 'none'; \/\/ Cur\u0103\u021bare DOM\r\n            }, 800); \/\/ A\u0219tept\u0103m s\u0103 se termine anima\u021bia de fade\r\n        }, 5000); \/\/ 5 SECUNDE\r\n    }\r\n\r\n    if(checkboxNuMaiAfisa) {\r\n        checkboxNuMaiAfisa.addEventListener('change', function() {\r\n            if (this.checked) {\r\n                localStorage.setItem('skipSplashScreen', 'true');\r\n            } else {\r\n                localStorage.removeItem('skipSplashScreen');\r\n            }\r\n        });\r\n    }\r\n\r\n    \/* --- LOGIC\u0102 \u00ceNCHIDERE LIGHTBOX --- *\/\r\n    var lightboxModal = document.getElementById('lightbox-modal');\r\n    var lightboxClose = document.getElementById('lightbox-close');\r\n\r\n    if (lightboxModal && lightboxClose) {\r\n        lightboxClose.addEventListener('click', function() {\r\n            lightboxModal.classList.add('lightbox-hidden');\r\n        });\r\n        \r\n        lightboxModal.addEventListener('click', function(e) {\r\n            if (e.target === lightboxModal) {\r\n                lightboxModal.classList.add('lightbox-hidden');\r\n            }\r\n        });\r\n    }\r\n\r\n    \/* --- TAB-URI MOBIL --- *\/\r\n    document.querySelectorAll('.tab-btn').forEach(function(btn) {\r\n        btn.addEventListener('click', function() {\r\n            document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));\r\n            this.classList.add('active');\r\n            \r\n            document.getElementById('harta-wrapper').classList.add('ascuns-pe-mobil');\r\n            document.getElementById('atlas-wrapper').classList.add('ascuns-pe-mobil');\r\n            document.getElementById('info-box').classList.add('ascuns-pe-mobil');\r\n            \r\n            var targetId = this.getAttribute('data-target');\r\n            document.getElementById(targetId).classList.remove('ascuns-pe-mobil');\r\n            \r\n            setTimeout(function() {\r\n                if (hartaDetaliu) hartaDetaliu.invalidateSize();\r\n                if (hartaAtlas) hartaAtlas.invalidateSize();\r\n            }, 100);\r\n        });\r\n    });\r\n\r\n    \/* --- MENIU FUNDAL --- *\/\r\n    document.getElementById('toggle-basemap').addEventListener('click', function() {\r\n        document.getElementById('meniu-fundal').classList.toggle('active');\r\n    });\r\n\r\n    \/* --- INITIALIZARE HARTI --- *\/\r\n    var blueIcon = new L.Icon({\r\n        iconUrl: 'https:\/\/raw.githubusercontent.com\/pointhi\/leaflet-color-markers\/master\/img\/marker-icon-2x-blue.png',\r\n        shadowUrl: 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet\/1.9.4\/images\/marker-shadow.png',\r\n        iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41]\r\n    });\r\n\r\n    var redIcon = new L.Icon({\r\n        iconUrl: 'https:\/\/raw.githubusercontent.com\/pointhi\/leaflet-color-markers\/master\/img\/marker-icon-2x-red.png',\r\n        shadowUrl: 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet\/1.9.4\/images\/marker-shadow.png',\r\n        iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41]\r\n    });\r\n\r\n    var hartaDetaliu = L.map('map-div', { zoomControl: false }).setView([44.4268, 26.1025], 13);\r\n    L.control.zoom({ position: 'bottomright' }).addTo(hartaDetaliu);\r\n    L.control.scale({ position: 'bottomright', metric: true, imperial: false }).addTo(hartaDetaliu);\r\n\r\n    var hartaAtlas = L.map('atlas-div', { zoomControl: false }).setView([45.90, 25.00], 6);\r\n    L.control.zoom({ position: 'topleft' }).addTo(hartaAtlas);\r\n    L.control.scale({ position: 'bottomright', metric: true, imperial: false }).addTo(hartaAtlas);\r\n    L.esri.tiledMapLayer({ url: 'https:\/\/server.arcgisonline.com\/ArcGIS\/rest\/services\/World_Topo_Map\/MapServer' }).addTo(hartaAtlas);\r\n\r\n    var currentBasemap = L.esri.basemapLayer('Imagery').addTo(hartaDetaliu);\r\n    var currentLabels = null;\r\n    var stratActiv = null;\r\n    var opacitateCurenta = 0.8;\r\n    var swipeControl = null;\r\n    var isSwipeMode = false;\r\n\r\n    \/* --- SCHIMBARE FUNDAL --- *\/\r\n    document.getElementById('select-fundal').addEventListener('change', function(e) {\r\n        if (currentBasemap) hartaDetaliu.removeLayer(currentBasemap);\r\n        if (currentLabels) hartaDetaliu.removeLayer(currentLabels);\r\n        \r\n        var valoareSelectata = e.target.value;\r\n\r\n        if (valoareSelectata === 'ImageryLabels') {\r\n            currentBasemap = L.esri.basemapLayer('Imagery').addTo(hartaDetaliu);\r\n            currentLabels = L.esri.basemapLayer('ImageryLabels').addTo(hartaDetaliu);\r\n            currentBasemap.bringToBack(); \r\n        } else if (valoareSelectata === 'OSM') {\r\n            currentBasemap = L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\r\n                maxZoom: 19,\r\n                attribution: '\u00a9 OpenStreetMap contributors'\r\n            }).addTo(hartaDetaliu);\r\n            currentLabels = null;\r\n            currentBasemap.bringToBack();\r\n        } else {\r\n            currentBasemap = L.esri.basemapLayer(valoareSelectata).addTo(hartaDetaliu);\r\n            currentLabels = null;\r\n            currentBasemap.bringToBack();\r\n        }\r\n        \r\n        if (isSwipeMode && swipeControl) {\r\n            var dreapta = currentLabels ? [currentBasemap, currentLabels] : [currentBasemap];\r\n            swipeControl.setRightLayers(dreapta);\r\n        }\r\n        \r\n        document.getElementById('meniu-fundal').classList.remove('active');\r\n    });\r\n\r\n    \/* --- GLISARE (SWIPE) PORNIT\/OPRIT --- *\/\r\n    document.getElementById('btn-toggle-swipe').addEventListener('click', function() {\r\n        if (typeof L.control.sideBySide === 'undefined') return;\r\n\r\n        isSwipeMode = !isSwipeMode;\r\n        var opacityPanel = document.getElementById('opacity-control');\r\n\r\n        if (isSwipeMode) {\r\n            this.style.background = \"#3b82f6\";\r\n            this.querySelector('span').style.color = \"#ffffff\";\r\n            opacityPanel.style.display = 'none';\r\n            \r\n            if (stratActiv && typeof stratActiv.setOpacity === 'function') stratActiv.setOpacity(1); \r\n\r\n            var dreapta = currentLabels ? [currentBasemap, currentLabels] : [currentBasemap];\r\n            \r\n            if (!swipeControl) {\r\n                swipeControl = L.control.sideBySide(stratActiv, dreapta).addTo(hartaDetaliu);\r\n                setTimeout(function() {\r\n                    var sbsGlisor = document.querySelector('.leaflet-sbs-range');\r\n                    if (sbsGlisor) {\r\n                        sbsGlisor.addEventListener('mousedown', function() { hartaDetaliu.dragging.disable(); });\r\n                        document.addEventListener('mouseup', function() { hartaDetaliu.dragging.enable(); });\r\n                        sbsGlisor.addEventListener('touchstart', function() { hartaDetaliu.dragging.disable(); }, {passive: true});\r\n                        document.addEventListener('touchend', function() { hartaDetaliu.dragging.enable(); });\r\n                    }\r\n                }, 200);\r\n            } else {\r\n                swipeControl.setLeftLayers(stratActiv);\r\n                swipeControl.setRightLayers(dreapta);\r\n                swipeControl.addTo(hartaDetaliu);\r\n            }\r\n        } else {\r\n            this.style.background = \"white\";\r\n            this.querySelector('span').style.color = \"#475569\";\r\n            opacityPanel.style.display = 'flex';\r\n            \r\n            if (stratActiv && typeof stratActiv.setOpacity === 'function') stratActiv.setOpacity(opacitateCurenta); \r\n            \r\n            if (swipeControl) {\r\n                hartaDetaliu.removeControl(swipeControl);\r\n            }\r\n        }\r\n    });\r\n\r\n    \/* --- BUTON GPS --- *\/\r\n    var locatieUserMarker = null;\r\n    document.getElementById('btn-gps').addEventListener('click', function() {\r\n        hartaDetaliu.locate({setView: true, maxZoom: 15});\r\n    });\r\n    hartaDetaliu.on('locationfound', function(e) {\r\n        if (locatieUserMarker) { hartaDetaliu.removeLayer(locatieUserMarker); }\r\n        locatieUserMarker = L.circleMarker(e.latlng, {\r\n            radius: 8, fillColor: \"#3b82f6\", color: \"#ffffff\", weight: 2, opacity: 1, fillOpacity: 0.9\r\n        }).addTo(hartaDetaliu).bindPopup(\"Te afli aici!\").openPopup();\r\n    });\r\n\r\n    \/* --- DATE \u00ceNC\u0102RCATE DIN SURSE.JS --- *\/\r\n    \/\/ Datele au fost mutate \u00een fi\u0219ierul extern pentru administrare u\u0219oar\u0103.\r\n\r\n    var arrayLayereCurente = [];\r\n    var arrayAniCurenti = [];\r\n    var arrayInfoCurent = [];\r\n    var toateMarkerele = []; \r\n\r\n    function actualizeazaInfo(numeOras, an, index) {\r\n        var dateCurente = arrayInfoCurent[index];\r\n        \r\n        var clasaAcuratete = \"acuratete-nespecificat\";\r\n        var tooltipAcuratete = \"\";\r\n        \r\n        var acurateteVal = dateCurente.acuratete ? dateCurente.acuratete.toLowerCase().trim() : \"\";\r\n        \r\n        if (acurateteVal === 'verde') {\r\n            clasaAcuratete = \"acuratete-verde\";\r\n            tooltipAcuratete = \"Precizie \u00eenalt\u0103: erori sub 10 m\";\r\n        } else if (acurateteVal === 'galben') {\r\n            clasaAcuratete = \"acuratete-galben\";\r\n            tooltipAcuratete = \"Precizie medie: erori sub 50 m\";\r\n        } else if (acurateteVal === 'rosu') {\r\n            clasaAcuratete = \"acuratete-rosu\";\r\n            tooltipAcuratete = \"Precizie sc\u0103zut\u0103: erori peste 50 m\";\r\n        }\r\n\r\n        var indicatorHtml = acurateteVal ? '<span class=\"indicator-acuratete ' + clasaAcuratete + '\" title=\"' + tooltipAcuratete + '\"><\/span>' : '';\r\n        document.getElementById('info-nume-oras').innerHTML = indicatorHtml + dateCurente.titlu;\r\n\r\n        var textDescriere = dateCurente.descriere || \"Momentan nu exista date suplimentare.\";\r\n        if (dateCurente.referinte && dateCurente.referinte.trim() !== \"\") {\r\n            textDescriere += \"<br><br><span style='font-size: 13px; color: #64748b;'><strong>Referin\u021be:<\/strong> \" + dateCurente.referinte + \"<\/span>\";\r\n        }\r\n        document.getElementById('info-text').innerHTML = textDescriere;\r\n\r\n        var containerGalerie = document.getElementById('galerie-foto');\r\n        if (containerGalerie) {\r\n            containerGalerie.innerHTML = ''; \r\n            \r\n            if (dateCurente.galerie && dateCurente.galerie.length > 0) {\r\n                dateCurente.galerie.forEach(function(foto) {\r\n                    var itemDiv = document.createElement('div');\r\n                    itemDiv.className = 'galerie-item';\r\n                    \r\n                    var img = document.createElement('img');\r\n                    img.src = foto.url;\r\n                    img.alt = foto.explicatie || 'Imagine hart\u0103';\r\n                    \r\n                    img.addEventListener('click', function() {\r\n                        document.getElementById('lightbox-img').src = foto.url;\r\n                        document.getElementById('lightbox-caption').innerHTML = foto.explicatie || '';\r\n                        document.getElementById('lightbox-modal').classList.remove('lightbox-hidden');\r\n                    });\r\n                    \r\n                    itemDiv.appendChild(img);\r\n\r\n                    if (foto.explicatie) {\r\n                        var explicatieDiv = document.createElement('div');\r\n                        explicatieDiv.className = 'galerie-explicatie';\r\n                        explicatieDiv.innerHTML = foto.explicatie;\r\n                        itemDiv.appendChild(explicatieDiv);\r\n                    }\r\n\r\n                    containerGalerie.appendChild(itemDiv);\r\n                });\r\n            }\r\n        }\r\n    }\r\n\r\n    function incarcaOras(oras, markerAles) {\r\n        toateMarkerele.forEach(function(m) { m.setIcon(blueIcon); });\r\n        \r\n        if (markerAles) { \r\n            markerAles.setIcon(redIcon); \r\n        } else { \r\n            if (window.innerWidth > 768) {\r\n                toateMarkerele[0].setIcon(redIcon); \r\n            }\r\n        }\r\n\r\n        hartaDetaliu.setMaxBounds(null);\r\n        hartaDetaliu.setMinZoom(5);\r\n\r\n        hartaDetaliu.flyTo(oras.coords, 13, { duration: 1.5 });\r\n\r\n        setTimeout(function() {\r\n            var lat = oras.coords[0];\r\n            var lng = oras.coords[1];\r\n            var limiteOras = L.latLngBounds(\r\n                [lat - 0.15, lng - 0.2], \r\n                [lat + 0.15, lng + 0.2]\r\n            );\r\n            hartaDetaliu.setMaxBounds(limiteOras);\r\n            hartaDetaliu.setMinZoom(11); \r\n        }, 1600);\r\n\r\n        if (stratActiv) { hartaDetaliu.removeLayer(stratActiv); }\r\n\r\n        arrayLayereCurente = oras.urluri.map(function(url) { \r\n            if (!url) return L.layerGroup(); \r\n            if (url.indexOf('{z}') > -1) {\r\n                return L.tileLayer(url, { maxZoom: 24, maxNativeZoom: 21 });\r\n            } else {\r\n                return L.esri.tiledMapLayer({ url: url, maxZoom: 24, maxNativeZoom: 21 }); \r\n            }\r\n        });\r\n        \r\n        arrayAniCurenti = oras.ani;\r\n        arrayInfoCurent = oras.informatii; \r\n\r\n        var indexStart = 0;\r\n        construiesteSlider(indexStart, oras.nume); \r\n    }\r\n\r\n    function construiesteSlider(indexStart, numeOras) {\r\n        var containerSlider = document.getElementById('slider-container-dinamic');\r\n        var containerLabels = document.getElementById('labels-container');\r\n        \r\n        containerSlider.innerHTML = ''; \r\n        containerLabels.innerHTML = '';\r\n\r\n        var maxIndex = arrayAniCurenti.length - 1;\r\n        \r\n        var sliderNou = document.createElement('input');\r\n        sliderNou.type = 'range';\r\n        sliderNou.id = 'slider-timp';\r\n        sliderNou.min = '0';\r\n        sliderNou.max = maxIndex.toString();\r\n        sliderNou.value = indexStart.toString();\r\n        sliderNou.step = '1';\r\n        sliderNou.style.width = '100%';\r\n\r\n        containerSlider.appendChild(sliderNou);\r\n\r\n        var spanMin = document.createElement('span');\r\n        spanMin.innerText = arrayAniCurenti[0];\r\n        spanMin.className = 'year-label';\r\n        spanMin.style.left = '0';\r\n\r\n        var spanMax = document.createElement('span');\r\n        spanMax.innerText = arrayAniCurenti[maxIndex];\r\n        spanMax.className = 'year-label';\r\n        spanMax.style.right = '0';\r\n\r\n        var spanCurent = document.createElement('span');\r\n        spanCurent.className = 'year-label active-floating';\r\n\r\n        containerLabels.appendChild(spanMin);\r\n        if (maxIndex > 0) {\r\n            containerLabels.appendChild(spanMax);\r\n        }\r\n        containerLabels.appendChild(spanCurent);\r\n\r\n        var updateFloatingLabel = function(val) {\r\n            spanCurent.innerText = arrayAniCurenti[val];\r\n            var procent = maxIndex > 0 ? (val \/ maxIndex) * 100 : 50;\r\n            \r\n            if (procent === 0) {\r\n                spanCurent.style.left = '0%';\r\n                spanCurent.style.transform = 'translateX(0%)';\r\n            } else if (procent === 100) {\r\n                spanCurent.style.left = '100%';\r\n                spanCurent.style.transform = 'translateX(-100%)';\r\n            } else {\r\n                spanCurent.style.left = procent + '%';\r\n                spanCurent.style.transform = 'translateX(-50%)';\r\n            }\r\n\r\n            spanMin.style.opacity = (val === 0) ? '0' : '1';\r\n            spanMax.style.opacity = (val === maxIndex && maxIndex > 0) ? '0' : '1';\r\n        };\r\n\r\n        updateFloatingLabel(indexStart);\r\n\r\n        stratActiv = arrayLayereCurente[indexStart];\r\n        if (isSwipeMode) {\r\n            if (stratActiv && typeof stratActiv.setOpacity === 'function') stratActiv.setOpacity(1);\r\n        } else {\r\n            if (stratActiv && typeof stratActiv.setOpacity === 'function') stratActiv.setOpacity(opacitateCurenta);\r\n        }\r\n        stratActiv.addTo(hartaDetaliu);\r\n        actualizeazaInfo(numeOras, arrayAniCurenti[indexStart], indexStart);\r\n\r\n        if (isSwipeMode && swipeControl) {\r\n             swipeControl.setLeftLayers(stratActiv);\r\n        }\r\n\r\n        sliderNou.addEventListener('input', function(e) {\r\n            var valoareCurenta = parseInt(e.target.value);\r\n            \r\n            updateFloatingLabel(valoareCurenta);\r\n\r\n            if (stratActiv) hartaDetaliu.removeLayer(stratActiv);\r\n            \r\n            stratActiv = arrayLayereCurente[valoareCurenta];\r\n            \r\n            if (isSwipeMode) {\r\n                if (stratActiv && typeof stratActiv.setOpacity === 'function') stratActiv.setOpacity(1);\r\n            } else {\r\n                if (stratActiv && typeof stratActiv.setOpacity === 'function') stratActiv.setOpacity(opacitateCurenta);\r\n            }\r\n            stratActiv.addTo(hartaDetaliu);\r\n            \r\n            if (isSwipeMode && swipeControl) {\r\n                swipeControl.setLeftLayers(stratActiv);\r\n            }\r\n            \r\n            actualizeazaInfo(numeOras, arrayAniCurenti[valoareCurenta], valoareCurenta);\r\n        });\r\n    }\r\n\r\n    document.getElementById('slider-opacitate').addEventListener('input', function(e) {\r\n        opacitateCurenta = parseFloat(e.target.value);\r\n        if (stratActiv && !isSwipeMode && typeof stratActiv.setOpacity === 'function') { \r\n            stratActiv.setOpacity(opacitateCurenta);\r\n        }\r\n    });\r\n\r\n    orase.forEach(function(oras) {\r\n        var marker = L.marker(oras.coords, {icon: blueIcon}).addTo(hartaAtlas);\r\n        marker.bindTooltip(oras.nume, { direction: 'top', offset: [0, -10] });\r\n        toateMarkerele.push(marker);\r\n\r\n        marker.on('click', function() {\r\n            if (window.innerWidth <= 768) {\r\n                document.querySelector('.tab-btn[data-target=\"harta-wrapper\"]').click();\r\n                setTimeout(function() {\r\n                    incarcaOras(oras, marker);\r\n                }, 150);\r\n            } else {\r\n                incarcaOras(oras, marker);\r\n            }\r\n        });\r\n    });\r\n    \r\n    document.getElementById('btn-prev-harta').addEventListener('click', function() {\r\n        var sliderNou = document.getElementById('slider-timp');\r\n        if (sliderNou) {\r\n            var val = parseInt(sliderNou.value);\r\n            if (val > 0) {\r\n                sliderNou.value = val - 1;\r\n                sliderNou.dispatchEvent(new Event('input')); \r\n            }\r\n        }\r\n        this.blur();\r\n    });\r\n\r\n    document.getElementById('btn-next-harta').addEventListener('click', function() {\r\n        var sliderNou = document.getElementById('slider-timp');\r\n        if (sliderNou) {\r\n            var val = parseInt(sliderNou.value);\r\n            var max = parseInt(sliderNou.max);\r\n            if (val < max) {\r\n                sliderNou.value = val + 1;\r\n                sliderNou.dispatchEvent(new Event('input')); \r\n            }\r\n        }\r\n        this.blur();\r\n    });\r\n\r\n    \/\/ \u00cenc\u0103rcare ini\u021bial\u0103 doar pentru Desktop (Bucure\u0219ti - cea mai veche hart\u0103)\r\n    if (window.innerWidth > 768) {\r\n        incarcaOras(orase[0], toateMarkerele[0]);\r\n    }\r\n\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html>\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"unboxed","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"disabled","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-4831","page","type-page","status-publish","hentry"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.3 - aioseo.com -->\n\t<meta name=\"robots\" content=\"max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/bukowina1856.eu\/en\/metamorfoze\/\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.3\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"bukowina1856.eu - The Franciscan Cadastral Survey of Bukowina\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"- bukowina1856.eu\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/bukowina1856.eu\/en\/metamorfoze\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/bukowina1856.eu\/wp-content\/uploads\/2025\/04\/CadastrulAustr1-e1746088605927.jpg\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/bukowina1856.eu\/wp-content\/uploads\/2025\/04\/CadastrulAustr1-e1746088605927.jpg\" \/>\n\t\t<meta property=\"og:image:width\" content=\"829\" \/>\n\t\t<meta property=\"og:image:height\" content=\"1200\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2026-04-17T11:55:37+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2026-10-11T09:33:11+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"- bukowina1856.eu\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/bukowina1856.eu\/wp-content\/uploads\/2025\/04\/CadastrulAustr1-e1746088605927.jpg\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/bukowina1856.eu\\\/en\\\/metamorfoze\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/bukowina1856.eu\\\/en\\\/#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/bukowina1856.eu\\\/en\\\/\"},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/bukowina1856.eu\\\/en\\\/metamorfoze\\\/#listItem\",\"position\":2,\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/bukowina1856.eu\\\/en\\\/#listItem\",\"name\":\"Home\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/bukowina1856.eu\\\/en\\\/#person\",\"name\":\"icristea@atlas.usv.ro\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/bukowina1856.eu\\\/en\\\/metamorfoze\\\/#personImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/dc1e95c54a045cd0cfd2b76caadf2b7c60a4081dc2985133dfc399d087278277?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"icristea@atlas.usv.ro\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/bukowina1856.eu\\\/en\\\/metamorfoze\\\/#webpage\",\"url\":\"https:\\\/\\\/bukowina1856.eu\\\/en\\\/metamorfoze\\\/\",\"name\":\"- bukowina1856.eu\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/bukowina1856.eu\\\/en\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/bukowina1856.eu\\\/en\\\/metamorfoze\\\/#breadcrumblist\"},\"datePublished\":\"2026-04-17T11:55:37+00:00\",\"dateModified\":\"2026-10-11T09:33:11+00:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/bukowina1856.eu\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/bukowina1856.eu\\\/en\\\/\",\"name\":\"bukowina1856.eu\",\"description\":\"The Franciscan Cadastral Survey of Bukowina\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/bukowina1856.eu\\\/en\\\/#person\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"- bukowina1856.eu","description":"","canonical_url":"https:\/\/bukowina1856.eu\/en\/metamorfoze\/","robots":"max-snippet:-1, max-image-preview:large, max-video-preview:-1","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BreadcrumbList","@id":"https:\/\/bukowina1856.eu\/en\/metamorfoze\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/bukowina1856.eu\/en\/#listItem","position":1,"name":"Home","item":"https:\/\/bukowina1856.eu\/en\/"},{"@type":"ListItem","@id":"https:\/\/bukowina1856.eu\/en\/metamorfoze\/#listItem","position":2,"previousItem":{"@type":"ListItem","@id":"https:\/\/bukowina1856.eu\/en\/#listItem","name":"Home"}}]},{"@type":"Person","@id":"https:\/\/bukowina1856.eu\/en\/#person","name":"icristea@atlas.usv.ro","image":{"@type":"ImageObject","@id":"https:\/\/bukowina1856.eu\/en\/metamorfoze\/#personImage","url":"https:\/\/secure.gravatar.com\/avatar\/dc1e95c54a045cd0cfd2b76caadf2b7c60a4081dc2985133dfc399d087278277?s=96&d=mm&r=g","width":96,"height":96,"caption":"icristea@atlas.usv.ro"}},{"@type":"WebPage","@id":"https:\/\/bukowina1856.eu\/en\/metamorfoze\/#webpage","url":"https:\/\/bukowina1856.eu\/en\/metamorfoze\/","name":"- bukowina1856.eu","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/bukowina1856.eu\/en\/#website"},"breadcrumb":{"@id":"https:\/\/bukowina1856.eu\/en\/metamorfoze\/#breadcrumblist"},"datePublished":"2026-04-17T11:55:37+00:00","dateModified":"2026-10-11T09:33:11+00:00"},{"@type":"WebSite","@id":"https:\/\/bukowina1856.eu\/en\/#website","url":"https:\/\/bukowina1856.eu\/en\/","name":"bukowina1856.eu","description":"The Franciscan Cadastral Survey of Bukowina","inLanguage":"en-US","publisher":{"@id":"https:\/\/bukowina1856.eu\/en\/#person"}}]},"og:locale":"en_US","og:site_name":"bukowina1856.eu - The Franciscan Cadastral Survey of Bukowina","og:type":"article","og:title":"- bukowina1856.eu","og:url":"https:\/\/bukowina1856.eu\/en\/metamorfoze\/","og:image":"https:\/\/bukowina1856.eu\/wp-content\/uploads\/2025\/04\/CadastrulAustr1-e1746088605927.jpg","og:image:secure_url":"https:\/\/bukowina1856.eu\/wp-content\/uploads\/2025\/04\/CadastrulAustr1-e1746088605927.jpg","og:image:width":829,"og:image:height":1200,"article:published_time":"2026-04-17T11:55:37+00:00","article:modified_time":"2026-10-11T09:33:11+00:00","twitter:card":"summary_large_image","twitter:title":"- bukowina1856.eu","twitter:image":"https:\/\/bukowina1856.eu\/wp-content\/uploads\/2025\/04\/CadastrulAustr1-e1746088605927.jpg"},"aioseo_meta_data":{"post_id":"4831","title":null,"description":null,"keywords":null,"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"WebPage","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":false,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":{"faqs":[],"keyPoints":[],"schemas":[],"titles":[],"descriptions":[],"socialPosts":{"email":[],"linkedin":[],"twitter":[],"facebook":[],"instagram":[]}},"created":"2026-04-17 12:17:11","updated":"2026-10-11 09:33:11","seo_analyzer_scan_date":null,"focus_keyword":null,"additional_keywords":null,"truseo_locale":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/bukowina1856.eu\/en\/\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/bukowina1856.eu\/en\/"},{"label":"","link":"https:\/\/bukowina1856.eu\/en\/metamorfoze\/"}],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"icristea@atlas.usv.ro","author_link":"https:\/\/bukowina1856.eu\/en\/author\/icristeaatlas-usv-ro\/"},"uagb_comment_info":0,"uagb_excerpt":null,"_links":{"self":[{"href":"https:\/\/bukowina1856.eu\/en\/wp-json\/wp\/v2\/pages\/4831","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bukowina1856.eu\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bukowina1856.eu\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bukowina1856.eu\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bukowina1856.eu\/en\/wp-json\/wp\/v2\/comments?post=4831"}],"version-history":[{"count":6,"href":"https:\/\/bukowina1856.eu\/en\/wp-json\/wp\/v2\/pages\/4831\/revisions"}],"predecessor-version":[{"id":4837,"href":"https:\/\/bukowina1856.eu\/en\/wp-json\/wp\/v2\/pages\/4831\/revisions\/4837"}],"wp:attachment":[{"href":"https:\/\/bukowina1856.eu\/en\/wp-json\/wp\/v2\/media?parent=4831"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}