Viewing Program

Program Data

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

Title	Sweetify \| Entry for TCW
ID	5469734593019904
Created	24 days ago, 1734371196667
Updated	24 days ago, 1734371509707
Code	<!DOCTYPE html> <!-- Created by Washington and RealCodingPro for TCW 2024. Features -Feedback form Credits -Mozilla Dev Network for reference. --> <html> <head> <meta charset="utf-8"> <title>Sweetify \| Entry for TCW</title> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css2?family=Boogaloo&family=Roboto" rel="stylesheet"> <!-- Material icons --> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@1" rel="stylesheet" /> <style> * { margin:0; padding:0; } :root { --cream: rgb(235, 224, 208); --pink: rgb(236, 158, 192); --fushia: rgb(255, 0, 128); --dark-pink: rgb(169, 27, 96); } body { background-color:var(--cream); font-family:"Roboto"; font-size:18px; letter-spacing: 0.5px; } p { margin:10px 0; } a { color:var(--fushia); text-decoration:none; font-weight:bold; } a:hover { text-decoration:underline; } button { background-color:var(--dark-pink); color:white; border:none; border-radius:5px; padding:10px; font-size:1em; font-weight:bold; transition: .2s; } button:hover { cursor:pointer; transform:scale(1.03); } .special-btn { background-image:linear-gradient(to left,var(--dark-pink),var(--fushia)); } ::-webkit-scrollbar { background-color:var(--cream); width:10px; } ::-webkit-scrollbar-thumb { background-color:var(--pink); } ::-webkit-scrollbar-thumb:hover { background-color:var(--dark-pink); } </style><!-- Basic Styles --> <style> header { background-color:var(--pink); display:flex; align-items:center; justify-content:space-between; height:60px; padding:0 20px; } header h1, footer h1{ font-family:"Boogaloo"; color:var(--dark-pink); } nav a { color:var(--dark-pink); font-weight:700; margin:0 5px; transition: .5s; } nav a:hover { color:var(--fushia); text-decoration:none; cursor:pointer; } footer { background-color:var(--pink); text-align:center; color:var(--dark-pink); padding:40px 20px; } footer a.material-symbols-outlined { font-weight:bold; text-decoration:none; transition: .5s; } footer a.material-symbols-outlined:hover { color:var(--dark-pink); } </style><!-- Header and Footer --> <style> .hero { background-image: linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.7)), url("https://upload.wikimedia.org/wikipedia/commons/6/60/Pink_Princess_Birthday_Cupcakes_%283807263207%29.jpg"); background-size:cover; height:540px; } .hero-center { background-color:rgba(236, 158, 192,0.6); position:relative; top:100px; width:45%; padding:30px; } </style><!-- Hero --> <style> .page { min-height:540px; } .container { display:flex; margin:50px 0; } .card { width:190px; text-align:center; margin:15px; transition:0.5s; } .card:hover { padding: 5px; padding-bottom: 10px; background: rgb(222, 192, 155); border-radius: 10px; transform: scale(1.1); cursor: pointer; } .info-section { width:100%; } .info-section div{ padding:15px; width:40%; } .info-section img{ width:55%; } .option-card { background-color:var(--cream); width:200px; margin:30px; padding:5px; border:3px solid var(--fushia); border-radius:5px; text-align:center; transition: .5s; } .option-card img { width:140px; } .option-card h4 { margin:20px 0; } .option-card:hover { box-shadow:-5px 5px 0px var(--fushia); transform:translate(5px,-5px); } .feed-form { background-color:var(--pink); padding:20px; } .feed-form h3 { margin-top:20px; margin-bottom:10px; } .review-star { font-size:1.5em; color:lightgray; } .review-star:hover { cursor:pointer; } .feed-form textarea { width:400px; height:100px; padding:10px; font-size:1em; resize:none; } </style><!-- Most Pages --> </head> <body> <header id = "header"> <h1>Sweetify</h1> <nav> <a href = "javascript:switchPage(0);">Home</a> <a href = "javascript:switchPage(1);">About</a> <a href = "javascript:switchPage(2);">Browse</a> <a href = "javascript:switchPage(3);">Feedback</a> <a href = "javascript:switchPage(4);">Credits</a> </nav> </header><!-- Page Header --> <div class = "page"> <div class = "hero"> <div class = "hero-center"> <h1>The #1 Cake Makers</h1> <p>Our company is composed of expert confectioners with 20+ years of experience. Enjoy 100s of different flavors, all at the best quality.</p> <button class = "special-btn" onClick = "javascript:switchPage(2);">Taste the Goodness</button> </div> </div><!-- Page Hero --> <div class = "container"> <div class = "card"> <h3>Know What It Is</h3> <p>Find out who are the mad (or sane) scientists behind these delicious bites.</p> <a href = "javascript:switchPage(1);">Take A Look →</a> </div> <div class = "card"> <h3>Try It</h3> <p>Pick one (or a few) of our irresistable options. Don't forget to share! We know it's hard.</p> <a href = "javascript:switchPage(2);">Start Eating →</a> </div> <div class = "card"> <h3>Love It</h3> <p>How was it? Enjoyed it or not we want to hear about your experience.</p> <a href = "javascript:switchPage(3);">Tell Us →</a> </div> </div><!-- Quick Access Tiles --> <!-- Fruther Info --> <div class = "info-section container"> <div> <h2>Any Occassion, We've Got You.</h2> <p>Be it for an extravagant birthday party or a last minute dessert for a thanksgiving get-together, you will find it here.</p> </div> <img src = "https://upload.wikimedia.org/wikipedia/commons/9/97/Birthday_Kid.jpg"> </div> <div class = "info-section container"> <img src = "https://upload.wikimedia.org/wikipedia/commons/8/8d/Food_on_Mallorca_03.jpg" style="filter:brightness(150%);"> <div> <h2>All Shapes, Sizes and Flavours</h2> <p>Strawberry, chocolate, cookie dough, and lemon-poppy seed? Some you may never have tasted, others not this good.</p> </div> </div> <div class = "info-section container"> <div> <h2>Wherever You Are, We Deliver.</h2> <p>From Antartica to the Sahara the cookies will be in time. The Moon? Well, that might take a bit longer...</p> </div> <img src = "https://upload.wikimedia.org/wikipedia/commons/1/1c/Delivery_Driver_Delivering_Takeout.jpg"> </div> </div><!-- Home Page(0) --> <div class = "page" style = "padding:20px;"> <h1>About Us</h1> <img src = "https://upload.wikimedia.org/wikipedia/commons/c/ce/Cake-decorator-displaying-deluxe-fruitcake-on-baking-line.jpg" width = "540px" style = "filter:brightness(130%); margin:20px 0"> <p>We are a crew of great bakers. We can make cakes of any shape, size or form. Big or small, chocolate or vanilla; we can bake anything! We will deliver your food faster than DoorDash ever has. Every cake, cookie, or any other dish we make is perfect. It will be scrumptious, delicious and better than you can ever imagine. What are you waiting for? Order a cake today!</p> <p>The website you are looking at was also created as an entry for Challenge #3 of <a href = "https://www.khanacademy.org/cs/i/5451301379817472">The Code Wars 2024</a>.</p> </div><!-- About Page(1) --> <div class = "page" style = "padding:20px;"> <h1>Browse</h1> <h3>Check out our options!</h3> <div class = "container" style = "flex-wrap:wrap;"> <div class = "option-card"> <h2>Cakes</h2> <img src = "https://upload.wikimedia.org/wikipedia/commons/4/4e/Quinoa_Chocolate_Cake_CCBYSA2_Karen_Neo.jpg"> <h4>From $20-$290 per cake</h4> <button class = "special-btn">Order</button> </div> <div class = "option-card"> <h2>Cupcakes</h2> <img src = "https://upload.wikimedia.org/wikipedia/commons/c/c6/Cupcakes%2C_chocolate_and_strawberry_flavour.jpg"> <h4>From $1-$5 per cupcake</h4> <button class = "special-btn">Order</button> </div> <div class = "option-card"> <h2>Cookies</h2> <img src = "https://upload.wikimedia.org/wikipedia/commons/8/80/Cookie_stack.jpg"> <h4>From $0.50-$2 per cookie</h4> <button class = "special-btn">Order</button> </div> </div><!-- Offer Tiles --> </div><!-- Browse Page(2) --> <div class = "page" style = "padding:20px;"> <h1>Feedback</h1> <p>We are happy to hear about your experience!</p> <div class = "feed-form"> <!-- Rating Stars --> <h3>How would you rate your experience?</h3> <p class = "material-symbols-outlined stars-container" > <span class = "review-star">kid_star</span> <span class = "review-star">kid_star</span> <span class = "review-star">kid_star</span> <span class = "review-star">kid_star</span> <span class = "review-star">kid_star</span> </p> <!-- Text Review --> <h3>Tell us why.</h3> <textarea></textarea> <!-- Submit Button --> <h3>Ready to submit?</h3> <button onClick = "javascript:clearForm();">Submit</button> </div> </div><!-- Feedback Page(3)--> <div class = "page" style = "padding:20px;"> <h1>Credits</h1> <p>The website you are viewing would not have been possible without the following people:</p> <p><a href = "https://www.khanacademy.org/profile/kaid_9392703437369427443929890/">RealCodingPro</a> A master Python coder, the leader of Team Coding Pros, and TCW Creations coder who has created more than 30 excellent programs.</p> <p><a href = "https://www.khanacademy.org/profile/kaid_701855056246665520276831/">Washington</a> A wannabe Software Engineer who is about 2% of the way there. When he is not coding he plays piano (easy songs only) or plays chess (at 100 elo).</p> </div><!-- Credits(4) --> <footer> <div class = "footer-links"> <a href = "javascript:switchPage(0);" class = "material-symbols-outlined">Home</a> <a href = "javascript:switchPage(1);" class = "material-symbols-outlined">question_mark</a> <a href = "javascript:switchPage(2);" class = "material-symbols-outlined">cake</a> <a href = "javascript:switchPage(3);" class = "material-symbols-outlined">phone</a> <a href = "#header" class = "material-symbols-outlined">arrow_upward</a> </div><!-- Link Icons --> <p>This website was created by <a href = "https://www.khanacademy.org/profile/kaid_701855056246665520276831/">Washington</a> and <a href = "https://www.khanacademy.org/profile/kaid_9392703437369427443929890/">RealCodingPro</a> for Challenge #3 of <a href = "https://www.khanacademy.org/cs/i/5451301379817472">TCW 2024</a>.</p> <p style = "color:var(--fushia);">©Sweetify 2024</p> <p>Please do not "borrow" code without permission.</p> </footer><!-- Page Footer --> <!-- The Thumbnail Script 2.0.0 10/24/2023 by @Bluebird --> <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, }).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> <!-- Importing Jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script> / Page Switching / //page switching var pages = $(".page"); pages.fadeOut("fast"); var currPage = 1; function switchPage (index) { window.scroll(0,0); if(currPage !== index){ $(pages[currPage]).fadeOut("slow",function(){ $(pages[index]).fadeIn("slow"); }); } currPage = index; } switchPage(0); / Feedback Form Handling / //get the index of the star hovered/clicked var stars = $(".review-star"); function getStarIndex(el) { for(var i = 0;i < 5;i++) { if(stars[i] === el) { return i+1; } } } //on hover a star var ratingGiven = false; $(".review-star").hover( function() { if(!ratingGiven){ var curStar = getStarIndex(this); console.log(curStar); for(var i = 0;i < curStar;i++) { var n = i+1; $(".review-star:nth-child("+n+")").css("color","yellow"); } } }, function() { if(!ratingGiven){ $(".review-star").css("color","lightgray"); } } ); //on click a star $(".review-star").click( function() { if(!ratingGiven){ var curStar = getStarIndex(this); console.log(curStar); for(var i = 0;i < curStar;i++) { var n = i+1; $(".review-star:nth-child("+n+")").css("color","yellow"); ratingGiven = true; } } } ); //on submit function clearForm() { $(".feed-form").html("<h3>Thank you for your feedback! We will get back to you as soon as possible.</h3>"); } </script> </body> </html>
Folds	27,93,94,140,141,162,163,256,262,271,273,329,330,339,340,364,365,391,392,397,399,411,415,437,442,518
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgLubndbbCQw
Votes	15
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Washington
Author Name	SnowFalcon
Author ID	kaid_701855056246665520276831
Author Profile Access	PUBLIC

Archive Data

Added	23 days ago, 1734463721922
Updated	23 days ago, 1734463721922
Source Deleted	unknown