Viewing Program

Program Data

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

Title	Khantober 2024
ID	6462809327452160
Created	3 months ago, 1727735125682
Updated	3 months ago, 1727735956787
Code	<!DOCTYPE html> <!-- * Challenging you to... * Khantober 2024: 31 Days of Smashing Programming! * Created by Chester Banks * Presented by the S'morez * * Khantober starts on October 1st! * Joining can occur at any point, but to complete the full challenge you must release a project every week. * * What is Khantober? + Khantober is a challenge, not a competition. If you accept the challenge of Khantober, you will: + Try to make a quality program every week of October. + You will be placed on a day of the week (tell me if you have a preference). On that day, you will release your weekly program. + You can subscribe to the Program of the Day - we will be choosing a noteworthy program every day of the month and posting it down below. + Your name will be put on the Challengers section for all to see! * Hope you join, see you then! * * Questions/comments? Reach out to a manager below :) --> <html> <head> <meta charset="utf-8"> <title>Khantober 2024</title> <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=Silkscreen:wght@400;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap" rel="stylesheet"> <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" /> <style> body { margin: 0; overflow: hidden; } #particles-js { position: fixed; width: 100vw; height: 100vh; background-color: rgba(50, 50, 75); background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; z-index: -1; } .slide-wrapper { width: 200vw; height: 100vh; display: flex; justify-content: space-around; align-items: center; } .slide { width: 70vw; height: 70vh; border-radius: 10px; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); display: flex; flex-direction: column; justify-content: space-around; align-items: center; padding: 5vmin; } .entitled { font-family: "Silkscreen"; font-size: 4em; color: rgba(250, 250, 250); display: flex; width: 100%; justify-content: space-between; } .year { margin-top: -20vh; font-size: 7em; } .to { color: #3454D1; transition: 1s; } .zo { color: #FFD046; transition: 1s; } .tt { color: #EA3546; transition: 1s; } .fo { color: #30B68C; transition: 1s; } .button { border: 5px solid white; width: 60vw; height: 10vh; background: none; font-size: 2em; color: rgba(250, 250, 250); font-family: "fredoka"; cursor: pointer; transition: 0.15s; display: flex; justify-content: space-around; align-items: center; } .button:hover { background: rgba(250, 250, 250); color: rgba(50, 50, 50); transition: 0.3s; } .title { transform: translate(0vw, 0vh); transition: 0.5s; } .members { display: flex; flex-direction: column; align-items: center; justify-content: space-around; transform: translate(0vw, 0vh); transition: 0.5s; } .shifted { transform: translate(-100vw, 0vh); transition: 0.5s; } .member-list { display: grid; grid-template-columns: repeat(3, 1fr); font-family: "fredoka"; color: rgba(250, 250, 250); padding: 5vmin; width: 55vw; height: 25vh; margin-top: -5vh; overflow-x: auto; } .member-title { color: rgba(250, 250, 250); font-family: "Silkscreen"; font-size: 3em; } </style> </head> <body> <div id="particles-js"></div> <span class = "arrow left"></span> <span class = "arrow right"></span> <div class = "slide-wrapper"> <div class = "slide title"> <span class="entitled">khantober</span> <span class="entitled year"> <span class="to">2</span> <span class="zo">0</span> <span class="tt">2</span> <span class="fo">4</span> </span> <button class="button"> <span class="caption">challengers</span> <span class="material-symbols-outlined" style="font-size: 1.25em;">groups</span> <span class="material-symbols-outlined" style="font-size: 1.25em;">arrow_forward</span> </button> </div> <div class = "slide members"> <span class="member-title">challengers</span> <div class="member-list"></div> <button class="button"> <span class="caption">home</span> <span class="material-symbols-outlined" style="font-size: 1.25em;">home</span> <span class="material-symbols-outlined" style="font-size: 1.25em;">arrow_back</span> </button> </div> </div> <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script type="module"> for(let i = window.requestAnimationFrame(()=>{}); i--;){ window.cancelAnimationFrame(i) } particlesJS("particles-js", { "particles": { "number": { "value": 200, "density": { "enable": true, "value_area": 800 } }, "color": { "value": "#ffffff" }, "shape": { "type": "circle", "stroke": { "width": 0, "color": "#000000" }, "polygon": { "nb_sides": 5 }, }, "opacity": { "value": 0.5, "random": false, "anim": { "enable": false, "speed": 1, "opacity_min": 0.1, "sync": false } }, "size": { "value": 3, "random": true, "anim": { "enable": false, "speed": 40, "size_min": 0.1, "sync": false } }, "line_linked": { "enable": true, "distance": 150, "color": "#ffffff", "opacity": 0.2, "width": 2 }, "move": { "enable": true, "speed": 4, "direction": "none", "random": false, "straight": false, "out_mode": "out", "bounce": false, "attract": { "enable": false, "rotateX": 600, "rotateY": 1200 } } }, "interactivity": { "detect_on": "canvas", "events": { "onhover": { "enable": true, "mode": "grab" }, "onclick": { "enable": true, "mode": "push" }, "resize": true }, "modes": { "grab": { "distance": 140, "line_linked": { "opacity": 1 } }, "bubble": { "distance": 400, "size": 40, "duration": 2, "opacity": 8, "speed": 3 }, "repulse": { "distance": 200, "duration": 0.4 }, "push": { "particles_nb": 4 }, "remove": { "particles_nb": 2 } } }, "retina_detect": true }); let frame = 0 const colors = ["#3454D1", "#FFD046", "#EA3546", "#30B68C"] const classes = ["to", "zo", "tt", "fo"] function raf(){ frame++ if(frame % 60 === 0){ classes.forEach(c => { const el = document.getElementsByClassName(c)[0] el.style.color = colors[(Math.random() * colors.length) \| 0] }) } requestAnimationFrame(raf) } requestAnimationFrame(raf) //<script> </script> <script type="module"> const buttons = document.getElementsByClassName("button") const title = document.getElementsByClassName("title")[0] const members = document.getElementsByClassName("members")[0] for(let button of buttons){ button.onclick = () => { title.classList.toggle("shifted") members.classList.toggle("shifted") } } const names = [ ] const container = document.getElementsByClassName("member-list")[0] names.forEach(name => { const el = document.createElement("span") el.classList.add("member") el.innerText = name container.appendChild(el) }) </script> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script> <script type> // credit to Bluebird@birdwatcher03 for this thumbnail script (only needed on Khan Academy, makes the thumbnail resolution better) var r = 600; var s = document.documentElement.clientWidth; window.parent.html2canvas = (e) => { try { html2canvas(document.body, { width: s, height: s, useCORS: true, }) .then((e) => { var c = document.createElement("canvas"); c.width = r; c.height = r; c.getContext("2d").drawImage( e, 0, 0, e.width, e.height, 0, 0, r, r ); window.top.postMessage(c.toDataURL(), ""); }) .catch((e) => { alert("Thumbnail Script Error: " + e); }); } catch { window.top.postMessage( document.createElement("canvas").toDataURL(), "" ); } }; </script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgNvxwLy9Cww
Votes	3
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	BΣYӨПD
Author Name	BeyondKA
Author ID	kaid_5370656553883782878121797
Author Profile Access	COACH

Archive Data

Added	3 months ago, 1727735782022
Updated	3 months ago, 1727735997895
Source Deleted	unknown