Viewing Program

Program Data

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

Title	Fullscreen Tutorial
ID	5228155892842496
Created	11 months ago, 1706724710918
Updated	10 months ago, 1710268641374
Code	<!doctype html> <html lang='en'> <head> <meta charset='utf-8'> <meta name='viewport'content='width=device-width,initial-scale=1'> <title>Fullscreen Tutorial</title> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Unica+One&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Inline+Text:wght@700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Material+Icons\|Lora\|Noto+Serif\|Material+Symbols\|Cabin\|Staatliches\|Major+Mono+Display\|Material+Icons+Outlined\|Material+Symbols+Outlined\|Josefin+Sans" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css?family=Dancing+Script&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Ewert&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Material+Icons\|Material+Symbols\|Cabin\|Staatliches\|Major+Mono+Display\|Material+Icons+Outlined\|Material+Symbols+Outlined\|Josefin+Sans" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css2?family=Pompiere&family=Square+Peg&display=swap" rel="stylesheet"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Lato&family=Roboto&family=Material+Icons&display=swap'> <link href="https://fonts.googleapis.com/css?family=Dancing+Script\|Diplomata+SC&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Londrina+Outline&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Google+Sans:500,400" rel="stylesheet"/> <link rel="stylesheet" id="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/night-owl.min.css"/> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Macondo&display=swap" rel="stylesheet"> <link rel='preconnect' href='https://fonts.googleapis.com'> <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin> <link rel='preload' as='style' href='https://fonts.googleapis.com/css2?family=Lato&family=Roboto&family=Material+Icons&display=swap'> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Lato&family=Roboto&family=Merriweather&family=Material+Icons&display=swap'> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js'></script> <!-- Styling --> <style> @keyframes fadeIn { from { opacity: 0%; } to { opacity: 100%; } } #page{ animation: fadeIn 5s linear infinite; } </style> <!--fullscreen button styles--> <style> /the fullscreen button/ #fullscreen-button{ position:fixed;/makes it so it stays in the same place no matter what/ top:5px;/makes the top 5 pixels from the top of screen/ right:5px;/makes the right side 5 pixels from the right side of screen/ background:var(--four-color);/sets the background color to the color we set --four-color to up there ^/ border-radius: 20px;/gives it rounded corners of a 20 pixel radius/ font-size:150%; } </style> <style> #yes{ position:fixed; color:green; font-size:200%; right:16%; bottom:10%; } #yes:hover{ font-size:220%; } #go{ position:fixed; color:red; font-size:200%; right:16%; top:10%; } #go:hover{ font-size:220%; } .qu h1{ font-size:200%; color:black; } #no{ color:red; font-size:200%; position:fixed; left:16%; bottom:10%; } #no:hover{ font-size:220%; } .qu{ position:fixed; left:20%; right:20%; top:20%; bottom:20%; color:"black"; padding:3%; } </style> <style> button{ background-color:rgb(25, 156, 143); background-image: url("https://upload.wikimedia.org/wikipedia/commons/4/4a/Attractor_Poisson_Saturne.jpg"); width:100%; background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; font-size:200%; border-radius: 30px; width:80%; font-family:sans-serif; border-color:rgba(0,0,0,0); padding:5px; } .page{ animation: fadeIn 1s; } #IDONTKNOW{ font-size:3em; } #demo{ font-family:"Dancing Script"; } .footerlink{ text-decoration: underline; color:rgb(242, 144, 46); } #topthing{ width:100%; height:20px; background:white; } body { overflow-x: hidden; margin: 0; text-align: center; } #first{ margin-top: 50px; margin-bottom: 50px; } h1{ color:rgb(255, 255, 255); text-align: center; } * { transition: all 1s; text-align:center; item-align:center; } #think{ animation: fadeIn 1s; } #theimg{ border-radius: 30px; transition: all 1s; } #theimg:hover{ background-color:rgba(0,0,0,30%); } footer{ margin-top:3%; margin-bottom:-100%; font-family: "Dancing Script", sans-serif; background:linear-gradient(54deg,rgb(255, 43, 0), rgb(255, 94, 0),rgb(255, 94, 0),rgb(255, 133, 10), rgb(255, 133, 10), rgb(255, 204, 38)); text-align: center; color: white; text-decoration: none; } #home a{ color: rgb(230, 0, 230,0%); } #select{ color:white; background:transparent; border:none; } footer a{ font-family: "Dancing Script", sans-serif; font-size: 2em; font-weight: bold; text-align: center; color :white ; text-decoration: none; animation-timing-function: linear; } #bottom-thing{ padding-top: 0px; padding-bottom: 0px; padding-left: 5px; padding-right: 5px; margin-top:-50px; } #vicioustrex a{ text-align: center; font-size:120%; font-family: sans-serif; } #vicioustrex{ font-size:80%; text-align: center; font-family: sans-serif; } #c{ font-family: sans-serif; font-size:98%; } ::selection { background-color: rgba(106, 245, 252,0.9); color:rgb(0, 0, 0); } body{ background:black; } { transition:0.2s; } button{ color:white; } .navop{ width:200%; background:black; color:white; border:none; } .navop:hover{ background:white; color:black; } p{ color:white; font-size:20px; } #copy-button2{ margin-top: -357px; } #copy-button3{ margin-top: -475px; } p{ padding:5%; } header h1{ font-size: 2em; }@media (min-width: 500px){ header h1{ / Small Size / font-size:8em; } } .Tutorials{ font-size: 1em; }@media (min-width: 500px){ .Tutorials{ / Small Size / font-size:5em; } } /.Tutorials{ font-size:350%; }/ header h1{ font-family: "Noto Serif"; margin-top:30%; margin-left:1%; } #logo{ position:fixed; left:10px; top:10px; } header{ text-align:center; background:linear-gradient(54deg, rgb(255, 204, 38),rgb(255, 133, 10), rgb(255, 94, 0)); color:rgb(207, 241, 255); overflow:hidden; text-shadow: -5px 5px 2px rgb(0, 0, 0, 30%); } a{ color:rgb(255, 140, 0); } h2 a{ color:rgb(255, 255, 255); text-decoration: none; } </style> <style> / #smooth{ margin-top:20%; font-size:5.5em; }/ #boringfont{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-items: stretch; align-content: stretch; margin-bottom: 3%; width: 400px; height: 20%; margin-left:0px; overflow: auto; min-width: 200px; max-width: 200px; margin-left:30%; } #boringfont a{ font-size:20px; font-family:sans-serif; text-decoration: underline; transition: all 0.5s; padding:5px; } #boringfont a:hover{ background:rgb(0,0,0,40%); } p{ font-family: sans-serif; } / background:linear-gradient(10deg, rgb(255, 94, 0), rgb(255, 133, 10), rgb(255, 204, 38)); / .homepagebuttons{ font-family:"Lora"; margin-right:5%; border-radius: 30px; cursor:pointer; } .material-icons{ } #menu{ font-size:35px; } </style> <style> #overlay { position: fixed; background-color: rgba(0, 0, 0, 0.5); padding:10px; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; display: none; } #overlay.on { display: block; } #sidenav { background:rgba(0,0,0,40%); display: block; position: fixed; top: 0; right: -40%; color:white; bottom: 0; width: 40%; box-shadow: -10px -10px 6px rgba(0, 0, 0, 0); transition: all 0.15s; z-index: 100; font-size:1.3em; font-family:"Lora"; font-size:1.2em; } #sidenav.on { right: 0px; animation: fadeIn 1s; font-family:"Lora"; } #sidenav a { color:white; display: block; padding: 25px 24px; font-weight: 500; transition: all 0.1s; border-color:rgba(0,0,0,5%); text-decoration: none; font-family:"Lora"; } #sidenav a:hover { background-color: rgb(255, 255, 255,20%); text-decoration: none; } nav { animation: fadeIn 1s; justify-content: space-between; border-bottom: 1px solid gainsboro; position: fixed; top: 0; left: 0; border-color:rgba(0,0,0,0%); text-align:left; border-radius: 30px; text-decoration: none; font-family:"Lora"; } nav a{ text-decoration: none; padding:5px; margin-top:5px; font-family:"Lora"; } nav a:hover { text-decoration: none; font-family:"Lora"; background-color: rgb(245, 245, 245,50%); border-radius: 5px; height:20px; width:20px; } .material-symbols-outlined { vertical-align: middle; } </style> <style> #pages-h1{ font-family:"Lora"; margin:0; font-size:50px; margin:30px; } #menu{ padding-top:0px; padding-bottom:0px; } .homepagebuttons h2{ border-radius: 30px; border:1px solid rgb(105, 105, 105); background: rgb(20,20,20); position: relative; background-image: url("https://www.khanacademy.org/computer-programming/a-collection-of-tutorials/6106562078883840/5308163102523392.png"); background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; } #padding{ padding:5%; } header p{ font-size:154%; font-weight:bold; } .background{ background-color:rgb(25, 156, 143); background-image: url("https://upload.wikimedia.org/wikipedia/commons/4/4a/Attractor_Poisson_Saturne.jpg"); width:100%; background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; } h2{ font-size:200%; color:white; } #vitox{ text-decoration: none; color:white; font-family: "Dancing Script", sans-serif; font-size:180%; } .hljs { background: rgb(20,20,20); position: relative; background-image: url("https://www.khanacademy.org/computer-programming/a-collection-of-tutorials/6106562078883840/6586968247025664.png"); background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; } pre{ text-align: left; width:90%; overflow-x: auto; margin-left: 5%; padding:5px; border-radius: 3px; font-family:monospace; } code{ text-align:left; border-radius: 5px; font-family:monospace; } .copy { display: flex; align-items: center; height: 20px; font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 300; padding: 10px; position: absolute; top: 0; right: 0; background: #00000055; color: #ccc; cursor: pointer; font-size: 17px; border-bottom-left-radius: 5px; transition: color 250ms; } .copy .material-icons { font-size: 16px; margin-right: 2px; } .copy:hover { color: #fff; } </style> </head> <body class='body'> <div id = "p3" class = "page"> <header id = "header" class = "background"> <div> <h1 class = "Tutorials">Fullscreen Tutorial </h1> </div> </header> <h2 id = "first"class='scroll-element up'>getting started</h2> <p class='scroll-element up'> So to start your going to want to open a new webpage <a target="_blank" href = "https://www.khanacademy.org/computer-programming/new/webpage" title ="New webpage"> here </a> inport Material Icons from google fonts nein . </p> <div class='scroll-element up'> <pre><code class = "html">&lt!DOCTYPE html> &lthtml> &lthead> &ltmeta charset="utf-8"> &lttitle>New webpage&lt/title> &ltlink rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Lato&family=Material+Icons&display=swap'> &lt/head> &ltbody> &lt!--your web-page here--> &lt/body> &lt/html> </code> </pre> </div> <p class='scroll-element up'> then you will inport j-query and add the fullscreen button </p> <div class='scroll-element up'> <pre><code class="html">&lt!DOCTYPE html> &lthtml> &lthead> &ltmeta charset="utf-8"> &lttitle>New webpage&lt/title> &ltlink rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Lato&family=Material+Icons&display=swap'> &ltscript src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">&lt/script> &lt/head> &ltbody> &lt!--your web-page here--> &ltspan class='material-icons' id='fullscreen-button' onclick="document.getElementById('fullscreen-button').remove();"> fullscreen &lt/span> &lt/body> &lt/html> </code> </pre> </div> <p class='scroll-element up'> then you will add the fullscreen function </p> <div class='scroll-element up'> <pre><code class="html">&lt!DOCTYPE html> &lthtml> &lthead> &ltmeta charset="utf-8"> &lttitle>New webpage&lt/title> &ltlink rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Lato&family=Material+Icons&display=swap'> &ltscript src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">&lt/script> &lt/head> &ltbody> &lt!--your web-page here--> &ltspan class='material-icons' id='fullscreen-button' onclick="document.getElementById('fullscreen-button').remove();"> fullscreen &lt/span> &ltscript type> //get the fullscreen button var fullscreen_button = document.getElementById('fullscreen-button'); function open_in_fullscreen(){ fullscreen_button.remove(); const Window = window.open(); Window.document.open(); Window.document.write(` &lt!doctype html> &lthtml>`+ $("html").html() +`&lt/html> `); } //if the fullscreen button is clicked open in fullscreen fullscreen_button.addEventListener('click', open_in_fullscreen); &lt/script> &lt/body> &lt/html> </code> </pre> </div> <p class='scroll-element up'> and thats all to see a simple demo go <a class='scroll-element up'href = "https://www.khanacademy.org/computer-programming/demo/6218363572502528" title = "demo"> here </a> . </p> <button onclick="window.print(); return false;"> Print Tutorial </button> </div> <footer class='scroll-element up background'> <!-- <svg style="margin-top:-76px;" viewBox="0 0 500 100" preserveAspectRatio="xMinYMin meet"> <polygon points = '0,90 500,63 500,63 0,63' fill = 'black'/> </svg>--> <svg style=" margin-top: -12.7%; left: 0px;" viewBox="0 0 500 100"> <polygon points = '0,90 500,63 500,63 0,63' fill = 'black'/> </svg> <div style = "padding:25px;"> <div style = "display: flex; flex-direction: row"> <div style = "width: 50%; "> <p class='scroll-element up'> webpage created by <a title = "My profile"target="_blank" href = "https://www.khanacademy.org/profile/vicioustrex/"> Vicioustrex <!-- <img src= "https://www.khanacademy.org/computer-programming/spin-off-of-new-program/6560866140733440/4950751738380288.png"id = "theimg">--> </a> to see more tutorials go <a target="_blank" href = "https://www.khanacademy.org/computer-programming/a-collection-of-tutorials/4890911016402944">here</a> </p> </div> <div id = "boringfont"class='scroll-element up'> <h1 id = "pages-h1">pages<br> </h1> <a href = "#header"> back to top </a> <!-- <a id = "p2" class = "button">--> <!-- masking Tutorial</a>--> <!-- <a id = "p3" class = "button">--> <!-- Google fonts in a webpage Tutorial</a>--> <!-- <a id = "p4" class = "button">--> <!-- smooth arrow key movement Tutorial</a>--> <!-- <a id = "p5" class = "button">--> <!--Animations in a webpage tutorial --> <!-- </a>--> <!-- <a target="_blank" href = "https://www.khanacademy.org/computer-programming/get-tutorial/5108160008077312">--> <!-- get Tutorial(link)--> <!-- </a>--> </div> </div> <hr class='scroll-element down'style = "margin: 0px 0px;"> </div> <div id = "bottom-thing"> <h6 id="vicioustrex"class='scroll-element u'> <a title = "My profile"target="_blank" href="https://www.khanacademy.org/profile/vicioustrex/"> Copyright <span id="c">© </span> 2024 <span class = "footerlink">vicioustrex</span> <img title = "My profile" src="https://www.khanacademy.org/computer-programming/spin-off-of-new-program/6560866140733440/4950751738380288.png" alt = "Vitorios ultimate" width ="35"> </a> - Made available under the <a target="_blank" href="http://opensource.org/licenses/mit-license.php"> <span class = "footerlink"> MIT License </span> </a> <!-- <span id = "mit"> Made available under the <a id = "inmit"href="http://opensource.org/licenses/mit-license.php">MIT License</a> </span>--> </h6> </div> </footer> <a target="_blank"id = "logo"href = "https://www.khanacademy.org/computer-programming/a-collection-of-tutorials/4890911016402944"> <img src = "https://www.khanacademy.org/computer-programming/new-program/4552609177452544/6087803686535168.png"width = "40"> </a> <!-- Scripts --> <script type='module'> hljs.highlightAll(); const pres = document.querySelectorAll('pre > code'); // add copy buttons pres.forEach(p => { const copyThis = p.innerText; const div = document.createElement('div'); div.classList = 'copy'; div.title = 'Copy to clipboard'; div.addEventListener('click', () => { div.innerHTML = '<span class="material-icons">check_circle</span>Copied!'; div.style = 'color: green'; copyToClipboard(copyThis); window.setTimeout(() => { div.innerHTML = '<span class="material-icons">content_copy</span>Copy'; div.style = ''; }, 3000); }); div.innerHTML = '<span class="material-icons">content_copy</span>Copy'; p.appendChild(div); }); function copyToClipboard(text) { if (window.clipboardData && window.clipboardData.setData) { // Internet Explorer-specific code path to prevent textarea being shown while dialog is visible. return window.clipboardData.setData("Text", text); } else if (document.queryCommandSupported && document.queryCommandSupported("copy")) { var textarea = document.createElement("textarea"); textarea.textContent = text; textarea.style.position = "fixed"; // Prevent scrolling to bottom of page in Microsoft Edge. document.body.appendChild(textarea); textarea.select(); try { return document.execCommand("copy"); // Security exception may be thrown by some browsers. } catch (ex) { console.warn("Copy to clipboard failed.", ex); return prompt("Copy to clipboard: Ctrl+C, Enter", text); } finally { document.body.removeChild(textarea); } } } </script> <script> var avatarEls = document.getElementsByClassName("button"); for (var i = 0; i < avatarEls.length; i++) { avatarEls[i].i = avatarEls[i].i; avatarEls[i].title = avatarEls[i].innerHTML; } </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script type> function draw(){ var header = $("header"); var height = window.innerHeight+"px"; header.css("height",height); } window.setInterval(draw,10); // header.style.height(window.innerHeight+"px"); </script> <p id = "fullscreen-button-thing"> <span class='material-icons' id='fullscreen-button' onclick="document.getElementById('fullscreen-button').remove();"> fullscreen </span> </p> <script type> //fullscreen function I wrote no copied from polar //get the fullscreen button var fullscreen_button = document.getElementById('fullscreen-button'); function open_in_fullscreen(){ fullscreen_button.remove(); const Window = window.open(); Window.document.open(); Window.document.write(` <!doctype html> <html>`+ $("html").html() +`</html> `); } //if the fullscreen button is clicked open in fullscreen fullscreen_button.addEventListener('click', open_in_fullscreen); </script> <!-- The Thumbnail Script 2.1.0 12/18/2023 by Bluebird@kaid_157624541333313939750668 --> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script> <script type> var r = 600; var s = document.documentElement.clientWidth; window.parent.html2canvas = e => { try { html2canvas(document.body, { width: s, height: s, useCORS: true, onclone: e => e.getAnimations().forEach(a=>{ try{ a.finish() }catch{} }) }).then(e => { var c = document.createElement("canvas"); c.width = r; c.height = r; c.getContext('2d').drawImage(e, 0, 0, e.width, e.height, 0, 0, r, r); window.top.postMessage(c.toDataURL(), ""); }).catch(e => { alert("Thumbnail Script Error: " + e); }); } catch { window.top.postMessage(document.createElement("canvas").toDataURL(), "*"); } }; </script> </body> </html>
Folds	2,1062
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgMu2rt-kCQw
Votes	24
Spin-Offs	3
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Vicioustre𝑥 ‮BBB#
Author Name	Vicioustrex
Author ID	kaid_1063463007130342809105382
Author Profile Access	PUBLIC

Archive Data

Added	1 months ago, 1733626167199
Updated	1 months ago, 1733626167199
Source Deleted	unknown