added header for crocoloop

This commit is contained in:
Didictateur 2025-11-18 16:09:45 +01:00
parent e20e7d25ea
commit 616c937036

View file

@ -1,9 +1,13 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Terrarium Crocos</title>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;700&family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
<title>Crocoloop - Decosse Adrien</title>
<style>
:root{
--bg-day:#a6e3b0;
@ -13,10 +17,10 @@
--plant:#1f7a3a;
--accent:#ffe66d;
}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Arial}
body{
html{height:100%;margin:0;font-family:Inter,system-ui,Arial}
.croco-root{
display:flex;align-items:center;justify-content:center;background:var(--bg-day);transition:background 1s linear;
height:100vh;overflow:hidden;color:#042a16
min-height:100vh;overflow:hidden;color:#042a16;
}
.frame{
@ -27,22 +31,37 @@
canvas{display:block;width:100%;height:100%;background:transparent}
/* UI: left/right links preserved */
.nav {
/* UI: left/right links preserved (scoped to frame to avoid overriding site header) */
.frame .nav {
position:absolute;left:12px;top:12px;right:12px;display:flex;justify-content:space-between;pointer-events:auto;
}
.nav a{color:var(--soil);background:rgba(255,255,255,0.12);padding:8px 12px;border-radius:8px;text-decoration:none;font-weight:600}
.frame .nav a{color:var(--soil);background:rgba(255,255,255,0.12);padding:8px 12px;border-radius:8px;text-decoration:none;font-weight:600}
/* simple legend */
.legend{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,0.06);padding:8px 10px;border-radius:8px;font-size:13px}
/* simple legend (scoped to frame) */
.frame .legend{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,0.06);padding:8px 10px;border-radius:8px;font-size:13px}
/* sleeping Zs */
.zzz{font-weight:900;color:#dfefff;filter:drop-shadow(0 4px 6px rgba(0,0,0,0.4))}
</style>
</head>
<body>
<div class="frame" id="frame">
<header class="site-header">
<div class="container">
<a class="brand" href="index.html">Decosse Adrien</a>
<nav class="nav" aria-label="Main navigation">
<a href="index.html">Accueil</a>
<a href="syllabus.html">Syllabus</a>
<a href="cours/index.html">Cours</a>
<a href="riichi">Riichi</a>
<a href="croco.html">Crocoloop</a>
</nav>
</div>
</header>
<div class="croco-root">
<div class="frame" id="frame">
<div class="nav">
<a id="leftLink" href="https://perso.eleves.ens-rennes.fr/people/jules.timmerman/croco.html">&lt;= Croco</a>
<div style="display:flex;gap:10px;align-items:center;">
@ -66,6 +85,7 @@
<div id="lottieLayer" style="position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;overflow:visible;"></div>
<div class="legend" id="legend">Terrarium — Heures: <span id="timeText"></span></div>
</div>
</div>
<script>