index.html

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>CodeForge · Project Collection</title><link rel="stylesheet" href="assets/common.css"><style>.header{padding:50px 0 38px}.header h1{max-width:750px;font-size:clamp(45px,7vw,79px)}.card{background:linear-gradient(130deg,#1b2f4d,#101a2a);border:1px solid #304260;border-radius:22px;padding:25px;min-height:225px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .2s,border-color .2s;text-decoration:none}.card:hover{transform:translateY(-5px);border-color:#68aaff}.card h2{margin-bottom:6px}.card p{color:#a4b2cb}.card .em{font-size:38px;margin-bottom:15px}.searchbar{max-width:450px;margin:20px 0 30px}.meta{font-size:13px;color:#60e0bb}#cards{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:850px){#cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:570px){#cards{grid-template-columns:1fr}}</style></head><body><div class="wrap"><div class="top"><a class="brand" href="./">⚡ CODE<span>FORGE</span></a><a class="link" href="https://github.com/uzbcoding-Backend">GitHub profile ↗</a></div><div class="header"><div class="eyebrow">Developer portfolio · Open-source experiments</div><h1>Build. Learn. <span style="color:#60e0bb">Explore.</span></h1><p class="sub">A growing collection of practical, interactive websites. Every project runs in your browser — explore the code, try the tools, and keep learning.</p></div><label for="search" class="label">Search the collection</label><input class="input searchbar" id="search" placeholder="Search projects..."><div id="cards" class="grid"></div><footer>Created for the uzbcoding-Backend GitHub portfolio · No payments or accounts needed</footer></div><script>const projects=[{name:"Java Academy",slug:"java-academy",icon:"☕",cat:"Education",desc:"Interactive Java lessons, code examples and quizzes."},{name:"DevTools Hub",slug:"devtools-hub",icon:"🛠️",cat:"Developer tools",desc:"JSON, Base64 and everyday text utilities."},{name:"TaskFlow",slug:"taskflow",icon:"✅",cat:"Productivity",desc:"Organize tasks with priorities and completion."},{name:"Budget Board",slug:"budget-board",icon:"💳",cat:"Dashboard",desc:"Track demo income, expenses and totals."},{name:"Typing Sprint",slug:"typing-sprint",icon:"⌨️",cat:"Game",desc:"Test typing speed and accuracy in 30 seconds."},{name:"Focus Timer",slug:"focus-timer",icon:"⏱️",cat:"Productivity",desc:"Pomodoro timer for concentration and breaks."},{name:"Quiz Arena",slug:"quiz-arena",icon:"🧠",cat:"Education",desc:"Ten fast coding and logic questions."}];function render(){const q=document.querySelector("#search").value.toLowerCase(),root=document.querySelector("#cards");root.replaceChildren();projects.filter(p=>(p.name+" "+p.cat+" "+p.desc).toLowerCase().includes(q)).forEach(p=>{let a=document.createElement("a");a.className="card";a.href="projects/"+p.slug+"/";let ico=document.createElement("div");ico.className="em";ico.textContent=p.icon;let title=document.createElement("h2");title.textContent=p.name;let desc=document.createElement("p");desc.textContent=p.desc;let meta=document.createElement("div");meta.className="meta";meta.textContent=p.cat+" · Open project →";let x=document.createElement("div");x.append(ico,title,desc);a.append(x,meta);root.append(a)});if(!root.children.length)root.textContent="No projects match that search."}document.querySelector("#search").addEventListener("input",render);render();</script></body></html>