Adrien/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added header for crocoloop

Browse source
This commit is contained in:
Didictateur 2025-11-18 16:09:45 +01:00
parent e20e7d25ea
commit 616c937036
1 changed files with 33 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
croco.html
View file

@ -1,9 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Terrarium Crocos</title> <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> <style>
:root{ :root{
--bg-day:#a6e3b0; --bg-day:#a6e3b0;
@ -13,10 +17,10 @@
--plant:#1f7a3a; --plant:#1f7a3a;
--accent:#ffe66d; --accent:#ffe66d;
} }
html,body{height:100%;margin:0;font-family:Inter,system-ui,Arial} html{height:100%;margin:0;font-family:Inter,system-ui,Arial}
body{ .croco-root{
display:flex;align-items:center;justify-content:center;background:var(--bg-day);transition:background 1s linear; 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{ .frame{
@ -27,22 +31,37 @@
canvas{display:block;width:100%;height:100%;background:transparent} canvas{display:block;width:100%;height:100%;background:transparent}
/* UI: left/right links preserved */ /* UI: left/right links preserved (scoped to frame to avoid overriding site header) */
.nav { .frame .nav {
position:absolute;left:12px;top:12px;right:12px;display:flex;justify-content:space-between;pointer-events:auto; 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 */ /* simple legend (scoped to frame) */
.legend{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,0.06);padding:8px 10px;border-radius:8px;font-size:13px} .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 */ /* sleeping Zs */
.zzz{font-weight:900;color:#dfefff;filter:drop-shadow(0 4px 6px rgba(0,0,0,0.4))} .zzz{font-weight:900;color:#dfefff;filter:drop-shadow(0 4px 6px rgba(0,0,0,0.4))}
</style> </style>
</head> </head>
<body> <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"> <div class="nav">
<a id="leftLink" href="https://perso.eleves.ens-rennes.fr/people/jules.timmerman/croco.html">&lt;= Croco</a> <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;"> <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 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 class="legend" id="legend">Terrarium — Heures: <span id="timeText"></span></div>
</div>
</div> </div>
<script> <script>