From 4f16a5c7848e2f519556de4eae6b19245ea7196e Mon Sep 17 00:00:00 2001 From: fraxle Date: Sat, 16 May 2026 10:28:54 +0100 Subject: [PATCH] Update About Page --- STRIPE_SETUP.md | 179 ---------------------------------------- about.html | 215 +++++++++++++++++++++++++++--------------------- 2 files changed, 121 insertions(+), 273 deletions(-) delete mode 100644 STRIPE_SETUP.md diff --git a/STRIPE_SETUP.md b/STRIPE_SETUP.md deleted file mode 100644 index f3cf6d5..0000000 --- a/STRIPE_SETUP.md +++ /dev/null @@ -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 - - Subscribe — £2/month - -``` - ---- - -## 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" | diff --git a/about.html b/about.html index 1d54da4..5aef669 100644 --- a/about.html +++ b/about.html @@ -196,8 +196,9 @@
- Home + Forecast About + Account
@@ -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 Places 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.

+
+

🌡️ Basic

+

+ The default view — clean and uncluttered, showing the essentials for any outdoor situation. + Air temperature, wind speed, cloud cover, + precipitation, and UTCI+P — 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. +

+
+ +
+

🏠 Home

+

+ 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 Managed 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 air temperature, relative humidity and + dew point (important for condensation and mould risk in cooler months), + wind speed for ventilation decisions, cloud cover, + and precipitation — so you know whether to open the windows or bring + the washing in. +

+
+ +
+

🚗 Vehicle

+

+ Covers the parked and travelling vehicle experience — especially useful for anyone with + children or pets, motorhome travellers, and caravan owners. The headline column is + vehicle interior temperature: 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. Wind speed is included because it matters significantly for + high-sided vehicles and caravans. Cloud cover and air + temperature give context, precipitation covers driving + conditions, and UTCI+P tells you what it will feel like when you step + outside. Soil moisture 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. +

+
+

🌾 Farming

@@ -323,79 +373,23 @@

-
-

⛵ Sailing · Extra

-

- 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: - air temperature (hypothermia is a real risk — water conducts heat away from - the body twenty-five times faster than air), dew point (condensation on - sails and equipment is a practical concern at dawn and dusk), wind speed - with gusts, wind direction, cloud cover, and - sun elevation for visibility and glare. UV exposure is significantly higher - on open water due to reflection off the surface, so UV-A index and - burn time are included. UTCI+P captures the combined - misery of wet, windy conditions, and precipitation rounds out the picture - for passage planning. -

-
- -
-

🚗 Vehicle

-

- Covers the parked and travelling vehicle experience — especially useful for anyone with - children or pets, motorhome travellers, and caravan owners. The headline column is - vehicle interior temperature: 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. Wind speed is included because it matters - significantly for high-sided vehicles and caravans. Cloud cover and - air temperature give context, precipitation covers - driving conditions, and UTCI+P tells you what it will feel like when - you step outside. Soil moisture 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. -

-
- -
-

🏠 Home

-

- 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 - Managed 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 - air temperature, relative humidity and - dew point (important for condensation and mould risk in cooler months), - wind speed for ventilation decisions, cloud cover, - and precipitation — so you know whether to open the windows or bring - the washing in. -

-
-

🌤️ Places

- 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.

Urban — 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 air temperature, wind speed - and direction, cloud cover, UV-A index, - burn time, UTCI+P, precipitation, - and concrete surface temperature. + cooling. Columns: air temperature, wind speed and direction, + cloud cover, UV-A index, burn time, + UTCI+P, precipitation, and concrete surface + temperature.

Beach — UV exposure at the coast is significantly higher than inland: @@ -404,18 +398,7 @@ time for your skin type. Dew point captures the humidity that makes hot beach days feel muggy, wind speed and direction matters for comfort and sea state, and sun elevation tells you when the UV load - peaks. UTCI+P and precipitation round out the picture - for day planning. -

-

- Festival · Extra — multi-day outdoor events live or die by two things: the - weather comfort and the state of the ground. The Festival variant focuses on - UTCI+P for how cold and wet conditions will actually feel, wind - speed and direction for tent and stage exposure, dew point for - overnight condensation, UV-A and burn time for daytime - sun protection, precipitation for planning, and soil - moisture — 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. UTCI+P and precipitation round out the picture.

Events — 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.

- Naturist · Extra — 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 UTCI and UTCI+P are shown. Both UV-A - and UV-B are included — full-body UV exposure is a serious - consideration — alongside burn time, sun elevation, - dew point for humidity comfort, wind, cloud - cover, and precipitation. + Festival · Extra — multi-day outdoor events live or die by two things: the + weather comfort and the state of the ground. Focuses on UTCI+P for how + cold and wet conditions will actually feel, wind speed and direction for + tent and stage exposure, dew point for overnight condensation, + UV-A and burn time for daytime sun protection, + precipitation for planning, and soil moisture — the mud + indicator. Values above 0.4 m³/m³ mean the ground is saturated and vehicle access, + camping areas, and walkways will be affected.

Winter Sports · Extra — for skiers, snowboarders, and mountain walkers. UV @@ -443,9 +427,52 @@ shown with burn time. Wind speed and direction is critical for wind chill at speed and for avalanche and exposure risk on open slopes. Sun elevation indicates glare and visibility conditions on snow. - UTCI+P captures the real felt temperature, and air - temperature, cloud cover, and precipitation - (snow vs rain) complete the picture. + UTCI+P, air temperature, cloud cover, + and precipitation (snow vs rain) complete the picture. +

+

+ Naturist · Extra — 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 UTCI and UTCI+P are shown. Both + UV-A and UV-B are included — full-body UV exposure is a + serious consideration — alongside burn time, sun elevation, + dew point for humidity comfort, wind, cloud + cover, and precipitation. +

+

+ Sailing · Extra — conditions out at sea can be dramatically different from + what the shore feels like. Leads with air temperature (hypothermia is a + real risk — water conducts heat away from the body twenty-five times faster than air), + dew point (condensation on sails and equipment is a practical concern at + dawn and dusk), wind speed with gusts, wind direction, + cloud cover, and sun elevation for visibility and glare. + UV exposure is significantly higher on open water due to reflection off the surface, so + UV-A index and burn time are included. UTCI+P + captures the combined effect of wet, windy conditions, and precipitation + rounds out the picture for passage planning. +

+
+ +
+

🌡️ Temps · Extra

+

+ A comparison view that brings all temperature-derived columns into one place: + air temperature, UTCI+P, surface soil + temperature, concrete surface temperature, vehicle + interior temperature, indoor temperature, and managed + indoor temperature. Useful for understanding how the same weather conditions + manifest across different environments simultaneously. +

+
+ +
+

⚙️ Custom · Extra

+

+ 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.

@@ -548,7 +575,7 @@ −13 to 0 °CFreezingStrong cold stress; warm layers essential 0 to 9 °CColdModerate cold stress; coat and gloves advised 9 to 18 °CChilledSlight cold stress; comfortable with a light jacket - 18 to 26 °CComfortableNo thermal stress; ideal outdoor conditions + 18 to 26 °CComfortableNo thermal stress; ideal outdoor conditions 26 to 32 °CMod heatModerate heat stress; stay hydrated 32 to 38 °CStrong heatStrong heat stress; limit strenuous activity 38 to 46 °CV. strong heatVery strong heat stress; seek shade and cool fluids @@ -630,7 +657,7 @@
How far ahead does the forecast go? -

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.

+

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.

@@ -640,7 +667,7 @@
Is SunScope free? -

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.

+

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.

@@ -673,7 +700,7 @@