diff --git a/public/index.html b/public/index.html index 5933f8d..fa07b1b 100644 --- a/public/index.html +++ b/public/index.html @@ -130,6 +130,126 @@ a{color:var(--blue);text-decoration:none;transition:color .2s}a:hover{color:var( .section-loading{text-align:center;padding:1rem;color:var(--muted);font-size:.8rem} .section-loading::before{content:'';display:inline-block;width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--purple);border-radius:50%;animation:spin .8s linear infinite;margin-right:.5rem;vertical-align:middle} @keyframes spin{to{transform:rotate(360deg)}} + +/* ASPA Deep Analysis */ +.aspa-gauge{position:relative;width:140px;height:140px;margin:0 auto .5rem} +.aspa-gauge svg{width:100%;height:100%;transform:rotate(-90deg)} +.aspa-gauge-bg{fill:none;stroke:var(--border);stroke-width:10} +.aspa-gauge-fill{fill:none;stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset .8s ease,stroke .3s} +.aspa-gauge-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center} +.aspa-gauge-score{font-size:2.2rem;font-weight:800;line-height:1} +.aspa-gauge-label{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em} +.aspa-breakdown{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:1rem 0} +.aspa-breakdown-item{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:.75rem} +.aspa-breakdown-label{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.25rem} +.aspa-breakdown-score{font-size:1.2rem;font-weight:700} +.aspa-breakdown-bar{height:4px;background:var(--border);border-radius:2px;margin-top:.35rem;overflow:hidden} +.aspa-breakdown-bar>div{height:100%;border-radius:2px;transition:width .5s ease} +.valley-alert{background:rgba(247,118,142,.1);border:1px solid rgba(247,118,142,.3);border-radius:8px;padding:.75rem;margin:.5rem 0;font-size:.8rem;color:var(--red)} +.asset-alert{background:rgba(255,158,100,.1);border:1px solid rgba(255,158,100,.3);border-radius:8px;padding:.75rem;margin:.5rem 0;font-size:.8rem;color:var(--orange)} +.path-result-badge{display:inline-block;padding:.15rem .5rem;border-radius:4px;font-size:.7rem;font-weight:600} +.path-valid{background:rgba(158,206,106,.15);color:var(--green)} +.path-invalid{background:rgba(247,118,142,.15);color:var(--red)} +.path-unknown{background:rgba(86,95,137,.2);color:var(--muted)} +.hop-detail{font-size:.7rem;color:var(--text-dim);margin-top:.3rem} +.hop-arrow{color:var(--dim);margin:0 .15rem} +.hop-pp{color:var(--green)}.hop-npp{color:var(--red)}.hop-na{color:var(--muted)} +.audit-row{display:flex;align-items:center;gap:.5rem;padding:.35rem 0;border-bottom:1px solid rgba(42,43,61,.3);font-size:.8rem} +.audit-missing{color:var(--orange)}.audit-extra{color:var(--cyan)}.audit-ok{color:var(--green)} +.ix-traffic-stats{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.75rem;padding:.75rem;background:var(--bg);border:1px solid var(--border);border-radius:8px} +.ix-traffic-stat{text-align:center} +.ix-traffic-val{font-size:1.1rem;font-weight:700;color:var(--cyan)} +.ix-traffic-label{font-size:.65rem;color:var(--muted);text-transform:uppercase} +.whois-grid{display:grid;grid-template-columns:140px 1fr;gap:.3rem .75rem;font-size:.8rem} +.whois-key{color:var(--muted);font-weight:600;text-align:right} +.whois-val{color:var(--text-dim);word-break:break-all} + + +/* Search history badges */ +.history-badge{display:inline-block;padding:.25rem .6rem;border-radius:6px;font-size:.75rem;font-weight:500;background:var(--card);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;transition:all .2s} +.history-badge:hover{border-color:var(--purple);color:var(--purple)} +.history-clear{font-size:.7rem;color:var(--dim);cursor:pointer;padding:.25rem .5rem} +.history-clear:hover{color:var(--red)} + +/* Prefix detail modal */ +.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:1000;display:flex;align-items:center;justify-content:center} +.modal-content{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1.5rem;max-width:600px;width:90%;max-height:80vh;overflow-y:auto;position:relative} +.modal-close{position:absolute;top:1rem;right:1rem;background:none;border:none;color:var(--muted);font-size:1.2rem;cursor:pointer;padding:.3rem} +.modal-close:hover{color:var(--red)} +.modal-title{font-size:1rem;font-weight:700;color:var(--purple);margin-bottom:1rem} + +/* Clickable prefix */ +.prefix-link{color:var(--cyan);cursor:pointer;font-family:monospace;font-size:.8rem} +.prefix-link:hover{text-decoration:underline;color:var(--blue)} + +/* Clickable IX */ +.ix-link{color:var(--green);cursor:pointer} +.ix-link:hover{text-decoration:underline;color:var(--cyan)} + +/* Provider graph */ +.provider-graph{width:100%;max-width:600px;margin:0 auto} +.provider-graph svg{width:100%;height:auto} + +/* Compare full panel */ +.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem} +.compare-col{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:1rem} +.compare-col-title{font-size:.85rem;font-weight:600;margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem} +.compare-metric{display:flex;justify-content:space-between;padding:.4rem 0;border-bottom:1px solid rgba(42,43,61,.3);font-size:.8rem} +.compare-metric-label{color:var(--muted)} +.compare-metric-val{font-weight:600} +.compare-venn{text-align:center;margin:1rem 0} + +/* Network Health Report */ +.health-gauge{position:relative;width:160px;height:160px;margin:0 auto .5rem} +.health-gauge svg{width:100%;height:100%;transform:rotate(-90deg)} +.health-gauge-bg{fill:none;stroke:var(--border);stroke-width:12} +.health-gauge-fill{fill:none;stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset .8s ease,stroke .3s} +.health-gauge-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center} +.health-gauge-score{font-size:2.8rem;font-weight:800;line-height:1} +.health-gauge-label{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em} +.health-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.5rem;margin:1rem 0} +.health-check-item{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--bg);border:1px solid var(--border);border-radius:8px;font-size:.8rem;transition:border-color .2s} +.health-check-item:hover{border-color:var(--border-light)} +.health-check-icon{font-size:1rem;flex-shrink:0} +.health-check-name{flex:1;color:var(--text-dim)} +.health-check-score{font-size:.75rem;font-weight:600;min-width:2rem;text-align:right} + +.health-check-item{position:relative;cursor:pointer} +.health-tooltip{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#1a1b26;border:1px solid #3b3d56;border-radius:8px;padding:12px 16px;min-width:300px;max-width:400px;z-index:1000;box-shadow:0 4px 20px rgba(0,0,0,0.5);font-size:13px;line-height:1.6;color:#a9b1d6;pointer-events:none} +.health-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#3b3d56} +.health-tooltip .tt-section{margin-bottom:6px} +.health-tooltip .tt-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#565f89;font-weight:600} +.health-tooltip .tt-value{color:#c0caf5} +.health-tooltip .tt-fix{color:#ff9e64;font-style:italic} +.health-check-item:hover .health-tooltip{display:block} + +.show-more-btn{font-size:.8rem;color:var(--blue);cursor:pointer;padding:.5rem 0;margin-top:.25rem;transition:color .2s;user-select:none} +.show-more-btn:hover{color:var(--cyan);text-decoration:underline} +.sort-toggle{font-size:.7rem;color:var(--muted);cursor:pointer;padding:.2rem .5rem;border:1px solid var(--border);border-radius:4px;transition:all .2s;user-select:none} +.sort-toggle:hover{color:var(--blue);border-color:var(--blue)} + +/* Routing Overview - Propagation Bars */ +.routing-stats-row{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem} +.routing-stat-card{flex:1;min-width:100px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:.875rem 1rem;text-align:center} +.routing-stat-val{font-size:1.6rem;font-weight:700;line-height:1.2} +.routing-stat-label{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:.25rem} +.prop-section{margin-bottom:1rem} +.prop-label{font-size:.8rem;font-weight:600;color:var(--text-dim);margin-bottom:.4rem} +.prop-bar-wrap{display:flex;align-items:center;gap:.75rem} +.prop-bar{flex:1;height:12px;border-radius:6px;background:#1e2030;overflow:hidden} +.prop-fill{height:100%;border-radius:6px;transition:width 1.2s cubic-bezier(.4,0,.2,1);width:0} +.prop-fill.green{background:linear-gradient(90deg,#9ece6a,#73daca)} +.prop-fill.orange{background:linear-gradient(90deg,#e0af68,#ff9e64)} +.prop-fill.red{background:linear-gradient(90deg,#f7768e,#db4b4b)} +.prop-pct{font-size:.9rem;font-weight:700;min-width:50px;text-align:right} +.prop-detail{font-size:.7rem;color:var(--muted);margin-top:.2rem} +.prefix-dist{margin-top:1rem} +.prefix-dist-label{font-size:.8rem;font-weight:600;color:var(--text-dim);margin-bottom:.5rem} +.prefix-badges{display:flex;flex-wrap:wrap;gap:.4rem} +.prefix-badge{font-size:.7rem;padding:.2rem .5rem;border-radius:4px;background:var(--bg);border:1px solid var(--border);color:var(--text-dim);font-family:'Inter',monospace} +.routing-footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem;margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--border)} +.routing-footer-left{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--text-dim)} +
@@ -147,7 +267,7 @@ a{color:var(--blue);text-decoration:none;transition:color .2s}a:hover{color:var(