Spaces:
Configuration error
Configuration error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Documentation</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet"> | |
| <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> | |
| <style> | |
| *{ | |
| margin:0; | |
| padding:0; | |
| box-sizing:border-box; | |
| font-family:'Poppins',sans-serif; | |
| } | |
| body{ | |
| background:#000; | |
| overflow:hidden; /* Prevent whole page scrolling */ | |
| } | |
| .background{ | |
| position:fixed; | |
| inset:0; | |
| background-image:url('bg.png'); | |
| background-size:cover; | |
| background-position:center; | |
| z-index:-1; | |
| } | |
| section{ | |
| display:flex; | |
| height:100vh; | |
| width:100%; | |
| } | |
| .sidebar{ | |
| width:280px; | |
| backdrop-filter:blur(18px); | |
| background:rgba(0,0,0,.45); | |
| border-right:1px solid rgba(255,255,255,.2); | |
| padding:25px; | |
| color:#fff; | |
| overflow-y:auto; | |
| } | |
| .logo{ | |
| margin-bottom:30px; | |
| } | |
| .logo img{ | |
| height:45px; | |
| } | |
| .toc a{ | |
| display:block; | |
| color:#fff; | |
| text-decoration:none; | |
| padding:8px 10px; | |
| border-radius:8px; | |
| margin:5px 0; | |
| font-size:.95em; | |
| opacity:.75; | |
| transition:.2s; | |
| } | |
| .toc a:hover{ | |
| background:rgba(255,255,255,.12); | |
| opacity:1; | |
| transform:translateX(5px); | |
| } | |
| .toc a.active{ | |
| background:#fff; | |
| color:#000; | |
| opacity:1; | |
| } | |
| .content{ | |
| flex:1; | |
| margin:30px; | |
| padding:50px; /* Bigger content */ | |
| border-radius:20px; | |
| backdrop-filter:blur(20px); | |
| background:rgba(0,0,0,.4); | |
| color:#fff; | |
| overflow-y:auto; /* Only content scrolls */ | |
| } | |
| .content h1, | |
| .content h2, | |
| .content h3{ | |
| margin:25px 0 15px; | |
| } | |
| .content p{ | |
| line-height:1.8em; | |
| margin:12px 0; | |
| font-size:1.05em; | |
| } | |
| .content code{ | |
| background:rgba(255,255,255,.1); | |
| padding:4px 7px; | |
| border-radius:6px; | |
| } | |
| .content pre{ | |
| background:rgba(255,255,255,.08); | |
| padding:18px; | |
| border-radius:12px; | |
| overflow-x:auto; | |
| } | |
| /* Emoji-safe font stack */ | |
| .content, .sidebar { | |
| font-family:'Poppins','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; | |
| } | |
| @media(max-width:900px){ | |
| section{flex-direction:column;} | |
| .sidebar{width:100%; height:auto;} | |
| .content{margin:15px; padding:30px;} | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="background"></div> | |
| <section> | |
| <div class="sidebar"> | |
| <div class="logo"> | |
| <img src="logo.png" alt="Logo"> | |
| </div> | |
| <div class="toc" id="toc"></div> | |
| </div> | |
| <div class="content" id="content">Loading documentation...</div> | |
| </section> | |
| <script> | |
| function buildTOC(){ | |
| const content=document.getElementById('content'); | |
| const toc=document.getElementById('toc'); | |
| const headings=content.querySelectorAll('h1,h2,h3'); | |
| toc.innerHTML=''; | |
| headings.forEach(h=>{ | |
| const link=document.createElement('a'); | |
| link.textContent=h.textContent; | |
| link.href='#'+h.id; | |
| link.style.marginLeft=(h.tagName==='H2'?12:h.tagName==='H3'?24:0)+'px'; | |
| toc.appendChild(link); | |
| }); | |
| window.addEventListener('scroll',()=>{ | |
| let fromTop=content.scrollTop+100; | |
| headings.forEach(h=>{ | |
| const link=toc.querySelector(`a[href="#${h.id}"]`); | |
| if(h.offsetTop<=fromTop && h.offsetTop+h.offsetHeight>fromTop){ | |
| link?.classList.add('active'); | |
| }else{ | |
| link?.classList.remove('active'); | |
| } | |
| }); | |
| }); | |
| } | |
| async function loadREADME(){ | |
| try{ | |
| const res=await fetch('README.md'); | |
| const text=await res.text(); | |
| const html=marked.parse(text); | |
| document.getElementById('content').innerHTML=html; | |
| document.querySelectorAll('.content h1, .content h2, .content h3').forEach(h=>{ | |
| h.id=h.textContent.replace(/\s+/g,'-').toLowerCase(); | |
| }); | |
| buildTOC(); | |
| }catch(e){ | |
| document.getElementById('content').innerHTML='Failed to load README.md'; | |
| } | |
| } | |
| loadREADME(); | |
| </script> | |
| </body> | |
| </html> |