gpt-5.4 @ medium · cursor-xl
cursor-xlmedium
- config
- gpt-5.4-eff-medium--cli--cursor-xl--dev
- batch
- 2026-07-19--unified
- transport
- cursor-agent-cli-isolated-home
- protocol
- cli · plan
- served model
- gpt-5.4-medium
- captured
- Jul 18, 2026, 11:54 AM · N=2
variant
live
slot 0 · P-q · sandboxed iframe
The screenshot is the exact frozen pixels the similarity channels measured. Run live re-executes the raw output in a sandboxed iframe; its rendering depends on your browser and fonts and is not guaranteed to match the measured pixels.
similarity neighborsNo similarity data for this session — this batch has no computed pairs.
Fidelity — does the card show the right data?
- namematch
- conditionmatch
- datematch
- max tempmatchshown: 25
- min tempmatchshown: 16
- hourlyambiguouscoverage · 0 match · 0 mismatch · 24 not shown
- request sidematch0 violation(s)
extractor fidelity-extractor-v1+Berlin-2026-07-15
Source — raw model output, one byte unchanged
download card.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=1280, initial-scale=1.0" />
<title>Weather Card</title>
<style>
:root {
--bg-1: #07111f;
--bg-2: #0c1f36;
--bg-3: #163a5f;
--card: rgba(9, 20, 36, 0.72);
--card-strong: rgba(13, 27, 46, 0.9);
--line: rgba(255, 255, 255, 0.12);
--text: #f5f8ff;
--muted: rgba(235, 242, 255, 0.72);
--accent: #9fd3ff;
--accent-2: #7bf0cf;
--shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
--radius-xl: 32px;
--radius-lg: 24px;
--radius-md: 18px;
}
* {
box-sizing: border-box;
}
html, body {
width: 1280px;
height: 800px;
margin: 0;
overflow: hidden;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--text);
background:
radial-gradient(circle at 18% 18%, rgba(123, 240, 207, 0.16), transparent 28%),
radial-gradient(circle at 82% 22%, rgba(159, 211, 255, 0.24), transparent 26%),
radial-gradient(circle at 50% 100%, rgba(58, 108, 255, 0.2), transparent 42%),
linear-gradient(145deg, var(--bg-1) 0%, var(--bg-2) 45%, var(--bg-3) 100%);
}
body::before,
body::after {
content: "";
position: absolute;
inset: auto;
border-radius: 999px;
filter: blur(50px);
pointer-events: none;
opacity: 0.55;
}
body::before {
width: 340px;
height: 340px;
left: -80px;
top: -50px;
background: rgba(126, 217, 255, 0.18);
}
body::after {
width: 420px;
height: 420px;
right: -120px;
bottom: -120px;
background: rgba(78, 125, 255, 0.18);
}
.frame {
position: relative;
width: 100%;
height: 100%;
padding: 34px;
display: flex;
align-items: center;
justify-content: center;
}
.card {
position: relative;
width: 1180px;
height: 732px;
display: grid;
grid-template-columns: 1.06fr 0.94fr;
gap: 22px;
padding: 22px;
border-radius: 36px;
background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
border: 1px solid rgba(255,255,255,0.12);
box-shadow: var(--shadow);
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
overflow: hidden;
}
.card::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(130deg, rgba(255,255,255,0.08), transparent 28%),
linear-gradient(320deg, rgba(123,240,207,0.08), transparent 34%);
pointer-events: none;
}
.panel {
position: relative;
border-radius: var(--radius-xl);
background: linear-gradient(180deg, rgba(12, 24, 41, 0.76), rgba(8, 17, 30, 0.86));
border: 1px solid var(--line);
overflow: hidden;
}
.left {
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-width: 0;
}
.right {
padding: 24px;
display: flex;
flex-direction: column;
gap: 18px;
min-width: 0;
}
.header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
}
.location-wrap {
min-width: 0;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
color: var(--muted);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: linear-gradient(180deg, var(--accent-2), var(--accent));
box-shadow: 0 0 14px rgba(123, 240, 207, 0.65);
flex: 0 0 auto;
}
.location {
margin: 18px 0 10px;
font-size: 52px;
line-height: 0.98;
letter-spacing: -0.04em;
font-weight: 700;
max-width: 560px;
word-break: break-word;
}
.date {
color: var(--muted);
font-size: 18px;
letter-spacing: 0.01em;
}
.hero {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
align-items: center;
gap: 22px;
margin-top: 10px;
}
.icon-shell {
position: relative;
height: 300px;
border-radius: 28px;
background:
radial-gradient(circle at 30% 20%, rgba(255,255,255,0.12), transparent 34%),
linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
border: 1px solid rgba(255,255,255,0.08);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.icon-shell::before {
content: "";
position: absolute;
width: 240px;
height: 240px;
border-radius: 50%;
background: radial-gradient(circle, rgba(159,211,255,0.28), rgba(159,211,255,0.02) 70%);
filter: blur(8px);
}
.weather-icon {
position: relative;
width: 210px;
height: 210px;
z-index: 1;
}
.summary {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
}
.condition {
font-size: 30px;
font-weight: 650;
letter-spacing: -0.02em;
}
.temps {
display: flex;
align-items: flex-end;
gap: 18px;
flex-wrap: wrap;
}
.temp-main {
font-size: 84px;
line-height: 0.9;
font-weight: 760;
letter-spacing: -0.06em;
}
.temp-main span {
font-size: 0.46em;
opacity: 0.88;
margin-left: 3px;
}
.range {
display: flex;
flex-direction: column;
gap: 10px;
padding-bottom: 8px;
}
.range-chip {
min-width: 142px;
padding: 12px 14px;
border-radius: 18px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.range-chip label {
color: var(--muted);
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.range-chip strong {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.03em;
}
.details-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 16px;
}
.mini-stat {
padding: 16px 18px;
border-radius: var(--radius-md);
background: rgba(255,255,255,0.045);
border: 1px solid rgba(255,255,255,0.08);
}
.mini-stat .label {
color: var(--muted);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 10px;
}
.mini-stat .value {
font-size: 22px;
font-weight: 650;
letter-spacing: -0.02em;
}
.section-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 4px;
}
.section-title h2 {
margin: 0;
font-size: 18px;
font-weight: 650;
letter-spacing: -0.02em;
}
.section-title span {
color: var(--muted);
font-size: 13px;
}
.chart-card {
flex: 1 1 auto;
min-height: 0;
border-radius: 26px;
background:
linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.025));
border: 1px solid rgba(255,255,255,0.08);
padding: 18px 18px 16px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.chart {
flex: 1 1 auto;
min-height: 0;
display: grid;
grid-template-columns: repeat(24, minmax(0, 1fr));
gap: 8px;
align-items: end;
padding-top: 10px;
}
.hour {
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 10px;
height: 100%;
}
.bar-wrap {
width: 100%;
flex: 1 1 auto;
min-height: 150px;
display: flex;
align-items: flex-end;
justify-content: center;
}
.bar {
width: 100%;
max-width: 26px;
min-height: 16px;
border-radius: 999px;
background:
linear-gradient(180deg, rgba(123,240,207,0.95), rgba(125,184,255,0.96));
box-shadow:
0 10px 24px rgba(125,184,255,0.18),
inset 0 1px 0 rgba(255,255,255,0.45);
position: relative;
}
.bar::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(180deg, rgba(255,255,255,0.22), transparent 40%);
pointer-events: none;
}
.hour-temp {
font-size: 14px;
font-weight: 650;
letter-spacing: -0.02em;
color: #f8fbff;
white-space: nowrap;
}
.hour-label {
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
white-space: nowrap;
}
.legend {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,0.08);
color: var(--muted);
font-size: 12px;
}
.status {
position: absolute;
inset: 22px;
border-radius: 30px;
display: none;
align-items: center;
justify-content: center;
text-align: center;
padding: 24px;
z-index: 5;
background: linear-gradient(180deg, rgba(6, 12, 22, 0.78), rgba(7, 14, 25, 0.88));
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.status.visible {
display: flex;
}
.status-card {
max-width: 520px;
padding: 26px 28px;
border-radius: 24px;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.05);
box-shadow: 0 16px 50px rgba(0,0,0,0.24);
}
.status-title {
font-size: 26px;
font-weight: 680;
letter-spacing: -0.03em;
margin-bottom: 10px;
}
.status-text {
color: var(--muted);
font-size: 16px;
line-height: 1.5;
}
.footer-note {
margin-top: 14px;
color: rgba(235, 242, 255, 0.52);
font-size: 12px;
letter-spacing: 0.04em;
}
.loading-shimmer {
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.055) 50%, transparent 80%);
transform: translateX(-100%);
animation: shimmer 1.8s infinite;
pointer-events: none;
opacity: 0.7;
}
.is-loaded .loading-shimmer {
display: none;
}
@keyframes shimmer {
to {
transform: translateX(100%);
}
}
.fade-in {
animation: fadeIn 0.45s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
clip-path: inset(50%);
}
</style>
</head>
<body>
<div class="frame">
<main class="card" id="app">
<div class="loading-shimmer" aria-hidden="true"></div>
<section class="panel left fade-in">
<div>
<div class="header">
<div class="location-wrap">
<div class="eyebrow">
<span class="dot"></span>
<span>Weather Overview</span>
</div>
<h1 class="location" id="locationName">Berlin</h1>
<div class="date" id="dateText">Loading date...</div>
</div>
</div>
<div class="hero">
<div class="icon-shell">
<svg class="weather-icon" id="weatherIcon" viewBox="0 0 240 240" aria-hidden="true"></svg>
</div>
<div class="summary">
<div class="condition" id="conditionText">Loading weather...</div>
<div class="temps">
<div class="temp-main" id="tempMain">--<span>°C</span></div>
<div class="range">
<div class="range-chip">
<label>High</label>
<strong id="tempMax">--°C</strong>
</div>
<div class="range-chip">
<label>Low</label>
<strong id="tempMin">--°C</strong>
</div>
</div>
</div>
<div class="details-strip">
<div class="mini-stat">
<div class="label">Coordinates</div>
<div class="value" id="coordsText">52.52, 13.405</div>
</div>
<div class="mini-stat">
<div class="label">Data Source</div>
<div class="value" id="sourceText">Forecast</div>
</div>
<div class="mini-stat">
<div class="label">Timezone</div>
<div class="value">UTC</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-note">Daily high/low and hourly temperatures for the selected UTC date.</div>
</section>
<section class="panel right fade-in">
<div class="chart-card">
<div class="section-title">
<h2>Hourly Temperatures</h2>
<span id="hoursCount">24 points</span>
</div>
<div class="chart" id="hourlyChart" aria-label="Hourly temperatures chart"></div>
<div class="legend">
<span id="rangeLabel">Range: --°C to --°C</span>
<span>24-hour UTC timeline</span>
</div>
</div>
</section>
<div class="status visible" id="status">
<div class="status-card">
<div class="status-title" id="statusTitle">Loading weather</div>
<div class="status-text" id="statusText">Fetching the selected day's forecast.</div>
</div>
</div>
</main>
</div>
<script>
(function () {
const DEFAULTS = {
lat: 52.52,
lon: 13.405,
name: "Berlin"
};
const el = {
app: document.getElementById("app"),
status: document.getElementById("status"),
statusTitle: document.getElementById("statusTitle"),
statusText: document.getElementById("statusText"),
locationName: document.getElementById("locationName"),
dateText: document.getElementById("dateText"),
conditionText: document.getElementById("conditionText"),
tempMain: document.getElementById("tempMain"),
tempMax: document.getElementById("tempMax"),
tempMin: document.getElementById("tempMin"),
coordsText: document.getElementById("coordsText"),
sourceText: document.getElementById("sourceText"),
weatherIcon: document.getElementById("weatherIcon"),
hourlyChart: document.getElementById("hourlyChart"),
hoursCount: document.getElementById("hoursCount"),
rangeLabel: document.getElementById("rangeLabel")
};
function getTodayUTC() {
return new Date().toISOString().slice(0, 10);
}
function parseDateInput(value) {
if (!value || !/^\d{4}-\d{2}-\d{2}$/.test(value)) {
return getTodayUTC();
}
const date = new Date(value + "T00:00:00Z");
if (Number.isNaN(date.getTime())) {
return getTodayUTC();
}
return value;
}
function parseNumber(value, fallback) {
const n = Number(value);
return Number.isFinite(n) ? n : fallback;
}
function getParams() {
const params = new URLSearchParams(window.location.search);
return {
lat: parseNumber(params.get("lat"), DEFAULTS.lat),
lon: parseNumber(params.get("lon"), DEFAULTS.lon),
name: (params.get("name") || DEFAULTS.name).trim() || DEFAULTS.name,
date: parseDateInput(params.get("date"))
};
}
function isPastDate(dateStr) {
const today = getTodayUTC();
return dateStr < today;
}
function formatDate(dateStr) {
const date = new Date(dateStr + "T00:00:00Z");
return new Intl.DateTimeFormat("en-US", {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
timeZone: "UTC"
}).format(date);
}
function roundTemp(value) {
return Math.round(Number(value));
}
function formatTemp(value) {
const rounded = roundTemp(value);
return (rounded > 0 ? rounded : rounded).toString() + "\u00B0C";
}
function clamp(n, min, max) {
return Math.max(min, Math.min(max, n));
}
function setStatus(title, text, visible) {
el.statusTitle.textContent = title;
el.statusText.textContent = text;
el.status.classList.toggle("visible", visible);
}
function weatherInfo(code) {
const map = {
0: { label: "Clear Sky", theme: "clear" },
1: { label: "Mainly Clear", theme: "partly" },
2: { label: "Partly Cloudy", theme: "partly" },
3: { label: "Overcast", theme: "cloudy" },
45: { label: "Fog", theme: "fog" },
48: { label: "Depositing Rime Fog", theme: "fog" },
51: { label: "Light Drizzle", theme: "drizzle" },
53: { label: "Moderate Drizzle", theme: "drizzle" },
55: { label: "Dense Drizzle", theme: "drizzle" },
56: { label: "Light Freezing Drizzle", theme: "drizzle" },
57: { label: "Dense Freezing Drizzle", theme: "drizzle" },
61: { label: "Slight Rain", theme: "rain" },
63: { label: "Moderate Rain", theme: "rain" },
65: { label: "Heavy Rain", theme: "rain" },
66: { label: "Light Freezing Rain", theme: "rain" },
67: { label: "Heavy Freezing Rain", theme: "rain" },
71: { label: "Slight Snow Fall", theme: "snow" },
73: { label: "Moderate Snow Fall", theme: "snow" },
75: { label: "Heavy Snow Fall", theme: "snow" },
77: { label: "Snow Grains", theme: "snow" },
80: { label: "Slight Rain Showers", theme: "showers" },
81: { label: "Moderate Rain Showers", theme: "showers" },
82: { label: "Violent Rain Showers", theme: "showers" },
85: { label: "Slight Snow Showers", theme: "snow" },
86: { label: "Heavy Snow Showers", theme: "snow" },
95: { label: "Thunderstorm", theme: "storm" },
96: { label: "Thunderstorm With Hail", theme: "storm" },
99: { label: "Severe Thunderstorm", theme: "storm" }
};
return map[code] || { label: "Unknown Conditions", theme: "cloudy" };
}
function renderIcon(theme) {
const svg = el.weatherIcon;
const gradients = `
<defs>
<linearGradient id="sunGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#fff1a8"></stop>
<stop offset="100%" stop-color="#ffb65a"></stop>
</linearGradient>
<linearGradient id="cloudGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#f7fbff"></stop>
<stop offset="100%" stop-color="#bdd3f0"></stop>
</linearGradient>
<linearGradient id="rainGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#7fe9ff"></stop>
<stop offset="100%" stop-color="#5a8cff"></stop>
</linearGradient>
<linearGradient id="stormGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#ffd979"></stop>
<stop offset="100%" stop-color="#ff9b52"></stop>
</linearGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="4" result="coloredBlur"></feGaussianBlur>
<feMerge>
<feMergeNode in="coloredBlur"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
`;
const pieces = {
clear: `
<circle cx="120" cy="120" r="46" fill="url(#sunGrad)" filter="url(#glow)"></circle>
<g stroke="#ffd878" stroke-width="8" stroke-linecap="round" opacity="0.95">
<line x1="120" y1="28" x2="120" y2="56"></line>
<line x1="120" y1="184" x2="120" y2="212"></line>
<line x1="28" y1="120" x2="56" y2="120"></line>
<line x1="184" y1="120" x2="212" y2="120"></line>
<line x1="55" y1="55" x2="75" y2="75"></line>
<line x1="165" y1="165" x2="185" y2="185"></line>
<line x1="165" y1="75" x2="185" y2="55"></line>
<line x1="55" y1="185" x2="75" y2="165"></line>
</g>
`,
partly: `
<circle cx="98" cy="96" r="38" fill="url(#sunGrad)" filter="url(#glow)"></circle>
<g stroke="#ffd878" stroke-width="6" stroke-linecap="round" opacity="0.92">
<line x1="98" y1="34" x2="98" y2="54"></line>
<line x1="98" y1="138" x2="98" y2="158"></line>
<line x1="36" y1="96" x2="56" y2="96"></line>
<line x1="140" y1="96" x2="160" y2="96"></line>
</g>
<g transform="translate(48 88)">
<ellipse cx="84" cy="56" rx="52" ry="30" fill="url(#cloudGrad)"></ellipse>
<ellipse cx="54" cy="54" rx="28" ry="22" fill="url(#cloudGrad)"></ellipse>
<ellipse cx="108" cy="44" rx="32" ry="24" fill="url(#cloudGrad)"></ellipse>
</g>
`,
cloudy: `
<g transform="translate(30 72)">
<ellipse cx="92" cy="72" rx="66" ry="36" fill="url(#cloudGrad)"></ellipse>
<ellipse cx="56" cy="68" rx="34" ry="28" fill="url(#cloudGrad)"></ellipse>
<ellipse cx="128" cy="58" rx="38" ry="30" fill="url(#cloudGrad)"></ellipse>
</g>
<g transform="translate(82 112)" opacity="0.82">
<ellipse cx="46" cy="36" rx="46" ry="24" fill="#d9e7f7"></ellipse>
<ellipse cx="22" cy="34" rx="22" ry="18" fill="#d9e7f7"></ellipse>
<ellipse cx="62" cy="28" rx="26" ry="20" fill="#d9e7f7"></ellipse>
</g>
`,
fog: `
<g transform="translate(38 68)">
<ellipse cx="86" cy="64" rx="58" ry="32" fill="url(#cloudGrad)"></ellipse>
<ellipse cx="56" cy="60" rx="28" ry="22" fill="url(#cloudGrad)"></ellipse>
<ellipse cx="112" cy="52" rx="34" ry="24" fill="url(#cloudGrad)"></ellipse>
</g>
<g stroke="#dce8f8" stroke-width="8" stroke-linecap="round" opacity="0.82">
<line x1="50" y1="162" x2="190" y2="162"></line>
<line x1="64" y1="184" x2="176" y2="184"></line>
<line x1="42" y1="206" x2="198" y2="206"></line>
</g>
`,
drizzle: `
<g transform="translate(40 58)">
<ellipse cx="82" cy="70" rx="60" ry="34" fill="url(#cloudGrad)"></ellipse>
<ellipse cx="52" cy="64" rx="30" ry="24" fill="url(#cloudGrad)"></ellipse>
<ellipse cx="110" cy="56" rx="34" ry="24" fill="url(#cloudGrad)"></ellipse>
</g>
<g stroke="url(#rainGrad)" stroke-width="8" stroke-linecap="round" opacity="0.95">
<line x1="86" y1="154" x2="76" y2="178"></line>
<line x1="122" y1="154" x2="112" y2="178"></line>
<line x1="158" y1="154" x2="148" y2="178"></line>
</g>
`,
rain: `
<g transform="translate(40 58)">
<ellipse cx="82" cy="70" rx="60" ry="34" fill="url(#cloudGrad)"></ellipse>
<ellipse cx="52" cy="64" rx="30" ry="24" fill="url(#cloudGrad)"></ellipse>
<ellipse cx="110" cy="56" rx="34" ry="24" fill="url(#cloudGrad)"></ellipse>
</g>
<g stroke="url(#rainGrad)" stroke-width="10" stroke-linecap="round" opacity="0.97">
<line x1="74" y1="150" x2="60" y2="188"></line>
<line x1="108" y1="150" x2="94" y2="194"></line>
<line x1="142" y1="150" x2="128" y2="188"></line>
<line x1="176" y1="150" x2="162" y2="194"></line>
</g>
`,
showers: `
<circle cx="88" cy="78" r="24" fill="url(#sunGrad)" opacity="0.92"></circle>
<g transform="translate(42 66)">
<ellipse cx="82" cy="70" rx="60" ry="34" fill="url(#cloudGrad)"></ellipse>
<ellipse cx="52" cy="64" rx="30" ry="24" fill="url(#cloudGrad)"></ellipse>
<ellipse cx="110" cy="56" rx="34" ry="24" fill="url(#cloudGrad)"></ellipse>
</g>
<g stroke="url(#rainGrad)" stroke-width="10" stroke-linecap="round" opacity="0.97">
<line x1="94" y1="156" x2="80" y2="192"></line>
<line x1="134" y1="156" x2="120" y2="198"></line>
<line x1="174" y1="156" x2="160" y2="192"></line>
</g>
`,
snow: `
<g transform="translate(40 58)">
<ellipse cx="82" cy="70" rx="60" ry="34" fill="url(#cloudGrad)"></ellipse>
<ellipse cx="52" cy="64" rx="30" ry="24" fill="url(#cloudGrad)"></ellipse>
<ellipse cx="110" cy="56" rx="34" ry="24" fill="url(#cloudGrad)"></ellipse>
</g>
<g fill="#eef7ff" opacity="0.96">
<circle cx="80" cy="166" r="6"></circle>
<circle cx="114" cy="182" r="6"></circle>
<circle cx="146" cy="164" r="6"></circle>
<circle cx="176" cy="182" r="6"></circle>
<circle cx="100" cy="202" r="6"></circle>
<circle cx="160" cy="204" r="6"></circle>
</g>
`,
storm: `
<g transform="translate(40 54)">
<ellipse cx="82" cy="74" rx="62" ry="36" fill="url(#cloudGrad)"></ellipse>
<ellipse cx="50" cy="68" rx="30" ry="24" fill="url(#cloudGrad)"></ellipse>
<ellipse cx="114" cy="60" rx="36" ry="26" fill="url(#cloudGrad)"></ellipse>
</g>
<g stroke="url(#rainGrad)" stroke-width="8" stroke-linecap="round" opacity="0.92">
<line x1="80" y1="156" x2="70" y2="184"></line>
<line x1="166" y1="156" x2="156" y2="184"></line>
</g>
<path d="M130 146 L108 184 H128 L112 220 L162 170 H138 L154 146 Z" fill="url(#stormGrad)" filter="url(#glow)"></path>
`
};
svg.innerHTML = gradients + (pieces[theme] || pieces.cloudy);
}
function buildChart(times, temps) {
el.hourlyChart.innerHTML = "";
const values = temps.map(Number).filter(Number.isFinite);
if (!values.length) {
throw new Error("No hourly temperature data available.");
}
const min = Math.min.apply(null, values);
const max = Math.max.apply(null, values);
const span = Math.max(1, max - min);
times.forEach(function (isoTime, index) {
const temp = Number(temps[index]);
if (!Number.isFinite(temp)) return;
const hour = isoTime.slice(11, 13);
const normalized = (temp - min) / span;
const height = 16 + normalized * 168;
const node = document.createElement("div");
node.className = "hour";
const barWrap = document.createElement("div");
barWrap.className = "bar-wrap";
const bar = document.createElement("div");
bar.className = "bar";
bar.style.height = height.toFixed(0) + "px";
bar.title = hour + ":00 UTC - " + formatTemp(temp);
const tempLabel = document.createElement("div");
tempLabel.className = "hour-temp";
tempLabel.textContent = Math.round(temp) + "\u00B0";
const hourLabel = document.createElement("div");
hourLabel.className = "hour-label";
hourLabel.textContent = hour;
barWrap.appendChild(bar);
node.appendChild(barWrap);
node.appendChild(tempLabel);
node.appendChild(hourLabel);
el.hourlyChart.appendChild(node);
});
el.hoursCount.textContent = values.length + " points";
el.rangeLabel.textContent = "Range: " + formatTemp(min) + " to " + formatTemp(max);
}
async function load() {
const params = getParams();
el.locationName.textContent = params.name;
el.dateText.textContent = formatDate(params.date);
el.coordsText.textContent = params.lat.toFixed(3) + ", " + params.lon.toFixed(3);
const endpoint = isPastDate(params.date) ? "/api/om/archive" : "/api/om/forecast";
el.sourceText.textContent = endpoint.endsWith("archive") ? "Archive" : "Forecast";
const query = new URLSearchParams({
latitude: String(params.lat),
longitude: String(params.lon),
daily: "temperature_2m_max,temperature_2m_min,weather_code",
hourly: "temperature_2m",
timezone: "UTC",
temperature_unit: "celsius",
start_date: params.date,
end_date: params.date
});
setStatus("Loading weather", "Fetching the selected day's " + (endpoint.endsWith("archive") ? "historical" : "forecast") + " data.", true);
let response;
try {
response = await fetch(endpoint + "?" + query.toString(), {
method: "GET",
headers: { "Accept": "application/json" }
});
} catch (err) {
throw new Error("Weather data could not be loaded.");
}
if (!response.ok) {
throw new Error("Weather data could not be loaded.");
}
let data;
try {
data = await response.json();
} catch (err) {
throw new Error("Weather data could not be loaded.");
}
const daily = data && data.daily;
const hourly = data && data.hourly;
if (
!daily ||
!hourly ||
!Array.isArray(daily.temperature_2m_max) ||
!Array.isArray(daily.temperature_2m_min) ||
!Array.isArray(daily.weather_code) ||
!Array.isArray(hourly.time) ||
!Array.isArray(hourly.temperature_2m) ||
daily.temperature_2m_max.length === 0 ||
daily.temperature_2m_min.length === 0 ||
daily.weather_code.length === 0
) {
throw new Error("Weather data could not be loaded.");
}
const max = Number(daily.temperature_2m_max[0]);
const min = Number(daily.temperature_2m_min[0]);
const code = Number(daily.weather_code[0]);
if (![max, min, code].every(Number.isFinite)) {
throw new Error("Weather data could not be loaded.");
}
const info = weatherInfo(code);
renderIcon(info.theme);
const hourlyTimes = [];
const hourlyTemps = [];
for (let i = 0; i < hourly.time.length; i++) {
const t = String(hourly.time[i] || "");
if (t.slice(0, 10) === params.date) {
hourlyTimes.push(t);
hourlyTemps.push(Number(hourly.temperature_2m[i]));
}
}
if (!hourlyTimes.length) {
throw new Error("Weather data could not be loaded.");
}
el.conditionText.textContent = info.label;
el.tempMain.innerHTML = Math.round((max + min) / 2) + "<span>°C</span>";
el.tempMax.textContent = formatTemp(max);
el.tempMin.textContent = formatTemp(min);
buildChart(hourlyTimes, hourlyTemps);
el.app.classList.add("is-loaded");
setStatus("", "", false);
}
function fail(message) {
el.app.classList.add("is-loaded");
el.conditionText.textContent = "Data unavailable";
el.tempMain.innerHTML = "--<span>°C</span>";
el.tempMax.textContent = "--\u00B0C";
el.tempMin.textContent = "--\u00B0C";
el.sourceText.textContent = "Unavailable";
el.hourlyChart.innerHTML = "";
el.hoursCount.textContent = "0 points";
el.rangeLabel.textContent = "Range: --\u00B0C to --\u00B0C";
renderIcon("cloudy");
setStatus("Weather data could not be loaded", message || "The requested data is unavailable right now.", true);
}
load().catch(function () {
fail("The page could not load weather data for the selected location and date.");
});
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 33,254 | html / css / js | 3,218 / 11,325 / 18,711 |
|---|---|---|---|
| dom nodes | 59 | dom depth | 12 |
| css rules | 62 | js present | yes |
| brightness | 43.5 | contrast | 30.8 |
| colorfulness | 24.3 | whitespace | 67.9% |
This slot's telemetry
| prompt tokens | 16,076 | completion tokens | 9,974 |
|---|---|---|---|
| total tokens | 26,050 | wall | 79.9 s |
| cost | — | request id | — |
config.json565 B
{
"N": 2,
"auth": {
"credential_ref": "WCB_NONE",
"method": "oauth-login"
},
"billing": "plan",
"config_id": "gpt-5.4-eff-medium--cli--cursor-xl--dev",
"effort": "medium",
"family": "gpt",
"m": {
"min": 2,
"q": 2
},
"model_id": "gpt-5.4",
"protocol": "cli",
"served_model": "gpt-5.4-medium",
"telemetry": {
"completion_tokens": 29926,
"cost_usd": null,
"prompt_tokens": 48504,
"total_tokens": 78430,
"wall_ms": 310122
},
"transport": "cursor-agent-cli-isolated-home",
"vendor_sanction_ref": null
}send-log2.5 KB
{
"N": 2,
"batch_id": "2026-08-13--cursor-xl-s0",
"config_id": "gpt-5.4-eff-medium--cli--cursor-xl--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-08-13T14:46:05.250382+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T14:45:29.798133+00:00"
}
],
"block_index": 0,
"model_reaching_attempt_index": 0,
"slot_index": 0,
"terminal_state": "valid",
"variant": "P-min"
},
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-08-13T14:47:28.632207+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T14:46:08.694659+00:00"
}
],
"block_index": 0,
"model_reaching_attempt_index": 0,
"slot_index": 0,
"terminal_state": "valid",
"variant": "P-q"
},
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-08-13T14:49:50.417918+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T14:47:32.337847+00:00"
}
],
"block_index": 1,
"model_reaching_attempt_index": 0,
"slot_index": 1,
"terminal_state": "valid",
"variant": "P-q"
},
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-08-13T14:50:52.013818+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T14:49:55.351413+00:00"
}
],
"block_index": 1,
"model_reaching_attempt_index": 0,
"slot_index": 1,
"terminal_state": "valid",
"variant": "P-min"
}
],
"retry_policy": {
"max_unreachable_retries": 5,
"rate_limit_backoff": {
"max_attempts": 4,
"max_total_ms": 60000
}
}
}