Jason Stedwell
44 lines
3.1 KiB
Markdown
44 lines
3.1 KiB
Markdown
# 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.
|
|
|
|
## 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).
|