Spaces:
Runtime error
Runtime error
| <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> | |