alexandrump/sbsports
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add branding assets and refine login/sidebar UI
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse Source
This commit is contained in:
alexandrump
2026-04-22 02:00:10 +02:00
parent 898d021ae8
commit 975efc30a4
8 changed files with 1146 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/jpeg" href="/favicon.jpg" />
<title>Sanae Benkhlifa Sports - Système de Gestion</title>
</head>
<body>

BIN
public/favicon.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 137 KiB

566
public/favicon.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 4.0 MiB

BIN
src/assets/SB Sports.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 137 KiB

566
src/assets/SBsports.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 4.0 MiB

4
src/assets/main.css
View File

@@ -12,6 +12,10 @@ body {
background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
}
.gradient-sidebar {
background: linear-gradient(160deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%);
}
.card-shadow {
box-shadow:
0 10px 15px -3px rgba(0, 0, 0, 0.1),

35
src/components/AppSidebar.vue
View File

@@ -8,6 +8,7 @@ import {
History,
UserCog,
} from "lucide-vue-next";
import logoUrl from "../assets/SB Sports.jpg";
const route = useRoute();
@@ -55,36 +56,14 @@ const isActive = (name) => route.name === name;
<template>
<nav
class="lg:w-72 w-full gradient-brand text-white flex flex-col p-6 shadow-xl"
class="lg:w-72 w-full gradient-sidebar text-white flex flex-col p-6 shadow-xl"
>
<!-- Logo -->
<div class="flex items-center gap-3 mb-10 overflow-hidden">
<div class="bg-white p-2 rounded-lg logo-shine">
<svg
width="40"
height="40"
viewBox="0 0 100 100"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="50" cy="50" r="45" fill="#1e40af" />
<path
d="M30 70 L45 30 L55 50 L70 20"
stroke="white"
stroke-width="8"
stroke-linecap="round"
stroke-linejoin="round"
/>
<circle cx="70" cy="20" r="5" fill="white" />
</svg>
</div>
<div>
<h1 class="font-black text-xl leading-tight">SB SPORT</h1>
<p
class="text-[10px] text-blue-100 uppercase tracking-widest font-medium"
>
Sanae Benkhlifa
</p>
<div class="mb-10 px-2 flex items-center gap-4 lg:block">
<img :src="logoUrl" alt="SB Sport" class="w-24 h-24 lg:w-full lg:h-auto object-contain rounded-2xl shrink-0" />
<div class="lg:hidden">
<p class="font-black text-lg leading-tight">P.E. Prof.</p>
<p class="font-bold text-base text-blue-100">Sanae Benkhlifa</p>
</div>
</div>

25
src/views/LoginView.vue
View File

@@ -3,6 +3,7 @@ import { ref } from "vue";
import { useRouter } from "vue-router";
import { useAuthStore } from "../stores/auth";
import { LogIn, ShieldCheck } from "lucide-vue-next";
import logoUrl from "../assets/SB Sports.jpg";
const router = useRouter();
const auth = useAuthStore();
@@ -31,29 +32,7 @@ async function handleLogin() {
<div class="bg-white rounded-2xl shadow-2xl w-full max-w-md p-10">
<!-- Logo -->
<div class="flex flex-col items-center mb-8">
<div class="bg-blue-900 p-4 rounded-2xl mb-4 shadow-lg">
<svg
width="48"
height="48"
viewBox="0 0 100 100"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="50" cy="50" r="45" fill="#1e40af" />
<path
d="M30 70 L45 30 L55 50 L70 20"
stroke="white"
stroke-width="8"
stroke-linecap="round"
stroke-linejoin="round"
/>
<circle cx="70" cy="20" r="5" fill="white" />
</svg>
</div>
<h1 class="text-2xl font-black text-blue-900">SB SPORT</h1>
<p class="text-xs text-gray-400 uppercase tracking-widest mt-1">
Sanae Benkhlifa
</p>
<img :src="logoUrl" alt="SB Sport" class="h-20 w-auto object-contain mb-2" />
</div>
<!-- Form -->