Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@Vital-Vuillaume
Vital-Vuillaume committed Feb 6, 2024
1 parent 11abce5 commit 4f0ba68
Show file tree
Hide file tree
Showing 3 changed files with 82 additions and 121 deletions.
156 changes: 56 additions & 100 deletions My-Website.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,17 @@
:root {

--couleur: #6d47ff;

}

.root {

color: var(--couleur);
--bg: rgb(230, 230, 230);
--default: rgba(189, 189, 189, 0.217);
--default2: black;

}

body {

background-color: rgb(255,255,255);
background-color: var(--bg);
min-height: 100vh;
color: var(--default2);

}

Expand Down Expand Up @@ -103,12 +101,22 @@ img, .custom-menu {

/*-----Marges des pages----*/

.section1, .section2, .section3 {
.section1, .section3 {

margin: 0px 10px 15px 80px;
margin: 0px 10px 30px 90px;
position: relative;
top: 15px;

}

.section2 {

margin: 0px 10px 60px 90px;
position: relative;
top: 15px;

}

/*-----Titres tests-----*/

.titre {
Expand All @@ -125,17 +133,20 @@ img, .custom-menu {
/*-----Barre de navigation-----*/

.nav {
top: 8px;
left: 8px;

top: 15px;
left: 15px;
position: fixed;
transform: translateY(0);
height: calc(100vh - 15px);
height: calc(100vh - 27.5px);
width: 65px;
background-color: white;
background-color: var(--default);
transition: background-color 0s, width 1.1s;
overflow-x: hidden;
border-radius: 15px;
z-index: 2000;
backdrop-filter: blur(10px);

}


Expand All @@ -150,7 +161,7 @@ img, .custom-menu {
.ligne {

width: 100%;
background-color: black;
background-color: var(--default2);
position: absolute;
left: 50%;
top: 60px;
Expand Down Expand Up @@ -181,7 +192,7 @@ img, .custom-menu {
transform: translate(-50%, -50%);
width: 35px;
height: 2px;
background-color: black;
background-color: var(--default2);
transition: 0.7s;

}
Expand All @@ -195,8 +206,8 @@ img, .custom-menu {
transform: translate(-50%, -50%);
width: 35px;
height: 2px;
background-color: black;
box-shadow: 0 -9px 0 black;
background-color: var(--default2);
box-shadow: 0 -9px 0 var(--default2);
transition: 0.7s;

}
Expand Down Expand Up @@ -300,37 +311,29 @@ img, .custom-menu {
border-radius: 7px;
font-size: 1.1em;
padding: 15px;
top: 65px;
position: fixed;
border: 1px var(--couleur) solid;
background-color: var(--default);
color: var(--default2);
backdrop-filter: blur(10px);
z-index: 2000;


}

/*-----Bloc des reponses-----*/

.category {

background-color: white;
background-color: var(--default);
padding: 15px 15px 15px 22.5px;
width: 750px;
margin-top: 18px;
position: relative;
top: 35px;
border-radius: 13px;
border: 1px var(--couleur) solid;
animation: slide linear;
animation-timeline: view();
animation-range-start: cover 0%;
animation-range-end: cover 70%;

}

@keyframes slide {

0% {
transform: translateY(100%);
opacity: 0;
}
20% {
transform: translateY(0);
opacity: 1;
}

}

Expand All @@ -353,7 +356,7 @@ img, .custom-menu {
.lienRecherche {

font-size: 1.1em;
color: black;
color: var(--default2);
width: max-content;
padding: 5px 5px 5px 4px;
text-decoration: none;
Expand Down Expand Up @@ -433,48 +436,6 @@ img, .custom-menu {
-------Page parametres-------
---------------------------*/

/*-----Dark mode-----*/

body.active {

background: rgb(36,34,49);
background: linear-gradient(90deg, rgba(36,34,49,1) 0%, rgba(30,29,42,1) 100%);
color: white;

}

body.active .nav, body.active .ligne, body.active .btn::before, body.active .recherche, body.active .category, body.active .btnParametres, body.active .shortcut {

background-color: #29283763;
backdrop-filter: blur(10px);
color: white;

}

body.active .btn::before, body.active .btn::after, body.active .ligne {

background-color: white;

}

body.active .btn::after {

box-shadow: 0 -9px 0 white;

}

body.active .lienRecherche {

color: white;

}

body.active ::placeholder, body.active ::-moz-placeholder {

color: rgb(185, 185, 185);

}

/*-----Bouton paramètre-----*/

.btnParametres {
Expand All @@ -485,7 +446,7 @@ body.active ::placeholder, body.active ::-moz-placeholder {
top: 10px;
margin-bottom: 25px;
cursor: pointer;
background-color: white;
background-color: var(--default);
border-radius: 5px;
border: 1px var(--couleur) solid;

Expand Down Expand Up @@ -600,7 +561,7 @@ body.active ::placeholder, body.active ::-moz-placeholder {

.shortcut {

background-color: white;
background-color: var(--default);
display: flex;
justify-content: center;
flex-direction: column;
Expand Down Expand Up @@ -691,7 +652,7 @@ body.active ::placeholder, body.active ::-moz-placeholder {
::-webkit-scrollbar {

width: 0.5vw;
background-color: #292837;
background-color: var(--bg);

}

Expand Down Expand Up @@ -815,13 +776,7 @@ body.active ::placeholder, body.active ::-moz-placeholder {

/*-----Vu pour mobile-----*/

@media screen and (max-width: 425px) {

body {

background-color: white;

}
@media screen and (max-width: 435px) {

.section1, .section2, .section3 {

Expand All @@ -834,9 +789,10 @@ body.active ::placeholder, body.active ::-moz-placeholder {
top: unset;
bottom: 0;
height: 65px;
width: calc(100vw - 15px);
width: 100%;
backdrop-filter: blur(0px);
display: flex;
left: 0;
justify-content: center;
gap: 20%;
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255, 0, 0, 0) 100%);
Expand Down Expand Up @@ -913,19 +869,26 @@ body.active ::placeholder, body.active ::-moz-placeholder {

.recherche {

width: 100%;
position: relative;
transition: 0.9s;
background-color: rgb(230, 230, 230);
width: 100%;
top: 0;

}

.category {

width: 100%;
background-color: rgb(230, 230, 230);
top: 0px;

}

.category:last-child {

margin-bottom: 80px;

}

.titreRecherche {

font-size: 1.2em;
Expand All @@ -947,16 +910,9 @@ body.active ::placeholder, body.active ::-moz-placeholder {

}

body.active .lienRecherche {

background-color: unset;

}

body.active .nav {
body.black .nav {

background: linear-gradient(0deg, rgba(36,34,49,1) 0%, rgba(36,34,49,0.1) 100%);
backdrop-filter: blur(0px);

}

Expand Down
43 changes: 24 additions & 19 deletions My-Website.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
if (window.location.protocol != "https:") {
window.location.protocol="https:";
}

//------Element html------\\

const btn1 = document.getElementById('btn1');
Expand Down Expand Up @@ -365,26 +364,32 @@ window.addEventListener('load', function() {

//-----Dark mode-----\\

let modeSombreActive = false;

function toggleModeSombre() {
body.classList.toggle("active");
modeSombreActive = !modeSombreActive;
localStorage.setItem("modeSombre", modeSombreActive);
};

//-----Bouton dark mode-----\\

btnDark.onclick = function ajouterClassBody() {
toggleModeSombre();
};

//-----Sauvegarde dark mode-----\\
let isDarkMode = localStorage.getItem('isDarkMode') === 'true';

function updateDarkMode() {
if (isDarkMode) {
const newBg = `#242231`;
const newColor = `#38374863`;
const newColor2 = `white`;
document.documentElement.style.setProperty('--bg', newBg);
document.documentElement.style.setProperty('--default', newColor);
document.documentElement.style.setProperty('--default2', newColor2);
body.classList.add("black")
} else {
document.documentElement.style.removeProperty('--bg');
document.documentElement.style.removeProperty('--default');
document.documentElement.style.removeProperty('--default2');
body.classList.remove("black")
}
}
updateDarkMode();

const modeSombreStocke = localStorage.getItem("modeSombre");
if (modeSombreStocke === "true") {
body.classList.add("active");
modeSombreActive = true;
btnDark.onclick = function() {
isDarkMode = !isDarkMode;
localStorage.setItem('isDarkMode', isDarkMode);
updateDarkMode();
};

//-----Passer en mode plein ecran-----\\
Expand Down Expand Up @@ -585,4 +590,4 @@ annuler.onclick = function() {
popup.style.opacity = 0;
section3.style.overflow = "auto";
isPopupVisible = false;
};
};
4 changes: 2 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@

<div id="section1" class="section1">
<p class="titre">Accueil</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>

<!--------------------------
Expand Down Expand Up @@ -105,7 +105,7 @@
<div class="shortcut">
<img class="imgShortcut" src="ubuntu.png" alt="Ubuntu">
<p class="titreShortcut">Ubuntu</p>
<p class="paraShortcut">Sauvegarder-le exécutez "My-Website-Shortcut-Ubuntu.sh".</p>
<p class="paraShortcut">Sauvegarder-le et exécutez "My-Website-Shortcut-Ubuntu.sh".</p>
<a class="lienShortcut" href="My-Website-Shortcut-Ubuntu.zip">Télécharger pour ubuntu</a>
</div>
<div class="shortcut">
Expand Down

0 comments on commit 4f0ba68

Please sign in to comment.