Crowmate/Wyview
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add a white theme

Browse Source
This commit is contained in:
Pierre Ryssen
2026-03-11 16:02:55 +01:00
parent 9642f2511a
commit d5d7b15f16
22 changed files with 297 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
app/dashboard/layout.tsx
View File

@@ -1,38 +1,5 @@
"use client"; import AppLayout from "@/components/AppLayout";
import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { useSession } from "next-auth/react";
import Sidebar from "@/components/Sidebar";
export default function AuthLayout({ children }: { children: React.ReactNode }) { export default function AuthLayout({ children }: { children: React.ReactNode }) {
const { status } = useSession(); return <AppLayout>{children}</AppLayout>;
const router = useRouter();
useEffect(() => {
if (status === "unauthenticated") {
router.push("/");
}
}, [status, router]);
if (status === "loading") {
return (
<div className="min-h-screen bg-[#0d1117] flex items-center justify-center">
<span className="text-[#4aff8c]/60 font-mono text-xs tracking-widest animate-pulse">
CHARGEMENT...
</span>
</div>
);
}
if (status !== "authenticated") return null;
return (
<div className="flex min-h-screen bg-[#0d1117]">
<Sidebar />
<main className="ml-56 flex-1 p-8 bg-[#0d1117]">
{children}
</main>
</div>
);
} }

6
app/dashboard/page.tsx
View File

@@ -1,9 +1,9 @@
export default function DashboardPage() { export default function DashboardPage() {
return ( return (
<div> <div>
<div className="text-sm font-mono tracking-widest text-acid-green/70 uppercase mb-1">Vue générale</div> <div className="text-sm font-mono tracking-widest uppercase mb-1" style={{ color: "var(--accent)" }}>Vue générale</div>
<h1 className="text-3xl font-black tracking-widest text-white uppercase mb-8">Tableau de bord</h1> <h1 className="text-3xl font-black tracking-widest uppercase mb-8" style={{ color: "var(--text-primary)" }}>Tableau de bord</h1>
<p className="text-wy-text-secondary font-mono text-sm">Données à venir...</p> <p className="font-mono text-sm" style={{ color: "var(--text-secondary)" }}>Données à venir...</p>
</div> </div>
); );
} }

28
app/finances/layout.tsx
View File

@@ -1,29 +1,5 @@
"use client"; import AppLayout from "@/components/AppLayout";
import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { useSession } from "next-auth/react";
import Sidebar from "@/components/Sidebar";
export default function AuthLayout({ children }: { children: React.ReactNode }) { export default function AuthLayout({ children }: { children: React.ReactNode }) {
const { status } = useSession(); return <AppLayout>{children}</AppLayout>;
const router = useRouter();
useEffect(() => {
if (status === "unauthenticated") {
router.push("/");
}
}, [status, router]);
if (status === "loading") return null;
if (status !== "authenticated") return null;
return (
<div className="flex min-h-screen bg-[#0d1117]">
<Sidebar />
<main className="ml-56 flex-1 p-8 bg-[#0d1117]">
{children}
</main>
</div>
);
} }

7
app/finances/page.tsx
View File

@@ -10,7 +10,7 @@ export default function FinancesPage() {
</div> </div>
<div> <div>
<div className="text-[9px] font-mono tracking-[0.3em] text-yellow-400/70 uppercase mb-0.5">Revenus</div> <div className="text-[9px] font-mono tracking-[0.3em] text-yellow-400/70 uppercase mb-0.5">Revenus</div>
<h1 className="text-2xl font-black tracking-widest text-white uppercase">Finances</h1> <h1 className="text-2xl font-black tracking-widest uppercase" style={{ color: "var(--text-primary)" }}>Finances</h1>
</div> </div>
</div> </div>
@@ -21,9 +21,10 @@ export default function FinancesPage() {
<StatCard label="Abonnements" value="—" sub="Aucune donnée" accent="gold" /> <StatCard label="Abonnements" value="—" sub="Aucune donnée" accent="gold" />
</div> </div>
<div className="bg-[#111a14] border border-[#1e2d1e] rounded-sm p-8 flex flex-col items-center justify-center gap-3 min-h-[200px]"> <div className="border rounded-sm p-8 flex flex-col items-center justify-center gap-3 min-h-[200px]"
style={{ background: "var(--surface)", borderColor: "var(--border)" }}>
<DollarSign size={32} className="text-yellow-400/30" /> <DollarSign size={32} className="text-yellow-400/30" />
<p className="text-[#7a9a7a] font-mono text-xs tracking-widest text-center"> <p className="font-mono text-xs tracking-widest text-center" style={{ color: "var(--text-secondary)" }}>
AUCUNE DONNÉE FINANCIÈRE DISPONIBLE<br />POUR LE MOMENT AUCUNE DONNÉE FINANCIÈRE DISPONIBLE<br />POUR LE MOMENT
</p> </p>
</div> </div>

32
app/globals.css
View File

@@ -2,6 +2,36 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
/* ── Dark theme (default) ── */
:root {
--bg: #0d1117;
--surface: #161b22;
--border: #30363d;
--text-primary: #c9d1d9;
--text-secondary: #8b949e;
--accent: #4aff8c;
--accent-dim: rgba(74,255,140,0.1);
--accent-border: rgba(74,255,140,0.3);
}
/* ── Light theme ── */
html.light {
--bg: #f0f6ff;
--surface: #ffffff;
--border: #d0d7de;
--text-primary: #1c2128;
--text-secondary: #57606a;
--accent: #0ea5e9;
--accent-dim: rgba(14,165,233,0.1);
--accent-border: rgba(14,165,233,0.3);
}
body {
background-color: var(--bg);
color: var(--text-primary);
transition: background-color 0.2s ease, color 0.2s ease;
}
::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #30363d; border-radius: 2px; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

28
app/instagram/layout.tsx
View File

@@ -1,29 +1,5 @@
"use client"; import AppLayout from "@/components/AppLayout";
import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { useSession } from "next-auth/react";
import Sidebar from "@/components/Sidebar";
export default function AuthLayout({ children }: { children: React.ReactNode }) { export default function AuthLayout({ children }: { children: React.ReactNode }) {
const { status } = useSession(); return <AppLayout>{children}</AppLayout>;
const router = useRouter();
useEffect(() => {
if (status === "unauthenticated") {
router.push("/");
}
}, [status, router]);
if (status === "loading") return null;
if (status !== "authenticated") return null;
return (
<div className="flex min-h-screen bg-[#0d1117]">
<Sidebar />
<main className="ml-56 flex-1 p-8 bg-[#0d1117]">
{children}
</main>
</div>
);
} }

7
app/instagram/page.tsx
View File

@@ -10,7 +10,7 @@ export default function InstagramPage() {
</div> </div>
<div> <div>
<div className="text-[9px] font-mono tracking-[0.3em] text-orange-400/70 uppercase mb-0.5">Plateforme</div> <div className="text-[9px] font-mono tracking-[0.3em] text-orange-400/70 uppercase mb-0.5">Plateforme</div>
<h1 className="text-2xl font-black tracking-widest text-white uppercase">Instagram</h1> <h1 className="text-2xl font-black tracking-widest uppercase" style={{ color: "var(--text-primary)" }}>Instagram</h1>
</div> </div>
</div> </div>
@@ -21,9 +21,10 @@ export default function InstagramPage() {
<StatCard label="Portée moy." value="—" sub="Aucune donnée" accent="gold" /> <StatCard label="Portée moy." value="—" sub="Aucune donnée" accent="gold" />
</div> </div>
<div className="bg-[#111a14] border border-[#1e2d1e] rounded-sm p-8 flex flex-col items-center justify-center gap-3 min-h-[200px]"> <div className="border rounded-sm p-8 flex flex-col items-center justify-center gap-3 min-h-[200px]"
style={{ background: "var(--surface)", borderColor: "var(--border)" }}>
<Camera size={32} className="text-orange-400/30" /> <Camera size={32} className="text-orange-400/30" />
<p className="text-[#7a9a7a] font-mono text-xs tracking-widest text-center"> <p className="font-mono text-xs tracking-widest text-center" style={{ color: "var(--text-secondary)" }}>
CONNECTEZ VOTRE COMPTE INSTAGRAM<br />POUR AFFICHER VOS STATISTIQUES CONNECTEZ VOTRE COMPTE INSTAGRAM<br />POUR AFFICHER VOS STATISTIQUES
</p> </p>
</div> </div>

5
app/layout.tsx
View File

@@ -1,6 +1,7 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import "./globals.css"; import "./globals.css";
import { SessionProvider } from "next-auth/react"; import { SessionProvider } from "next-auth/react";
import { ThemeProvider } from "@/lib/theme";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "WYVIEW", title: "WYVIEW",
@@ -12,7 +13,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
<html lang="fr"> <html lang="fr">
<body className="bg-wy-dark text-wy-text-primary antialiased"> <body className="bg-wy-dark text-wy-text-primary antialiased">
<SessionProvider> <SessionProvider>
{children} <ThemeProvider>
{children}
</ThemeProvider>
</SessionProvider> </SessionProvider>
</body> </body>
</html> </html>

68
app/page.tsx
View File

@@ -8,13 +8,11 @@ import DragonEye from "@/components/DragonEye";
export default function AuthPage() { export default function AuthPage() {
const [tab, setTab] = useState<"login" | "register">("login"); const [tab, setTab] = useState<"login" | "register">("login");
// Login state
const [loginEmail, setLoginEmail] = useState(""); const [loginEmail, setLoginEmail] = useState("");
const [loginPassword, setLoginPassword] = useState(""); const [loginPassword, setLoginPassword] = useState("");
const [loginError, setLoginError] = useState(""); const [loginError, setLoginError] = useState("");
const [loginLoading, setLoginLoading] = useState(false); const [loginLoading, setLoginLoading] = useState(false);
// Register state
const [regName, setRegName] = useState(""); const [regName, setRegName] = useState("");
const [regEmail, setRegEmail] = useState(""); const [regEmail, setRegEmail] = useState("");
const [regPassword, setRegPassword] = useState(""); const [regPassword, setRegPassword] = useState("");
@@ -85,61 +83,64 @@ export default function AuthPage() {
} }
}; };
const inputStyle: React.CSSProperties = {
background: "var(--surface)",
color: "var(--text-primary)",
borderColor: "var(--border)",
};
const inputClass = (hasError: boolean) => const inputClass = (hasError: boolean) =>
`w-full bg-wy-surface border px-4 py-3 text-sm font-mono text-wy-text-primary placeholder-wy-text-secondary outline-none rounded-md transition-all duration-200 ${ `w-full px-4 py-3 text-sm font-mono outline-none rounded-md transition-all duration-200 border ${
hasError ? "border-red-500/60" : "border-wy-border focus:border-acid-green/60" hasError ? "border-red-500/60" : "focus:border-[color:var(--accent)]"
}`; }`;
return ( return (
<main className="min-h-screen bg-wy-dark flex flex-col items-center justify-center relative overflow-hidden"> <main className="min-h-screen flex flex-col items-center justify-center relative overflow-hidden"
style={{ background: "var(--bg)", color: "var(--text-primary)" }}>
<div <div
className="absolute inset-0 opacity-20 pointer-events-none" className="absolute inset-0 opacity-20 pointer-events-none"
style={{ style={{
backgroundImage: `linear-gradient(rgba(74,255,140,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(74,255,140,0.05) 1px, transparent 1px)`, backgroundImage: `linear-gradient(var(--accent-border) 1px, transparent 1px), linear-gradient(90deg, var(--accent-border) 1px, transparent 1px)`,
backgroundSize: "40px 40px", backgroundSize: "40px 40px",
}} }}
/> />
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] rounded-full bg-acid-green/[0.02] blur-3xl pointer-events-none" /> <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] rounded-full blur-3xl pointer-events-none"
style={{ background: "var(--accent-dim)" }} />
<div className="relative z-10 flex flex-col items-center gap-8 w-full max-w-sm px-6"> <div className="relative z-10 flex flex-col items-center gap-8 w-full max-w-sm px-6">
{/* Header */}
<div className="flex flex-col items-center gap-5"> <div className="flex flex-col items-center gap-5">
<DragonEye size={80} /> <DragonEye size={80} />
<div className="text-center"> <div className="text-center">
<div className="text-[9px] tracking-[0.45em] text-acid-green/70 uppercase mb-2 font-mono"> <div className="text-[9px] tracking-[0.45em] uppercase mb-2 font-mono" style={{ color: "var(--accent)" }}>
Analytics Dashboard Analytics Dashboard
</div> </div>
<h1 className="text-4xl font-black tracking-[0.15em] uppercase text-wy-text-primary"> <h1 className="text-4xl font-black tracking-[0.15em] uppercase" style={{ color: "var(--text-primary)" }}>
WYVIEW WYVIEW
</h1> </h1>
</div> </div>
</div> </div>
{/* Tabs */} {/* Tabs */}
<div className="w-full flex border border-wy-border rounded-md overflow-hidden"> <div className="w-full flex rounded-md overflow-hidden" style={{ border: "1px solid var(--border)" }}>
<button <button
onClick={() => { setTab("login"); setLoginError(""); }} onClick={() => { setTab("login"); setLoginError(""); }}
className={`flex-1 py-2 text-[10px] font-mono tracking-[0.3em] uppercase transition-all duration-200 ${ className="flex-1 py-2 text-[10px] font-mono tracking-[0.3em] uppercase transition-all duration-200"
tab === "login" style={tab === "login"
? "bg-acid-green/10 text-acid-green border-r border-wy-border" ? { background: "var(--accent-dim)", color: "var(--accent)", borderRight: "1px solid var(--border)" }
: "text-wy-text-secondary hover:text-acid-green/80 border-r border-wy-border" : { color: "var(--text-secondary)", borderRight: "1px solid var(--border)" }}
}`}
> >
CONNEXION CONNEXION
</button> </button>
<button <button
onClick={() => { setTab("register"); setRegError(""); setRegSuccess(""); }} onClick={() => { setTab("register"); setRegError(""); setRegSuccess(""); }}
className={`flex-1 py-2 text-[10px] font-mono tracking-[0.3em] uppercase transition-all duration-200 ${ className="flex-1 py-2 text-[10px] font-mono tracking-[0.3em] uppercase transition-all duration-200"
tab === "register" style={tab === "register"
? "bg-acid-green/10 text-acid-green" ? { background: "var(--accent-dim)", color: "var(--accent)" }
: "text-wy-text-secondary hover:text-acid-green/80" : { color: "var(--text-secondary)" }}
}`}
> >
INSCRIPTION INSCRIPTION
</button> </button>
</div> </div>
{/* Login Form */}
{tab === "login" && ( {tab === "login" && (
<form onSubmit={handleLogin} className="w-full flex flex-col gap-3"> <form onSubmit={handleLogin} className="w-full flex flex-col gap-3">
<input <input
@@ -149,6 +150,7 @@ export default function AuthPage() {
autoComplete="email" autoComplete="email"
onChange={(e) => { setLoginEmail(e.target.value); setLoginError(""); }} onChange={(e) => { setLoginEmail(e.target.value); setLoginError(""); }}
className={inputClass(!!loginError)} className={inputClass(!!loginError)}
style={inputStyle}
/> />
<input <input
type="password" type="password"
@@ -157,6 +159,7 @@ export default function AuthPage() {
autoComplete="current-password" autoComplete="current-password"
onChange={(e) => { setLoginPassword(e.target.value); setLoginError(""); }} onChange={(e) => { setLoginPassword(e.target.value); setLoginError(""); }}
className={inputClass(!!loginError)} className={inputClass(!!loginError)}
style={inputStyle}
/> />
{loginError && ( {loginError && (
<p className="text-red-400/80 text-[11px] font-mono tracking-widest">— {loginError}</p> <p className="text-red-400/80 text-[11px] font-mono tracking-widest">— {loginError}</p>
@@ -164,14 +167,16 @@ export default function AuthPage() {
<button <button
type="submit" type="submit"
disabled={loginLoading || !loginEmail || !loginPassword} disabled={loginLoading || !loginEmail || !loginPassword}
className="w-full py-3 text-[11px] font-mono tracking-[0.3em] uppercase font-bold border border-acid-green text-acid-green hover:bg-acid-green/10 transition-all duration-200 rounded-md disabled:opacity-50 disabled:cursor-not-allowed" className="w-full py-3 text-[11px] font-mono tracking-[0.3em] uppercase font-bold rounded-md border transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
style={{ borderColor: "var(--accent)", color: "var(--accent)" }}
onMouseEnter={e => (e.currentTarget.style.background = "var(--accent-dim)")}
onMouseLeave={e => (e.currentTarget.style.background = "transparent")}
> >
{loginLoading ? "CONNEXION..." : "ACCÉDER"} {loginLoading ? "CONNEXION..." : "ACCÉDER"}
</button> </button>
</form> </form>
)} )}
{/* Register Form */}
{tab === "register" && ( {tab === "register" && (
<form onSubmit={handleRegister} className="w-full flex flex-col gap-3"> <form onSubmit={handleRegister} className="w-full flex flex-col gap-3">
<input <input
@@ -181,6 +186,7 @@ export default function AuthPage() {
autoComplete="name" autoComplete="name"
onChange={(e) => { setRegName(e.target.value); setRegError(""); }} onChange={(e) => { setRegName(e.target.value); setRegError(""); }}
className={inputClass(false)} className={inputClass(false)}
style={inputStyle}
/> />
<input <input
type="email" type="email"
@@ -189,6 +195,7 @@ export default function AuthPage() {
autoComplete="email" autoComplete="email"
onChange={(e) => { setRegEmail(e.target.value); setRegError(""); }} onChange={(e) => { setRegEmail(e.target.value); setRegError(""); }}
className={inputClass(!!regError)} className={inputClass(!!regError)}
style={inputStyle}
/> />
<input <input
type="password" type="password"
@@ -197,6 +204,7 @@ export default function AuthPage() {
autoComplete="new-password" autoComplete="new-password"
onChange={(e) => { setRegPassword(e.target.value); setRegError(""); }} onChange={(e) => { setRegPassword(e.target.value); setRegError(""); }}
className={inputClass(!!regError)} className={inputClass(!!regError)}
style={inputStyle}
/> />
<input <input
type="password" type="password"
@@ -205,24 +213,28 @@ export default function AuthPage() {
autoComplete="new-password" autoComplete="new-password"
onChange={(e) => { setRegConfirm(e.target.value); setRegError(""); }} onChange={(e) => { setRegConfirm(e.target.value); setRegError(""); }}
className={inputClass(!!regError && regPassword !== regConfirm)} className={inputClass(!!regError && regPassword !== regConfirm)}
style={inputStyle}
/> />
{regError && ( {regError && (
<p className="text-red-400/80 text-[11px] font-mono tracking-widest">— {regError}</p> <p className="text-red-400/80 text-[11px] font-mono tracking-widest">— {regError}</p>
)} )}
{regSuccess && ( {regSuccess && (
<p className="text-acid-green/80 text-[11px] font-mono tracking-widest">✓ {regSuccess}</p> <p className="text-[11px] font-mono tracking-widest" style={{ color: "var(--accent)" }}>✓ {regSuccess}</p>
)} )}
<button <button
type="submit" type="submit"
disabled={regLoading || !regEmail || !regPassword || !regConfirm} disabled={regLoading || !regEmail || !regPassword || !regConfirm}
className="w-full py-3 text-[11px] font-mono tracking-[0.3em] uppercase font-bold border border-acid-green text-acid-green hover:bg-acid-green/10 transition-all duration-200 rounded-md disabled:opacity-50 disabled:cursor-not-allowed" className="w-full py-3 text-[11px] font-mono tracking-[0.3em] uppercase font-bold rounded-md border transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
style={{ borderColor: "var(--accent)", color: "var(--accent)" }}
onMouseEnter={e => (e.currentTarget.style.background = "var(--accent-dim)")}
onMouseLeave={e => (e.currentTarget.style.background = "transparent")}
> >
{regLoading ? "CRÉATION..." : "CRÉER UN COMPTE"} {regLoading ? "CRÉATION..." : "CRÉER UN COMPTE"}
</button> </button>
</form> </form>
)} )}
<div className="text-[9px] font-mono text-wy-text-secondary/50 tracking-[0.3em]"> <div className="text-[9px] font-mono tracking-[0.3em]" style={{ color: "var(--text-secondary)" }}>
WYVIEW v1.0 /// CROWMATE WYVIEW v1.0 /// CROWMATE
</div> </div>
</div> </div>

28
app/tiktok/layout.tsx
View File

@@ -1,29 +1,5 @@
"use client"; import AppLayout from "@/components/AppLayout";
import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { useSession } from "next-auth/react";
import Sidebar from "@/components/Sidebar";
export default function AuthLayout({ children }: { children: React.ReactNode }) { export default function AuthLayout({ children }: { children: React.ReactNode }) {
const { status } = useSession(); return <AppLayout>{children}</AppLayout>;
const router = useRouter();
useEffect(() => {
if (status === "unauthenticated") {
router.push("/");
}
}, [status, router]);
if (status === "loading") return null;
if (status !== "authenticated") return null;
return (
<div className="flex min-h-screen bg-[#0d1117]">
<Sidebar />
<main className="ml-56 flex-1 p-8 bg-[#0d1117]">
{children}
</main>
</div>
);
} }

17
app/tiktok/page.tsx
View File

@@ -70,7 +70,7 @@ export default function TikTokPage() {
</div> </div>
<div> <div>
<div className="text-[9px] font-mono tracking-[0.3em] text-pink-400/70 uppercase mb-0.5">Plateforme</div> <div className="text-[9px] font-mono tracking-[0.3em] text-pink-400/70 uppercase mb-0.5">Plateforme</div>
<h1 className="text-2xl font-black tracking-widest text-white uppercase">TikTok</h1> <h1 className="text-2xl font-black tracking-widest uppercase" style={{ color: "var(--text-primary)" }}>TikTok</h1>
</div> </div>
</div> </div>
@@ -99,7 +99,7 @@ export default function TikTokPage() {
{/* Chargement */} {/* Chargement */}
{loading && ( {loading && (
<div className="flex items-center justify-center min-h-[200px] gap-3 text-[#6a8a6a] font-mono text-xs"> <div className="flex items-center justify-center min-h-[200px] gap-3 font-mono text-xs" style={{ color: "var(--text-secondary)" }}>
<Loader2 size={16} className="animate-spin text-pink-400/60" /> <Loader2 size={16} className="animate-spin text-pink-400/60" />
Chargement... Chargement...
</div> </div>
@@ -147,11 +147,11 @@ export default function TikTokPage() {
</> </>
)} )}
{/* Non connecté */}
{!loading && !stats && !error && ( {!loading && !stats && !error && (
<div className="bg-[#111a14] border border-[#1e2d1e] rounded-sm p-12 flex flex-col items-center justify-center gap-5 min-h-[240px]"> <div className="border rounded-sm p-12 flex flex-col items-center justify-center gap-5 min-h-[240px]"
style={{ background: "var(--surface)", borderColor: "var(--border)" }}>
<Music2 size={36} className="text-pink-400/30" /> <Music2 size={36} className="text-pink-400/30" />
<p className="text-[#7a9a7a] font-mono text-xs tracking-widest text-center uppercase"> <p className="font-mono text-xs tracking-widest text-center uppercase" style={{ color: "var(--text-secondary)" }}>
Connectez votre compte TikTok<br />pour afficher vos statistiques Connectez votre compte TikTok<br />pour afficher vos statistiques
</p> </p>
<a <a
@@ -164,12 +164,13 @@ export default function TikTokPage() {
</div> </div>
)} )}
{/* Erreur API */}
{!loading && error && ( {!loading && error && (
<div className="bg-[#111a14] border border-red-500/25 rounded-sm p-8 flex flex-col items-center justify-center gap-3 min-h-[200px]"> <div className="border border-red-500/25 rounded-sm p-8 flex flex-col items-center justify-center gap-3 min-h-[200px]"
style={{ background: "var(--surface)" }}>
<AlertTriangle size={28} className="text-red-400/60" /> <AlertTriangle size={28} className="text-red-400/60" />
<p className="text-red-400/80 font-mono text-xs tracking-widest text-center uppercase">{error}</p> <p className="text-red-400/80 font-mono text-xs tracking-widest text-center uppercase">{error}</p>
<button onClick={loadStats} className="text-[10px] font-mono tracking-widest text-[#6a8a6a] hover:text-pink-400 uppercase transition-colors"> <button onClick={loadStats} className="text-[10px] font-mono tracking-widest uppercase transition-colors hover:text-pink-400"
style={{ color: "var(--text-secondary)" }}>
Réessayer Réessayer
</button> </button>
</div> </div>

28
app/twitch/layout.tsx
View File

@@ -1,29 +1,5 @@
"use client"; import AppLayout from "@/components/AppLayout";
import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { useSession } from "next-auth/react";
import Sidebar from "@/components/Sidebar";
export default function AuthLayout({ children }: { children: React.ReactNode }) { export default function AuthLayout({ children }: { children: React.ReactNode }) {
const { status } = useSession(); return <AppLayout>{children}</AppLayout>;
const router = useRouter();
useEffect(() => {
if (status === "unauthenticated") {
router.push("/");
}
}, [status, router]);
if (status === "loading") return null;
if (status !== "authenticated") return null;
return (
<div className="flex min-h-screen bg-[#0d1117]">
<Sidebar />
<main className="ml-56 flex-1 p-8 bg-[#0d1117]">
{children}
</main>
</div>
);
} }

7
app/twitch/page.tsx
View File

@@ -10,7 +10,7 @@ export default function TwitchPage() {
</div> </div>
<div> <div>
<div className="text-[9px] font-mono tracking-[0.3em] text-purple-400/70 uppercase mb-0.5">Plateforme</div> <div className="text-[9px] font-mono tracking-[0.3em] text-purple-400/70 uppercase mb-0.5">Plateforme</div>
<h1 className="text-2xl font-black tracking-widest text-white uppercase">Twitch</h1> <h1 className="text-2xl font-black tracking-widest uppercase" style={{ color: "var(--text-primary)" }}>Twitch</h1>
</div> </div>
</div> </div>
@@ -21,9 +21,10 @@ export default function TwitchPage() {
<StatCard label="Abonnés actifs" value="—" sub="Aucune donnée" accent="purple" /> <StatCard label="Abonnés actifs" value="—" sub="Aucune donnée" accent="purple" />
</div> </div>
<div className="bg-[#111a14] border border-[#1e2d1e] rounded-sm p-8 flex flex-col items-center justify-center gap-3 min-h-[200px]"> <div className="border rounded-sm p-8 flex flex-col items-center justify-center gap-3 min-h-[200px]"
style={{ background: "var(--surface)", borderColor: "var(--border)" }}>
<TwitchIcon size={32} className="text-purple-400/30" /> <TwitchIcon size={32} className="text-purple-400/30" />
<p className="text-[#7a9a7a] font-mono text-xs tracking-widest text-center"> <p className="font-mono text-xs tracking-widest text-center" style={{ color: "var(--text-secondary)" }}>
CONNECTEZ VOTRE COMPTE TWITCH<br />POUR AFFICHER VOS STATISTIQUES CONNECTEZ VOTRE COMPTE TWITCH<br />POUR AFFICHER VOS STATISTIQUES
</p> </p>
</div> </div>

28
app/youtube/layout.tsx
View File

@@ -1,29 +1,5 @@
"use client"; import AppLayout from "@/components/AppLayout";
import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { useSession } from "next-auth/react";
import Sidebar from "@/components/Sidebar";
export default function AuthLayout({ children }: { children: React.ReactNode }) { export default function AuthLayout({ children }: { children: React.ReactNode }) {
const { status } = useSession(); return <AppLayout>{children}</AppLayout>;
const router = useRouter();
useEffect(() => {
if (status === "unauthenticated") {
router.push("/");
}
}, [status, router]);
if (status === "loading") return null;
if (status !== "authenticated") return null;
return (
<div className="flex min-h-screen bg-[#0d1117]">
<Sidebar />
<main className="ml-56 flex-1 p-8 bg-[#0d1117]">
{children}
</main>
</div>
);
} }

7
app/youtube/page.tsx
View File

@@ -10,7 +10,7 @@ export default function YoutubePage() {
</div> </div>
<div> <div>
<div className="text-[9px] font-mono tracking-[0.3em] text-red-400/70 uppercase mb-0.5">Plateforme</div> <div className="text-[9px] font-mono tracking-[0.3em] text-red-400/70 uppercase mb-0.5">Plateforme</div>
<h1 className="text-2xl font-black tracking-widest text-white uppercase">YouTube</h1> <h1 className="text-2xl font-black tracking-widest uppercase" style={{ color: "var(--text-primary)" }}>YouTube</h1>
</div> </div>
</div> </div>
@@ -21,9 +21,10 @@ export default function YoutubePage() {
<StatCard label="Watch time (h)" value="—" sub="Aucune donnée" accent="red" /> <StatCard label="Watch time (h)" value="—" sub="Aucune donnée" accent="red" />
</div> </div>
<div className="bg-[#111a14] border border-[#1e2d1e] rounded-sm p-8 flex flex-col items-center justify-center gap-3 min-h-[200px]"> <div className="border rounded-sm p-8 flex flex-col items-center justify-center gap-3 min-h-[200px]"
style={{ background: "var(--surface)", borderColor: "var(--border)" }}>
<YoutubeIcon size={32} className="text-red-400/30" /> <YoutubeIcon size={32} className="text-red-400/30" />
<p className="text-[#7a9a7a] font-mono text-xs tracking-widest text-center"> <p className="font-mono text-xs tracking-widest text-center" style={{ color: "var(--text-secondary)" }}>
CONNECTEZ VOTRE COMPTE YOUTUBE<br />POUR AFFICHER VOS STATISTIQUES CONNECTEZ VOTRE COMPTE YOUTUBE<br />POUR AFFICHER VOS STATISTIQUES
</p> </p>
</div> </div>

41
components/AppLayout.tsx Normal file
View File

@@ -0,0 +1,41 @@
"use client";
import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { useSession } from "next-auth/react";
import Sidebar from "@/components/Sidebar";
import { useTheme } from "@/lib/theme";
export default function AppLayout({ children }: { children: React.ReactNode }) {
const { status } = useSession();
const router = useRouter();
const { theme } = useTheme();
useEffect(() => {
if (status === "unauthenticated") {
router.push("/");
}
}, [status, router]);
if (status === "loading") {
return (
<div className="min-h-screen flex items-center justify-center" style={{ background: "var(--bg)" }}>
<span className="font-mono text-xs tracking-widest animate-pulse" style={{ color: "var(--accent)" }}>
CHARGEMENT...
</span>
</div>
);
}
if (status !== "authenticated") return null;
return (
<div className="flex min-h-screen" style={{ background: "var(--bg)" }}>
<Sidebar />
<main className="ml-56 flex-1 p-8" style={{ background: "var(--bg)" }}>
{children}
</main>
</div>
);
}

40
components/DragonEye.tsx
View File

@@ -1,9 +1,12 @@
"use client"; "use client";
import { useEffect, useRef } from "react"; import { useEffect, useRef } from "react";
import { useTheme } from "@/lib/theme";
export default function DragonEye({ size = 60 }: { size?: number }) { export default function DragonEye({ size = 60 }: { size?: number }) {
const irisRef = useRef<HTMLDivElement>(null); const irisRef = useRef<HTMLDivElement>(null);
const { theme } = useTheme();
const isLight = theme === "light";
useEffect(() => { useEffect(() => {
const handleMouseMove = (e: MouseEvent) => { const handleMouseMove = (e: MouseEvent) => {
@@ -26,6 +29,22 @@ export default function DragonEye({ size = 60 }: { size?: number }) {
const h = size; const h = size;
const w = size * 1.6; const w = size * 1.6;
// Light theme: sky-blue palette
const glowColor = isLight ? "#38bdf8" : "#4aff8c";
const eyeBg = isLight
? "radial-gradient(ellipse at 40% 35%, #e0f7ff, #b8eeff)"
: "radial-gradient(ellipse at 40% 35%, #0a1a0a, #020402)";
const eyeBorder = isLight ? "rgba(56,189,248,0.4)" : "rgba(74,255,140,0.25)";
const eyeShadow = isLight
? "0 0 20px rgba(56,189,248,0.25), inset 0 0 10px rgba(56,189,248,0.1)"
: "0 0 20px rgba(74,255,140,0.1), inset 0 0 20px rgba(0,0,0,0.8)";
const irisBg = isLight
? "radial-gradient(ellipse at 40% 35%, #7dd3fc 0%, #0ea5e9 35%, #0369a1 70%)"
: "radial-gradient(ellipse at 40% 35%, #1aff6a 0%, #0a8a3a 35%, #022a12 70%)";
const irisShadow = isLight ? "0 0 12px rgba(56,189,248,0.6)" : "0 0 12px rgba(74,255,140,0.4)";
const pupilBg = isLight ? "#001a2e" : "#010801";
const eyelidBg = isLight ? "#dbeafe" : "#0a0d0f";
return ( return (
<div <div
className="relative flex-shrink-0" className="relative flex-shrink-0"
@@ -35,7 +54,7 @@ export default function DragonEye({ size = 60 }: { size?: number }) {
<div <div
className="absolute inset-0 rounded-full blur-md opacity-30" className="absolute inset-0 rounded-full blur-md opacity-30"
style={{ style={{
background: "radial-gradient(ellipse, #4aff8c 0%, transparent 70%)", background: `radial-gradient(ellipse, ${glowColor} 0%, transparent 70%)`,
borderRadius: "50%", borderRadius: "50%",
}} }}
/> />
@@ -45,9 +64,9 @@ export default function DragonEye({ size = 60 }: { size?: number }) {
className="absolute inset-0 overflow-hidden" className="absolute inset-0 overflow-hidden"
style={{ style={{
borderRadius: "50%", borderRadius: "50%",
background: "radial-gradient(ellipse at 40% 35%, #0a1a0a, #020402)", background: eyeBg,
border: "1px solid rgba(74,255,140,0.25)", border: `1px solid ${eyeBorder}`,
boxShadow: "0 0 20px rgba(74,255,140,0.1), inset 0 0 20px rgba(0,0,0,0.8)", boxShadow: eyeShadow,
animation: "blink 9s ease-in-out infinite", animation: "blink 9s ease-in-out infinite",
}} }}
> >
@@ -60,8 +79,8 @@ export default function DragonEye({ size = 60 }: { size?: number }) {
width: h * 0.65, width: h * 0.65,
height: h * 0.65, height: h * 0.65,
borderRadius: "50%", borderRadius: "50%",
background: "radial-gradient(ellipse at 40% 35%, #1aff6a 0%, #0a8a3a 35%, #022a12 70%)", background: irisBg,
boxShadow: "0 0 12px rgba(74,255,140,0.4)", boxShadow: irisShadow,
transition: "transform 0.08s ease-out", transition: "transform 0.08s ease-out",
}} }}
> >
@@ -72,19 +91,20 @@ export default function DragonEye({ size = 60 }: { size?: number }) {
transform: "translate(-50%, -50%)", transform: "translate(-50%, -50%)",
width: h * 0.1, width: h * 0.1,
height: h * 0.55, height: h * 0.55,
background: "#010801", background: pupilBg,
borderRadius: "50%", borderRadius: "50%",
boxShadow: "0 0 6px rgba(0,0,0,0.9)", boxShadow: "0 0 6px rgba(0,0,0,0.9)",
animation: "pupilDilate 7s ease-in-out infinite", animation: "pupilDilate 7s ease-in-out infinite",
}} }}
/> />
{/* Highlight */} {/* Highlight */}
<div <div
className="absolute" className="absolute"
style={{ style={{
top: "18%", left: "22%", top: "18%", left: "22%",
width: h * 0.12, height: h * 0.08, width: h * 0.12, height: h * 0.08,
background: "rgba(200,255,220,0.4)", background: isLight ? "rgba(255,255,255,0.7)" : "rgba(200,255,220,0.4)",
borderRadius: "50%", borderRadius: "50%",
transform: "rotate(-20deg)", transform: "rotate(-20deg)",
filter: "blur(1px)", filter: "blur(1px)",
@@ -97,7 +117,7 @@ export default function DragonEye({ size = 60 }: { size?: number }) {
className="absolute top-0 left-0 right-0" className="absolute top-0 left-0 right-0"
style={{ style={{
height: "30%", height: "30%",
background: "linear-gradient(to bottom, #0a0d0f, rgba(10,13,15,0.5))", background: `linear-gradient(to bottom, ${eyelidBg}, transparent)`,
borderRadius: "50% 50% 0 0 / 80% 80% 0 0", borderRadius: "50% 50% 0 0 / 80% 80% 0 0",
zIndex: 2, zIndex: 2,
}} }}
@@ -107,7 +127,7 @@ export default function DragonEye({ size = 60 }: { size?: number }) {
className="absolute bottom-0 left-0 right-0" className="absolute bottom-0 left-0 right-0"
style={{ style={{
height: "22%", height: "22%",
background: "linear-gradient(to top, #0a0d0f, rgba(10,13,15,0.5))", background: `linear-gradient(to top, ${eyelidBg}, transparent)`,
borderRadius: "0 0 50% 50% / 0 0 80% 80%", borderRadius: "0 0 50% 50% / 0 0 80% 80%",
zIndex: 2, zIndex: 2,
}} }}

36
components/Sidebar.tsx
View File

@@ -3,6 +3,8 @@
import { useRouter, usePathname } from "next/navigation"; import { useRouter, usePathname } from "next/navigation";
import { signOut } from "next-auth/react"; import { signOut } from "next-auth/react";
import DragonEye from "@/components/DragonEye"; import DragonEye from "@/components/DragonEye";
import ThemeToggleButton from "@/components/ThemeToggleButton";
import { useTheme } from "@/lib/theme";
import { import {
LayoutDashboard, LayoutDashboard,
Twitch, Twitch,
@@ -25,20 +27,28 @@ const nav = [
export default function Sidebar() { export default function Sidebar() {
const router = useRouter(); const router = useRouter();
const pathname = usePathname(); const pathname = usePathname();
const { theme } = useTheme();
const isLight = theme === "light";
const handleLogout = () => { const handleLogout = () => {
signOut({ callbackUrl: "/" }); signOut({ callbackUrl: "/" });
}; };
const bg = isLight ? "bg-wy-light-surface" : "bg-wy-dark";
const border = isLight ? "border-wy-light-border" : "border-wy-border";
const textSec = isLight ? "text-wy-light-text-secondary" : "text-wy-text-secondary";
const textPri = isLight ? "text-wy-light-text-primary" : "text-wy-text-primary";
const title = isLight ? "text-wy-light-text-primary" : "text-white";
return ( return (
<aside className="fixed left-0 top-0 h-screen w-56 bg-wy-dark border-r border-wy-border flex flex-col z-50"> <aside className={`fixed left-0 top-0 h-screen w-56 ${bg} border-r ${border} flex flex-col z-50`}>
{/* Logo */} {/* Logo */}
<div className="flex items-center gap-3 px-5 py-6 border-b border-wy-border"> <div className={`flex items-center gap-3 px-5 py-6 border-b ${border}`}>
<DragonEye size={32} /> <DragonEye size={32} />
<div> <div>
<div className="text-[8px] font-mono tracking-[0.3em] text-acid-green/60 uppercase">Analytics</div> <div className={`text-[8px] font-mono tracking-[0.3em] ${isLight ? "text-sky-400/80" : "text-acid-green/60"} uppercase`}>Analytics</div>
<div className="text-base font-black tracking-widest text-white">WYVIEW</div> <div className={`text-base font-black tracking-widest ${title}`}>WYVIEW</div>
</div> </div>
</div> </div>
@@ -51,22 +61,30 @@ export default function Sidebar() {
onClick={() => router.push(href)} onClick={() => router.push(href)}
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-md text-left transition-all duration-150 group ${ className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-md text-left transition-all duration-150 group ${
active active
? "bg-acid-green/10 border border-acid-green/30 text-acid-green" ? isLight
: "border border-transparent text-wy-text-secondary hover:text-wy-text-primary hover:bg-white/[0.04]" ? "bg-sky-100 border border-sky-300 text-sky-600"
: "bg-acid-green/10 border border-acid-green/30 text-acid-green"
: `border border-transparent ${textSec} hover:${textPri} ${isLight ? "hover:bg-sky-50" : "hover:bg-white/[0.04]"}`
}`} }`}
> >
<Icon size={16} className="flex-shrink-0" /> <Icon size={16} className="flex-shrink-0" />
<span className="text-sm font-medium">{label}</span> <span className="text-sm font-medium">{label}</span>
{active && <span className="ml-auto w-1.5 h-1.5 rounded-full bg-acid-green" />} {active && (
<span className={`ml-auto w-1.5 h-1.5 rounded-full ${isLight ? "bg-sky-500" : "bg-acid-green"}`} />
)}
</button> </button>
); );
})} })}
</nav> </nav>
<div className="px-3 py-4 border-t border-wy-border"> <div className={`px-3 py-4 border-t ${border} flex flex-col gap-2`}>
{/* Theme toggle */}
<div className="flex justify-end pr-1">
<ThemeToggleButton />
</div>
<button <button
onClick={handleLogout} onClick={handleLogout}
className="w-full flex items-center gap-3 px-3 py-2.5 rounded-md text-wy-text-secondary hover:text-red-400 hover:bg-red-500/10 border border-transparent hover:border-red-500/25 transition-all duration-150" className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-md ${textSec} hover:text-red-400 hover:bg-red-500/10 border border-transparent hover:border-red-500/25 transition-all duration-150`}
> >
<LogOut size={16} /> <LogOut size={16} />
<span className="text-sm font-medium">Déconnexion</span> <span className="text-sm font-medium">Déconnexion</span>

13
components/StatCard.tsx
View File

@@ -18,15 +18,20 @@ const accentColors = {
export default function StatCard({ label, value, sub, accent = "green", delta, deltaUp }: StatCardProps) { export default function StatCard({ label, value, sub, accent = "green", delta, deltaUp }: StatCardProps) {
const colors = accentColors[accent]; const colors = accentColors[accent];
return ( return (
<div className={`bg-wy-surface border border-wy-border border-t-2 ${colors.border} rounded-lg p-5 relative group hover:-translate-y-0.5 transition-transform duration-200`}> <div
<div className="text-xs font-mono tracking-widest text-wy-text-secondary uppercase mb-3"> className={`border border-t-2 ${colors.border} rounded-lg p-5 relative group hover:-translate-y-0.5 transition-transform duration-200`}
style={{ background: "var(--surface)", borderColor: "var(--border)" }}
>
<div className="text-xs font-mono tracking-widest uppercase mb-3" style={{ color: "var(--text-secondary)" }}>
{label} {label}
</div> </div>
<div className={`text-4xl font-black tracking-tight ${colors.val} leading-none mb-1`}> <div className={`text-4xl font-black tracking-tight ${colors.val} leading-none mb-1`}>
{value === "—" || value === 0 ? <span className="text-wy-text-secondary">—</span> : value} {value === "—" || value === 0
? <span style={{ color: "var(--text-secondary)" }}>—</span>
: value}
</div> </div>
{sub && ( {sub && (
<div className="text-xs text-wy-text-secondary font-mono mt-1">{sub}</div> <div className="text-xs font-mono mt-1" style={{ color: "var(--text-secondary)" }}>{sub}</div>
)} )}
{delta && ( {delta && (
<div className={`absolute top-4 right-4 text-xs font-mono tracking-wider px-2 py-1 rounded-md border ${ <div className={`absolute top-4 right-4 text-xs font-mono tracking-wider px-2 py-1 rounded-md border ${

19
components/ThemeToggleButton.tsx Normal file
View File

@@ -0,0 +1,19 @@
"use client";
import { Moon, Sun } from "lucide-react";
import { useTheme } from "@/lib/theme";
export default function ThemeToggleButton() {
const { theme, toggle } = useTheme();
return (
<button
onClick={toggle}
aria-label="Changer de thème"
className="flex items-center justify-center w-8 h-8 rounded-md border border-wy-border text-wy-text-secondary hover:text-wy-text-primary hover:bg-white/[0.06] transition-all duration-150"
>
{theme === "dark" ? <Sun size={15} /> : <Moon size={15} />}
</button>
);
}

49
lib/theme.tsx Normal file
View File

@@ -0,0 +1,49 @@
"use client";
import { createContext, useContext, useEffect, useState } from "react";
type Theme = "dark" | "light";
interface ThemeContextType {
theme: Theme;
toggle: () => void;
}
const ThemeContext = createContext<ThemeContextType>({
theme: "dark",
toggle: () => {},
});
export function ThemeProvider({ children }: { children: React.ReactNode }) {
const [theme, setTheme] = useState<Theme>("dark");
useEffect(() => {
const stored = localStorage.getItem("wyview-theme") as Theme | null;
if (stored) setTheme(stored);
}, []);
useEffect(() => {
const root = document.documentElement;
if (theme === "light") {
root.classList.add("light");
root.classList.remove("dark");
} else {
root.classList.add("dark");
root.classList.remove("light");
}
localStorage.setItem("wyview-theme", theme);
}, [theme]);
const toggle = () => setTheme((t) => (t === "dark" ? "light" : "dark"));
return (
<ThemeContext.Provider value={{ theme, toggle }}>
{children}
</ThemeContext.Provider>
);
}
export function useTheme() {
return useContext(ThemeContext);
}

7
tailwind.config.js
View File

@@ -1,5 +1,6 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
darkMode: "class",
content: [ content: [
"./app/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}",
"./components/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}",
@@ -14,6 +15,12 @@ module.exports = {
"wy-border": "#30363d", "wy-border": "#30363d",
"wy-text-primary": "#c9d1d9", "wy-text-primary": "#c9d1d9",
"wy-text-secondary": "#8b949e", "wy-text-secondary": "#8b949e",
// Light theme
"wy-light-bg": "#f0f6ff",
"wy-light-surface": "#ffffff",
"wy-light-border": "#d0d7de",
"wy-light-text-primary": "#1c2128",
"wy-light-text-secondary": "#57606a",
}, },
}, },
}, },