gwadaking/radarsargasses
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: icône radar SVG (topbar + favicon) et titre Radar Sargasses Caraïbes

Browse Source 
Remplace le logo PNG par un SVG radar inline (cercles concentriques +
bras rotatif + blip) en bleu #2563eb/#60a5fa sur fond #1a1a2e.
Même SVG utilisé pour favicon.svg et le picto dans la topbar.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Gwadaking
2026-04-10 00:39:00 -04:00
parent a4d57d7961
commit 0d9c85e71b
4 changed files with 42 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Radar Sargasses 971</title> <title>Radar Sargasses Caraïbes</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Fredoka:wght@400;500;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Fredoka:wght@400;500;600&display=swap" rel="stylesheet">

13
frontend/public/favicon.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.3 KiB

After

Width:  |  Height:  |  Size: 919 B

22
frontend/src/components/Topbar/Topbar.css
View File

@@ -22,10 +22,19 @@
flex-shrink: 0; flex-shrink: 0;
} }
.topbar__logo-img { .topbar__brand-icon {
height: 44px; width: 28px;
width: auto; height: 28px;
display: block; flex-shrink: 0;
}
.topbar__brand-name {
font-family: 'Fredoka', sans-serif;
font-size: 16px;
font-weight: 600;
color: #60a5fa;
white-space: nowrap;
letter-spacing: 0.01em;
} }
/* ── Islands nav ── */ /* ── Islands nav ── */
@@ -83,6 +92,7 @@
justify-content: flex-start; justify-content: flex-start;
padding-bottom: 4px; padding-bottom: 4px;
} }
.topbar__island-btn { padding: 4px 10px; font-size: 12px; } .topbar__island-btn { padding: 4px 10px; font-size: 12px; }
.topbar__logo-img { height: 38px; } .topbar__brand-name { font-size: 14px; }
.topbar__brand-icon { width: 24px; height: 24px; }
} }

15
frontend/src/components/Topbar/Topbar.jsx
View File

@@ -1,5 +1,4 @@
import TimelineSlider from '../Timeline/TimelineSlider'; import TimelineSlider from '../Timeline/TimelineSlider';
import logoUrl from '../../assets/logo-radarsargasses971.png';
import './Topbar.css'; import './Topbar.css';
const ISLANDS = [ const ISLANDS = [
@@ -15,7 +14,19 @@ export default function Topbar({ activeStep, onStepChange, onIslandSelect }) {
return ( return (
<header className="topbar"> <header className="topbar">
<div className="topbar__brand"> <div className="topbar__brand">
<img src={logoUrl} alt="Radar Sargasses 971" className="topbar__logo-img" /> <svg className="topbar__brand-icon" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="15" fill="#1a1a2e" stroke="#2563eb" strokeWidth="1.5"/>
<circle cx="16" cy="16" r="5" fill="none" stroke="#2563eb" strokeWidth="0.8" opacity="0.6"/>
<circle cx="16" cy="16" r="9" fill="none" stroke="#2563eb" strokeWidth="0.8" opacity="0.5"/>
<circle cx="16" cy="16" r="13" fill="none" stroke="#2563eb" strokeWidth="0.8" opacity="0.4"/>
<line x1="16" y1="3" x2="16" y2="29" stroke="#2563eb" strokeWidth="0.5" opacity="0.3"/>
<line x1="3" y1="16" x2="29" y2="16" stroke="#2563eb" strokeWidth="0.5" opacity="0.3"/>
<path d="M16 16 L25 7 A13 13 0 0 0 16 3 Z" fill="#60a5fa" opacity="0.18"/>
<line x1="16" y1="16" x2="25" y2="7" stroke="#60a5fa" strokeWidth="1.5" strokeLinecap="round"/>
<circle cx="22" cy="10" r="1.5" fill="#60a5fa" opacity="0.9"/>
<circle cx="16" cy="16" r="1.5" fill="#fff"/>
</svg>
<span className="topbar__brand-name">Radar Sargasses Caraïbes</span>
</div> </div>
<nav className="topbar__islands" aria-label="Navigation par île"> <nav className="topbar__islands" aria-label="Navigation par île">