Spaces:
Runtime error
Runtime error
File size: 7,458 Bytes
ccba775 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>CHARM • Graphics</title>
<link rel="icon" href="/favicon.svg" type="image/svg+xml"/>
<style>
*{margin:0;padding:0;box-sizing:border-box}
:root{
--bg:#000; --fg:#fff; --muted:rgba(255,255,255,.62);
--card:rgba(255,255,255,.04); --stroke:rgba(255,255,255,.10); --glass:rgba(0,0,0,.38);
}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--fg);overflow-x:hidden}
#quantumField{position:fixed;inset:0;width:100vw;height:100vh;z-index:-10;background:#000}
nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:14px 24px;background:var(--glass);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:16px}
.brand{font-weight:700;font-size:1.1rem}
.nav-links{display:flex;gap:10px;margin-left:18px}
.nav-links a{text-decoration:none;color:var(--fg);padding:8px 12px;border:1px solid rgba(255,255,255,.12);border-radius:999px;font-size:.9rem;opacity:.86;transition:.15s ease;white-space:nowrap}
.nav-links a:hover{opacity:1;background:rgba(255,255,255,.06)}
.spacer{flex:1}
.menu-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.18);border-radius:12px;cursor:pointer;background:rgba(255,255,255,.02)}
.menu-btn span{display:block;width:18px;height:2px;background:#fff;position:relative}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:#fff}
.menu-btn span::before{top:-6px} .menu-btn span::after{top:6px}
.menu{position:absolute;top:60px;right:24px;min-width:220px;padding:10px;border-radius:14px;background:var(--glass);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.10);box-shadow:0 0 30px rgba(0,0,0,.6);display:none}
.menu.open{display:block}
.menu a{display:block;padding:10px 10px;border-radius:10px;text-decoration:none;color:var(--fg);opacity:.9}
.menu a:hover{background:rgba(255,255,255,.06);opacity:1}
.menu .sep{height:1px;background:rgba(255,255,255,.10);margin:8px 2px}
.wrap{max-width:1100px;margin:0 auto;padding:110px 6vw 70px}
.h{font-size:1.35rem;font-weight:650}
.sub{color:var(--muted);margin-top:10px;line-height:1.6;max-width:980px}
.viewer{margin-top:20px;display:grid;gap:14px;justify-items:center}
img{width:100%;max-width:1000px;max-height:70vh;object-fit:contain;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.10)}
.controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.btn{text-decoration:none;color:var(--fg);padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);opacity:.92;transition:.15s ease}
.btn:hover{opacity:1;background:rgba(255,255,255,.07)}
.kbd{font-family:ui-monospace,Menlo,Consolas,monospace;background:#15151b;border:1px solid #2a2a33;border-radius:6px;padding:2px 6px;font-size:.85em;color:var(--muted)}
.cap{color:var(--muted);max-width:980px;line-height:1.6;text-align:center}
.rule{border:0;border-top:1px solid rgba(255,255,255,.10);margin:22px 0}
</style>
</head>
<body>
<canvas id="quantumField"></canvas>
<nav>
<div class="nav-inner">
<div class="brand">TwoQuarks</div>
<div class="nav-links">
<a href="../../../index.html#down">DOWN</a>
<a href="../../../index.html#strange">STRANGE</a>
<a href="../../../index.html#top">TOP</a>
<a href="../../../index.html#charm">CHARM</a>
<a href="../../../index.html#up">UP</a>
<a href="../../../index.html#bottom">BOTTOM</a>
</div>
<div class="spacer"></div>
<div class="menu-btn" id="menuBtn"><span></span></div>
<div class="menu" id="siteMenu">
<a href="../../../index.html#about">ABOUT</a>
<a href="../../../quarkslab.html">QuarksLab</a>
<div class="sep"></div>
<a href="../../../quarks/bottom/resume.pdf">Resume</a>
<a href="../../../summary.pdf">Summary</a>
</div>
</div>
</nav>
<div class="wrap">
<div class="h">CHARM · Visual Diagnostics</div>
<div class="sub">These figures show robustness to heavy noise, keeping exploration controlled and policies coherent.</div>
<div class="viewer">
<img id="img" src="../anticharm/graphics/figure_01.png" alt="figure"/>
<div class="controls">
<a class="btn" href="javascript:void(0)" onclick="prev()">← Previous</a>
<a class="btn" href="javascript:void(0)" onclick="next()">Next →</a>
<span class="kbd">←</span><span class="kbd">→</span>
</div>
<div class="cap" id="cap">Figure 01</div>
</div>
<hr class="rule"/>
<div class="sub"><strong>Interpretation</strong><br/>These figures show robustness to heavy noise, keeping exploration controlled and policies coherent.</div>
</div>
<script>
const canvas = document.getElementById('quantumField');
const ctx = canvas.getContext('2d');
function resize(){
canvas.width = innerWidth;
canvas.height = innerHeight;
}
resize();
addEventListener('resize', resize);
const stars = Array.from({length: 650}, () => ({
x: (Math.random()-0.5) * canvas.width,
y: (Math.random()-0.5) * canvas.height,
z: Math.random() * canvas.width
}));
function animate(){
ctx.clearRect(0,0,canvas.width,canvas.height);
for(const s of stars){
s.z -= 2.2;
if (s.z < 1){
s.x = (Math.random()-0.7) * canvas.width;
s.y = (Math.random()-0.7) * canvas.height;
s.z = canvas.width;
}
const k = 128 / s.z;
const x = s.x * k + canvas.width/2;
const y = s.y * k + canvas.height/2;
const r = (1 - s.z/canvas.width) * 1.2;
ctx.beginPath();
ctx.fillStyle = "rgba(140,180,255,0.85)";
ctx.arc(x,y,r,0,Math.PI*2);
ctx.fill();
}
requestAnimationFrame(animate);
}
animate();
</script>
<script>
const menuBtn = document.getElementById('menuBtn');
const siteMenu = document.getElementById('siteMenu');
menuBtn.addEventListener('click', (e)=>{
e.stopPropagation(); siteMenu.classList.toggle('open');
});
document.addEventListener('click', ()=> siteMenu.classList.remove('open'));
siteMenu.addEventListener('click', (e)=> e.stopPropagation());
const images = [{"src": "anticharm/graphics/figure_01.png", "text": "Figure 01"}, {"src": "anticharm/graphics/figure_02.png", "text": "Figure 02"}, {"src": "anticharm/graphics/figure_03.png", "text": "Figure 03"}, {"src": "charm/graphics/figure_01.png", "text": "Figure 04"}, {"src": "charm/graphics/figure_02.png", "text": "Figure 05"}, {"src": "charm/graphics/figure_03.png", "text": "Figure 06"}, {"src": "freq_policies/graphics/figure_01.png", "text": "Figure 07"}, {"src": "freq_policies/graphics/figure_02.png", "text": "Figure 08"}, {"src": "freq_policies/graphics/figure_03.png", "text": "Figure 09"}, {"src": "z_olo/graphics/figure_01.png", "text": "Figure 10"}, {"src": "z_olo/graphics/figure_02.png", "text": "Figure 11"}, {"src": "z_olo/graphics/figure_03.png", "text": "Figure 12"}];
let i = 0;
function show(){ document.getElementById("img").src = images[i].src; document.getElementById("cap").textContent = images[i].text; }
function next(){ i=(i+1)%images.length; show(); }
function prev(){ i=(i-1+images.length)%images.length; show(); }
document.addEventListener("keydown",(e)=>{ if(e.key==="ArrowRight") next(); if(e.key==="ArrowLeft") prev(); });
</script>
</body>
</html>
|