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

ajout darkmode JS

Browse Source
This commit is contained in:
Debian Live user 2024-04-18 11:54:17 +00:00
parent a000da234d
commit 19d5c33e11
3 changed files with 86 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
index.html
View File

@ -1,8 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html>
<head> <head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
<link rel="stylesheet" href="./static/css/style.css"> <link rel="stylesheet" href="./static/css/style.css">
<script rel="javascript/text" href="./static/js/script.js"></script> <!-- <script src="./static/js/script.js"></script> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head> </head>
<body> <body>
<!-- NAVBAR --> <!-- NAVBAR -->
@ -68,6 +70,21 @@
<br> <br>
<!-- Toggle Switch -->
<div class="switch">
<input type="checkbox" id="switch" /><br>
<label for="switch">
<i class="fas fa-sun"></i>
<i class="fas fa-moon"></i>
<span class="ball"></span>
</label>
</div>
<br>
<div class="content">
<h1>LES DEVELOPPEURS</h1>
<p>Voici la team</p>
<!-- CARDS --> <!-- CARDS -->
<div class="columns is-mobile is-multiline is-centered"> <div class="columns is-mobile is-multiline is-centered">
<!-- CARD 1 --> <!-- CARD 1 -->
@ -96,12 +113,13 @@
<p class="subtitle is-6">@dev1</p> <p class="subtitle is-6">@dev1</p>
</div> </div>
</div> </div>
<div class="content"> <div class="content">
J'aime Bulma! <a>@bulmaio</a>. <a href="#">#css</a> <p>J'aime Bulma!
<a>@bulmaio</a>. <a href="#">#css</a>
<a href="#">#responsive</a> <a href="#">#responsive</a>
<br /> <br />
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time> <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
</p>
</div> </div>
</div> </div>
</div> </div>
@ -135,10 +153,12 @@
</div> </div>
<div class="content"> <div class="content">
Salut le monde. <a>@bulmaio</a>. <a href="#">#css</a> <p>Salut le monde.
<a>@bulmaio</a>. <a href="#">#css</a>
<a href="#">#responsive</a> <a href="#">#responsive</a>
<br /> <br />
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time> <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
</p>
</div> </div>
</div> </div>
</div> </div>
@ -170,30 +190,38 @@
<p class="subtitle is-6">@dev3</p> <p class="subtitle is-6">@dev3</p>
</div> </div>
</div> </div>
<p>yo!.
<div class="content"> <a>@bulmaio</a>. <a href="#">#css</a>
yo!. <a>@bulmaio</a>. <a href="#">#css</a>
<a href="#">#responsive</a> <a href="#">#responsive</a>
<br /> <br />
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time> <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- FOOTER --> <!-- FOOTER -->
<footer class="footer"> <footer class="footer">
<div class="content has-text-centered"> <div class="content has-text-centered">
<p> <p>
<strong>SuperWebSite</strong> by <a href="https://www.gregandev.fr">Greg</a>. <strong>SuperWebSite</strong> by <a href="https://www.gregandev.fr">Greg</a>.
The source code is not licensed.<br> The source code is not licensed.<br>
The website content is not licensed either. The website content is not licensed either.
</p> </p>
<img class="logo-footer" src="./static/img/batman.png"> <img class="logo-footer" src="./static/img/batman.png">
</div> </div>
</footer> </footer>
</body> <script>
</html const switchTheme = document.querySelector("#switch");
switchTheme.addEventListener("click", function () {
document.body.classList.toggle("dark-mode");
});
</script>
</body>
</html>

28
static/css/style.css
View File

@ -9,3 +9,31 @@
.hero-body { .hero-body {
background-color: yellow; background-color: yellow;
} }
.switch {
text-align: center;
}
/* DARK MODE */
:root {
--bg-color: #fff;
--primary-text-color: #222;
--secondary-text-color: #616060;
}
body {
background: var(--bg-color);
}
.content {
color: var(--primary-text-color);
text-align: center;
}
.content p {
color: var(--secondary-text-color);
}
.dark-mode {
--bg-color: #3e4c59;
--primary-text-color: #fff;
--secondary-text-color: #ddd;
}

9
static/js/script.js
View File

@ -9,4 +9,13 @@ $(document).ready(function() {
$(".navbar-menu").toggleClass("is-active"); $(".navbar-menu").toggleClass("is-active");
}); });
}
);
document.addEventListener("DOMContentLoaded", function() {
const switchTheme = document.querySelector("#switch");
switchTheme.addEventListener("click", function () {
document.body.classList.toggle("dark-mode");
}); });
});