lrdlg
148 lines
4.3 KiB
HTML
148 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
<title>Espace de travail — Johanne</title>
|
|
<style>
|
|
:root{
|
|
--bg:#0f1117;
|
|
--card:#1a1d27;
|
|
--card-hover:#222634;
|
|
--accent:#6c8cff;
|
|
--accent-soft:rgba(108,140,255,0.15);
|
|
--text:#e8eaf0;
|
|
--muted:#9aa0b4;
|
|
--border:rgba(255,255,255,0.08);
|
|
--shadow:0 20px 50px rgba(0,0,0,0.4);
|
|
}
|
|
@media (prefers-color-scheme: light){
|
|
:root:not([data-theme="dark"]){
|
|
--bg:#f4f6fb;
|
|
--card:#ffffff;
|
|
--card-hover:#ffffff;
|
|
--accent:#3d5cff;
|
|
--accent-soft:rgba(61,92,255,0.1);
|
|
--text:#1a1d27;
|
|
--muted:#5c6377;
|
|
--border:rgba(0,0,0,0.08);
|
|
--shadow:0 20px 50px rgba(60,80,160,0.12);
|
|
}
|
|
}
|
|
*{box-sizing:border-box;margin:0;padding:0}
|
|
body{
|
|
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
|
|
background:var(--bg);
|
|
color:var(--text);
|
|
min-height:100vh;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
padding:24px;
|
|
-webkit-font-smoothing:antialiased;
|
|
}
|
|
body::before{
|
|
content:"";
|
|
position:fixed;
|
|
inset:0;
|
|
background:
|
|
radial-gradient(circle at 20% 20%, var(--accent-soft), transparent 40%),
|
|
radial-gradient(circle at 80% 80%, var(--accent-soft), transparent 40%);
|
|
pointer-events:none;
|
|
z-index:0;
|
|
}
|
|
.wrap{position:relative;z-index:1;width:100%;max-width:760px}
|
|
|
|
.header{text-align:center;margin-bottom:40px}
|
|
.header h1{font-size:1.8rem;margin-bottom:8px}
|
|
.header p{color:var(--muted);font-size:1rem}
|
|
|
|
.grid{
|
|
display:grid;
|
|
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
|
|
gap:24px;
|
|
}
|
|
.tile{
|
|
background:var(--card);
|
|
border:1px solid var(--border);
|
|
border-radius:20px;
|
|
padding:32px 24px;
|
|
text-decoration:none;
|
|
color:var(--text);
|
|
display:flex;
|
|
flex-direction:column;
|
|
align-items:center;
|
|
gap:18px;
|
|
box-shadow:var(--shadow);
|
|
transition:transform .15s ease, background .2s ease, border-color .2s ease;
|
|
}
|
|
.tile:hover{
|
|
transform:translateY(-4px);
|
|
background:var(--card-hover);
|
|
border-color:var(--accent);
|
|
}
|
|
.tile .icon{
|
|
width:96px;height:96px;
|
|
border-radius:24px;
|
|
display:flex;align-items:center;justify-content:center;
|
|
background:var(--accent-soft);
|
|
}
|
|
.tile .icon svg{width:52px;height:52px}
|
|
.tile .title{font-size:1.25rem;font-weight:600}
|
|
.tile .subtitle{font-size:0.9rem;color:var(--muted);text-align:center;margin-top:-8px}
|
|
|
|
.footer{
|
|
text-align:center;
|
|
margin-top:48px;
|
|
color:var(--muted);
|
|
font-size:0.85rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
|
|
<div class="header">
|
|
<h1>Bonjour Johanne 👋</h1>
|
|
<p>Tes environnements de développement et de statistiques</p>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<!-- RStudio -->
|
|
<a class="tile" href="https://rstudio.lemmensjohanne.be" target="_blank" rel="noopener">
|
|
<div class="icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="#75AADB" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M3 3v18h18"></path>
|
|
<path d="M7 14l3-4 3 3 4-6"></path>
|
|
<circle cx="7" cy="14" r="1.2" fill="#75AADB"></circle>
|
|
<circle cx="10" cy="10" r="1.2" fill="#75AADB"></circle>
|
|
<circle cx="13" cy="13" r="1.2" fill="#75AADB"></circle>
|
|
<circle cx="17" cy="7" r="1.2" fill="#75AADB"></circle>
|
|
</svg>
|
|
</div>
|
|
<div class="title">RStudio</div>
|
|
<div class="subtitle">Programmation R & statistiques</div>
|
|
</a>
|
|
|
|
<!-- code-server / VS Code -->
|
|
<a class="tile" href="https://code.lemmensjohanne.be" target="_blank" rel="noopener">
|
|
<div class="icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="#4EC9B0" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="8 8 4 12 8 16"></polyline>
|
|
<polyline points="16 8 20 12 16 16"></polyline>
|
|
<line x1="13" y1="6" x2="11" y2="18"></line>
|
|
</svg>
|
|
</div>
|
|
<div class="title">VS Code</div>
|
|
<div class="subtitle">Python & calcul scientifique</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<p>lemmensjohanne.be — espace personnel</p>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|