Viewing Program

Program Data

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

Title	Primavera 2023
ID	5528901184176128
Created	2 years ago, 1679949159845
Updated	2 years ago, 1684193837429
Code	<!DOCTYPE html> <!-- Primavera 2023 Hosted by: ski, Astro, and DR Webpage and all content made by ski All avatars by SMV ------------------------ Joining: The join thread for primavera can be found the the T&T below. Once you follow the EXACT instructions and post your join code your name will appear shortly on the competitors carousel. ------------------------ Timeline: Homepage Challenge (March 27 - April 3) Challenge 1 (April 3 - April 17) Challenge 2 (April 17 - May 1) Three-Week Marathon and Mini-Challenges (May 1 - May 29) Grand Finale (May 29 - June 19) ------------------------ ------------------------ ski made the webpage. he's a terrible web designer. carouseeeeeeeeeeeeeelllllllllllllssssss! --> <html> <head> <meta charset="utf-8"> <title>Primavera 2023</title> <link href="https://fonts.googleapis.com/css2?family=Nunito&family=Rowdies&display=swap" rel="stylesheet"> <style type = "text/css"> @font-face { font-family: "title"; src: url(https://fonts.gstatic.com/s/lilitaone/v13/i7dPIFZ9Zz-WBtRtedDbYEF8RQ.woff2) format('woff2'); } @font-face { font-family: "subtitle"; src: url(https://fonts.gstatic.com/s/nunito/v25/XRXI3I6Li01BKofiOc5wtlZ2di8HDLshdTQ3jw.woff2) format('woff2'); } @font-face { font-family: "icons"; src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v99/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDB_Qb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOcbTCVpeRL2w5rwZu2rIelXxc.woff2) format('woff2'); } @font-face { font-family: "main"; src: url(https://fonts.gstatic.com/s/lexend/v17/wlptgwvFAVdoq2_F94zlCfv0bz1WCzsWzLdneg.woff2) format('woff2'); } @font-face { font-family: "hero"; src: url(https://fonts.gstatic.com/s/rowdies/v15/ptRJTieMYPNBAK21_rBDwQ.woff2) format('woff2'); } @font-face { font-family: "team"; src: url(https://fonts.gstatic.com/s/fugazone/v15/rax_HiWKp9EAITukFsl8Axhf.woff2) format('woff2'); } body { margin: 0; overflow-x: hidden; } main { background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/ElvenForestByDesignermadsen-dfbj4xh.png/1200px-ElvenForestByDesignermadsen-dfbj4xh.png"); background-size: cover; background-attachment: fixed; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100vw; overflow-x: hidden; } .card { display: flex; justify-content: space-between; align-items: center; flex-direction: column; width: 100vw; height: 95vh; margin-top: 5vh; margin-bottom: 5vh; } .card-title { font-family: "title"; font-size: 13vmin; } .card-subtitle { font-family: "subtitle"; font-size: 4vmin; } .carousel { width: 85vw; height: 65vh; display: flex; align-items: center; justify-content: center; flex-direction: column; background: rgba(250, 250, 250); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); border-radius: 5px; overflow: hidden; padding-bottom: 2vh; } .track { width: 100%; height: 90%; display: flex; justify-content: center; align-items: center; flex-direction: row; transition: 0.3s ease-in-out; } .slide { display: flex; justify-content: center; align-items: center; width: 100%; flex: 0 0 100%; font-family: "main"; font-size: 5vmin; margin-top: 5vh; } .container { display: flex; justify-content: center; align-items: center; width: 90%; height: 90%; text-align: center; } .controls { width: 100%; display: flex; justify-content: space-between; align-items: center; height: 8vh; } .control { font-family: "icons"; font-size: 15vmin; color: rgba(150, 150, 150); transition: 0.2s; cursor: pointer; width: auto; height: auto; user-select: none; z-index: 2; } .control:hover { color: rgba(100, 100, 100); transition: 0.4s; } .content { background: rgba(250, 250, 250); padding-top: 5vh; padding-bottom: 5vh; } .hero { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } .hero-wrapper { padding: 4vmin; backdrop-filter: blur(5px); border: 3px solid white; border-radius: 5px; display: flex; justify-content: center; align-items: center; flex-direction: column; color: rgba(250, 250, 250); background: rgba(0, 0, 0, 0.25); } .hero > .hero-wrapper > .title { font-family: "hero"; font-size: 15vmin; } .hero > .hero-wrapper > .subtitle { font-family: "subtitle"; font-size: 3vmin; } .people { display: flex; justify-content: space-between; align-items: center; flex-direction: column; color: rgba(100, 100, 100); } .people .avatar { width: 20vmin; height: 20vmin; border-radius: 100px; border: 3px solid rgba(100, 100, 100); padding: 2vmin; } .people > .name { margin-top: 2vh; font-family: "subtitle"; font-size: 8vmin; } .people > .idk { font-family: "main"; font-size: 5vmin; margin-top: 1vh; } a { text-decoration: none; } .dots { display: flex; justify-content: center; align-items: center; } .dot { background: rgba(0, 0, 0, 0.25); border-radius: 100px; width: 2vmin; height: 2vmin; transition: 0.25s; margin: 1vmin; } .activated { background: rgba(0, 0, 0, 0.5); transition: 0.5s; } .team-container { width: 90%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; } .team-name { font-family: "team"; font-size: 10vmin; } .team-table { display: flex; justify-content: center; align-items: center; flex-direction: column; overflow-x: hidden; width: 100%; padding-top: 5vh; padding-bottom: 5vh; } .contestant { width: 90%; display: flex; justify-content: space-between; align-items: center; } /* scrollbar / ::-webkit-scrollbar { width: 1vmin; } ::-webkit-scrollbar-track { background: rgb(100, 100, 100); } ::-webkit-scrollbar-thumb { background: rgb(100, 200, 100); } a { color: inherit; } .lead { width: 90%; height: 90%; display: flex; justify-content: center; align-items: center; flex-direction: column; } .score-wrapper { display: flex; justify-content: space-between; width: 90%; } .score-name { font-family: "title"; } .name { font-size: 0.7rem; } .level { font-size: 0.7rem; } </style> </head> <body> <main> <div class = "hero"> <div class = "hero-wrapper"> <span class = "title">Primavera</span> <span class = "subtitle">the contest to show where you bloom</span> </div> </div> <div class = "content"> <div class = "card" style = "color: rgba(0, 50, 0);"> <span class = "card-title">ABOUT</span> <span class = "card-subtitle">What is primavera?</span> <div class = "carousel"> <div class = "track"> <div class = "slide"> <div class = "container"> A contest started by Iron Programming (IP) back in 2020. This contest is open to programmers at all skill levels. </div> </div> <div class = "slide"> <div class = "container"> It was given to Liam K. in 2022, who ran every major coding contest on KA for a while. Chester Banks is reported to have offered Khantober to Liam. </div> </div> <div class = "slide"> <div class = "container"> Liam was exhausted after CoC, so when DR inquired about an upcoming hackathon planned by him and ski, Liam offered DR the rights to host Primavera. The rest is history. </div> </div> <div class = "slide"> <div class = "container"> "the compensation for leavin' the novices out of CoC" - ski </div> </div> </div> <div class = "controls"> <span class = "control">chevron_left</span> <div class = "dots"></div> <span class = "control">chevron_right</span> </div> </div> </div> <div class = "card" style = "color: rgba(0, 0, 50);"> <span class = "card-title">JOIN</span> <span class = "card-subtitle">Sign up for primavera.</span> <div class = "carousel"> <div class = "track"> <div class = "slide"> <div class = "container"> Before joining primavera, you'll need to read the rules on the following slides. </div> </div> <div class = "slide"> <div class = "container"> First, you can list a preferred team but the hosts decide which team you go on with your preference in mind. Let's have a fair primavera :) </div> </div> <div class = "slide"> <div class = "container"> Second, please judge your skill level accurately. Take a look at the other contestants and how they place themselves. This is so, experts don't put "beginner" and beginners don't put "experts". </div> </div> <div class = "slide"> <div class = "container"> Now head on down to the t&t and look for the join thread to join the fun! </div> </div> </div> <div class = "controls"> <span class = "control">chevron_left</span> <div class = "dots"></div> <span class = "control">chevron_right</span> </div> </div> </div> <div class = "card" style = "color: rgba(0, 50, 50)"> <span class = "card-title">AVATARS</span> <span class = "card-subtitle">Presented by S. M. V. </span> <div class = "carousel avatars"> <div class = "track"> <div class = "slide"> <div class = "people"> <img class = "avatar" src = "https://www.khanacademy.org/computer-programming/opes/6058228657209344/6173420242124800.png"> <span class = "name">Opes</span> <p class = "idk">a big, beefy dragon</p> </div> </div> <div class = "slide"> <div class = "people"> <img class = "avatar" src = "https://www.khanacademy.org/computer-programming/altum/5541035876073472/6189481079390208.png"> <span class = "name">Altum</span> <p class = "idk">a big, bad wolf</p> </div> </div> <div class = "slide"> <div class = "people"> <img class = "avatar" src = "https://www.khanacademy.org/computer-programming/magus/5395850370269184/6478919588167680.png"> <span class = "name">Magus</span> <p class = "idk">one corn</p> </div> </div> <div class = "slide"> <div class = "people"> <img class = "avatar" src = "https://www.khanacademy.org/computer-programming/aequor/4995781053693952/5311519568216064.png"> <span class = "name">Aequor</span> <p class = "idk">feared by the sailors of bathtubs</p> </div> </div> <div class = "slide"> <div class = "people"> <img class = "avatar" src = "https://www.khanacademy.org/computer-programming/cinis/5190984398061568/6090887789854720.png"> <span class = "name">Cinis</span> <p class = "idk">a bird on fire. it's gon' burn up</p> </div> </div> <div class = "slide"> <div class = "people"> <img class = "avatar" src = "https://www.khanacademy.org/computer-programming/gryphon/4832278292512768/4717407915786240.png"> <span class = "name">Virtus</span> <p class = "idk">an identity crisis</p> </div> </div> </div> <div class = "controls"> <span class = "control">chevron_left</span> <div class = "dots"></div> <span class = "control">chevron_right</span> </div> </div> </div> <div class = "card" style = "color: rgba(50, 50, 0)"> <span class = "card-title">HOSTS</span> <span class = "card-subtitle">Who's putting this gig on?</span> <div class = "carousel"> <div class = "track"> <div class = "slide"> <div class = "people"> <a href = "https://khanacademy.org/profile/thelegendski"><img class = "avatar" src = "https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/starky-sapling.png"></a> <a class = "name" href = "https://khanacademy.org/profile/thelegendski" target = "_blank">ski</a> <p class = "idk">the one an' only legend.</p> </div> </div> <div class = "slide"> <div class = "people"> <a href = "https://khanacademy.org/profile/jD2R"><img class = "avatar" src = "https://cdn.kastatic.org/images/avatars/svg/leaf-orange.svg"></a> <a class = "name" href = "https://khanacademy.org/profile/jD2R" target = "_blank">DR</a> <p class = "idk">A juicy orange leaf.</p> </div> </div> <div class = "slide"> <div class = "people"> <a href = "https://khanacademy.org/profile/astro.ka"><img class = "avatar" src = "https://cdn.kastatic.org/images/avatars/svg/sneak-peak-blue.svg"></a> <a class = "name" href = "https://khanacademy.org/profile/astro.ka" target = "_blank">Astro</a> <p class = "idk">some alt.</p> </div> </div> </div> <div class = "controls"> <span class = "control">chevron_left</span> <div class = "dots"></div> <span class = "control">chevron_right</span> </div> </div> </div> <div class = "card" style = "color: rgba(50, 0, 0);"> <span class = "card-title">JUDGES</span> <span class = "card-subtitle">Sign up to be a judge in the t&t.</span> <div class = "carousel"> <div class = "track"> <div class = "slide"> <div class = "people"> <a href = "https://khanacademy.org/profile/thelegendski"><img class = "avatar" src = "https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/starky-sapling.png"></a> <a class = "name" href = "https://khanacademy.org/profile/thelegendski" target = "_blank">ski</a> <p class = "idk">Execution is key</p> </div> </div> <div class = "slide"> <div class = "people"> <a href = "https://khanacademy.org/profile/jD2R"><img class = "avatar" src = "https://cdn.kastatic.org/images/avatars/svg/leaf-orange.svg"></a> <a class = "name" href = "https://khanacademy.org/profile/jD2R" target = "_blank">DR</a> <p class = "idk">Just don't make a FPS</p> </div> </div> <div class = "slide"> <div class = "people"> <a href = "https://khanacademy.org/profile/astro.ka"><img class = "avatar" src = "https://cdn.kastatic.org/images/avatars/svg/sneak-peak-blue.svg"></a> <a class = "name" href = "https://khanacademy.org/profile/astro.ka" target = "_blank">Astro</a> <p class = "idk">Secretly Liam K - DR</p> </div> </div> </div> <div class = "controls"> <span class = "control">chevron_left</span> <div class = "dots"></div> <span class = "control">chevron_right</span> </div> </div> </div> <div class = "card" style = "color: rgba(50, 0, 50);"> <span class = "card-title">COMPETITORS</span> <span class = "card-subtitle">Who's competing?</span> <div class = "carousel teams"> <div class = "track"> </div> <div class = "controls"> <span class = "control">chevron_left</span> <div class = "dots"></div> <span class = "control">chevron_right</span> </div> </div> </div> <div class = "card" style = "color: rgba(50, 50, 50);"> <span class = "card-title">SCORES</span> <span class = "card-subtitle">Q: Who's winning? A: ski</span> <div class = "carousel scores"> <div class = "track"></div> <div class = "controls"> <span class = "control">chevron_left</span> <div class = "dots"></div> <span class = "control">chevron_right</span> </div> </div> </div> </div> </main> <script type = "module"> async function loadScript (url) { return new Promise((resolve, reject) => { const script = document.createElement('script') const val = +localStorage.getItem('primavera') const count = val ? val + 1 : 1 localStorage.setItem('primavera', count) script.src = url + `?primavera=${val}` document.body.appendChild(script) script.onload = () => resolve(script) script.onerror = () => reject('error, :(') }) } async function main () { const script = await loadScript("https://cdn.jsdelivr.net/gh/astro-develops/KA-imports@master/primavera-2023/contestants.js") const carousels = [...document.getElementsByClassName('carousel')] function handleCarousel (track, index, width, length, dots) { dots.forEach((dot, i) => { if(i === index) dot.classList.add('activated') else dot.classList.remove('activated') }) track.style.transform = `translateX(calc(-${index width}px + ${(50 * length - 50).toString()}%))` } let scores = [ {name: "opes", scores: [10,52.37,0,0,0]}, {name: "altum", scores: [0,19.05,0,0,0]}, {name: "magus", scores: [15,57.5,0,0,0]}, {name: "aequor", scores: [0,63.8,0,0,0]}, {name: "cinis", scores: [0,38.5,0,0,0]}, {name: "virtus", scores: [5,29.3,0,0,0]} ] const teams = { opes: [], altum: [], magus: [], aequor: [], cinis: [], virtus: [] } const colors = { opes: "rgba(235, 80, 56)", altum: "rgba(139, 187, 217)", magus: "rgba(118, 109, 120)", aequor: "rgba(145, 199, 174)", cinis: "rgba(255, 142, 94)", gryphon: "rgba(245, 184, 79)", virtus: "rgba(245, 184, 79)" } for(let contestant of contestants){ teams[contestant.team.toLowerCase()].push(contestant) } carousels.forEach(carousel => { let index = 0 const controls = [...carousel.getElementsByClassName('control')] const track = carousel.getElementsByClassName('track')[0] if(carousel.classList.contains("teams")){ const levels = ["novice", "experienced", "advanced", "expert", "legend"] const teamTrack = track for(let team in teams){ const parent = document.createElement('div') parent.classList.add('team-container') parent.classList.add('slide') parent.style.color = colors[team] const name = document.createElement('div') name.setHTML(team[0].toUpperCase() + team.slice(1, team.length)) name.classList.add('team-name') parent.appendChild(name) const table = document.createElement('div') table.classList.add('team-table') for(let contestant of teams[team]){ const child = document.createElement('div') child.classList.add('contestant') child.setHTML(`<a href = "${contestant.kaid}" class = "name" target = "_blank">${contestant.name}</a><span class = "level">${levels[contestant.level]}`) table.appendChild(child) } parent.appendChild(table) teamTrack.appendChild(parent) } } else if(carousel.classList.contains("scores")){ const places = [ null, "1st", "2nd", "3rd", "4th", "5th" ] const scoreTrack = track scores = scores.sort((b, a) => b.scores.reduce((a, b) => a + b, 0) - a.scores.reduce((a, b) => a + b, 0)).reverse() const leadSlide = document.createElement('div') leadSlide.classList.add('slide') leadSlide.classList.add('lead') for(let team in teams){ const score = document.createElement('div') score.classList.add('score-wrapper') score.setHTML(`<span class = "score-name">${team[0].toUpperCase() + team.slice(1, team.length)}</span><span class = "score">${scores.find(el => el.name === team).scores.reduce((a, b) => a + b, 0)}</span>`) score.style.color = colors[team] leadSlide.appendChild(score) } scoreTrack.appendChild(leadSlide) for(let teamScore of scores){ const team = teamScore.name const score = document.createElement('div') score.classList.add('slide') score.classList.add('lead') score.setHTML(`<span class = "score-name" style = "font-size: 10vmin;">${team[0].toUpperCase() + team.slice(1, team.length)}</span>`) score.style.color = colors[team] for(let [i, s] of teamScore.scores.entries()){ const roundScore = document.createElement('span') roundScore.classList.add('score-wrapper') roundScore.setHTML(`<span class = "round">${places[i + 1]} Round</span><span class = "score">${s}</span>`) score.appendChild(roundScore) } scoreTrack.appendChild(score) } } else if(carousel.classList.contains("avatars")){ const slides = [...track.getElementsByClassName('slide')] slides.forEach(slide => { const team = slide.getElementsByClassName('name')[0].innerText.toLowerCase() slide.getElementsByClassName('people')[0].style.color = slide.getElementsByClassName('avatar')[0].style.borderColor = colors[team] }) } const slides = [...track.getElementsByClassName('slide')] const dots = carousel.getElementsByClassName('dots')[0], dotz = [] const width = slides[0] ? slides[0].clientWidth : 0 for(let i = slides.length; i--;){ const dot = document.createElement('span') dot.setAttribute('class', 'dot') dotz.push(dot) dots.appendChild(dot) } controls.forEach(control => { control.onclick = () => { (/left/).test(control.innerText) ? index-- : index++ index < 0 && (index = slides.length - 1) index > slides.length - 1 && (index = 0) handleCarousel(track, index, width, slides.length, dotz) } }) handleCarousel(track, 0, width, slides.length, dotz) }) } main() //<script> </script> <!-- thumbnail.js --> <script type = 'thumbnail.js' name = 'thumbnail'> const img = loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/ElvenForestByDesignermadsen-dfbj4xh.png/1200px-ElvenForestByDesignermadsen-dfbj4xh.png") draw = () => { clear() imageMode(0) image(img, 0, 0, 900, 600) rectMode(1) fill(0, 100) stroke(250) strokeWeight(3) rect(300, 300, 500, 200, 5) fill(250) noStroke() textAlign(1, 1) textFont("Rowdies", 90) text("Primavera", 300, 285) textFont("Nunito", 25) text("the contest to show where you bloom", 300, 340) } </script> <canvas style = 'display: none;' name = 'ski'></canvas> <script src = 'https://cdn.jsdelivr.net/gh/thelegendski/ski.js@1.8.14/main.js'></script> <script src = 'https://cdn.jsdelivr.net/gh/thelegendski/ski.js@1.8.14/addons/print.js'></script> <script src = 'https://cdn.jsdelivr.net/gh/thelegendski/thumbnail.js@1.1.2/main.js'></script> </body> </html>
Folds	38,299,303,308,309,524,526,678,680,699
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgNP4mZDpCQw
Votes	167
Spin-Offs	9
Type
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Astro
Author Name	astro.ka
Author ID	kaid_4391100538307580650220212
Author Profile Access	PUBLIC

Archive Data

Added	1 years ago, 1707881079725
Updated	10 months ago, 1739391364762
Source Deleted	unknown