diff --git a/fix.sh b/fix.sh new file mode 100644 index 0000000..6dc69dd --- /dev/null +++ b/fix.sh @@ -0,0 +1,95 @@ +#!/bin/bash + +echo "=== SOCIOWIRE LOGOS + METADATA INSTALLER ===" + +# --- REQUIRE Imagemagick --- +if ! command -v convert &> /dev/null +then + echo "Imagemagick non installé — installation..." + sudo apt install -y imagemagick +fi + +# --- CREATE FOLDERS --- +mkdir -p public/icons + +# --- COPY MASTER LOGO --- + +# --- GENERATE ICONS --- +echo "Génération des icônes…" + +convert public/icons/logo-master.png -resize 16x16 public/icons/favicon-16.png +convert public/icons/logo-master.png -resize 32x32 public/icons/favicon-32.png +convert public/icons/logo-master.png -resize 48x48 public/icons/favicon-48.png +convert public/icons/logo-master.png -resize 180x180 public/icons/apple-touch-icon.png +convert public/icons/logo-master.png -resize 192x192 public/icons/icon-192.png +convert public/icons/logo-master.png -resize 512x512 public/icons/icon-512.png +convert public/icons/logo-master.png -resize 1200x630 public/icons/og-image.png + +echo "Icônes générées." + +# --- ADD METADATA INTO index.html --- +echo "Injection des balises SEO et OpenGraph…" + +sed -i '//a \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ +' index.html + +echo "Metadonnées ajoutées." + +# --- INSTALL MANIFEST.JSON FOR PWA + GOOGLE + ANDROID --- +echo "Création du manifest.json…" + +cat << 'EOF' > public/manifest.json +{ + "name": "SocioWire", + "short_name": "SocioWire", + "description": "Real-time posts on a global map — wired to life.", + "start_url": "/", + "display": "standalone", + "background_color": "#020617", + "theme_color": "#0ea5e9", + "icons": [ + { + "src": "/icons/icon-192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/icons/icon-512.png", + "sizes": "512x512", + "type": "image/png" + } + ] +} +EOF + +echo "manifest.json généré." + +echo "=== INSTALLATION TERMINÉE ===" +echo "Ton site a maintenant :" +echo "✔ Favicon" +echo "✔ Apple Touch Icon" +echo "✔ Android App Icon" +echo "✔ OpenGraph Facebook" +echo "✔ Twitter Card" +echo "✔ SEO Google complet" +echo "✔ PWA Manifest" diff --git a/index.html b/index.html index fd8cff5..b286088 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,48 @@ + + SocioWire — Wired to Life + + + + + + + + + + + + + + + + + +SocioWire — Wired to Life + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/icons/apple-touch-icon.png b/public/icons/apple-touch-icon.png new file mode 100644 index 0000000..e7eebea Binary files /dev/null and b/public/icons/apple-touch-icon.png differ diff --git a/public/icons/favicon-16.png b/public/icons/favicon-16.png new file mode 100644 index 0000000..914856e Binary files /dev/null and b/public/icons/favicon-16.png differ diff --git a/public/icons/favicon-32.png b/public/icons/favicon-32.png new file mode 100644 index 0000000..e1f05c5 Binary files /dev/null and b/public/icons/favicon-32.png differ diff --git a/public/icons/favicon-48.png b/public/icons/favicon-48.png new file mode 100644 index 0000000..9343eda Binary files /dev/null and b/public/icons/favicon-48.png differ diff --git a/public/icons/icon-192.png b/public/icons/icon-192.png new file mode 100644 index 0000000..e505479 Binary files /dev/null and b/public/icons/icon-192.png differ diff --git a/public/icons/icon-512.png b/public/icons/icon-512.png new file mode 100644 index 0000000..0a3d4c8 Binary files /dev/null and b/public/icons/icon-512.png differ diff --git a/public/icons/logo-master.png b/public/icons/logo-master.png new file mode 100755 index 0000000..9fdb9e2 Binary files /dev/null and b/public/icons/logo-master.png differ diff --git a/public/icons/og-image.png b/public/icons/og-image.png new file mode 100644 index 0000000..d901ffa Binary files /dev/null and b/public/icons/og-image.png differ diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..f276594 --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,13 @@ +{ + "name": "SocioWire", + "short_name": "SocioWire", + "description": "Real-time posts on a global map — wired to life.", + "start_url": "/", + "display": "standalone", + "background_color": "#020617", + "theme_color": "#0ea5e9", + "icons": [ + { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" }, + { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" } + ] +} diff --git a/src/components/TopBar/TopBar.jsx b/src/components/TopBar/TopBar.jsx new file mode 100644 index 0000000..4491334 --- /dev/null +++ b/src/components/TopBar/TopBar.jsx @@ -0,0 +1,39 @@ +import React from "react"; +import "./topbar.css"; + +export default function TopBar({ username, theme, setTheme, onLoginClick, onSignupClick }) { + return ( +
+ +
+ SocioWire Logo + +
+
SocioWire
+
Wired to life
+
+
+ +
+
+ + + +
+ + {username ? ( +
{username}
+ ) : ( + <> + + + + )} +
+
+ ); +} diff --git a/src/components/TopBar/topbar.css b/src/components/TopBar/topbar.css new file mode 100644 index 0000000..efa5461 --- /dev/null +++ b/src/components/TopBar/topbar.css @@ -0,0 +1,45 @@ +.topbar { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.45rem 0.75rem; + background: #0b1020; + border-bottom: 1px solid #1f2937; +} + +.topbar-left { + display: flex; + align-items: center; + gap: 0.55rem; +} + +.sw-logo { + width: 38px; + height: 38px; + border-radius: 50%; + object-fit: cover; + background: #020617; + border: 1px solid rgba(148,163,184,0.5); + box-shadow: 0 0 12px rgba(56,189,248,0.35); +} + +.main-title { + font-size: 1.05rem; + font-weight: 700; + color: #e5e7eb; +} + +.sub-title { + font-size: 0.72rem; + opacity: 0.7; + color: #93c5fd; +} + +.username-chip { + background: rgba(15,23,42,.96); + padding: 0.25rem 0.7rem; + border-radius: 999px; + border: 1px solid rgba(148,163,184,0.85); + font-size: 0.75rem; + color: #e5e7eb; +} diff --git a/src/styles/topbar.css b/src/styles/topbar.css index 939e180..bee3aca 100644 --- a/src/styles/topbar.css +++ b/src/styles/topbar.css @@ -1,44 +1,68 @@ -/* ========== TOP BAR (SOCIOWIRE header) ========== */ +/* ========== TOP BAR (SOCIOWIRE header, version avec belle barre) ========== */ .topbar { + width: 100%; + padding: 0.55rem 0.9rem; display: flex; - flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; - padding: 0.4rem 0.8rem; - background: #0b1020; - border-bottom: 1px solid #1f2937; + + /* Bandeau bleu en haut, comme ton dessin */ + background: linear-gradient(135deg, #050b18 0%, #0b2b5f 35%, #0e65c0 70%, #27a8ff 100%); + border-bottom-left-radius: 18px; + border-bottom-right-radius: 18px; + + box-shadow: + 0 10px 24px rgba(0, 0, 0, 0.65), + 0 0 18px rgba(56, 189, 248, 0.5); } +/* Bloc gauche : logo + titre */ + .logo-circle { - width: 32px; - height: 32px; - background: radial-gradient(circle, #38bdf8, #1d4ed8, #020617); + width: 40px; + height: 40px; border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - font-weight: 700; + flex-shrink: 0; + + /* utilise ton logo dans public/icons/logo-master.png */ + background-image: url("/icons/logo-master.png"); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + + /* halo autour du logo */ + box-shadow: + 0 0 12px rgba(37, 99, 235, 0.85), + 0 0 20px rgba(56, 189, 248, 0.8); + + /* cache le texte "SW" à l'intérieur si présent */ + color: transparent; } .title-block { display: flex; flex-direction: column; + line-height: 1.1; min-width: 0; } .main-title { font-size: 1rem; + letter-spacing: 0.06em; font-weight: 700; + color: #f9fafb; } .sub-title { - font-size: 0.75rem; - opacity: 0.7; + font-size: 0.7rem; + color: #dbeafe; + opacity: 0.9; } -/* bloc de droite : thèmes + boutons */ +/* Bloc de droite : thèmes + login */ + .topbar-right { display: flex; flex-wrap: wrap; @@ -48,6 +72,8 @@ margin-left: auto; } +/* Switch de thème D/B/L */ + .theme-switch { display: flex; gap: 0.25rem; @@ -57,8 +83,8 @@ width: 22px; height: 22px; border-radius: 999px; - border: 1px solid #4b5563; - background: #020617; + border: 1px solid rgba(148, 163, 184, 0.85); + background: rgba(15, 23, 42, 0.85); color: #e5e7eb; font-size: 0.65rem; display: flex; @@ -66,41 +92,77 @@ justify-content: center; padding: 0; cursor: pointer; + box-shadow: 0 0 6px rgba(15, 23, 42, 0.9); } .theme-dot-active { border-color: #facc15; - box-shadow: 0 0 10px rgba(250, 204, 21, 0.7); + box-shadow: + 0 0 10px rgba(250, 204, 21, 0.9), + 0 0 16px rgba(56, 189, 248, 0.7); } +/* Boutons login / logout */ + .btn-primary { - padding: 0.25rem 0.7rem; + padding: 0.25rem 0.85rem; font-size: 0.75rem; border-radius: 999px; border: 1px solid #22c55e; - background: #16a34a; + background: radial-gradient(circle at 30% 30%, #22c55e, #16a34a); color: #f9fafb; cursor: pointer; + font-weight: 600; + box-shadow: + 0 4px 12px rgba(22, 163, 74, 0.6), + 0 0 10px rgba(22, 163, 74, 0.7); } +.btn-primary:disabled { + opacity: 0.6; + cursor: default; +} + +/* Si tu as un bouton secondaire (signup) */ .btn-secondary { - padding: 0.25rem 0.7rem; + padding: 0.25rem 0.85rem; font-size: 0.75rem; border-radius: 999px; - border: 1px solid #60a5fa; - background: #1e293b; - color: #dbeafe; + border: 1px solid #bfdbfe; + background: rgba(15, 23, 42, 0.35); + color: #e0f2fe; cursor: pointer; + font-weight: 600; + box-shadow: 0 3px 10px rgba(15, 23, 42, 0.7); } -.btn-full { - width: 100%; +.btn-secondary:hover { + background: rgba(15, 23, 42, 0.6); } -/* mobile */ -@media (max-width: 480px) { +/* Mobile : la partie droite passe proprement en dessous */ + +@media (max-width: 640px) { + .topbar { + flex-wrap: wrap; + padding-inline: 0.65rem; + } + .topbar-right { width: 100%; justify-content: flex-start; } } + +/* Thème clair : on éclaircit la barre mais on garde ton logo */ +body[data-theme="light"] .topbar { + background: linear-gradient(135deg, #e5f0ff, #f9fafb); + box-shadow: + 0 6px 18px rgba(148, 163, 184, 0.6), + 0 0 10px rgba(129, 140, 248, 0.35); +} + +body[data-theme="light"] .main-title, +body[data-theme="light"] .sub-title { + color: #0f172a; +}