scj-impec/scj

Storm Cloud Jumpers — website

Static website for jumpers.stormcloudhills.com. Plain HTML/CSS/JS — no build step, no framework. Just upload the contents of this scj/ folder to the web host.

Files

File	What it is
index.html	The main one-page site (hero, available, mamas, care, shipping, about, contact).
care-sheet.html	Print-friendly care sheet. This is what the QR code points to.
styles.css	All styling (dark storm palette, red accent).
script.js	Nav, scroll animations, and the inquiry form. Edit FORM_ENDPOINT here to enable Gmail delivery — see below.
form-handler.gs	Google Apps Script that emails form submissions from the shop's own Gmail. Setup steps are inside the file.
assets/brand/	Logo, mascot (Nimbus) and hero graphics.
assets/spiders/	Photos: available/, males/, females/, mamas/.
assets/care/	Care-sheet QR code (care-qr.png / .svg).

Deploying

It's a static site — upload everything in scj/ to the document root for the jumpers.stormcloudhills.com subdomain (via the host's file manager, FTP, Netlify, Cloudflare Pages, GitHub Pages, etc.). No server or database needed. Keep the assets/ folder alongside the HTML files.

The inquiry form (two modes)

1. Now — mailto: (zero setup). Submitting the form opens the visitor's email app with a pre-filled message to stormcloudjumpers@gmail.com. Works out of the box.
2. Upgrade — send via Gmail, no email app needed. Deploy form-handler.gs as a Google Apps Script web app (5-minute steps are in that file), copy the resulting /exec URL, and paste it into FORM_ENDPOINT near the top of script.js. The form will then email submissions straight to the inbox and fall back to mailto: only if the request fails. This is the current plan (routes through her own Gmail — no third-party vendor, no cost).
3. Future — fully self-hosted (once the web host is chosen). If the host runs PHP (most shared hosts do), a small contact.php can send the mail from our own server — no Google involved. If the site lands on Netlify/Cloudflare/Vercel, use that platform's built-in form/function handler. Either is a small swap on the same form; the front-end doesn't change. Deferred until hosting is decided.

Updating content (common edits)

All in index.html:

• Prices / availability: find the spider's <article class="card"> block. Change the <span class="price"> amount, or the <span class="badge">Available</span> text (e.g. to Reserved / Sold). Add badge--soft to the class for a muted badge.
• Add / swap a photo: drop the new image in the right assets/spiders/... folder and update the <img src="...">. Keep images web-sized (~1000px wide, JPEG) so pages stay fast.
• Add a spider: copy an existing <article class="card">…</article> block and edit the text, image, price, and the data-inquire="..." label (that label pre-fills the "Which spider?" field when someone clicks Reserve).
• Care sheet text: edit care-sheet.html (and the matching cards in the Care section of index.html).

To do (waiting on Mom)

• Photos of the new boys: Gully, Noble, Hexx & Magick. Right now the "Regal Jumper Males" card shows Ivan and names all five. Add their photos when available. (Nashville has passed away and is not listed.)
• Optional: confirm the Paraphidippus fartilis waitlist note and update when they're available.

Credits

Brand mascot: Nimbus. Palette: storm-black + red. Fonts: Oswald + Inter (loaded from Google Fonts).