lrdlg/portailJo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
9e465b8a6ef9ff22285ee2f837612f5353623e10
portailJo/index.html
T
lrdlg 9e465b8a6e ajout d'outils web
2026-09-23 19:04:27 +02:00

196 lines
6.2 KiB
HTML
Raw Blame History

<!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:32px 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:820px}
.header{text-align:center;margin-bottom:40px}
.header h1{font-size:1.8rem;margin-bottom:8px}
.header p{color:var(--muted);font-size:1rem}
.section-titre{
font-size:0.8rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.08em;
color:var(--muted);
margin:36px 4px 16px;
}
.section-titre:first-of-type{margin-top:0}
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
}
.tile{
background:var(--card);
border:1px solid var(--border);
border-radius:20px;
padding:28px 20px;
text-decoration:none;
color:var(--text);
display:flex;
flex-direction:column;
align-items:center;
gap:16px;
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:76px;height:76px;
border-radius:20px;
display:flex;align-items:center;justify-content:center;
background:var(--accent-soft);
}
.tile .icon svg{width:42px;height:42px}
.tile .title{font-size:1.15rem;font-weight:600}
.tile .subtitle{font-size:0.85rem;color:var(--muted);text-align:center;margin-top:-6px}
.footer{
text-align:center;
margin-top:44px;
color:var(--muted);
font-size:0.85rem;
}
</style>
</head>
<body>
<div class="wrap">
<div class="header">
<h1>Bonjour Johanne 👋</h1>
<p>Tes outils de travail, réunis au même endroit</p>
</div>
<!-- ============ DÉVELOPPEMENT & STATISTIQUES ============ -->
<div class="section-titre">Développement &amp; statistiques</div>
<div class="grid">
<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 &amp; statistiques</div>
</a>
<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 &amp; calcul scientifique</div>
</a>
</div>
<!-- ============ OUTILS DE FICHIERS ============ -->
<div class="section-titre">Outils de fichiers</div>
<div class="grid">
<a class="tile" href="https://tools.ghostinthemachine.fr/" target="_blank" rel="noopener">
<div class="icon">
<svg viewBox="0 0 24 24" fill="none" stroke="#e0982f" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
<path d="M14.5 5.5a3.5 3.5 0 0 0-4.9 4.4L3 16.5 5.5 19l6.6-6.6a3.5 3.5 0 0 0 4.4-4.9l-2.3 2.3-1.8-.4-.4-1.8z"></path>
<path d="M16 16l4 4"></path>
</svg>
</div>
<div class="title">IT-Tools</div>
<div class="subtitle">Utilitaires du quotidien</div>
</a>
<a class="tile" href="https://pdf.ghostinthemachine.fr/" target="_blank" rel="noopener">
<div class="icon">
<svg viewBox="0 0 24 24" fill="none" stroke="#d9534f" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
<path d="M7 3h7l4 4v14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"></path>
<path d="M14 3v4h4"></path>
<path d="M9 13h6M9 16.5h6"></path>
</svg>
</div>
<div class="title">Bento PDF</div>
<div class="subtitle">Manipulation de PDF</div>
</a>
<a class="tile" href="https://convert.ghostinthemachine.fr/" target="_blank" rel="noopener">
<div class="icon">
<svg viewBox="0 0 24 24" fill="none" stroke="#4f7d6a" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 8h11l-3-3M4 8l3 3"></path>
<path d="M20 16H9l3 3M20 16l-3-3"></path>
</svg>
</div>
<div class="title">Vert</div>
<div class="subtitle">Conversion de fichiers</div>
</a>
</div>
<div class="footer">
<p>lemmensjohanne.be — espace personnel</p>
</div>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink