Viewing Program

Program Data

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

Title	Youtube Clone
ID	6105207661346816
Created	4 years ago, 1621077110446
Updated	4 years ago, 1621318089151
Code	<!DOCTYPE html> <html> <!-- Youtube Clone Leaf 2021 Some things are clickable some are not. This is somewhat looks like my youtube home . Some channels exist and some are fake. Credit to bluebird for thumbnail script. and LS for help with thumbnail. Wanna sub : https://www.khanacademy.org/computer-programming/leaf-resubpage/5965098333454336 --> <head> <meta charset="utf-8"> <title>Youtube Clone</title> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Material+Icons\|Josefin+Sans\|Google+Sans+Display:500,400" rel="stylesheet"> <style> ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background-color: white; border-radius: 13px; } ::-webkit-scrollbar-thumb { background-color: rgb(207, 207, 207, 0.7); border-radius: 50px; border: 1px solid white; } ::-webkit-scrollbar-thumb:hover { background-color: rgb(207, 207, 207, 1); border-radius: 50px; border: 1px solid white; } ::selection { color: white; background-color: rgb(143, 140, 143); } .tooltip .tooltiptext { visibility: hidden; background-color: rgb(107, 106, 107); color: #fff; text-align: center; border-radius: 6px; padding: 10px; font-family: google sans display; position: absolute; z-index: 1; top: 133%; left: 50%; margin-left: -43px; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } input[type=text]{ position: fixed; top: 10px; left: 158px; width: 193px; height: 26px; outline: none; box-shadow: 0px 0px 2px 2px rgb(217, 213, 217) inset; border: 1px solid rgb(163, 163, 163); font-family: google sans display; } input[type=text]:focus{ box-shadow: 0px 0px 2px 2px rgb(209, 209, 209) inset; border:1px solid rgb(108, 99, 189); } #search { position: fixed; left: 356px; top: 10px; height: 30px; width: 41px; border: 1px solid rgb(163, 163, 163); outline: none; color: gray; } #search:hover { cursor: pointer; color: black; background-color: rgb(207, 207, 207); } #micid { position: fixed; left: 398px; top: 10px; height: 30px; width: 43px; border: none; outline: none; background-color: white; color: gray; } #micid:hover { cursor: pointer; color: black; } #createb { position: fixed; left: 436px; top: 10px; height: 30px; width: 43px; border: none; outline: none; background-color: white; color: gray; } #createb:hover { cursor: pointer; color: black; } #notif { position: fixed; left: 474px; top: 10px; height: 30px; width: 43px; border: none; outline: none; background-color: white; color: gray; } #notif:hover { cursor: pointer; color: black; } #acc { position: fixed; left: 512px; top: 10px; height: 30px; width: 43px; border: none; outline: none; background-color: white; color: green; } #acc:hover { cursor: pointer; } #yt .material-icons { color: red; font-size: 29px; position: fixed; top: 10px; left: 35px; } #yt:hover { cursor: pointer; } #yt #utube { font-family: "Roboto Condensed", sans-serif; position: fixed; top: 14px; left: 67px; font-size: 18px; } #yt #in { font-family: "Roboto Condensed", sans-serif; position: fixed; top: 14px; left: 130px; font-size: 10px; } #hr1 { position: fixed; width: 93%; top: 40px; left: 40px; } #hr2 { position: fixed; width: 93%; top: 106px; left: 40px; } #suggest-btns { position: fixed; top: 65px; left: 40px; } #suggest-btns button { border: 1px solid rgb(163, 163, 163); outline: none; padding: 7px; border-radius: 16px; box-sizing: border-box; height: 32px; cursor: pointer; margin-right: 4px; background-color: rgba(0, 0, 0, 0.1); font-family: sans-serif; } #suggest-btns button:hover { background-color: rgba(0, 0, 0, 0.2); } #videos { position: absolute; top: 137px; left: 40px; } .video { width: 151px; height: 83px; background-color: rgb(184, 184, 184); cursor: pointer; } #v1 { width: 159px; height: 107px; background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Jupiter_and_its_shrunken_Great_Red_Spot.jpg/800px-Jupiter_and_its_shrunken_Great_Red_Spot.jpg); background-size: 159px; } #v1:hover { background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a3/790106-0203_Voyager_58M_to_31M_reduced.gif/292px-790106-0203_Voyager_58M_to_31M_reduced.gif); background-size: 159px; } #v2 { width: 159px; height: 107px; background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/BH_LMC.png/800px-BH_LMC.png); background-size: 159px; } #v2:hover { background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/BlackHole_Lensing.gif/220px-BlackHole_Lensing.gif); background-size: 159px; } #v3 { width: 159px; height: 107px; background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Infinitely_wide_neural_network.webm/1200px--Infinitely_wide_neural_network.webm.jpg); background-size: 159px 107px; } #v3:hover { background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/bb/Kar-go_Real-time_Neural_Network_Processing.gif); background-size: 159px 107px; } #v4 { width: 159px; height: 107px; background-image: url(https://upload.wikimedia.org/wikipedia/commons/1/17/World_map_of_total_confirmed_COVID-19_cases_per_million_people.png); background-size: 159px 107px; border: 1px solid rgb(219, 219, 219); } #v4:hover { background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/b3/COVID-19-outbreak-timeline.gif); background-size: 159px 107px; } #v5 { width: 159px; height: 107px; background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/d1/GPB_circling_earth.jpg); background-size: 159px 107px; } #v5:hover { background-image: url(https://upload.wikimedia.org/wikipedia/commons/7/78/Relativity_of_Simultaneity_Animation.gif); background-size: 159px 107px; } #v6 { width: 159px; height: 107px; background-color: rgb(195, 203, 207); background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Lorentz_boost_x_direction_standard_configuration.svg/390px-Lorentz_boost_x_direction_standard_configuration.svg.png); background-size: 159px 107px; } #v6:hover { background-image: url(https://upload.wikimedia.org/wikipedia/commons/0/0b/Lorentz_Galilean_Comparison.gif); background-size: 159px 107px; border: 1px solid rgb(219, 219, 219); } .text { font-family: Google sans display; } .img img { width: 30px; border-radius: 50%; position: relative; top: 10px; } .title { position: relative; top: -2px; left: 9px; color: black; font-weight: bold; } .channel { position: relative; top: 2px; left: 32px; color: gray; font-size: 15px; } .stats { position: relative; top: 18px; left: -55px; font-size: 12px; color: rgb(102, 102, 102); } .time { color: white; font-family: roboto condensed; background-color: black; position: relative; top: 85px; left: 126px; padding: 3px; } #video2 { position: absolute; left: 174px; top: 1px; } #videoh { position: absolute; left: 174px; top: 46px; } #video3 { position: absolute; left: 345px; top: 1px; } #video4 { position: absolute; left: 0px; top: 207px; } #video5 { position: absolute; left: 174px; top: 207px; } #video6 { position: absolute; left: 345px; top: 207px; } #menu { font-family: roboto condensed; } .meu { position: fixed; } .meu:hover { background-color: rgb(0, 0, 0, 0.1); border-radius: 20px; } .home { position: fixed; top: 80px; left: 5px; color: red; cursor: pointer; } .ht { position: fixed; top: 108px; left: 2px; font-size: 13px; } .explore { position: fixed; top: 162px; left: 5px; color: rgb(97, 97, 97); cursor: pointer; } .et { position: fixed; top: 190px; left: 2px; font-size: 12px; } .subs { position: fixed; top: 241px; left: 5px; color: rgb(97, 97, 97); cursor: pointer; } .st { position: fixed; top: 269px; left: 2px; font-size: 12px; } .library { position: fixed; top: 331px; cursor: pointer; left: 5px; color: rgb(97, 97, 97); } .lt { position: fixed; top: 358px; left: 2px; font-size: 12px; } .home:hover, .explore:hover, .subs:hover, .library:hover { color: black; } #expContent { position: absolute; top:130px; left: 50px; } #history { position: absolute; top:130px; left: 50px; } #expContent button { width: 140px; height: 80px; font-size: 20px; background-color: rgb(245, 245, 245); border: none; outline: none; border-radius: 10px; cursor: pointer; margin-bottom: 10px; } #expContent button:hover { background-color: rgb(214, 214, 214); } .txt { font-family: roboto condensed; position: relative; top: 14px; left: -40px; } #expContent button .material-icons { position: relative; top: -15px; left: -20px; color: red; } #his { font-family: roboto condensed; position: relative; top: -7px; } .redLine { width: 150px; height: 3px; background-color: red; position: fixed; } </style> </head> <body> <div id="menu"> <span class="material-icons meu" style="cursor:pointer;padding:2px;">menu</span> <span class="home" onclick="home();"> <span class="material-icons">home</span><span class="ht">Home</span></span> <span class="explore" onclick="change();"> <span class="material-icons">explore</span><span class="et">Explore</span></span> <span class="subs"> <span class="material-icons">subscriptions</span><span class="st">Subsc-<br>riptions</span></span> <span class="library" onclick="oneMore();"> <span class="material-icons">video_library</span><span class="lt">Library</span></span> </div> <div id="yt"> <span class="material-icons">smart_display</span> <span id="utube">YouTube</span> <span id="in">IN</span> </div> <input type="text" placeholder="Search"> <button id="search"><div class="tooltip"><span class="material-icons">search</span> <span class="tooltiptext">Search</span> </div></button> <button id="micid"><div class="tooltip"><span class="material-icons">mic</span> <span class="tooltiptext">Search with your voice</span> </div></button> <button id="createb"><div class="tooltip"><span class="material-icons"><span class="material-icons"> video_call </span></span> <span class="tooltiptext">Create</span> </div></button> <button id="notif"><div class="tooltip"><span class="material-icons">notifications</span> <span class="tooltiptext">Notifications</span> </div></button> <button id="acc"><div class="tooltip"><span class="material-icons">account_circle</span> <span class="tooltiptext">Account</span> </div></button> <hr id="hr1"> <div id="suggest-btns"> <button title="All" style="background-color: rgb(0, 0, 0, 0.6); color:white;">All</button> <button title="Coding">Coding</button> <button title="Live">Live</button> <button title="Gaming">Gaming</button> <button title="Space">Space</button> <button title="Technology">Technology</button> <button title="News">News</button> <button title="Stocks">Stocks</button> </div> <hr id="hr2"> <div id="videos"> <div class="video"> <div id="v1"><span class="time">3:00</span></div> <div class="text"> <span class="img"><img src="https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/landscapes/waterfall_niagara-falls.png" alt="channel"></span> <span class="title">Jupiter</span> <span class="channel">FactBrocker</span> <span class="stats">403K views</span> </div> </div> <div class="video" id="video2"> <div id="v2"><span class="time">9:56</span></div> <div class="text"> <span class="img"><img src="https://upload.wikimedia.org/wikipedia/en/thumb/6/65/Kurzgesagt.png/200px-Kurzgesagt.png" alt="channel"></span> <span class="title">Black holes</span> <span class="channel">Kurzgesagt</span> <span class="stats">4.6M views</span> </div> </div> <div class="video" id="video3"> <div id="v3"><span class="time">9:00</span></div> <div class="text"> <span class="img"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Code.org_logo.svg/1200px-Code.org_logo.svg.png" alt="channel"></span> <span class="title">Neural Network</span> <span class="channel">Code with it</span> <span class="stats">19.3K views</span> </div> </div> <div class="video" id="video4"> <div id="v4"><span class="time">6:43</span></div> <div class="text"> <span class="img"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/BBC_News_2019.svg/800px-BBC_News_2019.svg.png" alt="channel"></span> <span class="title">Covid Updates</span> <span class="channel">BBC News</span> <span class="stats">61.7K views</span> </div> </div> <div class="video" id="video5"> <div id="v5"><span class="time">9:43</span></div> <div class="text"> <span class="img"><img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/CollageFisica.jpg" alt="channel"></span> <span class="title">Relativity Math</span> <span class="channel">Physics!</span> <span class="stats">161K views</span> </div> </div> <div class="video" id="video6"> <div id="v6"><span class="time">8:21</span></div> <div class="text"> <span class="img"><img src="https://upload.wikimedia.org/wikipedia/commons/1/15/Khan_Academy_Logo_Old_version_2015.jpg" alt="channel"></span> <span class="title">Lorentz Tran..</span> <span class="channel">KhanAcademy</span> <span class="stats">1M views</span> </div> </div> </div> <div id="expContent" style="display:none"> <button><span class="material-icons">local_fire_department</span><span class="txt">Trending</span></button> <button><span class="material-icons" style="color:rgb(141, 161, 9);">music_note</span><span class="txt">Music</span></button> <button><span class="material-icons" style="color:rgb(217, 144, 26);">sports_esports</span><span class="txt">Gaming</span></button> <button><span class="material-icons" style="color:rgb(26, 109, 217);">feed</span><span class="txt">News</span></button> <button><span class="material-icons" style="color:rgb(87, 26, 217);">theaters</span><span class="txt">Movies</span></button> <button><span class="material-icons" style="color:rgb(217, 26, 195);">tips_and_updates</span><span class="txt">Fashion</span></button> <button><span class="material-icons" style="color:rgb(20, 173, 12);">emoji_objects</span><span class="txt">Learn</span></button> <button><span class="material-icons" style="color:rgb(26, 217, 211);">sensors</span><span class="txt">Live</span></button> <button><span class="material-icons" style="color:rgb(9, 60, 122);">emoji_events</span><span class="txt">Sports</span></button> </div> <div id="history" style="display:none"> <span class="material-icons">history</span> <span id="his">History</span> <br><br> <div class="video" id="video1"> <div id="v2"><span class="time">9:56</span></div> <span class="redLine"></span> <div class="text"> <span class="img"><img src="https://upload.wikimedia.org/wikipedia/en/thumb/6/65/Kurzgesagt.png/200px-Kurzgesagt.png" alt="channel"></span> <span class="title">Black holes</span> <span class="channel">Kurzgesagt</span> <span class="stats">4.6M views</span> </div> </div> <div class="video" id="videoh"> <div id="v4"><span class="time">6:43</span></div> <span class="redLine"></span> <div class="text"> <span class="img"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/BBC_News_2019.svg/800px-BBC_News_2019.svg.png" alt="channel"></span> <span class="title">Covid Updates</span> <span class="channel">BBC News</span> <span class="stats">61.7K views</span> </div> </div> </div> <script type> function change() { document.getElementById("videos").style.display="none"; document.getElementById("expContent").style.display="block"; document.getElementById("history").style.display="none"; } function home() { document.getElementById("videos").style.display="block"; document.getElementById("expContent").style.display="none"; document.getElementById("history").style.display="none"; } function oneMore() { document.getElementById("videos").style.display="none"; document.getElementById("expContent").style.display="none"; document.getElementById("history").style.display="block"; } </script> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.3/dist/html2canvas.min.js"></script> <!-- CREDIT TO BlueBird@BirdWatcher03 FOR THE AMAZING SAVE FUNCTION --> <script> var save = function(){ html2canvas(document.body,{ allowTaint : false, useCORS: true, width:579, height:566, }) .then(function(canvas){ b64Img = canvas.toDataURL(); window.top.postMessage(b64Img, "https://www.khanacademy.org/"); }); }; var handleSave = function(e) { if (JSON.parse(e.data).screenshot) { setTimeout(function() { console.log("Saving..."); save(); }, 1000) } }; window.parent.savers = window.parent.savers \|\| 0; window.parent.addEventListener('message', handleSave); window.parent.savers += 1; for (window.parent.savers; window.parent.savers > 1; window.parent.savers -= 1) { window.parent.removeEventListener('message', handleSave) } </script> <script type="application/javascript"> document.body.addEventListener("keydown", function(e) { if (e.code === "Escape") { document.body.innerHTML = ` <div class='center' style='overflow:hidden;box-shadow: inset 0px -20px 200px rgba(237, 5, 67, 0.25);height:100%;width:100%;background-image:url("");'> <h1 style="padding-top: 160px;font-size:70px;margin-bottom:10px;letter-spacing:5px;color:white;">Youtube</h1> <p style="position: relative;top:-15px;height:0px;color:rgb(128, 128, 128);letter-spacing:4px;color:white;">Clone</p> </div> `; } if (e.code === "Enter") { e.preventDefault(); } }); </script> </body> </html>
Folds	23,488,490,723
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgL3v9pTsCgw
Votes	334
Spin-Offs	15
Type	WEBPAGE
Width	400
Height	500
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Leaf
Author Name	leafkn
Author ID	kaid_481697903688181525808339
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739453597200
Updated	8 months ago, 1744828865225
Source Deleted	unknown