back + CSSinfosJS + liveJS + columns
This commit is contained in:
bonnebulle
@@ -5,17 +5,43 @@
|
||||
<meta name="generator" content="GitLab Pages">
|
||||
<title>Plain HTML site using GitLab Pages</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="https://livejs.com/live.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar">
|
||||
<a href="https://bonnebulle.gitlab.io/plain-html-redo">URL du projet</a> (sur gitlab, repo d'origine) + <a href="https://gitlab.com/bonnebulle/plain-html-redo">Repo gitlab</a>
|
||||
<a href="https://bonnebulle.gitlab.io/plain-html-redo">URL du projet</a> (sur gitlab, repo d'origine)
|
||||
+ <a href="https://gitlab.com/bonnebulle/plain-html-redo">Repo gitlab !!!</a>
|
||||
</div>
|
||||
|
||||
<h1>Bonjour le Monde !</h1>
|
||||
|
||||
<p>
|
||||
Un projet simple construit grâce à un template sur GitLab
|
||||
</p>
|
||||
<div id="contenant">
|
||||
<span class="left">
|
||||
<p>
|
||||
Un projet super simple construit grâce à un template sur GitLab
|
||||
</p>
|
||||
</span>
|
||||
<span class="right">
|
||||
<p>
|
||||
Un projet super simple construit grâce à un template sur GitLab
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="contenant_cols">
|
||||
<span class="text">
|
||||
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.
|
||||
</span>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<script src="./script_html_infos.js"></script>
|
||||
</footer>
|
||||
</html>
|
||||
|
||||
|
||||
23
public/index_1.html
Normal file
23
public/index_1.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="generator" content="GitLab Pages">
|
||||
<title>Plain HTML site using GitLab Pages</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="https://livejs.com/live.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar">
|
||||
<a href="https://bonnebulle.gitlab.io/plain-html-redo">URL du projet</a> (sur gitlab, repo d'origine)
|
||||
+ <a href="https://gitlab.com/bonnebulle/plain-html-redo">Repo gitlab !!!</a>
|
||||
</div>
|
||||
|
||||
<h1>Bonjour le Monde !</h1>
|
||||
|
||||
<p>
|
||||
Un projet simple construit grâce à un template sur GitLab
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
156
public/script_html_infos.js
Normal file
156
public/script_html_infos.js
Normal file
@@ -0,0 +1,156 @@
|
||||
// Création de la boîte d'information
|
||||
const infoBox = document.createElement('div');
|
||||
infoBox.id = 'info-box';
|
||||
infoBox.innerHTML = `
|
||||
<div id="info-toggle">
|
||||
<label>
|
||||
<input type="checkbox" id="toggle-display"> <span id="toggle_hide_text">Masquer</span>
|
||||
</label>
|
||||
</div>
|
||||
<div id="info-content">
|
||||
<div><strong>Élément :</strong> <span id="element-tag"></span></div>
|
||||
<div><strong>ID :</strong> <span id="element-id"></span></div>
|
||||
<div><strong>Classe(s) :</strong> <span id="element-class"></span></div>
|
||||
<div><strong>Parent :</strong> <span id="element-parent"></span></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 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');
|
||||
}
|
||||
});
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user