Viewing Program

Program Data

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

Title	A site that codes itself!
ID	4643304489664512
Created	3 years ago, 1648912432877
Updated	3 years ago, 1648912807057
Code	<!DOCTYPE html> <!-- Primavera 'Coding is Magic' Submission Sub: https://www.khanacademy.org/computer-programming/leafs-subscription-page/5965098333454336 Inspiration from: strml.net Type: Fun website so have fun --> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>A site that codes itself!</title> <meta name="description" content="A fun website." /> <meta name="robots" content="index,follow" /> <meta property="og:title" content="A Site That Codes Itself!" /> <meta property="og:description" content="A fun website." /> <!-- Basic resets --> <style> /* Basic page style resets / { box-sizing: border-box; transition: 1s all; } [hidden] { display: none !important; } button { font-family: 'Lato', cursive; font-weight: bold; font-size: 100%; background: #ffffff; border: 1px solid #000000; box-sizing: border-box; border-radius: 4px; padding: 0.5rem 1rem; transition: 500ms; cursor: pointer; } #start { position: absolute; top: 50%; left: 50%; } textarea { width: 100%; height: 90vh; padding: 12px; margin: 2px; box-sizing: border-box; border: none; border-radius: 4px; } div { margin: 10px; border-radius: 10px; overflow: auto; } .editor { outline: none; } .editor::-webkit-scrollbar { width: 10px; } .editor::-webkit-scrollbar-track { background-color: #333533; } .editor::-webkit-scrollbar-thumb { background-color: #fde4cf; } .editor::-webkit-scrollbar-thumb:hover { cursor: pointer; } center img { width: 25%; } #div1 h1, #div1 p, #div1 pre, #div1 center, #div1 footer, #div2 #beautiful-horse { display: none; } #div2 #beautiful-horse { position: absolute; bottom: 20px; left: 15px; } </style> <!-- Loading stuff --> <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Lato:wght@300&family=Rock+3D&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/dark.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script> <!-- Main script --> <script type> let i = 0; let text = ` /* Hello, I am Leaf - the creator of this program! Idk what to tell you more about myself but you know na that I am right here typing this for you :) What about some live coding!? Let's start. / / Our beautiful editor is still not beautiful. Let's beautify it / .editor { background-color: #333533; color: #fff; / Lets put our editor somewhere else. / position: absolute; right: 10px; width: 45%; border: 4px solid #fde4cf; } / Okay, the editor look some cool now. But are you really liking the white background... isn't it hurting your eyes? Let's change it now. . . . okay I am not procrastinating.. / body { background-color: #8d99ae; } / Hmm...better greyish background ok... grayish or greyish whatever / / Let's create a div that will tell you more about me and this program... / #div1 { display: block !important; / Setting position is important.. right / position: absolute; width: 50vw; height: 45vh; / Poor div, no background... something interesting.. . . yea dark greyish (same as editor lol) / background-color: #333533; color: #e8eddf; padding: 20px; border: 4px solid #fde4cf; } / I need a heading, what about "Hello World" ... Nice! / #div1 h1 { display: block; / I need something 3D and rocky. why not use 'Rock 3D'? / font-family: 'Rock 3D', cursive; / Awesome! Wait, am I forgetting something? maybe (if I'd be Quinn, then I'd write meybe) ahhh.. center alignment / text-align: center; } / Its time for face reveal.. are you ready? so here we go / #div1 center { display: block; } / Aha, what a face! Here comes A paragraph with some not-lorem-ipsum text / #div1 #not-lorem-ipsum { display: block; } / I need some cute styling rn / #div1 p { / Font dude... I need some good font. Anybody has any idea.... well / font-family: 'Lato', sans-serif; font-weight: bold; / Pretty cool! / padding: 20px; } / Wait, have you noticed that the paragraph seems incomplete after but let's complete it with some code / #div1 #bring-code { display: block; } / Awesome Now something about me... who am I lol? I am still confused Hold On This confusion's spoiling my mood lets clear that. / #div1 #who-am-I-pls-tell-pls { display: block; } / Reading... / / Huh.. bad me This wasn't the info I was looking for Anyway / / IDK WHAT TO DO NOW? wait.. you have been here for quite a long time why not sub to this amazing creature then? You will sub me, right? pls / #div1 #sub-leaf-pls-pls { display: block; } / umm... a footer / #div1 footer { display: block; text-align: center; color: #adacac; font-family: 'Lato', sans-serif; } / Okay Too much coding now I needa leave you with this beautiful horse / #div2 #beautiful-horse { display: block; } / B Y E Bye. */ `; let speed = 50; function typeWriter() { if (i < text.length) { document.getElementById("css").innerHTML += text.charAt(i); i++; setTimeout(typeWriter, speed); } document.getElementById("start").style.display = "none"; let style = document.createElement("style"); style.innerText = document.getElementById("css").innerHTML; document.body.appendChild(style); document.getElementById("css").scrollTop = document.getElementById("css").scrollHeight; document.getElementById("div1").scrollTop = document.getElementById("div1").scrollHeight; } </script> </head> <body> <!-- The two later shown divs --> <div id="div1" style="display: none"> <h1>Hello World! This is Leaf</h1> <br /> <center> <img src="https://cdn.kastatic.org/images/avatars/svg/leaf-grey.svg" alt="avatar" /> </center> <br /> <p id="not-lorem-ipsum"> This website is my submission for Primavera's second challenge - 'Coding is Magic!' <br /> If you are that not-so-active newcomer, Primavera is a spring coding competition. I am too lazy to type out detailed explanation but... </p> <pre id="bring-code"> <code class="language-js"> if(yourWants.includes('Full primavera knowledge') { clickOnThisFunctionsParameter(<a style="color: #b9edec;" href="https://www.khanacademy.org/computer-programming/primavera-2022/6556387095134208">Primavera</a>) } </code> </pre> <p id="who-am-I-pls-tell-pls"> Hey Leaf, this is you.<br> Yes, I am talking to myself<br> You are leaf. What else do you need to know about yourself. Bye! </p> <pre id="sub-leaf-pls-pls"> <code class="language-js"> // This variable must be true, true? const youWantToSubMe = true; if(youWantToSubMe) { <a style="color: #b9edec;" href="https://www.khanacademy.org/computer-programming/leafs-subscription-page/5965098333454336">CLICK-AND-SUB</a> } </code> </pre> <footer> Made By Leaf with 😴 © 2022 </footer> <br> </div> <div id="div2"> <div id="beautiful-horse"> <img src="https://upload.wikimedia.org/wikipedia/commons/e/e3/Animhorse.gif?20200207012559"> </div> </div> <button id="start" onclick="typeWriter()">Start</button> <textarea class="editor" id="css"> </textarea> <!-- Initializing highlight.js --> <script> hljs.initHighlightingOnLoad(); </script> <!-- width and height checker --> <script> if(window.innerWidth !== 1000 \|\| window.innerHeight !== 600) { document.body.innerHTML = '<h1 style="text-align: center;line-height: 54px; font-family: Lato;">Please click the link below for the best experience of this program!<br><a href="https://www.khanacademy.org/computer-programming/i/4643304489664512?width=1000&height=600&editor=no" target="_blank">Click Here</a></h1><br><h1 style="text-align: center;line-height: 54px; font-family: Lato;">If you are on the correct url/link but still you have this screen, please reload the page.</h1>'; } </script> <!-- Custom Thumbnail --> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.3/dist/html2canvas.min.js"></script> <!-- CREDIT TO BlueBird@BirdWatcher03 FOR THE AMAZING SAVE FUNCTION --> <script> var save = function(){ html2canvas(document.body,{ allowTaint : false, useCORS: true, width:579, height:566, }) .then(function(canvas){ b64Img = canvas.toDataURL(); window.top.postMessage(b64Img, "https://www.khanacademy.org/"); }); }; var handleSave = function(e) { if (JSON.parse(e.data).screenshot) { setTimeout(function() { console.log("Saving..."); save(); }, 1000) } }; window.parent.savers = window.parent.savers \|\| 0; window.parent.addEventListener('message', handleSave); window.parent.savers += 1; for (window.parent.savers; window.parent.savers > 1; window.parent.savers -= 1) { window.parent.removeEventListener('message', handleSave) } </script> <script type="application/javascript"> document.body.addEventListener("keydown", function(e) { if (e.code === "Escape") { document.body.innerHTML = ` <div style=" background-color: #8d99ae; width: 99vw; height: 99vh; margin: 0; border-radius: 0px; "> <h1 style=" font-family: 'Abril Fatface'; font-size: 6em; margin: 20px; text-align: center; ">A site that codes itself!</h1> <center> <img style="width: 50%;" src="https://upload.wikimedia.org/wikipedia/commons/e/e3/Animhorse.gif?20200207012559"> </center> </div> `; } if (e.code === "Enter") { e.preventDefault(); } }); </script> </body> </html>
Folds	31,105,121,391,398,442,443,447,454,456,460,464,470,497,498,526
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgMOV-eGfCAw
Votes	305
Spin-Offs	8
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Leaf
Author Name	leafkn
Author ID	kaid_481697903688181525808339
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739365472403
Updated	8 months ago, 1744844860562
Source Deleted	unknown