Adriano
3cda76b4c4
Le due sezioni erano ferme al prototipo locale, più povero della piattaforma vera. Analytics ha ora l'intervallo di date, i KPI con la nota sotto il valore, la distribuzione dello score a quattro serie per fascia, le classifiche per recupero medio col numero di misurazioni e il confronto segmenti con selettore di dimensione. Sport diventa Dashboard, Sessioni con filtri atleta/periodo/sport e schede atleta con carico e tendenza. I numeri non sono più costanti scritte a mano: si calcolano dai dati nel periodo scelto. La logica sta in lib/stress-index/analytics.ts e sport.ts, coperta da test — che hanno subito trovato uno slittamento delle settimane dovuto alle date costruite in ora locale invece che in UTC. Le sessioni hanno ora ora di inizio, HR max, RPE e durata al secondo, che il prototipo non prevedeva. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
132 lines
6.5 KiB
Plaintext
132 lines
6.5 KiB
Plaintext
---
|
|
// Layout della sezione riservata Campus. Usa i token e i font del sito, ma
|
|
// non ne monta Header e Footer: la navigazione è tutta interna, con un solo
|
|
// richiamo alla home.
|
|
import '@fontsource/montserrat/400.css';
|
|
import '@fontsource/montserrat/500.css';
|
|
import '@fontsource/montserrat/600.css';
|
|
import '@fontsource/open-sans/400.css';
|
|
import '@fontsource/open-sans/600.css';
|
|
import '../styles/global.css';
|
|
import type { CampusNav } from '../lib/campus';
|
|
|
|
interface Props {
|
|
title: string;
|
|
nav: CampusNav;
|
|
currentArea?: string;
|
|
currentLesson?: string;
|
|
}
|
|
const { title, nav, currentArea, currentLesson } = Astro.props;
|
|
---
|
|
<!doctype html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>{title} — Biohacking InsanityLab</title>
|
|
<meta name="robots" content="noindex, nofollow" />
|
|
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
|
|
</head>
|
|
<body class="cp">
|
|
<input type="checkbox" id="cp-menu" class="cp-menu-toggle" hidden />
|
|
<label for="cp-menu" class="cp-menu-btn" aria-label="Apri il menu">☰ Indice</label>
|
|
|
|
<aside class="cp-side">
|
|
<a class="cp-brand" href="/campus">
|
|
<span class="eyebrow">InsanityLab</span>
|
|
Biohacking
|
|
</a>
|
|
<a class="cp-home" href="/piattaforme">Piattaforme</a>
|
|
|
|
<nav class="cp-nav">
|
|
{nav.areas.map((area) => (
|
|
<div class="cp-area" data-on={area.slug === currentArea ? '' : null}>
|
|
<a class="cp-area__link" href={`/campus/${area.slug}`} style={`--c:${area.color}`}>{area.title}</a>
|
|
{area.slug === currentArea && (
|
|
<ul class="cp-chapters">
|
|
{area.chapters.map((ch) => (
|
|
<li>
|
|
<span class="cp-ch" style={`--c:${ch.color}`}>{ch.num}. {ch.title}</span>
|
|
<ul>
|
|
{ch.lessons.map((l) => (
|
|
<li class={l.slug === currentLesson ? 'on' : undefined}>
|
|
<a href={`/campus/${area.slug}/${l.slug}`}>
|
|
<span class="cp-label">{l.label}</span> {l.titleShort}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
))}
|
|
</nav>
|
|
</aside>
|
|
|
|
<main class="cp-main"><slot /></main>
|
|
|
|
<style is:global>
|
|
body.cp { display: flex; align-items: flex-start; background: var(--c-bg); }
|
|
|
|
/* --- sidebar --- */
|
|
.cp-side {
|
|
width: 300px; flex: 0 0 300px; height: 100vh; position: sticky; top: 0; overflow-y: auto;
|
|
background: var(--c-dark); color: #cfc6bd; padding: 28px 22px 50px;
|
|
}
|
|
.cp-brand { display: block; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600;
|
|
letter-spacing: .12em; text-transform: uppercase; color: #fff; text-decoration: none; line-height: 1.1; }
|
|
.cp-brand .eyebrow { display: block; color: var(--c-accent); margin-bottom: 4px; }
|
|
.cp-home { display: inline-block; margin: 18px 0 24px; font-family: var(--font-heading); font-size: .7rem;
|
|
font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--c-accent);
|
|
text-decoration: none; border-bottom: 1px solid transparent; }
|
|
.cp-home:hover { border-bottom-color: var(--c-accent); }
|
|
|
|
.cp-nav { border-top: 1px solid rgba(255,255,255,.12); padding-top: 18px; }
|
|
.cp-area + .cp-area { margin-top: 14px; }
|
|
.cp-area__link { display: block; font-family: var(--font-heading); font-size: .82rem; font-weight: 600;
|
|
letter-spacing: .12em; text-transform: uppercase; color: #fff; text-decoration: none;
|
|
padding: 8px 10px; border-left: 3px solid var(--c); }
|
|
.cp-area__link:hover, .cp-area[data-on] .cp-area__link { background: rgba(255,255,255,.07); }
|
|
|
|
.cp-chapters { list-style: none; margin: 8px 0 0; padding: 0; }
|
|
.cp-chapters > li + li { margin-top: 12px; }
|
|
.cp-ch { display: block; font-family: var(--font-heading); font-size: .72rem; letter-spacing: .08em;
|
|
text-transform: uppercase; color: var(--c); padding-left: 12px; }
|
|
.cp-chapters ul { list-style: none; margin: 4px 0 0; padding: 0 0 0 12px; }
|
|
.cp-chapters ul a { display: block; text-decoration: none; color: #b6ada3; font-size: .85rem;
|
|
line-height: 1.35; padding: 4px 8px; }
|
|
.cp-chapters ul a:hover { color: #fff; background: rgba(255,255,255,.06); }
|
|
.cp-chapters ul li.on a { color: #fff; background: rgba(184,169,140,.22); }
|
|
.cp-label { font-family: var(--font-heading); font-size: .68rem; letter-spacing: .06em; color: var(--c-accent); }
|
|
|
|
/* --- contenuto --- */
|
|
.cp-main { flex: 1; min-width: 0; max-width: 920px; margin: 0 auto; padding: 56px 44px 100px; }
|
|
.cp-main h1 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); text-transform: none; letter-spacing: .02em; }
|
|
.cp-main h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-top: 2em; padding-bottom: .25em;
|
|
border-bottom: 1px solid #e8e4de; text-transform: none; letter-spacing: .02em; }
|
|
.cp-main h3 { font-size: 1.12rem; margin-top: 1.7em; color: var(--c-accent-dark); }
|
|
.cp-main img { margin: 22px 0; border: 1px solid #e8e4de; }
|
|
.cp-main table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: .92rem; }
|
|
.cp-main th, .cp-main td { border: 1px solid #e8e4de; padding: 8px 12px; text-align: left; vertical-align: top; }
|
|
.cp-main th { background: var(--c-bg-alt); font-family: var(--font-heading); font-weight: 600; }
|
|
.cp-main blockquote { margin: 20px 0; padding: 4px 20px; border-left: 3px solid var(--c-accent); color: #6a6a6a; }
|
|
.cp-main code { background: var(--c-bg-alt); padding: 1px 5px; font-size: .9em; }
|
|
.cp-main li { margin-bottom: .35em; }
|
|
|
|
/* --- menu mobile (solo CSS) --- */
|
|
.cp-menu-btn { display: none; }
|
|
@media (max-width: 900px) {
|
|
body.cp { display: block; }
|
|
.cp-menu-btn { display: block; position: sticky; top: 0; z-index: 20; background: var(--c-dark); color: #fff;
|
|
font-family: var(--font-heading); font-size: .75rem; font-weight: 600; letter-spacing: .18em;
|
|
text-transform: uppercase; padding: 14px 20px; cursor: pointer; }
|
|
.cp-side { display: none; width: auto; flex: none; height: auto; position: static; }
|
|
.cp-menu-toggle:checked ~ .cp-side { display: block; }
|
|
.cp-main { padding: 32px 20px 70px; }
|
|
}
|
|
</style>
|
|
</body>
|
|
</html>
|