html
Browse files<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>Espace Codage – Modèle Constructeur Complet</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
<style>
:root {
--bg: #050714;
--bg-alt: #090d1f;
--accent: #ff6b4a;
--accent-soft: rgba(255, 107, 74, 0.25);
--accent-2: #3cf2e2;
--accent-2-soft: rgba(60, 242, 226, 0.25);
--border: rgba(255, 255, 255, 0.16);
--text: #f8f9ff;
--muted: #a4accb;
--success: #28c840;
--danger: #ff4f7b;
--warning: #febc2e;
--radius-lg: 18px;
--radius-md: 12px;
--shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.6);
--code-bg: #050815;
--grid-bg: rgba(255, 255, 255, 0.05);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
min-height: 100%;
background:
radial-gradient(circle at 0% 0%, rgba(255, 107, 74, 0.28), transparent 55%),
radial-gradient(circle at 100% 100%, rgba(60, 242, 226, 0.22), transparent 55%),
radial-gradient(circle at 10% 90%, rgba(120, 90, 255, 0.25), transparent 50%),
linear-gradient(145deg, #020309, #050715 55%, #020309);
color: var(--text);
font-family: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(transparent 0 95%, rgba(255,255,255,0.05) 95%),
linear-gradient(90deg, transparent 0 95%, rgba(255,255,255,0.04) 95%);
background-size: 100% 40px, 40px 100%;
mix-blend-mode: soft-light;
opacity: 0.45;
z-index: -1;
}
main {
max-width: 1400px;
margin: 0 auto;
padding: 24px clamp(18px, 4vw, 40px) 60px;
display: grid;
gap: 28px;
}
/* Header */
header {
display: flex;
flex-direction: column;
gap: 14px;
padding: 18px 20px;
border-radius: var(--radius-lg);
background: linear-gradient(120deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
border: 1px solid rgba(255,255,255,0.12);
box-shadow: 0 20px 40px rgba(0,0,0,0.65);
backdrop-filter: blur(18px);
align-items: center;
position: relative;
overflow: hidden;
}
header::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
opacity: 0.6;
}
@media (min-width: 720px) {
header {
flex-direction: row;
justify-content: space-between;
}
}
.logo {
display: inline-flex;
align-items: center;
gap: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: 11px;
font-weight: 600;
color: var(--muted);
}
.logo-mark {
width: 28px;
height: 28px;
border-radius: 999px;
background:
conic-gradient(from 160deg, var(--accent), var(--accent-2), #785aff, var(--accent));
position: relative;
box-shadow: 0 0 0 1px rgba(255,255,255,0.4), 0 0 26px rgba(255,255,255,0.4);
animation: rotate 10s linear infinite;
}
.logo-mark::after {
content: "";
position: absolute;
width: 12px;
height: 12px;
border-radius: 3px;
border: 2px solid #050714;
top: 7px;
left: 7px;
box-shadow: 0 0 0 1px rgba(5,7,20,0.8);
background: rgba(5,7,20,0.9);
}
.header-title h1 {
font-size: clamp(22px, 3vw, 26px);
margin: 0;
letter-spacing: 0.16em;
text-transform: uppercase;
background: linear-gradient(90deg, var(--accent-2), var(--accent));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.header-title span {
display: block;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--muted);
margin-top: 4px;
}
.tagline {
font-size: 13px;
color: var(--muted);
text-align: center;
line-height: 1.6;
}
@media (min-width: 720px) {
.tagline {
text-align: right;
max-width: 340px;
}
}
/* Layout principal */
.layout {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: 28px;
}
@media (max-width: 860px) {
.layout {
grid-template-columns: minmax(0, 1fr);
}
}
/* --- Bloc Schéma Espace Codage --- */
.canvas-card {
background: radial-gradient(circle at 20% 0%, rgba(255,255,255,0.08), transparent 55%),
radial-gradient(circle at 100% 100%, rgba(60,242,226,0.18), transparent 55%),
var(--bg-alt);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
box-shadow: var(--shadow-soft);
padding: 18px 18px 22px;
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
overflow: hidden;
}
.canvas-card::after {
content: "SCHEMA · ESPACE CODAGE";
position: absolute;
right: 18px;
top: 16px;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.32);
}
.schema-title {
font-size: 15px;
letter-spacing: 0.18em;
text-transform: uppercase;
margin: 0;
color: var(--accent-2);
}
.schema-sub {
margin: 2px 0 0;
font-size: 12px;
color: var(--muted);
}
.schema-grid {
margin-top: 4px;
flex: 1;
border-radius: var(--radius-md);
background: radial-gradient(circle at 0 100%, rgba(255,255,255,0.04), transparent 55%),
radial-gradient(circle at 100% 0, rgba(255,255,255,0.04), transparent 55%),
#050713;
border: 1px solid rgba(255,255,255,0.18);
position: relative;
padding: 26px 26px 30px;
overflow: hidden;
min-height: 400px;
}
.schema-grid::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--grid-bg) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-bg) 1px, transparent 1px);
background-size: 40px 40px;
mix-blend-mode: soft-light;
opacity: 0.55;
pointer-events: none;
}
.schema-inner {
position: relative;
width: 100%;
height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
gap: 16px;
z-index: 1;
}
/* Nodes */
.node {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
min-width: 150px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.62);
background: radial-gradient(circle at 0 0, rgba(255,255,255,0.18), transparent 60%),
rgba(8, 10, 30, 0.92);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
white-space: nowrap;
color: #fff;
box-shadow: 0 10px 25px rgba(0,0,0,0.8);
transition: all 0.3s ease;
cursor: pointer;
user-select: none;
}
.node:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 14px 35px rgba(0,0,0,0.9);
border-color: rgba(255,255,255,0.9);
}
.node-main {
font-size: 12px;
letter-spacing: 0.22em;
padding-inline: 28px;
background: radial-gradient(circle at 0 0, rgba(255,107,74,0.3), transparent 60%),
rgba(8, 10, 30, 0.95);
border-color: var(--accent);
}
.row-top,
.row-bottom {
display: flex;
justify-content: center;
align-items: center;
gap: 18px;
}
.row-middle {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 16px;
align-items: center;
}
.column-center {
display: grid;
grid-template-rows: auto auto auto;
gap: 14px;
justify-items: center;
}
.row-center-middle {
display: flex;
gap: 16px;
justify-content: center;
}
/* --- Bloc Code / Description --- */
.code-card {
background: radial-gradient(circle at 100% 0, rgba(60,242,226,0.16), transparent 58%),
radial-gradient(circle at 0 100%, rgba(255,107,74,0.19), transparent 55%),
#050713;
border-radius: var(--radius-lg);
border: 1px solid var(--border);
padding: 18px 18px 20px;
box-shadow: var(--shadow-soft);
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
overflow: hidden;
}
.code-card::before {
content: "BUILDER · DESIGN PATTERN";
position: absolute;
left: 18px;
top: 16px;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.32);
}
.code-header {
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 10px;
}
.code-header h2 {
margin: 0;
font-size: 14px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
}
.code-header p {
margin: 0;
font-size: 13px;
color: var(--muted);
}
.pill-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 4px;
}
.pill {
padding: 4px 9px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.24);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255,255,255,0.72);
background: linear-gradient(120deg, rgba(255,255,255,0.06), transparent);
}
/* Editor */
.editor {
p