{"id":69,"date":"2025-10-11T12:23:09","date_gmt":"2025-10-11T12:23:09","guid":{"rendered":"https:\/\/web31251290.lab1.almamater.si\/?page_id=69"},"modified":"2025-10-16T15:07:09","modified_gmt":"2025-10-16T15:07:09","slug":"tokio","status":"publish","type":"page","link":"https:\/\/web31251290.lab1.almamater.si\/index.php\/tokio\/","title":{"rendered":"Tokio"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"69\" class=\"elementor elementor-69\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cdc155a e-flex e-con-boxed e-con e-parent\" data-id=\"cdc155a\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2a39967 elementor-widget elementor-widget-html\" data-id=\"2a39967\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- SMART CITY \u2014 TOP NAV (vedno viden, z napisom \u201cTokio\u201d) -->\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;600;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<header class=\"smart-topnav\" role=\"navigation\" aria-label=\"Main\">\r\n  <div class=\"nav-frame\">\r\n    <div class=\"nav-inner\">\r\n      <a class=\"brand\" href=\"https:\/\/web31251290.lab1.almamater.si\" aria-label=\"Home\">\r\n        <span class=\"dot\"><\/span> Smart City\r\n      <\/a>\r\n\r\n      <button class=\"nav-toggle\" aria-label=\"Open menu\" aria-expanded=\"false\">\r\n        <span><\/span><span><\/span><span><\/span>\r\n      <\/button>\r\n\r\n      <nav class=\"nav-links\">\r\n        <a href=\"https:\/\/web31251290.lab1.almamater.si\" data-route=\"home\" class=\"is-active\">Home<\/a>\r\n        <a href=\"https:\/\/web31251290.lab1.almamater.si\/index.php\/singapur\" data-route=\"singapore\">Singapur<\/a>\r\n        <a href=\"https:\/\/web31251290.lab1.almamater.si\/index.php\/tokio\" data-route=\"tokio\">Tokio<\/a>\r\n        <a href=\"https:\/\/web31251290.lab1.almamater.si\/index.php\/london\" data-route=\"london\">London<\/a>\r\n        <a href=\"https:\/\/web31251290.lab1.almamater.si\/index.php\/barcelona\" data-route=\"barcelona\">Barcelona<\/a>\r\n        <a href=\"https:\/\/web31251290.lab1.almamater.si\/index.php\/ljubljana\" data-route=\"ljubljana\">Ljubljana<\/a>\r\n      <\/nav>\r\n    <\/div>\r\n  <\/div>\r\n<\/header>\r\n\r\n<style>\r\n:root{\r\n  --bg-0:#05070c; --bg-1:#0b0f18;\r\n  --txt-1:#e7fbff; --txt-2:#9fd8ea;\r\n  --accent:#00eaff;\r\n  --border:rgba(255,255,255,.08);\r\n}\r\n\r\n\/* ====== TOP NAV ====== *\/\r\n.smart-topnav{\r\n    top: 20px; \r\n  position:fixed;\r\n  top:0; left:0; width:100%;\r\n  z-index:9999;\r\n  font-family:\"Poppins\",system-ui,Segoe UI,Arial,sans-serif;\r\n  color:var(--txt-1);\r\n  transition: background .3s ease, box-shadow .3s ease;\r\n  backdrop-filter: blur(10px);\r\n}\r\n\r\n\/* okvir menija *\/\r\n.smart-topnav .nav-frame{\r\n  background: rgba(5,7,12,0.7);\r\n  border-bottom: 1px solid var(--border);\r\n  box-shadow: 0 6px 20px rgba(0,0,0,.35);\r\n}\r\n\r\n\/* notranjost *\/\r\n.smart-topnav .nav-inner{\r\n  max-width: 1200px; margin: 0 auto;\r\n  padding: 12px 18px;\r\n  display: flex; align-items: center; justify-content: space-between;\r\n}\r\n\r\n\/* brand *\/\r\n.smart-topnav .brand{\r\n  display:flex; align-items:center; gap:.6rem;\r\n  font-weight:800; letter-spacing:.5px; text-decoration:none; color:var(--txt-1);\r\n}\r\n.smart-topnav .brand .dot{\r\n  width:10px; height:10px; border-radius:999px;\r\n  background: radial-gradient(circle at 50% 50%, var(--accent) 0%, transparent 70%);\r\n  box-shadow: 0 0 12px var(--accent), 0 0 28px var(--accent);\r\n}\r\n\r\n\/* links *\/\r\n.smart-topnav .nav-links{\r\n  display:flex; align-items:center; gap:.6rem;\r\n}\r\n.smart-topnav .nav-links a{\r\n  --pad-x: 14px; --pad-y: 8px;\r\n  position:relative; display:inline-flex; align-items:center;\r\n  padding: var(--pad-y) var(--pad-x);\r\n  font-weight:600; color:var(--txt-1); text-decoration:none;\r\n  border-radius:12px;\r\n  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;\r\n}\r\n\r\n\/* underline + glow *\/\r\n.smart-topnav .nav-links a::after{\r\n  content:\"\"; position:absolute; left:10px; right:10px; bottom:6px; height:2px;\r\n  background: linear-gradient(90deg, transparent 0 6%, var(--accent) 35% 65%, transparent 94% 100%);\r\n  opacity:0; transform: translateY(3px); transition: all .18s ease;\r\n  box-shadow: 0 0 10px var(--accent);\r\n}\r\n\r\n\/* hover \/ focus *\/\r\n.smart-topnav .nav-links a:hover,\r\n.smart-topnav .nav-links a:focus-visible{\r\n  background: rgba(124,249,255,.07);\r\n  box-shadow: 0 0 0 1px rgba(124,249,255,.18) inset;\r\n  transform: translateY(-1px);\r\n}\r\n.smart-topnav .nav-links a:hover::after,\r\n.smart-topnav .nav-links a:focus-visible::after{ opacity:1; transform:translateY(0); }\r\n\r\n\/* active\/current page *\/\r\n.smart-topnav .nav-links a.is-active,\r\n.smart-topnav .nav-links a[aria-current=\"page\"]{\r\n  background: rgba(124,249,255,.12);\r\n  box-shadow: 0 0 0 1px rgba(124,249,255,.26) inset, 0 0 20px rgba(0,234,255,.15);\r\n}\r\n.smart-topnav .nav-links a.is-active::after,\r\n.smart-topnav .nav-links a[aria-current=\"page\"]::after{\r\n  opacity:1; transform:translateY(0);\r\n}\r\n\r\n\/* hamburger for mobile *\/\r\n.nav-toggle{\r\n  display:none; background:none; border:0; cursor:pointer;\r\n  width:42px; height:36px; border-radius:10px;\r\n}\r\n.nav-toggle span{\r\n  display:block; height:2px; margin:7px 8px; background:var(--txt-1);\r\n  transition: transform .2s ease, opacity .2s ease;\r\n}\r\n\r\n\/* responsive *\/\r\n@media (max-width: 930px){\r\n  .nav-toggle{ display:block; }\r\n  .smart-topnav .nav-inner{ padding:10px 14px; }\r\n  .smart-topnav .nav-links{\r\n    position:fixed; top:64px; right:14px; left:14px;\r\n    display:flex; flex-direction:column; gap:.4rem;\r\n    background: linear-gradient(180deg, rgba(10,14,22,.92), rgba(10,14,22,.86));\r\n    border:1px solid var(--border);\r\n    border-radius:14px; padding:10px;\r\n    box-shadow: 0 12px 40px rgba(0,0,0,.45);\r\n    opacity:0; pointer-events:none; transform: translateY(-8px);\r\n    transition: all .2s ease;\r\n  }\r\n  .smart-topnav.open .nav-links{\r\n    opacity:1; pointer-events:auto; transform: translateY(0);\r\n  }\r\n  .smart-topnav.open .nav-toggle span:nth-child(1){ transform: translateY(9px) rotate(45deg); }\r\n  .smart-topnav.open .nav-toggle span:nth-child(2){ opacity:0; }\r\n  .smart-topnav.open .nav-toggle span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  const header = document.querySelector('.smart-topnav');\r\n  const btn = header.querySelector('.nav-toggle');\r\n  const links = header.querySelector('.nav-links');\r\n\r\n  btn.addEventListener('click', () => {\r\n    const open = header.classList.toggle('open');\r\n    btn.setAttribute('aria-expanded', open ? 'true' : 'false');\r\n  });\r\n\r\n  links.querySelectorAll('a').forEach(a=>{\r\n    a.addEventListener('click', ()=> header.classList.remove('open'));\r\n  });\r\n\r\n  const path = location.pathname.toLowerCase();\r\n  links.querySelectorAll('a').forEach(a=>{\r\n    const href = a.getAttribute('href') || '';\r\n    if(href && path !== '\/' && href !== '\/' && path.startsWith(new URL(href, location.origin).pathname.toLowerCase())){\r\n      a.classList.add('is-active'); a.setAttribute('aria-current','page');\r\n    }\r\n    if(path === '\/' && (href === '\/' || href.endsWith('\/index.php'))){\r\n      a.classList.add('is-active'); a.setAttribute('aria-current','page');\r\n    }\r\n  });\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-de68872 e-flex e-con-boxed e-con e-parent\" data-id=\"de68872\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d1059f8 elementor-widget elementor-widget-html\" data-id=\"d1059f8\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- SMART TOKIO \u2014 Final Version (correct image, layout, button & glow) -->\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;500;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<section class=\"smart-hero fw\" id=\"tokio\">\r\n  <div class=\"hero-frame\">\r\n    <img decoding=\"async\"\r\n      src=\"https:\/\/web31251290.lab1.almamater.si\/wp-content\/uploads\/2025\/10\/Tokyo20Japan-scaled.webp\"\r\n      alt=\"Tokyo skyline with Mount Fuji\"\r\n      class=\"hero-img\"\r\n    \/>\r\n\r\n    <!-- Inner red glowing dashed border -->\r\n    <div class=\"inner-border\"><\/div>\r\n\r\n    <div class=\"hero-overlay\">\r\n      <h1 class=\"smart-title smart-title--tokio\">SMART<br>TOKIO<\/h1>\r\n      <p class=\"smart-sub\">\r\n        Where <strong>robotics<\/strong>, <strong>cashless services<\/strong> and\r\n        <strong>AI-driven transit<\/strong> meet a disaster-resilient urban core.\r\n        Tokyo scales <strong>5G\u21926G trials<\/strong>, autonomous mobility and\r\n        energy-efficient districts \u2014 from Shibuya to Odaiba \u2014 linking citizens\r\n        with seamless digital public services.\r\n      <\/p>\r\n      <a class=\"smart-btn\" href=\"#next\" aria-label=\"Explore Smart Tokio\">Explore<\/a>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n:root {\r\n  --bg-0: #000000;\r\n  --white: #ffffff;\r\n  --red: #ff3b3b;\r\n}\r\n\r\n\/* Background *\/\r\n.smart-hero.fw {\r\n  width: 100%;\r\n  min-height: 100vh;\r\n  background: var(--bg-0);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-family: Poppins, system-ui, sans-serif;\r\n}\r\n\r\n\/* Frame container *\/\r\n.hero-frame {\r\n  position: relative;\r\n  width: 102%;\r\n  max-width: 1575px;\r\n  aspect-ratio: 16\/9;\r\n  border-radius: 20px;\r\n  overflow: hidden;\r\n  box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);\r\n}\r\n.hero-img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  border-radius: 20px;\r\n  display: block;\r\n}\r\n\r\n\/* Outer white border *\/\r\n.hero-frame::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  border-radius: 20px;\r\n  border: 6px solid var(--white);\r\n  box-shadow: 0 0 18px rgba(255, 255, 255, 0.9),\r\n    0 0 34px rgba(255, 255, 255, 0.5);\r\n  pointer-events: none;\r\n}\r\n\r\n\/* Inner red glowing dashed border *\/\r\n.inner-border {\r\n  position: absolute;\r\n  inset: 20px;\r\n  border-radius: 16px;\r\n  border: 6px dashed var(--red);\r\n  box-shadow: 0 0 28px rgba(255, 59, 59, 0.95),\r\n    0 0 65px rgba(255, 59, 59, 0.5),\r\n    inset 0 0 20px rgba(255, 59, 59, 0.3);\r\n  animation: pulseGlow 2.5s ease-in-out infinite alternate;\r\n  pointer-events: none;\r\n}\r\n@keyframes pulseGlow {\r\n  from {\r\n    box-shadow: 0 0 18px rgba(255, 59, 59, 0.6),\r\n      0 0 36px rgba(255, 59, 59, 0.4),\r\n      inset 0 0 12px rgba(255, 59, 59, 0.2);\r\n  }\r\n  to {\r\n    box-shadow: 0 0 28px rgba(255, 59, 59, 0.95),\r\n      0 0 65px rgba(255, 59, 59, 0.6),\r\n      inset 0 0 22px rgba(255, 59, 59, 0.4);\r\n  }\r\n}\r\n\r\n\/* Overlay content *\/\r\n.hero-overlay {\r\n  position: absolute;\r\n  inset: 0;\r\n  display: grid;\r\n  place-items: center;\r\n  text-align: center;\r\n  padding: clamp(14px, 3vw, 28px);\r\n}\r\n\r\n\/* Title (white-red glow) *\/\r\n.smart-title {\r\n  margin: 0 0 0.35em 0;\r\n  line-height: 0.9;\r\n  font-weight: 800;\r\n  letter-spacing: 0.05em;\r\n  font-size: clamp(42px, 8vw, 110px);\r\n  text-transform: uppercase;\r\n}\r\n.smart-title--tokio {\r\n  color: #fff;\r\n  text-shadow: 0 0 6px rgba(255, 255, 255, 0.9),\r\n    0 0 14px rgba(255, 59, 59, 0.85),\r\n    0 0 28px rgba(255, 59, 59, 0.75),\r\n    0 0 58px rgba(255, 59, 59, 0.6);\r\n  animation: tokioGlow 2.4s ease-in-out infinite alternate;\r\n}\r\n@keyframes tokioGlow {\r\n  from {\r\n    text-shadow: 0 0 6px rgba(255, 255, 255, 0.9),\r\n      0 0 12px rgba(255, 59, 59, 0.7),\r\n      0 0 24px rgba(255, 59, 59, 0.55),\r\n      0 0 40px rgba(255, 59, 59, 0.45);\r\n  }\r\n  to {\r\n    text-shadow: 0 0 8px rgba(255, 255, 255, 1),\r\n      0 0 18px rgba(255, 59, 59, 1),\r\n      0 0 36px rgba(255, 59, 59, 0.95),\r\n      0 0 70px rgba(255, 59, 59, 0.8);\r\n  }\r\n}\r\n\r\n\/* Subtitle *\/\r\n.smart-sub {\r\n  color: #f3f6f9;\r\n  font-weight: 300;\r\n  font-size: clamp(15px, 2vw, 20px);\r\n  max-width: 65ch;\r\n  text-shadow: 0 0 10px rgba(0, 0, 0, 0.55),\r\n    0 2px 22px rgba(0, 0, 0, 0.55);\r\n  opacity: 0.95;\r\n  margin-bottom: 1.3em;\r\n  backdrop-filter: blur(0.5px);\r\n}\r\n\r\n\/* Button *\/\r\n.smart-btn {\r\n  display: inline-block;\r\n  padding: 1em 1.8em;\r\n  background: linear-gradient(180deg, #fff, #ffdede);\r\n  color: #3d0000;\r\n  font-weight: 800;\r\n  font-size: clamp(14px, 2vw, 18px);\r\n  text-decoration: none;\r\n  border-radius: 14px;\r\n  border: 2px solid rgba(255, 59, 59, 0.85);\r\n  box-shadow: 0 0 16px rgba(255, 59, 59, 0.65),\r\n    inset 0 0 10px rgba(255, 255, 255, 0.7);\r\n  transition: transform 0.18s ease, box-shadow 0.18s ease;\r\n}\r\n.smart-btn:hover {\r\n  transform: translateY(-2px);\r\n  box-shadow: 0 0 24px rgba(255, 59, 59, 0.85),\r\n    inset 0 0 14px rgba(255, 255, 255, 0.9);\r\n}\r\n<\/style>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a98c499 e-flex e-con-boxed e-con e-parent\" data-id=\"a98c499\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c2c4b1e elementor-widget elementor-widget-html\" data-id=\"c2c4b1e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ================= SMART TOKYO (content under hero) ================= -->\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;500;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<section class=\"smart-jp\">\r\n\r\n    <!-- 1) KPI trak -->\r\n    <section class=\"section jp-kpis\">\r\n        <div class=\"container kpi-row\">\r\n            <div class=\"kpi\"><div class=\"n\" data-val=\"13800\">0<\/div><div class=\"l\">IoT senzorjev po mestu<\/div><\/div>\r\n            <div class=\"kpi\"><div class=\"n\" data-val=\"99\">0<\/div><div class=\"l\">% to\u010dnost javnega prevoza<\/div><\/div>\r\n            <div class=\"kpi\"><div class=\"n\" data-val=\"540\">0<\/div><div class=\"l\">km podzemnih linij<\/div><\/div>\r\n            <div class=\"kpi\"><div class=\"n\" data-val=\"92\">0<\/div><div class=\"l\">% digitaliziranih javnih storitev<\/div><\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- 2) Smart Mobility dashboard -->\r\n    <section id=\"mobility-jp\" class=\"section jp-mobility\">\r\n        <div class=\"container\">\r\n            <h2 class=\"sec-title\">Smart Mobility (Realtime-like)<\/h2>\r\n            <div class=\"dash\">\r\n                <article class=\"tile\">\r\n                    <h3>Povpr. zamuda vlakov<\/h3>\r\n                    <p class=\"big\"><span class=\"val\" data-min=\"0\" data-max=\"2\">\u2013<\/span> min<\/p>\r\n                    <p class=\"muted\">Shinkansen & Metro Tokyo<\/p>\r\n                <\/article>\r\n                <article class=\"tile\">\r\n                    <h3>Prometna obremenitev (Shibuya)<\/h3>\r\n                    <p class=\"big\"><span class=\"val\" data-min=\"58\" data-max=\"87\">\u2013<\/span>%<\/p>\r\n                    <p class=\"muted\">IoT kamere in senzorji<\/p>\r\n                <\/article>\r\n                <article class=\"tile\">\r\n                    <h3>Metro potniki<\/h3>\r\n                    <p class=\"big\"><span class=\"val\" data-min=\"6400000\" data-max=\"8400000\">\u2013<\/span>\/dan<\/p>\r\n                    <p class=\"muted\">Tokyo Metro + JR Lines<\/p>\r\n                <\/article>\r\n                <article class=\"tile\">\r\n                    <h3>CO\u2082 prihranki<\/h3>\r\n                    <p class=\"big\"><span class=\"val\" data-min=\"220\" data-max=\"350\">\u2013<\/span> t\/dan<\/p>\r\n                    <p class=\"muted\">elektri\u010dni vlaki + LED sistem<\/p>\r\n                <\/article>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- 3) Digital Governance -->\r\n    <section id=\"egov-jp\" class=\"section jp-egov\">\r\n        <div class=\"container\">\r\n            <h2 class=\"sec-title\">Digital Governance<\/h2>\r\n            <div class=\"quick-cards\">\r\n                <a class=\"q\" href=\"https:\/\/www.e-gov.go.jp\/\" target=\"_blank\" rel=\"noopener\"><strong>e-Gov Japan<\/strong><span>uradne storitve<\/span><\/a>\r\n                <a class=\"q\" href=\"https:\/\/mynumbercard.point.soumu.go.jp\/\" target=\"_blank\" rel=\"noopener\"><strong>MyNumber<\/strong><span>dru\u017ebeni ID & digitalna kartica<\/span><\/a>\r\n                <a class=\"q\" href=\"https:\/\/www.tokyometro.jp\/global\/en\/\" target=\"_blank\" rel=\"noopener\"><strong>Tokyo Metro App<\/strong><span>mobilni prevoz & podatki<\/span><\/a>\r\n                <a class=\"q\" href=\"https:\/\/www.smartcity.tokyo\/\" target=\"_blank\" rel=\"noopener\"><strong>Smart Tokyo<\/strong><span>uradna pobuda mesta<\/span><\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- 4) Pilotni projekti -->\r\n    <section id=\"projects-jp\" class=\"section jp-projects\">\r\n        <div class=\"container\">\r\n            <h2 class=\"sec-title\">Pilotni projekti & pobude<\/h2>\r\n            <div class=\"proj-grid\">\r\n                <article class=\"proj\">\r\n                    <h3>Shibuya Smart City<\/h3>\r\n                    <p>AI nadzor prometa, 5G pokritost in digitalne oznake za potnike.<\/p>\r\n                    <div class=\"tags\"><span>5G<\/span><span>AI<\/span><span>Mobility<\/span><\/div>\r\n                <\/article>\r\n                <article class=\"proj\">\r\n                    <h3>e-Mobility Tokyo<\/h3>\r\n                    <p>Elektri\u010dni avtobusi in taksiji z baterijskim menjanjem.<\/p>\r\n                    <div class=\"tags\"><span>EV<\/span><span>BatterySwap<\/span><span>Taxis<\/span><\/div>\r\n                <\/article>\r\n                <article class=\"proj\">\r\n                    <h3>AI Disaster Alert<\/h3>\r\n                    <p>Sistem za zgodnje opozarjanje in evakuacijo ob potresih & poplavah.<\/p>\r\n                    <div class=\"tags\"><span>AI<\/span><span>Resilience<\/span><span>IoT<\/span><\/div>\r\n                <\/article>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- 5) City Highlights -->\r\n    <section id=\"highlights-jp\" class=\"section jp-gallery\">\r\n        <div class=\"container\">\r\n            <h2 class=\"sec-title\">City Highlights<\/h2>\r\n            <p class=\"muted\">Pametne to\u010dke Tokia \u2014 filtriraj in preglej tehnologije.<\/p>\r\n            <div class=\"filter-row\">\r\n                <button class=\"fbtn active\" data-filter=\"all\">All<\/button>\r\n                <button class=\"fbtn\" data-filter=\"mobility\">Mobility<\/button>\r\n                <button class=\"fbtn\" data-filter=\"energy\">Energy<\/button>\r\n                <button class=\"fbtn\" data-filter=\"environment\">Environment<\/button>\r\n                <button class=\"fbtn\" data-filter=\"services\">Services<\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"gallery-grid smart\">\r\n            <!-- MOBILITY -->\r\n            <figure class=\"g\" data-cat=\"mobility\" data-tip=\"Shinkansen on-time 99.8% \u2022 Avg delay \u2248 54 s\">\r\n                <img decoding=\"async\" src=\"https:\/\/web31251290.lab1.almamater.si\/wp-content\/uploads\/2025\/10\/500_series_Shinkansen_train_at_Tokyo_Station.jpg\" alt=\"Shinkansen Tokyo Station\">\r\n                <figcaption><span class=\"chip\"><span class=\"ico\">\ud83d\ude85<\/span> Rail<\/span> Shinkansen postaja<\/figcaption><span class=\"tt\"><\/span>\r\n            <\/figure>\r\n\r\n            <figure class=\"g\" data-cat=\"mobility\" data-tip=\"EV taksiji: 350+ \u2022 DC chargers: 80+\">\r\n                <img decoding=\"async\" src=\"https:\/\/web31251290.lab1.almamater.si\/wp-content\/uploads\/2025\/10\/taxi.jpg\" alt=\"Electric Taxi Tokyo\">\r\n                <figcaption><span class=\"chip\"><span class=\"ico\">\ud83d\ude96<\/span> EV Taxi<\/span> Elektri\u010dni taksi<\/figcaption><span class=\"tt\"><\/span>\r\n            <\/figure>\r\n\r\n            <figure class=\"g\" data-cat=\"mobility\" data-tip=\"Pametni prehodi z LED opozorili in senzorji gibanja\">\r\n                <img decoding=\"async\" src=\"https:\/\/web31251290.lab1.almamater.si\/wp-content\/uploads\/2025\/10\/735355_poster.jpg\" alt=\"Shibuya Smart Crossing\">\r\n                <figcaption><span class=\"chip\"><span class=\"ico\">\ud83d\udea6<\/span> SmartCross<\/span> Pametni prehod<\/figcaption><span class=\"tt\"><\/span>\r\n            <\/figure>\r\n\r\n            <!-- ENERGY -->\r\n            <figure class=\"g\" data-cat=\"energy\" data-tip=\"PV rooftops 200+ \u2022 Smart grid integracija\">\r\n                <img decoding=\"async\" src=\"https:\/\/web31251290.lab1.almamater.si\/wp-content\/uploads\/2025\/10\/104fa0a6db754635482f00ca446799f4.webp\" alt=\"Tokyo Solar Roofs\">\r\n                <figcaption><span class=\"chip\"><span class=\"ico\">\ud83d\udd06<\/span> PV<\/span> Solarne strehe<\/figcaption><span class=\"tt\"><\/span>\r\n            <\/figure>\r\n\r\n            <!-- ENVIRONMENT -->\r\n            <figure class=\"g\" data-cat=\"environment\" data-tip=\"IoT PM2.5\/NO\u2082 senzorji \u2022 Open Data (METI)\">\r\n                <img decoding=\"async\" src=\"https:\/\/web31251290.lab1.almamater.si\/wp-content\/uploads\/2025\/10\/press_en_2020102901.jpg.gif\" alt=\"Tokyo Skytree sensors\">\r\n                <figcaption><span class=\"chip\"><span class=\"ico\">\ud83c\udf2b\ufe0f<\/span> AQ<\/span> Senzorji zraka<\/figcaption><span class=\"tt\"><\/span>\r\n            <\/figure>\r\n\r\n            <!-- SERVICES -->\r\n            <figure class=\"g\" data-cat=\"services\" data-tip=\"Pametne svetilke \u2022 LED + kamere za varnost\">\r\n                <img decoding=\"async\" src=\"https:\/\/web31251290.lab1.almamater.si\/wp-content\/uploads\/2025\/10\/Smart-City-with-Bluetooth-Mesh.png\" alt=\"Tokyo Smart Streetlight\">\r\n                <figcaption><span class=\"chip\"><span class=\"ico\">\ud83d\udca1<\/span> LED<\/span> Smart streetlight<\/figcaption><span class=\"tt\"><\/span>\r\n            <\/figure>\r\n\r\n            <figure class=\"g\" data-cat=\"services\" data-tip=\"5G kioski \u2022 brez\u017ei\u010dno polnjenje \u2022 Wi-Fi 6\">\r\n                <img decoding=\"async\" src=\"https:\/\/web31251290.lab1.almamater.si\/wp-content\/uploads\/2025\/10\/shutterstock_1006025875-750x502-1.jpg\" alt=\"5G kiosk Tokyo\">\r\n                <figcaption><span class=\"chip\"><span class=\"ico\">\ud83d\udcf6<\/span> 5G<\/span> Pametni kiosk<\/figcaption><span class=\"tt\"><\/span>\r\n            <\/figure>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- 6) Zemljevid (Leaflet \/ OSM) -->\r\n    <section id=\"map-jp\" class=\"section jp-map\">\r\n        <div class=\"container\">\r\n            <h2 class=\"sec-title\">Pametna infrastruktura \u2014 zemljevid<\/h2>\r\n            <p class=\"muted\">Demo: Metro postaje in IoT senzorji po Tokiu.<\/p>\r\n        <\/div>\r\n        <div class=\"map-wrap\">\r\n            <div id=\"jp-map\"><\/div>\r\n            <div class=\"map-legend\">\r\n                <span class=\"dot metro\"><\/span> Metro\r\n                <span class=\"spacer\"><\/span>\r\n                <span class=\"dot sensor\"><\/span> IoT senzor\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n<style>\r\n    .smart-jp{--bg:#060910;--bg2:#0a0f1a;--txt:#e8faff;--muted:#8ecdf0;--acc:#00aaff;--glass:rgba(10,14,22,.55);font-family:Poppins,system-ui,sans-serif;color:var(--txt);}\r\n    .smart-jp .section{padding:72px 0;background:linear-gradient(180deg,var(--bg),var(--bg2));overflow:hidden;}\r\n    .smart-jp .container{width:min(1200px,92%);margin:auto;}\r\n    .smart-jp .sec-title{font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-bottom:14px;font-size:clamp(24px,3vw,36px);color:#61d9ff;text-shadow:0 0 18px rgba(0,170,255,.45)}\r\n    .smart-jp .muted{color:var(--muted)}\r\n\r\n    \/* KPI & Dashboard *\/\r\n    .smart-jp .kpi-row,.smart-jp .dash{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}\r\n    .smart-jp .kpi{background:rgba(255,255,255,.05);border:1px solid rgba(97,217,255,.3);border-radius:18px;padding:16px;text-align:center}\r\n    .smart-jp .kpi .n{font-size:clamp(28px,4vw,40px);font-weight:800;color:#61d9ff}\r\n    .smart-jp .kpi .l{opacity:.95}\r\n    .smart-jp .tile{background:rgba(255,255,255,.04);border:1px solid rgba(97,217,255,.3);border-radius:18px;padding:18px}\r\n    .smart-jp .tile .big{margin:4px 0 2px;font-weight:800;font-size:clamp(22px,3.2vw,32px);color:#e9fdff}\r\n\r\n    \/* Quick actions *\/\r\n    .smart-jp .quick-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}\r\n    .smart-jp .q{padding:16px;border-radius:16px;border:1px solid rgba(97,217,255,.3);background:linear-gradient(180deg,rgba(97,217,255,.1),rgba(97,217,255,.04));text-decoration:none;color:var(--txt);transition:.2s}\r\n    .smart-jp .q strong{font-size:18px}\r\n    .smart-jp .q:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,170,255,.25)}\r\n\r\n    \/* Projects *\/\r\n    .smart-jp .proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}\r\n    .smart-jp .proj{padding:18px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(97,217,255,.3)}\r\n    .smart-jp .proj .tags span{display:inline-block;font-size:12px;margin:4px 6px 0 0;padding:5px 8px;border:1px solid rgba(97,217,255,.35);border-radius:999px}\r\n\r\n    \/* Gallery *\/\r\n    .smart-jp .filter-row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 16px}\r\n    .smart-jp .fbtn{padding:0 14px;height:36px;border-radius:999px;border:1px solid rgba(97,217,255,.3);background:rgba(97,217,255,.05);color:#e7fbff;font-weight:700;cursor:pointer;transition:.2s}\r\n    .smart-jp .fbtn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,170,255,.18)}\r\n    .smart-jp .fbtn.active{background:linear-gradient(180deg,rgba(0,170,255,.9),rgba(0,170,255,.6));color:#011520;border:0}\r\n    .smart-jp .gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:min(1200px,92%);margin:auto}\r\n    .smart-jp .g{position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(97,217,255,.3);box-shadow:0 10px 26px rgba(0,0,0,.35);background:rgba(255,255,255,.02)}\r\n    .smart-jp .g img{width:100%;height:240px;object-fit:cover;transition:transform .4s}\r\n    .smart-jp .g:hover img{transform:scale(1.04)}\r\n    .smart-jp .chip{position:absolute;left:10px;top:10px;padding:4px 8px;border-radius:999px;background:rgba(0,170,255,.25);font-size:11px;border:1px solid rgba(97,217,255,.35)}\r\n    .smart-jp .chip .ico{margin-right:6px;font-size:12px;filter:drop-shadow(0 0 6px rgba(0,170,255,.35))}\r\n    .smart-jp .g figcaption{position:absolute;left:10px;bottom:10px;padding:6px 10px;border-radius:999px;background:rgba(11,15,24,.65);font-size:12px;border:1px solid rgba(97,217,255,.35)}\r\n    .smart-jp .tt{position:absolute;bottom:40px;right:10px;background:rgba(5,9,16,.8);border:1px solid rgba(97,217,255,.35);padding:8px 12px;border-radius:12px;font-size:12px;opacity:0;transition:.2s}\r\n    .smart-jp .g:hover .tt{opacity:1}\r\n\r\n    \/* Map *\/\r\n    .smart-jp .map-wrap{width:min(1200px,92%);margin:12px auto;position:relative}\r\n    #jp-map{height:520px;border-radius:18px;border:1px solid rgba(97,217,255,.3);box-shadow:0 14px 40px rgba(0,0,0,.35);overflow:hidden}\r\n    .smart-jp .map-legend{position:absolute;top:12px;right:12px;background:rgba(11,15,24,.7);backdrop-filter:blur(6px);border:1px solid rgba(97,217,255,.35);border-radius:12px;padding:8px 10px;color:#dffaff;font-size:12px;display:flex;align-items:center;gap:10px}\r\n    .smart-jp .map-legend .spacer{display:inline-block;width:10px}\r\n    .smart-jp .dot{width:10px;height:10px;border-radius:50%;display:inline-block;box-shadow:0 0 10px currentColor}\r\n    .smart-jp .dot.metro{background:#61d9ff;color:#61d9ff}\r\n    .smart-jp .dot.sensor{background:#ff8b42;color:#ff8b42}\r\n\r\n    \/* CTA *\/\r\n    .smart-jp .cta-box{background:linear-gradient(180deg,rgba(97,217,255,.08),rgba(97,217,255,.03));border:1px solid rgba(97,217,255,.35);border-radius:22px;padding:28px;text-align:center;box-shadow:0 14px 40px rgba(0,0,0,.35)}\r\n    .smart-jp .cta-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}\r\n    .smart-jp .btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 16px;border-radius:14px;text-decoration:none;font-weight:700;border:1px solid rgba(97,217,255,.4);background:rgba(97,217,255,.1);color:var(--txt);transition:.2s}\r\n    .smart-jp .btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,170,255,.25)}\r\n    .smart-jp .btn-primary{background:linear-gradient(180deg,rgba(0,170,255,.9),rgba(0,170,255,.6));color:#011520;border-color:transparent}\r\n    .smart-jp .btn-ghost{background:transparent}\r\n\r\n    \/* Responsive *\/\r\n    @media (max-width:1024px){\r\n        .smart-jp .kpi-row{grid-template-columns:1fr 1fr}\r\n        .smart-jp .dash{grid-template-columns:1fr 1fr}\r\n        .smart-jp .quick-cards{grid-template-columns:1fr 1fr}\r\n        .smart-jp .proj-grid{grid-template-columns:1fr 1fr}\r\n        .smart-jp .gallery-grid{grid-template-columns:repeat(2,1fr)}\r\n    }\r\n    @media (max-width:640px){\r\n        .smart-jp .kpi-row,.smart-jp .dash,.smart-jp .quick-cards,.smart-jp .proj-grid{grid-template-columns:1fr}\r\n        .smart-jp .gallery-grid{grid-template-columns:1fr}\r\n        #jp-map{height:420px}\r\n    }\r\n<\/style>\r\n\r\n<!-- Leaflet (OSM) -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" crossorigin>\r\n<script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\" crossorigin><\/script>\r\n\r\n<script>\r\n    \/* KPI animacija *\/\r\n    function jpAnimateKPIs(){\r\n        document.querySelectorAll('.smart-jp .kpi .n').forEach(el=>{\r\n            const target=+el.dataset.val; let cur=0; const step=Math.max(1,Math.round(target\/40));\r\n            const t=setInterval(()=>{cur+=step;if(cur>=target){cur=target;clearInterval(t);}el.textContent=cur;},20);\r\n        });\r\n    }\r\n    \/* Dashboard refresh *\/\r\n    const jpRand=(a,b)=>Math.round(a+Math.random()*(b-a));\r\n    function jpRefreshVals(){\r\n        document.querySelectorAll('.smart-jp .tile .val').forEach(el=>{\r\n            el.textContent=jpRand(+el.dataset.min,+el.dataset.max);\r\n        });\r\n    }\r\n    \/* Highlights: filter + tooltips *\/\r\n    function jpInitHighlights(){\r\n        const btns=document.querySelectorAll('.smart-jp .fbtn');\r\n        const cards=document.querySelectorAll('.smart-jp .gallery-grid .g');\r\n        btns.forEach(b=>b.addEventListener('click',()=>{\r\n            btns.forEach(x=>x.classList.remove('active')); b.classList.add('active');\r\n            const f=b.dataset.filter;\r\n            cards.forEach(c=>{ c.style.display=(f==='all'||c.dataset.cat===f)?'':'none'; });\r\n        }));\r\n        cards.forEach(c=>{\r\n            const tip=c.querySelector('.tt'); if(tip && c.dataset.tip){ tip.textContent=c.dataset.tip; }\r\n            else if(!tip){ const span=document.createElement('span'); span.className='tt'; span.textContent=c.dataset.tip||''; c.appendChild(span); }\r\n        });\r\n    }\r\n    \/* Leaflet mapa (Tokyo demo) *\/\r\n    function initJpMap(){\r\n        const map=L.map('jp-map',{zoomControl:true,scrollWheelZoom:true}).setView([35.6812,139.7671],12); \/\/ Tokyo Station\r\n        L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png',{maxZoom:19,attribution:'&copy; OpenStreetMap'}).addTo(map);\r\n\r\n        const metroStyle={radius:8,color:'#61d9ff',fillColor:'#61d9ff',fillOpacity:.9,weight:1};\r\n        const sensorStyle={radius:8,color:'#ff8b42',fillColor:'#ff8b42',fillOpacity:.9,weight:1};\r\n\r\n        const metro=[\r\n            {name:'Tokyo Station',coords:[35.6812,139.7671]},\r\n            {name:'Shinjuku',coords:[35.6900,139.7000]},\r\n            {name:'Shibuya',coords:[35.6595,139.7005]},\r\n            {name:'Ueno',coords:[35.7138,139.7773]},\r\n            {name:'Ginza',coords:[35.6717,139.7650]}\r\n        ];\r\n        const sensors=[\r\n            {name:'AQ \u2013 Sumida',coords:[35.7101,139.8107]},\r\n            {name:'Met \u2013 Odaiba',coords:[35.6251,139.7756]},\r\n            {name:'PM2.5 \u2013 Shinjuku',coords:[35.6938,139.7036]},\r\n            {name:'Flood \u2013 Meguro',coords:[35.6415,139.6980]}\r\n        ];\r\n\r\n        const metroLayer=L.layerGroup(metro.map(s=>L.circleMarker(s.coords,metroStyle).bindPopup(`<strong>${s.name}<\/strong>`))).addTo(map);\r\n        const sensorLayer=L.layerGroup(sensors.map(s=>L.circleMarker(s.coords,sensorStyle).bindPopup(`<strong>${s.name}<\/strong>`))).addTo(map);\r\n\r\n        L.control.layers(null,{ 'Metro':metroLayer, 'IoT senzorji':sensorLayer },{collapsed:true}).addTo(map);\r\n\r\n        const all=[...metro.map(s=>s.coords),...sensors.map(s=>s.coords)];\r\n        if(all.length) map.fitBounds(all,{padding:[30,30]});\r\n    }\r\n\r\n    \/* Vstopne animacije sekcij *\/\r\n    document.querySelectorAll('.smart-jp .section').forEach(sec=>{sec.style.opacity=0;sec.style.transform='translateY(12px)';});\r\n    const jpIO=new IntersectionObserver((ents)=>{ents.forEach(e=>{if(e.isIntersecting){e.target.style.transition='opacity .55s ease, transform .55s ease';e.target.style.opacity=1;e.target.style.transform='none';jpIO.unobserve(e.target);}})},{threshold:.12});\r\n    document.querySelectorAll('.smart-jp .section').forEach(s=>jpIO.observe(s));\r\n\r\n    \/* Init *\/\r\n    window.addEventListener('DOMContentLoaded',()=>{\r\n        jpAnimateKPIs();\r\n        jpRefreshVals(); setInterval(jpRefreshVals,4000);\r\n        jpInitHighlights();\r\n        initJpMap();\r\n    });\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Smart City Home Singapur Tokio London Barcelona Ljubljana SMARTTOKIO Where robotics, cashless services and AI-driven transit meet a disaster-resilient urban core. Tokyo scales 5G\u21926G trials, autonomous mobility and energy-efficient districts \u2014 from Shibuya to Odaiba \u2014 linking citizens with seamless digital public services. Explore 0IoT senzorjev po mestu 0% to\u010dnost javnega prevoza 0km podzemnih linij [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-69","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/web31251290.lab1.almamater.si\/index.php\/wp-json\/wp\/v2\/pages\/69","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/web31251290.lab1.almamater.si\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/web31251290.lab1.almamater.si\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/web31251290.lab1.almamater.si\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/web31251290.lab1.almamater.si\/index.php\/wp-json\/wp\/v2\/comments?post=69"}],"version-history":[{"count":66,"href":"https:\/\/web31251290.lab1.almamater.si\/index.php\/wp-json\/wp\/v2\/pages\/69\/revisions"}],"predecessor-version":[{"id":596,"href":"https:\/\/web31251290.lab1.almamater.si\/index.php\/wp-json\/wp\/v2\/pages\/69\/revisions\/596"}],"wp:attachment":[{"href":"https:\/\/web31251290.lab1.almamater.si\/index.php\/wp-json\/wp\/v2\/media?parent=69"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}