untitled

Pasted Oct 7, 2026, 9:43 AM1 file498 lines

Scan to open on your phone

Point a camera at the QR code - it opens this exact paste, no app needed.

https://codepastes.com/zzgt1y2ah25q1p3v
untitled
<!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&amp;family=Fraunces:wght@600;700&amp;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