Viewing Program

Program Data

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

Title	Chadtober
ID	4583205859934208
Created	3 months ago, 1727828147448
Updated	3 months ago, 1728513826296
Code	<!DOCTYPE html><html> <title>Chadtober</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=Open+Sans:ital,wght@0,300..800;1,300..800&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" /> <link href="https://fonts.googleapis.com/css?family=Google+Sans+Display\|Material+Icons+Round\|Roboto" rel="stylesheet"/> <style> body { margin: 0; overflow-x: hidden; font-family: 'Open Sans'; height: 100vh; scroll-behavior: smooth; } ::-webkit-scrollbar { width: 0px; } canvas { position: absolute; top: 0; left: 0; z-index: 0; } .container { z-index: 100; position: relative; scroll-snap-type: y mandatory; height: 100vh; overflow-y: scroll; } section { display: flex; flex-wrap: wrap; align-content: space-around; width: 100vw; height: 100vh; scroll-snap-align: start; scroll-snap-stop: always; text-align:center; } #chad { padding: 70px; border-radius: 10px; background: rgba(0, 0, 0, 0.7); color: white; font-size: 50px; text-align: center; font-weight: 100; z-index: 100; margin: auto; text-align: center; } #two { background: rgb(255, 255, 255); width: 100vw; height: 100vh; scroll-snap-align: start; } #two h1 { text-align: center; left: 100px; position: relative; font-weight: 100; } #lol { top: -278px; left: 216px; position: relative; color: grey; font-weight: 100; font-size: 20px; } .fade-in { opacity: 0; transition: opacity 1.5s ease; } .fade-in.visible { opacity: 1; } #characterCardContainer { display: flex; flex-wrap: wrap; margin-left:7vw; } .characterCard { margin: 20px; padding: 10px; border: 1px solid #ddd; border-radius: 10px; text-align: center; width:200px; cursor:pointer; } .characterCard:hover { background:rgb(245, 245, 245); transition:0.1s; cursor:pointer; } .characterCard img { border-radius: 50px; width: 100px; height: 100px; } .characterCard label { display: block; margin-top: 10px; font-size: 16px; color:grey; } .material-symbols-outlined{ font-weight:100; color:rgb(24, 110, 247); top:4px; position:relative; } .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 1, 'opsz' 24 } h1{ font-weight:100; text-align:center; } #participantsContainer { padding: 10px; border: 1px solid #ddd; width: 300px; position:relative; left:-11vw; } table { width: 100%; border-collapse: collapse; font-size:7px; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; font-weight: bold; } tr:nth-child(even) { background-color: #f9f9f9; } #newsContainer div { margin: 5px 0; font-size: 16px; color: rgb(235, 235, 235); } a{ color:rgb(0, 106, 255); text-underline-offset:2px; text-decoration: none; } a:hover{ text-decoration:underline; } </style> <script src='https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js'></script> <script src='https://cdn.jsdelivr.net/gh/Dddatt/D.js@v2.1.0/index.js'></script> <div class="container"> <section> <canvas id='gl-canvas'></canvas> <canvas id='ui-canvas'></canvas> <h1 id="chad"> Chadtober <p style="font-size: 20px;">Challenging you to 31 days of chad programming</p> </h1> </section> <section id="two" class = "fade-in"> <h1 >Hosted by the ones you know and trust!</h1><br><br> <div id="characterCardContainer"></div> </section> <section class = "fade-in" style = "padding-top:30px;"> <h1 style = "position:relative;text-align:center;left:33vw;top:-15vh;">List of participants!</h1> <div id = "participantsContainer"></div> </section> <section class = "fade-in"> <h1 style = "position:relative;text-align:center;left:38vw;top:-15vh;">News feed</h1> <p style = "position:relative;text-align:center;left:22.5vw;top:2vh;font-weight:300">None yet!</p> </section> </div> <script type> if(window.innerHeight!==600\|\|window.innerHeight!==600){ alert("this webpage is not 100% responsive on different widths and heights!") } alert("Thanks for choosing Chadtober! Scroll to start your journey") document.addEventListener("DOMContentLoaded", function () { let sections = document.querySelectorAll('section'); let isScrolling = false; let scrollTimeout; let lastScrollTop = 0; // Variable to track the scroll direction function smoothScrollTo(element) { element.scrollIntoView({ behavior: 'smooth' }); } function getNextSection(currentSection, direction) { let index = Array.from(sections).indexOf(currentSection); if (direction === 'down') { return sections[index + 1] \|\| currentSection; // Get next section, or stay at the last section } else { return sections[index - 1] \|\| currentSection; // Get previous section, or stay at the first section } } function getClosestSection() { let closestSection = null; let minDistance = Infinity; sections.forEach(section => { let distance = Math.abs(section.getBoundingClientRect().top); if (distance < minDistance) { minDistance = distance; closestSection = section; } }); return closestSection; } function autoScroll(direction) { if (isScrolling) return; isScrolling = true; let closestSection = getClosestSection(); let targetSection = getNextSection(closestSection, direction); smoothScrollTo(targetSection); scrollTimeout = setTimeout(() => { isScrolling = false; }, 1000); } window.addEventListener('scroll', function () { clearTimeout(scrollTimeout); // Clear any existing timeout let st = window.pageYOffset \|\| document.documentElement.scrollTop; let direction = st > lastScrollTop ? 'down' : 'up'; // Determine the scroll direction lastScrollTop = st <= 0 ? 0 : st; // Set the last scroll top value autoScroll(direction); // Auto-scroll to the next or previous section based on direction }); }); </script> <script type = "module"> document.addEventListener('DOMContentLoaded', function() { const fadeIns = document.querySelectorAll('.fade-in'); function checkFadeIns() { fadeIns.forEach(fadeIn => { const fadeInPosition = fadeIn.getBoundingClientRect().top; const windowPosition = window.innerHeight - 50; if (fadeInPosition < windowPosition) { fadeIn.classList.add('visible'); } }); } checkFadeIns(); window.addEventListener('wheel', checkFadeIns); }); </script> <script type = "module"> const characters = [ { img: "https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/marcimus-orange.png", name: "@dddat", quote: "Certified 3d freak" }, { img: "https://cdn.kastatic.org/images/avatars/svg/cacteye-yellow.svg", name: "@kiaantolia.ka", quote: "Certified Web dev" }, { img: "https://cdn.kastatic.org/images/avatars/svg/old-spice-man-blue.svg", name: "@VXS", quote: "Professional coder" }, { img: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Plus_symbol.svg/1000px-Plus_symbol.svg.png?20081122110508", name: "Sponsors", quote: "Including c.. (+2 more)" }, ]; function createCharacterCards() { const container = document.getElementById('characterCardContainer'); characters.forEach(character => { const cardDiv = document.createElement('div'); cardDiv.className = 'characterCard'; const img = document.createElement('img'); img.src = character.img; const label = document.createElement('label'); label.innerHTML = `${character.name} <span class="material-symbols-outlined"> verified </span><br><br><em>${character.quote}</em>`; cardDiv.appendChild(img); cardDiv.appendChild(label); container.appendChild(cardDiv); }); } createCharacterCards(); const pcontainer = document.getElementById('participantsContainer'); /* RedRaven9 - Saturday Vortex - Saturday planetX - Tuesday Virtuosa - Monday Techsquidy - Saturday / // Array of participants' names and corresponding days var participants = [ { name: "Electric Dolphin", day: "Monday" }, { name: "LeaferStudios", day: "Monday" }, { name: "Virtuosa", day: "Monday" }, { name: "Polca", day: "Monday" }, { name: "arn5891", day: "Tuesday" }, { name: "Eyeinthesky", day: "Tuesday" }, { name: "Duke", day: "Tuesday" }, { name: "LJ", day: "Tuesday" }, { name: "Emma", day: "Tuesday" }, { name: "Vicioustre𝑥", day: "Tuesday" }, { name: "nobody R", day: "Wednesday" }, { name: "GavrielC", day: "Wednesday" }, { name: "The No-sock Guy", day: "Wednesday" }, { name: "cwalsh1223", day: "Wednesday" }, { name: "BluDrago", day: "Friday" }, { name: "Jokester134", day: "Friday" }, { name: "RedRaven9", day: "Saturday" }, { name: "Himum", day: "Saturday" }, { name: "AGnawKneeMouse Coder", day: "Saturday" }, { name: "Fer Fer", day: "Saturday" }, { name: "Vortex", day: "Saturday" }, { name: "planetX", day: "Saturday" }, { name: "TechSquidy", day: "Sunday" }, { name: "Falling Dragon", day: "Sunday" }, { name: "Lightning", day: "Sunday" }, ]; const table = document.createElement('table'); const rowsPerColumn = 13; let columnCount = Math.ceil(participants.length / rowsPerColumn); const headerRow = document.createElement('tr'); for (let j = 0; j < columnCount; j++) { const nameHeader = document.createElement('th'); nameHeader.textContent = "Name"; const dayHeader = document.createElement('th'); dayHeader.textContent = "Day"; headerRow.appendChild(nameHeader); headerRow.appendChild(dayHeader); } table.appendChild(headerRow); for (let i = 0; i < rowsPerColumn; i++) { const row = document.createElement('tr'); for (let j = 0; j < columnCount; j++) { const index = j rowsPerColumn + i; if (index < participants.length) { const participant = participants[index]; const nameCell = document.createElement('td'); nameCell.textContent = participant.name; const dayCell = document.createElement('td'); dayCell.textContent = participant.day; row.appendChild(nameCell); row.appendChild(dayCell); } else { row.appendChild(document.createElement('td')); row.appendChild(document.createElement('td')); } } table.appendChild(row); } pcontainer.appendChild(table); </script> <script type='application/javascript'> function main(){ let width=window.innerWidth,height=window.innerHeight,aspect=width/height let glCanvas=document.getElementById('gl-canvas') let uiCanvas=document.getElementById('ui-canvas') glCanvas.width=width glCanvas.height=height uiCanvas.width=width uiCanvas.height=height let ctx=uiCanvas.getContext('2d') let _gl=D.getContext(glCanvas,'webgl2',{antialias:1}) glCanvas.style.display='none' D.viewport(0,0,width,height) D.enable3D() let program=D.createProgram( `#version 300 es precision lowp float; in vec3 vertPos; in vec3 vertNormal; in vec3 instancePos; in vec3 instanceRot; uniform mat4 viewMatrix; out vec3 pixPos; out float section; out vec3 pixNormal; vec3 rotateVector(vec3 v,vec3 euler){ mat3 rotMat=mat3( cos(euler.y)cos(euler.z), sin(euler.x)sin(euler.y)cos(euler.z)-cos(euler.x)sin(euler.z), cos(euler.x)sin(euler.y)cos(euler.z)+sin(euler.x)sin(euler.z), cos(euler.y)sin(euler.z), sin(euler.x)sin(euler.y)sin(euler.z)+cos(euler.x)cos(euler.z), cos(euler.x)sin(euler.y)sin(euler.z)-sin(euler.x)cos(euler.z), -sin(euler.y), sin(euler.x)cos(euler.y), cos(euler.x)cos(euler.y) ); return rotMatv; } void main(){ vec3 vp=rotateVector(vertPos5.,instanceRot)+instancePos; vec3 vn=rotateVector(vertNormal,instanceRot); vec4 pos=viewMatrixvec4(vp,1); section=vertPos.x3.; pixPos=vp; pixNormal=vn; gl_Position=pos; } `, `#version 300 es precision lowp float; uniform vec3 camPos; in vec3 pixNormal; in vec3 pixPos; in float section; out vec4 FragColor; void main(){ vec3 normal=normalize(pixNormal); float diffuse=dot(normalize(vec3(50,250,50)-pixPos),normal)0.3+0.7; vec3 toLight=normalize(vec3(0,25000,500)-pixPos); vec3 toCam=normalize(camPos-pixPos); vec3 halfVec=normalize(toCam+toLight); float specular=dot(halfVec,normal)0.5+0.5; specular=specular; specular=specular; specular=specular; specular=specular; vec3 col=vec3(254, 203, 0)/255.0; if(section<-0.33333)col=vec3(0, 38, 100)/255.0; if(section>0.33333)col=vec3(198, 12, 48)/255.0; FragColor=vec4(coldiffuse+specular0.75,1); } `) D.useProgram(program) let m let mesh=D.createMesh( D.createMeshData({meshes:[{type:'box',x:0,y:0,z:0,w:0.5,h:0.01,l:0.52/3,r:1,g:1,b:1}],order:['x','y','z','nx','ny','nz']}), [ ['vertPos',3,24,0], ['vertNormal',3,24,12], ], [ ['instancePos',3,24,0], ['instanceRot',3,24,12], ] ) for(let i=0,amount=5000,srm=Math.sqrt(amount)0.6;i<amount;i++){ D.addInstance(mesh,[D.random(-srm,srm),D.random(-srm,srm),D.random(-srm,srm),Math.random()6.2,Math.random()6.2,Math.random()6.2]) } let proj=D.prespectiveMatrix(80,aspect,0.1,1000),mat=mat4.identity(new Float32Array(16)) let TIME=0,then,dt function loop(now){ if(!then){now=window.performance.now();then=now} dt=(now-then)0.001 TIME+=dt D.clear(1,1,1,1) let view=D.setViewMatrix(mat,proj,0,0,0,TIME0.15,TIME0.07,10) D.setUniform('camPos',view.camPos) D.setUniform('viewMatrix',mat) for(let i=0;i<mesh.instanceData.length;i+=6){ mesh.instanceData[i+3]+=dt0.5 mesh.instanceData[i+4]+=dt0.3 mesh.instanceData[i+5]+=dt0.1 } D.renderMesh(mesh) ctx.drawImage(glCanvas,0,0) then=now window.parent.raf=window.requestAnimationFrame(loop) } if(window.parent.raf){ window.cancelAnimationFrame(window.parent.raf) } loop() } main() </script> <!--For restart button--> <script></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; var s = document.documentElement.clientWidth; window.parent.html2canvas = e => { try { html2canvas(document.body, { width: s, height: s, useCORS: true, onclone: e => e.getAnimations().forEach(a=>{ try{ a.finish() }catch{} }) }).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> </html> <!-- !!! SCROLL TO START !!! NOTE TO GUARDIANS: VEXCESS IS NO LONGER ON KHAN ACADEMY. WE ARE CONTACTING HIM EXTERNALLY TO HOST. Shoutout to lilfox!: lilfox (angel) is dats twinnie and bestie and kiaantolias friend Comments from our hosts: kiaantolia: Welcome to Chadtober. It's the most wonderful time to unleash your inner Chad! Sign up for a day, and blow your mind away. Chadtober is a competitive, yet friendly environment for you and your friends to face off against each other once a week. The best programs, (overall game, graphic, webpage, SQL script, Python program, etc) will be shown off at the end. Remember, you can enter your Khantober program for Chadtober too! Any program is excepted, as long as it adheres to the Khan Academy guidelines, and is your best effort! Have fun. P.S: Sundays are the best days to code!! Dat: "1000+ aura for webgl" "Stop ghosting, start hosting" Vexcess: ur bad at finacial advice kiantolia (after he loses money from stonks) Sponsored by: Promise, cwalsh1223 - "I haover amilipm. Energponys on lhancmu", Team Alpha Special thanks to: Liam K: for answering my 0 IQ questions patiently, and providing me with really usefull links Levi F: for the idea of using scroll-snap-align: start; for a sticky hybrid scrolling effect! Challengers: Cwalsh, Lightning[Sundays], No-sock guy[Wednesday] -->
Folds	0,667
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgNup7IySCAw
Votes	74
Spin-Offs	1
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	𝕜𝕚™𝕒𝕟𝕥𝕠𝕝𝕚𝕒
Author Name	kiaantolia.ka
Author ID	kaid_706406430552760652245376
Author Profile Access	PUBLIC

Archive Data

Added	3 months ago, 1727828586730
Updated	2 months ago, 1728948657568
Source Deleted	unknown