Overview

An elegant, animated HTML template for all-day restaurants, brasseries and bars that serve from breakfast to late, in black and cream with a peach sun. Daylia ships three home pages, a day (light) and a night (dark) theme, right-to-left support, and restaurant logic that is worked out rather than typed in: the menu follows the clock, a sharing-plates planner for groups, event nights with the seats left, table booking by service and time, group booking with a deposit, and a shop for collection or delivery.

What’s included

• 3 home pages, each with its own scroll moment: a clock whose hands sweep from 8 am to midnight while the menu under it changes service by service, sharing plates sliding to the middle of a table, and four glasses meeting in a toast
• The menu follows the clock: breakfast, weekend brunch, lunch, dinner and the late bar, the one being served now opening first, with diet filters and search
• Sharing plates: guests × appetite → the plates for the table, a spread drawn course by course, priced against the set Feast
• Table booking in five steps: guests and a date, the services open that day with their free times, seating, details, confirm
• Group booking with a deposit: the area (capacity and minimum spend), a menu per head, arrival, and the deposit and balance worked out
• Event nights from repeat rules (supper club, DJ nights, jazz brunch, live music, wine nights) with the seats left and tickets
• The doors, the service on now and the bar’s Golden Hour, live in every header
• Day and night 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 in every header
• WebGL Golden Hour light under the night bands and a disc turning from sun to moon in the footer
• Day Cycle preloader, Awning Roll reveals, the awning-stripe hover, Swiper sliders, Fancybox
• The shop: filters, sort and search, product, bag, coupon, free-delivery meter, tax, checkout with an order number, wishlist
• About, our day hour by hour, team and profile, gallery, journal with six post formats, FAQ with search, accounts, coming soon, 404
• Fully responsive, zero console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open daylia/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the menus, the planner, both bookings, the events and the shop all work straight from the files.

2. Deploy to a server

Upload the contents of the daylia/ 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. Hours, services, dishes, plates, events, groups and products live in one place — see Restaurant 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 daylia/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

daylia/
├── *.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 (18 sections)
    │   ├── 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 LTR + RTL, Swiper, Fancybox)
    ├── js/
    │   ├── main.js                     all custom scripts, numbered JS INDEX (36 blocks)
    │   └── plugins/                    jQuery, Bootstrap, GSAP, ScrollTrigger, Swiper, Fancybox
    ├── fonts/
    │   └── theme-icons/                the sun and moon of the theme switch
    ├── webfonts/                       Font Awesome Free font files
    └── img/                            images, one folder per section
        ├── banner/                      6 files
        ├── blog/                        7 files
        ├── decor/                       2 files
        ├── flags/                       6 files
        ├── gallery/                     30 files
        ├── glasses/                     4 files
        ├── hero/                        8 files
        ├── home/                        39 files
        ├── icons/                       22 files
        ├── logo/                        3 files
        ├── menu/                        3 files
        ├── shop/                        21 files
        └── team/                        10 files

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 --dy-peach-rgb) — change both together.

Peach is the sun: the night buttons, the awning stripes, the three stars under a title and the live dots. Apricot ink is its partner for small accent text on cream. Black and the night panel carry the night bands and the footer; cream and paper are the day grounds. --dy-bg, --dy-surface, --dy-heading, --dy-text and --dy-primary are the semantic names the components use — the night theme swaps those (see Light & Dark Mode).

Fonts

Two Google Fonts are loaded in the head of each page: Italiana (the thin display capitals of the titles, prices and figures) and Inter (navigation, buttons, labels and body). Swap them by editing the Google Fonts link and the --dy-ff-display / --dy-ff-body variables.

Logo

The logo is DAYLIA in thin capitals with a peach half-sun rising in the fork of the Y. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — for day grounds: the Home 2 header, the preloader by day, the 404 page
• logo-light.png — for night grounds: the headers, the footer, the offcanvas, night mode
• favicon.png — the browser tab icon

To use your own logo, replace these files; the header sizes the logo by its height.

Light & Dark Mode

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

• Tokens — the dark values sit in one block, [data-theme="dark"] { … }, right after :root.
• Bands that stay dark — sections with the class is-night (the heroes of Home 1 and 3, the services, the table, the toast, every page title, the footer) are night in both themes. A cream card inside one takes dy-on-day.
• Day and night — in the day theme the cream sections and the night bands alternate; in the night theme the whole site is black, as the bar is after dark.
• Start dark — add data-theme="dark" to the <html> tag of each page; the switch still works.

Restaurant Logic

The figures on every page come from one data block, JS block 09 Daylia Data near the top of main.js (var DAYLIA). Edit it once and the cards, hours, slots, seats, prices and totals follow. Prices are in US dollars; times are minutes after midnight (450 = 7:30 am; a closing time after midnight runs on, 1500 = 1:00 am); weekdays run 0 = Sunday to 6 = Saturday.

The doors

The menu follows the clock

The service on now is the one that started last among those open; between services the next to start is named. The menu page opens on it (block 26); the Home 1 clock (block 20) sweeps 8 am → midnight on its section’s own travel and shows each service from its at minute.

Sharing plates

Plates for the table = guests × the appetite’s plates per guest, rounded up. The spread follows the course cycle, each course taking its plates in turn; a diet filter narrows the pool (block 25).

Table and group booking

A service’s slots run every 15 minutes from its start to its last seating; a slot within half an hour of now is gone, and some are already full (a stand-in worked out from the date — replace slotFull() in block 24 with your own bookings). Both wizards (blocks 27 and 28) never block on Continue; Confirm checks the details and gives a reference.

Event nights

Each event’s next 6 nights come from its repeat rule; seats taken per night are a stand-in worked out from the date, about one night in eight sold out — replace seatsTaken() in block 10. The calendar lists the next ninety days (block 29).

How the shop totals

The bag, the wishlist and the applied coupon are kept in the browser (localStorage). The first visit starts with a small demo bag and wishlist; to start empty, set the two demo lists in doShop() (block 31 The Shop) to []. Checkout, both bookings and event tickets confirm on screen with a reference — connect them to your own systems to take real orders.

WebGL Layers

Block 08 draws two layers. Golden Hour — a low sun drifting along the horizon, long shafts of light through haze, the light turning slowly from a cool morning to a warm evening — sits under the night bands, every page title and the footer as one canvas:

<canvas class="dy-gl" data-gl="golden" aria-hidden="true"></canvas>

The disc in the footer is a 2D shader: the shadow line sweeps round a sphere’s face, turning it from a warm, granulated sun to a cratered moon and back: <canvas class="footer-disc" data-gl="disc">.

• Colours — both read --gl-1, --gl-2, --gl-3 and --gl-alpha from the canvas: the ground, the cool morning and the warm evening for the light; the sun, the sunset and the moon for the disc.
• Performance — a layer runs only while it is on screen and the tab is visible; reduced motion gets one still frame.
• Remove one — delete the canvas; nothing else depends on it.

RTL (Right To Left)

Right to left comes from the stylesheets, not from separate pages: the language picker beside the light / dark switch lists the languages that read left to right and right to left. Choosing Arabic or Hebrew stores the direction (key daylia-dir) and reloads; the script in <head> then sets dir="rtl" and swaps the three stylesheets for the files named in their data-rtl attribute. Nothing is translated — you bring your own copy. To make a page right to left for good:

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

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 36 numbered blocks. Each block is a self-contained doSomething() function that skips pages where its section is not present:

• 01 — Preloader
• 02 — Sticky Header
• 03 — Offcanvas Menu
• 04 — Scroll Reveals
• 05 — Back To Top
• 06 — Anchor Scroll
• 07 — Light & Dark Mode, Direction
• 08 — WebGL Golden Hour & Sun Disc
• 09 — Daylia Data
• 10 — Day Clock
• 11 — Custom Select
• 12 — Meters
• 13 — Hero Sliders
• 14 — Card Sliders
• 15 — Accordion
• 16 — Filter Tabs
• 17 — Grid Search
• 18 — Newsletter
• 19 — Choice Cards
• 20 — The Clock
• 21 — Dish Accordion & Dish List
• 22 — The Table
• 23 — The Toast
• 24 — Table Slots & Quick Booking
• 25 — Sharing Planner
• 26 — Menu Board
• 27 — Table Booking
• 28 — Group Booking
• 29 — Event Nights
• 30 — Contact Form
• 31 — The Shop
• 32 — Account Forms
• 33 — Article Tools
• 34 — Demo Forms
• 35 — Launch Countdown
• 36 — FAQ Search

Every animation respects prefers-reduced-motion: content appears in its final state.

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. Images are grouped inside assets/img/:

The logo files, the line icons, the drawn glasses, the signature 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 forms and the comment form post to sendmail.php, a lightweight AJAX mail handler. The newsletter, table and group booking, ticket, checkout and account forms are demo forms: they confirm on screen and are ready to connect to your own systems. To activate the mail handler:

1. Set your email address

$email = 'example@example.com';

2. Upload to a PHP host

The form needs a server with PHP mail() support. Opened from your computer, it shows an “upload to a PHP-enabled host” notice instead.

3. Optional: enable Google reCAPTCHA v3

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

<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">

<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>

Credits

• Bootstrap 5.3.3
• jQuery 3.7.1
• Swiper 11
• GSAP 3 + ScrollTrigger
• Fancybox 3.5
• Font Awesome Free
• RTLCSS
• Google Fonts: Italiana, Inter

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.