Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	The Roosters \| Codaru 2025
ID	5705103512289280
Created	25 days ago, 1742840248362
Updated	2 days ago, 1744837058374
Code	<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>The Roosters \| Codaru 2025</title> <style> body { margin: 0; overflow-x: hidden; background-color: #f8f4dc; color: #1b1d21; display: flex; flex-direction: column; font-family: "League Spartan"; } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background-color: rgb(186, 84, 43); } ::-webkit-scrollbar-thumb { background-color: rgb(136, 159, 57); } ::-webkit-scrollbar-thumb:hover { cursor: pointer; } .section-one { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100vh; } .section-one .img-coop { height: 75%; margin-left: -400px; } .middle-content { display: flex; flex-direction: column; flex: 1; height: 100vh; align-items: center; justify-content: center; } .middle-content .img-rooster { width: 9rem; margin-right: 1.25rem; } .middle-content .title { font-weight: bold; font-size: 3.75rem; font-family: "League Spartan", sans-serif; } .middle-content .subtitle { font-size: 1.125rem; font-family: "Outfit", sans-serif; } .section-two { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100vh; position: relative; } .members { display: flex; flex-wrap: wrap; margin-top: 100px; width: 400px; } .section-two .img-egg { height: 75%; margin-right: -200px; } .member-card { background-color: #f8f4dc; width: 90px; height: 100px; margin: 10px; transition: all 0.3s; border: 2px solid rgba(0, 0, 0, 0); border-radius: 20px; z-index: 0; } #member-info { z-index: 2; position: fixed; background-color: #f8f4dc; color: #1b1d21; border: 2px solid #1b1d21; display: flex; flex-direction: column; } #member-info.open { width: 102vw; height: 102vh; left: -1vw; top: -1vh; } #member-info.closed { width: 90px; height: 100px; left: -100vw; top: 250px; } @keyframes openInfo { from { width: 90px; height: 100px; left: -100vw; top: 250px; } to { width: 102vw; height: 102vh; left: -1vw; top: -1vh; } } @keyframes closeInfo { from { width: 102vw; height: 102vh; left: -1vw; top: -1vh; } to { width: 90px; height: 100px; left: -100vw; top: 250px; } } .avatar .img-rooster { width: 40%; } .info-box { border: 2px solid; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 5px; transition: all 0.3s; margin: 5px; width: 100%; display: flex; align-items: center; justify-content:center; } .info-box:hover { transform: translate(1px, 1px); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19); } .avatar { aspect-ratio: 1 / 1; } .name { padding-top: 7px; height: 10%; color: #1b1d21; font-size: 27px; } .name a { color: brown; text-decoration: none; transition: all 0.3s; } .name a:hover { color: rgb(136, 159, 57); } .role { padding-top: 5px; height: 8%; color: #1b1d21; font-size: 22px; } .status { padding-top: 5px; height: 10%; font-size: 20px; } .level { padding-top: 5px; height: 7%; font-size: 17px; } .score { padding-top: 3px; height: 6%; font-size: 15px; } .about { height: 45.2%; } .about p, .languages p { font-size: 15px; margin-left: 10px; margin-right: 5px; line-height: 24px; } .languages { height: 43%; } .exit { padding-top: 4px; width: 240%; font-size: 20px; height: 7%; z-index: 2; } .exit:hover { cursor: pointer; } .member-card:hover { border: 2px solid #1b1d21; cursor: pointer; } .members > div { display: flex; flex-direction: column; justify-content: center; align-items: center; } .members .img-rooster { width: 2rem; } .members span { font-family: "Outfit", sans-serif; font-size: 0.875rem; } .members span.font-bold { font-weight: bold; } .members span.italic { font-style: italic; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } </style> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&family=Outfit:wght@100..900&display=swap" /> <script src="https://cdn.jsdelivr.net/gh/marshmallow-asylum/codaru@0.0.12/ka/ImageQueue.js"></script> <script type="module" defer> const queue = new ImageQueue(null, "0.0.12"); function updateImage(canvas) { const name = [...canvas.classList].find((cls) => cls.startsWith("img-")).split("-")[1]; queue .get(name) .then((bitmap) => { canvas.width = bitmap.width; canvas.height = bitmap.height; canvas.getContext("2d").drawImage(bitmap, 0, 0); }) .catch(console.error); } async function changeImage(canvas, name) { canvas.className = `img-${name}`; await updateImage(canvas); } document.addEventListener("DOMContentLoaded", () => { document.querySelectorAll("canvas[class^='img-']").forEach(updateImage); setInterval(() => document.querySelectorAll("canvas[class^='img-']").forEach(updateImage), 100); }); window.updateImage = updateImage; window.changeImage = changeImage; </script> <script type="module"> // const members = [ { name: "Radar", score: "N/A", role: "captain", about: "I am a Christian homeschooled 9th grader. Outside of coding, I enjoy playing chess, and I swim a ton! (like 14 hours a week).", status: "active", KAID: "kaid_3902988618718040904060736", level: 3, specialty: "I have a decent knowledge of Javascript and HTML/CSS. I also know a little bit of Python, C, SQL, and Scratch (XD)." }, { name: "_Peter", score: 0, role: "vice-captain", about: "I am homeschooled, I enjoy making games, libraries, and engines. I joined KA exactly 9 years, 1 month, 21 days ago, (as of 2025-03-24). I do Speech (Extemporaneous Speaking), gaming, coding, and more. I have 3 siblings on KA. I am also Lutheran.", status: "active", KAID: "kaid_678430895752882629315799", level: 3, specialty: "I make programs in many languages: Java, Swift, C, C++, (NEVER C#), Javascript, Typescript, HTML, Python, and maybe more." }, { name: "Lightning", score: 0, role: "member", about: "I love to play soccer and hike. I am in 9th grade and go to a Science Focus Program for high school, which is at a zoo.", status: "active", KAID: "kaid_293295321613227018876720", level: 2, specialty: "For coding, I specialize in graphics but can also make some fun creative games. On KA, only javascript but I am learning HTML." }, { name: "Fireball", score: 0, role: "member", about: "Brings the heat to every discussion.", status: "active", KAID: "KAID_456789012", level: 1, specialty: "Debate" }, { name: "Sméagol", score: 0, role: "member", about: "Sneaky but loyal to the team.", status: "active", KAID: "KAID_567890123", level: 0, specialty: "Stealth" }, { name: "Legend", score: 0, role: "member", about: "The one who started it all.", status: "active", KAID: "KAID_678901234", level: 1, specialty: "Innovation" }, { name: "Vicioustrex", score: 0, role: "member", about: "Fierce debater and trivia enthusiast.", status: "active", KAID: "KAID_789012345", level: 2, specialty: "Trivia" }, { name: "Eyeinthesky", score: 0, role: "member", about: "Watches over everything from above.", status: "active", KAID: "KAID_890123456", level: 0, specialty: "Observation" }, { name: "CodeSprite", score: 0, role: "member", about: "Master of code and quick fixes.", status: "active", KAID: "KAID_901234567", level: 1, specialty: "Programming" }, { name: "Withspam", score: 0, role: "member", about: "On a mission to clean up the chats.", status: "missing", KAID: "KAID_012345678", level: 1, specialty: "Moderation" }, { name: "J L", score: 0, role: "member", about: "Mysterious but always present.", status: "active", KAID: "KAID_112345679", level: 1, specialty: "Consistency" }, { name: "BABBIT", score: 0, role: "member", about: "Loves to hop into every conversation.", status: "active", KAID: "KAID_223456790", level: 0, specialty: "Engagement" }, { name: "Leo2009", score: 0, role: "member", about: "Veteran member with a lion's heart.", status: "active", KAID: "KAID_334567901", level: 0, specialty: "Loyalty" }, { name: "Mathlete11", score: 0, role: "member", about: "Solves problems with numbers and logic.", status: "active", KAID: "KAID_445678912", level: 0, specialty: "Mathematics" }, { name: "Rpcarnahan", score: 0, role: "member", about: "Brings a unique perspective to the table.", status: "active", KAID: "KAID_556789023", level: 0, specialty: "Creativity" }, { name: "A1Creeper", score: 0, role: "member", about: "Quietly lurking but ready to contribute.", status: "active", KAID: "KAID_667890134", level: 0, specialty: "Support" }, { name: "Kesidedav", score: 0, role: "member", about: "Quietly lurking but ready to contribute.", status: "active", KAID: "KAID_778901245", level: 0, specialty: "Support" }, { name: "ranger", score: 0, role: "member", about: "Quietly lurking but ready to contribute.", status: "active", KAID: "KAID_889012356", level: 1, specialty: "Support" }, { name: "Washington", score: 0, role: "member", about: "Quietly lurking but ready to contribute.", status: "active", KAID: "KAID_990123467", level: 3, specialty: "Support" }, ]; members.sort(function(a, b) { return b.level - a.level; }); window.members = members; const membersDiv = document.getElementsByClassName("members")[0]; var open = false; members.forEach((member) => { membersDiv.innerHTML += ` <div onclick="openMember(${members.indexOf(member)})" class="member-card card-closed"> <canvas class="img-rooster"></canvas> <span style="${ member.name.includes('') ? 'font-weight: bold' : member.name.includes('_') ? 'font-style: italic' : ''}">${member.name.replace("", "").replace("_", "")}</span> <div class="member-info"></div> </div> `; }); </script> <script type> var levels = ["novice", "intermediate", "advanced", "expert"] var infoPage = document.querySelector("#member-info"); function openMember(index) { infoPage = document.querySelector("#member-info"); infoPage.innerHTML = ` <div style="margin: 10% 20%; width:60%; height:80%; display: flex;"> <div style="width: 40%; margin-right: 2%;"> <div class="avatar info-box"><canvas class="img-rooster"></canvas></div> <div class="status info-box">${window.members[index].status}</div> <div class="languages info-box"></div> <div onclick="closeMember()" class="exit info-box">Exit</div> </div> <div style="width: 54%"> <div class="name info-box"><a target="_blank" href="https://www.khanacademy.org/profile/${window.members[index].KAID}"><span style="${ window.members[index].name.includes('') ? 'font-weight: bold' : window.members[index].name.includes('_') ? 'font-style: italic' : ''}">${window.members[index].name.replace("", "").replace("_", "")}</span></a></div> <div class="role info-box">${window.members[index].role}</div> <div class="level info-box">${levels[window.members[index].level]}</div> <div class="score info-box">Score: ${window.members[index].score}</div> <div class="about info-box"></div> </div> </div> `; infoPage.style.animation = "openInfo 1s"; infoPage.classList.remove("closed"); infoPage.classList.add("open"); setTimeout(function() { var t = document.querySelector(".about"); t.innerHTML = `<p class="f" style="animation: fadeIn 1s">${window.members[index].about}</p>`; var l = document.querySelector(".languages"); l.innerHTML = `<p class="f" style="animation: fadeIn 1s">${window.members[index].specialty}</p>`; var fs = document.getElementsByClassName("f"); fs[0].style.opacity = 1; fs[1].style.opacity = 1; }, 800); setTimeout(function() { infoPage.style.transition = ""; document.body.style["overflow-y"] = "hidden"; }, 1000); } function closeMember() { infoPage.style.animation = "closeInfo 2.5s"; infoPage.classList.remove("open"); infoPage.classList.add("closed"); var fs = document.getElementsByClassName("f"); fs[0].style.opacity = 0; fs[0].style.animation = "fadeOut 0.5s"; fs[1].style.animation = "fadeOut 0.5s"; fs[1].style.opacity = 0; setTimeout(function() { infoPage.style.transition = ""; document.body.style["overflow-y"] = "visible"; }, 1000); } </script> </head> <body> <div class="section-one"> <canvas class="img-coop"></canvas> <div class="middle-content"> <canvas class="img-rooster"></canvas> <span class="title">rooster</span> <span class="subtitle">Top of the pecking order.</span> </div> </div> <div class="section-two"> <div class="members"></div> <canvas class="img-egg"></canvas> </div> <div id="member-info" class="closed">fdfsdf</div> <!--The Thumbnail Script 2.1.0 12/18/2023 by Bluebird@kaid_157624541333313939750668--> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script> <script type> var r = 600, s = document.documentElement.clientWidth; window.parent.html2canvas = (t) => { try { html2canvas(document.body, { width: s, height: s, useCORS: !0, onclone: (t) => t.getAnimations().forEach((t) => { try { t.finish(); } catch {} }), }) .then((t) => { var e = document.createElement("canvas"); (e.width = r), (e.height = r), e.getContext("2d").drawImage(t, 0, 0, t.width, t.height, 0, 0, r, r), window.top.postMessage(e.toDataURL(), ""); }) .catch((t) => { alert("Thumbnail Script Error: " + t); }); } catch { window.top.postMessage(document.createElement("canvas").toDataURL(), ""); } }; // <script> </script> </body> </html> <!-- Credit to s'morez for homepage design Credit to Arrow for image loader Credit to Bluebird for thumbnail script Radar: captain Peter: vice-captain The Roosters is one of five teams in Codaru 2025. Join Codaru here: https://www.khanacademy.org/computer-programming/i/5989737391308800 work in progress Challenge 1: Lightning - turned in Legend - turned in Washington - turned in CodeSprite - turned in J L - turned in Vicioustrex - turned in Leo2009 - turned in Kesidedav - turned in Sméagol - turned in BABBIT - turned in Peter x Rpcarnahan - turned in ranger x A1Creeper - turned in Mathlete11 - turned in Fireball - turned in Eyeinthesky - no program sofedupwithspam - no program Important notes: How the scoring for collaboration works: If two people individually work on two programs that both score 5 points, the team receives 10(52) points. But if 2 people work together on a program that scores 7 points, the team receives 14(7*2) points. Because two people working together can make probably make a better quality program together, we would receive more points. You can also collab as a group of 3, but that is the highest team I would recommend because it can get sort of hard to organize with 4 or more people. -->
Folds	1,438
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgIfirpiRCgw
Votes	42
Spin-Offs	4
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Radar 🐓
Author Name	Radar2023
Author ID	kaid_3902988618718040904060736
Author Profile Access	PUBLIC

Archive Data

Added	2 days ago, 1744838173392
Updated	2 days ago, 1744838173392
Source Deleted	unknown