1. <script lang="ts">
  2.   import { onMount } from 'svelte';
  3.   import { tick } from 'svelte';
  4.  
  5.   interface Destination { destination: string; destination_hexid: string; }
  6.   interface RouteItem {
  7.     route_number: string | number;
  8.     pickup_point: { pickup_point: string; pickup_hexid: string };
  9.     destinations: Destination[];
  10.   }
  11.  
  12.   let routes: RouteItem[] = [];
  13.   let scored: any[] = [];
  14.   let isLoading = true;
  15.   let error: string | null = null;
  16.  
  17.   const TOKENS = {
  18.     accent: '#00f2ff',
  19.     accentGlobal: '#0ff'
  20.   };
  21.  
  22.   function getTimeState() {
  23.     const hour = new Date().getHours();
  24.     if (hour >= 6 && hour <= 9 || hour >= 16 && hour <= 20) return 'peak';
  25.     if (hour >= 10 && hour <= 15) return 'mid';
  26.     return 'off';
  27.   }
  28.  
  29.   async function fetchRoutes() {
  30.     try {
  31.       const res = await fetch('https://raw.githubusercontent.com/sxcntqnt/sxcntqnt.github.io/refs/heads/main/json/YesBana.json');
  32.       const json = await res.json();
  33.       routes = json.non_null_objects || json;
  34.     } catch (e) {
  35.       error = 'Network Sync Failed';
  36.     } finally {
  37.       isLoading = false;
  38.     }
  39.   }
  40.  
  41.   function routeScore(num: string | number): number {
  42.     const n = parseInt(String(num).replace(/\D/g, '') || '7', 10);
  43.     return parseFloat((0.6 + ((n * 17 + 13) % 37) / 100).toFixed(2));
  44.   }
  45.  
  46.   function bayesScore(route: RouteItem, alpha = 2, beta = 2) {
  47.     const prior = routeScore(route.route_number);
  48.     const timeFactor = getTimeState() === 'peak' ? 1.2 : 0.8;
  49.     const loadFactor = (route.destinations?.length || 1) / 10;
  50.     const posterior = (alpha + prior * timeFactor) / (alpha + beta + loadFactor);
  51.     return Math.min(Math.max(posterior, 0), 1);
  52.   }
  53.  
  54.   function classify(s: number) {
  55.     if (s >= 0.85) return 'great';
  56.     if (s >= 0.72) return 'good';
  57.     if (s >= 0.58) return 'warn';
  58.     return 'low';
  59.   }
  60.  
  61.   function label(cls: string) {
  62.     return cls === 'great' ? 'Optimal' : cls === 'good' ? 'Stable' : cls === 'warn' ? 'Moderate' : 'Congested';
  63.   }
  64.  
  65.   function getGradient(cls: string, posterior: number) {
  66.     const base = cls === 'great' ? '#0ff' : cls === 'good' ? '#0f0' : cls === 'warn' ? '#ff0' : '#f00';
  67.     const secondary = cls === 'great' ? '#00cfff' : cls === 'good' ? '#00aa00' : cls === 'warn' ? '#ffaa00' : '#ff3300';
  68.     const intensity = Math.floor(posterior * 100);
  69.     return `linear-gradient(90deg, ${base} ${intensity}%, ${secondary} 100%)`;
  70.   }
  71.  
  72.   function updateScores() {
  73.     scored = routes.map(r => {
  74.     let posterior = bayesScore(r) + (Math.random() - 0.5) * 0.05; // small fluctuation
  75.  
  76.     // exaggerate some routes randomly for visual drama
  77.     if (Math.random() < 0.2) posterior *= 1.2;
  78.  
  79.     posterior = Math.min(Math.max(posterior, 0), 1);
  80.  
  81.     const cls = classify(posterior);
  82.     return { ...r, posterior, cls, label: label(cls), accent: TOKENS.accent };
  83.   });
  84.   }
  85.  
  86.   onMount(async () => {
  87.     await fetchRoutes();
  88.     updateScores();
  89.     const interval = setInterval(() => updateScores(), 2000); // dynamic updates
  90.     return () => clearInterval(interval);
  91.   });
  92. </script>
  93.  
  94. <div class="os">
  95.   <header class="header">
  96.     <div class="brand">
  97.       <div class="pulse" style="background:{TOKENS.accentGlobal}; box-shadow:0 0 10px {TOKENS.accentGlobal};"></div>
  98.       <h1>TRANSIT OS DASHBOARD</h1>
  99.     </div>
  100.     <div class="iq">
  101.       <svg viewBox="0 0 36 36">
  102.         <circle cx="18" cy="18" r="15.9155" fill="none" stroke="#222" stroke-width="2.5"/>
  103.         <circle cx="18" cy="18" r="15.9155" fill="none" stroke="{TOKENS.accentGlobal}" stroke-width="2.5"
  104.           stroke-dasharray="{scored.length ? scored.reduce((a,r)=>a.posterior + a,0)/scored.length*100 : 0},100"
  105.           stroke-linecap="round"/>
  106.       </svg>
  107.       <span>{scored.length ? ((scored.reduce((a,r)=>a.posterior+a,0)/scored.length)*100).toFixed(1) : '0.0'}</span>
  108.     </div>
  109.   </header>
  110.  
  111.   <div class="viewport">
  112.     {#if isLoading}
  113.       <div class="loader">
  114.         <div class="scan" style="background:{TOKENS.accentGlobal}; box-shadow:0 0 10px {TOKENS.accentGlobal};"></div>
  115.         <p>LOADING ROUTE DATA...</p>
  116.       </div>
  117.     {:else if error}
  118.       <p>{error}</p>
  119.     {:else}
  120.       {#each scored as r (r.route_number)}
  121.         <div class="card" style="--accent:{r.accent}">
  122.           <div>
  123.             <div class="route">{r.route_number}</div>
  124.             <div class="nodes">{r.destinations?.length || 0} NODES</div>
  125.           </div>
  126.           <div class="mid">
  127.             <div class="origin">{r.pickup_point?.pickup_point || 'TERMINUS'}</div>
  128.             <div class="bar">
  129.               <div class="fill" style="width:{r.posterior*100}%; background:{getGradient(r.cls,r.posterior)};"></div>
  130.             </div>
  131.           </div>
  132.           <div class="right">
  133.             <div class="tag">{r.label}</div>
  134.             <div class="pct">{(r.posterior*100).toFixed(0)}%</div>
  135.           </div>
  136.         </div>
  137.       {/each}
  138.     {/if}
  139.   </div>
  140.  
  141.   <footer class="footer">
  142.     AUTHENTICATED ACCESS: DYNAMIC BAYES v2.0
  143.   </footer>
  144. </div>
  145.  
  146. <style>
  147.   .os {
  148.     --bg: #050505;
  149.     --glass: rgba(255,255,255,0.05);
  150.     --border: rgba(255,255,255,0.08);
  151.     height: 100%;
  152.     display: flex;
  153.     flex-direction: column;
  154.     background: radial-gradient(circle at top, #111, #050505);
  155.     color: white;
  156.     font-family: 'JetBrains Mono', monospace;
  157.   }
  158.   .header {
  159.     display: flex;
  160.     justify-content: space-between;
  161.     padding: 20px;
  162.     backdrop-filter: blur(12px);
  163.     background: var(--glass);
  164.     border-bottom: 1px solid var(--border);
  165.   }
  166.   .brand { display: flex; gap: 10px; align-items: center; }
  167.   .brand h1 { font-size: 0.9rem; letter-spacing: 0.2em; color: var(--accent-global); }
  168.   .pulse { width: 8px; height: 8px; background: var(--accent-global); border-radius: 50%; box-shadow: 0 0 10px var(--accent-global); animation: pulse 1.5s infinite; }
  169.   @keyframes pulse { 50% { transform: scale(1.5); opacity: 0.5; } }
  170.   .iq { width: 50px; position: relative; }
  171.   .iq svg { transform: rotate(-90deg); }
  172.   .iq span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; }
  173.   .viewport { flex: 1; overflow: auto; padding: 20px; }
  174.   .card { display: flex; gap: 16px; padding: 14px; margin-bottom: 10px; backdrop-filter: blur(14px); background: var(--glass); border: 1px solid var(--border); border-radius: 10px; position: relative; overflow: hidden; transition: 0.3s; }
  175.   .card::before { content: ""; position: absolute; inset: 0; border-radius: 10px; background: linear-gradient(120deg, transparent, var(--accent), transparent); opacity: 0.4; }
  176.   .card:hover { transform: translateY(-3px); box-shadow: 0 0 20px var(--accent); }
  177.   .route { font-weight: 900; font-size: 1.1rem; }
  178.   .nodes { font-size: 0.6rem; color: #666; }
  179.   .mid { flex: 1; }
  180.   .origin { font-size: 0.7rem; color: #aaa; margin-bottom: 6px; }
  181.   .bar { height: 4px; background: #222; border-radius: 2px; overflow: hidden; }
  182. 	.fill {
  183.     height: 100%;
  184.     position: relative;
  185.     overflow: hidden;
  186.     background-size: 200% 100%;
  187.     animation: flow 3s linear infinite;
  188.     border-radius: 2px;
  189.     transition: width 0.8s ease-in-out; /* Smooth progressive bar */
  190.   }
  191.   .fill::after { content:""; position:absolute; inset:0; background: linear-gradient(120deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 80%); animation: sweep 2s linear infinite; }
  192.   @keyframes flow { 0% { background-position:0 0; } 100% { background-position:200% 0; } }
  193.   @keyframes sweep { 0% { transform:translateX(-100%);} 100% { transform:translateX(100%);} }
  194.   .card:hover .fill { filter: brightness(1.4) saturate(1.2); }
  195.   .right { text-align: right; }
  196.   .tag { font-size: 0.6rem; background: rgba(255,255,255,0.06); padding: 2px 6px; border-radius: 6px; }
  197.   .pct { font-size: 1rem; font-weight: 900; }
  198.   .loader { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  199.   .scan { width: 100px; height: 2px; background: var(--accent-global); box-shadow: 0 0 10px var(--accent-global); animation: scan 2s infinite; }
  200.   @keyframes scan { 50% { transform: translateY(20px); opacity: 1; } 0%,100% { transform: translateY(-20px); opacity: 0; } }
  201.   .footer { padding: 10px 20px; font-size: 0.55rem; color: #555; border-top: 1px solid #111; }
  202. </style>