Scan to open on your phone
Point a camera at the QR code - it opens this exact paste, no app needed.
https://codepastes.com/zzgt1y2ah25q1p3vuntitledPlain Text
<!doctype html>
<html lang="en-AU">
<head><script>window["__codeletBootstrap__"]=JSON.parse('{"A":"A","B":"20261007-04-b4189fb","C":{"Abril Fatface":"YACgEZbkUVE,0","Alfa Slab One":"YACgEYS9sJU,0","Anton":"YACgEcYqQ-A,0","Archivo Black":"YACgEZulLoA,0","Archivo":"YAHO2-t-jNE,0","Arial":"YAGyDvJ_4Ts,0","Baloo 2":"YAHO2IcQUcM,0","Barlow Condensed":"YAFdJljEuFc,0","Bebas Neue":"YACgESME5ew,0","Bricolage Grotesque":"YAFyMcdwzpc,0","Canva Sans":"YAFdJjTk5UU,1","Caveat":"YALBs2ploWQ,0","Cinzel":"YACgEeV8bIQ,0","Cormorant Garamond":"YAFdJhX-538,0","Courier New":"YAGzXiGs0_8,0","Courier Prime":"YAD1aFjegN8,0","DM Sans":"YAD1aU3sLnI,0","DM Serif Display":"YAD1aYG82rc,0","Figtree":"YAHO2b-mV7A,0","Forum":"YACgEcnnqB4,0","Fraunces":"YAFdJpU7Kkk,0","Fredoka":"YACgEZml080,0","Georgia":"YAGzXkO0pEM,0","Hanken Grotesk":"YAHO2VB9G0I,0","Helvetica":"YAFcf7zkXN0,0","IBM Plex Mono":"YAFdJkmvhGI,0","IBM Plex Sans":"YAFdJgT0SHI,0","Impact":"YAFcfnjI7Vk,0","Instrument Serif":"YAHFeOnZNEk,0","Inter":"YAFdJvSyp_k,3","Italiana":"YAHO2Toik_w,0","Jacques Francois":"YAHO2a5g66Q,0","JetBrains Mono":"YAFdJksXcAk,0","Josefin Sans":"YAFdJjvw9Ps,0","Karla":"YAHO2V2NSXM,0","Lato":"YAFdJuFCnaw,0","Libre Baskerville":"YACgEUFdPdA,0","Lobster":"YAD8SnSjSFI,0","Lora":"YACgEXvxf8Q,0","Manrope":"YAHO2b2feC4,0","Merriweather":"YACgEXvHxxs,0","Montserrat":"YAFdtQi73Xs,0","Noto Sans JP":"YAFdJiHXlcI,0","Noto Sans KR":"YAGsojZj-RQ,0","Nunito Sans":"YAFdtQJYB9w,1","Nunito":"YAFdJoNRMmU,1","Oleo Script":"YACgEQQ14jI,0","Oswald":"YACgEQY10lw,0","Outfit":"YAHO2nVlg14,0","Pacifico":"YADLjORQ1u4,0","Playfair Display":"YAFdJhem5V8,1","Plus Jakarta Sans":"YAHO2gdhi18,0","Poppins":"YAFdJjbTu24,1","Press Start 2P":"YAFyGr-8pmQ,0","Quicksand":"YAFdJpYtCxE,1","Raleway":"YAFdJhmxbVQ,1","Roboto Slab":"YAFdJswIKAg,0","Rockwell":"YAFcfyVZnN0,0","Rye":"YACgEdQP21k,0","Sarabun":"YAFdJssSnME,0","Segoe UI":"YAHNdRD1Klw,0","Source Sans 3":"YAG4lO1Mj10,0","Space Grotesk":"YAHO2sjPCSM,0","Space Mono":"YADW1-vpsoc,0","Spectral":"YAHO2rVUHIM,0","Times New Roman":"YAGzXW3gftg,0","Trebuchet MS":"YAFcfrglpVA,0","Ubuntu":"YACgERDU--Q,0","Verdana":"YAGzXTctYtQ,0","Work Sans":"YAGXhLOKv44,0","Yellowtail":"YACgEYG4kG4,0"}}');</script><script src="/_sdk/6542d56fbfe7a3eb.telemetry_sdk.js" integrity="sha512-ECdM0nK7EkwDuOqho2qxgyRQXyBHk9hZqRKMBr+Xsu6zjeHlt+qkO2N2YRiHN7Kg4e1fEHDhjIp4bGJYVypv1g=="></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CCC Canteen</title>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Fraunces:wght@600;700&display=swap" rel="stylesheet">
<style>
:root{--navy:#102842;--maroon:#842c39;--cream:#f7f4ec}
*{box-sizing:border-box}
html,body{margin:0;width:100%}
body{font-family:"DM Sans",sans-serif;color:var(--navy)}
.app-shell{width:100%;min-height:calc(100 * min(var(--vh,1vh),1vh));display:flex;align-items:center;justify-content:center;padding:20px;background-image:radial-gradient(#842c3910 1px,transparent 1px);background-size:22px 22px}
.phone-frame{position:relative;width:min(100%,390px);height:min(1200px,calc(100 * min(var(--vh,1vh),1vh) - 40px));min-height:360px;padding:31px 9px 22px;background:linear-gradient(115deg,#33363b,#07090c 18%,#171a20 78%,#44464a);border:2px solid #08090b;border-radius:46px;isolation:isolate}
.phone-frame:before{content:"";position:absolute;left:-5px;top:120px;width:3px;height:55px;border-radius:3px 0 0 3px;background:#24262b}
.phone-frame:after{content:"";position:absolute;right:-5px;top:155px;width:3px;height:78px;border-radius:0 3px 3px 0;background:#24262b}
.phone-camera{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:82px;height:9px;border-radius:20px;background:#050608}
.phone-camera:after{content:"";position:absolute;right:-19px;top:2px;width:5px;height:5px;border-radius:50%;background:#182333}
.phone-chin{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:90px;height:4px;border-radius:10px;background:#62666a}
.phone-screen{width:100%;height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;background:#faf9f5;border-radius:24px 24px 27px 27px;scrollbar-width:thin}
.display{font-family:Fraunces,serif;letter-spacing:-.035em}
.screen{display:none}.screen.active{display:block;animation:rise .35s ease both}
.pattern{background-color:var(--navy);background-image:radial-gradient(circle at 85% 15%,#34516a 0,transparent 34%),repeating-linear-gradient(135deg,transparent 0 26px,#ffffff0b 27px 28px),radial-gradient(circle at 10% 90%,#842c3944,transparent 45%)}
.field{width:100%;min-height:48px;padding:10px 13px;border:1px solid #c9d0d5;border-radius:12px;background:#fff;color:var(--navy)}
.filter.active{background:var(--navy)!important;color:#fff!important}
.food-photo{width:112px;height:132px;object-fit:cover;flex-shrink:0}
#welcome{min-height:100%}
#application{min-height:100%;display:flex;flex-direction:column}
#application[hidden]{display:none}
#application>main{flex:1;min-width:0}
.phone-nav{position:sticky;bottom:0;z-index:5}
button{transition:transform .18s,filter .18s,background-color .18s}
button:not(:disabled):hover{filter:brightness(1.07);transform:translateY(-2px)}
button:active{transform:translateY(0)}
:focus-visible{outline:3px solid var(--maroon);outline-offset:3px}
[hidden]{display:none!important}
.product-card,.category-card,.info-panel{border:1px solid #e8e3d9}
.confirmation-fade{animation:confirmationFade 2.8s ease both}
.product-card{transition:border-color .2s}
.product-card:hover{border-color:#842c3980}
.category-card img{transition:transform .35s ease}
.category-card:hover img{transform:scale(1.045)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes confirmationFade{0%,55%{opacity:1}100%{opacity:0}}
@media(max-width:480px){.app-shell{padding:8px}.phone-frame{height:calc(100 * min(var(--vh,1vh),1vh) - 16px);border-radius:38px;padding:29px 7px 18px}.phone-screen{border-radius:19px 19px 23px 23px}}
@media(max-width:370px){.food-photo{width:88px}.product-card>div{min-width:0}.product-card h3{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
</style>
<script src="https://cdn.tailwindcss.com/3.4.17" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.577.0/dist/umd/lucide.min.js" type="text/javascript"></script>
<script src="/_sdk/6c2ecc939521f244.data_sdk.js" type="text/javascript" integrity="sha512-gRx8s+XsZDN6mSIQu2sivLZysbV0WHhb5kXNUWlgVb5lCMU1foJYukyMEDPv8Tnoocb8iwqB4XdRrWc7oEGzIQ=="></script>
<script src="/_sdk/076b13200873adb1.editing_sdk.js" type="text/javascript" integrity="sha512-ZtNtm8+39bIBEM+BqVFLF2DGJcZDSJkgYAfQa13MND+siMeCmOpG2FoU1Iv6fGQyEH3Y1nIM5T9xiJG2Bq/ozw=="></script>
<script src="/_sdk/ab4336f91e694f96.resizing_sdk.js" type="text/javascript" integrity="sha512-cxmeUrBrNlwwLr+tEu/iwM5F3boeK4qDMoH3QjUPqJptkO5NkaDVhQvyIHIn+3EflI5/uubWzkSA78B1tCswgA=="></script>
</head>
<body data-template-id="__page-root" class="app-shell w-full">
<div class="phone-frame" aria-label="Phone-shaped canteen app">
<div class="phone-camera" aria-hidden="true"></div>
<div id="phone-screen" class="phone-screen">
<main id="welcome" class="pattern flex flex-col items-center justify-center px-8 py-12 text-center text-white">
<div class="mb-7 rounded-[24px] border-2 border-[#842c39] bg-white p-4"><img data-template-id="welcome-logo" loading="lazy" class="canva-image h-28 w-36 object-contain">
</div>
<p data-template-id="welcome-school" class="canva-text uppercase tracking-widest"></p>
<h1 data-template-id="welcome-title" class="canva-text display mt-3"></h1>
<p data-template-id="welcome-copy" class="canva-text mt-3"></p>
<div data-template-id="welcome-loading" class="canva-progress mt-8 w-full max-w-xs" role="status" aria-live="polite">
<div class="mb-2 text-center text-xs font-bold"><span data-template-id="loading-label" class="canva-text block">Preparing your canteen...</span><span id="loading-percent" class="mt-1 block text-[#842c39]">1%</span>
</div>
<div class="h-3 overflow-hidden rounded-full bg-white/25">
<div id="loading-bar" class="h-full w-[1%] rounded-full bg-[#842c39] transition-[width] duration-100" aria-hidden="true"></div>
</div>
</div><button id="enter-button" data-template-id="enter-button" type="button" class="canva-button mt-9 min-h-14 w-full max-w-xs rounded-2xl font-extrabold" hidden></button>
</main>
<div id="application" hidden>
<header data-template-id="app-header" class="canva-header flex items-center justify-between gap-3 px-5 py-4 text-white">
<button id="header-home" type="button" class="flex min-w-0 items-center text-left" aria-label="Go to home"><span data-template-id="header-name" class="canva-text leading-tight"></span></button> <button id="header-cart" type="button" class="shrink-0 rounded-xl border border-[#b65b69] px-3 py-2 font-bold" aria-label="Open cart">🛒 <span id="cart-count">0</span></button>
</header>
<main class="px-5 pb-8">
<section id="home" class="screen active py-6" aria-labelledby="home-title">
<div data-template-id="home-hero" class="canva-banner pattern overflow-hidden rounded-[26px] p-6 text-white">
<div class="mb-6 flex h-28 w-36 items-center justify-center rounded-2xl bg-white p-3"><img data-template-id="home-logo" loading="lazy" class="canva-image h-full w-full object-contain">
</div>
<p data-template-id="home-eyebrow" class="canva-text font-bold uppercase tracking-widest"></p>
<h2 id="home-title" data-template-id="home-title-text" class="canva-text display mt-2"></h2>
<p data-template-id="home-intro" class="canva-text mt-2"></p>
<p data-template-id="cutoff-notice" class="canva-banner mt-4 rounded-xl border border-[#842c39]/60 p-3"></p><button data-go="menu" data-template-id="home-explore" type="button" class="canva-button mt-5 rounded-xl px-5 py-3"></button>
</div>
<div data-template-id="specials-panel" class="canva-panel info-panel mt-6 overflow-hidden rounded-[24px] bg-white"><img data-template-id="specials-image" loading="lazy" class="canva-image h-40 w-full object-cover">
<div class="p-5">
<p data-template-id="specials-eyebrow" class="canva-text font-bold uppercase tracking-widest"></p>
<h3 data-template-id="specials-title" class="canva-text display mt-2"></h3>
<p data-template-id="specials-copy" class="canva-text mt-2"></p>
</div>
</div>
<h3 data-template-id="featured-title" class="canva-text mb-4 mt-8"></h3>
<div class="grid grid-cols-3 gap-2">
<button data-category="fresh" type="button" class="category-card overflow-hidden rounded-2xl bg-white text-left"><img data-template-id="home-wrap-image" loading="lazy" class="canva-image h-24 w-full object-cover"><span data-template-id="home-wrap-label" class="canva-text block p-2"></span></button> <button data-category="drinks" type="button" class="category-card overflow-hidden rounded-2xl bg-white text-left"><img data-template-id="home-smoothie-image" loading="lazy" class="canva-image h-24 w-full object-cover"><span data-template-id="home-smoothie-label" class="canva-text block p-2"></span></button> <button data-category="hot" type="button" class="category-card overflow-hidden rounded-2xl bg-white text-left"><img data-template-id="home-pie-image" loading="lazy" class="canva-image h-24 w-full object-cover"><span data-template-id="home-pie-label" class="canva-text block p-2"></span></button> <button data-category="bakery" type="button" class="category-card overflow-hidden rounded-2xl bg-white text-left"><img data-template-id="home-bakery-image" loading="lazy" class="canva-image h-24 w-full object-cover"><span data-template-id="home-bakery-label" class="canva-text block p-2"></span></button> <button data-category="snacks" type="button" class="category-card overflow-hidden rounded-2xl bg-white text-left"><img data-template-id="home-snacks-image" loading="lazy" class="canva-image h-24 w-full object-cover"><span data-template-id="home-snacks-label" class="canva-text block p-2"></span></button> <button data-category="all" type="button" class="category-card overflow-hidden rounded-2xl bg-white text-left"><img data-template-id="home-specials-image" loading="lazy" class="canva-image h-24 w-full object-cover"><span data-template-id="home-specials-label" class="canva-text block p-2"></span></button>
</div>
<h3 data-template-id="favourites-title" class="canva-text mb-3 mt-9"></h3>
<div data-template-id="favourites-panel" class="canva-panel info-panel rounded-2xl p-5">
<p data-template-id="favourites-copy" class="canva-text"></p>
<p id="favourites-status" class="mt-3 min-h-5 font-bold text-[#842c39]" role="status" aria-live="polite"></p>
<article data-template-id="favourite-burger-card" class="canva-card relative mt-4 overflow-hidden rounded-2xl bg-white">
<img data-template-id="favourite-burger-image" loading="lazy" class="canva-image h-40 w-full object-cover"> <button id="favourite-burger-add" data-template-id="favourite-burger-add" type="button" class="canva-button absolute right-3 top-3 flex h-11 w-11 items-center justify-center rounded-full text-2xl font-bold" aria-label="Add cheeseburger to cart">+</button>
<div class="p-3">
<h4 data-template-id="favourite-burger-name" class="canva-text font-bold"></h4>
<p data-template-id="favourite-burger-price" class="canva-text mt-1"></p>
</div>
</article>
</div>
<h3 data-template-id="about-title" class="canva-text mb-3 mt-9"></h3>
<div data-template-id="about-panel" class="canva-panel info-panel rounded-2xl p-5">
<p data-template-id="about-copy" class="canva-text"></p>
</div>
<h3 data-template-id="contact-title" class="canva-text mb-3 mt-7"></h3>
<div data-template-id="contact-panel" class="canva-panel info-panel rounded-2xl p-5">
<p data-template-id="contact-copy" class="canva-text whitespace-pre-line"></p>
<div class="mt-5 grid gap-3">
<div class="flex items-center gap-3"><img data-template-id="phone-icon" loading="lazy" class="canva-image h-8 w-8 object-contain"><span data-template-id="phone-number" class="canva-text font-bold"></span>
</div>
<div class="flex items-center gap-3"><img data-template-id="email-icon" loading="lazy" class="canva-image h-8 w-8 object-contain"><span data-template-id="email-address" class="canva-text min-w-0 break-all font-bold"></span>
</div>
</div>
</div>
</section>
<section id="menu" class="screen py-6" aria-labelledby="menu-title">
<p data-template-id="menu-eyebrow" class="canva-text font-bold uppercase tracking-widest"></p>
<h2 id="menu-title" data-template-id="menu-title-text" class="canva-text display mt-2"></h2>
<p data-template-id="menu-intro" class="canva-text mb-5 mt-2"></p>
<div class="mb-5 flex gap-2 overflow-x-auto pb-2" role="group" aria-label="Food categories">
<button data-filter="all" data-template-id="filter-all" type="button" class="canva-button filter active shrink-0 rounded-full px-4 py-2" aria-pressed="true"></button> <button data-filter="hot" data-template-id="filter-hot" type="button" class="canva-button filter shrink-0 rounded-full px-4 py-2" aria-pressed="false"></button> <button data-filter="fresh" data-template-id="filter-fresh" type="button" class="canva-button filter shrink-0 rounded-full px-4 py-2" aria-pressed="false"></button> <button data-filter="drinks" data-template-id="filter-drinks" type="button" class="canva-button filter shrink-0 rounded-full px-4 py-2" aria-pressed="false"></button> <button data-filter="bakery" data-template-id="filter-bakery" type="button" class="canva-button filter shrink-0 rounded-full px-4 py-2" aria-pressed="false"></button> <button data-filter="snacks" data-template-id="filter-snacks" type="button" class="canva-button filter shrink-0 rounded-full px-4 py-2" aria-pressed="false"></button>
</div>
<p id="menu-feedback" class="mb-3 min-h-5 font-bold text-[#842c39]" role="status" aria-live="polite"></p>
<div id="menu-list" class="space-y-3">
<article data-kind="hot" class="product-card flex overflow-hidden rounded-2xl bg-white"><img data-template-id="img-burger" loading="lazy" class="canva-image food-photo">
<div class="flex flex-1 flex-col justify-between p-3">
<div>
<h3 data-template-id="name-burger" class="canva-text"></h3>
<p data-template-id="price-burger" class="canva-text mt-1"></p>
</div><button data-add="burger" data-template-id="add-burger" type="button" class="canva-button self-start rounded-lg px-3 py-2"></button>
</div>
</article>
<article data-kind="hot" class="product-card flex overflow-hidden rounded-2xl bg-white"><img data-template-id="img-pizza" loading="lazy" class="canva-image food-photo">
<div class="flex flex-1 flex-col justify-between p-3">
<div>
<h3 data-template-id="name-pizza" class="canva-text"></h3>
<p data-template-id="price-pizza" class="canva-text mt-1"></p>
</div><button data-add="pizza" data-template-id="add-pizza" type="button" class="canva-button self-start rounded-lg px-3 py-2"></button>
</div>
</article>
<article data-kind="hot" class="product-card flex overflow-hidden rounded-2xl bg-white"><img data-template-id="img-fries" loading="lazy" class="canva-image food-photo">
<div class="flex flex-1 flex-col justify-between p-3">
<div>
<h3 data-template-id="name-fries" class="canva-text"></h3>
<p data-template-id="price-fries" class="canva-text mt-1"></p>
</div><button data-add="fries" data-template-id="add-fries" type="button" class="canva-button self-start rounded-lg px-3 py-2"></button>
</div>
</article>
<article data-kind="fresh" class="product-card flex overflow-hidden rounded-2xl bg-white"><img data-template-id="img-wrap" loading="lazy" class="canva-image food-photo">
<div class="flex flex-1 flex-col justify-between p-3">
<div>
<h3 data-template-id="name-wrap" class="canva-text"></h3>
<p data-template-id="price-wrap" class="canva-text mt-1"></p>
</div><button data-add="wrap" data-template-id="add-wrap" type="button" class="canva-button self-start rounded-lg px-3 py-2"></button>
</div>
</article>
<article data-kind="fresh" class="product-card flex overflow-hidden rounded-2xl bg-white"><img data-template-id="img-sandwich" loading="lazy" class="canva-image food-photo">
<div class="flex flex-1 flex-col justify-between p-3">
<div>
<h3 data-template-id="name-sandwich" class="canva-text"></h3>
<p data-template-id="price-sandwich" class="canva-text mt-1"></p>
</div><button data-add="sandwich" data-template-id="add-sandwich" type="button" class="canva-button self-start rounded-lg px-3 py-2"></button>
</div>
</article>
<article data-kind="drinks" class="product-card flex overflow-hidden rounded-2xl bg-white"><img data-template-id="img-smoothie" loading="lazy" class="canva-image food-photo">
<div class="flex flex-1 flex-col justify-between p-3">
<div>
<h3 data-template-id="name-smoothie" class="canva-text"></h3>
<p data-template-id="price-smoothie" class="canva-text mt-1"></p>
</div><button data-add="smoothie" data-template-id="add-smoothie" type="button" class="canva-button self-start rounded-lg px-3 py-2"></button>
</div>
</article>
<article data-kind="drinks" class="product-card flex overflow-hidden rounded-2xl bg-white"><img data-template-id="img-juice" loading="lazy" class="canva-image food-photo">
<div class="flex flex-1 flex-col justify-between p-3">
<div>
<h3 data-template-id="name-juice" class="canva-text"></h3>
<p data-template-id="price-juice" class="canva-text mt-1"></p>
</div><button data-add="juice" data-template-id="add-juice" type="button" class="canva-button self-start rounded-lg px-3 py-2"></button>
</div>
</article>
<article data-kind="drinks" class="product-card flex overflow-hidden rounded-2xl bg-white"><img data-template-id="img-coke" loading="lazy" class="canva-image food-photo">
<div class="flex flex-1 flex-col justify-between p-3">
<div>
<h3 data-template-id="name-coke" class="canva-text"></h3>
<p data-template-id="price-coke" class="canva-text mt-1"></p>
</div><button data-add="coke" data-template-id="add-coke" type="button" class="canva-button self-start rounded-lg px-3 py-2"></button>
</div>
</article>
<aside id="coke-sold-out" data-template-id="coke-sold-out" class="canva-banner mt-4 hidden rounded-2xl border-2 border-[#842c39]/60 bg-[#fff5f5] p-4 shadow-sm" role="status" aria-live="polite">
<p data-template-id="coke-sold-out-message" class="canva-text font-bold"></p>
<p data-template-id="coke-suggestion-label" class="canva-text mt-3"></p>
<div class="relative mt-3 overflow-hidden rounded-2xl border border-[#e8e3d9]">
<img data-template-id="coke-suggestion-image" loading="lazy" class="canva-image h-36 w-full object-cover"> <button id="add-pepsi-suggestion" data-template-id="add-pepsi-suggestion" type="button" class="canva-button absolute right-3 top-3 flex h-11 w-11 items-center justify-center rounded-full text-2xl font-bold" aria-label="Add Pepsi to cart">+</button>
<p data-template-id="coke-suggestion-name" class="canva-text bg-white p-3 font-bold"></p>
</div>
<p id="coke-suggestion-status" class="mt-3 min-h-5 font-bold text-[#842c39]" role="status" aria-live="polite"></p>
</aside>
<article data-kind="drinks" class="product-card flex overflow-hidden rounded-2xl bg-white"><img data-template-id="img-pepsi" loading="lazy" class="canva-image food-photo">
<div class="flex flex-1 flex-col justify-between p-3">
<div>
<h3 data-template-id="name-pepsi" class="canva-text"></h3>
<p data-template-id="price-pepsi" class="canva-text mt-1"></p>
</div><button data-add="pepsi" data-template-id="add-pepsi" type="button" class="canva-button self-start rounded-lg px-3 py-2"></button>
</div>
</article>
<article data-kind="drinks" class="product-card flex overflow-hidden rounded-2xl bg-white"><img data-template-id="img-sprite" loading="lazy" class="canva-image food-photo">
<div class="flex flex-1 flex-col justify-between p-3">
<div>
<h3 data-template-id="name-sprite" class="canva-text"></h3>
<p data-template-id="price-sprite" class="canva-text mt-1"></p>
</div><button data-add="sprite" data-template-id="add-sprite" type="button" class="canva-button self-start rounded-lg px-3 py-2"></button>
</div>
</article>
<article data-kind="bakery" class="product-card flex overflow-hidden rounded-2xl bg-white"><img data-template-id="img-muffin" loading="lazy" class="canva-image food-photo">
<div class="flex flex-1 flex-col justify-between p-3">
<div>
<h3 data-template-id="name-muffin" class="canva-text"></h3>
<p data-template-id="price-muffin" class="canva-text mt-1"></p>
</div><button data-add="muffin" data-template-id="add-muffin" type="button" class="canva-button self-start rounded-lg px-3 py-2"></button>
</div>
</article>
<article data-kind="snacks" class="product-card flex overflow-hidden rounded-2xl bg-white"><img data-template-id="img-cookie" loading="lazy" class="canva-image food-photo">
<div class="flex flex-1 flex-col justify-between p-3">
<div>
<h3 data-template-id="name-cookie" class="canva-text"></h3>
<p data-template-id="price-cookie" class="canva-text mt-1"></p>
</div><button data-add="cookie" data-template-id="add-cookie" type="button" class="canva-button self-start rounded-lg px-3 py-2"></button>
</div>
</article>
</div>
</section>
<section id="cart" class="screen py-6" aria-labelledby="cart-title">
<p data-template-id="cart-eyebrow" class="canva-text font-bold uppercase tracking-widest"></p>
<h2 id="cart-title" data-template-id="cart-title-text" class="canva-text display mt-2"></h2>
<p data-template-id="cart-intro" class="canva-text mb-5 mt-2"></p>
<p id="empty-cart" data-template-id="cart-empty" class="canva-text rounded-2xl bg-white p-6 text-center"></p>
<div id="cart-items" class="space-y-2" aria-live="polite"></div>
<div data-template-id="total-panel" class="canva-panel mt-5 flex justify-between rounded-2xl p-4 text-white"><span data-template-id="total-label" class="canva-text"></span><strong id="total-value">$0.00</strong>
</div>
<form id="order-form" class="mt-7 space-y-4">
<h3 data-template-id="form-title" class="canva-text"></h3>
<div><label data-template-id="first-label" for="first-name" class="canva-text mb-1 block"></label><input id="first-name" class="field" autocomplete="given-name" maxlength="80" required>
</div>
<div><label data-template-id="last-label" for="last-name" class="canva-text mb-1 block"></label><input id="last-name" class="field" autocomplete="family-name" maxlength="80" required>
</div>
<div><label data-template-id="role-label" for="role" class="canva-text mb-1 block"></label><select id="role" class="field" required><option value="">Choose a role</option><option value="Student">Student</option><option value="Parent">Parent</option><option value="Teacher">Teacher</option></select>
</div>
<div><label data-template-id="day-label" for="pickup-day" class="canva-text mb-1 block"></label><select id="pickup-day" class="field" required><option value="">Choose a day</option><option value="Monday">Monday</option><option value="Tuesday">Tuesday</option><option value="Wednesday">Wednesday</option><option value="Thursday">Thursday</option><option value="Friday">Friday</option></select>
</div>
<div><label data-template-id="time-label" for="pickup-time" class="canva-text mb-1 block"></label><select id="pickup-time" class="field" required><option value="">Choose an order time</option><option value="Recess">Recess</option><option value="Lunch">Lunch</option></select>
</div><button data-template-id="review-button" type="submit" class="canva-button min-h-14 w-full rounded-2xl"></button>
<p id="cart-status" class="min-h-6 font-bold text-[#842c39]" role="status" aria-live="polite"></p>
</form>
</section>
<section id="checkout" class="screen py-8" aria-labelledby="checkout-title">
<p data-template-id="checkout-eyebrow" class="canva-text font-bold uppercase tracking-widest"></p>
<h2 id="checkout-title" data-template-id="checkout-title-text" class="canva-text display mt-2"></h2>
<div data-template-id="checkout-panel" class="canva-panel info-panel mt-6 rounded-[24px] p-6">
<p data-template-id="checkout-description" class="canva-text"></p>
<p id="checkout-summary" class="mt-5 whitespace-pre-line font-medium"></p>
<div class="mt-6 flex items-center justify-between border-t border-[#d5dbe0] pt-5"><span data-template-id="checkout-total-label" class="canva-text"></span><strong id="checkout-total"></strong>
</div>
</div><button id="prepare-summary" data-template-id="prepare-summary" type="button" class="canva-button mt-6 min-h-14 w-full rounded-2xl"></button> <button data-go="cart" data-template-id="checkout-back" type="button" class="canva-button mt-3 w-full rounded-xl py-3"></button>
</section>
<section id="confirmation" class="screen py-8" aria-labelledby="confirmation-title">
<p data-template-id="confirmation-eyebrow" class="canva-text font-bold uppercase tracking-widest"></p>
<h2 id="confirmation-title" data-template-id="confirmation-title-text" class="canva-text display mt-2"></h2>
<div class="mt-6 space-y-4">
<p data-template-id="confirmation-intro" class="canva-text font-bold"></p>
<div>
<label data-template-id="confirmation-first-label" for="confirmation-first" class="canva-text mb-1 block"></label><input id="confirmation-first" class="field" autocomplete="given-name" maxlength="80" required>
</div>
<div>
<label data-template-id="confirmation-last-label" for="confirmation-last" class="canva-text mb-1 block"></label><input id="confirmation-last" class="field" autocomplete="family-name" maxlength="80" required>
</div>
<p id="confirmation-status" class="min-h-6 font-bold text-[#842c39]" role="status" aria-live="polite"></p>
</div><button id="confirm-checkout" data-template-id="confirm-checkout" type="button" class="canva-button mt-2 min-h-14 w-full rounded-2xl"></button> <button data-go="checkout" data-template-id="confirmation-back" type="button" class="canva-button mt-3 w-full rounded-xl py-3"></button>
</section>
<section id="success" class="screen py-12 text-center" aria-labelledby="success-title">
<div class="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-[#842c39] text-4xl text-white" aria-hidden="true">
✓
</div>
<h2 id="success-title" data-template-id="success-title-text" class="canva-text display mt-6"></h2>
<p data-template-id="success-copy" class="canva-text mt-4"></p>
<p data-template-id="success-order-code-label" class="canva-text mt-5 font-bold"></p>
<p id="order-code" data-template-id="success-order-code" class="canva-text mt-1 text-2xl font-extrabold tracking-widest"></p>
<p id="final-summary" class="mt-5 whitespace-pre-line rounded-2xl border border-[#e8e3d9] bg-white p-4 text-left"></p><button data-go="home" data-template-id="success-home" type="button" class="canva-button mt-6 min-h-12 w-full rounded-xl"></button>
</section>
</main>
<nav data-template-id="bottom-nav" class="canva-menu phone-nav flex justify-around gap-1 border-t border-[#842c39]/30 px-2 py-3" aria-label="Main navigation">
<button data-go="home" data-template-id="nav-home" type="button" class="canva-button rounded-lg px-2 py-2"></button> <button data-go="menu" data-template-id="nav-menu" type="button" class="canva-button rounded-lg px-2 py-2"></button> <button data-go="cart" data-template-id="nav-cart" type="button" class="canva-button rounded-lg px-2 py-2"></button>
</nav>
<footer class="px-5 py-4 text-center">
<p data-template-id="footer-name" class="canva-text"></p>
</footer>
</div>
</div>
<div class="phone-chin" aria-hidden="true"></div>
</div>
<template id="cart-row-template">
<article data-template-id="cart-row" class="canva-card flex items-center justify-between gap-2 rounded-xl border border-[#e8e3d9] p-3">
<div class="min-w-0">
<h3 data-template-id="cart-row-name" class="canva-text"></h3>
<p data-template-id="cart-row-price" class="canva-text"></p>
</div>
<div class="flex items-center gap-2"><button type="button" class="minus h-9 w-9 rounded-lg bg-[#e9edf0] font-bold" aria-label="Remove one">−</button><span data-template-id="cart-row-quantity" class="canva-text min-w-5 text-center"></span><button type="button" class="plus h-9 w-9 rounded-lg bg-[#e9edf0] font-bold" aria-label="Add one">+</button>
</div>
</article>
</template>
<script>
const products={
burger:["Cheeseburger",6.5],pizza:["Pizza Slice",4.5],fries:["Hot Chips",3.5],
wrap:["Chicken Wrap",7],sandwich:["Chicken Sandwich",6],
smoothie:["Berry Smoothie",5.5],juice:["Orange Juice",3],
coke:["Coca-Cola",3],pepsi:["Pepsi",3],sprite:["Sprite",3],
muffin:["Choc Chip Muffin",3.5],cookie:["Chocolate Chip Cookie",2.5]
};
const quantities={},rows=new Map();
const money=value=>new Intl.NumberFormat("en-AU",{style:"currency",currency:"AUD"}).format(value);
const screen=document.getElementById("phone-screen");
let pendingOrder=null;
function show(page){
document.querySelectorAll(".screen").forEach(section=>section.classList.toggle("active",section.id===page));
screen.scrollTop=0;
}
function filter(kind){
document.querySelectorAll("#menu-list [data-kind]").forEach(item=>item.hidden=kind!=="all"&&item.dataset.kind!==kind);
document.querySelectorAll("[data-filter]").forEach(button=>{
const active=button.dataset.filter===kind;
button.classList.toggle("active",active);
button.setAttribute("aria-pressed",String(active));
});
document.getElementById("menu-feedback").textContent="";
show("menu");
}
function renderCart(){
let count=0,total=0;
for(const [id,[name,price]] of Object.entries(products)){
const quantity=quantities[id]||0;
let row=rows.get(id);
if(!quantity){if(row){row.remove();rows.delete(id)}continue}
count+=quantity;total+=quantity*price;
if(!row){
row=document.getElementById("cart-row-template").content.firstElementChild.cloneNode(true);
row.dataset.id=id;
row.querySelector('[data-template-id="cart-row-name"]').textContent=name;
row.querySelector(".minus").setAttribute("aria-label","Remove one "+name);
row.querySelector(".plus").setAttribute("aria-label","Add one "+name);
document.getElementById("cart-items").appendChild(row);
rows.set(id,row);
}
row.querySelector('[data-template-id="cart-row-price"]').textContent=money(price*quantity);
row.querySelector('[data-template-id="cart-row-quantity"]').textContent=quantity;
}
document.getElementById("empty-cart").hidden=count>0;
document.getElementById("cart-count").textContent=count;
document.getElementById("total-value").textContent=money(total);
return total;
}
document.getElementById("enter-button").addEventListener("click",()=>{
document.getElementById("welcome").hidden=true;
document.getElementById("application").hidden=false;
show("home");
});
document.getElementById("header-home").addEventListener("click",()=>show("home"));
document.getElementById("header-cart").addEventListener("click",()=>show("cart"));
document.querySelectorAll("[data-go]").forEach(button=>button.addEventListener("click",()=>button.dataset.go==="menu"?filter("all"):show(button.dataset.go)));
document.querySelectorAll("[data-category]").forEach(button=>button.addEventListener("click",()=>filter(button.dataset.category)));
const bakeryCategory=document.querySelector('[data-category="bakery"]');
if(bakeryCategory) bakeryCategory.addEventListener("click",()=>restartWelcome());
document.querySelectorAll("[data-filter]").forEach(button=>button.addEventListener("click",()=>filter(button.dataset.filter)));
document.querySelectorAll("[data-add]").forEach(button=>button.addEventListener("click",()=>{
const id=button.dataset.add;
if(id==="coke"){
const soldOut=document.getElementById("coke-sold-out");
const feedback=document.getElementById("menu-feedback");
soldOut.hidden=false;
document.getElementById("coke-suggestion-status").textContent="";
feedback.textContent="Sorry, Coca-Cola is currently sold out.";
show("menu");
requestAnimationFrame(()=>soldOut.scrollIntoView({behavior:"smooth",block:"nearest"}));
return;
}
quantities[id]=(quantities[id]||0)+1;
renderCart();
document.getElementById("menu-feedback").textContent=products[id][0]+" added to your cart.";
}));
document.getElementById("add-pepsi-suggestion").addEventListener("click",()=>{
quantities.pepsi=(quantities.pepsi||0)+1;
renderCart();
const suggestion=document.getElementById("coke-sold-out");
const status=document.getElementById("coke-suggestion-status");
status.textContent="Pepsi was added to your cart.";
show("menu");
requestAnimationFrame(()=>suggestion.scrollIntoView({behavior:"smooth",block:"start"}));
});
let favouriteStatusTimer;
document.getElementById("favourite-burger-add").addEventListener("click",()=>{
quantities.burger=(quantities.burger||0)+1;
renderCart();
const status=document.getElementById("favourites-status");
clearTimeout(favouriteStatusTimer);
status.classList.remove("confirmation-fade");
void status.offsetWidth;
status.textContent="Cheeseburger was added to your cart.";
status.classList.add("confirmation-fade");
favouriteStatusTimer=setTimeout(()=>{
status.textContent="";
status.classList.remove("confirmation-fade");
},2800);
});
document.getElementById("cart-items").addEventListener("click",event=>{
const button=event.target.closest(".minus,.plus");
if(!button)return;
const id=button.closest("[data-id]").dataset.id;
quantities[id]=Math.max(0,(quantities[id]||0)+(button.classList.contains("plus")?1:-1));
renderCart();
});
document.getElementById("order-form").addEventListener("submit",event=>{
event.preventDefault();
const status=document.getElementById("cart-status");
const total=renderCart();
if(!total){status.textContent="Add something to your cart first.";return}
const first=document.getElementById("first-name").value.trim();
const last=document.getElementById("last-name").value.trim();
if(!first||!last){status.textContent="Please enter your first name and surname.";return}
status.textContent="";
pendingOrder={
first,last,
role:document.getElementById("role").value,
day:document.getElementById("pickup-day").value,
time:document.getElementById("pickup-time").value,
items:Object.entries(quantities).filter(([,quantity])=>quantity>0).map(([id,quantity])=>`${products[id][0]} × ${quantity}`).join("\n"),
total:money(total)
};
document.getElementById("checkout-summary").textContent=pendingOrder.items+"\n\n"+first+" "+last+" · "+pendingOrder.role+" · "+pendingOrder.day+" at "+pendingOrder.time;
document.getElementById("checkout-total").textContent=pendingOrder.total;
show("checkout");
});
document.getElementById("prepare-summary").addEventListener("click",()=>{
if(!pendingOrder){show("cart");return}
show("confirmation");
});
document.getElementById("confirm-checkout").addEventListener("click",()=>{
if(!pendingOrder){show("cart");return}
const confirmationStatus=document.getElementById("confirmation-status");
const confirmationFirst=document.getElementById("confirmation-first").value.trim();
const confirmationLast=document.getElementById("confirmation-last").value.trim();
if(!confirmationFirst||!confirmationLast){confirmationStatus.textContent="Please confirm your first name and surname.";return}
confirmationStatus.textContent="";
document.getElementById("final-summary").textContent=pendingOrder.items+"\n\n"+pendingOrder.first+" "+pendingOrder.last+" · "+pendingOrder.role+" · "+pendingOrder.day+" at "+pendingOrder.time+"\nTotal: "+pendingOrder.total;
document.getElementById("order-code").textContent=String(Math.floor(100+Math.random()*900));
show("success");
});
renderCart();
const loadingBar=document.getElementById("loading-bar");
const loadingPercent=document.getElementById("loading-percent");
const loadingPanel=document.querySelector('[data-template-id="welcome-loading"]');
let loadingValue=1;
let loadingTimer;
function startLoading(){
clearInterval(loadingTimer);
loadingValue=1;
loadingBar.style.width="1%";
loadingPercent.textContent="1%";
loadingPanel.hidden=false;
document.getElementById("enter-button").hidden=true;
loadingTimer=setInterval(()=>{
loadingValue=Math.min(100,loadingValue+1);
loadingBar.style.width=loadingValue+"%";
loadingPercent.textContent=loadingValue+"%";
if(loadingValue===100){
clearInterval(loadingTimer);
loadingPanel.hidden=true;
document.getElementById("enter-button").hidden=false;
}
},35);
}
function restartWelcome(){
document.getElementById("application").hidden=true;
document.getElementById("welcome").hidden=false;
startLoading();
screen.scrollTop=0;
}
startLoading();
</script>
</body>
</html>
41,436 chars · codepastes.com