Overview

A clean, engineered HTML template for a solar and wind installer: a savings calculator that sizes a system from the roof and the bill, a five-step site-survey booking with real time slots, projects for homes, solar farms and wind, and the ways to pay. Sunvera ships three home pages, a light and a dark theme, right-to-left support, and logic that is worked out rather than typed in: the system, the saving and the payback from one engine, loans amortised month by month, a turbine’s year through its power curve, and a Bristol roof’s live output from the sun’s real height.

What’s included

• 3 home pages, each with its own scroll moment: the energy flow (a house lights from its modules to its battery, its rooms and the grid), the bill bars (twelve monthly bills shrink from before solar to modules to a battery) and the turbines (the wind rises and the rotors speed up, the output following the power curve)
• The savings calculator: region, roof facing, roof area, the monthly bill and a battery; the modules, kWp, roof used, the year’s kWh, the share used at home, the bill after, the installed price, payback and 25 years, carbon, the month-by-month chart and the ways to pay
• The site survey: five steps, Continue never blocks, a month calendar with the survey days, four slots with the crews still free, the postcode checked against the areas covered, the calculator’s figures carried in
• Financing: pay outright, a green loan (APR, term, deposit, amortised), 0% over 12 months, or pay per kWh, each against the system’s saving
• Projects with type tabs, search and sort; packages priced by the engine; a wind yield estimator over a Rayleigh spread of wind speeds
• Phones open now (and when they open) in every header and the live output of a 4 kWp Bristol roof, repainted every minute
• The Energy Store: categories, price filter, sort and search, the product, bag, customer saving, a code, the free-delivery meter, VAT inside the price, the dispatch date, checkout with an order number, wishlist
• A white light theme by default and a dark theme 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 — Wind Field, soft streaks bending along the band edges, and the footer’s modules set out on a golden-angle spiral — tinted by the theme colours
• Panel Tilt preloader, Charge Up reveals (photos uncover bottom to top in five cells, like a battery charging), soft rises and a charge bar that fills on the cards on hover
• Team and profile, journal with post formats, FAQ with search, account pages, coming soon, 404
• Fully responsive, valid HTML5, no console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open sunvera/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the calculator, the survey, financing, the projects and the store all work straight from the files.

2. Deploy to a server

Upload the contents of the sunvera/ 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. The tariff, the module, prices, regions, packages, projects, turbines and store rules live in one place — see Energy 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 sunvera/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

sunvera/
├── *.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 (33 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/                      15 files
        ├── energy/                      21 files
        ├── faces/                       6 files
        ├── flags/                       6 files
        ├── icons/                       36 files
        ├── logo/                        3 files
        ├── menu/                        3 files
        ├── shop/                        8 files
        └── team/                        8 files

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

White is the ground and the pale band the quieter sections. Sunvera yellow is the button face (with ink text), the underline of every “find out more”, the tabs, the charts and the charge bar; amber ink is the yellow made dark enough for small text on white. Night sets the footer, the heroes’ washes and the dark bands; the two cell blues draw the modules in the preloader, the diagrams and the footer’s spiral. --su-bg, --su-surface, --su-cream, --su-heading and --su-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: Space Grotesk (headings and every figure: kWp, kWh, prices, years) and Roboto (body, navigation, buttons and the tracked caps). Swap them by editing the Google Fonts link and the --su-ff-display / --su-ff-body variables.

Logo

The logo is the word Sunvera in Space Grotesk ending in a small yellow solar module for its full stop. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — for light grounds: the white header and the light theme
• logo-light.png — for dark grounds: the header over the heroes, the footer, the preloader and the dark theme
• favicon.png — the browser tab icon

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

Sunvera opens light and needs no attribute for it. Every header (and the side panel) has a theme switch. The choice is saved in the browser under the key sunvera-theme and applied by a one-line script in the <head> before the page paints, so a dark visitor never sees a white 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 energy flow, the bill bars, the turbines, the footer) are night in both themes; is-yellow is the yellow call-to-action band with ink copy in both.
• Icons — each line icon ships in an ink and a light version, and the right one shows by theme and ground.
• 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.

Energy Logic

The figures on every page come from one data block and its engines, JS block 09 Sunvera Data & Engines near the top of main.js (var SUNVERA, then solarQuote(), monthlyBills(), financeOptions(), windPower(), windYear(), liveOutput() and surveyPlaces()). Edit the data once and the calculator, the packages, the project cards, the charts and the totals follow. Money is in pounds sterling, energy in kWh, times in minutes after midnight (1080 = 6:00 pm), weekdays 0 = Sunday to 6 = Saturday.

How a quote is worked out

Wind

A turbine’s output at a wind speed is ½ρAv³C_p, capped at its rated power, nothing below the cut-in speed; the rotor turns at the speed its tip-speed ratio gives. A year’s energy adds the output over a Rayleigh spread of wind speeds around the site’s mean: the 50 kW turbine makes 26.7 kW at 8 m/s and about 170 MWh a year at a 6.6 m/s site.

Phones open now and the live output

Every element with data-open-status shows Phones open now, until 6 pm or Closed now, phones open tomorrow at 8 am from the visitor’s own clock. Every element with data-live-output="4" shows what a 4 kWp roof in Bristol is making now: the sun’s height from the solar position equations, the light through the air mass, the month’s share of clear sky, less the system’s losses.

The site survey

The calendar offers the survey days from 2 to 28 days ahead; each slot shows the crews still free (worked out from the date, so the same day always shows the same places). A quote saved from the calculator fills the roof, the bill and the facing. The booking confirms on screen with a reference — connect it to your own diary to take real bookings.

How the store totals

The bag, the wishlist, the code, the customer tick and a saved quote 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 store page has something to show; to start empty, set the two demo lists in doShop() (block 28 Energy Store) to []. The survey and checkout confirm on screen with a reference — connect them to your own systems to take real bookings and payments.

WebGL Layers

Two small WebGL scenes draw the moving layers: Wind Field — soft streaks of wind running along a band’s top and bottom edges, each lane at its own speed, bending over a slow swell, the copy in the middle left clear — and the Phyllotaxis Panels — modules set out on a golden-angle spiral in the footer, growing out from the centre, then turning while the light glints across their cells. Each is one canvas:

<canvas class="su-gl" data-gl="wind" 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. 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)

Sunvera 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 and the side panel lists the languages that read left to right and right to left. Choosing Arabic or Hebrew stores the language and the direction (keys sunvera-lang and sunvera-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 and every move that must mirror follow it on their own. Prices, figures and the drawings of the scroll moments keep reading left to right.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 33 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 Layers. The core every page shares: the Panel Tilt preloader, the header, the Charge Up reveals, the theme and direction switch and the WebGL layers.
• 09–10 — Sunvera Data & Engines, Energy Clock. The data block and its engines hold every figure; the energy clock works out phones open now and the live output of a Bristol roof from the visitor’s clock.
• 11–18 — Custom Select, Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards. Shared components: selects, sliders, accordions, filters, search, forms and choice cards.
• 19–22 — Energy Flow, Quick Estimate, Bill Bars, Turbines. The three home pages’ scroll moments and the quick estimates.
• 23–33 — Savings Calculator, Site Survey, Financing, Project Sort, Contact Form, Energy Store, Account Forms, Article Tools, Demo Forms, Launch Countdown, FAQ Search. The feature pages: the savings calculator, the site survey, financing, the projects sort, the contact form, the Energy Store, accounts, the journal, demo forms, the coming-soon countdown and the 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 at their end.

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 icons, the language flags and the drawn store products 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, the site survey, checkout, the account, 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: Space Grotesk, Roboto

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.