Getting Started

To make changes to this website, you'll connect our GitHub repository to an AI assistant. Choose your preferred tool below and follow the step-by-step instructions.

Site Overview

Main Pages
index.htmlHome page with pool quiz
contact.htmlContact form
faq.htmlFAQ page
additional-info.htmlAdditional info form
Resurfacing Type Pages
pebblecrete.htmlPebblecrete resurfacing
fibreglass.htmlFibreglass resurfacing
pool-tiling.htmlPool tiling
quartz-aggregate.htmlQuartz aggregate
Thank You Pages
thanks.htmlMain form thank you
thanks-additional.htmlAdditional info thank you
Legal & Other
terms.htmlTerms & Conditions
privacy.htmlPrivacy Policy
404.htmlError page
how-to.htmlThis admin guide

Last updated: 28 Feb 2026

Choose Your Tool

G

ChatGPT Recommended

Easier setup, works in browser

C

Claude

More powerful, requires setup

Why ChatGPT? It's the easiest option — works directly in your browser with no software to install. Just connect your GitHub account and start making changes.
1

Go to ChatGPT

Open chat.openai.com in your browser. Sign in or create a free account if you don't have one.

2

Connect GitHub

Click the paperclip icon in the message box, then select "Connect to GitHub".

You'll be asked to authorise ChatGPT to access your GitHub account. Click "Authorise".

3

Select the Repository

After connecting, click the paperclip again and choose "GitHub". Find and select the "pool-resurfacing-website" repository.

entialdotcom/pool-resurfacing-website
4

Start Making Changes

You're ready! Type your request in plain English. For example:

"Change the hero headline to 'Australia's #1 Pool Resurfacing Service'"
5

Review and Commit

ChatGPT will show you the changes it wants to make. Review them, then say "commit these changes" to save them to the repository.

Changes will automatically deploy to the live site within a few minutes.

Brand Guidelines

Essential brand elements to maintain consistency across the site.

Colours

Click any swatch to copy the hex code.

Electric Yellow
#E7E515
Copied!
Deep Navy
#1A1348
Copied!
Pure White
#FFFFFF
Copied!
Warm Cream
#F3EBD9
Copied!

Fonts

DIN Condensed Bold — Headings
Used for: All headings (h1, h2, h3), buttons, navigation
File: /public/fonts/DIN Condensed Bold.ttf
Arial — Body Text. This is an example of body copy used throughout the site. It should be easy to read with good line height and spacing.
Used for: All body text, paragraphs, form inputs
File: /public/fonts/Arial.ttf

Buttons

Important: All buttons must use border-radius: 8px. Never use pill buttons (50px+).

Logo

The logo file is located at /public/PoolResurfacingLogo.svg. In the header, use height of 40px.

Home Page

The main landing page (index.html) contains the pool resurfacing quiz, hero section, and key messaging.

Update Hero Headline

Change the main headline on the home page
Change the hero headline on index.html to "[YOUR NEW HEADLINE]"

Update Hero Subheadline

Change the supporting text below the headline
Change the hero subheadline on index.html to "[YOUR NEW SUBHEADLINE]"

Update Stats/Trust Indicators

Update the statistics shown on the home page
Update the stats section on index.html. Change "[OLD STAT]" to "[NEW STAT]"

Add New Pool Type to Dropdown

Add a new pool type option to the quiz dropdown
Add [POOL TYPE] to the pool type dropdown on index.html. Current pool types are: Concrete, Fibreglass, Vinyl Liner, Not sure.

Resurfacing Type Pages

Each resurfacing type has its own dedicated landing page with pre-selected finish in the form.

Existing Resurfacing Type Pages

pebblecrete.html Pebblecrete resurfacing landing page
fibreglass.html Fibreglass resurfacing landing page
pool-tiling.html Pool tiling landing page
quartz-aggregate.html Quartz aggregate landing page

Create New Resurfacing Type Page

Create a dedicated landing page for a new resurfacing type
Create a new resurfacing-specific landing page for [RESURFACING TYPE] following the pattern of pebblecrete.html. Use the same structure, styling, and form as existing resurfacing pages.

Update Resurfacing Page Content

Change content on a specific resurfacing page
On the [RESURFACING TYPE] page ([filename].html), update the [SECTION] to "[NEW CONTENT]"

Add Resurfacing Type to All Dropdowns

Add a resurfacing option across all pages
Add [RESURFACING TYPE] to the preferred finish dropdown on ALL pages (index.html and all resurfacing-specific pages). Ensure both the native select and custom dropdown elements are updated.

Forms

The site has two main forms: the pool quiz on the home/resurfacing pages, and the additional info form.

Home Page Quiz (6 Steps)

Located in index.html and resurfacing type pages. Steps:

  1. Pool Type (Concrete/Fibreglass/Vinyl)
  2. Pool Size
  3. Current Condition
  4. Preferred Finish
  5. Location (Suburb/Postcode)
  6. Contact Details (Name, Email, Phone)

Additional Info Form (4 Steps)

Located in additional-info.html. Steps:

  1. Email Confirmation
  2. Budget Range
  3. Additional Services
  4. Notes & Consent

Update Budget Options

Modify the budget range selections
Modify the budget range options in additional-info.html. Current options are: $12,000+, $10,000-$12,000, $8,000-$10,000, $5,000-$8,000, $3,000-$5,000.

Update Form Questions

Add, remove, or modify form steps
Update the additional-info.html form to [ADD/REMOVE/MODIFY] the [QUESTION NAME] step. The form currently has 4 steps: Email, Budget, Additional Services, and Notes & Consent.
Important: All form inputs must have WHITE backgrounds (#FFFFFF). Never use cream for form elements.

Images & Media

How to update images and media files on the site.

Image Locations

/public/ Main images folder (logo, hero images)
/public/pools/ Pool resurfacing photos
/public/fonts/ Font files (DIN Condensed Bold, Arial)

Replace an Image

Swap an existing image for a new one
Replace the image at [/public/filename.jpg] with this new image: [PASTE IMAGE OR PROVIDE URL]

Update Hero Image

Change the main hero/header image
Update the hero image on index.html. The new image should be [DESCRIPTION OR URL]

Add Pool Resurfacing Photo

Add a new pool resurfacing photo
Add a photo for [RESURFACING TYPE] to the /public/pools/ folder and update the relevant pages to display it.

Quick Reference

File structure and CSS variables for quick lookup.

All Site Pages

index.html Main landing page with pool quiz
additional-info.html Additional info form (4 steps)
contact.html Contact Us form
faq.html FAQ page
thanks.html Thank you page (main form)
thanks-additional.html Thank you page (additional form)
terms.html Terms & Conditions
privacy.html Privacy Policy
404.html 404 error page

CSS Variables

:root { --yellow: #E7E515; --navy: #1A1348; --cream: #F3EBD9; --white: #FFFFFF; --navy-light: rgba(26, 19, 72, 0.1); }

Key Rules

  1. All buttons: border-radius: 8px
  2. Max content width: 800px
  3. Headings font: DIN Condensed Bold
  4. Body font: Arial
  5. Primary buttons: Yellow with navy text
  6. Form elements: White backgrounds only