From a28e0891d4dcde020b8b339936f2242e8d502d26 Mon Sep 17 00:00:00 2001 From: Esteban Date: Thu, 27 Aug 2026 22:41:14 +0200 Subject: [PATCH] Patch img home page --- .gitignore | 6 ++-- README.md | 4 +-- functions/listSkills.php | 3 +- index.php | 5 +--- pages/cgu.php | 21 +++++--------- styles/primary_css.css | 63 ++++++++++++++++++++++++++++++---------- 6 files changed, 62 insertions(+), 40 deletions(-) diff --git a/.gitignore b/.gitignore index 80efee0..c7dda01 100644 --- a/.gitignore +++ b/.gitignore @@ -1,13 +1,11 @@ -# Config Claude Code -.claude/ - # macOS .DS_Store **/.DS_Store -# Éditeurs +# Éditeurs et outils locaux .vscode/ .idea/ +.claude/ *.iml # Logs diff --git a/README.md b/README.md index 621cb9f..c845d18 100644 --- a/README.md +++ b/README.md @@ -11,8 +11,8 @@ La réutilisation du projet est autorisée, sous réserve que les fichiers `idCo ## Informations techniques - La base de données peut être restaurée rapidement à l'aide du fichier `scriptDatabase.sql`. -- Le CSS a été généré avec l'aide d'une intelligence artificielle. -- Le code PHP a été réalisé en grande partie par l'auteur. +- Le site est développé en PHP, sans framework, avec MySQL/MariaDB pour le stockage. +- Le déploiement se fait via Docker (voir le dossier `docker/`). ## Signalement de vulnérabilité diff --git a/functions/listSkills.php b/functions/listSkills.php index 6972ceb..dc5482d 100644 --- a/functions/listSkills.php +++ b/functions/listSkills.php @@ -34,7 +34,8 @@ function recupererSkillParId($id) { // Icônes Devicon dont la couleur de marque "colored" est noire ou quasi-noire (vérifié dans // devicon.min.css : linux #000, apple #000, bash #293138, ansible #1a1918) : invisibles sur -// la tuile sombre du bandeau. On les affiche dans la couleur claire par défaut à la place. +// la tuile du bandeau en thème sombre. On leur laisse la couleur par défaut, qui suit le +// thème actif (voir .logo-tile i:not(.colored) dans styles/primary_css.css). const DEVICON_COLORED_TROP_SOMBRE = ['devicon-linux-plain', 'devicon-apple-plain', 'devicon-bash-plain', 'devicon-ansible-plain']; // Fonction interne qui affiche le visuel (icône ou image) d'un item de compétence. diff --git a/index.php b/index.php index 457c57c..c35de83 100644 --- a/index.php +++ b/index.php @@ -1,10 +1,7 @@ L’ensemble des éléments présents sur le site, notamment les textes, visuels, illustrations, logos, éléments graphiques, structure, code source et contenus originaux, est protégé par le droit de la propriété intellectuelle, sauf mention contraire.

Toute reproduction, représentation, diffusion, adaptation, modification ou exploitation, totale ou partielle, sans autorisation préalable écrite, est interdite, sauf dans les cas autorisés par la loi.

-

4. Utilisation de l’intelligence artificielle

-

Le site et certains de ses éléments ont pu être conçus avec l'assistance d'outils d’intelligence artificielle. Cela peut notamment concerner la génération ou l’adaptation de feuilles de style CSS, l’aide à la rédaction, l’autocomplétion de code, la génération de commentaires, de structures répétitives, de formulaires simples ou de requêtes basiques.

-

L’éditeur précise cependant que le développement principal du projet, notamment le code PHP, HTML et JavaScript, l’architecture générale, l’intégration, les choix techniques et la personnalisation globale du site, ont été réalisés majoritairement par un humain, à savoir Esteban MOUSSU.

-

L'utilisation d'outils tels que GitHub Copilot, Devin ou d'autres assistants similaires constitue une aide au développement et non une substitution complète au travail humain.

- -

5. Hébergement et édition

+

4. Hébergement et édition

Ce projet est entièrement développé par Esteban MOUSSU.

Le site est hébergé en 2026 par l’entreprise TerraTech Hebergement, en collaboration avec l’association Eldoria Network.

Les informations diffusées sur le site le sont sous la responsabilité de son éditeur.

-

6. Exactitude des informations

+

5. Exactitude des informations

L’éditeur s’efforce de fournir des informations aussi exactes et à jour que possible. Toutefois, aucune garantie n’est donnée quant à l’exactitude, l’exhaustivité ou l’actualité des contenus publiés.

L’utilisateur reconnaît utiliser les informations disponibles sur le site sous sa seule responsabilité.

-

7. Liens externes

+

6. Liens externes

Le site peut contenir des liens vers des sites tiers. Ces liens sont fournis à titre informatif. L’éditeur ne saurait être tenu responsable du contenu, du fonctionnement ou des politiques de confidentialité de ces sites externes.

-

8. Responsabilité

+

7. Responsabilité

L’éditeur ne pourra être tenu responsable des dommages directs ou indirects résultant de l’utilisation du site, d’une interruption temporaire, d’un dysfonctionnement technique ou d’une impossibilité d’accès.

L’utilisateur demeure seul responsable de l’usage qu’il fait du site et des informations qu’il y consulte.

-

9. Données personnelles

+

8. Données personnelles

Le site peut proposer un ou plusieurs formulaires de contact. Les données éventuellement transmises par l’utilisateur sont uniquement destinées au traitement de sa demande, sauf mention contraire clairement indiquée.

Conformément à la réglementation applicable, l’utilisateur peut demander l’accès, la rectification ou la suppression de ses données en contactant l’éditeur du site.

-

10. Sécurité

+

9. Sécurité

L’utilisateur s’interdit de perturber le bon fonctionnement du site, d’introduire des programmes malveillants, de tenter un accès non autorisé ou de porter atteinte à l’intégrité technique du service.

-

11. Modification des CGU

+

10. Modification des CGU

L’éditeur se réserve le droit de modifier à tout moment les présentes CGU. Les modifications prennent effet dès leur publication sur cette page.

-

12. Droit applicable

+

11. Droit applicable

Les présentes CGU sont soumises au droit français. En cas de litige, et à défaut de résolution amiable, les juridictions compétentes seront celles déterminées par les règles de droit commun.

diff --git a/styles/primary_css.css b/styles/primary_css.css index e22eab7..1b262ff 100644 --- a/styles/primary_css.css +++ b/styles/primary_css.css @@ -1,5 +1,3 @@ -/* ---- LE CSS EST SOIT GÉNÉRÉ PAR INTEL ARTI SOIT RÉUTILISÉ D'UN AUTRE PROJET ---- */ - /* ---- Variables globales du thème (sombre par défaut) ---- */ :root { --bg: #0a0a10; @@ -1387,10 +1385,11 @@ img { } } -/* Carte derrière chaque logo, avec un fond SOMBRE FIXE (pas var(--surface), qui devient - blanc en thème clair) : certains logos PNG ont un fond noir non transparent intégré à - l'image, qui doit rester sur un fond sombre constant pour ne pas ressortir moche - (carré noir visible) quel que soit le thème actif sur le reste du site */ +/* Carte derrière chaque logo : suit le thème actif comme le reste des cartes du site. + C'est possible parce que les logos posés dessus ne sont plus affichés tels quels mais + aplatis en silhouette monochrome adaptée au thème (voir la règle suivante) : sans ça, + un logo blanc sur fond transparent (3S Sécurité, TerraTech) disparaîtrait sur une + tuile claire, et un logo noir (Magyar, Gamm Vert) sur une tuile sombre */ .logo-tile { flex-shrink: 0; display: flex; @@ -1399,8 +1398,8 @@ img { width: 160px; height: 90px; padding: 18px 24px; - background: #14141c; - border: 1px solid rgba(255, 255, 255, 0.08); + background: var(--surface); + border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; @@ -1409,44 +1408,76 @@ img { a.logo-tile:hover { transform: translateY(-3px); border-color: var(--accent-border); - background: #1c1c26; + background: var(--surface-2); } +/* Bandeau "Ils m'ont fait confiance" : les logos fournis par les entreprises ont des + teintes très variables (certains blancs, d'autres noirs, tous sur fond transparent). + brightness(0) les aplatit en silhouette noire, invert(1) la repasse en blanc pour le + thème sombre : lisible dans les deux thèmes, et rendu uniforme façon mur de partenaires. + Le bandeau des outils, lui, garde les vraies couleurs (voir .logo-marquee-tools) */ .logo-tile img, .logo-tile i { max-width: 100%; max-height: 100%; object-fit: contain; - filter: grayscale(1) opacity(0.6); + filter: brightness(0) invert(1) opacity(0.55); transition: filter 0.25s ease; } +[data-theme="light"] .logo-tile img, +[data-theme="light"] .logo-tile i { + filter: brightness(0) opacity(0.45); +} + /* Taille de la glyphe pour les icônes Devicon (les images gardent leur taille naturelle) */ -/* Couleur fixe (pas var(--text), qui devient sombre en thème clair et rendrait - l'icône invisible sur le fond de tuile qui lui reste volontairement sombre) */ +/* La couleur suit le thème, sinon l'icône serait invisible sur la tuile en thème clair. + :not(.colored) laisse intactes les icônes Devicon affichées aux couleurs de la marque + dans le bandeau des outils (voir afficherVisuelItem dans functions/listSkills.php) */ .logo-tile i { font-size: 44px; line-height: 1; +} + +.logo-tile i:not(.colored) { color: #e8e8f2; } +[data-theme="light"] .logo-tile i:not(.colored) { + color: #191924; +} + .logo-tile:hover img, .logo-tile:hover i { - filter: grayscale(0) opacity(1); + filter: brightness(0) invert(1) opacity(1); } -/* Sur mobile le survol n'existe pas : on affiche les logos en couleur directement */ +[data-theme="light"] .logo-tile:hover img, +[data-theme="light"] .logo-tile:hover i { + filter: brightness(0) opacity(1); +} + +/* Sur mobile le survol n'existe pas : on affiche les logos plus contrastés directement */ @media (hover: none) { .logo-tile img, .logo-tile i { - filter: grayscale(0) opacity(0.85); + filter: brightness(0) invert(1) opacity(0.8); + } + + [data-theme="light"] .logo-tile img, + [data-theme="light"] .logo-tile i { + filter: brightness(0) opacity(0.7); } } /* Bandeau "Outils" : pas de niveaux de gris, on veut que les vrais logos des outils soient reconnaissables immédiatement, sans avoir à survoler chaque tuile */ .logo-marquee-tools .logo-tile img, -.logo-marquee-tools .logo-tile i { +.logo-marquee-tools .logo-tile i, +.logo-marquee-tools .logo-tile:hover img, +.logo-marquee-tools .logo-tile:hover i, +[data-theme="light"] .logo-marquee-tools .logo-tile img, +[data-theme="light"] .logo-marquee-tools .logo-tile i { filter: none; opacity: 1; }