gitadmin/sunscope
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update About Page

Browse Source
This commit is contained in:
fraxle
2026-05-16 10:28:54 +01:00
parent e730e3f008
commit 4f16a5c784
2 changed files with 121 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files
STRIPE_SETUP.md
-179
View File
@@ -1,179 +0,0 @@
# SunScope Extra — Stripe Subscription Setup
## Step-by-step guide to wiring up the £2/month paywall
SunScope is a static site with no backend server, so this guide uses
**Stripe Payment Links** — a no-code/no-server approach where Stripe
hosts the checkout page for you. You get a URL, you paste it into the
app. Done.
---
## STEP 1 — Create a Stripe account
1. Go to **https://stripe.com** and sign up (free).
2. Complete the identity verification (required before going live).
3. You'll land in the Stripe Dashboard. Make sure you're in **Test mode**
first (toggle in the top-left) — you can do the whole setup in test
mode and flip to live when ready.
---
## STEP 2 — Create the £2/month product
1. In the Stripe Dashboard sidebar, go to **Product catalogue → + Add product**.
2. Fill in:
- **Name:** `SunScope Extra`
- **Description:** `Full 14-day forecast, specialist profiles, custom columns`
- **Pricing model:** `Recurring`
- **Price:** `£2.00`
- **Billing period:** `Monthly`
3. Click **Save product**.
---
## STEP 3 — Create a Payment Link
This is the URL you'll drop into the app — Stripe hosts the whole
checkout, card capture, and subscription management for you.
1. In the product you just created, click **Create payment link**.
2. Settings to check:
- **Quantity:** 1 (fixed)
- **Collect customer email:** Yes (you'll need this to verify subscribers)
- **Allow promotion codes:** Up to you (handy for early adopters)
- **After payment:** set the redirect URL to `https://sunscope.net/?pro=1`
(we'll use this query param to activate Pro — see Step 5)
3. Click **Create link**.
4. Copy the URL — it looks like: `https://buy.stripe.com/test_xxxxxxxxxxxxxxxx`
---
## STEP 4 — Update the upsell card in app.js
Open `assets/js/app.js`. Find **line ~913** and **line ~923**. You need
to change two things:
### 4a — Update the pricing line (line ~913)
Find this:
```
£2 / month · launching soon
```
Change it to:
```
£2 / month · cancel any time
```
### 4b — Replace the mailto: button with the Stripe link (line ~923)
Find this block (starts around line 923):
```javascript
href=${`mailto:fraxle@yahoo.co.uk?subject=${encodeURIComponent('SunScope Extra — notify me at launch')}&body=${encodeURIComponent('Hi — please let me know when SunScope Extra launches. (Triggered by ' + dayLong + ')')}`}
```
Replace the entire `href=` value with your Stripe Payment Link:
```javascript
href="https://buy.stripe.com/YOUR_ACTUAL_LINK_HERE"
```
Also change the button label on line ~938 from:
```
Notify me at launch
```
To:
```
Subscribe — £2/month
```
And add `target="_blank" rel="noopener noreferrer"` so it opens in a
new tab (the user stays on the forecast page):
```javascript
<a
href="https://buy.stripe.com/YOUR_ACTUAL_LINK_HERE"
target="_blank"
rel="noopener noreferrer"
style=${{ ...existing styles... }}
>
Subscribe — £2/month
</a>
```
---
## STEP 5 — Activate Pro after payment (simple URL param method)
When Stripe redirects back to `https://sunscope.net/?pro=1` after a
successful payment, the app needs to detect that and set `isPro = true`.
Open `assets/js/app.js` and find the `isPro` state (line ~116):
```javascript
const [isPro, setIsPro] = useState(false);
```
Replace that single line with:
```javascript
const [isPro, setIsPro] = useState(() => {
// Check URL param first (just returned from Stripe checkout)
const params = new URLSearchParams(window.location.search);
if (params.get('pro') === '1') {
localStorage.setItem('sunscope_pro', '1');
// Clean the URL so the param doesn't stay visible
window.history.replaceState({}, '', window.location.pathname);
return true;
}
// Check localStorage (returning Pro subscriber)
return localStorage.getItem('sunscope_pro') === '1';
});
```
That's it. After subscribing, the user lands back on the site as Pro,
and localStorage remembers them on future visits.
> **Important caveat:** This is a trust-based system — it stores Pro
> status in the user's browser. Anyone who knows the trick can set
> `localStorage.setItem('sunscope_pro','1')` in their console. For a
> £2/month product with a small audience this is probably fine. When
> you want proper enforcement, see Step 6.
---
## STEP 6 — (Optional) Proper server-side verification
When you're ready to properly enforce subscriptions (no console tricks):
1. **Stripe Customer Portal** — enable it in the Stripe Dashboard so
subscribers can manage/cancel their own subscriptions.
2. **Webhook → backend** — Stripe fires a `checkout.session.completed`
event when someone subscribes. You'd need a tiny serverless function
(Cloudflare Worker, Vercel Edge Function, or Netlify Function) to:
- Receive the webhook
- Store the subscriber's email + Stripe customer ID in a small DB
(or even Airtable/Supabase free tier)
- Issue a signed token (JWT) back to the browser
3. **Replace localStorage** with checking that JWT against your backend
on page load.
This is a future step — the localStorage approach is perfectly fine for
launch.
---
## STEP 7 — Go live
When you're happy with testing:
1. In Stripe Dashboard, flip the **Test mode** toggle to **Live mode**.
2. Repeat Steps 2–3 in live mode to get a live Payment Link URL.
3. Replace the test URL in `app.js` with the live URL.
4. Deploy.
---
## Quick reference — files changed
| File | What changed |
|------|-------------|
| `assets/js/app.js` line ~116 | `isPro` state reads from localStorage + URL param |
| `assets/js/app.js` line ~913 | Pricing copy: "cancel any time" |
| `assets/js/app.js` line ~923 | `href` → Stripe Payment Link URL |
| `assets/js/app.js` line ~938 | Button label → "Subscribe — £2/month" |
about.html
+121 -94
View File
@@ -196,8 +196,9 @@
<header>
<a href="./index.html" class="logo"><span class="logo-sun">SUN</span><span class="logo-scope">Scope</span></a>
<a href="./index.html">Home</a>
<a href="./index.html">Forecast</a>
<a href="./about.html" class="active">About</a>
<a href="https://billing.stripe.com/p/login/9B63cw7vl8k15Ei9DQd7q00" target="_blank" rel="noopener noreferrer">Account</a>
</header>
<main>
@@ -301,11 +302,60 @@
to different activities and use cases. Rather than showing every column at once, each profile
surfaces the information that actually matters for that situation. You can switch profiles
using the row of buttons above the forecast table. The <strong>Places</strong> profile
includes a sub-dropdown in the Columns bar to choose between Urban, Beach, Events,
Festival, Winter Sports, and Naturist. Everyday and public-good profiles are free;
specialist planning views and Custom columns are part of SunScope Extra.
includes a sub-dropdown to choose between seven activity variants. Everyday profiles are free;
specialist planning views, the Temps comparison, and Custom columns are part of SunScope Extra.
</p>
<div class="profile-block">
<p class="profile-name">🌡️ Basic</p>
<p>
The default view — clean and uncluttered, showing the essentials for any outdoor situation.
<strong>Air temperature</strong>, <strong>wind speed</strong>, <strong>cloud cover</strong>,
<strong>precipitation</strong>, and <strong>UTCI+P</strong> — the adjusted felt temperature
that combines sun, wind, humidity, and rain into a single honest number. The right starting
point for most people most of the time.
</p>
</div>
<div class="profile-block">
<p class="profile-name">🏠 Home</p>
<p>
For managing indoor comfort without air conditioning. The indoor temperature column is
central: select your building type from the dropdown (UK brick, modern insulated, Victorian
terrace, stone cottage, timber frame, top-floor flat, or conservatory) and the physics model
adjusts for that building's insulation, retained warmth, thermal mass, and glazing
characteristics. Tick <strong>Managed</strong> to switch to the heatwave-advice model —
curtains closed by day to block solar gain, windows opened whenever outdoor air is cooler
than inside. Indoor temperatures typically peak 2–4 hours after the outdoor peak due to
thermal mass, and the model reflects this lag for each building type. Supporting columns
include <strong>air temperature</strong>, <strong>relative humidity</strong> and
<strong>dew point</strong> (important for condensation and mould risk in cooler months),
<strong>wind speed</strong> for ventilation decisions, <strong>cloud cover</strong>,
and <strong>precipitation</strong> — so you know whether to open the windows or bring
the washing in.
</p>
</div>
<div class="profile-block">
<p class="profile-name">🚗 Vehicle</p>
<p>
Covers the parked and travelling vehicle experience — especially useful for anyone with
children or pets, motorhome travellers, and caravan owners. The headline column is
<strong>vehicle interior temperature</strong>: a physics-based estimate of how hot the
cabin gets when parked and sealed, adjusted for your chosen vehicle type (car, MPV, SUV,
motorhome, or caravan). Motorhomes and caravans are treated as insulated occupied living
spaces, with reflective sandwich panels roughly 25–35 mm thick, less sun-exposed glass
than a car, and retained warmth from previous hours, occupants, appliances, and background
heating. <strong>Wind speed</strong> is included because it matters significantly for
high-sided vehicles and caravans. <strong>Cloud cover</strong> and <strong>air
temperature</strong> give context, <strong>precipitation</strong> covers driving
conditions, and <strong>UTCI+P</strong> tells you what it will feel like when you step
outside. <strong>Soil moisture</strong> is included specifically for motorhome and caravan
users — values above 0.4 m³/m³ indicate saturated ground where pitching or manoeuvring
is likely to cause problems.
</p>
</div>
<div class="profile-block">
<p class="profile-name">🌾 Farming</p>
<p>
@@ -323,79 +373,23 @@
</p>
</div>
<div class="profile-block">
<p class="profile-name">⛵ Sailing · Extra</p>
<p>
Wind is everything on the water, and the conditions out at sea can be dramatically different
from what the shore feels like. The Sailing profile leads with what matters most:
<strong>air temperature</strong> (hypothermia is a real risk — water conducts heat away from
the body twenty-five times faster than air), <strong>dew point</strong> (condensation on
sails and equipment is a practical concern at dawn and dusk), <strong>wind speed</strong>
with gusts, <strong>wind direction</strong>, <strong>cloud cover</strong>, and
<strong>sun elevation</strong> for visibility and glare. UV exposure is significantly higher
on open water due to reflection off the surface, so <strong>UV-A index</strong> and
<strong>burn time</strong> are included. <strong>UTCI+P</strong> captures the combined
misery of wet, windy conditions, and <strong>precipitation</strong> rounds out the picture
for passage planning.
</p>
</div>
<div class="profile-block">
<p class="profile-name">🚗 Vehicle</p>
<p>
Covers the parked and travelling vehicle experience — especially useful for anyone with
children or pets, motorhome travellers, and caravan owners. The headline column is
<strong>vehicle interior temperature</strong>: a physics-based estimate of how hot the
cabin gets when parked and sealed, adjusted for your chosen vehicle type (car, MPV, SUV,
motorhome, or caravan). Motorhomes and caravans are treated as insulated occupied living
spaces, with reflective sandwich panels roughly 25–35 mm thick, less sun-exposed glass
than a car, and retained warmth from previous hours, occupants, appliances, and background
heating. <strong>Wind speed</strong> is included because it matters
significantly for high-sided vehicles and caravans. <strong>Cloud cover</strong> and
<strong>air temperature</strong> give context, <strong>precipitation</strong> covers
driving conditions, and <strong>UTCI+P</strong> tells you what it will feel like when
you step outside. <strong>Soil moisture</strong> is included specifically for motorhome
and caravan users — values above 0.4 m³/m³ indicate saturated ground where pitching
or manoeuvring is likely to cause problems.
</p>
</div>
<div class="profile-block">
<p class="profile-name">🏠 Home</p>
<p>
For managing indoor comfort without air conditioning. The indoor temperature column is
central: select your building type from the dropdown (UK brick, modern insulated, Victorian
terrace, stone cottage, timber frame, top-floor flat, or conservatory) and the physics model
adjusts for that building's insulation, retained warmth, thermal mass, and glazing characteristics. Tick
<strong>Managed</strong> to switch to the heatwave-advice model — curtains closed by day
to block solar gain, windows opened whenever outdoor air is cooler than inside.
Indoor temperatures typically peak 2–4 hours after the outdoor peak due to thermal mass,
and the model reflects this lag for each building type. Supporting columns include
<strong>air temperature</strong>, <strong>relative humidity</strong> and
<strong>dew point</strong> (important for condensation and mould risk in cooler months),
<strong>wind speed</strong> for ventilation decisions, <strong>cloud cover</strong>,
and <strong>precipitation</strong> — so you know whether to open the windows or bring
the washing in.
</p>
</div>
<div class="profile-block">
<p class="profile-name">🌤️ Places</p>
<p>
A single profile covering six distinct place and activity contexts, each with its own
tailored column set. Select the activity from the dropdown in the Columns bar after
activating the Places profile. Urban, Beach, and Events are free; Festival, Winter
Sports, and Naturist are part of SunScope Extra.
A single profile covering seven distinct place and activity contexts, each with its own
tailored column set. Select the variant from the dropdown after activating the Places
profile. Urban, Beach, and Events are free; Festival, Winter Sports, Naturist, and
Sailing are part of SunScope Extra.
</p>
<p>
<strong>Urban</strong> — designed for anyone moving around a city on foot: commuting,
shopping, sightseeing. The urban environment creates its own microclimate: buildings
channel wind into gusts down narrow streets, concrete absorbs heat all day and radiates
it back long after sunset, and the lack of vegetation means there's no evaporative
cooling. The Urban variant shows <strong>air temperature</strong>, <strong>wind speed
and direction</strong>, <strong>cloud cover</strong>, <strong>UV-A index</strong>,
<strong>burn time</strong>, <strong>UTCI+P</strong>, <strong>precipitation</strong>,
and <strong>concrete surface temperature</strong>.
cooling. Columns: <strong>air temperature</strong>, <strong>wind speed and direction</strong>,
<strong>cloud cover</strong>, <strong>UV-A index</strong>, <strong>burn time</strong>,
<strong>UTCI+P</strong>, <strong>precipitation</strong>, and <strong>concrete surface
temperature</strong>.
</p>
<p>
<strong>Beach</strong> — UV exposure at the coast is significantly higher than inland:
@@ -404,18 +398,7 @@
time</strong> for your skin type. <strong>Dew point</strong> captures the humidity that
makes hot beach days feel muggy, <strong>wind speed and direction</strong> matters for
comfort and sea state, and <strong>sun elevation</strong> tells you when the UV load
peaks. <strong>UTCI+P</strong> and <strong>precipitation</strong> round out the picture
for day planning.
</p>
<p>
<strong>Festival · Extra</strong> — multi-day outdoor events live or die by two things: the
weather comfort and the state of the ground. The Festival variant focuses on
<strong>UTCI+P</strong> for how cold and wet conditions will actually feel, <strong>wind
speed and direction</strong> for tent and stage exposure, <strong>dew point</strong> for
overnight condensation, <strong>UV-A</strong> and <strong>burn time</strong> for daytime
sun protection, <strong>precipitation</strong> for planning, and <strong>soil
moisture</strong> — the mud indicator. Values above 0.4 m³/m³ mean the ground is
saturated and vehicle access, camping areas, and walkways will be affected.
peaks. <strong>UTCI+P</strong> and <strong>precipitation</strong> round out the picture.
</p>
<p>
<strong>Events</strong> — for general outdoor gatherings: markets, sports fixtures, open-air
@@ -427,13 +410,14 @@
— relevant for anyone standing or sitting on sun-exposed hard standing for extended periods.
</p>
<p>
<strong>Naturist · Extra</strong> — with no clothing buffer between skin and environment, every
weather variable matters more. Wind chill at even modest speeds becomes significant, so
both the raw <strong>UTCI</strong> and <strong>UTCI+P</strong> are shown. Both <strong>UV-A
</strong> and <strong>UV-B</strong> are included — full-body UV exposure is a serious
consideration — alongside <strong>burn time</strong>, <strong>sun elevation</strong>,
<strong>dew point</strong> for humidity comfort, <strong>wind</strong>, <strong>cloud
cover</strong>, and <strong>precipitation</strong>.
<strong>Festival · Extra</strong> — multi-day outdoor events live or die by two things: the
weather comfort and the state of the ground. Focuses on <strong>UTCI+P</strong> for how
cold and wet conditions will actually feel, <strong>wind speed and direction</strong> for
tent and stage exposure, <strong>dew point</strong> for overnight condensation,
<strong>UV-A</strong> and <strong>burn time</strong> for daytime sun protection,
<strong>precipitation</strong> for planning, and <strong>soil moisture</strong> — the mud
indicator. Values above 0.4 m³/m³ mean the ground is saturated and vehicle access,
camping areas, and walkways will be affected.
</p>
<p>
<strong>Winter Sports · Extra</strong> — for skiers, snowboarders, and mountain walkers. UV
@@ -443,9 +427,52 @@
shown with <strong>burn time</strong>. <strong>Wind speed and direction</strong> is
critical for wind chill at speed and for avalanche and exposure risk on open slopes.
<strong>Sun elevation</strong> indicates glare and visibility conditions on snow.
<strong>UTCI+P</strong> captures the real felt temperature, and <strong>air
temperature</strong>, <strong>cloud cover</strong>, and <strong>precipitation</strong>
(snow vs rain) complete the picture.
<strong>UTCI+P</strong>, <strong>air temperature</strong>, <strong>cloud cover</strong>,
and <strong>precipitation</strong> (snow vs rain) complete the picture.
</p>
<p>
<strong>Naturist · Extra</strong> — with no clothing buffer between skin and environment,
every weather variable matters more. Wind chill at even modest speeds becomes significant,
so both the raw <strong>UTCI</strong> and <strong>UTCI+P</strong> are shown. Both
<strong>UV-A</strong> and <strong>UV-B</strong> are included — full-body UV exposure is a
serious consideration — alongside <strong>burn time</strong>, <strong>sun elevation</strong>,
<strong>dew point</strong> for humidity comfort, <strong>wind</strong>, <strong>cloud
cover</strong>, and <strong>precipitation</strong>.
</p>
<p>
<strong>Sailing · Extra</strong> — conditions out at sea can be dramatically different from
what the shore feels like. Leads with <strong>air temperature</strong> (hypothermia is a
real risk — water conducts heat away from the body twenty-five times faster than air),
<strong>dew point</strong> (condensation on sails and equipment is a practical concern at
dawn and dusk), <strong>wind speed</strong> with gusts, <strong>wind direction</strong>,
<strong>cloud cover</strong>, and <strong>sun elevation</strong> for visibility and glare.
UV exposure is significantly higher on open water due to reflection off the surface, so
<strong>UV-A index</strong> and <strong>burn time</strong> are included. <strong>UTCI+P</strong>
captures the combined effect of wet, windy conditions, and <strong>precipitation</strong>
rounds out the picture for passage planning.
</p>
</div>
<div class="profile-block">
<p class="profile-name">🌡️ Temps · Extra</p>
<p>
A comparison view that brings all temperature-derived columns into one place:
<strong>air temperature</strong>, <strong>UTCI+P</strong>, <strong>surface soil
temperature</strong>, <strong>concrete surface temperature</strong>, <strong>vehicle
interior temperature</strong>, <strong>indoor temperature</strong>, and <strong>managed
indoor temperature</strong>. Useful for understanding how the same weather conditions
manifest across different environments simultaneously.
</p>
</div>
<div class="profile-block">
<p class="profile-name">⚙️ Custom · Extra</p>
<p>
Full control over which columns appear in the table. Toggle any combination of air
temperature, dew point, relative humidity, wind, direction, cloud, sun elevation, direct
and diffuse radiation, mean radiant temperature, UTCI delta, UTCI, UV-A, UV-B, burn time,
vehicle interior, indoor, managed indoor, soil temperatures, soil moisture, concrete
surface, precipitation, and UTCI+P. Build exactly the view that suits your situation.
</p>
</div>
@@ -548,7 +575,7 @@
<tr><td><span class="swatch" style="background:#7eb0e0"></span>−13 to 0 °C</td><td>Freezing</td><td>Strong cold stress; warm layers essential</td></tr>
<tr><td><span class="swatch" style="background:#bcd9ec"></span>0 to 9 °C</td><td>Cold</td><td>Moderate cold stress; coat and gloves advised</td></tr>
<tr><td><span class="swatch" style="background:#c8dcc0"></span>9 to 18 °C</td><td>Chilled</td><td>Slight cold stress; comfortable with a light jacket</td></tr>
<tr><td><span class="swatch" style="background:#6ab05a"></span>18 to 26 °C</td><td>Comfortable</td><td>No thermal stress; ideal outdoor conditions</td></tr>
<tr><td><span class="swatch" style="background:#4a8a3a"></span>18 to 26 °C</td><td>Comfortable</td><td>No thermal stress; ideal outdoor conditions</td></tr>
<tr><td><span class="swatch" style="background:#f5c842"></span>26 to 32 °C</td><td>Mod heat</td><td>Moderate heat stress; stay hydrated</td></tr>
<tr><td><span class="swatch" style="background:#f5821f"></span>32 to 38 °C</td><td>Strong heat</td><td>Strong heat stress; limit strenuous activity</td></tr>
<tr><td><span class="swatch" style="background:#e03030"></span>38 to 46 °C</td><td>V. strong heat</td><td>Very strong heat stress; seek shade and cool fluids</td></tr>
@@ -630,7 +657,7 @@
<details class="faq-block">
<summary class="faq-q">How far ahead does the forecast go?</summary>
<p class="faq-a">The free tier shows 3 days of hourly data. The forecast auto-refreshes every 5 minutes while the page is open, so the current hour always reflects the latest available data from Open-Meteo.</p>
<p class="faq-a">The free tier shows 3 days of hourly data. SunScope Extra unlocks all 14 days. The forecast auto-refreshes every 5 minutes while the page is open, so the current hour always reflects the latest available data from Open-Meteo.</p>
</details>
<details class="faq-block">
@@ -640,7 +667,7 @@
<details class="faq-block">
<summary class="faq-q">Is SunScope free?</summary>
<p class="faq-a">SunScope beta is currently free to use for any location worldwide. As the product develops, some features may move to a paid tier — but core forecasting will always be accessible.</p>
<p class="faq-a">The core forecast — Basic, Home, Vehicle, Farming, and the Places (Urban, Beach, Events) variants — is free for any location worldwide. SunScope Extra (£2/month) unlocks 14-day forecasts, the specialist Places variants (Festival, Winter Sports, Naturist, Sailing), the Temps comparison profile, and Custom column control.</p>
</details>
<details class="faq-block">
@@ -673,7 +700,7 @@
</main>
<footer>
&copy; 2026 <a href="https://fraxle.net" target="_blank" rel="noopener noreferrer">Fraxle.NET</a> · <a href="./index.html">Forecast</a> · <a href="./about.html">About</a> · Data: <a href="https://open-meteo.com/" target="_blank" rel="noopener noreferrer">Open-Meteo</a> · UTCI: <a href="https://utci.org/" target="_blank" rel="noopener noreferrer">Bröde 2012</a>
&copy; 2026 <a href="https://fraxle.net" target="_blank" rel="noopener noreferrer">Fraxle.NET</a> · <a href="./index.html">Forecast</a> · <a href="./about.html">About</a> · <a href="https://billing.stripe.com/p/login/9B63cw7vl8k15Ei9DQd7q00" target="_blank" rel="noopener noreferrer">Account</a> · Data: <a href="https://open-meteo.com/" target="_blank" rel="noopener noreferrer">Open-Meteo</a> · UTCI: <a href="https://utci.org/" target="_blank" rel="noopener noreferrer">Bröde 2012</a>
</footer>
</body>