Lost In Kalymnos — Widget Test

Widget Integration Test — These widgets are loaded from sunshade.info/widget.js and render cross-origin on lostinkalymnos.com. This proves the embed works on third-party sites.

Widget Builder

Select options to preview a live widget and get the embed code

Mode

Single route

Crag (multiple routes)

Atlas key

theCrag route ID

Label (optional)

Style

bar

card

text

inline

Theme

light

dark

auto

Preview

Loading widget...

Embed code

<div class="sunshade"
     data-key="thecrag"
     data-style="bar"
     data-thecrag-id="2795193207"></div>

<script src="https://sunshade.info/widget.js"></script>

Single Route — by theCrag ID

data-thecrag-id (shade API, server-side)

Show embed code

<div class="sunshade"
     data-key="thecrag"
     data-thecrag-id="2795193207"
     data-style="bar"
     data-label="James (6a+) — Love Ledge"></div>

Single Route Card — by theCrag ID

Card style with sky chart link

Show embed code

<div class="sunshade"
     data-key="thecrag"
     data-thecrag-id="2795193207"
     data-style="card"></div>

Single Route Text — by theCrag ID

Minimal text widget

Show embed code

<div class="sunshade"
     data-key="thecrag"
     data-thecrag-id="2795193207"
     data-style="text"
     data-label="James (6a+)"></div>

Crag Mode — by theCrag Area ID

All routes in Love Ledge with composite bars

Show embed code

<div class="sunshade"
     data-key="thecrag"
     data-mode="crag"
     data-thecrag-area-id="450333144"
     data-composite="both"
     data-style="bar"></div>

Crag Card — Twin Caves

Card style with route list

Show embed code

<div class="sunshade"
     data-key="thecrag"
     data-mode="crag"
     data-crag="Twin Caves"
     data-region="Leonidio"
     data-composite="both"
     data-style="card"></div>

Crag Text — Hot Rock

Compact text listing

Show embed code

<div class="sunshade"
     data-key="thecrag"
     data-mode="crag"
     data-crag="Hot Rock"
     data-region="Leonidio"
     data-style="text"></div>

Inline Style — Single Route

data-style="inline" — times rendered inside bar segments

Show embed code

<div class="sunshade"
     data-key="thecrag"
     data-thecrag-id="2795193207"
     data-style="inline"
     data-label="James (6a+) — Love Ledge"></div>

Inline Style — Crag Mode

Inline bars for composites and individual routes

Show embed code

<div class="sunshade"
     data-key="thecrag"
     data-mode="crag"
     data-thecrag-area-id="450333144"
     data-composite="both"
     data-style="inline"></div>

Dark Theme

data-theme="dark"

Show embed code

<div class="sunshade"
     data-key="thecrag"
     data-thecrag-id="2795193207"
     data-style="bar"
     data-label="James (6a+)"
     data-theme="dark"></div>

Custom Colours

Brand-matched colour scheme

Show embed code

<div class="sunshade"
     data-key="thecrag"
     data-thecrag-id="2795193207"
     data-style="bar"
     data-label="James — LIK themed"
     data-sun-color="linear-gradient(90deg,#f59e0b,#ef4444)"
     data-shade-color="#bfdbfe"
     data-bar-bg="#e5e7eb"></div>

Legacy — data-profile (client-side)

Original mode using profile slug + client-side SunCalc computation

Show embed code

<div class="sunshade"
     data-key="thecrag"
     data-profile="leonidio-love-ledge-james"
     data-style="bar"
     data-label="James (6a+) — client-side"></div>

Non-Climbing Atlas — Leonidio Town

data-key="leonidio" with town items

Show embed code

<div class="sunshade"
     data-key="leonidio"
     data-mode="crag"
     data-crag="Town"
     data-region="Town"
     data-composite="both"
     data-style="bar"
     data-label="Leonidio Town"></div>

Widget loaded from sunshade.info — cross-origin integration test