MSE AMS/ADS Visual Lab

by velo_ninja

HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Ultimate 3D AMS/ADS Ring Lab + Interactive FAQ</title>
<style>
  :root {
    --bg: #04070d;
    --glass: rgba(8, 16, 26, 0.72);
    --line: rgba(125, 195, 255, 0.18);
    --text: #eef8ff;
    --muted: #9db2c4;
    --cyan: #59dcff;
    --green: #5be595;
    --red: #ff6b75;
    --yellow: #ffd45a;
    --purple: #b78cff;
    --orange: #ff9d5c;
  }

  * { box-sizing: border-box; }

  html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: "Segoe UI", Arial, sans-serif;
  }

  #scene {
    position: fixed;
    inset: 0;
  }

  #vignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 35%, transparent 48%, rgba(0,0,0,0.42) 100%);
    mix-blend-mode: multiply;
    z-index: 2;
  }

  .panel {
    position: fixed;
    z-index: 10;
    background: var(--glass);
    border: 1px solid var(--line);
    border-radius: 18px;
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 60px rgba(0,0,0,0.35);
  }

  #topbar {
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    max-width: calc(100vw - 24px);
    flex-wrap: wrap;
    justify-content: center;
  }

  #topbar .title {
    font-weight: 1000;
    margin-right: 6px;
  }

  #controls {
    top: 76px;
    left: 14px;
    width: 340px;
    padding: 14px;
    z-index: 12;
  }

  #hud {
    top: 76px;
    right: 14px;
    width: 380px;
    padding: 16px;
    z-index: 12;
  }

  #legend {
    left: 14px;
    bottom: 14px;
    padding: 12px 14px;
    max-width: 360px;
    z-index: 12;
  }

  #faqSection {
    display: none;
 ...