Viewing Program

Program Data

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

Title	It's a leap year
ID	6331297157529600
Created	10 months ago, 1709225305956
Updated	10 months ago, 1709573319211
Code	<!DOCTYPE html> <!-- --> <html> <head> <meta charset="utf-8"> <title>It's a leap year</title> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Noto+Sans&family=Material+Icons&display=swap'> <link href="https://fonts.googleapis.com/css?family=Dancing+Script&display=swap" rel="stylesheet"> <style> * { transition: .3s ease; font-family:cursive; text-align: center; background:black; } h1{ position:fixed; left:0px; top:0px; color:rgb(158, 242, 255); } #logo{ position:fixed; right:2px; bottom:2px; border-radius:24px; } #logo:hover{ width:10%; } #v { color:rgba(255, 255, 255,70%); font-size:40px; font-family: "Dancing Script", sans-serif; position: absolute; animation-direction: alternate; animation-iteration-count: infinite; animation-timing-function: linear; bottom: -36px; mix-blend-mode: exclusion; animation: Move 5s ease-out infinite; font-family: "Dancing Script", sans-serif; } body { overflow-x: hidden; color:white; margin: 0 auto; } canvas{ background:rgb(224, 25, 224); height:100%; position:fixed; top:0px; left:0px; z-index: 0; } canvas:hover{ } #yes{ position:fixed; color:green; font-size:200%; right:10px; bottom:0px; } #yes:hover{ font-size:220%; } h1{ font-size:600%; } #no{ color:red; font-size:200%; position:fixed; left:10px; bottom:0px; } #no:hover{ font-size:220%; } #quistons{ background-position:fixed; background-size: 100%,100%; background-repeat: no-repeat; position:fixed; left:0px; top:0px; width:100%; height:100%; } #blur{ background-color:rgba(255, 255, 255,70%); position:fixed; left:0px; top:0px; width:100%; height:100%; } #work{ position:fixed; left:0px; top:0px; } @keyframes Move { 0% { right: -210px; } 75%{ right: 10px; } 100% { right: -210px; } } </style> <style> @keyframes intro{ 0%{ transform:rotateY(627deg) rotateX(40deg) scaleX(0) scaleY(0); display: block; } 40%{ transform:rotateY(0deg) rotateX(0deg) scaleX(1) scaleY(1); display: block; } 60%{ transform:rotateY(0deg) rotateX(0deg) scaleX(1) scaleY(1); } 100%{ transform:rotateY(100deg) rotateX(400deg) scaleX(0) scaleY(0); display: none; } } #intro{ background-color: black; margin:0px; overflow:hidden; height:600px; font-family:"Dancing Script"; color:rgb(255, 96, 0); font-weight:550; font-size:407%; } #thumb-h1{ font-size:100%; position:fixed; top:-150px; text-align:center; } #intro img{ position:absolute; top:200px; left:120px; } #intro{ background:black; position:fixed; top:0px; left:0px; width:100%; height:600px; display:hidden; animation: intro 5s; animation-iteration-count: 1; transform:rotateY(0) rotateX(0) scaleX(0) scaleY(0); } #intro img{ width:90%; left:0; top:0; } #intro #vicioustrex{ font-family:"Dancing Script"; color:rgb(247, 131, 8); font-size:197%; position:fixed; width:90%; left:35px; top:384px; } </style> </head> <body> <canvas id = "canvas" onClick = "document.getElementById('intro').remove();"></canvas> <div id = "intro"> <img src="https://www.khanacademy.org/computer-programming/spin-off-of-new-program/6560866140733440/4950751738380288.png"> <h1 id = "vicioustrex">Vicioustrex</h1> </div> <script type=""> //setup{ //get canvas element and context var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'); canvas.width = 600; canvas.height = 600; var width = 600; var height = 600; var scale = function(ax,ay){ ctx.scale(ax,ay); }; var vertex = function(x,y){ ctx.lineTo(x,y); }; var beginShape = function(){ ctx.beginPath(); }; var endShape = function(){ ctx.stroke(); ctx.fill(); ctx.closePath(); }; var bezier = function(x1, y1, cx1, cy1, cx2, cy2, x2, y2){ beginShape(); ctx.moveTo(x1,y1); ctx.bezierCurveTo(cx1, cy1, cx2, cy2, x2, y2); ctx.stroke(); ctx.fill(); endShape(); }; var line = function(x1,y1,x2,y2){ beginShape(); ctx.moveTo(x1,y1); vertex(x2,y2); ctx.stroke(); }; var rotate = function(ang){ ctx.rotate(ang); }; var translate = function(x,y){ ctx.translate(x,y); }; var text = function(m,x,y){ ctx.beginPath(); ctx.lineWidth = 7; ctx.fillText(m,x,y); ctx.fill(); ctx.stroke(); ctx.closePath(); }; var ellipse = function(x,y,w,h){ ctx.beginPath(); /* Headquarters,5,[2, 7, 0], Farm,1,[2, 5, 0], Library,3,[1, 8, 0], Wall,1,[8, 8, 0], Farm,3,[0, 5, 0], Wall,1,[8, 7, 0], Turret,4,[7, 6, 0], Turret,4,[7, 9, 0], Barracks,2,[0, 11, 0], Stables,1,[0, 7, 0], Farm,2,[0, 3, 0], Farm,1,[2, 3, 0], Farm,2,[0, 1, 0], Farm,1,[2, 1, 0], Farm,3,[0, 13, 0], Barracks,1,[0, 12, 0], Farm,2,[2, 13, 0], Stables,3,[4, 9, 0], Turret,4,[7, 13, 0], Turret,4,[7, 2, 0], Farm,1,[4, 13, 0], Barracks,2,[1, 10, 0], 2, 0, 1115.4101615137756, 14/ ctx.ellipse(x, y, w/2, h/2, 0, 0, 2 Math.PI); ctx.fill(); ctx.stroke(); ctx.closePath(); }; var line = function(x1,y1,x2,y2){ ctx.beginPath(); //moving to start of line, in this case (25, 30) ctx.moveTo(x1, y1); //connecting it to the end point of the line, in this case (70, 55) ctx.lineTo(x2, y2); //don't forget your stroke ctx.stroke(); ctx.closePath() }; var bezier = function(x1, y1, cx1, cy1, cx2, cy2, x2, y2){ ctx.beginPath(); ctx.moveTo(x1, y1); ctx.bezierCurveTo(cx1, cy1, cx2, cy2, x2, y2); //adding stroke ctx.fill(); ctx.stroke(); ctx.closePath() }; function bezierVertex(cx1, cy1, cx2, cy2, x2, y2){ ctx.bezierCurveTo(cx1, cy1, cx2, cy2, x2, y2); }; function curveVertex(cpx, cpy, x, y){ ctx.quadraticCurveTo(cpx, cpy, x, y) }; var arc = function(lt, x,y,r,s,st){ ctx.beginPath(); ctx.moveTo(lt[0], lt[1]); ctx.arc(x, y, r, s, st * Math.PI/180); ctx.fill(); ctx.stroke(); ctx.closePath() }; ctx.fillStyle = "lightGray"; ctx.fillRect(0,0,width,height); var linearGradient = ctx.createLinearGradient(477, 238, 148, width / 2, height / 2, 0); linearGradient.addColorStop(1, 'rgb(41, 191, 7)'); linearGradient.addColorStop(0.5, 'rgb(54, 250, 10)'); linearGradient.addColorStop(0, 'rgb(229, 255, 255,10%)'); ctx.fillStyle = linearGradient; ctx.strokeStyle = linearGradient; ctx.lineWidth = "4" ctx.font = "30px Noto Sans" text("• feb/20 2024",448,506); text("• feb/21 2024",399,470); text("• feb/22 2024",352,427); text("• feb/23 2024",309,389); text("• feb/24 2024",275,351); text("• feb/25 2024",232,314); text("• feb/26 2024",192,279); text("• feb/27 2024",164,241); text("• feb/28 2024",136,207); text("• feb/29 2024",99,174); ctx.lineWidth = "4" line(530,600,0,95); ctx.font = "35px Noto Sans" text("• jan/1 2025 - ?",44,138); ctx.lineWidth = "4" ctx.fillStyle = "rgba(0,0,0,0)" var linearGradient = ctx.createLinearGradient(300, 101, 315, width / 2, height / 2, 0); linearGradient.addColorStop(1, 'rgb(255, 255, 255)'); linearGradient.addColorStop(0, 'rgb(252, 5, 46,100%)'); ctx.strokeStyle = linearGradient; beginShape(); ctx.moveTo(79,182); bezierVertex(74,273,30,131,40,154); ctx.lineTo(58,167); ctx.lineTo(40,154); ctx.lineTo(26,184); endShape(); ctx.fillStyle = "black" ctx.font = "50px Noto Sans"; for(var i = 2020,j = -3;i < 2030; i++,j++){ text(i+",", j*140+29, 561) } ctx.font = "80px Noto Sans"; text("It's a year",20,103); ctx.font = "90px Noto Sans"; text("leap",213,109); ctx.lineWidth = "4" var linearGradient = ctx.createLinearGradient(300, 200, 10, width / 2, height / 2, 0); linearGradient.addColorStop(1, 'rgb(8, 250, 56)'); linearGradient.addColorStop(0, 'rgb(229, 255, 255)'); ctx.strokeStyle = linearGradient; ctx.fillStyle = "rgba(0,0,0,0)"; beginShape(); ctx.moveTo(200,494); bezierVertex(218,453,231,401,348,488); ctx.lineTo(338,467); ctx.lineTo(348,487); ctx.lineTo(326,484); endShape(); ctx.lineWidth = "6" ctx.strokeStyle = "black"; beginShape(); ctx.moveTo(180,485); ctx.lineTo(264,395); ctx.lineTo(375,476); ctx.lineTo(264,395); ctx.lineTo(282,286); ctx.lineTo(216,370); ctx.lineTo(282,286); ctx.lineTo(275,328); ctx.lineTo(254,363); endShape(); ellipse(294,253,50,50); ctx.lineWidth = "2"; beginShape(); ctx.moveTo(287,266); bezierVertex(298,263,299,276,309,257); endShape(); line(280,248,290,255); line(306,245,301,250); </script> </body> </html>
Folds	4,505
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgKvw_8ifCww
Votes	19
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	Vicioustre𝑥 BBB#
Author Name	Vicioustrex
Author ID	kaid_1063463007130342809105382
Author Profile Access	PUBLIC

Archive Data

Added	2 days ago, 1735937712622
Updated	2 days ago, 1735937712622
Source Deleted	unknown