{"id":84,"date":"2026-10-09T13:44:53","date_gmt":"2026-10-09T11:44:53","guid":{"rendered":"https:\/\/rafi-gino.co.il\/?page_id=84"},"modified":"2026-10-09T15:46:31","modified_gmt":"2026-10-09T13:46:31","slug":"84-2","status":"publish","type":"page","link":"https:\/\/rafi-gino.co.il\/?page_id=84","title":{"rendered":"Weather"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n\/* ============================================\n   METEO\u00b7IL - Editorial Weather Dashboard\n   ============================================ *\/\n\n:root {\n    \/* Colors - Deep midnight with sun-bleached accents *\/\n    --bg-primary: #0a0e1a;\n    --bg-secondary: #131826;\n    --bg-tertiary: #1a2236;\n    --surface: rgba(255, 255, 255, 0.03);\n    --surface-hover: rgba(255, 255, 255, 0.06);\n    --border: rgba(255, 255, 255, 0.08);\n    --border-strong: rgba(255, 255, 255, 0.15);\n    \n    --text-primary: #f4f1ea;\n    --text-secondary: #a8a59c;\n    --text-tertiary: #6b6960;\n    \n    --accent: #ff6b35;\n    --accent-warm: #f7c948;\n    --accent-cool: #4cc9f0;\n    --accent-violet: #b388ff;\n    \n    --success: #06d6a0;\n    --warning: #ffd166;\n    --danger: #ef476f;\n    \n    \/* Typography *\/\n    --font-display: 'Frank Ruhl Libre', Georgia, serif;\n    --font-body: 'Heebo', -apple-system, sans-serif;\n    \n    \/* Spacing *\/\n    --container: min(1400px, 92vw);\n}\n\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\nhtml {\n    scroll-behavior: smooth;\n}\n\nbody {\n    font-family: var(--font-body);\n    background: var(--bg-primary);\n    color: var(--text-primary);\n    min-height: 100vh;\n    overflow-x: hidden;\n    line-height: 1.6;\n    direction: rtl;\n}\n\n\/* ============================================\n   Background Effects\n   ============================================ *\/\n.bg-grain {\n    position: fixed;\n    inset: 0;\n    pointer-events: none;\n    opacity: 0.4;\n    z-index: 1;\n    background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'\/%3E%3C\/svg%3E\");\n    mix-blend-mode: overlay;\n}\n\n.bg-glow {\n    position: fixed;\n    top: -20%;\n    right: -10%;\n    width: 60%;\n    height: 80%;\n    background: radial-gradient(ellipse at center, rgba(255, 107, 53, 0.15) 0%, transparent 60%);\n    pointer-events: none;\n    z-index: 0;\n    animation: drift 20s ease-in-out infinite;\n}\n\n@keyframes drift {\n    0%, 100% { transform: translate(0, 0) scale(1); }\n    50% { transform: translate(-5%, 5%) scale(1.1); }\n}\n\n\/* ============================================\n   Header\n   ============================================ *\/\n.header {\n    position: relative;\n    z-index: 10;\n    width: var(--container);\n    margin: 0 auto;\n    padding: 2rem 0 1rem;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border-bottom: 1px solid var(--border);\n}\n\n.logo {\n    display: flex;\n    align-items: center;\n    gap: 0.6rem;\n    font-family: var(--font-display);\n    font-weight: 900;\n    font-size: 1.4rem;\n    letter-spacing: 0.05em;\n}\n\n.logo-mark {\n    color: var(--accent);\n    font-size: 1.6rem;\n    animation: pulse 3s ease-in-out infinite;\n}\n\n@keyframes pulse {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0.5; }\n}\n\n.logo-accent {\n    color: var(--accent);\n}\n\n.header-meta {\n    font-size: 0.85rem;\n    color: var(--text-secondary);\n    letter-spacing: 0.05em;\n    font-variant-numeric: tabular-nums;\n}\n\n.separator {\n    color: var(--accent);\n    margin: 0 0.5rem;\n}\n\n\/* ============================================\n   Hero Search\n   ============================================ *\/\n.hero {\n    position: relative;\n    z-index: 10;\n    width: var(--container);\n    margin: 0 auto;\n    padding: 4rem 0 3rem;\n    text-align: center;\n}\n\n.hero-label {\n    font-size: 0.75rem;\n    text-transform: uppercase;\n    letter-spacing: 0.3em;\n    color: var(--accent);\n    margin-bottom: 1.5rem;\n    font-weight: 500;\n}\n\n.hero-title {\n    font-family: var(--font-display);\n    font-size: clamp(3rem, 8vw, 6rem);\n    font-weight: 900;\n    line-height: 0.95;\n    letter-spacing: -0.02em;\n    margin-bottom: 3rem;\n}\n\n.title-line {\n    display: block;\n}\n\n.title-line.accent {\n    color: var(--accent);\n    font-style: italic;\n    font-weight: 500;\n}\n\n.search-wrapper {\n    position: relative;\n    max-width: 600px;\n    margin: 0 auto 2rem;\n}\n\n.search-box {\n    display: flex;\n    align-items: center;\n    background: var(--bg-secondary);\n    border: 1px solid var(--border);\n    border-radius: 100px;\n    padding: 0.4rem 0.4rem 0.4rem 1.5rem;\n    transition: all 0.3s ease;\n}\n\n.search-box:focus-within {\n    border-color: var(--accent);\n    box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.1);\n}\n\n.search-icon {\n    width: 20px;\n    height: 20px;\n    color: var(--text-tertiary);\n    flex-shrink: 0;\n}\n\n#city-search {\n    flex: 1;\n    background: transparent;\n    border: none;\n    outline: none;\n    color: var(--text-primary);\n    font-family: var(--font-body);\n    font-size: 1rem;\n    padding: 0.8rem 1rem;\n    direction: rtl;\n    text-align: right;\n}\n\n#city-search::placeholder {\n    color: var(--text-tertiary);\n}\n\n.search-btn {\n    background: var(--accent);\n    color: white;\n    border: none;\n    padding: 0.8rem 2rem;\n    border-radius: 100px;\n    font-family: var(--font-body);\n    font-weight: 700;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.search-btn:hover {\n    background: #ff8255;\n    transform: translateY(-1px);\n}\n\n.suggestions {\n    position: absolute;\n    top: calc(100% + 0.5rem);\n    right: 0;\n    left: 0;\n    background: var(--bg-secondary);\n    border: 1px solid var(--border);\n    border-radius: 16px;\n    overflow: hidden;\n    z-index: 100;\n    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);\n}\n\n.suggestion-item {\n    padding: 0.8rem 1.5rem;\n    cursor: pointer;\n    text-align: right;\n    transition: background 0.15s ease;\n    border-bottom: 1px solid var(--border);\n}\n\n.suggestion-item:last-child {\n    border-bottom: none;\n}\n\n.suggestion-item:hover {\n    background: var(--surface-hover);\n    color: var(--accent);\n}\n\n.city-pills {\n    display: flex;\n    gap: 0.5rem;\n    justify-content: center;\n    flex-wrap: wrap;\n    margin-top: 1.5rem;\n}\n\n.pill {\n    background: var(--surface);\n    border: 1px solid var(--border);\n    color: var(--text-secondary);\n    padding: 0.5rem 1.2rem;\n    border-radius: 100px;\n    font-family: var(--font-body);\n    font-size: 0.85rem;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.pill:hover {\n    background: var(--surface-hover);\n    border-color: var(--accent);\n    color: var(--accent);\n}\n\n\/* ============================================\n   Loading & Error\n   ============================================ *\/\n.loading {\n    width: var(--container);\n    margin: 3rem auto;\n    text-align: center;\n    color: var(--text-secondary);\n    position: relative;\n    z-index: 10;\n}\n\n.loader {\n    width: 40px;\n    height: 40px;\n    border: 3px solid var(--border);\n    border-top-color: var(--accent);\n    border-radius: 50%;\n    margin: 0 auto 1rem;\n    animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n    to { transform: rotate(360deg); }\n}\n\n.error {\n    width: var(--container);\n    margin: 3rem auto;\n    padding: 2rem;\n    background: rgba(239, 71, 111, 0.1);\n    border: 1px solid var(--danger);\n    border-radius: 16px;\n    color: var(--danger);\n    text-align: center;\n    position: relative;\n    z-index: 10;\n}\n\n.hidden {\n    display: none !important;\n}\n\n\/* ============================================\n   Weather Content\n   ============================================ *\/\n.weather-content {\n    width: var(--container);\n    margin: 0 auto;\n    position: relative;\n    z-index: 10;\n    padding-bottom: 4rem;\n}\n\n\/* Alert Banner *\/\n.alert-banner {\n    background: linear-gradient(135deg, var(--warning), var(--accent));\n    color: var(--bg-primary);\n    padding: 1rem 2rem;\n    border-radius: 12px;\n    margin-bottom: 2rem;\n    font-weight: 700;\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    animation: slideIn 0.5s ease;\n}\n\n.alert-icon {\n    font-size: 1.5rem;\n}\n\n@keyframes slideIn {\n    from { opacity: 0; transform: translateY(-10px); }\n    to { opacity: 1; transform: translateY(0); }\n}\n\n\/* Current Weather *\/\n.current-weather {\n    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));\n    border: 1px solid var(--border);\n    border-radius: 24px;\n    padding: 3rem;\n    margin-bottom: 3rem;\n    position: relative;\n    overflow: hidden;\n}\n\n.current-weather::before {\n    content: '';\n    position: absolute;\n    top: -50%;\n    left: -20%;\n    width: 60%;\n    height: 200%;\n    background: radial-gradient(circle, rgba(255, 107, 53, 0.08), transparent 70%);\n    pointer-events: none;\n}\n\n.current-main {\n    display: grid;\n    grid-template-columns: 1fr auto auto;\n    gap: 2rem;\n    align-items: center;\n    margin-bottom: 3rem;\n    position: relative;\n}\n\n.city-name {\n    font-family: var(--font-display);\n    font-size: clamp(2rem, 5vw, 3.5rem);\n    font-weight: 900;\n    line-height: 1;\n    margin-bottom: 0.5rem;\n}\n\n.condition-text {\n    color: var(--text-secondary);\n    font-size: 1.1rem;\n    text-transform: capitalize;\n}\n\n.current-temp {\n    font-family: var(--font-display);\n    font-size: clamp(5rem, 12vw, 9rem);\n    font-weight: 900;\n    line-height: 1;\n    color: var(--accent);\n    font-variant-numeric: tabular-nums;\n}\n\n.degree {\n    color: var(--text-secondary);\n    font-weight: 400;\n}\n\n.weather-icon-large {\n    font-size: clamp(4rem, 8vw, 6rem);\n    filter: drop-shadow(0 0 30px rgba(255, 107, 53, 0.3));\n}\n\n.current-stats {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n    gap: 1rem;\n    padding-top: 2rem;\n    border-top: 1px solid var(--border);\n    position: relative;\n}\n\n.stat {\n    text-align: center;\n    padding: 0.5rem;\n}\n\n.stat-label {\n    font-size: 0.75rem;\n    text-transform: uppercase;\n    letter-spacing: 0.15em;\n    color: var(--text-tertiary);\n    margin-bottom: 0.5rem;\n}\n\n.stat-value {\n    font-family: var(--font-display);\n    font-size: 1.5rem;\n    font-weight: 700;\n    color: var(--text-primary);\n    font-variant-numeric: tabular-nums;\n}\n\n\/* ============================================\n   Section Headers\n   ============================================ *\/\n.section-header {\n    display: flex;\n    align-items: center;\n    gap: 1.5rem;\n    margin-bottom: 2rem;\n}\n\n.section-header h2 {\n    font-family: var(--font-display);\n    font-size: 2rem;\n    font-weight: 900;\n    letter-spacing: -0.01em;\n}\n\n.section-line {\n    flex: 1;\n    height: 1px;\n    background: linear-gradient(to left, transparent, var(--border) 20%, var(--border));\n}\n\n\/* ============================================\n   Charts\n   ============================================ *\/\n.charts-section {\n    margin-bottom: 4rem;\n}\n\n.charts-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));\n    gap: 1.5rem;\n}\n\n.chart-card {\n    background: var(--bg-secondary);\n    border: 1px solid var(--border);\n    border-radius: 20px;\n    padding: 2rem;\n    transition: border-color 0.3s ease;\n}\n\n.chart-card:hover {\n    border-color: var(--border-strong);\n}\n\n.chart-card h3 {\n    font-family: var(--font-body);\n    font-size: 0.9rem;\n    font-weight: 500;\n    color: var(--text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.1em;\n    margin-bottom: 1.5rem;\n}\n\n.chart-card canvas {\n    max-height: 250px;\n}\n\n\/* ============================================\n   7-Day Forecast\n   ============================================ *\/\n.forecast-section {\n    margin-bottom: 4rem;\n}\n\n.forecast-grid {\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n    gap: 0.75rem;\n}\n\n.forecast-day {\n    background: var(--bg-secondary);\n    border: 1px solid var(--border);\n    border-radius: 16px;\n    padding: 1.25rem 0.75rem;\n    text-align: center;\n    transition: all 0.3s ease;\n    cursor: pointer;\n}\n\n.forecast-day:hover {\n    transform: translateY(-4px);\n    border-color: var(--accent);\n    background: var(--bg-tertiary);\n}\n\n.forecast-day-name {\n    font-size: 0.8rem;\n    text-transform: uppercase;\n    letter-spacing: 0.1em;\n    color: var(--text-secondary);\n    margin-bottom: 0.5rem;\n}\n\n.forecast-icon {\n    font-size: 2rem;\n    margin: 0.5rem 0;\n}\n\n.forecast-temp {\n    font-family: var(--font-display);\n    font-weight: 700;\n    font-variant-numeric: tabular-nums;\n}\n\n.temp-high {\n    color: var(--accent);\n    font-size: 1.3rem;\n}\n\n.temp-low {\n    color: var(--text-tertiary);\n    font-size: 0.9rem;\n}\n\n\/* ============================================\n   Map\n   ============================================ *\/\n.map-section {\n    margin-bottom: 4rem;\n}\n\n#map {\n    width: 100%;\n    height: 500px;\n    min-height: 400px;\n    border-radius: 20px;\n    border: 1px solid var(--border);\n    background: #1a2236;\n    z-index: 1;\n    position: relative;\n    overflow: hidden;\n}\n\n\/* Ensure Leaflet tiles render correctly *\/\n.leaflet-container {\n    background: #1a2236 !important;\n    border-radius: 20px;\n    font-family: var(--font-body) !important;\n}\n\n.leaflet-control-attribution {\n    background: rgba(19, 24, 38, 0.8) !important;\n    color: var(--text-tertiary) !important;\n    font-size: 0.7rem !important;\n}\n\n.leaflet-control-attribution a {\n    color: var(--accent) !important;\n}\n\n.leaflet-control-zoom a {\n    background: var(--bg-secondary) !important;\n    color: var(--text-primary) !important;\n    border-color: var(--border) !important;\n}\n\n.leaflet-control-zoom a:hover {\n    background: var(--bg-tertiary) !important;\n    color: var(--accent) !important;\n}\n\n.map-hint {\n    text-align: center;\n    color: var(--text-tertiary);\n    font-size: 0.85rem;\n    margin-top: 1rem;\n    font-style: italic;\n}\n\n\/* Override Leaflet popup style *\/\n.leaflet-popup-content-wrapper {\n    background: var(--bg-secondary) !important;\n    color: var(--text-primary) !important;\n    border-radius: 12px !important;\n    border: 1px solid var(--border-strong);\n}\n\n.leaflet-popup-tip {\n    background: var(--bg-secondary) !important;\n}\n\n.city-marker {\n    background: var(--accent);\n    color: white;\n    border-radius: 50%;\n    width: 30px !important;\n    height: 30px !important;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 0.9rem;\n    font-weight: 700;\n    box-shadow: 0 0 15px rgba(255, 107, 53, 0.6);\n    border: 2px solid white;\n}\n\n\/* ============================================\n   Footer\n   ============================================ *\/\n.footer {\n    width: var(--container);\n    margin: 0 auto;\n    padding: 2rem 0;\n    border-top: 1px solid var(--border);\n    display: flex;\n    justify-content: space-between;\n    color: var(--text-tertiary);\n    font-size: 0.85rem;\n    position: relative;\n    z-index: 10;\n}\n\n\/* ============================================\n   Responsive\n   ============================================ *\/\n@media (max-width: 768px) {\n    .header {\n        flex-direction: column;\n        gap: 0.5rem;\n        text-align: center;\n    }\n    \n    .hero {\n        padding: 2rem 0;\n    }\n    \n    .current-main {\n        grid-template-columns: 1fr;\n        text-align: center;\n    }\n    \n    .current-weather {\n        padding: 2rem 1.5rem;\n    }\n    \n    .charts-grid {\n        grid-template-columns: 1fr;\n    }\n    \n    .forecast-grid {\n        grid-template-columns: repeat(2, 1fr);\n    }\n    \n    .search-box {\n        flex-wrap: wrap;\n    }\n    \n    .footer {\n        flex-direction: column;\n        gap: 0.5rem;\n        text-align: center;\n    }\n}\n\n<\/style>\n\n<script data-wp-block-html=\"js\">\n\/* ============================================\n   METEO\u00b7IL - Weather App Logic\n   API: Open-Meteo (free, no API key needed)\n   ============================================ *\/\n\n\/\/ ===== Israeli cities database =====\nconst ISRAELI_CITIES = [\n    { name: '\u05ea\u05dc \u05d0\u05d1\u05d9\u05d1', en: 'Tel Aviv', lat: 32.0853, lon: 34.7818 },\n    { name: '\u05d9\u05e8\u05d5\u05e9\u05dc\u05d9\u05dd', en: 'Jerusalem', lat: 31.7683, lon: 35.2137 },\n    { name: '\u05d7\u05d9\u05e4\u05d4', en: 'Haifa', lat: 32.7940, lon: 34.9896 },\n    { name: '\u05e8\u05d0\u05e9\u05d5\u05df \u05dc\u05e6\u05d9\u05d5\u05df', en: 'Rishon LeZion', lat: 31.9730, lon: 34.7925 },\n    { name: '\u05e4\u05ea\u05d7 \u05ea\u05e7\u05d5\u05d5\u05d4', en: 'Petah Tikva', lat: 32.0878, lon: 34.8878 },\n    { name: '\u05d0\u05e9\u05d3\u05d5\u05d3', en: 'Ashdod', lat: 31.8014, lon: 34.6435 },\n    { name: '\u05e0\u05ea\u05e0\u05d9\u05d4', en: 'Netanya', lat: 32.3215, lon: 34.8532 },\n    { name: '\u05d1\u05d0\u05e8 \u05e9\u05d1\u05e2', en: 'Beer Sheva', lat: 31.2518, lon: 34.7913 },\n    { name: '\u05d1\u05e0\u05d9 \u05d1\u05e8\u05e7', en: 'Bnei Brak', lat: 32.0807, lon: 34.8338 },\n    { name: '\u05d7\u05d5\u05dc\u05d5\u05df', en: 'Holon', lat: 32.0117, lon: 34.7747 },\n    { name: '\u05e8\u05de\u05ea \u05d2\u05df', en: 'Ramat Gan', lat: 32.0823, lon: 34.8141 },\n    { name: '\u05d0\u05e9\u05e7\u05dc\u05d5\u05df', en: 'Ashkelon', lat: 31.6688, lon: 34.5742 },\n    { name: '\u05e8\u05d7\u05d5\u05d1\u05d5\u05ea', en: 'Rehovot', lat: 31.8947, lon: 34.8086 },\n    { name: '\u05d1\u05ea \u05d9\u05dd', en: 'Bat Yam', lat: 32.0231, lon: 34.7503 },\n    { name: '\u05d4\u05e8\u05e6\u05dc\u05d9\u05d4', en: 'Herzliya', lat: 32.1663, lon: 34.8439 },\n    { name: '\u05db\u05e4\u05e8 \u05e1\u05d1\u05d0', en: 'Kfar Saba', lat: 32.1750, lon: 34.9070 },\n    { name: '\u05de\u05d5\u05d3\u05d9\u05e2\u05d9\u05df', en: 'Modiin', lat: 31.8969, lon: 35.0103 },\n    { name: '\u05e0\u05e6\u05e8\u05ea', en: 'Nazareth', lat: 32.7021, lon: 35.2978 },\n    { name: '\u05e8\u05de\u05dc\u05d4', en: 'Ramla', lat: 31.9293, lon: 34.8666 },\n    { name: '\u05dc\u05d5\u05d3', en: 'Lod', lat: 31.9516, lon: 34.8945 },\n    { name: '\u05e8\u05e2\u05e0\u05e0\u05d4', en: 'Raanana', lat: 32.1836, lon: 34.8702 },\n    { name: '\u05d0\u05d9\u05dc\u05ea', en: 'Eilat', lat: 29.5577, lon: 34.9519 },\n    { name: '\u05d8\u05d1\u05e8\u05d9\u05d4', en: 'Tiberias', lat: 32.7959, lon: 35.5300 },\n    { name: '\u05e6\u05e4\u05ea', en: 'Safed', lat: 32.9650, lon: 35.4951 },\n    { name: '\u05e2\u05db\u05d5', en: 'Acre', lat: 32.9281, lon: 35.0817 },\n    { name: '\u05e0\u05d4\u05e8\u05d9\u05d4', en: 'Nahariya', lat: 33.0058, lon: 35.0944 },\n    { name: '\u05d3\u05d9\u05de\u05d5\u05e0\u05d4', en: 'Dimona', lat: 31.0707, lon: 35.0331 },\n    { name: '\u05e7\u05e8\u05d9\u05d9\u05ea \u05d2\u05ea', en: 'Kiryat Gat', lat: 31.6100, lon: 34.7642 },\n    { name: '\u05d9\u05d1\u05e0\u05d4', en: 'Yavne', lat: 31.8781, lon: 34.7397 },\n    { name: '\u05e8\u05de\u05ea \u05d4\u05e9\u05e8\u05d5\u05df', en: 'Ramat HaSharon', lat: 32.1461, lon: 34.8434 },\n];\n\n\/\/ ===== WMO Weather codes mapping =====\nconst WEATHER_CODES = {\n    0:  { he: '\u05d1\u05d4\u05d9\u05e8', icon: '\u2600\ufe0f' },\n    1:  { he: '\u05d1\u05d4\u05d9\u05e8 \u05d1\u05e2\u05d9\u05e7\u05e8', icon: '\ud83c\udf24\ufe0f' },\n    2:  { he: '\u05de\u05e2\u05d5\u05e0\u05df \u05d7\u05dc\u05e7\u05d9\u05ea', icon: '\u26c5' },\n    3:  { he: '\u05de\u05e2\u05d5\u05e0\u05df', icon: '\u2601\ufe0f' },\n    45: { he: '\u05e2\u05e8\u05e4\u05dc', icon: '\ud83c\udf2b\ufe0f' },\n    48: { he: '\u05e2\u05e8\u05e4\u05dc \u05e7\u05e4\u05d5\u05d0', icon: '\ud83c\udf2b\ufe0f' },\n    51: { he: '\u05d8\u05e4\u05d8\u05d5\u05e3 \u05e7\u05dc', icon: '\ud83c\udf26\ufe0f' },\n    53: { he: '\u05d8\u05e4\u05d8\u05d5\u05e3 \u05d1\u05d9\u05e0\u05d5\u05e0\u05d9', icon: '\ud83c\udf26\ufe0f' },\n    55: { he: '\u05d8\u05e4\u05d8\u05d5\u05e3 \u05db\u05d1\u05d3', icon: '\ud83c\udf27\ufe0f' },\n    61: { he: '\u05d2\u05e9\u05dd \u05e7\u05dc', icon: '\ud83c\udf27\ufe0f' },\n    63: { he: '\u05d2\u05e9\u05dd \u05d1\u05d9\u05e0\u05d5\u05e0\u05d9', icon: '\ud83c\udf27\ufe0f' },\n    65: { he: '\u05d2\u05e9\u05dd \u05db\u05d1\u05d3', icon: '\u26c8\ufe0f' },\n    71: { he: '\u05e9\u05dc\u05d2 \u05e7\u05dc', icon: '\ud83c\udf28\ufe0f' },\n    73: { he: '\u05e9\u05dc\u05d2 \u05d1\u05d9\u05e0\u05d5\u05e0\u05d9', icon: '\u2744\ufe0f' },\n    75: { he: '\u05e9\u05dc\u05d2 \u05db\u05d1\u05d3', icon: '\u2744\ufe0f' },\n    77: { he: '\u05d2\u05e8\u05d2\u05e8\u05d9 \u05e9\u05dc\u05d2', icon: '\ud83c\udf28\ufe0f' },\n    80: { he: '\u05de\u05de\u05d8\u05e8\u05d9\u05dd \u05e7\u05dc\u05d9\u05dd', icon: '\ud83c\udf26\ufe0f' },\n    81: { he: '\u05de\u05de\u05d8\u05e8\u05d9\u05dd', icon: '\ud83c\udf27\ufe0f' },\n    82: { he: '\u05de\u05de\u05d8\u05e8\u05d9\u05dd \u05d7\u05d6\u05e7\u05d9\u05dd', icon: '\u26c8\ufe0f' },\n    85: { he: '\u05de\u05de\u05d8\u05e8\u05d9 \u05e9\u05dc\u05d2', icon: '\ud83c\udf28\ufe0f' },\n    86: { he: '\u05de\u05de\u05d8\u05e8\u05d9 \u05e9\u05dc\u05d2 \u05db\u05d1\u05d3\u05d9\u05dd', icon: '\u2744\ufe0f' },\n    95: { he: '\u05e1\u05d5\u05e4\u05ea \u05e8\u05e2\u05de\u05d9\u05dd', icon: '\u26c8\ufe0f' },\n    96: { he: '\u05e1\u05d5\u05e4\u05ea \u05e8\u05e2\u05de\u05d9\u05dd \u05e2\u05dd \u05d1\u05e8\u05d3', icon: '\u26c8\ufe0f' },\n    99: { he: '\u05e1\u05d5\u05e4\u05ea \u05e8\u05e2\u05de\u05d9\u05dd \u05d7\u05d6\u05e7\u05d4', icon: '\u26c8\ufe0f' }\n};\n\nconst HEBREW_DAYS = ['\u05e8\u05d0\u05e9\u05d5\u05df', '\u05e9\u05e0\u05d9', '\u05e9\u05dc\u05d9\u05e9\u05d9', '\u05e8\u05d1\u05d9\u05e2\u05d9', '\u05d7\u05de\u05d9\u05e9\u05d9', '\u05e9\u05d9\u05e9\u05d9', '\u05e9\u05d1\u05ea'];\n\n\/\/ ===== Global state =====\nlet tempChart = null;\nlet rainChart = null;\nlet map = null;\n\n\/\/ ===== DOM elements =====\nconst $ = (id) => document.getElementById(id);\n\n\/\/ ============================================\n\/\/ Initialization\n\/\/ ============================================\ndocument.addEventListener('DOMContentLoaded', () => {\n    updateClock();\n    setInterval(updateClock, 1000);\n    \n    setupSearch();\n    setupCityPills();\n    \n    \/\/ Load default city: Tel Aviv (this also reveals weather-content)\n    fetchWeather(ISRAELI_CITIES[0]).then(() => {\n        \/\/ Initialize map AFTER content is visible so Leaflet can measure correctly\n        initMap();\n    });\n});\n\n\/\/ ============================================\n\/\/ Clock\n\/\/ ============================================\nfunction updateClock() {\n    const now = new Date();\n    const time = now.toLocaleTimeString('he-IL', { hour: '2-digit', minute: '2-digit' });\n    const date = now.toLocaleDateString('he-IL', { \n        weekday: 'long', \n        day: 'numeric', \n        month: 'long' \n    });\n    $('current-time').textContent = time;\n    $('current-date').textContent = date;\n}\n\n\/\/ ============================================\n\/\/ Search\n\/\/ ============================================\nfunction setupSearch() {\n    const input = $('city-search');\n    const button = $('search-btn');\n    const suggestions = $('suggestions');\n\n    input.addEventListener('input', (e) => {\n        const query = e.target.value.trim();\n        if (query.length < 1) {\n            suggestions.innerHTML = '';\n            return;\n        }\n        \n        const matches = ISRAELI_CITIES.filter(c => \n            c.name.includes(query) || \n            c.en.toLowerCase().includes(query.toLowerCase())\n        ).slice(0, 5);\n        \n        if (matches.length === 0) {\n            suggestions.innerHTML = '<div class=\"suggestion-item\">\u05dc\u05d0 \u05e0\u05de\u05e6\u05d0\u05d5 \u05e2\u05e8\u05d9\u05dd<\/div>';\n            return;\n        }\n        \n        suggestions.innerHTML = matches.map(c => \n            `<div class=\"suggestion-item\" data-city=\"${c.name}\">${c.name} <span style=\"color: var(--text-tertiary); font-size: 0.85em;\">${c.en}<\/span><\/div>`\n        ).join('');\n        \n        suggestions.querySelectorAll('.suggestion-item').forEach(item => {\n            item.addEventListener('click', () => {\n                const cityName = item.dataset.city;\n                const city = ISRAELI_CITIES.find(c => c.name === cityName);\n                if (city) {\n                    input.value = '';\n                    suggestions.innerHTML = '';\n                    fetchWeather(city);\n                }\n            });\n        });\n    });\n\n    button.addEventListener('click', () => {\n        const query = input.value.trim();\n        const city = ISRAELI_CITIES.find(c => \n            c.name === query || \n            c.en.toLowerCase() === query.toLowerCase()\n        );\n        if (city) {\n            input.value = '';\n            suggestions.innerHTML = '';\n            fetchWeather(city);\n        } else {\n            showError('\u05e2\u05d9\u05e8 \u05dc\u05d0 \u05e0\u05de\u05e6\u05d0\u05d4. \u05e0\u05e1\u05d4 \u05e9\u05dd \u05d0\u05d7\u05e8.');\n        }\n    });\n\n    input.addEventListener('keypress', (e) => {\n        if (e.key === 'Enter') button.click();\n    });\n\n    \/\/ Close suggestions when clicking outside\n    document.addEventListener('click', (e) => {\n        if (!e.target.closest('.search-wrapper')) {\n            suggestions.innerHTML = '';\n        }\n    });\n}\n\nfunction setupCityPills() {\n    document.querySelectorAll('.pill').forEach(pill => {\n        pill.addEventListener('click', () => {\n            const city = ISRAELI_CITIES.find(c => c.name === pill.dataset.city);\n            if (city) fetchWeather(city);\n        });\n    });\n}\n\n\/\/ ============================================\n\/\/ Fetch Weather - Open-Meteo API\n\/\/ ============================================\nasync function fetchWeather(city) {\n    showLoading();\n    \n    try {\n        \/\/ Open-Meteo API - free, no key required\n        const url = `https:\/\/api.open-meteo.com\/v1\/forecast?` +\n            `latitude=${city.lat}&longitude=${city.lon}` +\n            `&current=temperature_2m,relative_humidity_2m,apparent_temperature,weather_code,wind_speed_10m,pressure_msl,surface_pressure` +\n            `&hourly=temperature_2m,precipitation_probability,weather_code` +\n            `&daily=weather_code,temperature_2m_max,temperature_2m_min,precipitation_probability_max,uv_index_max,sunrise,sunset` +\n            `&timezone=Asia%2FJerusalem` +\n            `&forecast_days=7`;\n        \n        const response = await fetch(url);\n        if (!response.ok) throw new Error('API request failed');\n        \n        const data = await response.json();\n        \n        renderWeather(city, data);\n        hideLoading();\n        showWeatherContent();\n        \n    } catch (err) {\n        console.error('Error fetching weather:', err);\n        showError('\u05e9\u05d2\u05d9\u05d0\u05d4 \u05d1\u05d8\u05e2\u05d9\u05e0\u05ea \u05e0\u05ea\u05d5\u05e0\u05d9 \u05de\u05d6\u05d2 \u05d4\u05d0\u05d5\u05d5\u05d9\u05e8. \u05d1\u05d3\u05d5\u05e7 \u05d0\u05ea \u05d4\u05d7\u05d9\u05d1\u05d5\u05e8 \u05dc\u05d0\u05d9\u05e0\u05d8\u05e8\u05e0\u05d8.');\n    }\n}\n\n\/\/ ============================================\n\/\/ Render Weather Data\n\/\/ ============================================\nfunction renderWeather(city, data) {\n    const current = data.current;\n    const daily = data.daily;\n    const hourly = data.hourly;\n    \n    \/\/ Current weather\n    const weatherInfo = WEATHER_CODES[current.weather_code] || { he: '\u05dc\u05d0 \u05d9\u05d3\u05d5\u05e2', icon: '\u2753' };\n    \n    $('city-name').textContent = city.name;\n    $('condition-text').textContent = weatherInfo.he;\n    $('current-temp').textContent = Math.round(current.temperature_2m);\n    $('weather-icon').textContent = weatherInfo.icon;\n    $('feels-like').textContent = `${Math.round(current.apparent_temperature)}\u00b0`;\n    $('humidity').textContent = `${current.relative_humidity_2m}%`;\n    $('wind').textContent = `${Math.round(current.wind_speed_10m)} \u05e7\u05de\"\u05e9`;\n    $('uv').textContent = Math.round(daily.uv_index_max[0]);\n    $('pressure').textContent = `${Math.round(current.pressure_msl)} hPa`;\n    $('visibility').textContent = `10 \u05e7\"\u05de`;\n    \n    \/\/ Alerts\n    checkAlerts(current, daily);\n    \n    \/\/ Charts\n    renderTempChart(hourly);\n    renderRainChart(hourly);\n    \n    \/\/ 7-day forecast\n    render7DayForecast(daily);\n    \n    \/\/ Update map (only if already initialized)\n    if (map) {\n        map.setView([city.lat, city.lon], 9);\n        \/\/ Recalculate size in case container dimensions changed\n        setTimeout(() => map.invalidateSize(), 50);\n    }\n}\n\n\/\/ ============================================\n\/\/ Alerts\n\/\/ ============================================\nfunction checkAlerts(current, daily) {\n    const alerts = [];\n    \n    \/\/ Heat alert\n    if (daily.temperature_2m_max[0] >= 38) {\n        alerts.push('\u05d2\u05dc \u05d7\u05d5\u05dd! \u05d8\u05de\u05e4\\' \u05de\u05e7\u05e1\u05d9\u05de\u05dc\u05d9\u05ea \u05de\u05e2\u05dc 38\u00b0');\n    }\n    \/\/ Cold alert\n    if (daily.temperature_2m_min[0] <= 5) {\n        alerts.push('\u05e7\u05d5\u05e8 \u05e2\u05d6! \u05d8\u05de\u05e4\\' \u05de\u05d9\u05e0\u05d9\u05de\u05dc\u05d9\u05ea \u05de\u05ea\u05d7\u05ea \u05dc-5\u00b0');\n    }\n    \/\/ Heavy rain\n    if (daily.precipitation_probability_max[0] >= 80) {\n        alerts.push('\u05e1\u05d9\u05db\u05d5\u05d9 \u05d2\u05d1\u05d5\u05d4 \u05dc\u05d2\u05e9\u05dd \u05db\u05d1\u05d3');\n    }\n    \/\/ High UV\n    if (daily.uv_index_max[0] >= 8) {\n        alerts.push('\u05e7\u05e8\u05d9\u05e0\u05ea UV \u05d2\u05d1\u05d5\u05d4\u05d4 - \u05d4\u05d2\u05e0\u05d5 \u05e2\u05dc \u05d4\u05e2\u05d5\u05e8');\n    }\n    \/\/ Strong winds\n    if (current.wind_speed_10m >= 50) {\n        alerts.push('\u05e8\u05d5\u05d7\u05d5\u05ea \u05d7\u05d6\u05e7\u05d5\u05ea');\n    }\n    \n    if (alerts.length > 0) {\n        $('alert-text').textContent = alerts.join(' \u00b7 ');\n        $('alert-banner').classList.remove('hidden');\n    } else {\n        $('alert-banner').classList.add('hidden');\n    }\n}\n\n\/\/ ============================================\n\/\/ Charts\n\/\/ ============================================\nfunction renderTempChart(hourly) {\n    const ctx = $('temp-chart').getContext('2d');\n    \n    \/\/ Take next 24 hours\n    const labels = hourly.time.slice(0, 24).map(t => {\n        const d = new Date(t);\n        return d.getHours() + ':00';\n    });\n    const temps = hourly.temperature_2m.slice(0, 24);\n    \n    if (tempChart) tempChart.destroy();\n    \n    tempChart = new Chart(ctx, {\n        type: 'line',\n        data: {\n            labels,\n            datasets: [{\n                label: '\u05d8\u05de\u05e4\u05e8\u05d8\u05d5\u05e8\u05d4 \u00b0C',\n                data: temps,\n                borderColor: '#ff6b35',\n                backgroundColor: (context) => {\n                    const chart = context.chart;\n                    const { ctx, chartArea } = chart;\n                    if (!chartArea) return null;\n                    const gradient = ctx.createLinearGradient(0, chartArea.top, 0, chartArea.bottom);\n                    gradient.addColorStop(0, 'rgba(255, 107, 53, 0.4)');\n                    gradient.addColorStop(1, 'rgba(255, 107, 53, 0)');\n                    return gradient;\n                },\n                borderWidth: 3,\n                tension: 0.4,\n                fill: true,\n                pointRadius: 0,\n                pointHoverRadius: 6,\n                pointHoverBackgroundColor: '#ff6b35',\n                pointHoverBorderColor: '#fff',\n                pointHoverBorderWidth: 2\n            }]\n        },\n        options: {\n            responsive: true,\n            maintainAspectRatio: false,\n            plugins: {\n                legend: { display: false },\n                tooltip: {\n                    backgroundColor: '#131826',\n                    titleColor: '#f4f1ea',\n                    bodyColor: '#f4f1ea',\n                    borderColor: '#ff6b35',\n                    borderWidth: 1,\n                    padding: 12,\n                    callbacks: {\n                        label: (ctx) => `${Math.round(ctx.parsed.y)}\u00b0C`\n                    }\n                }\n            },\n            scales: {\n                x: {\n                    grid: { color: 'rgba(255,255,255,0.05)' },\n                    ticks: { color: '#a8a59c', font: { family: 'Heebo' } }\n                },\n                y: {\n                    grid: { color: 'rgba(255,255,255,0.05)' },\n                    ticks: { \n                        color: '#a8a59c', \n                        font: { family: 'Heebo' },\n                        callback: (val) => val + '\u00b0'\n                    }\n                }\n            }\n        }\n    });\n}\n\nfunction renderRainChart(hourly) {\n    const ctx = $('rain-chart').getContext('2d');\n    \n    const labels = hourly.time.slice(0, 24).map(t => {\n        const d = new Date(t);\n        return d.getHours() + ':00';\n    });\n    const rain = hourly.precipitation_probability.slice(0, 24);\n    \n    if (rainChart) rainChart.destroy();\n    \n    rainChart = new Chart(ctx, {\n        type: 'bar',\n        data: {\n            labels,\n            datasets: [{\n                label: '\u05e1\u05d9\u05db\u05d5\u05d9 \u05dc\u05d2\u05e9\u05dd %',\n                data: rain,\n                backgroundColor: 'rgba(76, 201, 240, 0.6)',\n                borderColor: '#4cc9f0',\n                borderWidth: 1,\n                borderRadius: 4\n            }]\n        },\n        options: {\n            responsive: true,\n            maintainAspectRatio: false,\n            plugins: {\n                legend: { display: false },\n                tooltip: {\n                    backgroundColor: '#131826',\n                    titleColor: '#f4f1ea',\n                    bodyColor: '#f4f1ea',\n                    borderColor: '#4cc9f0',\n                    borderWidth: 1,\n                    padding: 12,\n                    callbacks: {\n                        label: (ctx) => `${ctx.parsed.y}%`\n                    }\n                }\n            },\n            scales: {\n                x: {\n                    grid: { color: 'rgba(255,255,255,0.05)' },\n                    ticks: { color: '#a8a59c', font: { family: 'Heebo' } }\n                },\n                y: {\n                    grid: { color: 'rgba(255,255,255,0.05)' },\n                    ticks: { \n                        color: '#a8a59c', \n                        font: { family: 'Heebo' },\n                        callback: (val) => val + '%'\n                    },\n                    max: 100,\n                    min: 0\n                }\n            }\n        }\n    });\n}\n\n\/\/ ============================================\n\/\/ 7-Day Forecast\n\/\/ ============================================\nfunction render7DayForecast(daily) {\n    const grid = $('forecast-grid');\n    grid.innerHTML = '';\n    \n    daily.time.forEach((date, i) => {\n        const d = new Date(date);\n        const dayName = i === 0 ? '\u05d4\u05d9\u05d5\u05dd' : HEBREW_DAYS[d.getDay()];\n        const weatherInfo = WEATHER_CODES[daily.weather_code[i]] || { icon: '\u2753' };\n        const high = Math.round(daily.temperature_2m_max[i]);\n        const low = Math.round(daily.temperature_2m_min[i]);\n        \n        const dayEl = document.createElement('div');\n        dayEl.className = 'forecast-day';\n        dayEl.innerHTML = `\n            <div class=\"forecast-day-name\">${dayName}<\/div>\n            <div class=\"forecast-icon\">${weatherInfo.icon}<\/div>\n            <div class=\"forecast-temp\">\n                <span class=\"temp-high\">${high}\u00b0<\/span>\n                <span class=\"temp-low\">${low}\u00b0<\/span>\n            <\/div>\n        `;\n        grid.appendChild(dayEl);\n    });\n}\n\n\/\/ ============================================\n\/\/ Map\n\/\/ ============================================\nfunction initMap() {\n    \/\/ Make sure the container exists and is visible enough to measure\n    const mapEl = document.getElementById('map');\n    if (!mapEl) {\n        console.error('Map container not found');\n        return;\n    }\n    \n    try {\n        map = L.map('map', {\n            center: [31.5, 35.0],\n            zoom: 8,\n            zoomControl: true,\n            scrollWheelZoom: true\n        });\n        \n        \/\/ Use OpenStreetMap as primary - more reliable than CartoDB\n        const osmLayer = L.tileLayer('https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n            attribution: '\u00a9 <a href=\"https:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a>',\n            maxZoom: 19\n        });\n        \n        \/\/ Try CartoDB dark tiles, fallback to OSM if they fail\n        const darkLayer = L.tileLayer('https:\/\/{s}.basemaps.cartocdn.com\/dark_all\/{z}\/{x}\/{y}{r}.png', {\n            attribution: '\u00a9 OpenStreetMap, \u00a9 CartoDB',\n            subdomains: 'abcd',\n            maxZoom: 19,\n            errorTileUrl: 'https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png'\n        });\n        \n        \/\/ Add dark layer; if it fails, OSM kicks in via errorTileUrl\n        darkLayer.addTo(map);\n        \n        \/\/ Listen for tile load errors and fallback to OSM\n        let tileErrorCount = 0;\n        darkLayer.on('tileerror', () => {\n            tileErrorCount++;\n            if (tileErrorCount > 3 && map.hasLayer(darkLayer)) {\n                console.warn('Dark tiles failing, switching to OpenStreetMap');\n                map.removeLayer(darkLayer);\n                osmLayer.addTo(map);\n            }\n        });\n        \n        \/\/ Add markers for major cities\n        const majorCities = ISRAELI_CITIES.slice(0, 12);\n        \n        majorCities.forEach(city => {\n            const marker = L.marker([city.lat, city.lon], {\n                icon: L.divIcon({\n                    className: 'city-marker',\n                    html: '\u25c9',\n                    iconSize: [30, 30],\n                    iconAnchor: [15, 15]\n                })\n            }).addTo(map);\n            \n            marker.bindPopup(`<strong>${city.name}<\/strong><br><small>\u05dc\u05d7\u05e5 \u05dc\u05ea\u05d7\u05d6\u05d9\u05ea \u05de\u05dc\u05d0\u05d4<\/small>`);\n            \n            marker.on('click', () => {\n                fetchWeather(city);\n                window.scrollTo({ top: 0, behavior: 'smooth' });\n            });\n        });\n        \n        \/\/ CRITICAL FIX: Force map to recalculate size after a short delay\n        \/\/ This solves the issue when map container is initially hidden or sized incorrectly\n        setTimeout(() => {\n            map.invalidateSize();\n        }, 100);\n        \n        \/\/ Also recalculate when window resizes\n        window.addEventListener('resize', () => {\n            if (map) map.invalidateSize();\n        });\n        \n    } catch (err) {\n        console.error('Error initializing map:', err);\n        mapEl.innerHTML = '<div style=\"padding: 2rem; text-align: center; color: var(--text-secondary);\">\u05dc\u05d0 \u05e0\u05d9\u05ea\u05df \u05dc\u05d8\u05e2\u05d5\u05df \u05d0\u05ea \u05d4\u05de\u05e4\u05d4. \u05d1\u05d3\u05d5\u05e7 \u05d0\u05ea \u05d4\u05d7\u05d9\u05d1\u05d5\u05e8 \u05dc\u05d0\u05d9\u05e0\u05d8\u05e8\u05e0\u05d8.<\/div>';\n    }\n}\n\n\/\/ ============================================\n\/\/ UI Helpers\n\/\/ ============================================\nfunction showLoading() {\n    $('loading').classList.remove('hidden');\n    $('weather-content').classList.add('hidden');\n    $('error').classList.add('hidden');\n}\n\nfunction hideLoading() {\n    $('loading').classList.add('hidden');\n}\n\nfunction showWeatherContent() {\n    $('weather-content').classList.remove('hidden');\n}\n\nfunction showError(message) {\n    $('error').textContent = message;\n    $('error').classList.remove('hidden');\n    $('loading').classList.add('hidden');\n    $('weather-content').classList.add('hidden');\n}\n\n<\/script>\n\n<!DOCTYPE html>\n<html lang=\"he\" dir=\"rtl\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\u05de\u05d6\u05d2 \u05d0\u05d5\u05d5\u05d9\u05e8 \u05d9\u05e9\u05e8\u05d0\u05dc | \u05ea\u05d7\u05d6\u05d9\u05ea \u05de\u05ea\u05e7\u05d3\u05de\u05ea<\/title>\n    <meta name=\"description\" content=\"\u05ea\u05d7\u05d6\u05d9\u05ea \u05de\u05d6\u05d2 \u05d4\u05d0\u05d5\u05d5\u05d9\u05e8 \u05d4\u05de\u05ea\u05e7\u05d3\u05de\u05ea \u05d1\u05d9\u05e9\u05e8\u05d0\u05dc - \u05d7\u05d9\u05e4\u05d5\u05e9 \u05dc\u05e4\u05d9 \u05e2\u05d9\u05e8, \u05d2\u05e8\u05e4\u05d9\u05dd, \u05de\u05e4\u05d4 \u05d5\u05d4\u05ea\u05e8\u05d0\u05d5\u05ea\">\n    \n    <!-- Fonts -->\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Frank+Ruhl+Libre:wght@400;500;700;900&#038;family=Heebo:wght@300;400;500;700;900&#038;display=swap\" rel=\"stylesheet\">\n    \n    <!-- Leaflet Map -->\n    <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" \/>\n    \n    <!-- Chart.js -->\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@4.4.0\/dist\/chart.umd.min.js\"><\/script>\n    \n    <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n    <!-- Background Effects -->\n    <div class=\"bg-grain\"><\/div>\n    <div class=\"bg-glow\"><\/div>\n\n    <!-- Header -->\n    <header class=\"header\">\n        <div class=\"logo\">\n            <span class=\"logo-mark\">\u25c9<\/span>\n            <span class=\"logo-text\">METEO<span class=\"logo-accent\">\u00b7IL<\/span><\/span>\n        <\/div>\n        <div class=\"header-meta\">\n            <span id=\"current-time\"><\/span>\n            <span class=\"separator\">\u00b7<\/span>\n            <span id=\"current-date\"><\/span>\n        <\/div>\n    <\/header>\n\n    <!-- Hero Search -->\n    <section class=\"hero\">\n        <div class=\"hero-label\">\u05ea\u05d7\u05d6\u05d9\u05ea \u05de\u05d6\u05d2 \u05d4\u05d0\u05d5\u05d5\u05d9\u05e8 \u00b7 \u05d9\u05e9\u05e8\u05d0\u05dc<\/div>\n        <h1 class=\"hero-title\">\n            <span class=\"title-line\">\u05de\u05d4 \u05d4\u05e9\u05de\u05d9\u05d9\u05dd<\/span>\n            <span class=\"title-line accent\">\u05de\u05e1\u05e4\u05e8\u05d9\u05dd \u05d4\u05d9\u05d5\u05dd?<\/span>\n        <\/h1>\n        \n        <div class=\"search-wrapper\">\n            <div class=\"search-box\">\n                <svg class=\"search-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                    <circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle>\n                    <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"><\/line>\n                <\/svg>\n                <input type=\"text\" id=\"city-search\" placeholder=\"\u05d7\u05e4\u05e9 \u05e2\u05d9\u05e8... (\u05ea\u05dc \u05d0\u05d1\u05d9\u05d1, \u05d9\u05e8\u05d5\u05e9\u05dc\u05d9\u05dd, \u05d7\u05d9\u05e4\u05d4)\" autocomplete=\"off\">\n                <button id=\"search-btn\" class=\"search-btn\">\u05d7\u05e4\u05e9<\/button>\n            <\/div>\n            <div id=\"suggestions\" class=\"suggestions\"><\/div>\n        <\/div>\n\n        <!-- Quick city pills -->\n        <div class=\"city-pills\">\n            <button class=\"pill\" data-city=\"\u05ea\u05dc \u05d0\u05d1\u05d9\u05d1\">\u05ea\u05dc \u05d0\u05d1\u05d9\u05d1<\/button>\n            <button class=\"pill\" data-city=\"\u05d9\u05e8\u05d5\u05e9\u05dc\u05d9\u05dd\">\u05d9\u05e8\u05d5\u05e9\u05dc\u05d9\u05dd<\/button>\n            <button class=\"pill\" data-city=\"\u05d7\u05d9\u05e4\u05d4\">\u05d7\u05d9\u05e4\u05d4<\/button>\n            <button class=\"pill\" data-city=\"\u05d1\u05d0\u05e8 \u05e9\u05d1\u05e2\">\u05d1\u05d0\u05e8 \u05e9\u05d1\u05e2<\/button>\n            <button class=\"pill\" data-city=\"\u05d0\u05d9\u05dc\u05ea\">\u05d0\u05d9\u05dc\u05ea<\/button>\n            <button class=\"pill\" data-city=\"\u05e6\u05e4\u05ea\">\u05e6\u05e4\u05ea<\/button>\n        <\/div>\n    <\/section>\n\n    <!-- Loading State -->\n    <div id=\"loading\" class=\"loading hidden\">\n        <div class=\"loader\"><\/div>\n        <span>\u05d8\u05d5\u05e2\u05df \u05e0\u05ea\u05d5\u05e0\u05d9\u05dd&#8230;<\/span>\n    <\/div>\n\n    <!-- Error State -->\n    <div id=\"error\" class=\"error hidden\"><\/div>\n\n    <!-- Main Weather Content -->\n    <main id=\"weather-content\" class=\"weather-content hidden\">\n        \n        <!-- Alert Banner -->\n        <div id=\"alert-banner\" class=\"alert-banner hidden\">\n            <span class=\"alert-icon\">\u26a0<\/span>\n            <span id=\"alert-text\"><\/span>\n        <\/div>\n\n        <!-- Current Weather Card -->\n        <section class=\"current-weather\">\n            <div class=\"current-main\">\n                <div class=\"current-meta\">\n                    <div class=\"city-name\" id=\"city-name\">\u2014<\/div>\n                    <div class=\"condition-text\" id=\"condition-text\">\u2014<\/div>\n                <\/div>\n                <div class=\"current-temp\">\n                    <span id=\"current-temp\">\u2014<\/span><span class=\"degree\">\u00b0<\/span>\n                <\/div>\n                <div class=\"weather-icon-large\" id=\"weather-icon\">\u2600<\/div>\n            <\/div>\n            \n            <div class=\"current-stats\">\n                <div class=\"stat\">\n                    <div class=\"stat-label\">\u05de\u05e8\u05d2\u05d9\u05e9 \u05db\u05de\u05d5<\/div>\n                    <div class=\"stat-value\" id=\"feels-like\">\u2014\u00b0<\/div>\n                <\/div>\n                <div class=\"stat\">\n                    <div class=\"stat-label\">\u05dc\u05d7\u05d5\u05ea<\/div>\n                    <div class=\"stat-value\" id=\"humidity\">\u2014%<\/div>\n                <\/div>\n                <div class=\"stat\">\n                    <div class=\"stat-label\">\u05e8\u05d5\u05d7<\/div>\n                    <div class=\"stat-value\" id=\"wind\">\u2014 \u05e7\u05de&quot;\u05e9<\/div>\n                <\/div>\n                <div class=\"stat\">\n                    <div class=\"stat-label\">UV<\/div>\n                    <div class=\"stat-value\" id=\"uv\">\u2014<\/div>\n                <\/div>\n                <div class=\"stat\">\n                    <div class=\"stat-label\">\u05dc\u05d7\u05e5 \u05d0\u05d5\u05d5\u05d9\u05e8<\/div>\n                    <div class=\"stat-value\" id=\"pressure\">\u2014 hPa<\/div>\n                <\/div>\n                <div class=\"stat\">\n                    <div class=\"stat-label\">\u05e8\u05d0\u05d5\u05ea<\/div>\n                    <div class=\"stat-value\" id=\"visibility\">\u2014 \u05e7&quot;\u05de<\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- Charts Section -->\n        <section class=\"charts-section\">\n            <div class=\"section-header\">\n                <h2>\u05e0\u05ea\u05d5\u05e0\u05d9\u05dd \u05d5\u05d9\u05d6\u05d5\u05d0\u05dc\u05d9\u05d9\u05dd<\/h2>\n                <span class=\"section-line\"><\/span>\n            <\/div>\n            \n            <div class=\"charts-grid\">\n                <div class=\"chart-card\">\n                    <h3>\u05d8\u05de\u05e4\u05e8\u05d8\u05d5\u05e8\u05d4 &#8211; 24 \u05e9\u05e2\u05d5\u05ea \u05d4\u05e7\u05e8\u05d5\u05d1\u05d5\u05ea<\/h3>\n                    <canvas id=\"temp-chart\"><\/canvas>\n                <\/div>\n                <div class=\"chart-card\">\n                    <h3>\u05e1\u05d9\u05db\u05d5\u05d9 \u05dc\u05d2\u05e9\u05dd (%)<\/h3>\n                    <canvas id=\"rain-chart\"><\/canvas>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- 7-Day Forecast -->\n        <section class=\"forecast-section\">\n            <div class=\"section-header\">\n                <h2>\u05ea\u05d7\u05d6\u05d9\u05ea \u05e9\u05d1\u05d5\u05e2\u05d9\u05ea<\/h2>\n                <span class=\"section-line\"><\/span>\n            <\/div>\n            <div id=\"forecast-grid\" class=\"forecast-grid\"><\/div>\n        <\/section>\n\n        <!-- Map Section -->\n        <section class=\"map-section\">\n            <div class=\"section-header\">\n                <h2>\u05de\u05e4\u05ea \u05d9\u05e9\u05e8\u05d0\u05dc<\/h2>\n                <span class=\"section-line\"><\/span>\n            <\/div>\n            <div id=\"map\"><\/div>\n            <p class=\"map-hint\">\u05dc\u05d7\u05e5 \u05e2\u05dc \u05e2\u05d9\u05e8 \u05d1\u05de\u05e4\u05d4 \u05dc\u05e6\u05e4\u05d9\u05d9\u05d4 \u05d1\u05ea\u05d7\u05d6\u05d9\u05ea<\/p>\n        <\/section>\n\n    <\/main>\n\n    <footer class=\"footer\">\n        <div>\u05e0\u05ea\u05d5\u05e0\u05d9\u05dd \u05de-Open-Meteo \u00b7 \u05de\u05e2\u05d5\u05d3\u05db\u05df \u05d1\u05d6\u05de\u05df \u05d0\u05de\u05ea<\/div>\n        <div>METEO\u00b7IL \u00a9 2026<\/div>\n    <\/footer>\n\n    <!-- Leaflet -->\n    <script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\n    <script src=\"script.js\"><\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u05de\u05d6\u05d2 \u05d0\u05d5\u05d5\u05d9\u05e8 \u05d9\u05e9\u05e8\u05d0\u05dc | \u05ea\u05d7\u05d6\u05d9\u05ea \u05de\u05ea\u05e7\u05d3\u05de\u05ea \u25c9 METEO\u00b7IL \u00b7 \u05ea\u05d7\u05d6\u05d9\u05ea \u05de\u05d6\u05d2 \u05d4\u05d0\u05d5\u05d5\u05d9\u05e8 \u00b7 \u05d9\u05e9\u05e8\u05d0\u05dc \u05de\u05d4 \u05d4\u05e9\u05de\u05d9\u05d9\u05dd \u05de\u05e1\u05e4\u05e8\u05d9\u05dd \u05d4\u05d9\u05d5\u05dd? \u05d7\u05e4\u05e9 \u05ea\u05dc \u05d0\u05d1\u05d9\u05d1 \u05d9\u05e8\u05d5\u05e9\u05dc\u05d9\u05dd \u05d7\u05d9\u05e4\u05d4 \u05d1\u05d0\u05e8 \u05e9\u05d1\u05e2 \u05d0\u05d9\u05dc\u05ea \u05e6\u05e4\u05ea \u05d8\u05d5\u05e2\u05df \u05e0\u05ea\u05d5\u05e0\u05d9\u05dd&#8230; \u26a0 \u2014 \u2014 \u2014\u00b0 \u2600 \u05de\u05e8\u05d2\u05d9\u05e9 \u05db\u05de\u05d5 \u2014\u00b0 \u05dc\u05d7\u05d5\u05ea \u2014% \u05e8\u05d5\u05d7 \u2014 \u05e7\u05de&quot;\u05e9 UV \u2014 \u05dc\u05d7\u05e5 \u05d0\u05d5\u05d5\u05d9\u05e8 \u2014 hPa \u05e8\u05d0\u05d5\u05ea \u2014 \u05e7&quot;\u05de \u05e0\u05ea\u05d5\u05e0\u05d9\u05dd \u05d5\u05d9\u05d6\u05d5\u05d0\u05dc\u05d9\u05d9\u05dd \u05d8\u05de\u05e4\u05e8\u05d8\u05d5\u05e8\u05d4 &#8211; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-84","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/rafi-gino.co.il\/index.php?rest_route=\/wp\/v2\/pages\/84","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rafi-gino.co.il\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rafi-gino.co.il\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rafi-gino.co.il\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rafi-gino.co.il\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=84"}],"version-history":[{"count":3,"href":"https:\/\/rafi-gino.co.il\/index.php?rest_route=\/wp\/v2\/pages\/84\/revisions"}],"predecessor-version":[{"id":88,"href":"https:\/\/rafi-gino.co.il\/index.php?rest_route=\/wp\/v2\/pages\/84\/revisions\/88"}],"wp:attachment":[{"href":"https:\/\/rafi-gino.co.il\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=84"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}