diff --git a/public/index.html b/public/index.html index 140ce98..638d408 100644 --- a/public/index.html +++ b/public/index.html @@ -5,17 +5,43 @@ Plain HTML site using GitLab Pages +
- URL du projet (sur gitlab, repo d'origine) + Repo gitlab + URL du projet (sur gitlab, repo d'origine) + + Repo gitlab !!!

Bonjour le Monde !

-

- Un projet simple construit grâce à un template sur GitLab -

+
+ +

+ Un projet super simple construit grâce à un template sur GitLab +

+ + +

+ Un projet super simple construit grâce à un template sur GitLab +

+ +
+ + +
+ + Nulla et aliquip labore duis irure veniam ipsum labore excepteur incididunt qui. Non nostrud aliquip cupidatat cupidatat enim commodo pariatur consequat quis. Fugiat nulla amet adipisicing eiusmod ullamco ullamco esse voluptate exercitation mollit velit ea aliquip aute eu. Cillum ex tempor dolore ad ex pariatur ex velit. Labore ad ad non ea cillum eiusmod sunt dolor dolore ipsum reprehenderit enim occaecat. Consequat culpa nisi in esse laborum velit non deserunt nostrud sit in veniam. Dolore veniam ad do incididunt est excepteur eiusmod esse Lorem sint. + + Exercitation ullamco nisi Lorem anim occaecat dolore incididunt eiusmod esse aute sunt deserunt laboris. Elit eiusmod consectetur laborum est. Lorem consequat aliqua nisi excepteur est laborum amet voluptate aliquip consequat ea labore sit reprehenderit enim. Eu consequat consequat excepteur reprehenderit ipsum in minim sint. Non ullamco mollit tempor excepteur occaecat dolore aliqua proident sint do. Exercitation duis enim laboris fugiat esse in. + + Excepteur nisi eiusmod ea ut excepteur nisi veniam duis reprehenderit consequat reprehenderit. Nostrud fugiat reprehenderit aliquip. Dolor adipisicing eiusmod do exercitation cupidatat eu. Et commodo veniam esse adipisicing. Exercitation nisi dolore Lorem anim sit non in. Et anim voluptate do proident aliquip occaecat. + +
+ + diff --git a/public/index_1.html b/public/index_1.html new file mode 100644 index 0000000..3d1d32e --- /dev/null +++ b/public/index_1.html @@ -0,0 +1,23 @@ + + + + + + Plain HTML site using GitLab Pages + + + + +
+ URL du projet (sur gitlab, repo d'origine) + + Repo gitlab !!! +
+ +

Bonjour le Monde !

+ +

+ Un projet simple construit grâce à un template sur GitLab +

+ + + diff --git a/public/script_html_infos.js b/public/script_html_infos.js new file mode 100644 index 0000000..008f304 --- /dev/null +++ b/public/script_html_infos.js @@ -0,0 +1,156 @@ +// Création de la boîte d'information +const infoBox = document.createElement('div'); +infoBox.id = 'info-box'; +infoBox.innerHTML = ` +
+ +
+
+
Élément :
+
ID :
+
Classe(s) :
+
Parent :
+
+`; + +// Ajout des styles +const style = document.createElement('style'); +style.textContent = ` + #info-box { + position: fixed; + top: 20px; + right: 20px; + background: #333; + color: white; + padding: 15px 20px; + border-radius: 8px; + min-width: 250px; + box-shadow: 0 4px 6px rgba(0,0,0,0.3); + font-size: 14px; + display: none; + z-index: 9999; + } + + #info-box.visible { + display: block; + } + + #info-box div { + margin: 5px 0; + } + + #info-box strong { + color: #4CAF50; + } + + #info-toggle { + margin-bottom: 10px; + padding-bottom: 10px; + border-bottom: 1px solid #555; + } + + #info-box.no_infos { + max-width: 200px; + display: block; + overflow: hidden; + min-width: auto; + } + + #info-box.no_infos { + #info-toggle { + border-bottom: 0px solid #555; + padding: 0; + margin: 0; + } + #toggle_hide_text { + display: none; + } + } + #info-toggle label { + cursor: pointer; + user-select: none; + } + + #info-content.hidden { + display: none; + } + #toggle-display { + cursor: pointer; + } +`; + +// Injection dans le DOM +document.head.appendChild(style); +document.body.appendChild(infoBox); + +// Récupération des éléments d'affichage +const elementTag = document.getElementById('element-tag'); +const elementId = document.getElementById('element-id'); +const elementClass = document.getElementById('element-class'); +const elementParent = document.getElementById('element-parent'); +const toggleCheckbox = document.getElementById('toggle-display'); +const infoContent = document.getElementById('info-content'); + +// Clé pour le localStorage +const STORAGE_KEY = 'info-box-hidden-state'; + +// Fonction pour appliquer l'état +function applyToggleState(isHidden) { + if (isHidden) { + infoContent.classList.add('hidden'); + infoBox.classList.add('no_infos'); + toggleCheckbox.checked = true; + } else { + infoContent.classList.remove('hidden'); + infoBox.classList.remove('no_infos'); + toggleCheckbox.checked = false; + } +} + +// Charger l'état depuis localStorage au démarrage +const savedState = localStorage.getItem(STORAGE_KEY); +if (savedState !== null) { + applyToggleState(savedState === 'true'); +} + +// Gestion du toggle +toggleCheckbox.addEventListener('change', function() { + const isHidden = this.checked; + applyToggleState(isHidden); + // Sauvegarder l'état dans localStorage + localStorage.setItem(STORAGE_KEY, isHidden); +}); + +// Écouter l'événement mouseover sur tout le document +document.addEventListener('mouseover', function(e) { + const el = e.target; + + // Ignorer la boîte d'info elle-même + if (el.closest('#info-box')) { + return; + } + + // Récupérer les informations + const tag = el.tagName.toLowerCase(); + const id = el.id || '(aucun)'; + const classes = el.className || '(aucune)'; + const parent = el.parentElement ? el.parentElement.tagName.toLowerCase() : '(aucun)'; + + // Afficher les informations + elementTag.textContent = tag; + elementId.textContent = id; + elementClass.textContent = classes; + elementParent.textContent = parent; + + // Rendre la boîte visible + infoBox.classList.add('visible'); +}); + +// Optionnel : cacher la boîte quand on quitte la page +document.addEventListener('mouseout', function(e) { + if (e.relatedTarget === null) { + infoBox.classList.remove('visible'); + } +}); \ No newline at end of file diff --git a/public/style.css b/public/style.css index 2839a1d..9e4d95b 100644 --- a/public/style.css +++ b/public/style.css @@ -4,21 +4,70 @@ body { max-width: 1280px; } +h1 { + text-align: center; +} + .navbar { - background-color: #FFF; + background-color: #FFF !important; border-radius: 2px; - max-width: 800px; + /* max-width: 800px; */ + position: sticky; + top: 0px; + width: 100%; + display: block; + max-width: none; + text-align: center; + a { + /* color: #000; */ + color: blue; + display: inline-block; + font-size: 15px; + padding: 10px 10px 10px 0; + text-decoration: none; + } + + a:hover { + color: red; + } } -.navbar a { - color: #000; - display: inline-block; - font-size: 15px; - padding: 10px 10px 10px 0; - text-decoration: none; + +#contenant { + background-color: red; + /* height: 2000px; */ + + /* https://www.w3schools.com/howto/howto_css_two_columns.asp */ + .left, .right { + float:left; + width: 50%; + box-sizing: border-box; + } + .left { + width: calc(50% - 30px); + padding-left: 10px; + } + .right { + border-left: 1px solid #000; + padding-left: 30px; + } + p:first-child { + margin-top: 0; + } + p:last-child { + margin-bottom: 0; + } + display: none; } -.navbar a:hover { - color: #ffffff; -} +#contenant_cols { + column-count: 3; + float: left; + + .text { + text-align: justify; + hyphens: auto; + display: block; + } +} \ No newline at end of file diff --git a/public_0/index.html b/public_0/index.html new file mode 100644 index 0000000..140ce98 --- /dev/null +++ b/public_0/index.html @@ -0,0 +1,21 @@ + + + + + + Plain HTML site using GitLab Pages + + + +
+ URL du projet (sur gitlab, repo d'origine) + Repo gitlab +
+ +

Bonjour le Monde !

+ +

+ Un projet simple construit grâce à un template sur GitLab +

+ + + diff --git a/public_0/style.css b/public_0/style.css new file mode 100644 index 0000000..2839a1d --- /dev/null +++ b/public_0/style.css @@ -0,0 +1,24 @@ +body { + font-family: sans-serif; + margin: auto; + max-width: 1280px; +} + +.navbar { + background-color: #FFF; + border-radius: 2px; + max-width: 800px; +} + +.navbar a { + color: #000; + display: inline-block; + font-size: 15px; + padding: 10px 10px 10px 0; + text-decoration: none; +} + +.navbar a:hover { + color: #ffffff; +} +