Viewing Program

Program Data

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

Title	Progress Steps
ID	5615078534201344
Created	9 months ago, 1711804232669
Updated	9 months ago, 1711829410600
Code	<!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8" /> <meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> <style> * { box-sizing: border-box; } body { background-color: #f6f7fb; font-family: 'Muli', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .container { text-align: center; } .progress-container { display: flex; justify-content: space-between; position: relative; margin-bottom: 30px; max-width: 100%; width: 350px; } .progress-container::before { content: ''; background-color: #e0e0e0; position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 4px; width: 100%; z-index: -1; } .progress { background-color: #3498db; position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 4px; width: 0%; z-index: -1; transition: 0.4s ease; } .circle { background-color: #fff; color: #999; border-radius: 50%; height: 30px; width: 30px; display: flex; align-items: center; justify-content: center; border: 3px solid #e0e0e0; transition: 0.4s ease; } .circle.active { border-color: #3498db; } .btn { background-color: #3498db; color: #fff; border: 0; border-radius: 6px; cursor: pointer; font-family: inherit; padding: 8px 30px; margin: 5px; font-size: 14px; } .btn:active { transform: scale(0.98); } .btn:focus { outline: 0; } .btn:disabled { background-color: #e0e0e0; cursor: not-allowed; } </style> <title>Progress Steps</title> </head> <body> <div class = "container"> <div class = "progress-container"> <div class = "progress" id = "progress"> </div> <div class = "circle active">1</div> <div class = "circle">2</div> <div class = "circle">3</div> <div class = "circle">4</div> </div> <button class = "btn" id = "prev" disabled>Prev</button> <button class = "btn" id = "next">Next</button> </div> <!-- Save Function - All code in the tag below belongs to Bluebird @BirdWatcher03. --> <script src = "https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.3/dist/html2canvas.min.js"> </script> <script> var save = function() { html2canvas(document.body,{ allowTaint : false, useCORS: true, width:document.documentElement.clientWidth, height:document.documentElement.clientWidth }) .then(function(canvas) { b64Img = canvas.toDataURL(); if(b64Img.length > 1033500) { // alert("Oh no, the thumbnail is to big!\nTry making your webpage display size smaller."); } else { 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> const progress = document.getElementById('progress') const prev = document.getElementById('prev') const next = document.getElementById('next') const circles = document.querySelectorAll('.circle') let currentActive = 1; function update() { circles.forEach(function(circle, idx) { if(idx < currentActive) { circle.classList.add('active') } else { circle.classList.remove('active') } }) const actives = document.querySelectorAll('.active') progress.style.width = ((actives.length -1) / (circles.length - 1))*100 + '%' if(currentActive === 1) { prev.disabled = true; } else if(currentActive === circles.length) { next.disabled = true; } else { prev.disabled = false; next.disabled = false; } } next.addEventListener('click', function() { currentActive ++ ; if(currentActive > circles.length) { currentActive = circles.length } update() }) prev.addEventListener('click', function() { currentActive -- ; if(currentActive < 1) { currentActive = 1 } update() }) </script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgKvLpdz8CQw
Votes	17
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	true
By Child	false
Author Nick	🔥LIL ΓУLΞЯ🔥
Author Name	tlawson09
Author ID	kaid_4465081938278916237377999
Author Profile Access	PUBLIC

Archive Data

Added	9 months ago, 1711842545361
Updated	9 months ago, 1711842545361
Source Deleted	unknown