Overview

A pastel, playful HTML template for donut shops, cupcake bakeries and dessert bars. Glazio ships three home pages, a light and a dark theme, right-to-left support, and dessert-bar logic that is worked out rather than typed in: a box of six or a dozen built donut by donut with the thirteenth free, today’s counter from the date and the clock (the specials, what is going fast, when things sell out), dessert tables priced from the guest count, fifteen-minute click & collect slots, a party request in four steps, and a shop with a bag, coupon, delivery or collection and tax.

What’s included

• 3 home pages, each with its own scroll moment: Box Of Twelve (the donut box’s lid folds shut over the dozen), Rolling Donuts (donuts roll along the counter to their names) and Piping Line (a piping bag pipes a wavy line across the party steps)
• Build A Box: six or a dozen, 12 donuts to pick from, the box’s saving, a free thirteenth on a full dozen; the box goes into the bag
• Today’s Counter: a donut and a cupcake of the day from the weekday, each treat’s live state and sell-out time per shop, the next glazing batch
• Dessert Tables: three tables, guests → donuts, cupcakes and minis to the box, setup and delivery; the four-step Plan Your Party request runs the same engine
• Click & Collect: shop, day and a fifteen-minute slot with the places left; checkout keeps the slot
• The counter menu with category tabs, vegan / gluten-free / nut-free switches and search; treat details with allergens and sell-out times
• The shop: filters, sort and search, product page, bag, coupon, free-delivery meter, tax, checkout with an order number, wishlist
• Light and dark mode on one switch in every header, remembered between visits and applied before the page paints
• Right-to-left stylesheets and a flag language picker: a right-to-left language turns any page around
• WebGL layers — pastel Icing Ribbons folding along the chocolate bands and page titles, and a glazed donut spinning in toon shading in the footer
• Donut Roll preloader, Bounce Drop reveals, piped-icing underlines, sprinkle-burst hover, Swiper sliders and Fancybox popups
• Our bakers, history, locations with live open status, gallery, blog with six post formats, FAQ with search, account pages, coming soon, 404
• Fully responsive

Getting Started

Thank you for choosing Glazio. Follow the steps below to get your site live.

1. Open locally

Unzip the downloaded package and open glazio/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the box builder, today’s counter, the table calculator, click & collect, the party request and the shop all work straight from the files.

2. Deploy to a server

Upload the contents of the glazio/ folder to your hosting provider using an FTP client (such as FileZilla) or your hosting control panel. Once uploaded, navigate to your domain and the template will load immediately.

3. Customise

All custom styling lives in assets/css/style.css (with a numbered Table of CSS at the top) and assets/css/responsive.css. Colours and fonts are controlled by CSS variables — see Colors & Fonts. Donuts, cupcakes, prices, box rules, shop hours, party ratios and products live in one place — see Dessert Bar Logic.

File Structure

Below is an overview of the key files and folders included in this template.

Folder Structure

The package unzips to two folders: Documentation/ (this guide) and glazio/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

glazio/
├── *.html                              the 30 pages, all in the root (see File Structure)
├── sendmail.php                        the AJAX mail handler for the forms
└── assets/
    ├── css/
    │   ├── style.css                   all custom styles, numbered Table of CSS
    │   ├── style.rtl.css               the right-to-left twin of style.css
    │   ├── responsive.css              breakpoints 1399 / 1199 / 991 / 767 / 575
    │   ├── responsive.rtl.css          the right-to-left twin of responsive.css
    │   ├── fontawesome-all.css         Font Awesome Free, loaded locally
    │   └── plugins/                    vendor stylesheets
    │       ├── bootstrap.min.css
    │       ├── bootstrap.rtl.min.css   Bootstrap for right-to-left pages
    │       ├── jquery.fancybox.min.css
    │       └── swiper-bundle.min.css
    ├── js/
    │   ├── main.js                     all custom scripts, numbered JS INDEX (36 blocks)
    │   └── plugins/                    vendor scripts
    │       ├── bootstrap.bundle.min.js
    │       ├── gsap.min.js
    │       ├── jquery-3.7.1.min.js
    │       ├── jquery.fancybox.min.js
    │       ├── ScrollTrigger.min.js
    │       └── swiper-bundle.min.js
    ├── audio/                          the audio post’s sample
    ├── fonts/
    │   └── theme-icons/                the sun and moon of the theme switch
    ├── webfonts/                       Font Awesome Free font files
    └── img/                            images, one folder per section
        ├── blog/                        5 files
        ├── box/                         3 files
        ├── cupcakes/                    8 files
        ├── decor/                       6 files
        ├── donuts/                      12 files
        ├── flags/                       6 files
        ├── gallery/                     8 files
        ├── home/                        17 files
        ├── logo/                        10 files
        ├── menu/                        3 files
        ├── people/                      4 files
        ├── products/                    14 files
        └── team/                        8 files

To publish the site, upload the contents of glazio/ to your web root. Photos keep their folder, file name and size when you replace them, so no page needs editing.

Colors & Fonts

The whole design is driven by CSS variables declared at the top of style.css. Change a token once and every section, button and card updates. Colours used with transparency have an -rgb twin (for example --gz-candy-rgb) — change both together.

Aqua and cream are the soft grounds, white the page. The pink face is every button, with chocolate ink; candy pink marks the logo, the sprinkles and the icons, and raspberry writes small pink text. Chocolate is the one dark band on a page and the footer. The icing pastels — strawberry, aqua, butter, lilac and sky — are the glazes, sprinkles, ribbons and dots, used as fills only. --gz-bg, --gz-surface, --gz-heading and --gz-text are the semantic names the components use — the dark theme swaps those (see Light & Dark Mode).

Fonts

Two Google Fonts are loaded in the head of each page: Poiret One (headings, treat names, prices and big numbers, in Title Case) and Open Sans (body, navigation, buttons and labels). Swap them by editing the Google Fonts link and the --gz-ff-head / --gz-ff-body variables.

Logo

The logo is the name glazio in a rounded script, candy pink, with the o drawn as a pink-glazed sprinkle donut. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — for light grounds: the headers
• logo-light.png — for dark grounds: the chocolate footer and dark mode
• pre-letter-1.png … pre-letter-6.png and pre-donut.png — the preloader’s six letters (each drawn in place) and the donut that rolls past them
• favicon.png — the browser tab icon

The logo’s lettering appears only inside the images — the pages do not load its font. To use your own logo, replace logo.png and logo-light.png; for the preloader, replace the six letter images with your own word cut into letters on one canvas size, or keep only the donut.

Light & Dark Mode

Every header (and the mobile menu) has a theme switch. The choice is saved in the browser under the key glazio-theme and applied by a one-line script in the <head> before the page paints, so a dark visitor never sees a light flash. The switch sets data-theme="dark" on the <html> tag.

• Tokens — the dark values sit in one block, [data-theme="dark"] { … }, right after :root in style.css. Change a dark colour there.
• Bands that stay dark — sections with the class is-night (the chocolate bands and the footer) are dark in both themes. A light card placed inside one takes gz-on-light to keep its own ink.
• Treats on discs — the drawn donuts and cupcakes keep their white discs in both themes.
• Start dark — to open the site dark for first-time visitors, add data-theme="dark" to the <html> tag of each page; the switch still works and is still remembered.

Dessert Bar Logic

The figures on every page come from one data block, JS block 09 Glazio Data near the top of main.js (var GLAZIO). Edit it once and the cards, menus, prices, hours and totals follow. Prices are in US dollars; times are minutes after midnight (420 = 7 am), weekday 0 = Sunday.

Build A Box

The builder lives in block 24 Build A Box. A pick drops into the next empty cell; a click on a filled cell takes it out; the saving applies only when the box is full. The box joins the shop’s bag as one line with its own name and price.

Today’s Counter

Block 25 Today’s Counter works out every treat’s state from the clock: an item sells out at its soldBy time (earlier at the weekend, never after the shop closes); within the going-fast window it shows “Going Fast”; when the shop is closed it says so. The weekday’s specials take their discount on every page (block 10). The board repaints every half minute.

Dessert Tables

The calculator and the Plan Your Party request share block 26. The request never blocks on Continue; Send Request checks the date, the guests and the details, and sends you to the step to fix.

Click & Collect

Block 27 lists the shop’s slots for the chosen day; the places already taken are seeded from the shop, the day and the time, so they stay the same on every visit (replace them with your booking system). The reserved slot is kept in the browser (glazio-collect-v1) and shown in the bag and at checkout.

How the shop totals

The bag, the wishlist, the applied coupon and the collection slot are kept in the browser (localStorage), so they follow the visitor from page to page. The first visit starts with a small demo bag and wishlist so every shop page has something to show; to start empty, set the two demo lists in doShop() (block 31 Shop & Bag) to []. Checkout and the party request confirm on screen with a reference — connect them to your own systems to take real orders.

WebGL Layers

Two small WebGL scenes draw the moving layers: the ribbons — four pastel icing ribbons folding along the top and bottom edges of the chocolate bands, the page titles, coming soon and 404 — and the toon donut in the footer, a glazed donut mesh spinning in flat cel shading with a chocolate outline. Each is one canvas:

<canvas class="gz-gl" data-gl="ribbons" aria-hidden="true"></canvas>
<canvas class="gz-gl" data-toon-donut aria-hidden="true"></canvas>

• Colours — the ribbons read four colours and an opacity from CSS variables on their canvas or section: --gl-1 … --gl-4 and --gl-alpha. The donut reads --donut-glaze, --donut-ink and two sprinkle colours. The theme switch repaints them.
• Performance — a layer only runs while its section is on screen and the tab is visible. Visitors who prefer reduced motion get one still frame. Without WebGL, the section’s own background shows.
• Remove one — delete the canvas; nothing else depends on it.

RTL (Right To Left)

Glazio is RTL-ready: the layout with its paddings and margins, the sliders, the rolling donuts and the piped line all mirror. Right to left comes from the stylesheets, not from separate pages: the language picker (a flag and a code) in the header and the mobile menu lists the languages that read left to right and right to left. Choosing Arabic stores the language and the direction (keys glazio-lang and glazio-dir) and reloads; the one-line script in <head> then sets dir="rtl" and swaps the three stylesheets for the files named in their data-rtl attribute before the page paints. Nothing is translated — you bring your own right-to-left copy. To make a page right to left for good:

1. Set The Direction

Add dir="rtl" to the page’s <html> tag (and set lang to your language):

<html lang="en" class="no-js" dir="rtl">

2. Swap Three Stylesheets

The scripts read the direction from the dir attribute: sliders, the rolling donuts and the piped line follow it on their own.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 36 numbered blocks (see the JS INDEX comment at the top of the file):

• 01–08 — Preloader, Sticky Header, Offcanvas Menu, Scroll Reveals, Back To Top, Anchor Scroll, Light & Dark Mode, Direction, WebGL Icing Ribbons. The core every page shares: the Donut Roll preloader, the header, the Bounce Drop reveals, the theme and direction switch and the Icing Ribbons.
• 09–10 — Glazio Data, Shop Clock & Specials Of The Day. Glazio Data holds every figure; the Shop Clock works out what is open now and the specials of the day.
• 11–19 — Custom Select, Counters & Rings, Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards. Shared components: selects, counters, sliders, accordions, filters, search, newsletter, choice cards.
• 20–23 — Box Of Twelve, Rolling Donuts, Piping Line, Sprinkle Burst. The three home pages’ scroll moments and the sprinkle-burst hover.
• 24–36 — Build A Box, Today's Counter, Dessert Tables & Party Wizard, Click & Collect, Toon Donut, Menu Filters, Contact Form, Shop & Bag, Account Forms, Article Tools, Demo Forms, Launch Countdown, FAQ Search. The feature pages: Build A Box, Today’s Counter, Dessert Tables and the party request, Click & Collect, the Toon Donut, the menu filters, contact, shop, accounts, blog tools, demo forms, countdown, FAQ.

Each block is a self-contained doSomething() function that safely skips pages where its section is not present — you can delete any block you do not need. Every animation respects prefers-reduced-motion automatically: content appears in its final state and the scrubbed scenes rest in place.

Images

The download package ships with neutral placeholder images so you can see every layout at the correct dimensions. Replace them with your own photos using the same file names, or update the src attributes. Images are grouped inside assets/img/:

The logo files, the drawn donuts, cupcakes, box, piping bag, wavy underlines and sprinkle tile, and the language flags are included and ready to use. All demo photography shown on the live preview is for preview purposes only and is not included in the download.

Contact Form

The contact form and the comment form post to sendmail.php, a lightweight AJAX mail handler. The success or error message appears under the button without reloading the page. The newsletter, party request, checkout, question, login, register and forgot-password forms are demo forms: they confirm on screen and are ready to connect to your own systems. To activate the mail handler on your server:

1. Set your email address

Open sendmail.php and replace the placeholder recipient at the top of the file with your own address:

$email = 'example@example.com';

2. Upload to a PHP host

The form needs a server with PHP mail() support (virtually every shared host). It will not send from your local computer or from a static-only host — there the form shows a friendly “upload to a PHP-enabled host” notice instead.

3. Optional: enable Google reCAPTCHA v3

Invisible reCAPTCHA v3 spam protection is already built into the handler. It stays dormant until the form submits a token — that is why no badge or checkbox appears out of the box. To switch it on:

• Create v3 keys (a site key and a secret key) for your domain in the Google reCAPTCHA admin console
• In sendmail.php, replace YOUR_RECAPTCHA_V3_SECRET_KEY with your secret key
• In contact.html, add a hidden token field inside the form and load the reCAPTCHA script with your site key just before </body>:

<!-- inside the form -->
<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">

<!-- before the closing </body> tag -->
<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>
<script>
  grecaptcha.ready(function () {
    grecaptcha.execute('YOUR_SITE_KEY', { action: 'contact' }).then(function (token) {
      document.getElementById('g-recaptcha-response').value = token;
    });
  });
</script>

Once the token field is present, sendmail.php verifies every submission with Google and rejects low-score (bot) requests.

Credits

This template is built using the following open-source libraries and resources.

• Bootstrap 5.3.3
• jQuery 3.7.1
• Swiper 11
• GSAP 3 + ScrollTrigger
• Fancybox 3.5
• Font Awesome Free
• RTLCSS
• Google Fonts: Poiret One, Open Sans
• Logo lettering: Leckerli One

All plugin files and icon fonts are loaded locally. The only external requests are the Google Fonts stylesheet, the Google Maps embeds and the video popups.

Support

If you have any questions or need help with the template, please reach out through the marketplace where you purchased the template: open the item there and send us your question from its support page. We aim to respond within 24–48 hours.