greg/website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update dark mode

Browse Source
This commit is contained in:
Grégory Lebreton 2025-05-15 14:30:21 +02:00
parent 3a1825eb72
commit fb120b6ad9
3 changed files with 94 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
index.html
View File

@ -65,10 +65,19 @@
<p class="subtitle">Made with HTML code!</p> <p class="subtitle">Made with HTML code!</p>
</div> </div>
</section> </section>
<br>
<div class="content"> <div class="content has-text-centered">
<h1>LES DEVELOPPEURS</h1> <p>Cette page est un exemple d'utilisation des classes du framework Bulma pour le CSS ainsi que
<p>Voici la team</p> quelques fonctions basiques JS pour dynamiser le contenu.
</p>
</div>
<h1 class="has-text-centered" style="text-decoration: underline;">LA TEAM
</h1>
<br>
<div class="content">
<!-- CARDS --> <!-- CARDS -->
<div class="columns is-mobile is-multiline is-centered"> <div class="columns is-mobile is-multiline is-centered">
<!-- CARD 1 --> <!-- CARD 1 -->
@ -94,7 +103,7 @@
<a href="#">#colombia</a> <a href="#">#colombia</a>
<a href="#">#responsive</a> <a href="#">#responsive</a>
<br /> <br />
<time datetime="2016-1-1">11:09 PM - 18 04 20246</time> <time datetime="2016-1-1">11:09 PM - 18 04 2024</time>
</p> </p>
</div> </div>
</div> </div>
@ -113,21 +122,21 @@
</figure> </figure>
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="media"> <div class="media">
<div class="media-content"> <div class="media-content">
<p class="title is-4">dev 2</p> <p class="title is-4">dev 2</p>
<p class="subtitle is-6">dev2@devWeb.com</p> <p class="subtitle is-6">dev2@devWeb.com</p>
</div> </div>
</div> </div>
<div class="content"> <div class="content">
<p>Salut le monde. <p>Salut le monde.
<a href="#">#html</a> <a href="#">#html</a>
<a href="#">#js</a> <a href="#">#js</a>
<br /> <br />
<time datetime="2016-1-1">11:09 PM - 18 04 2024</time> <time datetime="2016-1-1">11:09 PM - 18 04 2024</time>
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -161,7 +170,6 @@
</div> </div>
</div> </div>
</div> </div>
<hr>
<!-- JAVASCRIPT --> <!-- JAVASCRIPT -->
<div class="has-text-centered"> <div class="has-text-centered">

85
static/css/style.css
View File

@ -1,51 +1,65 @@
.card { .card {
width: 400px; width: 400px;
} }
.logo-footer { .logo-footer {
width: 100px; width: 100px;
} }
.hero-body { .hero-body {
background-color: #FFFF00; background-color: #FFFF00;
height: 10em;
} }
.switch { .switch {
text-align: center; text-align: center;
} }
h3 h1 { h3 {
color: var(--primary-text-color);
}
h1 {
color: var(--primary-text-color) !important; color: var(--primary-text-color) !important;
} }
.card-content {
background-color: var(--card-bg-color);
}
.card-content p {
color: var(--secondary-text-color)!important;
}
/* DARK MODE */ /* DARK MODE */
:root { :root {
--bg-color: #fff; --card-bg-color: #222;
--primary-text-color: #222; --bg-color: #fff;
--secondary-text-color: #616060; --primary-text-color: #222;
} --secondary-text-color: #ddd;
}
body { body {
background: var(--bg-color); background: var(--bg-color);
} }
.content { .content {
color: var(--primary-text-color); color: var(--primary-text-color);
text-align: center; text-align: center;
} }
.content p { .content p {
color: var(--secondary-text-color); color: var(--primary-text-color);
} }
.dark-mode { .dark-mode {
--bg-color: #3e4c59; --card-bg-color: #fff;
--primary-text-color: #fff; --bg-color: #2f3943;
--secondary-text-color: #ddd; --primary-text-color: #fff;
--secondary-text-color: #787777;
} }
/* CAROUSSEL */
.carousel { .carousel {
width: 1280px; width: 100%;
max-width: 1280px;
overflow: hidden; overflow: hidden;
margin: auto; margin: auto;
position: relative; position: relative;
@ -60,8 +74,8 @@ body {
} }
.carousel-slide { .carousel-slide {
min-width: 1280px; min-width: 100%;
height: 700px; height: 70vh;
flex-shrink: 0; flex-shrink: 0;
} }
@ -71,15 +85,16 @@ body {
object-fit: cover; object-fit: cover;
} }
/* TRICKY BOUTON */ /* TRICKY BOUTON */
.button-area { .button-area {
width: 80%; width: 80%;
height: 300px; height: 300px;
position:relative; position:relative;
overflow: hidden; overflow: hidden;
border: 1px solid #ccc; border: 1px solid #ccc;
margin: 0 auto; margin: 0 auto;
} }
.contour { .contour {
border: 1px solid #ccc; border: 1px solid #ccc;
@ -98,14 +113,14 @@ body {
top: 50px; top: 50px;
} }
/* COMPTEUR */
#incrementer { #incrementer {
margin-top: 5px; margin-top: 5px;
padding: 10px 20px; padding: 10px 20px;
background-color: #3f57c0 !important; background-color: #3f57c0;
color: white !important; color: white;
border: none !important; border: none;
cursor: pointer !important; cursor: pointer;
left: 50px !important; left: 50px;
top: 120px !important; top: 120px;
} }

22
static/js/script.js
View File

@ -1,5 +1,20 @@
// BULMA BURGER
document.addEventListener('DOMContentLoaded', () => {
const burgers = Array.from(document.querySelectorAll('.navbar-burger'));
burgers.forEach(burger => {
burger.addEventListener('click', () => {
const targetId = burger.dataset.target;
const targetMenu = document.getElementById(targetId);
burger.classList.toggle('is-active');
targetMenu.classList.toggle('is-active');
});
});
});
// DARK MODE // DARK MODE
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function () {
const switchTheme = document.querySelector("#switch"); const switchTheme = document.querySelector("#switch");
switchTheme.addEventListener("click", function () { switchTheme.addEventListener("click", function () {
@ -54,14 +69,9 @@ document.addEventListener("DOMContentLoaded", function () {
document.getElementById("additionner").addEventListener("click", () => { document.getElementById("additionner").addEventListener("click", () => {
const a = parseFloat(document.getElementById('chiffre1').value); const a = parseFloat(document.getElementById('chiffre1').value);
const b = parseFloat(document.getElementById('chiffre2').value); const b = parseFloat(document.getElementById('chiffre2').value);
if (isNaN(a) || isNaN(b)) {
document.getElementById('resultat').textContent = "Entrée invalide";
} else {
const somme = a + b; const somme = a + b;
document.getElementById('resultat').textContent = somme; document.getElementById('resultat').textContent = somme;
document.getElementById('resultBox').style.display = "block"; document.getElementById('resultBox').style.display = "block";
}
}); });
}); });