{"id":71,"date":"2025-10-11T12:23:33","date_gmt":"2025-10-11T12:23:33","guid":{"rendered":"https:\/\/web31251290.lab1.almamater.si\/?page_id=71"},"modified":"2025-10-16T15:07:35","modified_gmt":"2025-10-16T15:07:35","slug":"london","status":"publish","type":"page","link":"https:\/\/web31251290.lab1.almamater.si\/index.php\/london\/","title":{"rendered":"London"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"71\" class=\"elementor elementor-71\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e91c328 e-flex e-con-boxed e-con e-parent\" data-id=\"e91c328\" 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-48efec9 elementor-widget elementor-widget-html\" data-id=\"48efec9\" 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-228232d e-flex e-con-boxed e-con e-parent\" data-id=\"228232d\" 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-5f6ead0 elementor-widget elementor-widget-html\" data-id=\"5f6ead0\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- SMART LONDON \u2014 White Outer Frame + Blue-Red Glowing Dashed Inner Border -->\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=\"london\">\r\n  <div class=\"hero-frame\">\r\n    <img decoding=\"async\"\r\n      src=\"https:\/\/web31251290.lab1.almamater.si\/wp-content\/uploads\/2025\/10\/4d952b50-7b26-11ef-b282-4535eb84fe4b.jpg\"\r\n      alt=\"London skyline with Tower Bridge\"\r\n      class=\"hero-img\"\r\n    \/>\r\n\r\n    <!-- Inner gradient border -->\r\n    <div class=\"inner-border\"><\/div>\r\n\r\n    <div class=\"hero-overlay\">\r\n      <h1 class=\"smart-title smart-title--london\">SMART<br>LONDON<\/h1>\r\n\r\n      <p class=\"smart-sub\">\r\n        Where <strong>data, design and sustainability<\/strong> shape the modern metropolis.  \r\n        London leads in <strong>AI-driven transport<\/strong>, <strong>urban analytics<\/strong> and  \r\n        <strong>smart governance<\/strong> \u2014 connecting citizens through open data, 5G networks  \r\n        and a commitment to green innovation.\r\n      <\/p>\r\n\r\n      <a class=\"smart-btn\" href=\"#next\" aria-label=\"Explore Smart London\">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  --blue: #00b4ff;\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 dashed border \u2014 gradient red\/blue *\/\r\n.inner-border {\r\n  position: absolute;\r\n  inset: 20px;\r\n  border-radius: 16px;\r\n  border: 6px dashed transparent;\r\n  background: linear-gradient(90deg, var(--red), var(--blue), var(--red));\r\n  background-size: 300% 100%;\r\n  box-shadow:\r\n    0 0 35px rgba(255, 80, 80, 0.9),\r\n    0 0 65px rgba(0, 180, 255, 0.8),\r\n    inset 0 0 25px rgba(255, 255, 255, 0.2);\r\n  animation: gradientMove 3s linear infinite, pulseGlow 2.5s ease-in-out infinite alternate;\r\n  pointer-events: none;\r\n  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\r\n  -webkit-mask-composite: xor;\r\n          mask-composite: exclude;\r\n  padding: 6px;\r\n}\r\n@keyframes gradientMove {\r\n  0% { background-position: 0% 50%; }\r\n  100% { background-position: 300% 50%; }\r\n}\r\n@keyframes pulseGlow {\r\n  from {\r\n    box-shadow:\r\n      0 0 25px rgba(255, 80, 80, 0.8),\r\n      0 0 45px rgba(0, 180, 255, 0.5),\r\n      inset 0 0 15px rgba(255, 255, 255, 0.15);\r\n  }\r\n  to {\r\n    box-shadow:\r\n      0 0 40px rgba(255, 80, 80, 1),\r\n      0 0 80px rgba(0, 180, 255, 0.9),\r\n      inset 0 0 25px rgba(255, 255, 255, 0.35);\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-blue-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--london {\r\n  color: #fff;\r\n  text-shadow:\r\n    0 0 6px rgba(255, 255, 255, 0.9),\r\n    0 0 14px rgba(255, 59, 59, 0.85),\r\n    0 0 26px rgba(0, 180, 255, 0.85),\r\n    0 0 58px rgba(0, 180, 255, 0.6);\r\n  animation: londonGlow 2.4s ease-in-out infinite alternate;\r\n}\r\n@keyframes londonGlow {\r\n  from {\r\n    text-shadow:\r\n      0 0 6px rgba(255, 255, 255, 0.9),\r\n      0 0 12px rgba(255, 59, 59, 0.7),\r\n      0 0 22px rgba(0, 180, 255, 0.55),\r\n      0 0 40px rgba(0, 180, 255, 0.45);\r\n  }\r\n  to {\r\n    text-shadow:\r\n      0 0 8px rgba(255, 255, 255, 1),\r\n      0 0 18px rgba(255, 59, 59, 1),\r\n      0 0 36px rgba(0, 180, 255, 0.95),\r\n      0 0 70px rgba(0, 180, 255, 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, #d3e8ff);\r\n  color: #00243d;\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(0, 180, 255, 0.85);\r\n  box-shadow:\r\n    0 0 18px rgba(0, 180, 255, 0.65),\r\n    inset 0 0 10px rgba(255, 255, 255, 0.6);\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:\r\n    0 0 26px rgba(0, 180, 255, 0.9),\r\n    inset 0 0 14px rgba(255, 255, 255, 0.85);\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-c8344c9 e-flex e-con-boxed e-con e-parent\" data-id=\"c8344c9\" 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-298ea66 elementor-widget elementor-widget-html\" data-id=\"298ea66\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ================= SMART LONDON (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-uk\">\r\n\r\n    <!-- 1) KPI trak -->\r\n    <section class=\"section uk-kpis\">\r\n        <div class=\"container kpi-row\">\r\n            <div class=\"kpi\"><div class=\"n\" data-val=\"12000\">0<\/div><div class=\"l\">IoT senzorjev po mestu<\/div><\/div>\r\n            <div class=\"kpi\"><div class=\"n\" data-val=\"96\">0<\/div><div class=\"l\">% to\u010dnost javnega prevoza<\/div><\/div>\r\n            <div class=\"kpi\"><div class=\"n\" data-val=\"402\">0<\/div><div class=\"l\">km podzemnih linij<\/div><\/div>\r\n            <div class=\"kpi\"><div class=\"n\" data-val=\"90\">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-uk\" class=\"section uk-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=\"1\" data-max=\"4\">\u2013<\/span> min<\/p>\r\n                    <p class=\"muted\">Tube & Overground<\/p>\r\n                <\/article>\r\n                <article class=\"tile\">\r\n                    <h3>Prometna obremenitev (City\/West End)<\/h3>\r\n                    <p class=\"big\"><span class=\"val\" data-min=\"55\" data-max=\"85\">\u2013<\/span>%<\/p>\r\n                    <p class=\"muted\">IoT kamere in senzorji<\/p>\r\n                <\/article>\r\n                <article class=\"tile\">\r\n                    <h3>Potniki Underground<\/h3>\r\n                    <p class=\"big\"><span class=\"val\" data-min=\"3500000\" data-max=\"5200000\">\u2013<\/span>\/dan<\/p>\r\n                    <p class=\"muted\">TfL Tube<\/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=\"180\" data-max=\"300\">\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-uk\" class=\"section uk-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.gov.uk\/\" target=\"_blank\" rel=\"noopener\"><strong>GOV.UK<\/strong><span>uradne storitve<\/span><\/a>\r\n                <a class=\"q\" href=\"https:\/\/oyster.tfl.gov.uk\/oyster\/entry.do\" target=\"_blank\" rel=\"noopener\"><strong>Oyster\/Contactless<\/strong><span>pla\u010dila & potovanja<\/span><\/a>\r\n                <a class=\"q\" href=\"https:\/\/tfl.gov.uk\/maps\/tube\" target=\"_blank\" rel=\"noopener\"><strong>TfL Go<\/strong><span>mobilna aplikacija<\/span><\/a>\r\n                <a class=\"q\" href=\"https:\/\/data.london.gov.uk\/\" target=\"_blank\" rel=\"noopener\"><strong>London Datastore<\/strong><span>odprti podatki<\/span><\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- 4) Pilotni projekti -->\r\n    <section id=\"projects-uk\" class=\"section uk-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>Smart Junctions (Westminster)<\/h3>\r\n                    <p>AI semaforji za bolj\u0161i pretok in manj zastojev.<\/p>\r\n                    <div class=\"tags\"><span>AI<\/span><span>Mobility<\/span><span>Vision<\/span><\/div>\r\n                <\/article>\r\n                <article class=\"proj\">\r\n                    <h3>e-Buses London<\/h3>\r\n                    <p>Elektri\u010dni avtobusi z polnjenjem \u010dez no\u010d in pantografi.<\/p>\r\n                    <div class=\"tags\"><span>EV<\/span><span>eBus<\/span><span>Charging<\/span><\/div>\r\n                <\/article>\r\n                <article class=\"proj\">\r\n                    <h3>ULEZ\/LEZ IoT<\/h3>\r\n                    <p>Omre\u017eje kamer in senzorjev za kakovost zraka & emisije.<\/p>\r\n                    <div class=\"tags\"><span>Environment<\/span><span>IoT<\/span><span>Policy<\/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-uk\" class=\"section uk-gallery\">\r\n        <div class=\"container\">\r\n            <h2 class=\"sec-title\">City Highlights<\/h2>\r\n            <p class=\"muted\">Pametne to\u010dke Londona \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=\"On-time >95% \u2022 Hitri prihodi vlakov\">\r\n                <img decoding=\"async\" src=\"https:\/\/web31251290.lab1.almamater.si\/wp-content\/uploads\/2025\/10\/image.webp\" alt=\"Oxford Circus Tube\">\r\n                <figcaption><span class=\"chip\"><span class=\"ico\">\ud83d\ude87<\/span> Tube<\/span> Oxford Circus<\/figcaption><span class=\"tt\"><\/span>\r\n            <\/figure>\r\n\r\n            <figure class=\"g\" data-cat=\"mobility\" data-tip=\"e-Busi 1000+ \u2022 Hitri DC polnilci\">\r\n                <img decoding=\"async\" src=\"https:\/\/web31251290.lab1.almamater.si\/wp-content\/uploads\/2025\/10\/fabca330-a691-11ef-af82-a143be9f8804.jpg\" alt=\"Electric Bus London\">\r\n                <figcaption><span class=\"chip\"><span class=\"ico\">\ud83d\ude8c<\/span> eBus<\/span> Elektri\u010dni avtobus<\/figcaption><span class=\"tt\"><\/span>\r\n            <\/figure>\r\n\r\n            <!-- ENERGY -->\r\n            <figure class=\"g\" data-cat=\"energy\" data-tip=\"Solarne strehe & pametne zgradbe\">\r\n                <img decoding=\"async\" src=\"https:\/\/web31251290.lab1.almamater.si\/wp-content\/uploads\/2025\/10\/88559687_88556378.jpg\" alt=\"Canary Wharf Smart Buildings\">\r\n                <figcaption><span class=\"chip\"><span class=\"ico\">\ud83d\udd06<\/span> PV<\/span> Pametne zgradbe<\/figcaption><span class=\"tt\"><\/span>\r\n            <\/figure>\r\n\r\n            <!-- ENVIRONMENT -->\r\n            <figure class=\"g\" data-cat=\"environment\" data-tip=\"NO\u2082\/PM senzorji \u2022 ULEZ monitoring\">\r\n                <img decoding=\"async\" src=\"https:\/\/web31251290.lab1.almamater.si\/wp-content\/uploads\/2025\/10\/AQM.jpg\" alt=\"ULEZ Camera\">\r\n                <figcaption><span class=\"chip\"><span class=\"ico\">\ud83c\udf2b\ufe0f<\/span> AQ<\/span> ULEZ kamera<\/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 z LED in senzorji gibanja\">\r\n                <img decoding=\"async\" src=\"https:\/\/web31251290.lab1.almamater.si\/wp-content\/uploads\/2025\/10\/City_of_London_EE_Freshwave_small_cell.webp\" alt=\"Smart Streetlight London\">\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 to\u010dke \u2022 Wi-Fi 6 \u2022 Info kioski\">\r\n                <img decoding=\"async\" src=\"https:\/\/web31251290.lab1.almamater.si\/wp-content\/uploads\/2025\/10\/Londons-smart-city-cybersecurity-challenges1.png\" alt=\"5G Kiosk London\">\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-uk\" class=\"section uk-map\">\r\n        <div class=\"container\">\r\n            <h2 class=\"sec-title\">Pametna infrastruktura \u2014 zemljevid<\/h2>\r\n            <p class=\"muted\">Demo: Podzemne postaje in IoT senzorji po Londonu.<\/p>\r\n        <\/div>\r\n        <div class=\"map-wrap\">\r\n            <div id=\"uk-map\"><\/div>\r\n            <div class=\"map-legend\">\r\n                <span class=\"dot metro\"><\/span> Underground\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-uk{--bg:#06080e;--bg2:#0b0f19;--txt:#eaf7ff;--muted:#a9cfe6;--acc:#0019a8;--acc2:#e10600;--glass:rgba(10,14,22,.55);font-family:Poppins,system-ui,sans-serif;color:var(--txt);}\r\n    .smart-uk .section{padding:72px 0;background:linear-gradient(180deg,var(--bg),var(--bg2));overflow:hidden;}\r\n    .smart-uk .container{width:min(1200px,92%);margin:auto;}\r\n    .smart-uk .sec-title{font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-bottom:14px;font-size:clamp(24px,3vw,36px);color:#69c3ff;text-shadow:0 0 18px rgba(0,25,168,.35)}\r\n    .smart-uk .muted{color:var(--muted)}\r\n\r\n    \/* KPI & Dashboard *\/\r\n    .smart-uk .kpi-row,.smart-uk .dash{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}\r\n    .smart-uk .kpi{background:rgba(255,255,255,.05);border:1px solid rgba(105,195,255,.3);border-radius:18px;padding:16px;text-align:center}\r\n    .smart-uk .kpi .n{font-size:clamp(28px,4vw,40px);font-weight:800;color:#69c3ff}\r\n    .smart-uk .kpi .l{opacity:.95}\r\n    .smart-uk .tile{background:rgba(255,255,255,.04);border:1px solid rgba(105,195,255,.3);border-radius:18px;padding:18px}\r\n    .smart-uk .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-uk .quick-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}\r\n    .smart-uk .q{padding:16px;border-radius:16px;border:1px solid rgba(105,195,255,.35);background:linear-gradient(180deg,rgba(105,195,255,.12),rgba(105,195,255,.05));text-decoration:none;color:var(--txt);transition:.2s}\r\n    .smart-uk .q strong{font-size:18px}\r\n    .smart-uk .q:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,25,168,.25)}\r\n\r\n    \/* Projects *\/\r\n    .smart-uk .proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}\r\n    .smart-uk .proj{padding:18px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(105,195,255,.3)}\r\n    .smart-uk .proj .tags span{display:inline-block;font-size:12px;margin:4px 6px 0 0;padding:5px 8px;border:1px solid rgba(105,195,255,.35);border-radius:999px}\r\n\r\n    \/* Gallery *\/\r\n    .smart-uk .filter-row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 16px}\r\n    .smart-uk .fbtn{padding:0 14px;height:36px;border-radius:999px;border:1px solid rgba(105,195,255,.3);background:rgba(105,195,255,.07);color:#e7fbff;font-weight:700;cursor:pointer;transition:.2s}\r\n    .smart-uk .fbtn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,25,168,.18)}\r\n    .smart-uk .fbtn.active{background:linear-gradient(180deg,rgba(0,25,168,.95),rgba(0,25,168,.6));color:#ffffff;border:0}\r\n    .smart-uk .gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:min(1200px,92%);margin:auto}\r\n    .smart-uk .g{position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(105,195,255,.3);box-shadow:0 10px 26px rgba(0,0,0,.35);background:rgba(255,255,255,.02)}\r\n    .smart-uk .g img{width:100%;height:240px;object-fit:cover;transition:transform .4s}\r\n    .smart-uk .g:hover img{transform:scale(1.04)}\r\n    .smart-uk .chip{position:absolute;left:10px;top:10px;padding:4px 8px;border-radius:999px;background:rgba(0,25,168,.25);font-size:11px;border:1px solid rgba(105,195,255,.35)}\r\n    .smart-uk .chip .ico{margin-right:6px;font-size:12px;filter:drop-shadow(0 0 6px rgba(0,25,168,.35))}\r\n    .smart-uk .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(105,195,255,.35)}\r\n    .smart-uk .tt{position:absolute;bottom:40px;right:10px;background:rgba(5,9,16,.8);border:1px solid rgba(105,195,255,.35);padding:8px 12px;border-radius:12px;font-size:12px;opacity:0;transition:.2s}\r\n    .smart-uk .g:hover .tt{opacity:1}\r\n\r\n    \/* Map *\/\r\n    .smart-uk .map-wrap{width:min(1200px,92%);margin:12px auto;position:relative}\r\n    #uk-map{height:520px;border-radius:18px;border:1px solid rgba(105,195,255,.3);box-shadow:0 14px 40px rgba(0,0,0,.35);overflow:hidden}\r\n    .smart-uk .map-legend{position:absolute;top:12px;right:12px;background:rgba(11,15,24,.7);backdrop-filter:blur(6px);border:1px solid rgba(105,195,255,.35);border-radius:12px;padding:8px 10px;color:#dffaff;font-size:12px;display:flex;align-items:center;gap:10px}\r\n    .smart-uk .map-legend .spacer{display:inline-block;width:10px}\r\n    .smart-uk .dot{width:10px;height:10px;border-radius:50%;display:inline-block;box-shadow:0 0 10px currentColor}\r\n    .smart-uk .dot.metro{background:#69c3ff;color:#69c3ff}\r\n    .smart-uk .dot.sensor{background:#e10600;color:#e10600}\r\n\r\n    \/* CTA *\/\r\n    .smart-uk .cta-box{background:linear-gradient(180deg,rgba(105,195,255,.08),rgba(105,195,255,.03));border:1px solid rgba(105,195,255,.35);border-radius:22px;padding:28px;text-align:center;box-shadow:0 14px 40px rgba(0,0,0,.35)}\r\n    .smart-uk .cta-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}\r\n    .smart-uk .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(105,195,255,.4);background:rgba(105,195,255,.1);color:var(--txt);transition:.2s}\r\n    .smart-uk .btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,25,168,.25)}\r\n    .smart-uk .btn-primary{background:linear-gradient(180deg,rgba(0,25,168,.95),rgba(0,25,168,.6));color:#ffffff;border-color:transparent}\r\n    .smart-uk .btn-ghost{background:transparent}\r\n\r\n    \/* Responsive *\/\r\n    @media (max-width:1024px){\r\n        .smart-uk .kpi-row{grid-template-columns:1fr 1fr}\r\n        .smart-uk .dash{grid-template-columns:1fr 1fr}\r\n        .smart-uk .quick-cards{grid-template-columns:1fr 1fr}\r\n        .smart-uk .proj-grid{grid-template-columns:1fr 1fr}\r\n        .smart-uk .gallery-grid{grid-template-columns:repeat(2,1fr)}\r\n    }\r\n    @media (max-width:640px){\r\n        .smart-uk .kpi-row,.smart-uk .dash,.smart-uk .quick-cards,.smart-uk .proj-grid{grid-template-columns:1fr}\r\n        .smart-uk .gallery-grid{grid-template-columns:1fr}\r\n        #uk-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 ukAnimateKPIs(){\r\n        document.querySelectorAll('.smart-uk .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 ukRand=(a,b)=>Math.round(a+Math.random()*(b-a));\r\n    function ukRefreshVals(){\r\n        document.querySelectorAll('.smart-uk .tile .val').forEach(el=>{\r\n            el.textContent=ukRand(+el.dataset.min,+el.dataset.max);\r\n        });\r\n    }\r\n    \/* Highlights: filter + tooltips *\/\r\n    function ukInitHighlights(){\r\n        const btns=document.querySelectorAll('.smart-uk .fbtn');\r\n        const cards=document.querySelectorAll('.smart-uk .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 (London demo) *\/\r\n    function initUkMap(){\r\n        const map=L.map('uk-map',{zoomControl:true,scrollWheelZoom:true}).setView([51.5074,-0.1278],12); \/\/ Central London\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:'#69c3ff',fillColor:'#69c3ff',fillOpacity:.9,weight:1};\r\n        const sensorStyle={radius:8,color:'#e10600',fillColor:'#e10600',fillOpacity:.9,weight:1};\r\n\r\n        const metro=[\r\n            {name:'King\u2019s Cross St Pancras',coords:[51.5308,-0.1238]},\r\n            {name:'Waterloo',coords:[51.5033,-0.1147]},\r\n            {name:'Oxford Circus',coords:[51.5154,-0.1419]},\r\n            {name:'Canary Wharf',coords:[51.5054,-0.0235]},\r\n            {name:'Stratford',coords:[51.5410,-0.0032]}\r\n        ];\r\n        const sensors=[\r\n            {name:'AQ \u2013 Camden',coords:[51.5416,-0.1432]},\r\n            {name:'Met \u2013 Heathrow',coords:[51.4700,-0.4543]},\r\n            {name:'Flood \u2013 Thames Barrier',coords:[51.4940,0.0350]},\r\n            {name:'Noise \u2013 Westminster',coords:[51.5010,-0.1416]}\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,{ 'Underground':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-uk .section').forEach(sec=>{sec.style.opacity=0;sec.style.transform='translateY(12px)';});\r\n    const ukIO=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';ukIO.unobserve(e.target);}})},{threshold:.12});\r\n    document.querySelectorAll('.smart-uk .section').forEach(s=>ukIO.observe(s));\r\n\r\n    \/* Init *\/\r\n    window.addEventListener('DOMContentLoaded',()=>{\r\n        ukAnimateKPIs();\r\n        ukRefreshVals(); setInterval(ukRefreshVals,4000);\r\n        ukInitHighlights();\r\n        initUkMap();\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 SMARTLONDON Where data, design and sustainability shape the modern metropolis. London leads in AI-driven transport, urban analytics and smart governance \u2014 connecting citizens through open data, 5G networks and a commitment to green innovation. Explore 0IoT senzorjev po mestu 0% to\u010dnost javnega prevoza 0km podzemnih linij 0% [&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-71","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/web31251290.lab1.almamater.si\/index.php\/wp-json\/wp\/v2\/pages\/71","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=71"}],"version-history":[{"count":22,"href":"https:\/\/web31251290.lab1.almamater.si\/index.php\/wp-json\/wp\/v2\/pages\/71\/revisions"}],"predecessor-version":[{"id":602,"href":"https:\/\/web31251290.lab1.almamater.si\/index.php\/wp-json\/wp\/v2\/pages\/71\/revisions\/602"}],"wp:attachment":[{"href":"https:\/\/web31251290.lab1.almamater.si\/index.php\/wp-json\/wp\/v2\/media?parent=71"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}