SPB Git forge
spboucher.ai ↗

spb/lou-ka

Public

Lou·Ka — tous les logements à louer du Québec, un seul endroit.

www.lou-ka.com
webappreal-estatequebecrental
232commits 1branches 0releases
172.9 MBsize
maindefault branch
2 days agolast push
HTML 98.9% Python 0.6%

Logo officiel Lou-Ka selon les spécifications géométriques complètes (grille 100×100) : cadre squircle vertical 60×90 rx 19 en contour orange dégradé #FF7A1A→#F56000 (7,5 u, extrémités rondes), porte parallélogramme charnières à gauche ouverte ≈30° (fuite ≈9°, marine #101A3D→#0B1330, coins adoucis), coin de lumière s'élargissant vers le bas entre porte et cadre droit, tapis de lumière trapèze seuil≈30→avant≈49 u évasé vers l'avant-droite (#FF8533→#FF6A00, bord avant arrondi touchant le cadre), reflet spéculaire blanc 28 % + ombre portée douce marine 14 % (liquid glass) ; favicon barre d'URL et icône PWA en version FLAT (aplats purs, contour épaissi, carré marine arrondi) ; espace icône↔wordmark ≈40 % ; captures README refaites avec le logo final

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Simon-Pierre Boucher committed 1 mo ago (Aug 15, 2026) parent a9b9ef8

13 changed files +73 −30

modified docs/screenshots/accueil-mobile.png +0 −0

Binary file not shown.

modified docs/screenshots/accueil.png +0 −0

Binary file not shown.

modified docs/screenshots/annonces.jpg +0 −0

Binary file not shown.

modified docs/screenshots/carte.jpg +0 −0

Binary file not shown.

modified docs/screenshots/fiche-logement.jpg +0 −0

Binary file not shown.

modified docs/screenshots/sources.png +0 −0

Binary file not shown.

modified docs/screenshots/stats.png +0 −0

Binary file not shown.

modified docs/screenshots/ville-quebec.jpg +0 −0

Binary file not shown.

modified docs/screenshots/villes.jpg +0 −0

Binary file not shown.

modified frontend/index.html +1 −1
@@ -18,7 +18,7 @@
18 18 <link rel="preconnect" href="https://fonts.googleapis.com" />
19 19 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
20 20 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
21 − <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%230B1330'/%3E%3Crect x='19' y='9' width='26' height='46' rx='8' fill='none' stroke='%23FF6A00' stroke-width='4'/%3E%3Cpolygon points='24.5,16 36,13.5 36,49 24.5,46' fill='%23ffffff'/%3E%3Cpolygon points='24.5,46 36,49 42,52.5 24.5,52.5' fill='%23FF6A00'/%3E%3C/svg%3E" />
21 + <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%230B1330'/%3E%3Crect x='14.6' y='5.9' width='34.8' height='52.2' rx='11' fill='none' stroke='%23FF6A00' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M19.8 12.9 L41.3 16.1 L39 45.6 L19.8 48.8 Z' fill='%23ffffff' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M22 48.2 L39.5 45.8 L45.5 55.9 L20 55.9 Z' fill='%23FF6A00'/%3E%3C/svg%3E" />
22 22 </head>
23 23 <body>
24 24 <div id="root"></div>
modified frontend/public/manifest.webmanifest +1 −1
@@ -9,7 +9,7 @@
9 9 "lang": "fr",
10 10 "icons": [
11 11 {
12 − "src": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Crect width='512' height='512' rx='112' fill='%230B1330'/%3E%3Crect x='152' y='72' width='208' height='368' rx='64' fill='none' stroke='%23FF6A00' stroke-width='32'/%3E%3Cpolygon points='196,128 288,108 288,392 196,368' fill='%23ffffff'/%3E%3Cpolygon points='196,368 288,392 336,420 196,420' fill='%23FF6A00'/%3E%3C/svg%3E",
12 + "src": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Crect width='512' height='512' rx='112' fill='%230B1330'/%3E%3Crect x='117' y='47' width='278' height='418' rx='88' fill='none' stroke='%23FF6A00' stroke-width='40' stroke-linejoin='round'/%3E%3Cpath d='M158 103 L330 129 L312 365 L158 390 Z' fill='%23ffffff' stroke='%23ffffff' stroke-width='16' stroke-linejoin='round'/%3E%3Cpath d='M176 386 L316 366 L364 447 L160 447 Z' fill='%23FF6A00'/%3E%3C/svg%3E",
13 13 "sizes": "512x512",
14 14 "type": "image/svg+xml",
15 15 "purpose": "any"
modified frontend/src/components/Logo.tsx +69 −26
@@ -1,60 +1,103 @@
1 1 // -----------------------------------------------------------------------------
2 2 // Lou-Ka — Agrégateur de logements à louer (province de Québec)
3 3 // Auteur : Simon-Pierre Boucher — contact@spboucher.ai
4 −// components/Logo.tsx : icône officielle Lou-Ka — la porte d'entrée.
5 −// Cadre orange #FF6A00 aux coins très arrondis ; porte entrouverte bleu
6 −// marine #0B1330 en perspective (ouverture vers la droite) ; tapis de
7 −// lumière orange projeté au sol. Effet « liquid glass » subtil.
4 +// components/Logo.tsx : icône officielle Lou-Ka — la porte entrouverte qui
5 +// laisse entrer la lumière. Spécifications géométriques (grille 100 × 100) :
6 +// A. cadre : rect vertical 60 × 90 centré, rx 19 (squircle), contour seul
7 +// 7,5 u, dégradé orange #FF7A1A → #F56000, extrémités arrondies ;
8 +// B. porte : parallélogramme charnières à GAUCHE, ouverte ≈ 30° vers le
9 +// spectateur, coins droits rapprochés verticalement (fuite ≈ 9°), marine
10 +// #101A3D → #0B1330, coins adoucis ; coin de lumière (espace négatif)
11 +// entre la porte et le cadre droit, s'élargissant vers le bas ;
12 +// C. tapis de lumière : trapèze au seuil (≈ 30 u) s'évasant vers l'avant
13 +// (≈ 49 u), bord avant arrondi touchant le trait bas du cadre,
14 +// dégradé #FF8533 → #FF6A00.
15 +// Ordre des calques : porte → tapis → cadre → reflet. Finition « liquid
16 +// glass » : reflet blanc 28 % sur la courbe haute + ombre portée douce
17 +// marine 14 %. Version flat (sans dégradés) : favicon + icône PWA.
8 18 // Baseline : « La porte d'entrée vers votre prochain chez-vous. »
9 19 // -----------------------------------------------------------------------------
10 20
11 −/** Icône seule (fond transparent — pour fonds clairs). */
21 +/** Icône seule (fond transparent — pour fonds clairs ; dark = porte blanche). */
12 22 export function LogoIcon({ size = 30, dark = false }: { size?: number; dark?: boolean }) {
13 23 // dark = version pour fond bleu marine : la porte devient blanche
14 − const door = dark ? "#ffffff" : "#0b1330";
15 − const doorTop = dark ? "#ffffff" : "#16204a";
24 + const doorTop = dark ? "#ffffff" : "#101a3d";
25 + const doorBot = dark ? "#e8edf8" : "#0b1330";
16 26 const uid = dark ? "lk-dark" : "lk-light-bg";
17 27 return (
18 28 <svg
19 29 className="logo-ico"
20 30 width={size}
21 31 height={size}
22 − viewBox="0 0 64 64"
32 + viewBox="0 0 100 100"
23 33 fill="none"
24 34 aria-hidden="true"
25 35 >
26 36 <defs>
37 + {/* cadre : orange plus lumineux en haut, plus saturé en bas */}
38 + <linearGradient id={`${uid}-frame`} x1="0" y1="0" x2="0" y2="1">
39 + <stop offset="0" stopColor="#ff7a1a" />
40 + <stop offset="1" stopColor="#f56000" />
41 + </linearGradient>
42 + {/* porte : micro-dégradé de profondeur */}
27 43 <linearGradient id={`${uid}-door`} x1="0" y1="0" x2="0" y2="1">
28 44 <stop offset="0" stopColor={doorTop} />
29 − <stop offset="1" stopColor={door} />
45 + <stop offset="1" stopColor={doorBot} />
30 46 </linearGradient>
31 − <linearGradient id={`${uid}-light`} x1="0" y1="0" x2="1" y2="0">
32 − <stop offset="0" stopColor="#ff6a00" />
33 − <stop offset="1" stopColor="#ff6a00" stopOpacity="0.72" />
34 − </linearGradient>
35 − <linearGradient id={`${uid}-frame`} x1="0" y1="0" x2="0" y2="1">
36 − <stop offset="0" stopColor="#ff7d1f" />
47 + {/* tapis : lumière chaude qui se diffuse vers l'avant */}
48 + <linearGradient id={`${uid}-light`} x1="0" y1="0" x2="0" y2="1">
49 + <stop offset="0" stopColor="#ff8533" />
37 50 <stop offset="1" stopColor="#ff6a00" />
38 51 </linearGradient>
52 + {/* ombre portée très douce, teinte marine — jamais d'ombre dure */}
53 + <filter id={`${uid}-soft`} x="-25%" y="-25%" width="150%" height="150%">
54 + <feDropShadow dx="0" dy="2" stdDeviation="3" floodColor="#0b1330" floodOpacity="0.14" />
55 + </filter>
39 56 </defs>
40 − {/* cadre : rectangle vertical, coins très arrondis, contour orange épais */}
41 − <rect x="15" y="5" width="34" height="54" rx="10" stroke={`url(#${uid}-frame)`} strokeWidth="4.5" />
42 − {/* porte entrouverte : parallélogramme en perspective, bord droit plus proche */}
43 − <polygon points="22,13.5 37,10.5 37,52 22,48.5" fill={`url(#${uid}-door)`} />
44 − {/* reflet « liquid glass » sur la porte */}
45 − <polygon points="24,13.2 28,12.4 28,49 24,48.2" fill="#ffffff" opacity="0.08" />
46 − {/* lumière projetée au sol — tapis d'accueil */}
47 − <polygon points="22,48.5 37,52 44.5,55.8 22,55.8" fill={`url(#${uid}-light)`} />
57 + <g filter={`url(#${uid}-soft)`}>
58 + {/* B — porte entrouverte : charnière gauche, fuite en perspective à droite ;
59 + le coin de lumière (espace vide) s'élargit vers le bas */}
60 + <path
61 + d="M29 17 L66 22.5 L62 73.5 L29 79 Z"
62 + fill={`url(#${uid}-door)`}
63 + stroke={`url(#${uid}-door)`}
64 + strokeWidth="4"
65 + strokeLinejoin="round"
66 + />
67 + {/* C — tapis de lumière : du seuil vers l'avant-droite, bord avant arrondi
68 + qui touche le trait inférieur du cadre */}
69 + <path
70 + d="M37 77.4 L63 73.2 L74.8 88.5 Q76.4 92.5 71.6 92.5 L34.5 92.5 Q30.2 92.5 32 88.6 Z"
71 + fill={`url(#${uid}-light)`}
72 + />
73 + {/* A — cadre : contour seul, coins très arrondis (squircle vertical) */}
74 + <rect
75 + x="20" y="5" width="60" height="90" rx="19"
76 + stroke={`url(#${uid}-frame)`}
77 + strokeWidth="7.5"
78 + strokeLinecap="round"
79 + strokeLinejoin="round"
80 + />
81 + {/* reflet spéculaire « liquid glass » sur la courbe supérieure */}
82 + <path
83 + d="M31 6.8 Q50 4.4 69 6.8"
84 + stroke="#ffffff"
85 + strokeOpacity="0.28"
86 + strokeWidth="2.6"
87 + strokeLinecap="round"
88 + />
89 + </g>
48 90 </svg>
49 91 );
50 92 }
51 93
52 −/** Wordmark complet : icône + « Lou-Ka » (Lou- marine, Ka orange). */
94 +/** Logo horizontal complet : icône + wordmark « Lou-Ka »
95 + * (Lou- marine, Ka orange ; espace icône↔texte ≈ 40 % de la largeur d'icône). */
53 96 export default function Logo({ size = 30 }: { size?: number }) {
54 97 return (
55 − <span style={{ display: "inline-flex", alignItems: "center" }}>
98 + <span style={{ display: "inline-flex", alignItems: "center", gap: size * 0.4 * 0.6 }}>
56 99 <LogoIcon size={size} />
57 − <span style={{ color: "#0b1330", fontWeight: 700 }}>
100 + <span style={{ color: "#0b1330", fontWeight: 700, letterSpacing: "-0.005em" }}>
58 101 Lou-<span style={{ color: "#ff6a00" }}>Ka</span>
59 102 </span>
60 103 </span>
modified frontend/src/styles.css +2 −2
@@ -104,7 +104,7 @@ h1 .hl, h2 .hl { color: var(--orange); }
104 104 letter-spacing: -0.03em; display: flex; align-items: center; line-height: 1;
105 105 color: var(--navy);
106 106 }
107 −.brand .logo-ico { margin-right: 9px; flex: none; }
107 +.brand .logo-ico { margin-right: 12px; flex: none; } /* ≈ 40 % de la largeur de l'icône */
108 108 .brand .ka { color: var(--orange); }
109 109 .brand-tag {
110 110 font-size: 11px; font-weight: 500; color: var(--ink-3);
@@ -677,7 +677,7 @@ h1 .hl, h2 .hl { color: var(--orange); }
677 677 /* ================= Footer ================= */
678 678 .footer { background: var(--navy); color: rgba(255, 255, 255, 0.72); margin-top: 20px; padding: 44px 0 max(40px, env(safe-area-inset-bottom)); font-size: 13px; }
679 679 .footer .fbrand { font-family: var(--font-display); font-weight: 700; font-size: 32px; color: var(--white); letter-spacing: -0.03em; margin-bottom: 4px; display: flex; align-items: center; }
680 −.footer .fbrand .logo-ico { margin-right: 10px; }
680 +.footer .fbrand .logo-ico { margin-right: 13px; }
681 681 .footer .fbrand .ka { color: var(--orange); }
682 682 .footer .fbaseline { color: rgba(255, 255, 255, 0.65); font-size: 14px; margin-bottom: 16px; }
683 683 .footer .fbaseline .hl { color: var(--orange); font-weight: 600; }
684 684