diff --git a/web/README.md b/web/README.md new file mode 100644 index 0000000..d14e5d4 --- /dev/null +++ b/web/README.md @@ -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 | +|---------------------|-----------------------------------------| +| `` | IP publique du serveur de jeu | +| `` | https://discord.gg/XXXXXXX | +| `` | 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. diff --git a/web/css/style.css b/web/css/style.css new file mode 100644 index 0000000..7e494f3 --- /dev/null +++ b/web/css/style.css @@ -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; } +} diff --git a/web/img/favicon.png b/web/img/favicon.png new file mode 100644 index 0000000..4acb933 --- /dev/null +++ b/web/img/favicon.png @@ -0,0 +1 @@ +PNG placeholder - replace with converted favicon \ No newline at end of file diff --git a/web/img/logo.svg b/web/img/logo.svg new file mode 100644 index 0000000..bfd1c03 --- /dev/null +++ b/web/img/logo.svg @@ -0,0 +1,16 @@ + + DauphinCraft + + + + + + + + + + + + + + diff --git a/web/img/screenshot_menu.png b/web/img/screenshot_menu.png new file mode 100644 index 0000000..29b4498 Binary files /dev/null and b/web/img/screenshot_menu.png differ diff --git a/web/index.html b/web/index.html new file mode 100644 index 0000000..83d9551 --- /dev/null +++ b/web/index.html @@ -0,0 +1,267 @@ + + + + + + + DauphinCraft + + + + + + + +
+ + + +
+ +
+ + +
+ +
+ +

DauphinCraft

+

Un monde voxel sous l'océan.
Multijoueur. Libre.

+
+ + + Télécharger v0.1 (Windows) + + + Rejoindre le Discord Labo + +
+

Gratuit · Open-source · Godot 4

+
+ +
+ + +
+
+

Aperçu

+
+
+ Menu principal de DauphinCraft +
Menu principal
+
+
+
+ + Exploration — bientôt +
+
+
+
+ + Multijoueur — bientôt +
+
+
+
+
+ + +
+
+

Fonctionnalités

+
+ +
+ +

Monde voxel infini

+

Génération procédurale de l'océan — coraux, abysses, grottes sous-marines.

+
+ +
+ +

Tu es le dauphin

+

Caméra 3e personne, nage fluide, écholocation active pour scanner l'environnement.

+
+ +
+ +

Multijoueur 16 joueurs

+

Serveur dédié, protocole ENet UDP sur le port 7777. Héberge ou rejoins.

+
+ +
+ +

Craft sous-marin

+

5 recettes : lampes biolumin., torpilles, armure nacre, filet, balise.

+
+ +
+ +

Mobs vivants

+

Bancs de poissons, méduses, requins marteaux — IA collective Boids.

+
+ +
+ +

Libre & gratuit

+

Assets CC0, code source disponible. Forke, modifie, redistribue.

+
+ +
+
+
+ + +
+
+

Télécharger

+
+
+ +

Client Windows

+

Version 0.1 — Windows 64-bit

+ + + DauphinCraft-v0.1-win64.zip + +
+
+ +

Serveur dédié

+

Headless Linux — héberge ta propre partie

+ + + DauphinCraft-Server-v0.1.tar.gz + +
+
+
+
+ + +
+
+

Serveur public

+

Rejoins directement la partie en cours — aucune config requise.

+
+
+ <SERVER_IP>:7777 + +
+

Dans le jeu : Multijoueur → Rejoindre → coller l'adresse

+
+ + Rejoindre #dauphincraft sur Discord + +
+
+ + +
+
+

Héberge ton serveur

+
+
    +
  1. Télécharge le serveur dédié (tar.gz ci-dessus)
    2. +
  2. Décompresse : tar xzf DauphinCraft-Server-v0.1.tar.gz
    3. +
  3. Lance : ./DauphinCraft-Server --headless
    4. +
  4. Ouvre le port UDP 7777 sur ton firewall
    5. +
+
+ Serveur Linux + Doc admin Sphinx +
+
+
+
+ +
+ + + + + + + diff --git a/web/js/main.js b/web/js/main.js new file mode 100644 index 0000000..09cdf11 --- /dev/null +++ b/web/js/main.js @@ -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; + }); +});