peesque parfait
This commit is contained in:
Your Name
parent
af03d992cb
commit
63244ee7cc
|
|
@ -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
42
index.html
|
|
@ -1,6 +1,48 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<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" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 241 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 373 KiB |
|
|
@ -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" }
|
||||
]
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue