From 4ce3ef223e2fc74e867ec2f2502bfa0795037d7e Mon Sep 17 00:00:00 2001 From: TRUkae Date: Wed, 17 Sep 2025 11:38:32 +0000 Subject: [PATCH] Upload files to "/" --- home.html | 23 +++++ index.html | 81 ++++++++++++++++ script.js | 57 +++++++++++ styles.css | 271 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 432 insertions(+) create mode 100644 home.html create mode 100644 index.html create mode 100644 script.js create mode 100644 styles.css diff --git a/home.html b/home.html new file mode 100644 index 0000000..09bacc0 --- /dev/null +++ b/home.html @@ -0,0 +1,23 @@ + + + + + Portfolio L. Delforge + + + + + + + + +
+

Portfolio L. Delforge

+
+ Projets + Contact + Documentation +
+
+ + diff --git a/index.html b/index.html new file mode 100644 index 0000000..4da3f4e --- /dev/null +++ b/index.html @@ -0,0 +1,81 @@ + + + + + + Projets + + + + + + + + + + + +
Projets
+ + + +
+
+ + +
+ +
+ + +
+ +
+ +
+
Serveur Linux
+
+
Déploiement & maintenance
+
    +
    • +
    • +
    • +
+
+
+
Optimisation
+
    +
    • +
    • +
+
+
+ + +
+
Serveur Windows
+
+
Déploiement & maintenance
+
    +
    • +
    • +
    • +
+
+
+
Optimisation
+
    +
    • +
    • +
+
+
+
+
+ + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..f426eec --- /dev/null +++ b/script.js @@ -0,0 +1,57 @@ +document.addEventListener('DOMContentLoaded', function() { + const tabs = document.querySelectorAll('.tab'); + const panels = document.querySelectorAll('.tab-panel'); + const searchBar = document.querySelector('.search-bar'); + + // Fonction pour retirer le surlignage de tous les items d'un panel + function clearHighlights(panel) { + panel.querySelectorAll('.checklist li').forEach(li => { + li.classList.remove('highlight'); + }); + } + + // Gestion des onglets + tabs.forEach((tab, idx) => { + tab.addEventListener('click', function() { + tabs.forEach(t => t.classList.remove('active')); + this.classList.add('active'); + panels.forEach((panel, pIdx) => { + if (idx === pIdx) { + panel.classList.add('active'); + clearHighlights(panel); + } else { + panel.classList.remove('active'); + } + }); + // Réinitialise la recherche lors du changement d'onglet + searchBar.value = ''; + }); + }); + + // Recherche avec surlignage et switch automatique d'onglet si besoin + searchBar.addEventListener('input', function() { + const query = this.value.toLowerCase(); + let foundInCurrent = false; + let foundInOther = -1; + + panels.forEach((panel, idx) => { + let found = false; + panel.querySelectorAll('.checklist li').forEach(li => { + const text = li.textContent.toLowerCase(); + if (query && text.includes(query)) { + li.classList.add('highlight'); + found = true; + } else { + li.classList.remove('highlight'); + } + }); + if (found && panel.classList.contains('active')) foundInCurrent = true; + if (found && !panel.classList.contains('active') && foundInOther === -1) foundInOther = idx; + }); + + // Si pas trouvé dans l'onglet actif mais trouvé ailleurs, switch d'onglet + if (!foundInCurrent && foundInOther !== -1) { + tabs[foundInOther].click(); + } + }); +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..bdbcd5f --- /dev/null +++ b/styles.css @@ -0,0 +1,271 @@ +/* 1. Général et fond */ +body { + margin: 0; + background: linear-gradient(135deg, #0d1120 0%, #1b2250 100%); + font-family: 'Segoe UI', Arial, sans-serif; + color: #f5f6fa; +} + +/* 2. Conteneur principal centré et responsive */ +.page-container { + max-width: 820px; + margin: 2rem auto; + padding: 4rem 2rem; /* vert (plus grand = moins haut) / hori */ + box-sizing: border-box; + width: 95vw; +} + + +/* 3. Navigation supérieure */ +.top-nav { + display: flex; + gap: 2.5rem; + justify-content: center; + padding: 1.2rem 0 0.5rem 0; + background: rgba(10, 20, 50, 0.85); + border-bottom: 2px solid #2a3ca6; + box-shadow: 0 2px 12px #2a3ca655; + border-radius: 12px 12px 0 0; + margin-bottom: 1.5rem; +} +.top-nav a { + color: #6ec6ff; + text-decoration: none; + font-weight: bold; + font-size: 1.15rem; + letter-spacing: 1px; + transition: color 0.2s, text-shadow 0.2s; +} +.top-nav a:hover { + color: #fff; + text-shadow: 0 0 8px #6ec6ff, 0 0 2px #fff; +} + +/* 4. Titre centré */ +.page-title { + text-align: center; + font-size: 2.3rem; + font-weight: 700; + margin-bottom: 2.2rem; + letter-spacing: 1px; + color: #e6ecff; + text-shadow: 0 0 16px #2a3ca6, 0 2px 12px #000a; + word-break: break-word; +} + +/* 5. Onglets et barre de recherche (centrés) */ +.tabs-search-bar { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 1.2rem; + margin-bottom: 2.2rem; +} +.tabs { + display: flex; + gap: 1.1rem; + justify-content: center; +} +.tab { + background: linear-gradient(90deg, #232b4a 0%, #2a3ca6 100%); + color: #bfc7e6; + border: 2px solid #2a3ca6; + border-radius: 12px 12px 0 0; + padding: 0.7rem 2.3rem; + font-size: 1.05rem; + font-weight: 600; + cursor: pointer; + opacity: 0.8; + transition: background 0.2s, color 0.2s, opacity 0.2s, border-color 0.2s; + text-transform: uppercase; + letter-spacing: 1px; +} +.tab.active { + background: linear-gradient(90deg, #3e51b5 0%, #6ec6ff 100%); + color: #fff; + opacity: 1; + border-color: #6ec6ff; + box-shadow: 0 2px 8px #6ec6ff55, 0 0 8px #fff2; +} +.tab:not(.active):hover { + opacity: 1; + background: #28325a; + color: #e6ecff; + border-color: #3e51b5; +} + +/* 6. Barre de recherche */ +.search-bar { + background: #232b4a; + color: #e6ecff; + border: 2px solid #2a3ca6; + border-radius: 20px; + padding: 0.7rem 1.5rem; + font-size: 1rem; + width: 220px; + max-width: 100vw; + outline: none; + transition: border-color 0.2s, box-shadow 0.2s; + box-shadow: 0 2px 8px #3949ab22; +} +.search-bar:focus { + border-color: #6ec6ff; + box-shadow: 0 0 10px #6ec6ff88; +} +.search-bar::placeholder { + color: #bfc7e6; + opacity: 0.7; +} + +/* 7. Contenu des onglets */ +.tab-content { + background: rgba(20, 30, 60, 0.92); + border-radius: 0 0 14px 14px; + box-shadow: 0 6px 32px #2a3ca644; + padding: 2.2rem 2.5rem; + margin-bottom: 2rem; + width: 100%; + box-sizing: border-box; +} +.tab-panel { + display: none; +} +.tab-panel.active { + display: block; + animation: fadeInPanel 0.4s; +} +@keyframes fadeInPanel { + from { opacity: 0; transform: translateY(20px);} + to { opacity: 1; transform: translateY(0);} +} + +/* 8. Sections et checklist */ +.section { + margin-bottom: 2.5rem; + background: #181c30; + border-radius: 10px; + padding: 1.2rem 1.5rem; + box-shadow: 0 2px 8px #232b4a22; + border-left: 4px solid #2a3ca6; +} +.section-title { + font-size: 1.2rem; + font-weight: 700; + margin-bottom: 1.1rem; + color: #bfc7e6; + letter-spacing: 0.5px; +} +.subsection { + margin-bottom: 1.2rem; + background: #232b4a; + border-radius: 7px; + padding: 0.9rem 1.2rem; +} +.subsection-title { + font-size: 1.07rem; + font-weight: 600; + margin-bottom: 0.7rem; + color: #e6ecff; +} +.checklist { + list-style: none; + padding: 0; + margin: 0; +} +.checklist li { + margin-bottom: 0.6rem; + padding: 0.3rem 0.7rem; + border-radius: 4px; + transition: background 0.2s; +} +.checklist li.highlight { + background: linear-gradient(90deg, #2a3ca622, #6ec6ff44); + color: #fff; + font-weight: bold; +} +.checklist label { + cursor: pointer; + font-size: 1rem; + display: flex; + align-items: center; + gap: 0.5rem; +} +.checklist input[type="checkbox"] { + accent-color: #3e51b5; + width: 1.1rem; + height: 1.1rem; +} +.checklist a { + color: #8eaaff; + text-decoration: underline; + font-weight: 600; + transition: color 0.2s; +} +.checklist a:hover { + color: #e6ecff; +} + +/* 9. Responsive : adaptation pour petits écrans */ +@media (max-width: 900px) { + .page-container { + padding: 1.2rem 0.5rem; + max-width: 99vw; + } + .tab-content { + padding: 1.2rem 0.5rem; + } +} +@media (max-width: 700px) { + .top-nav { + flex-direction: column; + gap: 0.7rem; + font-size: 1rem; + padding: 0.7rem 0 0.3rem 0; + } + .page-title { + font-size: 1.5rem; + margin-bottom: 1.1rem; + } + .tabs-search-bar { + flex-direction: column; + gap: 0.7rem; + align-items: center; + } + .tabs { + flex-direction: column; + gap: 0.5rem; + width: 100%; + align-items: center; + } + .tab { + width: 100%; + min-width: unset; + font-size: 1rem; + border-radius: 8px; + text-align: center; + } + .search-bar { + width: 100%; + max-width: 100vw; + font-size: 1rem; + margin-top: 0.7rem; + } + .tab-content { + padding: 0.7rem 0.2rem; + } + .section, + .subsection { + padding: 0.7rem 0.3rem; + } +} +@media (max-width: 400px) { + .page-title { + font-size: 1.1rem; + margin: 1rem 0; + } + .tab { + font-size: 0.95rem; + padding: 0.5rem 0.7rem; + } +}