Trinegy Comm -THA

<style>
  @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Rajdhani:wght@400;600;700&display=swap');

  * { box-sizing: border-box; margin: 0; padding: 0; }

  .dash {
    font-family: 'Rajdhani', sans-serif;
    background: #0a0e1a;
    color: #e0e8ff;
    padding: 16px;
    border-radius: 12px;
    min-height: 600px;
    position: relative;
    overflow: hidden;
  }

  .dash::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 600px 300px at 50% 40%, rgba(0,120,255,0.06) 0%, transparent 70%),
      repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,0.02) 39px, rgba(255,255,255,0.02) 40px),
      repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,0.02) 39px, rgba(255,255,255,0.02) 40px);
    pointer-events: none;
  }

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0,150,255,0.2);
  }

  .header-title {
    font-size: 22px;
    font-weight: 700;
    color: #4db8ff;
    letter-spacing: 2px;
    text-transform: uppercase;
  }

  .header-sub {
    font-size: 13px;
    color: rgba(150,200,255,0.6);
    letter-spacing: 1px;
  }

  .live-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,255,100,0.1);
    border: 1px solid rgba(0,255,100,0.3);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 13px;
    color: #00ff88;
    font-weight: 600;
    letter-spacing: 1px;
  }

  .live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00ff88;
    animation: pulse-dot 1.2s ease-in-out infinite;
  }

  @keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.7); }
  }

  .stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
  }

  .stat-card {
    background: rgba(0,100,200,0.12);
    border: 1px solid rgba(0,150,255,0.2);
    border-radius: 10px;
    padding: 12px 14px;
    position: relative;
    overflow: hidden;
  }

  .stat-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #0080ff, #00e5ff);
    opacity: 0.7;
  }

  .stat-label {
    font-size: 11px;
    color: rgba(150,200,255,0.6);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 4px;
  }

  .stat-value {
    font-size: 26px;
    font-weight: 700;
    color: #4db8ff;
    line-height: 1;
    font-family: 'Share Tech Mono', monospace;
  }

  .stat-unit {
    font-size: 12px;
    color: rgba(100,180,255,0.6);
    margin-top: 2px;
  }

  .stat-card.green::after { background: linear-gradient(90deg, #00c853, #69ff47); }
  .stat-card.green .stat-value { color: #69ff47; }
  .stat-card.orange::after { background: linear-gradient(90deg, #ff6d00, #ffab40); }
  .stat-card.orange .stat-value { color: #ffab40; }
  .stat-card.cyan::after { background: linear-gradient(90deg, #00bcd4, #84ffff); }
  .stat-card.cyan .stat-value { color: #84ffff; }

  .main-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 12px;
  }

  .topo-panel {
    background: rgba(0,20,50,0.5);
    border: 1px solid rgba(0,150,255,0.15);
    border-radius: 10px;
    padding: 14px;
  }

  .panel-title {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(100,180,255,0.5);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .panel-title::before {
    content: '';
    width: 3px;
    height: 12px;
    background: #0080ff;
    border-radius: 2px;
  }

  .right-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .terminal {
    background: #020810;
    border: 1px solid rgba(0,150,255,0.2);
    border-radius: 10px;
    padding: 12px;
    flex: 1;
    min-height: 220px;
    overflow: hidden;
  }

  .terminal-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  .term-dot { width: 8px; height: 8px; border-radius: 50%; }

  .terminal-body {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    line-height: 1.7;
    height: 170px;
    overflow: hidden;
  }

  .term-line { display: block; animation: slideIn 0.3s ease; }

  @keyframes slideIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  .term-green  { color: #00e676; }
  .term-cyan   { color: #00e5ff; }
  .term-yellow { color: #ffeb3b; }
  .term-muted  { color: rgba(100,180,255,0.4); }
  .term-white  { color: #e0e8ff; }
  .term-orange { color: #ffab40; }

  .info-panel {
    background: rgba(0,20,50,0.5);
    border: 1px solid rgba(0,150,255,0.15);
    border-radius: 10px;
    padding: 14px;
  }

  .ue-list { display: flex; flex-direction: column; gap: 8px; }

  .ue-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0,100,200,0.1);
    border-radius: 8px;
    padding: 8px 12px;
    border: 1px solid rgba(0,150,255,0.12);
  }

  .ue-name  { font-size: 13px; font-weight: 600; color: #84c8ff; }
  .ue-imsi  { font-size: 10px; color: rgba(100,180,255,0.4); font-family: 'Share Tech Mono', monospace; margin-top: 1px; }

  .ue-status {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; color: #00e676; font-weight: 600;
  }

  .ue-dot {
    width: 6px; height: 6px; border-radius: 50%; background: #00e676;
    animation: pulse-dot 1.5s ease-in-out infinite;
  }

  .topo-svg { width: 100%; }

  @keyframes flowPkt { to { stroke-dashoffset: -300; } }
  @keyframes nodeGlow {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(0,120,255,0.4)); }
    50%       { filter: drop-shadow(0 0 12px rgba(0,180,255,0.8)); }
  }

  .flow-line { stroke-dasharray: 8 6; animation: flowPkt 1.8s linear infinite; }
  .node-glow { animation: nodeGlow 2s ease-in-out infinite; }
</style>

<div class="dash">
  <div class="header">
    <div>
      <div class="header-title">5G Private Network — Live Demo</div>
      <div class="header-sub">Open5GS + CU/DU Server + gNB + CPE · Real Internet Connectivity</div>
    </div>
    <div class="live-badge">
      <div class="live-dot"></div>
      LIVE
    </div>
  </div>

  <div class="stats-row">
    <div class="stat-card green">
      <div class="stat-label">UE Connected</div>
      <div class="stat-value" id="ue-count">3</div>
      <div class="stat-unit">user equipment</div>
    </div>
    <div class="stat-card cyan">
      <div class="stat-label">Ping to 8.8.8.8</div>
      <div class="stat-value" id="ping-val">18</div>
      <div class="stat-unit">ms via UE-Tunel</div>
    </div>
    <div class="stat-card orange">
      <div class="stat-label">Throughput</div>
      <div class="stat-value" id="tput-val">94</div>
      <div class="stat-unit">Mbps downlink</div>
    </div>
    <div class="stat-card">
      <div class="stat-label">PDU Sessions</div>
      <div class="stat-value">3</div>
      <div class="stat-unit">active sessions</div>
    </div>
  </div>

  <div class="main-grid">
    <div class="topo-panel">
      <div class="panel-title">Network Topology — Data Flow</div>
      <svg class="topo-svg" viewBox="0 0 580 220" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <marker id="arr" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
            <path d="M2 2L8 5L2 8" fill="none" stroke="context-stroke" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          </marker>
        </defs>

        <line class="flow-line" x1="82" y1="110" x2="155" y2="110" stroke="#0080ff" stroke-width="2" opacity="0.8"/>
        <line class="flow-line" x1="228" y1="110" x2="295" y2="110" stroke="#00b8ff" stroke-width="2" opacity="0.8" style="animation-delay:-0.6s"/>
        <line class="flow-line" x1="368" y1="110" x2="450" y2="110" stroke="#00e5ff" stroke-width="2" opacity="0.8" style="animation-delay:-1.2s"/>

        <text x="118" y="100" text-anchor="middle" font-size="9" fill="rgba(150,200,255,0.5)" font-family="Share Tech Mono">NR-Uu</text>
        <text x="262" y="100" text-anchor="middle" font-size="9" fill="rgba(150,200,255,0.5)" font-family="Share Tech Mono">N2/N3</text>
        <text x="410" y="100" text-anchor="middle" font-size="9" fill="rgba(150,200,255,0.5)" font-family="Share Tech Mono">N6</text>

        <g class="node-glow">
          <rect x="14" y="75" width="68" height="70" rx="10" fill="rgba(0,80,160,0.35)" stroke="#0080ff" stroke-width="1.5"/>
          <text x="48" y="97" text-anchor="middle" font-size="24" fill="#4db8ff">📱</text>
          <text x="48" y="118" text-anchor="middle" font-size="11" fill="#84c8ff" font-family="Rajdhani" font-weight="700">UE</text>
          <text x="48" y="132" text-anchor="middle" font-size="9" fill="rgba(100,180,255,0.5)" font-family="Share Tech Mono">CPE</text>
        </g>

        <rect x="155" y="70" width="73" height="80" rx="10" fill="rgba(0,60,140,0.35)" stroke="#0066cc" stroke-width="1.5"/>
        <text x="191" y="97" text-anchor="middle" font-size="22" fill="#4db8ff">🗼</text>
        <text x="191" y="118" text-anchor="middle" font-size="11" fill="#84c8ff" font-family="Rajdhani" font-weight="700">gNB</text>
        <text x="191" y="131" text-anchor="middle" font-size="9" fill="rgba(100,180,255,0.5)" font-family="Share Tech Mono"></text>
        <text x="191" y="143" text-anchor="middle" font-size="9" fill="rgba(100,180,255,0.4)" font-family="Share Tech Mono">CU/DU Server</text>

        <rect x="295" y="52" width="73" height="116" rx="10" fill="rgba(0,40,120,0.4)" stroke="#0055bb" stroke-width="1.5"/>
        <text x="331" y="76" text-anchor="middle" font-size="18" fill="#4db8ff">🖥</text>
        <text x="331" y="97" text-anchor="middle" font-size="11" fill="#84c8ff" font-family="Rajdhani" font-weight="700">5G Core</text>
        <rect x="305" y="103" width="52" height="14" rx="3" fill="rgba(0,100,255,0.2)"/>
        <text x="331" y="113" text-anchor="middle" font-size="8" fill="rgba(100,200,255,0.7)" font-family="Share Tech Mono">AMF·SMF</text>
        <rect x="305" y="120" width="52" height="14" rx="3" fill="rgba(0,100,255,0.2)"/>
        <text x="331" y="130" text-anchor="middle" font-size="8" fill="rgba(100,200,255,0.7)" font-family="Share Tech Mono">UPF·UDM</text>
        <rect x="305" y="137" width="52" height="14" rx="3" fill="rgba(0,100,255,0.2)"/>
        <text x="331" y="147" text-anchor="middle" font-size="8" fill="rgba(100,200,255,0.7)" font-family="Share Tech Mono">NRF·PCF</text>
        <text x="331" y="162" text-anchor="middle" font-size="9" fill="rgba(100,180,255,0.4)" font-family="Share Tech Mono">Server</text>

        <g style="filter:drop-shadow(0 0 8px rgba(0,230,118,0.5))">
          <rect x="450" y="72" width="110" height="76" rx="10" fill="rgba(0,100,40,0.3)" stroke="#00c853" stroke-width="1.5"/>
          <text x="505" y="97" text-anchor="middle" font-size="22" fill="#69ff47">🌐</text>
          <text x="505" y="118" text-anchor="middle" font-size="11" fill="#a5d6a7" font-family="Rajdhani" font-weight="700">Internet</text>
          <text x="505" y="131" text-anchor="middle" font-size="9" fill="rgba(100,200,100,0.5)" font-family="Share Tech Mono">8.8.8.8 reachable</text>
        </g>

        <text x="290" y="200" text-anchor="middle" font-size="10" fill="rgba(100,180,255,0.4)" font-family="Share Tech Mono">UE-Tunel → 10.45.0.2 → UPF (N6) → Internet</text>
      </svg>
    </div>

    <div class="right-col">
      <div class="terminal">
        <div class="terminal-header">
          <div class="term-dot" style="background:#ff5f57"></div>
          <div class="term-dot" style="background:#febc2e"></div>
          <div class="term-dot" style="background:#28c840"></div>
          <span style="font-size:11px;color:rgba(150,200,255,0.4);margin-left:8px;font-family:'Share Tech Mono',monospace">Ue-Tunel · live</span>
        </div>
        <div class="terminal-body" id="terminal-body"></div>
      </div>

      <div class="info-panel">
        <div class="panel-title">Connected UE Devices</div>
        <div class="ue-list">
          <div class="ue-item">
            <div>
              <div class="ue-name">UE-001 (Test Device)</div>
              <div class="ue-imsi">208930000000001</div>
            </div>
            <div class="ue-status"><div class="ue-dot"></div>CONNECTED</div>
          </div>
          <div class="ue-item">
            <div>
              <div class="ue-name">UE-002 (Demo Unit)</div>
              <div class="ue-imsi">208930000000002</div>
            </div>
            <div class="ue-status"><div class="ue-dot"></div>CONNECTED</div>
          </div>
          <div class="ue-item">
            <div>
              <div class="ue-name">UE-003 (Exhibit)</div>
              <div class="ue-imsi">208930000000003</div>
            </div>
            <div class="ue-status"><div class="ue-dot"></div>CONNECTED</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
const termEl = document.getElementById('terminal-body');
const lines = [
  ['cyan',  '$ ping -I uetunel 8.8.8.8'],
  ['muted', '--- ping statistics ---'],
  ['green', 'PING 8.8.8.8: 64 bytes, icmp_seq=1 ttl=118 time=18.4 ms'],
  ['green', 'PING 8.8.8.8: 64 bytes, icmp_seq=2 ttl=118 time=17.9 ms'],
  ['green', 'PING 8.8.8.8: 64 bytes, icmp_seq=3 ttl=118 time=19.1 ms'],
  ['muted', ''],
  ['cyan',  '$ curl --interface uetunel ipinfo.io/ip'],
  ['yellow','49.228.XX.XX  (via 5G Private Network UPF)'],
  ['muted', ''],
  ['cyan',  '$ ip -s link show uesimtun0'],
  ['white', 'uesimtun0: <POINTOPOINT,UP>'],
  ['white', '  RX: 12,847,392 bytes  TX: 4,291,048 bytes'],
  ['muted', ''],
  ['cyan',  '$ speedtest --interface ue-tunel'],
  ['orange','Download: 94.2 Mbps  ↓'],
  ['orange','Upload:   38.7 Mbps  ↑'],
];

let li = 0;
function addLine() {
  if (!lines[li]) { li = 0; termEl.innerHTML = ''; }
  const [cls, txt] = lines[li++];
  const s = document.createElement('span');
  s.className = 'term-line term-' + cls;
  s.textContent = txt || '\u00a0';
  termEl.appendChild(s);
  while (termEl.children.length > 12) termEl.removeChild(termEl.firstChild);
}

for (let i = 0; i < 8; i++) addLine();
setInterval(addLine, 1400);

setInterval(() => {
  document.getElementById('ping-val').textContent = 16 + Math.floor(Math.random() * 8);
  document.getElementById('tput-val').textContent = 88 + Math.floor(Math.random() * 12);
}, 2000);
</script>