floppyrj45/dauphincraft
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

web: landing page vanilla HTML/CSS/JS avec ambiance sous-marine

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Floppyrj45
2026-04-19 17:57:25 +02:00
parent a12ec18027
commit 9429360966
7 changed files with 926 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
web/README.md Normal file
View File

@@ -0,0 +1,82 @@
# DauphinCraft — Landing Page
Landing page statique vanilla HTML/CSS/JS. Aucune dépendance externe.
## Déploiement nginx
### 1. Copier les fichiers
```bash
sudo cp -r web/* /var/www/dauphincraft/
sudo chown -R www-data:www-data /var/www/dauphincraft/
```
### 2. Lier le dossier releases
```bash
sudo mkdir -p /var/www/dauphincraft/releases
# Symlink vers tes builds ou copie directe :
sudo ln -s /opt/dauphincraft/releases /var/www/dauphincraft/releases
```
Fichiers attendus dans `releases/` :
- `DauphinCraft-v0.1-win64.zip`
- `DauphinCraft-Server-v0.1.tar.gz`
### 3. Config nginx
```nginx
server {
listen 80;
server_name dauphincraft.example.com;
root /var/www/dauphincraft;
index index.html;
location / {
try_files $uri $uri/ =404;
}
# Cache assets longs
location ~* \.(css|js|svg|png|ico|woff2)$ {
expires 30d;
add_header Cache-Control "public, immutable";
}
# Pas de logs sur favicon
location = /favicon.png { log_not_found off; access_log off; }
# Gzip
gzip on;
gzip_types text/css application/javascript image/svg+xml;
}
```
### 4. Reload
```bash
sudo nginx -t && sudo systemctl reload nginx
```
### 5. HTTPS (Let's Encrypt — optionnel)
```bash
sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d dauphincraft.example.com
```
## Placeholders à remplacer dans index.html
| Placeholder | Valeur |
|---------------------|-----------------------------------------|
| `<SERVER_IP>` | IP publique du serveur de jeu |
| `<DISCORD_INVITE>` | https://discord.gg/XXXXXXX |
| `<GITEA_URL>` | https://gitea.example.com |
## Screenshots
Ajouter dans `img/` :
- `screenshot_menu.png` — déjà copié depuis `builds/`
- `screenshot_ingame.png` — capture en jeu (exploration)
- `screenshot_multi.png` — capture multijoueur
Mettre à jour `index.html` section `.screenshots-grid` pour retirer les placeholders.

528
web/css/style.css Normal file
View File

@@ -0,0 +1,528 @@
/* ============================================================
DauphinCraft — Landing Page Styles
Palette: #051628 bg / #0b3d5c mid / #4fc3f7 accent / #e0e8f0 text
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg-deep: #051628;
--bg-mid: #0b3d5c;
--bg-surface: #0d2d47;
--accent: #4fc3f7;
--accent-dim: #29b6f6;
--text: #e0e8f0;
--text-muted: #8db8cc;
--border: rgba(79, 195, 247, 0.2);
--card-bg: rgba(11, 61, 92, 0.5);
--radius: 12px;
--transition: 0.25s ease;
}
html { scroll-behavior: smooth; }
body {
font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
background: var(--bg-deep);
color: var(--text);
line-height: 1.6;
overflow-x: hidden;
}
a { color: var(--accent); text-decoration: none; transition: opacity var(--transition); }
a:hover { opacity: 0.8; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
img { max-width: 100%; display: block; }
code {
font-family: 'Consolas', 'Fira Code', monospace;
background: rgba(79, 195, 247, 0.1);
padding: 0.15em 0.5em;
border-radius: 4px;
font-size: 0.9em;
color: var(--accent);
}
.container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }
/* ============================================================
BUTTONS
============================================================ */
.btn {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.75rem 1.75rem;
border-radius: 8px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
text-decoration: none;
border: none;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary {
background: var(--accent);
color: var(--bg-deep);
box-shadow: 0 4px 20px rgba(79, 195, 247, 0.35);
}
.btn-primary:hover { box-shadow: 0 6px 28px rgba(79, 195, 247, 0.5); opacity: 1; }
.btn-secondary {
background: transparent;
color: var(--accent);
border: 2px solid var(--accent);
}
.btn-secondary:hover { background: rgba(79, 195, 247, 0.1); opacity: 1; }
.btn-ghost {
background: transparent;
color: var(--text-muted);
border: 1px solid var(--border);
}
.btn-ghost:hover { color: var(--accent); border-color: var(--accent); opacity: 1; }
/* ============================================================
HEADER / NAV
============================================================ */
.nav-toggle { display: none; }
.site-header {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 0.9rem 1.5rem;
background: rgba(5, 22, 40, 0.85);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
.header-logo {
display: flex; align-items: center; gap: 0.6rem;
font-weight: 700; font-size: 1.15rem;
color: var(--text); text-decoration: none;
}
.header-logo:hover { opacity: 0.85; }
.nav-links {
display: flex; gap: 0.25rem; list-style: none;
}
.nav-links a {
color: var(--text-muted);
font-size: 0.9rem;
padding: 0.4rem 0.75rem;
border-radius: 6px;
transition: color var(--transition), background var(--transition);
}
.nav-links a:hover { color: var(--text); background: rgba(79, 195, 247, 0.1); opacity: 1; }
.burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.burger span {
display: block; width: 24px; height: 2px;
background: var(--text);
border-radius: 2px;
transition: transform var(--transition), opacity var(--transition);
}
/* ============================================================
HERO
============================================================ */
.hero {
position: relative;
min-height: 100vh;
display: flex; align-items: center; justify-content: center;
text-align: center;
overflow: hidden;
background: linear-gradient(160deg, var(--bg-deep) 0%, #072540 40%, var(--bg-mid) 100%);
padding: 7rem 1.5rem 4rem;
}
/* Water ripple background */
.hero::before {
content: '';
position: absolute; inset: 0; z-index: 0;
background:
radial-gradient(ellipse 80% 40% at 50% 110%, rgba(79,195,247,0.08) 0%, transparent 70%),
radial-gradient(ellipse 50% 30% at 20% 80%, rgba(41,182,246,0.05) 0%, transparent 60%);
animation: ripple 8s ease-in-out infinite alternate;
}
@keyframes ripple {
0% { transform: scaleY(1) translateY(0); opacity: 1; }
50% { transform: scaleY(1.04) translateY(-8px); opacity: 0.85; }
100% { transform: scaleY(0.97) translateY(4px); opacity: 1; }
}
/* Particles */
.particles { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.particle {
position: absolute;
width: 3px; height: 3px;
background: var(--accent);
border-radius: 50%;
opacity: 0;
animation: drift 12s ease-in-out infinite;
}
@keyframes drift {
0% { opacity: 0; transform: translateY(0) translateX(0); }
10% { opacity: 0.6; }
90% { opacity: 0.3; }
100% { opacity: 0; transform: translateY(-120px) translateX(20px); }
}
.p1 { left: 10%; top: 70%; animation-delay: 0s; animation-duration: 14s; }
.p2 { left: 25%; top: 80%; animation-delay: 1.5s; animation-duration: 11s; width: 2px; height: 2px; }
.p3 { left: 40%; top: 65%; animation-delay: 3s; animation-duration: 16s; width: 4px; height: 4px; opacity: 0.4; }
.p4 { left: 55%; top: 75%; animation-delay: 0.7s; animation-duration: 13s; }
.p5 { left: 70%; top: 85%; animation-delay: 2s; animation-duration: 15s; width: 2px; height: 2px; }
.p6 { left: 82%; top: 60%; animation-delay: 4s; animation-duration: 12s; }
.p7 { left: 15%; top: 55%; animation-delay: 5s; animation-duration: 17s; width: 2px; height: 2px; }
.p8 { left: 60%; top: 50%; animation-delay: 1s; animation-duration: 10s; }
.p9 { left: 88%; top: 78%; animation-delay: 6s; animation-duration: 14s; width: 4px; height: 4px; }
.p10 { left: 33%; top: 90%; animation-delay: 2.5s; animation-duration: 18s; }
.bubble {
position: absolute;
border: 1px solid rgba(79, 195, 247, 0.3);
border-radius: 50%;
opacity: 0;
animation: bubble-rise 10s ease-in infinite;
}
@keyframes bubble-rise {
0% { opacity: 0; transform: translateY(0); }
15% { opacity: 0.5; }
85% { opacity: 0.2; }
100% { opacity: 0; transform: translateY(-200px); }
}
.b1 { width: 12px; height: 12px; left: 18%; top: 85%; animation-delay: 0s; }
.b2 { width: 8px; height: 8px; left: 45%; top: 90%; animation-delay: 2.5s; }
.b3 { width: 16px; height: 16px; left: 68%; top: 80%; animation-delay: 5s; }
.b4 { width: 6px; height: 6px; left: 30%; top: 92%; animation-delay: 7s; }
.b5 { width: 10px; height: 10px; left: 80%; top: 88%; animation-delay: 3.5s; }
.hero-content {
position: relative; z-index: 2;
max-width: 700px;
}
.hero-logo { margin-bottom: 1.5rem; display: flex; justify-content: center; }
.hero-logo img { filter: drop-shadow(0 0 24px rgba(79,195,247,0.5)); }
h1 {
font-size: clamp(3rem, 8vw, 6rem);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1;
color: var(--text);
text-shadow: 0 0 40px rgba(79,195,247,0.3);
margin-bottom: 1rem;
}
.tagline {
font-size: clamp(1.1rem, 3vw, 1.4rem);
color: var(--text-muted);
margin-bottom: 2.5rem;
line-height: 1.5;
}
.hero-actions {
display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
margin-bottom: 1.5rem;
}
.hero-note {
font-size: 0.85rem; color: var(--text-muted);
letter-spacing: 0.05em;
text-transform: uppercase;
}
.hero-scroll-hint {
position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
z-index: 2;
}
.scroll-arrow {
display: block; width: 20px; height: 20px;
border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
transform: rotate(45deg);
opacity: 0.5;
animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
0%, 100% { transform: rotate(45deg) translateY(0); }
50% { transform: rotate(45deg) translateY(6px); }
}
/* ============================================================
SECTIONS SHARED
============================================================ */
section { padding: 5rem 0; }
section h2 {
font-size: clamp(1.8rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 2.5rem;
text-align: center;
color: var(--text);
}
section h2::after {
content: '';
display: block; width: 48px; height: 3px;
background: var(--accent); border-radius: 2px;
margin: 0.6rem auto 0;
}
/* Fade-in via IntersectionObserver */
.fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-in.visible { opacity: 1; transform: none; }
/* ============================================================
SCREENSHOTS
============================================================ */
.screenshots { background: var(--bg-surface); }
.screenshots-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.screenshots-grid figure {
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--border);
background: var(--card-bg);
}
.screenshots-grid img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
transition: transform 0.4s ease;
}
.screenshots-grid figure:hover img { transform: scale(1.04); }
figcaption {
padding: 0.6rem 0.9rem;
font-size: 0.85rem;
color: var(--text-muted);
text-align: center;
}
.screenshot-placeholder {
aspect-ratio: 16/9;
}
.placeholder-inner {
display: flex; flex-direction: column; align-items: center; justify-content: center;
height: 100%; min-height: 160px; gap: 0.75rem;
color: var(--text-muted); font-size: 0.9rem;
padding: 1rem;
}
/* ============================================================
FEATURES
============================================================ */
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.feature-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.75rem 1.5rem;
transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.feature-card:hover {
border-color: var(--accent);
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(79,195,247,0.12);
}
.feature-icon {
width: 48px; height: 48px;
background: rgba(79, 195, 247, 0.12);
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 1rem;
color: var(--accent);
}
.feature-icon svg { width: 24px; height: 24px; }
.feature-card h3 {
font-size: 1.05rem; font-weight: 700;
margin-bottom: 0.5rem; color: var(--text);
}
.feature-card p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; }
/* ============================================================
DOWNLOAD
============================================================ */
.download { background: var(--bg-surface); }
.download-cards {
display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
max-width: 700px; margin: 0 auto;
}
.download-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 2rem 1.75rem;
text-align: center;
transition: border-color var(--transition);
}
.download-card:hover { border-color: var(--accent); }
.download-icon { color: var(--accent); margin: 0 auto 1rem; opacity: 0.8; }
.download-card h3 { margin-bottom: 0.4rem; }
.download-card p { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.25rem; }
/* ============================================================
JOIN SERVER
============================================================ */
.join { text-align: center; }
.join .container { display: flex; flex-direction: column; align-items: center; }
.join-sub { color: var(--text-muted); margin-bottom: 2rem; font-size: 1.05rem; }
.server-connect {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.5rem 2rem;
max-width: 480px; width: 100%;
}
.server-address {
display: flex; align-items: center; justify-content: center; gap: 0.75rem;
margin-bottom: 0.75rem;
}
.server-address code { font-size: 1.1rem; }
.btn-copy {
display: inline-flex; align-items: center; gap: 0.4rem;
background: rgba(79, 195, 247, 0.1);
border: 1px solid var(--border);
color: var(--accent);
padding: 0.4rem 0.9rem;
border-radius: 6px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: background var(--transition);
}
.btn-copy:hover { background: rgba(79, 195, 247, 0.2); }
.btn-copy.copied { background: rgba(79,195,247,0.25); }
.server-hint { font-size: 0.88rem; color: var(--text-muted); }
/* ============================================================
SELF-HOST
============================================================ */
.selfhost { background: var(--bg-surface); }
.selfhost-steps {
display: flex; align-items: flex-start; gap: 3rem;
max-width: 700px; margin: 0 auto;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 2rem;
}
.selfhost-steps ol {
flex: 1;
padding-left: 1.25rem;
color: var(--text-muted);
font-size: 0.95rem;
line-height: 2;
}
.selfhost-steps ol li code { font-size: 0.82rem; }
.selfhost-links {
display: flex; flex-direction: column; gap: 0.75rem;
flex-shrink: 0;
}
/* ============================================================
FOOTER
============================================================ */
.site-footer {
background: var(--bg-deep);
border-top: 1px solid var(--border);
padding: 3rem 0 1.5rem;
}
.footer-grid {
display: grid; grid-template-columns: auto 1fr auto;
gap: 2rem; align-items: start;
margin-bottom: 2rem;
}
.footer-brand {
display: flex; align-items: center; gap: 0.5rem;
font-weight: 700; color: var(--text); font-size: 1.1rem;
}
.site-footer nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.site-footer nav ul li a { color: var(--text-muted); font-size: 0.9rem; }
.site-footer nav ul li a:hover { color: var(--accent); opacity: 1; }
.footer-credits { text-align: right; }
.footer-credits p { font-size: 0.8rem; color: var(--text-muted); line-height: 1.9; }
.footer-bottom {
text-align: center; font-size: 0.8rem; color: var(--text-muted);
padding-top: 1.5rem; border-top: 1px solid var(--border);
}
/* ============================================================
MOBILE — NAV BURGER (CSS-only)
============================================================ */
@media (max-width: 768px) {
.burger { display: flex; }
.nav-links {
position: fixed; top: 0; right: -100%; bottom: 0;
width: min(280px, 80vw);
background: rgba(5, 22, 40, 0.97);
backdrop-filter: blur(16px);
flex-direction: column; justify-content: center; align-items: center;
gap: 0.5rem;
transition: right 0.3s ease;
border-left: 1px solid var(--border);
z-index: 200;
}
.nav-toggle:checked ~ header .nav-links { right: 0; }
.nav-toggle:checked ~ header .burger span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle:checked ~ header .burger span:nth-child(2) { opacity: 0; }
.nav-toggle:checked ~ header .burger span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
.nav-links a { font-size: 1.1rem; padding: 0.6rem 1.25rem; }
/* Grids → single column */
.features-grid,
.screenshots-grid { grid-template-columns: 1fr; }
.download-cards { grid-template-columns: 1fr; }
.selfhost-steps { flex-direction: column; gap: 1.5rem; }
.selfhost-links { flex-direction: row; flex-wrap: wrap; }
.footer-grid { grid-template-columns: 1fr; text-align: center; }
.footer-credits { text-align: center; }
.server-address { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 480px) {
.hero-actions { flex-direction: column; align-items: center; }
.hero-actions .btn { width: 100%; max-width: 320px; justify-content: center; }
section { padding: 3.5rem 0; }
}

1
web/img/favicon.png Normal file
View File

@@ -0,0 +1 @@
PNG placeholder - replace with converted favicon

16
web/img/logo.svg Normal file
View File

@@ -0,0 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
<title>DauphinCraft</title>
<!-- Body -->
<path d="M18 52 Q35 30 62 38 Q80 43 85 50 Q80 57 62 62 Q35 70 18 52 Z" fill="#4fc3f7"/>
<!-- Dorsal fin -->
<path d="M48 38 Q52 22 60 28 Q58 35 62 38 Z" fill="#4fc3f7"/>
<!-- Tail -->
<path d="M18 52 Q8 42 4 36 Q12 44 14 52 Q12 60 4 68 Q8 62 18 52 Z" fill="#4fc3f7"/>
<!-- Eye -->
<circle cx="72" cy="48" r="3" fill="#051628"/>
<circle cx="73" cy="47" r="1" fill="#b3e5fc"/>
<!-- Mouth curve -->
<path d="M80 52 Q83 55 85 52" stroke="#051628" stroke-width="1.5" fill="none" stroke-linecap="round"/>
<!-- Pectoral fin -->
<path d="M55 58 Q48 70 42 65 Q50 62 55 52 Z" fill="#29b6f6" opacity="0.8"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 762 B

BIN
web/img/screenshot_menu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 170 KiB

267
web/index.html Normal file
View File

@@ -0,0 +1,267 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="DauphinCraft — Un monde voxel sous l'océan. Multijoueur. Libre.">
<title>DauphinCraft</title>
<link rel="icon" type="image/png" href="img/favicon.png">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- NAV -->
<input type="checkbox" id="nav-toggle" class="nav-toggle" aria-hidden="true">
<header class="site-header">
<a href="#" class="header-logo" aria-label="DauphinCraft accueil">
<img src="img/logo.svg" alt="Logo DauphinCraft" width="40" height="40">
<span>DauphinCraft</span>
</a>
<nav aria-label="Navigation principale">
<ul class="nav-links">
<li><a href="#features">Fonctionnalités</a></li>
<li><a href="#screenshots">Screenshots</a></li>
<li><a href="#download">Télécharger</a></li>
<li><a href="#join">Serveur</a></li>
<li><a href="<DISCORD_INVITE>" target="_blank" rel="noopener">Discord</a></li>
<li><a href="<GITEA_URL>/dauphincraft" target="_blank" rel="noopener">Source</a></li>
</ul>
</nav>
<label for="nav-toggle" class="burger" aria-label="Menu">
<span></span><span></span><span></span>
</label>
</header>
<main>
<!-- HERO -->
<section class="hero" aria-label="Présentation du jeu">
<div class="particles" aria-hidden="true">
<span class="particle p1"></span>
<span class="particle p2"></span>
<span class="particle p3"></span>
<span class="particle p4"></span>
<span class="particle p5"></span>
<span class="particle p6"></span>
<span class="particle p7"></span>
<span class="particle p8"></span>
<span class="particle p9"></span>
<span class="particle p10"></span>
<span class="bubble b1"></span>
<span class="bubble b2"></span>
<span class="bubble b3"></span>
<span class="bubble b4"></span>
<span class="bubble b5"></span>
</div>
<div class="hero-content">
<div class="hero-logo" aria-hidden="true">
<img src="img/logo.svg" alt="" width="90" height="90">
</div>
<h1>DauphinCraft</h1>
<p class="tagline">Un monde voxel sous l'océan.<br>Multijoueur. Libre.</p>
<div class="hero-actions">
<a href="releases/DauphinCraft-v0.1-win64.zip" class="btn btn-primary" download>
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M12 16l-6-6h4V4h4v6h4l-6 6zm-7 4h14v-2H5v2z"/>
</svg>
Télécharger v0.1 (Windows)
</a>
<a href="<DISCORD_INVITE>" target="_blank" rel="noopener" class="btn btn-secondary">
Rejoindre le Discord Labo
</a>
</div>
<p class="hero-note">Gratuit · Open-source · Godot 4</p>
</div>
<div class="hero-scroll-hint" aria-hidden="true">
<span class="scroll-arrow"></span>
</div>
</section>
<!-- SCREENSHOTS -->
<section class="screenshots fade-in" id="screenshots" aria-label="Captures d'écran du jeu">
<div class="container">
<h2>Aperçu</h2>
<div class="screenshots-grid">
<figure>
<img src="img/screenshot_menu.png" alt="Menu principal de DauphinCraft" loading="lazy">
<figcaption>Menu principal</figcaption>
</figure>
<figure class="screenshot-placeholder">
<div class="placeholder-inner" aria-label="Screenshot en jeu — à venir">
<svg width="48" height="48" viewBox="0 0 24 24" fill="#4fc3f7" opacity="0.4" aria-hidden="true">
<path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zm-8.5-5.5l-2.5 3.01L7 14l-3 4h16l-5-6.51z"/>
</svg>
<span>Exploration — bientôt</span>
</div>
</figure>
<figure class="screenshot-placeholder">
<div class="placeholder-inner" aria-label="Screenshot multijoueur — à venir">
<svg width="48" height="48" viewBox="0 0 24 24" fill="#4fc3f7" opacity="0.4" aria-hidden="true">
<path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zm-8.5-5.5l-2.5 3.01L7 14l-3 4h16l-5-6.51z"/>
</svg>
<span>Multijoueur — bientôt</span>
</div>
</figure>
</div>
</div>
</section>
<!-- FEATURES -->
<section class="features fade-in" id="features" aria-label="Fonctionnalités du jeu">
<div class="container">
<h2>Fonctionnalités</h2>
<div class="features-grid">
<article class="feature-card">
<div class="feature-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/></svg>
</div>
<h3>Monde voxel infini</h3>
<p>Génération procédurale de l'océan — coraux, abysses, grottes sous-marines.</p>
</article>
<article class="feature-card">
<div class="feature-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z"/></svg>
</div>
<h3>Tu es le dauphin</h3>
<p>Caméra 3e personne, nage fluide, écholocation active pour scanner l'environnement.</p>
</article>
<article class="feature-card">
<div class="feature-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
</div>
<h3>Multijoueur 16 joueurs</h3>
<p>Serveur dédié, protocole ENet UDP sur le port 7777. Héberge ou rejoins.</p>
</article>
<article class="feature-card">
<div class="feature-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/></svg>
</div>
<h3>Craft sous-marin</h3>
<p>5 recettes : lampes biolumin., torpilles, armure nacre, filet, balise.</p>
</article>
<article class="feature-card">
<div class="feature-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6.5 10h-2v5h2v-5zm5 0h-2v5h2v-5zm8.5 7H2v2h18v-2zm-3.5-7h-2v5h2v-5zM11 1L2 6v2h18V6l-9-5z"/></svg>
</div>
<h3>Mobs vivants</h3>
<p>Bancs de poissons, méduses, requins marteaux — IA collective Boids.</p>
</article>
<article class="feature-card">
<div class="feature-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/></svg>
</div>
<h3>Libre &amp; gratuit</h3>
<p>Assets CC0, code source disponible. Forke, modifie, redistribue.</p>
</article>
</div>
</div>
</section>
<!-- DOWNLOAD -->
<section class="download fade-in" id="download" aria-label="Téléchargement">
<div class="container">
<h2>Télécharger</h2>
<div class="download-cards">
<div class="download-card">
<div class="download-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="currentColor" width="48" height="48"><path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801"/></svg>
</div>
<h3>Client Windows</h3>
<p>Version 0.1 — Windows 64-bit</p>
<a href="releases/DauphinCraft-v0.1-win64.zip" class="btn btn-primary" download>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 16l-6-6h4V4h4v6h4l-6 6zm-7 4h14v-2H5v2z"/></svg>
DauphinCraft-v0.1-win64.zip
</a>
</div>
<div class="download-card">
<div class="download-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="currentColor" width="48" height="48"><path d="M20 8H4V6h16v2zm-2-6H6v2h12V2zm4 10v8l-3-3-1.5 1.5L16 17l-1.5 1.5L13 17l-1.5 1.5L10 17l-1.5 1.5L7 17l-1.5 1.5L2 20v-8c0-1.1.9-2 2-2h16c1.1 0 2 .9 2 2z"/></svg>
</div>
<h3>Serveur dédié</h3>
<p>Headless Linux — héberge ta propre partie</p>
<a href="releases/DauphinCraft-Server-v0.1.tar.gz" class="btn btn-secondary" download>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 16l-6-6h4V4h4v6h4l-6 6zm-7 4h14v-2H5v2z"/></svg>
DauphinCraft-Server-v0.1.tar.gz
</a>
</div>
</div>
</div>
</section>
<!-- JOIN SERVER -->
<section class="join fade-in" id="join" aria-label="Rejoindre le serveur public">
<div class="container">
<h2>Serveur public</h2>
<p class="join-sub">Rejoins directement la partie en cours — aucune config requise.</p>
<div class="server-connect">
<div class="server-address" aria-label="Adresse du serveur">
<code id="server-ip">&lt;SERVER_IP&gt;:7777</code>
<button class="btn-copy" id="btn-copy" onclick="copyServerIP()" aria-label="Copier l'adresse">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>
Copier
</button>
</div>
<p class="server-hint">Dans le jeu : <strong>Multijoueur → Rejoindre → coller l'adresse</strong></p>
</div>
<a href="<DISCORD_INVITE>" target="_blank" rel="noopener" class="btn btn-secondary" style="margin-top:1.5rem">
Rejoindre #dauphincraft sur Discord
</a>
</div>
</section>
<!-- SELF-HOST -->
<section class="selfhost fade-in" id="selfhost" aria-label="Héberger son propre serveur">
<div class="container">
<h2>Héberge ton serveur</h2>
<div class="selfhost-steps">
<ol>
<li>Télécharge le serveur dédié (tar.gz ci-dessus)</li>
<li>Décompresse : <code>tar xzf DauphinCraft-Server-v0.1.tar.gz</code></li>
<li>Lance : <code>./DauphinCraft-Server --headless</code></li>
<li>Ouvre le port UDP 7777 sur ton firewall</li>
</ol>
<div class="selfhost-links">
<a href="releases/DauphinCraft-Server-v0.1.tar.gz" class="btn btn-secondary" download>Serveur Linux</a>
<a href="<GITEA_URL>/dauphincraft/wiki/admin" target="_blank" rel="noopener" class="btn btn-ghost">Doc admin Sphinx</a>
</div>
</div>
</div>
</section>
</main>
<!-- FOOTER -->
<footer class="site-footer" aria-label="Pied de page">
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<img src="img/logo.svg" alt="Logo DauphinCraft" width="32" height="32">
<span>DauphinCraft</span>
</div>
<nav aria-label="Liens footer">
<ul>
<li><a href="<GITEA_URL>/dauphincraft" target="_blank" rel="noopener">Code source (Gitea)</a></li>
<li><a href="<GITEA_URL>/dauphincraft/wiki" target="_blank" rel="noopener">Documentation Sphinx</a></li>
<li><a href="<DISCORD_INVITE>" target="_blank" rel="noopener">Discord Labo</a></li>
</ul>
</nav>
<div class="footer-credits">
<p>Assets : CC0 — <a href="https://kenney.nl" target="_blank" rel="noopener">Kenney.nl</a>, OpenGameArt</p>
<p>Code : GPL-3.0 — <a href="<GITEA_URL>/dauphincraft/blob/main/LICENSE" target="_blank" rel="noopener">Licence</a></p>
<p>Moteur : <a href="https://godotengine.org" target="_blank" rel="noopener">Godot 4</a></p>
</div>
</div>
<p class="footer-bottom">&copy; 2025 DauphinCraft Contributors — Fait avec Godot 4 &amp; passion</p>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>

32
web/js/main.js Normal file
View File

@@ -0,0 +1,32 @@
// DauphinCraft — main.js (vanilla, no deps)
// Intersection Observer — fade-in sections
const observer = new IntersectionObserver(
(entries) => entries.forEach(e => {
if (e.isIntersecting) { e.target.classList.add('visible'); observer.unobserve(e.target); }
}),
{ threshold: 0.12 }
);
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
// Copy server IP to clipboard
function copyServerIP() {
const ip = document.getElementById('server-ip').textContent;
const btn = document.getElementById('btn-copy');
if (!navigator.clipboard) { return; }
navigator.clipboard.writeText(ip).then(() => {
btn.classList.add('copied');
btn.querySelector('svg').style.display = 'none';
const original = btn.innerHTML;
btn.textContent = 'Copié !';
setTimeout(() => { btn.innerHTML = original; btn.classList.remove('copied'); }, 2000);
});
}
// Close mobile menu when a nav link is clicked
document.querySelectorAll('.nav-links a').forEach(a => {
a.addEventListener('click', () => {
const toggle = document.getElementById('nav-toggle');
if (toggle) toggle.checked = false;
});
});