Viewing Program

Program Data

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

Title	The Khannection \| Issue 1
ID	5668550318604288
Created	3 days ago, 1744753700626
Updated	3 days ago, 1744753762406
Code	<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>The Khannection \| Issue 1</title> <!-- Global styles --> <style> :root { --bg: #F5F6F2; --white: #FFFFFF; --lightgreen: rgb(21, 191, 150); --darkblue: rgb(10, 33, 74); --lightblue: rgb(25, 101, 242); } * { scroll-behavior: smooth; margin: 0; box-sizing: border-box; } body { background-color: var(--bg); overflow-x: hidden; font-family: "Nunito Sans"; } body::-webkit-scrollbar { display: none; } .page { display: flex; flex-direction: column; align-items: center; justify-content: center; } .nice-box { margin: 20px; display: flex; align-items: center; justify-content: center; padding: 20px; } .article { width: 100vw; padding: 20px; display: flex; flex-direction: column; align-items: flex-start; } .article .title { font-weight: 400; font-size: 21px; } .article .divisor { width: 80vw; height: 2px; background: black; border-radius: 10px; } .article .description { margin: 20px; } </style> <!-- Nav bar styles --> <style> #nav-background { background: rgba(255, 255, 255, 0.9); position: fixed; top: 20px; left: 5vw; height: 70px; width: 90vw; border-radius: 95px; z-index: 2; filter: blur(8px); -webkit-filter: blur(8px); } nav { position: fixed; top: 20px; left: 5vw; display: flex; align-items: center; justify-content: space-between; height: 70px; width: 90vw; border-radius: 95px; user-select: none; z-index: 2; border: 5px solid rgba(255, 255, 255, 0.3); } #logo { margin-left: 1rem; display: flex; align-items: center; font-weight: 700; font-size: 17px; } #logo a { color: var(--darkblue); text-decoration: none; } #dropdown { position: relative; margin-right: 30px; display: block; color: var(--darkblue); } #dropdown-content { padding-top: 20%; display: none; position: absolute; top: 100%; right: 0; transform: translateY(-30px); } #dropdown:hover #dropdown-content { display: block; cursor: pointer; transition: transform 0.5s; transform: translateY(0); } .nav-btn { background: rgba(255, 255, 255, 0.8); display: flex; align-items: center; justify-content: flex-end; width: 150px; height: 30px; padding-right: 10px; transition-duration: 0.5s; color: black; text-decoration: none; } .nav-btn:hover { background: rgba(255, 255, 255, 0.9); } </style> <!-- Footer Styles --> <style> .bi { margin: 5px; } .bi:hover { cursor: pointer; } footer { background-color: var(--darkblue); width: 100vw; z-index: 0; display: flex; flex-direction: column; align-items: center; } #footer-main { display: flex; align-items: flex-start; justify-content: center; color: white; user-select: none; margin-bottom: 15px; } @media (max-width: 450px) { #footer-main { flex-direction: column; } } .footer-box { display: flex; justify-content: center; flex-direction: column; margin: 15px; margin-top: 50px; } .divider { width: 70px; background-color: white; height: 2px; margin-bottom: 2px; } .footer-btn { font-size: 13px; margin: 4px 0; text-decoration: none; color: var(--white); } .footer-btn:hover { text-decoration: underline; cursor: pointer; } #footer-footer { color: rgb(121, 139, 171); margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; } </style> <!-- Hero styles --> <style> .hero { width: 100vw; height: 100vh; background: rgb(0, 45, 79) url("https://upload.wikimedia.org/wikipedia/commons/7/70/Starry_sky_during_blackouts.jpg"); background-size: 1000px; z-index: 1; display: flex; flex-direction: column; align-items: left; user-select: none; font-family: "Nunito"; } .hero .title { background: linear-gradient(var(--white), var(--lightgreen)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 0; font-size: min(calc(10vw), calc(10vh)); margin-top: 40vh; margin-left: 25px; text-shadow: 3px 3px 4px rgba(255, 255, 255, 0.3); } .hero .desc { color: white; margin: 0; margin-left: 30px; font-size: calc(4vh); text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.3); } .hero .explore-btn { width: 15vw; max-width: 200px; height: 6vw; max-height: 100px; background-color: var(--lightgreen); color: white; display: flex; align-items: center; justify-content: center; border-radius: 5px; transition: transform 0.3s, box-shadow 0.3s; margin-left: 75vw; margin-top: 23vh; box-shadow: 0px 2px 10px rgba(255, 255, 255, 0.3); overflow: hidden; z-index: 1; } .hero .explore-btn:hover { transform: translateY(2px); box-shadow: 0px 2px 5px rgba(255, 255, 255, 0.3); cursor: pointer; } .explore-btn .inside-txt { width: 100vw; display: flex; justify-content: center; align-items: center; font-size: 15px; transform: translateX(-53.5px); transition: transform 0.5s; } .hero .explore-btn:hover .inside-txt { transform: translate(68px, 1px); } </style> <!-- Font --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap" rel="stylesheet"> <!-- Icons --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> <!-- Something else --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css"> </head> <body> <div id="nav-background"></div> <nav> <div id="logo"> <div id="bla" style="margin-top: 6px;"></div> <script src="https://cdn.jsdelivr.net/gh/fillertext2025/formyproject@main/ka.js"></script> <script> var d = document.querySelector("#bla"); d.innerHTML = ka; </script> <a href="https://www.khanacademy.org/profile/kaid_656749528789827528144000/projects" target="_blank">The Khannection</a> </div> <div id="dropdown"> Sections <div id="dropdown-content"> <div class="nav-btn" onclick="window.scroll(0, 550)">Khan News</div> <div class="nav-btn" onclick="window.scroll(0, 1950)">Codaru</div> <div class="nav-btn" onclick="window.scroll(0, 3300)">Programmer</div> </div> </div> </nav> <div class="page"> <div class="hero"> <h1 class="title">the khannection</h1> <p class="desc">issue 1 \| April 14, 2025</p> <div class="explore-btn" onclick="window.scroll(0, 550);" ><p class="inside-txt"><span class="material-symbols-outlined">arrow_right_alt</span>                      Explore</p></div> </div> <div style="padding: 50px"> <div class="article"> <h2 class="title">BREAKING: Trends are called trends for a reason!</h2> <div class="divisor"></div> <div class="description"> <p>An old trend has started in the small community in the khan academy coding community. This trend has risen and fallen in the past, and surely will rise and fall once more in the future. It is "the trend of making a cool newspaper which only lasts for three weeks oh well." Within the last two weeks at least 5 seperate newspapers have been made.</p> <br> <p>Here is break down of each one.</p> <ul> <li> <a target="_blank" href="https://www.khanacademy.org/computer-programming/nexus-newsletter/5570005649440768">The Nexus Newsletter</a> founded by SwankyMan <ul> <li>A simply styled quaint newsletter focused on the community.</li> </ul> </li> <li> <a target="_blank" href="https://www.khanacademy.org/computer-programming/newspaper-cobra-news/4943387671248896">Cobra News</a> founded by Cobra <ul> <li>Similar to the Nexus with the addition of some non-ka trivia and jokes. I found the parts written by Cobra a little funny.</li> </ul> </li> <li> <a target="_blank" href="https://www.khanacademy.org/computer-programming/i/5841211160117248">The Khan Tribune</a> founded by Sparta <ul> <li>The newspaper that started the trend this time around. Pretty much the same as Nexus and Cobra but it has some pretty in-depth interviews and program reviews.</li> </ul> </li> <li> <a target="_blank" href="https://www.khanacademy.org/computer-programming/khan-chronicle/6573666871656448">The Khan Chronicle</a> founded by BlueSport09 <ul> <li>A newspaper that seems to currently focus on interviews.</li> </ul> </li> <li> <a target="_blank" href="https://www.khanacademy.org/computer-programming/the-khannection-official-website/5137773388480512">The Khannection</a> founded by me <ul> <li><span style="text-decoration: line-through">I probably shouldn't give a description of my own newspaper because it would be <strong>very</strong> biased.</span> The <strong>best</strong> newspaper in the world. Even better than those outside of Khan. <span style="font-style: Italic">duh. acktually its not. or is it..</span>.</li> </ul> </li> </ul> </div> </div> <div class="article"> <h2 class="title">Khan Academy does what they said they will do!</h2> <div class="divisor"></div> <div class="description"> <p>Khan Academy, following their <a targ="_blank" href="https://support.khanacademy.org/hc/en-us/articles/29415446635021-What-are-Khan-Academy-s-Deletion-Practices#:~:text=Khan%20Academy%20determines%20whether%20an,with%20our%20inactive%20account%20policy.">Deletion Practices</a>, have been deleting accounts that have been inactive for over 2 years. Some of you may have noticed that Minecraft "overtook" Doodle Jump in votes. What you may not have noticed is that they both have over 4K less votes than just 4 months ago. This is because of the inactive accounts being deleted, and along with the account, all the comments and votes they had generously distributed in their short lives on Khan. Now you may wonder if Khan has been archiving the programs of the deleted users, but no they have not.</p> <br> <p> KA historian <a target="_blank" href="https://www.khanacademy.org/profile/kaid_792288208072906614241148/projects">cwalsh1223</a> compiled a list of famous people whose accounts have been deleted. Please say your RIPs to these people: </p> <ul> <li>Kazza++ - creator of the highest voted flappy bird on khan. It had over 4000 votes.</li> <li>Daniel Song - started the "speedy" platformer series. He had 2 1000+ voted programs. </li> <li>Becky - author of the 3D Chubby Cat game, which had more than 1300 votes. Almost all of her programs were about chubby cats.</li> <li>WinstonMaster - creator of the famed "No-Click Zone", with the first in the series having more than 1000 votes.</li> <li>KWC - very skilled programmer and creator of many <strong>amazing</strong> graphics, such as Peppermint Falls Chalet and Wario's Woods, which both had 500+ votes. She also created an awesome tutorial series on almost anything ka coding related.</li> <li>Blaze - a graphics creator whose highest rate program was of a Clone Trooper. It had more than 550 votes.</li> <li>πceratops - game creator with their highest voted program having more than 900 votes. They had 26 programs each having more than 100 votes.</li> <li>conrad123 - also a game dev, and one of the creators of KhanKart, a racing game which had more than 350 votes. KhanKart was my favorite racing game here on Khan. RIP KhanKart.</li> </ul> </div> </div> <div class="article"> <div class="title">Primavera rebranded into Codaru!</div> <div class="divisor"></div> <div class="description"> <p> Primavera, founded in 2020 by <a href="https://www.khanacademy.org/profile/kaid_1167371439589851086940548/projects" target="_blank">Iron Programming</a>, is an annual competition here on Khan. In the past years, the format went like this: you looking at the list of teams to choose from. Each team is represented by an avatar. You pick the one you like the best. Most of the time you get to be on the team you picked (which means that most of the time, the teams are uneven). You work the hardest on the first challenge, which is the "make a homepage for your team and the creator of the best homepage within that team becomes the team captain." Then the next challenge comes up. Unfortunately you are tired out from working so hard on the homepage challenge which you didn't win. So the program you turn in for the next challenge is partially incomplete. And inactivity grows from challenge to challenge, and almost nobody is present for the final challenge. (this problem grew worse from 2020 to 2021, 2021 to 2022, etc... The worst year was 2024.) </p> <br> <p> That's why Primavera was completely revised this year. Here is a list of what has been changed: </p> <ul> <li>the name is changed to "Codaru", a combination of "Code" + "haru". "Haru" is "spring" in Japanese. This change is trivial.</li> <li>Captains are pre-selected, not determined from a first-round homepage challenge. The homepage challenge is complete scrapped.</li> <li>Codaru is no longer solely for KA contestants. Off KA contestants are very welcome.</li> <li>Participants are drafted by captains, this leads to more even teams.</li> <li>Slightly changed judging criteria, with the very hilarious if you don't have clean code your score is halved, and if you didn't follow the theme is score is halved again. Sorry I have a quirky sense of humor.</li> <li>some other minor changes (referrals, an official website, blowing up the world.)</li> </ul> <br> <p> This year's captains are very skilled programmers. Let's get to know them better: </p> <ul> <li> <a target="_blank" href="https://www.khanacademy.org/profile/kaid_714780036830891967670231/projects">ASBackup</a> of Team Dragon. ASBackup replaced "mystery man" as captain. ASBackup is a very skilled animator and graphic designer. He has made a lot of intros for people. </li> <li> <a target="_blank" href="https://www.khanacademy.org/profile/kaid_4391100538307580650220212/projects">Astro</a> of Team Rat. This is Astro's third consecutive year being a host of Primavera/Codaru. Astro also was a captain in Clash of Code 2023. He is experienced in a multitude of programming languages. </li> <li> <a target="_blank" href="https://www.khanacademy.org/profile/kaid_3902988618718040904060736/projects">Radar</a> of Team Rooster. Radar is a skilled game dev and graphic creator. He was the captain of a winning team in Clash of Code 2025 (Team Radar and Team Bearkirb tied for first). </li> <li> <a target="_blank" href="https://www.khanacademy.org/profile/kaid_375460112550893828689953/projects">Bearkirb314</a> of Team Goat. Bearkirb is very skilled with WebGL. He was also the captain of a winning team in Clash of Code 2025, and also a replacement captain in Clash of Code 2024. </li> <li> <a target="_blank" href="https://www.khanacademy.org/profile/kaid_5370656553883782878121797/projects">Dominic R.</a> of Team Tiger. This is also Dominic R's third consecutive year hosting Codaru/Primavera. Skilled in both javascript and html, and has a good sense of design. </li> </ul> <br> <p> Challenge 1 of Codaru is almost over. Here is my <span style="text-decoration: line-through">likely inaccurate</span> 100% accurate projection of how many programs will be turned in per team. </p> <ol> <li>Team Roosters - 10</li> <li>Team Goats - 9</li> <li>Team Tigers - 7</li> <li>Team Dragons - 7</li> <li>Team Rats - 6</li> </ol> </div> </div> <div class="article"> <div class="title"> Programmer from the Past </div> <div class="divisor"></div> <div class="description"> <p>This week's featured programmer from the past is <a target="_blank" href="https://www.khanacademy.org/profile/kaid_639291037700385781852565/projects">Gray Wolf</a>. Gray Wolf is super skilled at everything Khan has to offer, creating stunning webpages, professional games, and amazing animations.</p> <br> <p>Here is a selection of his programs I would like to highlight:</p> <ul> <li><a target="_blank" href="https://www.khanacademy.org/computer-programming/dragon-animated/4735815490420736">Dragon (Animated)</a> - a very natural looking animation of a dragon flying. Uses every single complex shape on the face of ka pjs.</li> <li><a target="_blank" href="https://www.khanacademy.org/computer-programming/halloween-game/5890912342982656">Halloween (Game)</a> - remake of the classic google halloween game (my personal favorite). Has amazing graphics and effects.</li> </ul> </div> </div> <div class="article"> <div class="title">Secret Article—The ramblings of me</div> <div class="divisor"></div> <div class="description"> <p>Here is my ramblings on the current events on Khan ......... <br>SSBhbS Bnb2luZy BtYW Qgd GhlI GhvdGx pc3Qg aXMg ZGVhZ CBoZW xwIHR oZXJl J3MgY SBwcm 9ncmFtI HRoY XQgaGFzI DgwI HZvdG VzIGF ib3V0 IGRyd WdzIH NvI Hdla XJkL CB0aG Ugb2x kIGR heX MgbGF sYWxhL CBva2F 5IGZpb mUgZHV yaW5nI G Nvdml kIHB lb3BsZ SBoYW QgbW9y ZSBleH RyYSB0 aW1lIG J1dC Bjb3 ZpZC BpcyB nb25lIG 5vdyBodXJ yYXkg YnV0I HllcyBz YWRseSB wZW9 wbGUgb W92ZSBvb iB5ZXM gdGhh dCBpcyB zbyB0c nVlIG 9rYXkg Ynll IGJ5 ZSBndX lzIGNv bmdyY XRzIG lmIHl vdSBy ZWFkI HRoaX MgYW5 kIGN hbGw gbWU gZnJ lZCB pZiB5b 3UgZm 91bm QgdG hpcy4 <br> Thanks for reading my very insightful rambling. Anyways that's end for this article! </p> <br> <h3>If you learned anything from this article, it should be this: I should subscribe to "The Khannection" now.</h3> <br> <p>Don't ignore what you've learned! Follow your knowledge now, by clicking <a target="_blank" href="https://www.khanacademy.org/computer-programming/the-khannection-official-website/5137773388480512">here</a>.</p> </div> </div> </div> </div> <footer> <div id="footer-main"> <div class="footer-box" style="width: 30vw; color: rgb(121, 139, 171); margin-bottom: 0;"> Our mission is to "khannect" users to the current events of the Khan Academy Coding Community. <br> <br> <br> The Khannection™ is a 100% for profit organization. Donations highly recommended. <br> <br> <br> <br> </div> <div class="footer-box"> <h4 style="font-weight: bold;">Links</h4> <div class="divider"></div> <div class="footer-btn" onclick="window.scroll(0, 550)">KA News</div> <div class="footer-btn" onclick="window.scroll(0, 1950)">Codaru News</div> <div class="footer-btn" onclick="window.scroll(0, 3300)">Programmer</div> </div> <div class="footer-box"> <h4 style="font-weight: bold;">Rickroll</h4> <div class="divider"></div> <div class="footer-btn" onclick="alert('Never gonna give you up')">Never</div> <div class="footer-btn" onclick="alert('Never gonna let you down')">gonna</div> <div class="footer-btn" onclick="alert('Never gonna run around and desert you')">do</div> <div class="footer-btn" onclick="alert('Never gonna make you cry')">this</div> <div class="footer-btn" onclick="alert('Never gonna say goodbye')">to</div> <div class="footer-btn" onclick="alert('Never gonna tell a lie and hurt you')">you</div> </div> <div class="footer-box"> <h4 style="font-weight: bold;">Subscribe</h4> <div class="divider"></div> <a class="footer-btn" target="_blank" href="https://www.khanacademy.org/computer-programming/the-khannection-official-website/5137773388480512">Press here</a> </div> </div> <div style="width: 90vw; display: flex; align-items: center; justify-content: center; color: rgb(121, 139, 171); margin-bottom: 15px;"> © The Khannection 2025   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16"> <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-discord" viewBox="0 0 16 16"> <path d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16"> <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16"> <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16"> <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16"> <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z"/> </svg> </div> </footer> <script type> function rn(min, max) { return Math.random() * (max - min) + min; } function map(value, inMin, inMax, outMin, outMax) { return (value - inMin) * (outMax - outMin) / (inMax - inMin) + outMin; } var hero = document.getElementsByClassName("hero"); var x = 0; var y = 0; var tx = 0; var ty = 100; var anim = null; function lol() { x = map(Math.sin(tx), 0, 1, 0, 600); y = map(Math.sin(ty), 0, 1, 0, 600); tx += 0.0008; ty += 0.0008; hero[0].style["background-position"] = x + "px " + y + "px"; if (anim !== null) { cancelAnimationFrame(anim); } anim = requestAnimationFrame(lol); } lol(); // <script> </script> <!-- Credit to Leaf (https://www.khanacademy.org/computer-programming/i/4626826748018688) --> <script type="application/javascript"> document.body.addEventListener("keydown", function(e) { if (e.code === "Escape") { / Here , inside `` write the HTML you want to be displayed as thumbnail. / document.body.innerHTML = ` <div style="display: flex; align-items: center; flex-direction: column; justify-content: center; position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background: white;"> <img style=" width: 60vw; height: 60vh;" src="https://www.khanacademy.org/computer-programming/get-around-_-/6269685578448896/latest.png"> <h2 style="margin-top: 20px; font-size: 35px; color: rgb(9, 42, 102);margin-bottom: 0;">The</h2> <h1 style="margin-top: -10px; font-size: 60px; color: rgb(9, 42, 102);">Khannection</h1> </div>`; } if (e.code === "Enter") { e.preventDefault(); } }); </script> <!--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> </body> </html> <!-- Sorry, I was late. -->
Folds	1,589
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgIfBw_CICgw
Votes	31
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	The Khannection
Author Name	Khannection
Author ID	kaid_656749528789827528144000
Author Profile Access	COACH

Archive Data

Added	3 days ago, 1744771873826
Updated	3 days ago, 1744771947190
Source Deleted	unknown