canastack-admin
/
sw-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

peesque parfait

This commit is contained in:
Your Name 2025-12-11 01:37:06 +00:00
parent af03d992cb
commit 63244ee7cc
14 changed files with 324 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
fix.sh Normal file
View File

@ -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 '/<head>/a \
<!-- ===== SOCIOWIRE SEO + SHARE + ICONS ===== -->\
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16.png" />\
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32.png" />\
<link rel="icon" type="image/png" sizes="48x48" href="/icons/favicon-48.png" />\
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />\
<link rel="manifest" href="/manifest.json" />\
<meta name="theme-color" content="#0ea5e9" />\
<meta name="description" content="SocioWire — The real-time world feed. Live posts, geolocated events, discover everything happening right now." />\
<meta property="og:title" content="SocioWire — Wired to Life" />\
<meta property="og:description" content="Live posts from the world. Real-time events, map-based stories, and instant geolocated content." />\
<meta property="og:image" content="/icons/og-image.png" />\
<meta property="og:image:width" content="1200" />\
<meta property="og:image:height" content="630" />\
<meta property="og:type" content="website" />\
<meta property="og:url" content="https://sociowire.com" />\
<meta name="twitter:card" content="summary_large_image" />\
<meta name="twitter:title" content="SocioWire — Wired to Life" />\
<meta name="twitter:description" content="Share what you see. Discover what others are living — in real time." />\
<meta name="twitter:image" content="/icons/og-image.png" />\
<!-- ===== END META ===== -->\
' 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"

42
index.html
View File

@ -1,6 +1,48 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- ===== SOCIOWIRE SEO + META ===== -->
<title>SocioWire — Wired to Life</title>
<meta name="description" content="SocioWire — the real-time world feed." />
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32.png" />
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#0ea5e9" />
<meta property="og:title" content="SocioWire — Wired to Life" />
<meta property="og:description" content="Live posts from around the world on a real-time map." />
<meta property="og:image" content="/icons/og-image.png" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://sociowire.com" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="SocioWire — Wired to Life" />
<meta name="twitter:image" content="/icons/og-image.png" />
<!-- ===== END SOCIOWIRE META ===== -->
<!-- ===== SOCIOWIRE SEO + SHARE + ICONS ===== -->
<title>SocioWire — Wired to Life</title>
<meta name="title" content="SocioWire — Wired to Life" />
<meta name="application-name" content="SocioWire" />
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32.png" />
<link rel="icon" type="image/png" sizes="48x48" href="/icons/favicon-48.png" />
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#0ea5e9" />
<meta name="description" content="SocioWire — The real-time world feed. Live posts, geolocated events, discover everything happening right now." />
<meta property="og:title" content="SocioWire — Wired to Life" />
<meta property="og:description" content="Live posts from the world. Real-time events, map-based stories, and instant geolocated content." />
<meta property="og:image" content="/icons/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://sociowire.com" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="SocioWire — Wired to Life" />
<meta name="twitter:description" content="Share what you see. Discover what others are living — in real time." />
<meta name="twitter:image" content="/icons/og-image.png" />
<!-- ===== END META ===== -->
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />

BIN
public/icons/apple-touch-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
public/icons/favicon-16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
public/icons/favicon-32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
public/icons/favicon-48.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
public/icons/icon-192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
public/icons/icon-512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 241 KiB

BIN
public/icons/logo-master.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
public/icons/og-image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 373 KiB

13
public/manifest.json Normal file
View File

@ -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" }
]
}

39
src/components/TopBar/TopBar.jsx Normal file
View File

@ -0,0 +1,39 @@
import React from "react";
import "./topbar.css";
export default function TopBar({ username, theme, setTheme, onLoginClick, onSignupClick }) {
return (
<div className="topbar">
<div className="topbar-left">
<img
src="/icons/logo-master.png"
alt="SocioWire Logo"
className="sw-logo"
/>
<div className="title-block">
<div className="main-title">SocioWire</div>
<div className="sub-title">Wired to life</div>
</div>
</div>
<div className="topbar-right">
<div className="theme-switch">
<button className={\`theme-dot \${theme === "dark" ? "theme-dot-active" : ""}\`} onClick={() => setTheme("dark")}>D</button>
<button className={\`theme-dot \${theme === "blue" ? "theme-dot-active" : ""}\`} onClick={() => setTheme("blue")}>B</button>
<button className={\`theme-dot \${theme === "light" ? "theme-dot-active" : ""}\`} onClick={() => setTheme("light")}>L</button>
</div>
{username ? (
<div className="username-chip">{username}</div>
) : (
<>
<button className="btn-primary" onClick={onLoginClick}>Login</button>
<button className="btn-secondary" onClick={onSignupClick}>Sign up</button>
</>
)}
</div>
</div>
);
}

45
src/components/TopBar/topbar.css Normal file
View File

@ -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;
}

118
src/styles/topbar.css
View File

@ -1,44 +1,68 @@
/* ========== TOP BAR (SOCIOWIRE header) ========== */ /* ========== TOP BAR (SOCIOWIRE header, version avec belle barre) ========== */
.topbar { .topbar {
width: 100%;
padding: 0.55rem 0.9rem;
display: flex; display: flex;
flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 0.6rem; gap: 0.6rem;
padding: 0.4rem 0.8rem;
background: #0b1020; /* Bandeau bleu en haut, comme ton dessin */
border-bottom: 1px solid #1f2937; 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 { .logo-circle {
width: 32px; width: 40px;
height: 32px; height: 40px;
background: radial-gradient(circle, #38bdf8, #1d4ed8, #020617);
border-radius: 50%; border-radius: 50%;
display: flex; flex-shrink: 0;
align-items: center;
justify-content: center; /* utilise ton logo dans public/icons/logo-master.png */
font-weight: 700; 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 { .title-block {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
line-height: 1.1;
min-width: 0; min-width: 0;
} }
.main-title { .main-title {
font-size: 1rem; font-size: 1rem;
letter-spacing: 0.06em;
font-weight: 700; font-weight: 700;
color: #f9fafb;
} }
.sub-title { .sub-title {
font-size: 0.75rem; font-size: 0.7rem;
opacity: 0.7; color: #dbeafe;
opacity: 0.9;
} }
/* bloc de droite : thèmes + boutons */ /* Bloc de droite : thèmes + login */
.topbar-right { .topbar-right {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -48,6 +72,8 @@
margin-left: auto; margin-left: auto;
} }
/* Switch de thème D/B/L */
.theme-switch { .theme-switch {
display: flex; display: flex;
gap: 0.25rem; gap: 0.25rem;
@ -57,8 +83,8 @@
width: 22px; width: 22px;
height: 22px; height: 22px;
border-radius: 999px; border-radius: 999px;
border: 1px solid #4b5563; border: 1px solid rgba(148, 163, 184, 0.85);
background: #020617; background: rgba(15, 23, 42, 0.85);
color: #e5e7eb; color: #e5e7eb;
font-size: 0.65rem; font-size: 0.65rem;
display: flex; display: flex;
@ -66,41 +92,77 @@
justify-content: center; justify-content: center;
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
box-shadow: 0 0 6px rgba(15, 23, 42, 0.9);
} }
.theme-dot-active { .theme-dot-active {
border-color: #facc15; 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 { .btn-primary {
padding: 0.25rem 0.7rem; padding: 0.25rem 0.85rem;
font-size: 0.75rem; font-size: 0.75rem;
border-radius: 999px; border-radius: 999px;
border: 1px solid #22c55e; border: 1px solid #22c55e;
background: #16a34a; background: radial-gradient(circle at 30% 30%, #22c55e, #16a34a);
color: #f9fafb; color: #f9fafb;
cursor: pointer; 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 { .btn-secondary {
padding: 0.25rem 0.7rem; padding: 0.25rem 0.85rem;
font-size: 0.75rem; font-size: 0.75rem;
border-radius: 999px; border-radius: 999px;
border: 1px solid #60a5fa; border: 1px solid #bfdbfe;
background: #1e293b; background: rgba(15, 23, 42, 0.35);
color: #dbeafe; color: #e0f2fe;
cursor: pointer; cursor: pointer;
font-weight: 600;
box-shadow: 0 3px 10px rgba(15, 23, 42, 0.7);
} }
.btn-full { .btn-secondary:hover {
width: 100%; background: rgba(15, 23, 42, 0.6);
} }
/* mobile */ /* Mobile : la partie droite passe proprement en dessous */
@media (max-width: 480px) {
@media (max-width: 640px) {
.topbar {
flex-wrap: wrap;
padding-inline: 0.65rem;
}
.topbar-right { .topbar-right {
width: 100%; width: 100%;
justify-content: flex-start; 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;
}