Viewing Program

Program Data

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

Title	Google Remake 4 [Khantober]
ID	4772805165367296
Created	2 months ago, 1728949108095
Updated	2 months ago, 1728955412589
Code	<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Google Remake 4 [Khantober]</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=Google+Sans:wght@400;500;600&family=Google+Sans+Text:wght@400;500&family=Anton:wght@400;500&family=Orbitron:wght@400;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" 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"/> <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 rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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 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/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&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 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=Lato\|Material+Icons+Round\|Roboto" rel="stylesheet"/> <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=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap" rel="stylesheet"> <style> body, html{ font-family: "Google Sans Display"; text-align:center; transition:0.5s; } body.dark-mode{ transition:0.5s; background-color:#202124; color:white!important; } /*.dark-mode{/ /* color:white!important;/ /}/ body.yellow-mode{ transition:0.5s; background-color:rgb(255, 249, 191); } body.pink-mode{ transition:0.5s; background-color:rgb(252, 189, 255); } body.green-mode{ transition:0.5s; background-color:rgb(153, 219, 175); } body.mountain-mode{ background:url("https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/LH_95.jpg/440px-LH_95.jpg"); transition:0.5s; } body.river-mode{ background:url("https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Elwha_River_-_Humes_Ranch_Area2.JPG/2560px-Elwha_River_-_Humes_Ranch_Area2.JPG"); transition:0.5s; } @keyframes fly{ 0%{ background-size:200%; } 99%{ background-size:400%; } 100%{ background-size:200%; } } body.desert-mode{ background:url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Aerial_panorama_of_the_view_facing_east_from_the_top_of_Taiping_Mountain.jpg/1600px-Aerial_panorama_of_the_view_facing_east_from_the_top_of_Taiping_Mountain.jpg"); background-position:center; animation: fly 80s infinite; transition:0.5s; } .yellow-mode #mic-icon{ color:rgb(117, 109, 0); } .green-mode #mic-icon{ color:rgb(0, 115, 29); } .pink-mode #mic-icon{ color:rgb(115, 0, 104); } .dark-mode #mic-icon{ color:rgb(110, 110, 110); } .dark-mode #g, .dark-mode #specialE{ color:white!important; } .yellow-mode #g, .yellow-mode #specialE{ color:rgb(117, 109, 0)!important; } .pink-mode #g, .pink-mode #specialE{ color:rgb(115, 0, 104)!important; } .green-mode #g, .green-mode #specialE{ color:rgb(0, 115, 29)!important; } .mountain-mode #g, .mountain-mode #specialE{ color:rgb(252, 252, 252)!important; } .river-mode #g, .river-mode #specialE{ color:rgb(252, 252, 252)!important; } .desert-mode #g, .desert-mode #specialE{ color:rgb(252, 252, 252)!important; } .dark-mode input[type = "text"]{ background-color:rgb(31,31,31); color:white; } .yellow-mode input[type = "text"]{ background-color:rgb(255, 244, 143); box-shadow:none!important; } .pink-mode input[type = "text"]{ background-color:rgb(255, 255, 255); } .dark-mode #popup{ background-color:rgb(31,31,31); color:rgb(245, 245, 245); border-color:rgb(89, 88, 83); } .pink-mode #popup{ background-color:rgb(255, 140, 251); color:rgb(83, 3, 92); border-color:rgb(83, 3, 92); } .yellow-mode #popup{ background-color:rgb(255, 245, 138); color:rgb(92, 83, 2); border-color:rgb(92, 83, 2); } .green-mode #popup{ background-color:rgb(119, 209, 162); color:rgb(3, 92, 37); border-color:rgb(3, 92, 16); } .dark-mode input[type = "text"]:focus, .dark-mode input[type = "text"]:hover{ background-color:rgb(48,49,52); box-shadow:none; } .dark-mode #feelingButton{ background-color:rgb(48,49,52); color:rgb(161, 161, 161); } .green-mode #feelingButton{ background-color:rgb(0, 115, 29); color:rgb(184, 240, 198); } .yellow-mode #feelingButton:hover{ box-shadow:none; border:0.5px solid rgb(117, 109, 0); } .yellow-mode #feelingButton{ background-color:rgb(201, 181, 0)!important; color:rgb(240, 240, 240); } .dark-mode #feelingButton:hover{ border:0.5px solid rgb(161, 161, 161); box-shadow:none; } .pink-mode #feelingButton{ box-shadow:none; background-color:rgb(133, 5, 133)!important; color:white; } .pink-mode #feelingButton:hover{ border:0.5px solid rgb(105, 0, 105); } .dark-mode #customizeTheme{ background:rgb(46, 46, 46); color:white; box-shadow:0.5px 0.5px 4px rgb(120, 120, 120); } .green-mode #customizeTheme{ background:rgb(124, 204, 122); color:rgb(32, 130, 5); box-shadow:0.5px 0.5px 4px rgb(32, 130, 5); } .dark-mode #sideNav{ background:rgb(46, 46, 46)!important; color:white!important; border-left:3px solid rgb(89, 89, 89); } .yellow-mode #sideNav{ background:rgb(255, 245, 138)!important; color:rgb(115, 96, 0)!important; border-left:3px solid rgb(115, 96, 0)); } .pink-mode #sideNav{ background:rgb(235, 164, 235)!important; color:rgb(115, 0, 109)!important; border-left:3px solid rgb(115, 96, 0); } .green-mode #sideNav{ background:rgb(139, 196, 135)!important; color:rgb(0, 115, 33)!important; border-left:3px solid rgb(0, 115, 21)!important; } #sideNav{ border-left:3px solid rgb(232, 232, 232); } .button-container { text-align: center; } .full-circle-button { width: 40px; height: 40px; background-color: transparent; border: none; color: white; font-size: 16px; font-weight: bold; text-transform: uppercase; cursor: pointer; border-radius: 50%; position: relative; overflow: hidden; } .full-circle-button::before { content: ''; position: absolute; top: 0; left: 0; width: 200%; height: 200%; transform: translate(-50%, -50%) rotate(90deg); transform-origin: center center; } .full-circle-button:focus, .full-circle-button:active, .full-circle-button.last-clicked { border: 1px double white; outline: 3px solid #1965f2; border: 4px double white blue; } #feelingButton { font-family:"Lato"; font-weight:300; font-size: 16px; padding: 10px 20px; border: none; background-color: #f8f9fa; color: rgb(74, 74, 74); border-radius: 4px; cursor: pointer; position: relative; overflow: hidden; height: 40px; width:189px; align-items: center; justify-content: center; } #feelingButton:hover{ box-shadow:0.5px 0.5px 5px rgb(196, 196, 196); } .feeling-wrapper { display: flex; flex-direction: column; position: absolute; top: 0; transition: transform 0.5s ease; } .feeling { height: 40px; display: flex; align-items: center; justify-content: center; white-space: nowrap; } #searchbar, #otherSearchbar{ font-family:Lato ; font-weight:300; width:60%; padding-top:11px; padding-bottom:11px; border-radius: 25px; font-size:16px; padding-left:51px; margin-bottom:30px; margin-top:-29px; outline:none!important; border:0.5px solid lightgrey; transition:0.1s; } #otherSearchbar{ margin-bottom:-20px; position:relative; top:3px; } #searchbar:hover, #searchbar:focus, #otherSearchbar:hover, #otherSearchbar:focus{ box-shadow:0.5px 0.5px 5px rgb(196, 196, 196); } .rotated{ display: inline-block; transform: rotate(-15deg); } #search-icon{ color:grey; position:absolute; left:19%; font-weight:300; top:51.8553335353333333%;/precisely :3/ } #mic-icon { background: radial-gradient(circle at top, #4781f4 50%, transparent 50%),radial-gradient(circle at right, red 50%, transparent 50%),radial-gradient(circle at bottom, green 50%, transparent 50%); color: transparent; -webkit-background-clip: text; background-clip: text; position:absolute; left:77%; font-weight:300; top:51.8553335353333333%;/precisely :3/ } #camera1-icon { background: radial-gradient(circle at top, #4781f4 50%, transparent 50%),radial-gradient(circle at right, red 50%, transparent 50%),radial-gradient(circle at bottom, green 50%, transparent 50%); color: transparent; -webkit-background-clip: text; background-clip: text; } #mic-icon:hover{cursor:pointer;} .popup { text-align:right!important; display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; border: 1px solid #ccc; box-shadow: 0 4px 8px rgba(0,0,0,0.2); z-index: 1000; padding-right:10%; } .overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 999; } .popup-content { text-align: left; } .close { position: absolute; top: 7px; right: 10px; cursor: pointer; font-size:40px; } #notifs{ background: radial-gradient(circle at top, #4781f4 50%, transparent 50%),radial-gradient(circle at right, red 50%, transparent 50%),radial-gradient(circle at bottom, rgb(255, 208, 0) 50%, transparent 50%); color: transparent; -webkit-background-clip: text; background-clip: text; } @keyframes specialAnimation{ 0%{rotate:0deg;} 33%{rotate:20deg;} 66%{rotate:-40deg;} 100%{rotate:0deg;} } #specialE:hover{ cursor:pointer; animation:specialAnimation 0.2s linear infinite; } #SearchPage{ position:absolute; left:0; top:0; width:100%; height:100%; background:white; display:none; } #sideNav{ position:fixed; transition:0.5s; top:0; left:700px; z-index:100; overflow-y:scroll; } .opened #sideNav{ background:rgb(242, 242, 242); position:fixed; left:410px; right:0px; top:0px; width:150px; padding-top:10px; padding-left:20px; padding-right:20px; height:100%; text-align:left; display:block; animation:left 1s; } #customizeTheme{ background:rgb(255, 255, 255); border:none; box-shadow:0.6px 0.6px 5px rgb(196, 196, 196); border-radius:100px; width:160px; height:30px; font-family:Lato; font-weight:300; cursor:pointer; position:relative; left:201px; top:44px; transition:0.1s; } #customizeTheme:active{ box-shadow:0.6px 0.6px 10px rgb(196, 196, 196); background:rgb(242, 242, 242); } #closeNavButton{ position:fixed; left:93%; cursor:pointer; transition:0.5s; display:none; } #closeNavButton:hover{ rotate:90deg; } .bgImageSelect{ border-radius:10px; width:80%; height:20%; cursor:pointer; } .searchVal{ color:rgb(0, 136, 255); font-family:Lato; font-weight:200; text-decoration:none; font-size:23px; } .searchVal:hover{ text-decoration:underline; text-underline-offset:1px; text-underline-weight:0.5px; cursor:pointer; } .searchVal:visited{ color:rgb(140, 0, 255); font-family:Lato; font-weight:200; text-decoration:underline; } #resultsAmount{ font-size:11px; color:grey; } #scene-container{ position:absolute; display:none; left:0px; top:0px; width:100%; height:100%; margin-top:5%!important; overflow-y:scroll; text-align:left; color:black; } #scene-header{ display:none; position:fixed; top:0; left:0; width:100%; height:10%; background:white; border-bottom:0.5px solid lightgrey; box-shadow:0.6px 10px 20px rgb(196, 196, 196); } #scrollDownToSee{ position:fixed; top:90%; left:38%; display:none; } .rippleEffect { position: relative; overflow: hidden; } .rippleEffect .ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(0, 0, 0, 0.3); animation: ripple-animation 600ms linear; } .dark-mode .rippleEffect .ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255, 255, 255, 0.3); animation: ripple-animation 600ms linear; } @keyframes ripple-animation { to { transform: scale(4); opacity: 0; } } #intro { background: radial-gradient(circle, rgb(54, 54, 54), rgb(0, 0, 0)); width: 600px; height: 600px; display: flex; justify-content: center; align-items: center; text-align: center; margin: 0; padding: 0; height: 100vh; background-color: #000; opacity: 1; transition: opacity 1s; z-index:1000; overflow:hidden; position:absolute; left:0; top:0; } #intro .text { font-family: 'Georgia', serif; font-size: 2rem; text-transform: uppercase; color: white; display: flex; flex-wrap: wrap; justify-content: center; } #intro .letter { opacity: 0; animation: fadeIn 0.5s forwards; } @keyframes fadeIn { to { opacity: 1; } } #intro .letter { text-shadow: 0 0 10px rgba(255, 255, 255); } #intro .fadeOut { opacity: 0; } #resultsContainer { /background-image:none!important;/ /background-color:white;/ } /History page!/ #searchingHistory{ display:none; background:rgb(250, 250, 250); position:absolute; left:0; top:0; width:100%; height:100%; overflow-y:scroll; overflow-x:hidden!important; text-align:left; } /clear search history btn/ #searchingHistory button{ font-family:'IBM Plex Sans'; text-transform: uppercase; background:rgb(212, 212, 212); border:0.5px solid rgb(235, 230, 230); padding:10px; cursor:pointer; font-size:13px; border-radius:2px; position:relative; left:60%; top:10%; } /Styling of the history button/ #historyLink{ position:absolute; top:2%; left:89%; color:rgb(33, 33, 33); } .dark-mode #historyLink{ position:absolute; top:2%; left:89%; color:rgb(217, 217, 217)!important; } /Styling of the history icon top right corner/ #historyLink .material-symbols-outlined{ color:rgb(33, 33, 33)!important; position:relative; top:5px; cursor:pointer; } .dark-mode #historyLink .material-symbols-outlined{ color:rgb(209, 209, 209)!important; position:relative; top:5px; cursor:pointer; } /Displays "History" on hover (for clarification) and UX/ #historyLink:hover:after{ content:"History"; position:relative; background:rgb(48, 48, 48); color:white; top:-10px; padding:5px; border-radius:2px; } /Gives the "tooltip triangle" appearance/ #historyLink:hover::before { content: ""; position: absolute; bottom: 50%; left: 50%; transform: translateX(-50%); border-width: 0 5px 5px 5px; border-style: solid; border-color: transparent transparent rgb(48, 48, 48) transparent; } #historyTable { background:white; width: 88%; position:relative; left:5%; border-collapse: collapse; } #historyTable td { border: 1px solid #ddd; padding: 8px; text-align: left; } .historyItem { cursor: pointer; } .historyItem:hover { background-color: #f0f0f0; } #thumb-MAIN{ background-image:url("https://upload.wikimedia.org/wikipedia/en/thumb/a/a7/Google_Homepage.PNG/600px-Google_Homepage.PNG"); position:absolute; width:100%; background-size:300%; background-position:-602px -118px; height:100%; left:0; top:0; display:none; } /note to self: make sure to add .dark-mode infront [check]/ .dark-mode #searchingHistory{ display:none; background:rgb(51, 51, 51); position:absolute; left:0; top:0; width:100%; height:100%; overflow-y:scroll; overflow-x:hidden!important; text-align:left; color:rgb(240, 240, 240)!important; } .dark-mode #searchingHistory button{ font-family:'IBM Plex Sans'; text-transform: uppercase; background:rgb(31, 31, 31); border:0.5px solid rgb(5, 5, 5); padding:10px; cursor:pointer; font-size:13px; color:rgb(240, 240, 240)!important; border-radius:2px; position:relative; left:60%; top:10%; } .dark-mode #historyTable { background:rgb(18, 18, 18); width: 88%; position:relative; left:5%; border-collapse: collapse; } .dark-mode #historyTable td { border: 1px solid rgb(59, 59, 59); padding: 8px; text-align: left; } .dark-mode .historyItem:hover { background-color: rgb(33, 33, 33); } .opt2{ color:rgb(61, 61, 61); text-decoration:none; margin-left:10px; margin-right:10px; position:relative; top:10%; cursor:pointer; left:29%; } .dark-mode .opt2{ color:rgb(214, 214, 214); text-decoration:none; margin-left:10px; margin-right:10px; position:relative; top:10%; cursor:pointer; left:29%; } .dark-mode .opt2.activeTab{ color:rgb(255, 255, 255); text-decoration:none; margin-left:10px; margin-right:10px; position:relative; top:10%; cursor:pointer; left:29%; } .opt2.activeTab{ text-decoration:underline; text-underline-width:10px; text-underline-offset:8px; text-underline-height:5px; color:black; text-decoration-thickness:3px; margin:0; font-weight: bold; } .opt2.activeTab::before{ content:'\00a0\00a0\00a0'; } .opt2.activeTab::after{ content:'\00a0\00a0\00a0'; } #resultsAmount, #resultsList{ margin-left:24%; } #resultsAmount{ margin-left:31%; margin-top:30px; } #googleLogo{ background-image:url("https://www.khanacademy.org/computer-programming/open-jpeg-white/5136074341269504/latest.png"); margin-bottom:0px!important; display:inline; background-size:110%; background-position:92%; position:relative; width:61%; height:10%; left:0px; top:0; background-image: url("https://www.khanacademy.org/computer-programming/open-jpeg-white/5136074341269504/latest.png"); border-radius:10px; background-position: center; display: inline-block; width: 161px; height: 48px; margin-bottom:-190px!important; /border:1px solid red;/ } .fa-github{ font-size:30px; position:fixed; left:4%; top:89%; cursor:pointer; } .khan-symbol{ position:fixed; left:10%; top:88.5%; cursor:pointer; } .fa-github:hover::after{ content:"Github"; font-family:'Google Sans'; font-size:15px; position:absolute; left:-13px; font-weight:500; top:-25px; color:white; background:black; padding:4px; border-radius:2px; } .khan-symbol:hover::after{ content:"Subscribe"; font-family:'Google Sans'; font-size:15px; position:absolute; left:-19px; font-weight:100; top:-23px; color:white; background:black; padding:4px; padding-top:2px; padding-bottom:2px; border-radius:2px; } #autofiller{ position:fixed; top:59%; left:16.4%; background:white; width:67.19%; height:auto; box-shadow:0.6px 5px 10px rgb(196, 196, 196); border-bottom-left-radius:25px; border-bottom-right-radius:25px; border-top:0.5px solid lightgrey; display:none; z-index:100; opacity:0; transition: 0.1s; padding-bottom:20px; color:black; } .dark-mode #autofiller, .dark-mode #autofillerOption{ background-color: #232323; color:white; } #autofillerOption{ position:relative; padding:10px; padding-top:0px; width:100%; background:Transparent; font-size:15px; font-family:"Lato"; font-weight:300; /padding-left:40px;/ text-align:left; border-color:Transparent; cursor:pointer; } #autofillerOption:hover{ background:rgb(230, 230, 230); } .dark-mode #autofillerOption:hover{ background:rgb(28, 28, 28); } .yellow-mode #autofiller, .yellow-mode #autofillerOption{ background-color: #fff48f; color:rgb(150, 141, 9); } .yellow-mode #autofillerOption:hover{ background:rgb(212, 202, 115); } #completeIcon{ position:relative; top:5px; padding-right:4px; font-weight:300; color:rgb(99, 99, 99); } #reportFilled{ position:absolute; top:67.66666666666%; left:57%; font-size:12px; color:black; color:rgb(99, 99, 99); /font-weight:1000!important;/ font-style:italic; cursor:pointer; } /Will comment later- for bug testing(for my quick and easy access at all times, I will not remove)/ /#intro{/ / display:none;/ /}/ /body{/ / overflow-y:scroll!important;/ /}/ /#searchingHistory{/ / display:block;/ /}/ /#resultsContainer{/ / display:block!important;/ /}/ /#resultsContainer h3{/ / position:relative;/ / top:1/ /}/ /#googleSearch1{/ / display:none!important;/ /}/ </style> </head> <!--Loads content--> <body onload = "document.body.style.display = ''"> <!--Search Page (#1)--> <div id = "googleSearch1"> <!--Google Title--> <h1 style = "font-weight:600;font-size:80px;position:relative;" id = "gooogle"> <span style = "color:#4781f4;" id = "g">G</span><span style = "color:#E22F33;"id = "g">o</span><span style = "color:#f7c400;"id = "g">o</span><span style = "color:#4781f4;"id = "g">g</span><span style = "color:#38bb51"id = "g">l</span><span style="color:#df3033;" class="rotated" id="specialE" onclick="openPopup('Nice going!', '', 'You found the ' + generateMessage());">e</span> </h1> <input type="text" autocomplete="off" id="searchbar" placeholder = "Search Google or type a URL"/> <div id = "autofiller"> </div> <span class="material-symbols-outlined" id = "search-icon"> search </span> <span class='material-icons-round' id = "mic-icon" onclick = "openPopup('Access blocked', '', 'Oh dear! Looks like your mic is innaccesible. Reach out for additional support')"> mic </span> <br> <!--Access History Link--> <a id = "historyLink" onclick = "showHistory()"> <span class="material-symbols-outlined"> history </span> <span style = "color:white!important;opacity:0;padding:5px;position:relative;top:10px">history</span> </a> <!--I am feeling/GS...--> <div class="button-container" style = "display:inline;margin-right:20px"> <button id="feelingButton"> <div class="feeling-wrapper"> <div class="feeling" onclick = "">I'm feeling Lucky</div> <div class="feeling" onclick = "window.open('https://www.google.com/search?q=google+random+number+generator&csf=b&ct=ifl&cad=2:adventurous&ei=LyiPZpnOGLiWkPIPqp-44As&ved=0ahUKEwjZobW33p2HAxU4C0QIHaoPDrwQnRsIFA&rct=j', '_blank')">I'm feeling Adventurous</div> <div class="feeling">I'm feeling Hungry</div> <div class="feeling">I'm feeling Playful</div> <div class="feeling">I'm feeling Curious</div> <div class="feeling">I'm feeling Doodley</div> <div class="feeling">I'm feeling Wonderful</div> <div class="feeling">I'm feeling Artistic</div> </div> </button> </div> <button onclick = "window.open('https://google.com', '_blank')" id = "feelingButton" style = "display:inline;top:-4px;margin-right:3%;width:25%">Google Search</button><br> <button id = "customizeTheme" class = "rippleEffect" onclick = "openNavbar()"><span class="material-symbols-outlined" style = "font-weight:300;position:relative;top:1px;left:2px;" > edit </span><span style = "position:relative;top:-5px; left:2px">Customize Chrome</span></button> <!--Social links--> <i class="fa fa-github" onclick = "confirmThirdPartyURL('github.com/kiaantolia')"></i> <span class = "khan-symbol" onclick ="window.open('https://www.khanacademy.org/computer-programming/kiaantolias-homepage/5941425767366656', '_blank')"> <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32" height="32" viewBox="0 0 48 48"> <path fill="#00bfa5" d="M42.605,32.768V14.232c0-1.072-0.572-2.062-1.5-2.598L25.053,2.366c-0.928-0.536-2.072-0.536-3,0 L6,11.634c-0.928,0.536-1.5,1.526-1.5,2.598v18.536c0,1.072,0.572,2.062,1.5,2.598l16.053,9.268c0.928,0.536,2.072,0.536,3,0 l16.053-9.268C42.033,34.83,42.605,33.84,42.605,32.768z"></path><circle cx="23.75" cy="16.25" r="4.75" fill="#fff"></circle><path fill="#fff" d="M39,20c0,9.113-6.716,16-15,16S9,29.113,9,20c15,0,14,15,15,15S24,20,39,20z"></path> </svg> </span> </div> <!--Content <filler>--> <div id = "SearchPage"> no content loding </div> <!--Results container--> <div id="resultsContainer" style="display:none; text-align:left;"> <h4 style = "font-weight:600;font-size:24px;position:relative;"> <div id = "googleLogo">   </div> <input type="text" autocomplete="off" id="otherSearchbar" /> <span class="material-icons-round" id = "camera1-icon" style = "position:relative;top:-24px;left:521px;cursor:pointer;" onclick = "openPopup('Access blocked', '', 'Oh dear! Looks like your camera is innaccesible. Reach out for additional support')"> center_focus_weak </span> <span class="material-icons-round" style = "position:relative;top:-22px;left:27%;cursor:pointer;color:grey" onclick = "document.getElementById('otherSearchbar').value = ''"> close </span> <span class='material-icons-round' id = "mic-icon" onclick = "openPopup('Access blocked', '', 'Oh dear! Looks like your mic is innaccesible. Reach out for additional support')" style = "top:8px;left:493px;"> mic </span> </h4> <a id = "opt" class = "activeTab opt2">Home</a> <a id = "opt" class = "opt2" >Images</a> <a id = "opt" class = "opt2" >News</a> <p id = "resultsAmount">Not loaded! System error</p> <ul id="resultsList"></ul> </div> <!--Side Navbar--> <div id = "sideNav"> <span class="material-symbols-outlined" id = "closeNavButton" onclick = "closeNavBar()"> close </span> <h3>Themes:</h3> <button onclick = "darkMode()" class ="full-circle-button" style = " background: linear-gradient(to bottom right, rgb(61, 61, 61) 50%, rgb(79, 79, 79) 50%);" ></button> <button onclick = "yellowMode()" class ="full-circle-button" style = " background: linear-gradient(to bottom right, rgb(181, 181, 0) 50%, rgb(224, 227, 36) 50%);"></button> <button onclick = "pinkMode()" class ="full-circle-button" style = " background: linear-gradient(to bottom right, rgb(127, 0, 138) 50%, rgb(202, 128, 207) 50%);"></button> <button onclick = "greenMode()" class ="full-circle-button" style = " background: linear-gradient(to bottom right, rgb(0, 138, 28) 50%, rgb(128, 207, 137) 50%);"></button> <button onclick = "normalMode()" class ="full-circle-button" style = " background: linear-gradient(to bottom right, rgb(232, 232, 232) 50%, rgb(250, 250, 250) 50%);"></button> <h3>Backgrounds:</h3> <img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Elwha_River_-_Humes_Ranch_Area2.JPG/2560px-Elwha_River_-_Humes_Ranch_Area2.JPG" onclick = "riverSelect()"class = "bgImageSelect"/> <img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/LH_95.jpg/440px-LH_95.jpg" onclick = "spaceSelect()" class = "bgImageSelect"/> <h3>Animated:</h3> <img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Aerial_panorama_of_the_view_facing_east_from_the_top_of_Taiping_Mountain.jpg/1600px-Aerial_panorama_of_the_view_facing_east_from_the_top_of_Taiping_Mountain.jpg" onclick = "desertSelect()" class = "bgImageSelect"/> <p id = "scrollDownToSee">Scroll down to see more!</p> </div> <!--Search history tables--> <div id = "searchingHistory"> <button id = "goBack" style="position:relative;left:30px;"><span class="material-symbols-outlined"style = "font-size:10px;" onclick = "hideHistory()"> arrow_back </span></button> <button id = "clearHistory" class = "rippleEffect">clear search history</button> <div id="historyContainer"> <h2><br></h2> <table id="historyTable"> <tbody id="historyList"> <!--Search history items will be added here (automatically)--> </tbody> </table> </div> </div> <!--Thumbnail--> <div id = "thumb-MAIN"> <h1 style = "font-family: 'Impact'">A Complete Recode! </h1> <p style = "position:absolute;left:59px;top:400px">"soo excited for google 4!!" - LJE</p> <p style = "position:absolute;left:359px;top:50px">"I’m excited for this! " - LJ </p> <p style = "position:absolute;left:209px;top:460px;color:rgb(22, 0, 120)">"lets go google remake! - Duke </p> </div> <!--Scene Container--> <div id = "scene-container"> <!--Scene goes here--> </div> <div id = "scene-header"> <p style = "font-weight:600;font-size:20px;position:relative;top:-15px;left:-185px;display:inline-block;" id = "gooogle"> <span class="material-symbols-outlined" style = "font-size:20px;color:rgb(105, 105, 105);display:inline-block;top:3px;position:relative;cursor:pointer;margin-right:22px" onclick = "returnToHome()"> arrow_back_ios </span> <span style = "color:#4781f4;" id = "g">G</span><span style = "color:#E22F33;"id = "g">o</span><span style = "color:#f7c400;"id = "g">o</span><span style = "color:#4781f4;"id = "g">g</span><span style = "color:#38bb51"id = "g">l</span><span style="color:#df3033;" class="rotated">e</span> <span style="color:rgb(105, 105, 105);" id = "g">Search</span> </p> </div> <!--Button script--> <script type = "module"> //I am feeling (...) button document.addEventListener('DOMContentLoaded', function () { const button = document.getElementById('feelingButton'); const feelingWrapper = document.querySelector('.feeling-wrapper'); const feelings = document.querySelectorAll('.feeling'); const totalFeelings = feelings.length; let index = 0; let interval; let stopTimeout; button.addEventListener('mouseover', () => { function scrollFeelings() { let direction = Math.random() < 0.5 ? 1 : -1; // Randomly choose up or down let speed = Math.random() 500 + 500; // Random speed between 500ms and 1000ms index = (index + direction + totalFeelings) % totalFeelings; feelingWrapper.style.transition = `transform ${speed}ms ease`; feelingWrapper.style.transform = `translateY(-${index * 40}px)`; interval = setTimeout(scrollFeelings, speed); } scrollFeelings(); stopTimeout = setTimeout(() => { clearTimeout(interval); index = Math.floor(Math.random() * totalFeelings); // Choose a random feeling to stop on feelingWrapper.style.transition = 'transform 0.5s ease'; feelingWrapper.style.transform = `translateY(-${index * 40}px)`; }, 3000); // Stop after exactly 3 seconds button.addEventListener('mouseout', () => { clearTimeout(interval); clearTimeout(stopTimeout); index = 0; feelingWrapper.style.transition = 'transform 0.5s ease'; feelingWrapper.style.transform = `translateY(0)`; }, { once: true }); }); }); </script> <!--<br> <-- if things break--> <!--Popup display--> <div id="popup" class="popup"> <span class="close" onclick="closePopup()">×</span> <div id="popup-content" class="popup-content"> <!-- Content will be added dynamically --> <span class="material-symbols-outlined" style = "position:relative;top:3px" id = "notifs"> notifications </span> <h2 id="popup-title" style = "display:inline"></h2> <div id="popup-body"></div> </div> </div> <!-- Overlay --> <div id="overlay" class="overlay"></div> <!--Popup Script--> <script type> function generateMessage() { return "e" + "a" + "s" + "t" + "e" + "r" + " " + "e" + "g" + "g"; } function openPopup(title, heading, content) { document.getElementById("popup-title").innerText = title; document.getElementById("popup-body").innerHTML = ` <p>${content}</p> `; document.getElementById("popup").style.display = "block"; document.getElementById("overlay").style.display = "block"; } function closePopup() { document.getElementById("popup").style.display = "none"; document.getElementById("overlay").style.display = "none"; } setTimeout(function() { openPopup('Hello there =)', '', 'Welcome to Google Remake 4. Make sure to subscribe'); }, 3000); </script> <!--Ripple effect script--> <script type> document.querySelectorAll('.rippleEffect').forEach(button => { button.addEventListener('click', function(event) { const ripple = document.createElement('span'); const rect = button.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); const x = event.clientX - rect.left - size / 2; const y = event.clientY - rect.top - size / 2; ripple.style.width = ripple.style.height = `${size}px`; ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; ripple.classList.add('ripple'); button.appendChild(ripple); ripple.addEventListener('animationend', () => { ripple.remove(); }); }); }); </script> <!--Themes script--> <script> function darkMode(){ document.body.classList.toggle("dark-mode"); document.body.classList.remove("pink-mode"); document.body.classList.remove("yellow-mode"); document.body.classList.remove("green-mode"); } function yellowMode(){ document.body.classList.toggle("yellow-mode"); document.body.classList.remove("pink-mode"); document.body.classList.remove("green-mode"); document.body.classList.remove("dark-mode"); } function pinkMode(){ document.body.classList.toggle("pink-mode"); document.body.classList.remove("yellow-mode"); document.body.classList.remove("dark-mode"); document.body.classList.remove("green-mode"); } function greenMode(){ document.body.classList.toggle("green-mode"); document.body.classList.remove("yellow-mode"); document.body.classList.remove("dark-mode"); document.body.classList.remove("pink-mode"); } //img's function spaceSelect(){ document.body.classList.toggle("mountain-mode"); document.body.classList.remove("river-mode"); document.body.classList.remove("desert-mode"); } function riverSelect(){ document.body.classList.toggle("river-mode"); document.body.classList.remove("mountain-mode"); document.body.classList.remove("desert-mode"); } function desertSelect(){ document.body.classList.toggle("desert-mode"); document.body.classList.remove("mountain-mode"); document.body.classList.remove("river-mode"); } function normalMode(){ document.body.classList.remove("green-mode"); document.body.classList.remove("yellow-mode"); document.body.classList.remove("dark-mode"); document.body.classList.remove("pink-mode"); } function openNavbar(){ document.body.classList.add("opened"); document.getElementById("scrollDownToSee").style.display = "block"; document.getElementById("closeNavButton").style.display = "block" } //close the nav bar when clicked somewhere else window.addEventListener("click", function(event){ //Intense calculations to make sure that you are clicking out of the navbar no matter what screen size const mouseX = event.clientX; if(event.clientX<window.innerWidth0.675){ closeNavBar(); } //405 }) //smoothly close nav bar courtosey(idk how 2 spell) of CSS function closeNavBar(){ document.body.classList.remove("opened"); document.getElementById("scrollDownToSee").style.display = "none"; document.getElementById("closeNavButton").style.display = "none" } //switch theme. that blue last focused circle document.addEventListener('DOMContentLoaded', function() { var buttons = document.querySelectorAll('.full-circle-button'); buttons.forEach(function(button) { button.addEventListener('click', function() { buttons buttons.forEach(function(btn) { btn.classList.remove('last-clicked'); }); this.classList.add('last-clicked'); }); }); //same thing for tabs var tabs = document.querySelectorAll('.opt2'); tabs.forEach(function(tab) { tab.addEventListener('click', function() { tabs.forEach(function(tab) { tab.classList.remove('activeTab'); }); this.classList.add('activeTab'); }); }); }); </script> <!--Misc. script--> <script> //switch history function showHistory(){ document.getElementById("searchingHistory").style.display = "block" document.getElementById("googleSearch1").style.display = "none" } function hideHistory(){ document.getElementById("searchingHistory").style.display = "none" document.getElementById("googleSearch1").style.display = "block" } function confirmThirdPartyURL(url){ var confirmURL = confirm("Do you wish to leave the site and go to " + url) if(confirmURL){ if(url.startsWith("https://") \|\| url.startsWith("http://")){ window.open(url); } else{ window.open("http://" + url) } } else{ return; } } </script> <!--Search suggestions script--> <script> //<script> var ddfsdfsdnfijoijf = document.getElementById("searchbar"); //pls forgive me just one var autoFillACupOfTea = document.getElementById("autofiller"); //pls forgive me just two i promise var valuesOfTea = []; //:begs: just this script idk why your here. your probably timothy or some other guy that cares abuot neatness sm ddfsdfsdnfijoijf.addEventListener("focus", function(event) { ddfsdfsdnfijoijf.style.borderBottomLeftRadius = '0px'; ddfsdfsdnfijoijf.style.borderBottomRightRadius = '0px'; autoFillACupOfTea.style.display = "block"; autoFillACupOfTea.style.opacity = "1"; if(!historyRecorded\|\|historyItemAppend==""){ autoFillACupOfTea.innerHTML = '<button id = "autofillerOption"><span class="material-symbols-outlined" id = "completeIcon">trending_up</span> kiaantolia newest release</button><button id = "autofillerOption"><span class="material-symbols-outlined" id = "completeIcon">trending_up</span> best colorschemes to use in web design</button><p id = "reportFilled">Report innacurate data in T&T</p>' } else if (historyRecorded&&historyItemAppend!=""){ autoFillACupOfTea.innerHTML = '<button id = "autofillerOption" class = "autofillerOption" onmouseover = ""><span class="material-symbols-outlined" id = "completeIcon">history</span> '+historyItemAppend+'</button><button id = "autofillerOption" class = "autofillerOption"><span class="material-symbols-outlined" id = "completeIcon">trending_up</span> best colorschemes to use in web design</button><p id = "reportFilled">Report innacurate data in T&T</p>' } }); ddfsdfsdnfijoijf.addEventListener("blur", function(event) { ddfsdfsdnfijoijf.style.borderBottomLeftRadius = '25px'; ddfsdfsdnfijoijf.style.borderBottomRightRadius = '25px'; autoFillACupOfTea.style.display = "none"; autoFillACupOfTea.style.opacity = "0"; }); autoFillACupOfTea.addEventListener("mouseover",function(){ //alternative // ddfsdfsdnfijoijf.value = document.getElementById("autofillerOption").textContent; //get current content ddfsdfsdnfijoijf.value = document.getElementById("autofillerOption").textContent; //replace 'svg' values with nothing let newValue = ddfsdfsdnfijoijf.value.replace(/history\|trending_up/g, ''); ddfsdfsdnfijoijf.value = newValue; }) </script> <!--Search script. May be a bit unorganized and complicated--> <!-- Scene engine (c) kiaantolia Contributors in content stand as: LJE LJ SparkyGreen nobody kiaantolia Ace Rogers --> <script type> var sceneEngine = [ //Article #1 by LJE (c){ ` <style> #scene-container{ font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; background-color: #f4f4f4; } #scene-container main { padding: 1em; max-width: 800px; margin: auto; } #scene-container .content { background: #fff; padding: 1em; margin-bottom: 1em; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } #scene-container h2 { color: #333; } #scene-container h3 { color: #555; } #scene-container ul { list-style-type: disc; padding-left: 1.5em; } </style> <h2>The Enigma of the Voynich Manuscript: A Medieval Mystery</h2> <p>The Voynich Manuscript is one of the most mysterious books in history, written in an unknown script and filled with enigmatic illustrations. Let’s explore this medieval puzzle.</p> <h3>The Discovery of the Voynich Manuscript</h3> <p>The Voynich Manuscript is a handwritten book discovered in 1912 by Wilfrid Voynich, a rare book dealer. The manuscript is written in an undeciphered script, and its contents include botanical illustrations, astrological charts, and enigmatic diagrams. Despite extensive study, the manuscript’s language, meaning, and purpose remain a mystery.</p> <h3>Features of the Manuscript</h3> <p>The manuscript is divided into several sections, each with its own theme: <ul> <li><strong>Botanical Section:</strong> Contains illustrations of plants that do not match known species, leading to speculation about their significance.</li> <li><strong>Astronomical Section:</strong> Features celestial diagrams and zodiac symbols.</li> <li><strong>Pharmaceutical Section:</strong> Includes recipes and descriptions of medicinal plants and ingredients.</li> <li><strong>Cosmological Section:</strong> Contains abstract diagrams and mysterious symbols.</li> </ul> <p> <h3>Attempts at Decipherment</h3> <p>Linguists, cryptographers, and historians have attempted to decode the manuscript using various methods. Some have suggested that it may be a constructed language or a complex cipher. Others propose that the manuscript is a hoax or an elaborate piece of artistic work. Despite numerous attempts, no definitive translation or explanation has been found.</p> <h3>Cultural Impact</h3> <p>The Voynich Manuscript has inspired countless theories and speculations. It has been featured in novels, documentaries, and academic studies. Its mysterious nature continues to captivate researchers and enthusiasts, fueling debates about its origins and purpose.</p> <p><strong>Fun Fact:</strong> The manuscript’s carbon dating places its creation in the early 15th century, but its true origin and purpose remain unknown.</p><h2>The Enigma of the Voynich Manuscript: A Medieval Mystery</h2> <p>The Voynich Manuscript is one of the most mysterious books in history, written in an unknown script and filled with enigmatic illustrations. Let’s explore this medieval puzzle.</p> <h3>The Discovery of the Voynich Manuscript</h3> <p>The Voynich Manuscript is a handwritten book discovered in 1912 by Wilfrid Voynich, a rare book dealer. The manuscript is written in an undeciphered script, and its contents include botanical illustrations, astrological charts, and enigmatic diagrams. Despite extensive study, the manuscript’s language, meaning, and purpose remain a mystery.</p> <h3>Features of the Manuscript</h3> <p>The manuscript is divided into several sections, each with its own theme: <ul> <li><strong>Botanical Section:</strong> Contains illustrations of plants that do not match known species, leading to speculation about their significance.</li> <li><strong>Astronomical Section:</strong> Features celestial diagrams and zodiac symbols.</li> <li><strong>Pharmaceutical Section:</strong> Includes recipes and descriptions of medicinal plants and ingredients.</li> <li><strong>Cosmological Section:</strong> Contains abstract diagrams and mysterious symbols.</li> </ul> <p> <h3>Attempts at Decipherment</h3> <p>Linguists, cryptographers, and historians have attempted to decode the manuscript using various methods. Some have suggested that it may be a constructed language or a complex cipher. Others propose that the manuscript is a hoax or an elaborate piece of artistic work. Despite numerous attempts, no definitive translation or explanation has been found.</p> <h3>Cultural Impact</h3> <p>The Voynich Manuscript has inspired countless theories and speculations. It has been featured in novels, documentaries, and academic studies. Its mysterious nature continues to captivate researchers and enthusiasts, fueling debates about its origins and purpose.</p> <p><strong>Fun Fact:</strong> The manuscript’s carbon dating places its creation in the early 15th century, but its true origin and purpose remain unknown.</p> `, //} //Article #2 by kiaantolia (c){ ` <style> #scene-container{ background:rgb(252, 236, 156); text-align:left; padding-left:100px; overflow-x:hidden; } </style> <img src = "https://cdn.kastatic.org/images/avatars/svg/cacteye-yellow.svg" style = "display:inline-block;position:relative;top:15px;padding:5px;margin-right:10px;background:white;border-radius:250px;padding-right:-100px;" width = "50" height = "50"/> <h1 style = "display:inline-block;padding-right:-100px;">kiaantolia</h1> <p style = "color:grey;margin-left:70px;margin-top:-20px;">@kiaantolia.ka</p> <p style = "padding-right:-100px;">Hey guys! I am kiaantolia. I am a fullstack web developer born in<br>South Africa, currently based in the US. My stack is<br><br> BE(Backend): Node<br> FE(Frontend): React<br>DB(Database): MongoDB<br>Server: NGINX<br>Deploy: AWS<br><br>Have questions, reach out =)<br><a onclick = "window.open('https://www.khanacademy.org/computer-programming/kiaantolias-homepage/5941425767366656', '_blank')">Subscribe or reach out by clicking this text</a></p> `, //} //Article #3 by kiaantolia (c){ ` <style> #scene-container{ background:rgb(250, 155, 161); text-align:left; padding-left:100px; } </style> <h2>faq-official.net</h2> <img src = "https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/questionmark.png" style = "display:inline-block;position:relative;top:15px;padding:5px;margin-right:10px;background:white;border-radius:250px;padding-right:-100px;" width = "50" height = "50"/> <h1 style = "display:inline-block;padding-right:-100px;">HELLPp lplM EEE</h1> <p style = "color:grey;margin-left:70px;margin-top:-20px;">what to do?</p> <p style = "padding-right:-100px;">Need help? Well then its a skill issue lollll Its literally googel. u live under a rock DX O well so basically serch click enter. click custm theme for a new theme ololl if not no wahat to search click enter With no value it shows all result s my good man :3 dats it, my good man sincerely, kiaantlia</p> `, //} //Article #4 by LJE (c){ ` <style> #scene-container{ font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; background-color: #f4f4f4; } #scene-container main { padding: 1em; max-width: 800px; margin: auto; } #scene-container .content { background: #fff; padding: 1em; margin-bottom: 1em; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } #scene-container h2 { color: #333; } #scene-container h3 { color: #555; } #scene-container ul { list-style-type: disc; padding-left: 1.5em; } </style> <div class="content"> <h2>The Amazing World of Optical Illusions: Tricks of the Eye</h2> <p>Optical illusions are intriguing visual phenomena that deceive the brain into seeing something that isn't there or perceiving images differently from reality. Let’s explore the science and types of optical illusions.</p> <h3>What Are Optical Illusions?</h3> <p>Optical illusions occur when the brain misinterprets visual information from the eyes. They exploit the way our visual system processes light, color, and depth to create deceptive or ambiguous images. Optical illusions can be categorized into several types, including: <ul> <li><strong>Geometric Illusions:</strong> Exploit the brain’s perception of shapes and lines, creating effects like distortion or misalignment. An example is the Müller-Lyer illusion, where lines of equal length appear different due to the surrounding arrowheads.</li> <li><strong>Color Illusions:</strong> Create the perception of different colors or shades based on surrounding colors or patterns. The famous dress illusion, where a dress appears either blue and black or white and gold, is an example.</li> <li><strong>Motion Illusions:</strong> Make static images appear to move or pulsate. The spinning dancer illusion, where a silhouette appears to spin in either direction, is an example of a motion illusion.</li> <li><strong>Ambiguous Illusions:</strong> Create images that can be interpreted in multiple ways. The Necker cube, where a 2D drawing of a cube can be seen from different perspectives, is an example.</li> </ul> <p> <h3>Why Do Optical Illusions Happen?</h3> <p>Optical illusions occur because our brains use shortcuts to interpret visual information quickly. When these shortcuts are manipulated or presented in unexpected ways, the brain can be tricked into seeing something different from reality. Factors such as lighting, color contrast, and surrounding patterns can all influence how we perceive an image.</p> <h3>Applications of Optical Illusions</h3> <p>Optical illusions have various applications in art, psychology, and neuroscience. Artists use illusions to create compelling visual effects and explore the boundaries of perception. Psychologists study illusions to understand how the brain processes visual information and to investigate cognitive functions.</p> <p><strong>Fun Fact:</strong> The world’s largest optical illusion, known as the "Dancing Forest" in Russia, is a natural phenomenon where the trees grow in twisted, spiraled patterns, creating the illusion of dancing figures.</p> </div> `, //} //Article #5 by LJE (c){ ` <style> #scene-container{ font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; background-color: #f4f4f4; } #scene-container main { padding: 1em; max-width: 800px; margin: auto; } #scene-container .content { background: #fff; padding: 1em; margin-bottom: 1em; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } #scene-container h2 { color: #333; } #scene-container h3 { color: #555; } #scene-container ul { list-style-type: disc; padding-left: 1.5em; } </style> <div class="content"> <h2>The Art of Color Schemes: A Journey into Design</h2> <p>Welcome to the fascinating world of color schemes! Whether you're a budding designer or just curious about how colors impact our visual world, understanding color schemes can open up a whole new realm of creativity and design. Let’s dive into some popular color schemes, explore their characteristics, and discover how they influence the way we experience colors.</p> <h3>What Is a Color Scheme?</h3> <p>A color scheme is a collection of colors selected to work harmoniously together. Just as a well-composed piece of music uses different notes to create a beautiful melody, a color scheme uses different hues to create a visually appealing and cohesive design. These schemes help in establishing mood, creating contrast, and making designs more effective and engaging.</p> <h3>Popular Color Schemes</h3> <p>Let’s explore some classic color schemes and see how they can be applied in various contexts, from graphic design to interior decor.</p> <h4>1. Vibrant Rainbow Scheme 🌈</h4> <p>This scheme is all about bold, vibrant colors that grab attention and create a sense of energy and excitement. It’s often used in contexts where you want to make a strong visual impact.</p> <p><strong>Red:</strong> #FF0000<br> <strong>Orange:</strong> #FFA500<br> <strong>Yellow:</strong> #FFFF00<br> <strong>Green:</strong> #00FF00<br> <strong>Blue:</strong> #0000FF<br> <strong>Purple:</strong> #800080</p> <p><strong>Insight:</strong> The rainbow scheme is reminiscent of natural rainbows, which are created by light refracting through water droplets. This color scheme can evoke feelings of joy and creativity and is frequently used in designs aimed at children or creative projects.</p> <h4>2. Calm Ocean Scheme 🌊</h4> <p>The Ocean color scheme is inspired by the soothing hues of the sea and sky. This palette is used to convey tranquility, peace, and serenity.</p> <p><strong>Light Blue:</strong> #ADD8E6<br> <strong>Sea Green:</strong> #2E8B57<br> <strong>Navy Blue:</strong> #000080<br> <strong>Turquoise:</strong> #40E0D0</p> <p><strong>Insight:</strong> The use of cool colors like these can have a calming effect, making this scheme ideal for spaces intended for relaxation, such as bedrooms or spas. The calming effect of these colors can also improve focus and concentration in work environments.</p> <h4>3. Warm Autumn Scheme 🍂</h4> <p>The Warm Autumn color scheme brings to mind the rich, earthy tones of fall. It’s ideal for creating a cozy, inviting atmosphere.</p> <p><strong>Burnt Orange:</strong> #FF4500<br> <strong>Maroon:</strong> #800000<br> <strong>Goldenrod:</strong> #DAA520<br> <strong>Olive Green:</strong> #808000</p> <p><strong>Insight:</strong> These warm, earthy colors are often used in interior design to create a sense of warmth and comfort. They are also popular in branding and marketing for products that aim to evoke a sense of tradition or reliability.</p> <h4>4. Elegant Monochrome Scheme 🖤</h4> <p>The Monochrome scheme uses variations of a single color to create a sophisticated, streamlined look. It’s often chosen for its simplicity and elegance.</p> <p><strong>Light Gray:</strong> #D3D3D3<br> <strong>Medium Gray:</strong> #A9A9A9<br> <strong>Dark Gray:</strong> #696969<br> <strong>Charcoal:</strong> #36454F</p> <p><strong>Insight:</strong> Monochrome schemes are highly versatile and can be used to create minimalist designs or to highlight other design elements through contrast. This scheme is frequently used in modern design to convey professionalism and sophistication.</p> <h3>The Impact of Color Schemes</h3> <p>Understanding and applying color schemes effectively can significantly influence the perception and effectiveness of a design. For instance:</p> <ul> <li>Designers use color schemes to create visually appealing interfaces that enhance user experience and engagement.</li> <li>Artists use them to evoke specific emotions or themes in their work.</li> <li>Marketers choose color schemes to align with brand identity and attract target audiences.</li> </ul> <p>By mastering color schemes, you can harness the power of color to enhance visual communication and create designs that are not only aesthetically pleasing but also impactful and memorable.</p> <h3>Create Your Own Color Scheme</h3> <p>Experimenting with color schemes is a great way to develop your design skills. Try combining your favorite colors using an online color tool or app to see how they work together. Consider the mood you want to create and how each color contributes to the overall design.</p> <p>Colors are a powerful tool in design, capable of influencing mood, perception, and even behavior. So, whether you're designing a website, decorating a room, or simply exploring your creativity, understanding color schemes can elevate your work and bring your vision to life.</p> </div> `, //} //Article #6 by Sparky Green (c) & Mushy Avacado{ / <style> #wrapper { overflow: hidden; width: 50%; height: 50%; position:relative; top:-150px; margin: 0px; padding: 0px; width: calc(100% + 1px); } #wrapper { background:black; } #wrapper canvas { width: fit-content; height: fit-content; } #wrapper canvas:focus { outline: none; } #wrapper { padding: 0px; margin: 0px; display: flex; justify-content: center; align-items: center; width: 100%; } </style> <div id="wrapper"> <canvas class="sketch"></canvas> <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/Khan/processing-js@master/processing.js"><\/script> function program() { title("SparkyGreen's Subpage in HTML for article contest"); size(600, 600); // All code goes here var settings = { // The button font // ButtonFont: createFont("Comic sans MS"), // The time font // ClockFont: createFont("Comic sans MS"), // The link font // LinkFont: createFont("fantasy"), // The text font // TextFont: createFont("Comic sans MS"), // The scene text font // SceneTextFont: createFont("Comic sans MS"), // The "About" your friends font // AbtPeopleFont: createFont("Comic sans MS"), // "regular" or "military" time // Time: "regular", // The number of matrix falling // matrixNumber: 50, // Write what you want about yourself here // aboutYou: " Hey! I'm SparkyGreen but my friends call me Spark! I love to code! My best attributes are HTML and p5.js! My favorite animal is a turtle. And I'm starting a team of all my awesome coder friends called Spark Studios! ", // Write how you want people to subscribe here // how: "Sub by posting anything under 3 characters in the sub thread in the T&T of this program: https://www.khanacademy.org/computer-programming/sparkygreens-subpage-re-released-due-to-ban/6172708039999488 ", // Write your special thanks in here // specialThanks: "Special thanks to Ace Rogers for making this subpage for me, ALL the contestants for participating, and my friends for supporting me in the coding community!", // Write your shoutouts here // shoutout: "Shoutout to Ace Rogers for making this subpage, Iris for being a cool friend, Chickenfarmer2009 for bein AWESOME all the time XD, leani for being kind to me and always relating to me, kiaantolia for agreeing to collab, and to all my subscribers for caring enough to be notified XD", // Your projects // Projects: [ { name: "My first collab", link: "https://www.khanacademy.org/computer-programming/ace-rogers-and-sparkygreen-official-collab/4933952064897024", }, { name:"Spark Studios Official Tutoring Page", link: "https://www.khanacademy.org/computer-programming/sparks-tutoring-page/5861093117706240", }, { name: "Team homepage contest!", link: "https://www.khanacademy.org/computer-programming/team-subpage-contest/5419428137582592", }, { name: "Spark Studios Team Application", link: "https://www.khanacademy.org/computer-programming/spark-studios-team-application/4944583750762496", }, { name:"My first ever platformer game", link: "https://www.khanacademy.org/computer-programming/escape-the-matrix-impossible-edition/4527172291575808", }, { name: "Coding problems be like:", link: "https://www.khanacademy.org/computer-programming/coding-language-issues-and-problems/5413153609793536", }, { name: "The Amazing Digital Circus", link: "https://www.khanacademy.org/computer-programming/the-amazing-digital-circus-jax-1-0f-6-pictures/6125227764531200", }, { name: "Le webpage", link: "https://www.khanacademy.org/computer-programming/le-webpage/5762938028343296", }, { name: "Iris: An informative document", link: "https://www.khanacademy.org/computer-programming/iris-flowers-by-sparkygreen/6638144435175424", }, { name: "Pino drawing", link: "https://www.khanacademy.org/computer-programming/pino-xd-manga-drawing/6645241311576064", }, { name: "My very old subpage...", link: "https://www.khanacademy.org/computer-programming/sparkygreens-new-subpage/4941740485296128", }, { name: "Collab central (also very old)", link: "https://www.khanacademy.org/computer-programming/collab-central/5882588437856256", }, { name: "Synthwaves (for fun)", link: "https://www.khanacademy.org/computer-programming/synthwaves/4979758086668288", }, ], // Your friends // Friends: [ { name: "Ace Rogers", about: "Ace is my first khan academy friend and also probably the first kind person to help and encorage me to pursue what I love (even if he didn't know he was) XD", link: "https://www.khanacademy.org/profile/kaid_714276242204949021450419" }, { name: "Leani", about: "Leani is my bestie! She's pretty moderate at coding and we both like to chat when i'm not busy with forty-five collabs and she's not in a class. I think she's pretty cool. She's my second friend so far and is KILLING IT on my subpage contest! (100 percent better than the rest of my entries so far.)", link: "" }, { name: "Chickenfarmer2009", about: "He is officially my friend now, i think he's awesome XD and he is really good at gradients. We are going to collab in a while and it is a game! It will be an Undertale AU! XD", link: "https://www.khanacademy.org/profile/kaid_287879839213083022099587" }, { name: "kiaantolia", about: "He's one of my best friends and think we really get along XD plus we are gonna start on a collab soon lol", link: "https://www.khanacademy.org/profile/kaid_706406430552760652245376" }, { name: "snow", about: "She's my third bestieeeee! And I've known her for a while. Her projects are always so cute and there's a doppelganger of her called snow140 going around so sometimes it's hard to tell who made what lol.", link: "https://www.khanacademy.org/profile/kaid_5830316198525980572967798" }, { name: "Lazarwolf", about: "I don't really talk to him much but i know him from Ace so any friend of Ace is a friend of mine :)", link: "https://www.khanacademy.org/profile/kaid_979231835959986117146697" }, { name: "Just Another Lightning", about: "My bestie that likes to derp around on a trampoline XD", link: "https://www.khanacademy.org/profile/kaid_1078866762500724818753844/" }, { name: "ASBackup", about: "Yet another friend, Just met him/her, idk what to say yet lol", link: "https://www.khanacademy.org/profile/kaid_714780036830891967670231/discussion" }, { name: "B0az0n#Midsane", about: "I just met this person too lol. But they also are pretty cool so they can go here too!", link: "https://www.khanacademy.org/profile/kaid_714780036830891967670231" }, { name: "Full list here!", about: "Click this to go to full list", link: "https://www.khanacademy.org/computer-programming/my-official-friends-list/6380938229891072" }, ], // Other peoples' programs that you feature // Featured: [ { name: "Pyrena & Frostwyn", creator: "Ace Rogers", link: "https://www.khanacademy.org/computer-programming/pyrena-frostwyn-done/5370712150949888" }, { name: "Spider-Man: No Way Home", creator: "Ace Rogers", link: "https://www.khanacademy.org/computer-programming/spider-man-no-way-home/4812187602042880" }, { name: "Iron Man Armored Adventures", creator: "Ace Rogers", link: "https://www.khanacademy.org/computer-programming/iron-man-armored-adventures-khantober-2023-week-1/6216891313733632" }, { name: "Protogen", creator: "Ace Rogers", link: "https://www.khanacademy.org/computer-programming/protogen-for-stuffstash/4963769863421952" }, { name: "Anime Girl", creator: "Ace Rogers", link: "https://www.khanacademy.org/computer-programming/anime-girl-animated/5575673298206720" }, { name: "Rosalina", creator: "DigiFox9", link: "https://www.khanacademy.org/computer-programming/rosalina/6422310247645184" }, { name: "Weeping Willow", creator: "DigiFox9", link: " https://www.khanacademy.org/computer-programming/weeping-willow-animated/6592822568730624?width=520&height=520" }, { name:"totk anyone", creator:"DigiFox9", link: "https://www.khanacademy.org/computer-programming/totk-anyone/6502771473432576?width" }, ], // People who ran in your subpage contest // Runners: [ { name: "Ace Rogers", about: "Congrats on winning Ace!", link: "https://www.khanacademy.org/profile/kaid_714276242204949021450419" }, { name: "Leani", about: "Even though you came in third your effort was amazing and i still really liked your subpage!", link: "To be added" }, { name: "Kiaantolia", about: "You came in fifth but you were still awesome! You put in the effort so thats all that matters!", link: "https://www.khanacademy.org/profile/kaid_706406430552760652245376" }, { name: "Blueberrypancakez", about: "Sorry you came in last blurberry! But you did your best and that's all that matters!", link: "https://www.khanacademy.org/profile/kaid_784805823121542822870790" }, { name: "iris huang (now named snow)", about: "Congrats on getting forth iris! You did great bestie!", link: "https://www.khanacademy.org/profile/kaid_5830316198525980572967798" }, { name: "~The Wolf~", about: "You were AMAZING wolfy! Congrats on second place! (you almost won XD)", link: "https://www.khanacademy.org/profile/kaid_6337778158362361978377342" }, { name: "", about: "", link: "" }, ], }; // Delag Stuff // smooth(); // Credit to Daniel T (@dkareh) (function(){return this;})().LoopProtector.prototype.leave = function(){}; // Variables // // What page you're on var page = "home"; // If the menu is open or not var openMenu = false; // This is for the scrolling through your friends var friendY = 0; // This is for the scrolling through your projects var projectY = 0; // This is for the scrolling through the featured programs var featuredY = 0; // This is for those that were in your subpage contest var runnersY = 0; // Arrays // var matrix = []; for (var i = 0; i < settings.matrixNumber; i++) { matrix.push([ random(0, 600), // The x position random(-200, -100), // The y position random(20, 28), // The size random(1.5, 5), // The speed floor(random(0, 2)) // If it's a "0" or a "1" ]); } // Key Functions // var keys = { input: [] }; keyPressed = function () { keys.input[keyCode] = true; }; keyReleased = function () { keys.input[keyCode] = false; }; // Turtle Function // var Turtle = function (x, y, size, rot, animate) { pushMatrix(); translate(x, y); rotate(rot); scale(size); fill(0); stroke(0, 255, 25); strokeWeight(2); // Head // beginShape(); vertex(33, -28); bezierVertex(-1, -52, 31, -76, 0, -85); bezierVertex(-31, -76, -1, -52, -33, -28); endShape(); // Beak beginShape(); vertex(9, -80); bezierVertex(4, -79, 1, -76, 0, -76); bezierVertex(-1, -76, -4, -79, -9, -80); endShape(); // Left eye ellipse(-9, -71, 5, 5); // Right eye ellipse(9, -71, 5, 5); // Left Flipper // pushMatrix(); translate(-80, 5); if (animate === true) { rotate(sin(frameCount * 5) * 20); } beginShape(); vertex(0, 0); bezierVertex(-11, -3, -40, 19, -56, 53); bezierVertex(-69, 77, -87, 35, -56, -12); bezierVertex(-19, -57, 7, -47, 50, -16); endShape(); popMatrix(); // Right Flipper // pushMatrix(); translate(80, 5); if (animate === true) { rotate(-sin(frameCount * 5) * 20); } beginShape(); vertex(0, 0); bezierVertex(11, -3, 40, 19, 56, 53); bezierVertex(69, 77, 87, 35, 56, -12); bezierVertex(19, -57, -7, -47, -50, -16); endShape(); popMatrix(); // Right Back Flipper // pushMatrix(); translate(-10, 0); if (animate === true) { rotate(-sin(frameCount * 5) * 5); } beginShape(); vertex(44, 125); bezierVertex(62, 131, 88, 133, 70, 138); bezierVertex(75, 140, 88, 145, 74, 148); bezierVertex(79, 149, 82, 163, 71, 159); bezierVertex(74, 162, 69, 173, 59, 164); bezierVertex(58, 162, 61, 181, 45, 164); bezierVertex(41, 171, 40, 174, 25, 150); endShape(); popMatrix(); // Left Back Flipper // pushMatrix(); translate(10, 0); if (animate === true) { rotate(sin(frameCount * 5) * 5); } beginShape(); vertex(-44, 125); bezierVertex(-62, 131, -88, 133, -70, 138); bezierVertex(-75, 140, -88, 145, -74, 148); bezierVertex(-79, 149, -82, 163, -71, 159); bezierVertex(-74, 162, -69, 173, -59, 164); bezierVertex(-58, 162, -61, 181, -45, 164); bezierVertex(-41, 171, -40, 174, -25, 150); endShape(); popMatrix(); // Shell // beginShape(); vertex(70, 0); bezierVertex(20, -50, -20, -50, -70, 0); vertex(-80, 5); bezierVertex(-80, 50, -60, 140, 0, 170); bezierVertex(60, 140, 80, 50, 80, 5); endShape(CLOSE); beginShape(); vertex(70, 15); bezierVertex(20, -35, -20, -35, -70, 15); bezierVertex(-70, 50, -40, 140, 0, 150); bezierVertex(40, 140, 70, 50, 70, 15); endShape(CLOSE); // Edge lines // line(0, 150, 0, 170); line(15, 143, 19, 156); line(30, 130, 36, 140); line(38, 115, 47, 124); line(46, 101, 56, 107); line(53, 86, 62, 90); line(60, 69, 69, 72); line(64, 51, 74, 52); line(69, 29, 78, 29); line(58, 4, 64, -3); line(45, -6, 50, -17); line(28, -16, 32, -29); line(13, -22, 15, -35); line(-15, 143, -19, 156); line(-30, 130, -36, 140); line(-38, 115, -47, 124); line(-46, 101, -56, 107); line(-53, 86, -62, 90); line(-60, 69, -69, 72); line(-64, 51, -74, 52); line(-69, 29, -78, 29); line(-58, 4, -64, -3); line(-45, -6, -50, -17); line(-28, -16, -32, -29); line(-13, -22, -15, -35); // Shell Design // beginShape(); vertex(6, 113); bezierVertex(16, 127, 14, 124, 40, 110); endShape(); beginShape(); vertex(-6, 113); bezierVertex(-16, 127, -14, 124, -40, 110); endShape(); beginShape(); vertex(17, 94); bezierVertex(4, 130, -4, 130, -17, 94); endShape(); beginShape(); vertex(-6, 82); bezierVertex(-16, 116, -40, 86, -58, 71); endShape(); beginShape(); vertex(6, 82); bezierVertex(16, 116, 40, 86, 58, 71); endShape(); beginShape(); vertex(23, 59); bezierVertex(20, 74, 16, 92, 0, 78); bezierVertex(-16, 92, -20, 74, -23, 59); endShape(); beginShape(); vertex(16, 45); bezierVertex(26, 71, 35, 61, 68, 32); endShape(); beginShape(); vertex(-16, 45); bezierVertex(-26, 71, -35, 61, -68, 32); endShape(); beginShape(); vertex(25, 25); bezierVertex(20, 45, 16, 47, 0, 47); bezierVertex(-16, 47, -20, 45, -25, 25); endShape(); beginShape(); vertex(16, 9); bezierVertex(22, 20, 25, 41, 54, 2); endShape(); beginShape(); vertex(-16, 9); bezierVertex(-22, 20, -25, 41, -54, 2); endShape(); beginShape(); vertex(28, -16); bezierVertex(20, 4, 16, 22, 0, 8); bezierVertex(-16, 22, -20, 4, -28, -16); endShape(); popMatrix(); }; // Clock Function // var Clock = function (x, y, s, func) { this.x = x; this.y = y; this.s = s; this.func = func; this.mouseOver = null; this.timeW = 0; this.timeX = 0; }; Clock.prototype.clicked = function () { if (this.mouseOver) { this.func(); } }; Clock.prototype.draw = function () { stroke(0, 255, 26); strokeWeight(this.s * 0.04); if (this.mouseOver) { fill(50); if (this.s <= 50) { this.timeX = lerp(this.timeX, this.x + this.s * -9.6, 0.2); this.timeW = lerp(this.timeW, 1, 0.2); } } else { fill(0); if (this.s <= 50) { this.timeX = lerp(this.timeX, 0, 0.2); this.timeW = lerp(this.timeW, 0, 0.2); } } ellipse(this.x, this.y, this.s, this.s); // Hour Hand strokeWeight(3); pushMatrix(); translate(this.x, this.y); rotate((hour() % 12) * 30); line(0, 0, 0, -this.s * 0.2); popMatrix(); // Minute Hand pushMatrix(); translate(this.x, this.y); rotate(minute() * 6); line(0, 0, 0, -this.s * 0.3); popMatrix(); // Second Hand strokeWeight(1); pushMatrix(); translate(this.x, this.y); rotate(second() * 6); line(0, 0, 0, -this.s * 0.3); popMatrix(); // Hour lines for (var i = 0; i < 12; i++) { pushMatrix(); translate(this.x, this.y); rotate(-90 + i * 30); line(0, this.s * 0.4, 0, this.s * 0.5); popMatrix(); } // Second/minute lines for (var i = 0; i < 60; i++) { pushMatrix(); translate(this.x, this.y); rotate(-90 + i * 6); line(0, this.s * 0.45, 0, this.s * 0.5); popMatrix(); } // Numbers fill(0, 255, 26); textAlign(CENTER, CENTER); textFont(settings.ClockFont, this.s * 0.1); for (var i = 1; i < 13; i++) { pushMatrix(); translate(this.x, this.y); rotate(0 + i * 30); pushMatrix(); translate(0, -this.s * 0.35); rotate(-i * 30); text(i, 0, 0); popMatrix(); popMatrix(); } // The number clock that opens once the mouse is over pushMatrix(); translate(this.x - this.timeX, this.y); scale(this.timeW, 1); if (settings.Time === "regular") { textSize(this.s * 0.4); text((hour() === 0 ? hour() + 12 : (hour() <= 12 ? hour() : hour() - 12)) + ":" + (minute() < 10 ? "0" + minute() : minute()) + ":" + (second() < 10 ? "0" + second() : second()) + (hour() < 12 ? "am" : "pm") \|\| (hour() >= 0 ? "am" : "pm"), 0, 0); } else if (settings.Time === "military") { textSize(this.s * 0.4); text(hour() + ":" + (minute() < 10 ? "0" + minute() : minute()) + ":" + (second() < 10 ? "0" + second() : second()), 0, 0); } popMatrix(); this.mouseOver = dist(mouseX, mouseY, this.x, this.y) <= (this.s / 2) + this.s * 0.03; }; var MiniClock = new Clock(570, 570, 50, function () { page = "clock"; }); var BigClock = new Clock(300, 300, 300, function () { page = "home"; }); // Button Function // var BtnsValues = [ { name: "Home", x: 0, y: 0, w: 100, h: 60, type: 1, func: function () { page = "home"; openMenu = false; }, }, // Home Button { name: "About", x: 0, y: 60, w: 70, h: 60, type: 1, func: function () { page = "about"; openMenu = false; }, }, // About Button { name: "How", x: 0, y: 120, w: 70, h: 60, type: 1, func: function () { page = "how"; openMenu = false; }, }, // How Button { name: "Special Thanks", x: 0, y: 180, w: 70, h: 60, type: 1, func: function () { page = "thanks"; openMenu = false; }, }, // Special Thanks Button { name: "Shoutouts", x: 0, y: 240, w: 70, h: 60, type: 1, func: function () { page = "shoutouts"; openMenu = false; }, }, // Shoutouts Button { name: "Projects", x: 0, y: 300, w: 70, h: 60, type: 1, func: function () { page = "projects"; openMenu = false; }, }, // Projects Button { name: "Friends", x: 0, y: 360, w: 70, h: 60, type: 1, func: function () { page = "friend"; friendY = 0; openMenu = false; }, }, // Friends Button { name: "Featured Program", x: 0, y: 420, w: 70, h: 60, type: 1, func: function () { page = "featured"; openMenu = false; }, }, // Featured Programs Button { name: "Contest Runners", x: 0, y: 480, w: 70, h: 60, type: 1, func: function () { page = "runners"; openMenu = false; }, }, // Contest Runners Button { name: "Close", x: 0, y: 540, w: 100, h: 60, type: 1, func: function () { openMenu = false; }, }, // Close Menu Button { name: ">", x: 0, y: 0, w: 40, h: 40, type: 2, func: function () { openMenu = true; }, }, // Open Menu Button ]; var Button = function (x, y, w, h, txt, type, func) { // This is for the x position of the button this.x = x; // This is for the y position of the button this.y = y; // This is for the width of the button this.w = w; // This is for he height of the button this.h = h; // This is for the text on the button this.txt = txt; // This is for the type of button this.type = type; // This is for what happens when the button is clicked this.func = func; // If the mouse is over or not this.mouseOver = null; // This is for the animation that curves the button when your mouse is over it this.curve = 0; // This controls how far the button's width goes when you're mouse is over it this.addedW = 0; }; Button.prototype.clicked = function () { if (this.mouseOver) { this.func(); if (this.type === 1) { openMenu = false; } } }; Button.prototype.draw = function () { rectMode(CORNER); switch (this.type) { // This type is the rectangle buttons case 1: if (this.mouseOver && this.w >= 190) { cursor("pointer"); // The dark gray rectangle fill(50); stroke(0, 255, 26); strokeWeight(2); rect(this.x, this.y, this.w + this.addedW, this.h, 0, this.curve, this.curve, 0); // Inner rect rect(this.x + this.w * 0.05, this.y + this.h * 0.1, (this.w + this.addedW) * 0.9, this.h * 0.8, 0, this.curve / 1.5, this.curve / 1.5, 0); // This makes the button get a little wider and makes the corners curve this.curve = lerp(this.curve, 12, 0.2); this.addedW = lerp(this.addedW, this.w / 6, 0.2); // The text on the button pushMatrix(); translate((this.x + this.w / 2) + this.addedW / 2, this.y + this.h / 2); scale(this.w * 0.006, this.h * 0.02); fill(0, 255, 26); textAlign(CENTER, CENTER); textFont(settings.ButtonFont, 15); text(this.txt, 0, 0); popMatrix(); } else { // The black rectangle stroke(0, 255, 26); strokeWeight(2); fill(0); rect(this.x, this.y, this.w + this.addedW, this.h, 0, this.curve, this.curve, 0); rect(this.x + this.w * 0.05, this.y + this.h * 0.1, (this.w + this.addedW) * 0.9, this.h * 0.8, 0, this.curve, this.curve, 0); // This makes the button go back to a rectangle this.curve = lerp(this.curve, 0, 0.1); this.addedW = lerp(this.addedW, 0, 0.1); // Ths text on the button pushMatrix(); translate((this.x + this.w / 2) + this.addedW / 2, this.y + this.h / 2); scale(this.w * 0.006, this.h * 0.02); fill(0, 255, 26); textAlign(CENTER, CENTER); textFont(settings.ButtonFont, 15); text(this.txt, 0, 0); popMatrix(); } if (openMenu === true) { this.w = 200; } else if (openMenu === false) { this.w = 0; } break; case 2: if (this.mouseOver) { cursor("pointer"); // The dark gray rectangle fill(50); stroke(0, 255, 26); strokeWeight(2); rect(this.x, this.y, this.w, this.h, 0, 0, this.curve, 0); rect(this.x + this.w * 0.1, this.y + this.h * 0.1, this.w * 0.8, this.h * 0.8, 0, 0, this.curve, 0); // This makes the button get a little wider and makes the corners curve this.curve = lerp(this.curve, 12, 0.2); this.addedW = lerp(this.addedW, this.w / 6, 0.2); // The text on the button fill(0, 255, 26); textAlign(CENTER, CENTER); textFont(settings.ButtonFont, 20); text(this.txt, this.x + this.w / 2, this.y + this.h / 2); } else { // The black rectangle fill(0); stroke(0, 255, 26); strokeWeight(2); rect(this.x, this.y, this.w, this.h, 0, 0, this.curve, 0); rect(this.x + this.w * 0.1, this.y + this.h * 0.1, this.w * 0.8, this.h * 0.8, 0, 0, this.curve, 0); // This makes the button go back to a rectangle this.curve = lerp(this.curve, 0, 0.1); this.addedW = lerp(this.addedW, 0, 0.1); // The text on the button fill(0, 255, 26); textAlign(CENTER, CENTER); textFont(settings.ButtonFont, 20); text(this.txt, this.x + this.w / 2, this.y + this.h / 2); } break; } // This sets the borders of the button this.mouseOver = mouseX >= this.x && mouseX < this.x + (this.type === 1 ? this.w + this.addedW : this.w) && mouseY >= this.y && mouseY <= this.y + this.h; }; var buttons = []; for (var i = 0; i < BtnsValues.length; i++) { buttons.push(new Button(BtnsValues[i].x, BtnsValues[i].y, BtnsValues[i].w, BtnsValues[i].h, BtnsValues[i].name, BtnsValues[i].type, BtnsValues[i].func)); } // People Cards Function // var Card = function (x, y, w, h, name, abt, link, type) { this.x = x; // For the x position this.y = y; // For the y position this.w = w; // For the width this.h = h; // For the height this.name = name; // For the name of the friend this.abt = abt; // For the about of the friend this.link = link; // For what happens after you click it this.type = type; // For what it's for. For your friends (1) or for the people that ran in your subpage contest (2) this.mouseOver = null; // If the mouse is over or not this.addedS = 0; this.curve = 10; this.clr = 0; }; Card.prototype.clicked = function () { if (this.mouseOver) { _clearLogs(); println(this.name + "'s profile:\n" + this.link); } }; Card.prototype.draw = function () { fill(this.clr); stroke(0, 255, 26); strokeWeight(2); rect(this.x, this.y, this.w + this.addedS, this.h + this.addedS, this.curve); rect(this.x, this.y - this.h * 0.35 - this.addedS / 5, this.w * 0.95 + this.addedS, this.h * 0.2 + this.addedS, 5); rect(this.x, this.y + this.h * 0.13 + this.addedS / 5, this.w * 0.95 + this.addedS, this.h * 0.65 + this.addedS, 5); fill(0, 255, 26); textAlign(CENTER, CENTER); textFont(createFont("Trebuchet MS"), 20 + this.addedS * 0.2); text(this.name, this.x, this.y - this.h * 0.35); textAlign(CORNER); textFont(settings.AbtPeopleFont, 12); text(this.abt, this.x - this.w * 0.45, this.y - this.h * 0.15, 270, 200); if (this.mouseOver) { cursor("pointer"); this.clr = lerp(this.clr, 30, 0.2); this.addedS = 10; this.curve = 10; } else { this.clr = lerp(this.clr, 0, 0.1); this.addedS = 0; this.curve = 0; } if (this.type === 1) { this.mouseOver = mouseX >= this.x - this.w / 2 - this.addedS / 2 && mouseX <= this.x + this.w / 2 + this.addedS / 2 && mouseY >= this.y - this.h / 2 - this.addedS / 2 + friendY && mouseY <= this.y + this.h / 2 + this.addedS / 2 + friendY; } else if (this.type === 2) { this.mouseOver = mouseX >= this.x - this.w / 2 - this.addedS / 2 && mouseX <= this.x + this.w / 2 + this.addedS / 2 && mouseY >= this.y - this.h / 2 - this.addedS / 2 + runnersY && mouseY <= this.y + this.h / 2 + this.addedS / 2 + runnersY; } }; var friends = []; for (var i = 0; i < settings.Friends.length; i++) { friends.push(new Card(300, 300 + i * 220, 300, 200, settings.Friends[i].name, settings.Friends[i].about, settings.Friends[i].link, 1)); } var runners = []; for (var i = 0; i < settings.Runners.length; i++) { runners.push(new Card(300, 300 + i * 220, 300, 200, settings.Runners[i].name, settings.Runners[i].about, settings.Runners[i].link, 2)); } // Project Function // var Project = function (x, y, w, h, name, link) { this.x = x; // For the x position this.y = y; // For the y position this.w = w; // For the width this.h = h; // For the height this.name = name; // For the name of the program this.link = link; // For what happens after you click it this.mouseOver = null; // If the mouse is over or not this.addedS = 0; this.curve = 10; this.clr = 0; }; Project.prototype.clicked = function () { if (this.mouseOver) { _clearLogs(); println(this.name + "\n" + this.link); } }; Project.prototype.draw = function () { // Rectangle fill(this.clr); stroke(0, 255, 26); strokeWeight(2); rect(this.x, this.y, this.w + this.addedS, this.h, this.curve); // The name of the project fill(0, 255, 26); textAlign(CENTER, CENTER); textFont(createFont("Trebuchet MS"), 20 + this.addedS * 0.05); text(this.name, this.x, this.y); // On hover if (this.mouseOver) { cursor("pointer"); this.clr = lerp(this.clr, 30, 0.2); this.addedS = 100; this.curve = 10; } else { this.clr = lerp(this.clr, 0, 0.1); this.addedS = 0; this.curve = 0; } this.mouseOver = mouseX >= this.x - this.w / 2 - this.addedS / 2 && mouseX <= this.x + this.w / 2 + this.addedS / 2 && mouseY >= this.y - this.h / 2 + projectY && mouseY <= this.y + this.h / 2 + projectY; }; var projects = []; for (var i = 0; i < settings.Projects.length; i++) { projects.push(new Project(300, 200 + i * 50, 250, 30, settings.Projects[i].name, settings.Projects[i].link)); } // Featured Function // var FeaturedP = function (x, y, w, h, name, creator, link) { this.x = x; // For the x position this.y = y; // For the y position this.w = w; // For the width this.h = h; // For the height this.name = name; // For the name of the program this.creator = creator; // For the creator's name this.link = link; // For what happens after you click it this.mouseOver = null; // If the mouse is over or not this.addedS = 0; this.curve = 10; this.clr = 0; }; FeaturedP.prototype.clicked = function () { if (this.mouseOver) { _clearLogs(); println(this.name + "\n" + this.link); } }; FeaturedP.prototype.draw = function () { // Rectangle fill(this.clr); stroke(0, 255, 26); strokeWeight(2); rect(this.x, this.y, this.w + this.addedS, this.h, this.curve); // The name of the project fill(0, 255, 26); textAlign(CENTER, CENTER); textFont(createFont("Trebuchet MS"), 15 + this.addedS * 0.05); text(this.name, this.x, this.y - this.h * 0.2); textSize(15); text("By: " + this.creator, this.x, this.y + this.h * 0.25); // On hover if (this.mouseOver) { cursor("pointer"); this.clr = lerp(this.clr, 30, 0.2); this.addedS = 100; this.curve = 10; } else { this.clr = lerp(this.clr, 0, 0.1); this.addedS = 0; this.curve = 0; } this.mouseOver = mouseX >= this.x - this.w / 2 - this.addedS / 2 && mouseX <= this.x + this.w / 2 + this.addedS / 2 && mouseY >= this.y - this.h / 2 + featuredY && mouseY <= this.y + this.h / 2 + featuredY; }; var featuredP = []; for (var i = 0; i < settings.Featured.length; i++) { featuredP.push(new FeaturedP(300, 200 + i * 70, 250, 50, settings.Featured[i].name, settings.Featured[i].creator, settings.Featured[i].link)); } // Draw and Mouse Function // mouseClicked = function () { // Allowing the menu buttons to be clicked if (openMenu !== true && page !== "clock" && page !== "intro") { buttons[10].clicked(); } else if (openMenu === true) { for (var i = 0; i < buttons.length - 1; i++) { buttons[i].clicked(); } } // Allowing the clocks to be clicked on certain pages if (page !== "clock") { MiniClock.clicked(); } else if (page === "clock") { BigClock.clicked(); } // For your profile link if ((mouseX >= 259 && mouseX <= 530 && mouseY >= 110 && mouseY <= 165) && page === "home") { _clearLogs(); println("SparkyGreen's profile:\nhttps://www.khanacademy.org/profile/kaid_159902720169177555106986"); } else if ((mouseX >= 530 && mouseX <= 548 && mouseY >= 196 && mouseY <= 221) && page === "home") { page = "why"; } // For clicking your friend cards to get their profile link if (page === "projects") { for (var i = 0; i < settings.Projects.length; i++) { projects[i].clicked(); } } else if (page === "friend") { for (var i = 0; i < settings.Friends.length; i++) { friends[i].clicked(); } } else if (page === "featured") { for (var i = 0; i < settings.Featured.length; i++) { featuredP[i].clicked(); } } }; draw = function () { // Sets the cursor to default cursor("default"); background(0); // Green fading background // noStroke(); rectMode(CENTER); for (var i = 0; i < 604; i += 4) { fill(0, 255, 0, 0 + (0.08 * i)); rect(300, i, 600, 4); } // Pages // switch (page) { case "home": // Matrix numbers that fall // fill(0, 255, 26); textAlign(CENTER, CENTER); for (var i = 0; i < matrix.length; i++) { textFont(createFont("monospace"), matrix[i][2]); text(matrix[i][4], matrix[i][0], matrix[i][1]); matrix[i][1] += matrix[i][3]; if (matrix[i][1] >= 650) { // Resets the x position matrix[i][0] = random(0, 600); // Resets the y position matrix[i][1] = random(-200, -100); // Resets the size matrix[i][2] = random(20, 28); // Resets the speed matrix[i][3] = random(1.5, 5); // Resets if it's a "0" or a "1" matrix[i][4] = floor(random(0, 2)); } } // Link // if (mouseX >= 259 && mouseX <= 530 && mouseY >= 110 && mouseY <= 165) { fill(0, 100, 0); cursor("pointer"); } else if (mouseX >= 530 && mouseX <= 548 && mouseY >= 196 && mouseY <= 221) { cursor("pointer"); } else { fill(0, 255, 26); } textAlign(RIGHT, CORNER); textFont(settings.LinkFont, 50); text("SparkyGreen ", 550, 150); textSize(47); text("___________", 523, 150); fill(0, 255, 26); textSize(50); text("'s\nSubpage", 550, 150); // Turtle // Turtle(400, 360, 1, 0, false); // Data // fill(0, 255, 26); textAlign(RIGHT, CENTER); textFont(createFont(""), 25); text(month() + "/" + day() + "/" + year(), 595, 13); break; case "about": fill(0, 255, 26); textAlign(CENTER, CENTER); textFont(settings.SceneTextFont, 70); text("ABOUT", 300, 80); fill(0, 255, 26); textAlign(CENTER, CENTER); textFont(settings.TextFont, 25); text(settings.aboutYou, 100, 140, 400, 400); break; case "how": fill(0, 255, 26); textAlign(CENTER, CENTER); textFont(settings.SceneTextFont, 70); text("HOW", 300, 80); fill(0, 255, 26); textAlign(CENTER, CENTER); textFont(settings.TextFont, 25); text(settings.how, 100, 140, 400, 400); break; case "thanks": fill(0, 255, 26); textAlign(CENTER, CENTER); textFont(settings.SceneTextFont, 70); text("Special Thanks", 300, 80); fill(0, 255, 26); textAlign(CENTER, CENTER); textFont(settings.TextFont, 25); text(settings.specialThanks, 100, 140, 400, 400); break; case "shoutouts": fill(0, 255, 26); textAlign(CENTER, CENTER); textFont(settings.SceneTextFont, 70); text("SHOUTOUTS", 300, 80); fill(0, 255, 26); textAlign(CENTER, CENTER); textFont(settings.TextFont, 25); text(settings.shoutout, 100, 140, 400, 400); break; case "projects": // Your projects pushMatrix(); translate(0, projectY); for (var i = 0; i < settings.Projects.length; i++) { projects[i].draw(); } popMatrix(); fill(0, 255, 26); textAlign(CENTER, CENTER); textFont(settings.SceneTextFont, 70); text("Projects", 300, 80); textSize(15); text("Use the UP & DOWN arrow keys to scroll.\nClick on the rectangles to get the program's link.", 300, 150); if (keys.input[DOWN]) { projectY -= 10; } else if (keys.input[UP] && projectY < 0) { projectY += 10; } break; case "friend": // The friend cards pushMatrix(); translate(0, friendY); for (var i = 0; i < settings.Friends.length; i++) { friends[i].draw(); } popMatrix(); fill(0, 255, 26); textAlign(CENTER, CENTER); textFont(settings.SceneTextFont, 70); text("My Friends", 300, 80); textSize(15); text("Use the UP & DOWN arrow keys to scroll.\nClick on the cards to get the person's profile link.", 300, 150); if (keys.input[DOWN]) { friendY -= 10; } else if (keys.input[UP] && friendY < 0) { friendY += 10; } break; case "featured": // The featured programs pushMatrix(); translate(0, featuredY); for (var i = 0; i < settings.Featured.length; i++) { featuredP[i].draw(); } popMatrix(); fill(0, 255, 26); textAlign(CENTER, CENTER); textFont(settings.SceneTextFont, 50); text("Featured Programs", 300, 80); textSize(15); text("Use the UP & DOWN arrow keys to scroll.\nClick on the rectangles to get the program's link.", 300, 130); if (keys.input[DOWN]) { featuredY -= 10; } else if (keys.input[UP] && featuredY < 0) { featuredY += 10; } break; case "clock": BigClock.draw(); fill(0, 255, 26); textAlign(CENTER, CENTER); textFont(createFont("fantasy Italic"), 20); text("\"Click the e and you shall see. \"\n- Sparky", 300, 75); if (settings.Time === "regular") { textFont(settings.ClockFont, 80); text((hour() === 0 ? hour() + 12 : (hour() <= 12 ? hour() : hour() - 12)) + ":" + (minute() < 10 ? "0" + minute() : minute()) + ":" + (second() < 10 ? "0" + second() : second()) + (hour() < 12 ? "am" : "pm") \|\| (hour() >= 0 ? "am" : "pm"), 300, 520); } else if (settings.Time === "military") { textFont(settings.ClockFont, 80); text(hour() + ":" + (minute() < 10 ? "0" + minute() : minute()) + ":" + (second() < 10 ? "0" + second() : second()), 300, 520); } textSize(18); text("Click the clock to go back home.", 300, 575); break; case "runners": // The friend cards pushMatrix(); translate(0, runnersY); for (var i = 0; i < settings.Runners.length; i++) { runners[i].draw(); } popMatrix(); fill(0, 255, 26); textAlign(CENTER, CENTER); textFont(settings.SceneTextFont, 40); text("Subpage Contest Runners", 300, 80); textSize(15); text("Use the UP & DOWN arrow keys to scroll.\nClick on the cards to get the person's profile link.", 300, 150); if (keys.input[DOWN]) { runnersY -= 10; } else if (keys.input[UP] && runnersY < 0) { runnersY += 10; } break; case "why": fill(0, 255, 26); textAlign(CENTER, CENTER); textFont(createFont("san"), 30); text("'Let the insanity kick in,\n you never saw this message.\n Fall into the rabbit hole\n and maybe you'll learn your lesson' \n- SparkyGreen", 300, 150); break; } // This draws the buttons if (openMenu !== true && page !== "clock" && page !== "intro") { buttons[10].draw(); } else if (openMenu === true) { for (var i = 0; i < buttons.length - 1; i++) { buttons[i].draw(); } } // If the page is not the big clock, then always draw the mini clock if (page !== "clock" && page !== "intro") { MiniClock.draw(); } // For thumbnail if (keys.input[32]) { background(0); // Green fading background // noStroke(); rectMode(CENTER); for (var i = 0; i < 604; i += 4) { fill(0, 255, 0, 0 + (0.2 * i)); rect(300, i, 600, 4); } textAlign(CENTER, CENTER); textFont(createFont("Trebuchet MS"), 200); fill(0, 255, 26); text("s", 255, 270); fill(0); text("g", 345, 270); fill(0, 255, 26); textSize(90); text("SparkyGreen's", 300, 70); fill(0); textSize(120); text("Subpage", 300, 510); // The arc noFill(); stroke(0, 255, 26); strokeWeight(20); strokeCap(SQUARE); arc(300, 300, 300, 300, 0, 270); } }; } runPJS(program); // Add reload button on KA --> <script> <\/script> </div> //}/ //Article #6 [REPLACED] by nobody (c){ ` <style> #scene-container { font-family: Arial, sans-serif; line-height: 1.6; margin: 20px; } #scene-container .article { margin-bottom: 40px; border-bottom: 1px solid #ccc; padding-bottom: 20px; } #scene-container .article h2 { font-size: 24px; margin-bottom: 10px; } #scene-container .article p { font-size: 16px; line-height: 1.8; } #scene-container .article-footer { font-style: italic; color: #666; margin-top: 10px; } </style> <div class="article"> <h2>1. Smartphone Buying Guide</h2> <p>Keywords: smartphone, buying guide, features, comparison</p> <p>In this guide, we explore the essential features to consider when purchasing a smartphone. From camera quality to battery life, we cover it all to help you make an informed decision.</p> <div class="article-footer">Article by Your Name</div> </div> `, //} //Article #7 by kiaantolia (c) { ` <style> #scene-container{ background-color:rgb(255, 168, 255); padding-left:10px; padding-top:10px; } </style> <h1>Duke</h1> hi so im supposed to yap abt u like ur cool and ya so um idk what to say ur like cool and like wow um ya thats it you know ur cool :D `, //} //Article #8 by kiaantolia (c) { ` <style> #scene-container{ background-color:rgb(50,255,100); padding-left:10px; padding-top:10px; } </style> <h1>Dat</h1> so like erm hiiiii dat um like thanks ur cool and stuff and like wat um so like slayyy you have like um cool stuff ya and um ya. um so yay `, //} //Article #9 by kiaantolia (c) { ` <style> #scene-container{ background-color:rgb(168, 175, 255); padding-left:10px; padding-top:10px; } </style> <h1>Cwalsh</h1> cwalsh is the king! :D personally i think his projects are insanely underrated and awesome go check them out and subscribe to him `, //} ` `, ]; function switchPage(which) { // alert("called " + which) document.getElementById('resultsContainer').style.display = "none" document.getElementById('scene-container').style.display = "block" window.scrollTo(0, 0); document.getElementById('scene-header').style.display = "block" document.getElementById('scene-container').innerHTML = sceneEngine[which - 1]; } //Relocates to the searchpage function returnToHome(){ document.getElementById('resultsContainer').style.display = "block" document.getElementById('scene-container').style.display = "none" document.getElementById('scene-header').style.display = "none" } </script> <!--Module Debugger--> <script> document.getElementById('searchbar').addEventListener('keydown', function(event) { // alert(":)" ) }); </script> <!--Search Engine (c)--> <script type = "module"> const historyList = document.getElementById('historyList'); const clearHistoryBtn = document.getElementById('clearHistory'); const engine = { "The Enigma of the Voynich Manuscript": { iconImg: "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Unknown_person.jpg/1084px-Unknown_person.jpg", redirect: 1, website: "ljearticles.com", //voynic medieval mystery book illustrations decipherment decipher science keywords: ["voynic", "medieval", "mystery", "book", "illustrations", "decipherment", "decipher", "science", "idk"], des: "Some really cool manuscript that is voynich" }, "kiaantolia - modestly awesome": { iconImg: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Hopetoun_falls.jpg/1200px-Hopetoun_falls.jpg", redirect: 2, website: "kiaantolia-official.com", keywords: ["best", "amazing", "awesome", "cool", "kiaantolia", "kiaan", "keon", "tolia", "kian", "kia"], des: "WHOSE THHE GOAT?? (jk lol)" }, "help me \| Help Official FAQ": { iconImg: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Blue_question_mark_icon.svg/200px-Blue_question_mark_icon.svg.png", redirect: 3, website: "faq-official.net", keywords: ["help", "need ", "assistance", "SOS", "how", "faq"], des: "how 2 pley?? find out here and only here" }, "Optical Illusions - Tricks":{ iconImg: "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Unknown_person.jpg/1084px-Unknown_person.jpg", redirect: 4, website: "ljearticles.com", //optical illusion color eye science keywords: ["optical", "illusion", "color", "eye", "science"], des: "Discover the world of illusions" }, "Colorscheme - Art": { iconImg:"https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Unknown_person.jpg/1084px-Unknown_person.jpg", redirect:5, website:"ljearticles.com", //color coding graphic design scheme art drawing science keywords: ["color", "coding", "graphic", "design", "scheme", "art", "drawing", "colorscheme"], des: "Colors can be found anywhere in the world." }, //Not working =( // "Sparky Green - Sparkblog": { // iconImg: "https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/starky-sapling.png", // redirect:6, // website: "sparkblog.auto", // keywords: ["spark", "green", "fire", "friend", "ka", "user", "khan", "starky"] // }, "Smartphone buying guide": { iconImg:"https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/creatures/Winston.png", redirect:6, website:"nobodymemez.blog", //<p>Keywords: smartphone, buying guide, features, comparison</p> keywords: ["smartphone", "phone", "buying", "guide", "feature", "comparison", "apple", "google"], des: "Find out how to waste your money" }, "The Duke - kausers": { iconImg:"https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Khan_Academy_logo_%282018%29.svg/1024px-Khan_Academy_logo_%282018%29.svg.png", redirect:7, website:"kausers.friends.blog", keywords: ["friends", "duke", "gray world", "grey world", "for freedoms cause"], des: "Duke - friend of kiaantolia" }, "Dat - kausers": { iconImg:"https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Khan_Academy_logo_%282018%29.svg/1024px-Khan_Academy_logo_%282018%29.svg.png", redirect:8, website:"kausers.friends.blog", keywords: ["friends", "dat", "karlson", "bss", "bee swarm simulator", "webgl", "easter egg", "lol", "dddat"], des: "Dat - friend of kiaantolia" }, "cwalsh1223 - kausers": { iconImg:"https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Khan_Academy_logo_%282018%29.svg/1024px-Khan_Academy_logo_%282018%29.svg.png", redirect:9, website:"kausers.friends.blog", keywords: ["cwalsh", "evil josh td", "friend"], des: "cwalsh1223 - friend of kiaantolia" }, }; const searchInput = document.getElementById('searchbar'); const resultsContainer = document.getElementById('resultsContainer'); const resultsList = document.getElementById('resultsList'); window.historyRecorded = false; window.historyItemAppend = ""; function loadSearchHistory() { const history = JSON.parse(localStorage.getItem('searchHistory')) \|\| []; const historyList = document.getElementById('historyList'); historyList.innerHTML = ''; // Clear existing items if (history.length === 0) {//No data detected! const noDataMessage = document.createElement('span'); historyRecorded = false; noDataMessage.style.marginLeft = '30px'; noDataMessage.style.paddingTop = '20px'; noDataMessage.style.paddingBottom = '20px'; noDataMessage.textAlign = "center" noDataMessage.style.color = 'rgb(69, 69, 69)'; noDataMessage.innerHTML = '<br>                        You have no search data! Go back to start searching!<br><br>'; historyList.appendChild(noDataMessage); } //No data detected! else{//show data! historyRecorded = true; history.forEach(term => { const row = document.createElement('tr'); // Create a new row const cell = document.createElement('td'); // Create a new cell cell.className = 'historyItem'; cell.textContent = term; historyItemAppend = term; cell.addEventListener('click', () => { searchInput.value = term; handleSearch(term); //Perform the search with the selected term }); row.appendChild(cell); // Add cell to row historyList.appendChild(row); // Add row to table body }); }//show data! } function saveSearchToHistory(term) { let history = JSON.parse(localStorage.getItem('searchHistory')) \|\| []; if (!history.includes(term)) { history.push(term); localStorage.setItem('searchHistory', JSON.stringify(history)); loadSearchHistory(); // Refresh the history display } } /Checking if is valid URL. Pretty simple method, if it looks complex just ask me in T&T what it does/ function isValidURL(url) { var pattern = new RegExp('^(https?:\\/\\/)?'+ '((([a-z\\d]([a-z\\d-][a-z\\d]))\\.)+[a-z]{2,}\|'+ '((\\d{1,3}\\.){3}\\d{1,3}))'+ '(\\:\\d+)?(\\/[-a-z\\d%_.~+])'+ '(\\?[;&a-z\\d%_.~+=-])?'+ '(\\#[-a-z\\d_])?$','i'); return !!pattern.test(url); } /Setup of searcing/ var numOfResults = 0; var otherSearch = document.getElementById('otherSearchbar'); /DETECTING KEY EVENTS IN THE SEARCBAR/ searchInput.addEventListener('keydown', function(event) { /Start performance tracker/ const startTime = performance.now(); if (event.keyCode === 13) { numOfResults = 0; event.preventDefault(); const query = searchInput.value.toLowerCase(); if (isValidURL(query)) { window.open(query.startsWith('http') ? query : 'https://' + query, '_blank'); } else { const results = []; for (const title in engine) { if (engine[title].keywords.some(keyword => query.split(' ').some(q => keyword.toLowerCase().includes(q)))) { results.push({ title, iconImg: engine[title].iconImg, redirect: engine[title].redirect, website: engine[title].website, des: engine[title].des }); } } displayResults(results); saveSearchToHistory(query); const endTime = performance.now(); const loadTime = endTime - startTime; const resultsAmount = document.getElementById('resultsAmount'); resultsAmount.innerHTML = `${results.length} result(s) found in ${loadTime.toFixed(2)} ms`; /Change title: Showing results for .../ window.top.postMessage(JSON.stringify({ "title": "Showing results for: " + query, "action": "page-info", }), "https://www.khanacademy.org/") /* Matches input #1 to input #2. The reason why I couldn't keep them the same id, is because no two inputs are fully functional with the same id, as demonstrated below @Redirect https://www.khanacademy.org/computer-programming/new-webpage/4870200506105856 / otherSearch.value = searchInput.value; } } }); / Second input @SEE_ABOVE to know why there needs to be 2 / otherSearch.addEventListener('keydown', function(event) { / Records @current performance rate. For later calculations */ const startTime = performance.now(); if (event.keyCode === 13) { /If key is enter/ numOfResults = 0; /No results/ event.preventDefault(); /Prevent default value/ /Checks query/ const query = searchInput.value.toLowerCase(); /* Checks if @function isValidURL applies. If the value starts with http , then it will send it to the exact website, otherwise it will add https://, and send it to the new link, accordingly / if (isValidURL(query)) { window.open(query.startsWith('http') ? query : 'https://' + query, '_blank'); } else { / Otherwise, it will demonstrate the searching mechanism I built to detect keywords */ const results = []; for (const title in engine) { if (engine[title].keywords.some(keyword => query.split(' ').some(q => keyword.toLowerCase().includes(q)))) { /And will add results, accordingly/ results.push({ title, iconImg: engine[title].iconImg, redirect: engine[title].redirect, website: engine[title].website, des: engine[title].des }); } } /It will show the results/ displayResults(results); /And save it to search history/ saveSearchToHistory(query); /* Now, it will take the @performance time taken at the end, and subtract it by the start to find the total value */ const endTime = performance.now(); const loadTime = endTime - startTime; /Then, it displays the performance time in milliseconds, to the nearest hundredth/ const resultsAmount = document.getElementById('resultsAmount'); resultsAmount.innerHTML = `${results.length} result(s) found in ${loadTime.toFixed(2)} ms`; } } }); /If the clear button detects a click, then remove the current search history, and refresh!/ clearHistoryBtn.addEventListener('click', () => { localStorage.removeItem('searchHistory'); loadSearchHistory(); }); /Automatically loads search history on entering the webpage/ loadSearchHistory(); /* Function for displaying the @results! Essential to the search algorithm */ function displayResults(results) { //Resets all values resultsList.innerHTML = ''; numOfResults = 0; /If no results:/ if (results.length === 0) { let searchTerm = otherSearch.value === '' ? searchInput.value : otherSearch.value; resultsList.style.fontFamily = "Roboto" resultsList.innerHTML = 'Your search - <strong>'+searchTerm+ '</strong> - did not match any documents.<br>Suggestions:<br><ul><li>Make sure all words are spelled correctly.</li><li>Try different keywords.</li><li>Try more general keywords.</li><li>Try fewer keywords.</li><br><br><img style = "position:relative;top:-100px;left:100px;"src = "https://upload.wikimedia.org/wikipedia/commons/a/a0/Cartoon_steamer_duck_walking_animation.gif">' /* Otherwise: show @results / } else { results.forEach(result => { numOfResults++; const listItem = document.createElement('p'); const resultsItem = document.getElementById("resultsAmount"); resultsItem.innerHTML = numOfResults + " result(s) found in 0 ms"; listItem.innerHTML = ` <img src="${result.iconImg}" alt="${result.title}" style="width:20px;height:20px;margin-right:8px;border-radius:10px;display:inline;position:relative; top:2px"> <p style = "display:inline;font-family:Lato;font-weight:300;">ka.${result.website}</p> <br> <a onclick="switchPage(${result.redirect})" target="_blank" class = "searchVal">${result.title}</a> <p style = "font-family:Lato;font-weight:400;color:grey;margin-top:0;">${result.des}</p> `; const linkElement = listItem.querySelector('a.searchVal'); linkElement.addEventListener('click', () => { var startTime = performance.now(); // Start timing }); resultsList.appendChild(listItem); }); } document.getElementById("googleSearch1").style.display = "none"; document.body.style.backgroundImage = "none"; resultsContainer.style.display = 'block'; } </script> <script type = "module"> </script> <!--The debugging script Right click + Inspect to see--> <script type> /Archived till further notice*/ window.needHelp = false; // setInterval(console.clear(), 500); function consoleTypeEffect(message, delay = 100) { let index = 0; let currentMessage = ''; function type() { if (index < message.length) { console.clear(); currentMessage += message[index]; console.log(currentMessage); index++; setTimeout(type, delay); } } type(); } // consoleTypeEffect("Hello, there and welcome to Google Remake 3! I am your host, kiaantolia! Just type needHelp = true; and I'll get straight to you!", 100); document.addEventListener('DOMContentLoaded', function() { setInterval(console.clear(), 1000); setInterval(console.warn("Warning! Google Remake 4 may redirect you to other websites on request!"), 200) setInterval(console.log("Hello, there and welcome to Google Remake 4! I am your host, kiaantolia! Just type needHelp = true; and I'll get straight to you!"), 500); Object.defineProperty(window, 'needHelp', { get: function() { return needHelpValue; }, set: function(value) { needHelpValue = value; if (value === true) { console.log('Ok!'); } }, configurable: true, enumerable: true }); }) checkNeedHelp(); </script> <!--The intro script + display--> <div id="intro" onselectstart = "return false;"> <div class="text"> <span class="letter" style="animation-delay: 0s;">A</span> <span class="letter" style="animation-delay: 0.5s;"> </span> <span class="letter" style="animation-delay: 1s;color:rgb(21, 217, 34);">K</span> <span class="letter" style="animation-delay: 1.1s;color:rgb(21, 217, 34);">i</span> <span class="letter" style="animation-delay: 1.2s;color:rgb(21, 217, 34);">a</span> <span class="letter" style="animation-delay: 1.3s;color:rgb(21, 217, 34);">a</span> <span class="letter" style="animation-delay: 1.4s;color:rgb(21, 217, 34);">n</span> <span class="letter" style="animation-delay: 1.5s;color:rgb(21, 217, 34);">t</span> <span class="letter" style="animation-delay: 1.6s;color:rgb(21, 217, 34);">o</span> <span class="letter" style="animation-delay: 1.7s;color:rgb(21, 217, 34);">l</span> <span class="letter" style="animation-delay: 1.8s;color:rgb(21, 217, 34);">i</span> <span class="letter" style="animation-delay: 1.9s;color:rgb(21, 217, 34);">a</span> <span class="letter" style="animation-delay: 2.4s;"> </span> <span class="letter" style="animation-delay: 2.9s;">P</span> <span class="letter" style="animation-delay: 3s;">r</span> <span class="letter" style="animation-delay: 3.1s;">o</span> <span class="letter" style="animation-delay: 3.2s;">d</span> <span class="letter" style="animation-delay: 3.3s;">u</span> <span class="letter" style="animation-delay: 3.4s;">c</span> <span class="letter" style="animation-delay: 3.5s;">t</span> <span class="letter" style="animation-delay: 3.6s;">i</span> <span class="letter" style="animation-delay: 3.7s;">o</span> <span class="letter" style="animation-delay: 3.8s;">n</span> </div> </div> <script> setTimeout(function() { document.getElementById("intro").style.opacity="0" console.clear(); console.log("yes") }, 4000); setTimeout(function(){ document.getElementById("intro").style.display = "none" },4500) </script> <!--Thumbnail save--> <script> window.addEventListener("keyup", function(event){ if(event.keyCode==27){ document.getElementById("thumb-MAIN").style.display = "block" } }) </script> <script> //HELP in console: var help = [ "Console-1", "Reply-1", "Console-2", "Reply-1", "Console-1", "Reply-1", "Console-1", "Reply-1", "Console-1", "Reply-1", "Console-1", "Reply-1", "Console-1", "Reply-1", "Console-1", ] </script> <script> if(window.innerWidth!==599\|\|window.innerHeight!==400){ alert("Please visit: https://www.khanacademy.org/computer-programming/google-remake-4-khantober/4772805165367296?width=599&&height=400. Current dimensions detected: " +window.innerWidth + ", " + window.innerHeight) } </script> <!--Thumbnail script by Bluebird@Birdwatcher03. For optimizing thumbnail--> <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> <!-- GGGG OOOO OOOO GGGG L EEEEE 4 4 G O O O O G L E 4 4 G GG O O O O G GG L EEEE 44444 G G O O O O G G L E 4 GGGG OOOO OOOO GGGG LLLL EEEEE 4 I hand made that. But GOOGLE REMAKE 4 RELEASED! **********************PRE NOTES********************** Hello, and welcome to Google Remake 4! First of all, I would like to thank you for viewing this project. Secondly, I will tell you that I am officially announcing Google Remake 5.. Right now! It's gonna be a lot bigger, a lot better, and a LOT more accurate. Google Remake 4 is a complete recode. No code is taken from any past Google Remakes, or anywhere else, with the exception of Bluebird's Thumbnail Script. I think it should be pretty straight forward to use (unless you've never used google), so if you need any help, open the console, or (preferably) contact me in the questions, or on my subpage! Thanks, and enjoy! Can't find matching searches? Click enter without any text inputted! I would appreciate you creating an article. I appreciate everyone of y'all who submitted for the article contest, but it was too much work getting it situated. Those who did it, thank you 🙏 i just have a tiny ask, just instead of using body, html, please use #scene-container. It will make my life so much easier, thank you so much🙏🙏 *********************@LOG:************************** 07/12/2024: Started 07/21/2024: Hit 1,000+ lines 07/28/2024: Published Release Notes 07/29/2024: Hit 3,000+ lines 08/03/2024: Neatened Code / Commented a ton 08/28/2024: Restarted Developement 09/24/2024: 10,000+ lines of code, added a bunch of features 10/03/2024: Final touches, Now 4,000+ lines of code, I went through the code and optimized a ton, to cut down 10/05/2024: Forgot to save lost tons of progress 🥺🥺🥺 10/14/2024: Released! Khantober 2024. Thanks all for supporting 🙏🙏🙏 *********************FULL SERIES:******************** v1: https://www.khanacademy.org/cs/i/6283356762849280 v2: https://www.khanacademy.org/cs/i/4882239736823808 v3: https://www.khanacademy.org/cs/i/6670340873961472 v4: (current) v5: N̶e̶v̶e̶r̶ ̶g̶o̶n̶n̶a̶ ̶r̶e̶l̶e̶a̶s Developement starting september. Possibly for Khantober *********************INFO:************************** If you wish to see more of Google, make sure to check out my github. Me, Vexcess, and LeaferStudios are collaborating on a bigger Open-source google project. github.com/kiaantolia Note: IF YOU DON'T HAVE AN ARTICLE, IT DOESN'T MEAN YOU AREN'T MY FRIEND. IT JUST MEANS THAT I GOT LAZY AFTER REALIZING HOW MANY FRIENDS I HAVE *********************RATE THIS:********************* Overall _/10 Design _/10 Colorschemes _/10 Bugs: (Y/N) Tell me what What searches you want: Tell me what you want *********************IMPORTANT:********************* WHEN YOU CLEAR HISTORY, I DO NOT USE THE INTRUSIVE LOCALSTORAGE.CLEAR SINCE THAT IS ILLEGAL AND REMOVES YOUR DATA FROM EVERY SINGLE KA PROGRAM. NEVER USE THIS WHEN TRYING TO CLEAR LOCALSTORAGE. INSTEAD SET THE VARIABLE TO ' ' OR BLANK IMPORTANT NOTES TO SELF:[ DELETE LATER ] -dark mode 4 header on articles -test out diff modes on searching, maybe change colors of dark mode -make perssonalized pages for contribbuters -make sure to uncomment the lines hiding the intro! *********************LEADERBOARD:********************** ________________________________________________________ [EXAMPLE] John Doe(example.com) 10+ articles (^ / = / v) 50+ keywords (^ / = / v) Not AI Assisted (+1000?10000/-100) (^ / = / v) Total points: articles*keywords - AI Assisted ________________________________________________________ 🥇 [1] LJE(ka.ljearticles.com): 90+ articles ^ 540+ keywords ^ AI Assisted(-100) v Total points: 48500 (+Infinity) 🥈 [2] Nobody(ka.nobodymemez.blog) 50+ Articles ^ 250+ Keywords ^ AI Assisted(-100) v Total points: 12400 🥉[Disqualified user] Honorable mention: [DISQUALIFIED] SparkyGreen(ka.sparkblog.com) 250+ Articles ^ 85+ Keywords ^ AI Assited v Total points: 11445 -->
Folds	1,3884
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgNvj9Jq9CAw
Votes	80
Spin-Offs	2
Type	WEBPAGE
Width	400
Height	400
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	2 months ago, 1728949123218
Updated	2 months ago, 1729554804215
Source Deleted	unknown