Overview

An airy, botanical HTML template for growers’ collectives, veg box schemes, CSA farms, market gardens, beekeepers and small dairies. Fieldora ships three home pages, a light and a dark theme, right-to-left support, and box logic that is worked out rather than typed in: a weekly box built from this month’s harvest with swaps and extras, delivery days by ZIP code with a live weekly cut-off, skip and pause, a growing calendar for every crop, grower profiles on a county map, events with places left and a pantry shop with a bag, coupon and shipping.

What’s included

• 3 home pages, each with its own scroll moment: the greenhouse roof opens over the crop, the season wheel turns month by month, the growers’ pins drop region by region on a drawn county map
• 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 in every header: a right-to-left language turns any page around
• WebGL layers — Dappled Shade (vine-leaf shadows under a greenhouse roof) on the night bands and page titles, and a honeycomb frame whose cells fill with light in the footer — tinted by the theme colours
• Box builder in five steps: S / M / L, swaps from this week’s harvest, honey / eggs / cheese, delivery by ZIP code and your details, priced a box and a month
• Delivery days by ZIP code across 5 areas plus collection, each with its fee, its next four boxes and a live cut-off countdown
• Manage My Box: the next eight boxes, skip any week, pause two, four or six weeks, kept between visits
• Growing calendar of 38 crops, 32 of them in the box, by month, with kinds, search and the whole-year table
• Eight grower profiles with filters and a drawn county map; the grower of every crop slides in on its card
• Events dated from repeat rules with places left and booking; the packing shed’s live open status
• The pantry: categories, price, sort and search, product page, bag, coupon, free-shipping meter, checkout with an order number, wishlist
• Gallery with filters, our story, how it works, journal with search, FAQ with search, account pages, coming soon, 404
• Greenhouse Panes preloader, Planting Rows reveals with twine rules, Swiper sliders and Fancybox popups
• Fully responsive, W3C-valid, zero console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open fieldora/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the box builder, delivery check, skip and pause, calendar, events and pantry all work straight from the files.

2. Deploy to a server

Upload the contents of the fieldora/ 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, crops, growers, boxes, zones, products and events live in one place — see The Box 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 fieldora/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

fieldora/
├── *.html                              the 31 pages, all in the root (see File Structure)
├── sendmail.php                        the AJAX mail handler for the contact form
└── 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 (37 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
    ├── fonts/
    │   └── theme-icons/                the sun and moon of the theme switch
    ├── webfonts/                       Font Awesome Free font files
    └── img/                            images, one folder per section
        ├── banner/                      4 files
        ├── blog/                        12 files
        ├── cutouts/                     37 files
        ├── faces/                       4 files
        ├── flags/                       6 files
        ├── home/                        24 files
        ├── icons/                       48 files
        ├── logo/                        7 files
        ├── map/                         2 files
        ├── menu/                        3 files
        ├── products/                    7 files
        ├── team/                        8 files
        └── tiles/                       4 files

To publish the site, upload the contents of fieldora/ 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 --fo-olive-rgb) — change both together.

Ink fills the buttons and the headings; olive is the accent — the twine under every title, the box sizes on the harvest cards, the map and the night-band highlights — with a deeper olive for small text. White and linen alternate as grounds; Home 3 sits on cream. --fo-bg, --fo-surface, --fo-band, --fo-heading and --fo-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: Raleway (spaced capital headings, body, navigation, buttons and labels) and Cormorant (the italic lines above titles, prices and figures). Swap them by editing the Google Fonts link and the --fo-ff-head / --fo-ff-accent variables.

Logo

The logo is the FIELDORA wordmark in spaced Raleway capitals beside a small greenhouse gable with an olive seedling inside. It ships as ready-made PNG files in assets/img/logo/:

• logo.png / logo-light.png — for light grounds and for dark grounds (the Home 3 header over the photograph, dark mode)
• logo-footer.png / logo-footer-light.png — the footer lockup with the growers’ collective line
• mark.png / mark-light.png — the gable alone, used by the preloader in each theme
• favicon.png — the browser tab icon

The logo’s lettering appears only inside the images. To use your own logo, replace these files; the header sizes the logo by its height, so a wider or narrower file needs no CSS change.

Light & Dark Mode

Every header (and the mobile menu) has a theme switch. The choice is saved in the browser under the key fieldora-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 garden progress, the season wheel, the footer’s honeycomb band, the next-box card) are dark in both themes. A light card placed inside one takes fo-on-light to keep its own ink.
• Line-art icons — each icon ships in an ink and a linen version; the right one shows by theme and ground on its own. The footer map and the preloader’s mark have their own dark files too.
• 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.

The Box Logic

The figures on every page come from one data block, JS block 09 Collective Data near the top of main.js (var FIELD). Edit it once and the cards, prices, calendars, delivery days and totals follow. Prices are in US dollars; times are minutes after midnight (540 = 9:00 am); months are 1–12; weekdays 0–6 from Sunday.

This week’s box

The harvest of the current month, in packing order, fills the box: a small box takes the first 7 crops, a medium the first 10, a large the first 13; the rest of the month’s harvest are the swaps. Each box is the size’s price less the rhythm’s saving, plus the extras, plus the area’s fee; a month is that times the deliveries a month.

Delivery days

The first box is the area’s next delivery day whose cut-off is still ahead; the top bar and the footer count down to the next cut-off. Manage My Box keeps its skips in the browser (fieldora-skips-v1) — connect it to your own subscription system to take real orders.

How the pantry 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 so every pantry page has something to show; to start empty, set the two demo lists in doShop() (block 31 Pantry Shop) to [].

WebGL Layers

Two small WebGL shaders draw the moving layers: shade — warm light falling through a greenhouse roof onto the night bands and the page titles, vine leaves swaying in front of it and the glazing bars throwing slanted shadows — and honeycomb — the footer’s brand object, a hive frame of hexagonal cells that fill with light one by one, glow, and empty again. Each is one canvas:

<canvas class="fo-gl" data-gl="shade" aria-hidden="true"></canvas>

• Colours — each layer reads three colours and an opacity from CSS variables on its canvas or section: --gl-1, --gl-2, --gl-3 and --gl-alpha.
• 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)

Fieldora is RTL-ready: the layout with its paddings and margins, the sliders and the animations all mirror. Right to left comes from the stylesheets, not from separate pages: the language picker (a flag and a code) in the top bar lists the languages that read left to right and right to left. Choosing Arabic stores the language and the direction (keys fieldora-lang and fieldora-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

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

2. Swap Three Stylesheets

The scripts read the direction from the dir attribute. The growing calendar, the month picker and the season wheel still read January to December, left to right.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 37 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 Textures. The core every page shares: the Greenhouse Panes preloader, the header, the Planting Rows reveals with the twine rules, the theme and direction switch and the WebGL layers.
• 09–10 — Collective Data, Collective Clock. Collective Data holds every figure; Collective Clock works out the packing shed’s open status, the weekly cut-off, delivery days by ZIP code and the next date of each event.
• 11–19 — Custom Select, Counters & Rings, Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards. Shared components: selects, rings, sliders, accordions, filters, search, newsletter, choice cards.
• 20–24 — Floating Produce, Greenhouse Roof, County Map, Harvest Engine, Season Wheel. The floating produce, the three home pages’ scroll moments (the greenhouse roof, the county map, the season wheel) and the harvest engine they share.
• 25–37 — Box Builder, This Week, Delivery Check, Manage My Box, Box Plans, Contact Form, Pantry Shop, Account Forms, Season Calendar, Article Tools, Event Booking, Launch Countdown, FAQ Search. The feature pages: the box builder, this week, delivery days, manage my box, box plans, contact, the pantry, accounts, the season calendar, the article tools, event booking, the countdown and FAQ search.

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 line-art icons, the county map 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 posts to sendmail.php, a lightweight AJAX mail handler. The success or error message appears under the button without reloading the page. The newsletter, box builder, event booking, comment, checkout, 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: Raleway, Cormorant

All plugin files and icon fonts are loaded locally. The only external requests are the Google Fonts stylesheet, the Google Maps embed 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.