Viewing Program

Program Data

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

Title	TDJ's Homepage
ID	4838951661649920
Created	3 years ago, 1641436484616
Updated	3 months ago, 1728347784032
Code	<!DOCTYPE html> <!------------------------------------------------------------------ Thanks for subscribing! =D Credit to Bluebird for the awesome Thumbnail 2.0 script! =] -------------------------------------------------------------------> <html> <head> <meta charset="utf-8"> <title>TDJ's Homepage</title> <!-- Importing fonts --> <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&family=Rubik:wght@900&family=Material+Icons&display=swap" rel="stylesheet"> <!-- Main styling --> <style> * { margin: 0; padding: 0; overflow-x: hidden; scroll-behavior: smooth; } .page { margin: 20px; } body { font-family: 'Open Sans', sans-serif; } a { color: midnightblue; } h1, h2, h3 { font-family: 'Rubik', sans-serif; } /* navbar / #navbar { background: midnightblue; margin: 0; width: 100%; height: 70px; text-align: center; overflow-y: hidden; } #navbar a { color: white; text-decoration: none; margin: 0; padding: 20px; } #navbar a:hover { background-color: #005; } .material-icons { font-size: 30px; } / hero / #title { background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/17/A_U.S._Air_Force_pilot_navigates_an_F-35A_Lightning_II_aircraft_assigned_to_the_58th_Fighter_Squadron%2C_33rd_Fighter_Wing_into_position_to_refuel_with_a_KC-135_Stratotanker_assigned_to_the_336th_Air_Refueling_130516-F-XL333-496.jpg'); background-attachment: fixed; background-position: center; background-size: cover; width: 100%; color: white; text-align: center; font-size: 90px; text-shadow: 0px 0px 20px black; padding: 150px 0px 150px 0px; } / footer / footer { background-color: midnightblue; text-align: center; height: 200px; } #top { text-decoration: none; color: white; font-size: 100px; transition: 1s; margin-top: 55px; } #top:hover { opacity: 0.5; transform: translateY(-10px); } </style> <!-- Slideshow styling --> <style> #slideshow { background: black; height: 220px; overflow-y: hidden; } #slides { display: flex; justify-content: center; background-opacity: 0.1; } .slide { width: 200px; height: 200px; overflow-y: hidden; } button { width: 50px; height: 50px; border-radius: 50px; background-color: white; border: none; cursor: normal; } button:hover { background-color: #DDD; cursor: pointer; } #slide-left { z-index: 1; position: absolute; left: 100px; top: 750px; } #slide-right { z-index: 1; position: absolute; left: 430px; top: 750px; } #dots { display: flex; justify-content: center; } .dot { background-color: white; border: 1px solid white; border-radius: 10px; width: 10px; height: 10px; transition: 1s; margin: 5px; cursor: normal; } .dot:hover { background-color: rgba(0, 0, 0, 0); cursor: pointer; } </style> <!-- Projects styling --> <style> #projects { display: flex; flex-wrap: wrap; } .project { width: 200px; height: 250px; margin: 0px 20px 0px 0px; } .project-img { width: 200px; } </style> </head> <body> <!-- Navbar & hero --> <header> <h1 id="title">TDJ's Subpage</h1> <div id="navbar"> <a href="javascript: changePage(0)" title="Home" class="material-icons">home</a> <a href="javascript: changePage(1)" title="About" class="material-icons">info</a> <a href="javascript: changePage(2)" title="Projects" class="material-icons">code</a> <a href="javascript: changePage(3)" title="How" class="material-icons">question_answer</a> </div> </header> <!-- Home page --> <div class="page"> <h1>Welcome to my subpage!</h1><br> <!-- Projects slideshow --> <div id="slideshow"> <div id="slides"> <div class="slide"> <img src="https://www.khanacademy.org/computer-programming/outback-khantober/4790640459956224/6313282249736192.png"> </div> <div class="slide"> <img src="https://www.khanacademy.org/computer-programming/peasant-life-coc/5641587254411264/latest.png"> </div> <div class="slide"> <img src="https://www.khanacademy.org/computer-programming/mountain-landscape-khantober/6619870348754944/4823919925706752.png"> </div> <div class="slide"> <img src="https://www.khanacademy.org/computer-programming/stealing-christmas/6158032411213824/6402071983210496.png"> </div> <div class="slide"> <img src="https://www.khanacademy.org/computer-programming/robot-rage-ft-gray-wolf/4629155226271744/5904681905733632.png"> </div> </div> <div id="dots"></div> <button id="slide-left" onclick="slideLeft()" class="material-icons">keyboard_arrow_left</button> <button id="slide-right" onclick="slideRight()" class="material-icons">keyboard_arrow_right</button> </div> <!-- Project slideshow script --> <script> var slide = 0; var slides = document.getElementsByClassName('slide'); var dotDiv = document.getElementById('dots'); for (var i = 0; i < slides.length; i++) { dotDiv.innerHTML += '<div class="dot" onclick="showSlide(' + i + ')"></div>'; } var dots = document.getElementsByClassName('dot'); function showSlide(n) { for (var i = 0; i < slides.length; i++) { slides[i].style.display = 'none'; } slides[n].style.display = "block"; for (var i = 0; i < dots.length; i++) { dots[i].style.backgroundColor = 'rgba(0, 0, 0, 0)'; } dots[n].style.backgroundColor = "white"; } showSlide(slide); function slideLeft() { slide--; if (slide <= 0) { slide = slides.length - 1; } showSlide(slide); } function slideRight() { slide++; if (slide >= slides.length) { slide = 0; } showSlide(slide); } </script> <br> <h3>See all of my projects <a href="https://www.khanacademy.org/profile/kaid_682972421482671044758972/projects" target="blank">here</a>.</h3> </div> <!-- About page --> <div class="page"> <h1>ABOUT</h1> <p>Hi, I'm TDJ! =)<br><br>I enjoy making games & other random things here on Khan Academy.<br><br><a href="javascript: changePage(3)">Subscribe</a> to be notified whenever I make a project! =]</p> </div> <!-- Projects page --> <div class="page"> <h1>PROJECTS</h1><br> <div id="projects"></div> <script> var projects = [ ["Outback", "4790640459956224", 89, "An outback Australia-themed platformer. 🤠"], ["Peasant Life", "5641587254411264", 173, "Farming game for Clash of Code 2022."], ["SHIELD", "4685881641713664", 45, "My program for Week 1 of Khantober 2024. =]"], ["Flight: A History of Aviation", "6538691436265472", 57, "One of my best webapges, created for Contest: Taking Flight."], ["Orbit", "4536349031055360", 92, "A simple, fun game!"], ["Dodge TD", "4901508917936128", 103, "A game for Primavera 2024!"], ["Stealing Christmas", "6158032411213824", 71, "Christmas-themed game. >=)"], ["Desert Drive", "5040644890869760", 73, "Probably one of my best dodge games. Made for TCO 2022."], ["Mountain Landscape", "6619870348754944", 60, "My best graphic, made for Khantober 2022."], ["Archipelago", "5201876160659456", 57, "A pixel art game."], ["Avatar War", "5495884891602944", 56, "Game for Primavera 2022."], ["Robot Rage", "4629155226271744", 116, "A simple game."], ["Windmill", "4937647379136512", 11, "A nice little animation I made a long time ago."], ["Snow Capped Peaks ft. Blue Snow", "5527008340557824", 13, "My first ever collab."], ]; for (var i in projects) { var projectName = projects[i][0]; var link = "https://www.khanacademy.org/computer-programming/i/" + projects[i][1] + "/latest.png"; var votes = projects[i][2]; var description = projects[i][3]; document.getElementById('projects').innerHTML += '<div class="project" title="' + description + '"><a href="' + link + '" target="blank"><img src="' + link + '" class="project-img"></a><br><strong>' + projectName + ' · ' + votes + ' votes</strong></div>'; } </script> </div> <!-- How page --> <div class="page"> <h1>HOW</h1> <p>Post a single period in the top voted thread in the Tips & Thanks.</p><br> <p>Please do NOT post more than 3 characters, as other subscribers will be notified and might flag you as spamming. :/</p><br> <p>Thanks for subscribing! =D</p> </div> <!-- Footer --> <footer> <a href="javascript: scroll(0, 0)" class="material-icons up" id="top">keyboard_arrow_up</a> </footer> <!--Page switching script--> <script> var page = document.getElementsByClassName('page'); function changePage(index) { for ( var i = 0; i < page.length; i++ ) { page[i].style.display = 'none'; } page[index].style.display = 'block'; window.scroll(0, 0); } changePage(0); </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> </body> </html>
Folds	8,369
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgIPXg6DMCAw
Votes	76
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	true
Restricted Posting	false
By Child	false
Author Nick	TDJ
Author Name	tdj.ka
Author ID	kaid_682972421482671044758972
Author Profile Access	PUBLIC

Archive Data

Added	23 days ago, 1734464218437
Updated	23 days ago, 1734464275023
Source Deleted	unknown