Merge pull request 'newCss' (#22) from newCss into master
Reviewed-on: WikiFantasy/WF-Website#22pull/24/head
commit
34be1dadcb
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 317 B |
|
After Width: | Height: | Size: 9.5 KiB |
@ -1,108 +1,133 @@
|
||||
/* header.css */
|
||||
|
||||
/* Styles généraux */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #120b1d;
|
||||
font-family: "Lemon", serif;
|
||||
margin-top: 200px;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
background-color: #000000;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
vertical-align: center;
|
||||
gap: 30px;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.user {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
vertical-align: center;
|
||||
gap: 30px;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
vertical-align: center;
|
||||
margin: 10px;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
||||
/* Mode sombre */
|
||||
body.dark-mode {
|
||||
background-color: #120B1D;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
body.dark-mode .header {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
body.dark-mode .header img {
|
||||
filter: invert(0%);
|
||||
}
|
||||
|
||||
body.dark-mode .nav img:hover {
|
||||
filter: invert(59%) sepia(96%) saturate(6733%) hue-rotate(275deg) brightness(112%) contrast(122%);
|
||||
}
|
||||
|
||||
body.dark-mode .search {
|
||||
background: white;
|
||||
}
|
||||
|
||||
/* Mode clair */
|
||||
body.light-mode {
|
||||
background-color: #ffffff;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
body.light-mode .header {
|
||||
background-color: #F4F1DE;
|
||||
}
|
||||
|
||||
body.light-mode .header img {
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
body.light-mode .nav img:hover {
|
||||
filter: invert(22%) sepia(6%) saturate(2269%) hue-rotate(193deg) brightness(98%) contrast(106%);
|
||||
}
|
||||
|
||||
body.light-mode .search {
|
||||
background: black;
|
||||
}
|
||||
/* @import url('https://fonts.googleapis.com/css2?family=Lemon&display=swap'); */
|
||||
:root {
|
||||
--main-dark-background-color: #120B1D;
|
||||
--main-dark-text-color : #ffffff;
|
||||
--main-dark-gradient : linear-gradient(45deg, #4a148c, #7b1fa2);
|
||||
--main-dark-other-color : #000000;
|
||||
|
||||
--main-light-background-color: #ffffff;
|
||||
--main-light-text-color : #000000;
|
||||
--main-light-gradient : linear-gradient(-28deg, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
|
||||
--main-light-other-color : #d2d2d8;
|
||||
}
|
||||
|
||||
/* Général */
|
||||
|
||||
body{
|
||||
font-family: "Lemon", serif;
|
||||
margin : 0%;
|
||||
}
|
||||
|
||||
/* Dark mode */
|
||||
|
||||
body.dark-mode{
|
||||
background-color: var(--main-dark-background-color);
|
||||
color: var(--main-dark-text-color);
|
||||
}
|
||||
|
||||
body.dark-mode .header{
|
||||
background-color: var(--main-dark-other-color);
|
||||
}
|
||||
|
||||
|
||||
/* Light mode */
|
||||
|
||||
body.light-mode{
|
||||
background-color: var(--main-light-background-color);
|
||||
color: var(--main-light-text-color);
|
||||
}
|
||||
|
||||
body.light-mode .header{
|
||||
background-color: var(--main-light-other-color);
|
||||
}
|
||||
|
||||
body.light-mode .header img{
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
|
||||
/* écran par défaut */
|
||||
|
||||
body{
|
||||
margin-top: 15vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
text-align: center;
|
||||
padding: 1%;
|
||||
height: 10vh;
|
||||
}
|
||||
|
||||
#theme-icon{
|
||||
height : 5vh
|
||||
}
|
||||
|
||||
.header img{
|
||||
height : 7vh;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
vertical-align: center;
|
||||
gap: 2vw;
|
||||
width: 39%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.logo img{
|
||||
height : 10vh;
|
||||
}
|
||||
|
||||
.user {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
vertical-align: center;
|
||||
gap: 2vw;
|
||||
width: 39%;
|
||||
}
|
||||
|
||||
.user img{
|
||||
height : 7vh;
|
||||
}
|
||||
|
||||
/* écran tablette*/
|
||||
|
||||
@media (max-width: 834px) or (max-aspect-ratio : 1/1){
|
||||
|
||||
.nav img{
|
||||
height: 4vh;
|
||||
}
|
||||
|
||||
#theme-icon{
|
||||
height : 3vh
|
||||
}
|
||||
|
||||
.user img{
|
||||
height: 5vh;
|
||||
}
|
||||
|
||||
.logo img{
|
||||
height : 7vh;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* écran téléphone */
|
||||
|
||||
@media (max-width: 480px){
|
||||
|
||||
}
|
||||
@ -1,39 +1,26 @@
|
||||
@import url(./style.css); /* Import de style.css */
|
||||
@import url(./styleQuoteLittle.css);
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
font-size: 2em;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
/* Conteneur général pour les citations */
|
||||
.citations-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 20px 0;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
/* Citation du jour - toujours en pleine largeur */
|
||||
body.dark-mode .citation-du-jour {
|
||||
width: 97.5%; /* Prend toute la largeur */
|
||||
background: linear-gradient(45deg, #4a148c, #7b1fa2);
|
||||
/* Citation du jour */
|
||||
|
||||
.citation-du-jour {
|
||||
width: 97.5vw;
|
||||
padding: 0;
|
||||
margin-left: 1.25%;
|
||||
margin-left: 1.25vw;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
/* dark-mode */
|
||||
|
||||
body.dark-mode .citation-du-jour {
|
||||
background: var(--main-dark-gradient);
|
||||
}
|
||||
|
||||
/* light-mode */
|
||||
|
||||
body.light-mode .citation-du-jour {
|
||||
width: 97.5%;
|
||||
background-image: linear-gradient(-28deg, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
|
||||
padding: 0;
|
||||
margin-left: 1.25%;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
height: 150px;
|
||||
background: var(--main-light-gradient);
|
||||
}
|
||||
|
||||
@ -0,0 +1,64 @@
|
||||
@import url(./style.css);
|
||||
|
||||
/* ====== DARK MODE ====== */
|
||||
|
||||
body.dark-mode h1, body.dark-mode h2, body.dark-mode p {
|
||||
color: var(--main-dark-text-color);
|
||||
}
|
||||
|
||||
body.dark-mode .resultat {
|
||||
background-color: var(--main-dark-other-color);
|
||||
}
|
||||
|
||||
/* ====== LIGHT MODE ====== */
|
||||
|
||||
body.light-mode h1, body.light-mode h2, body.light-mode p {
|
||||
color: var(--main-light-text-color);
|
||||
}
|
||||
|
||||
body.light-mode .resultat {
|
||||
background-color: var(--main-light-other-color);
|
||||
}
|
||||
|
||||
body.light-mode .suiv img{
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
/* ====== ECRAN DEFAUT ====== */
|
||||
|
||||
h1 {
|
||||
font-family: "Lemon", serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.resultat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 60vh;
|
||||
width: 60vw;
|
||||
margin: auto;
|
||||
padding: 2%;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.suiv {
|
||||
align-items: self-end;
|
||||
width: 1vh;
|
||||
}
|
||||
|
||||
.suiv img {
|
||||
width: 1vh;
|
||||
}
|
||||
|
||||
/* ====== ECRAN TABLETTE ====== */
|
||||
|
||||
@media (max-width: 834px) or (max-aspect-ratio : 1/1){
|
||||
|
||||
}
|
||||
|
||||
/* ====== ECRAN TELEPHONE ====== */
|
||||
|
||||
@media (max-width: 480px){
|
||||
|
||||
}
|
||||
@ -1,130 +1,138 @@
|
||||
@import url(./style.css);
|
||||
|
||||
/* ====== DARK MODE ====== */
|
||||
|
||||
body.dark-mode h1{
|
||||
color : white;
|
||||
font-family: "Lemon", serif;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
margin-top: 10%;
|
||||
color : var(--main-dark-text-color);
|
||||
}
|
||||
|
||||
body.dark-mode p{
|
||||
margin-top: 6%;
|
||||
margin-bottom: 2%;
|
||||
color : white;
|
||||
font-size: 20px;
|
||||
font-family: "Lemon", serif;
|
||||
color : var(--main-dark-text-color);
|
||||
}
|
||||
|
||||
body.dark-mode .login{
|
||||
background-color: black;
|
||||
width: 30%;
|
||||
margin-left: 35%;
|
||||
margin-top: 3%;
|
||||
border-radius: 25px;
|
||||
border: 2px solid transparent;
|
||||
padding: 2%;
|
||||
background: var(--main-dark-other-color);
|
||||
}
|
||||
|
||||
body.dark-mode .createAccount{
|
||||
margin-top: 5%;
|
||||
margin-bottom: 5%;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
padding-top: 1%;
|
||||
color: white;
|
||||
border: 1px solid transparent;
|
||||
font-family: "Lemon", serif;
|
||||
color : var(--main-dark-text-color);
|
||||
}
|
||||
|
||||
body.dark-mode .buttonSudmite{
|
||||
background: linear-gradient(90deg, #6100ff 0%, #1b0048 100%);
|
||||
font-family: "Lemon", serif;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 2%;
|
||||
border-radius: 25px;
|
||||
width: 75%;
|
||||
font-size: 20px;
|
||||
body.dark-mode a{
|
||||
color: var(--main-dark-text-color);
|
||||
}
|
||||
|
||||
|
||||
body.dark-mode .connexion{
|
||||
width:90%;
|
||||
height: 40px;
|
||||
padding-left: 3%;
|
||||
margin-left: 1%;
|
||||
margin-top: -1%;
|
||||
border-radius: 25px;
|
||||
border: none;
|
||||
font-size: 15px;
|
||||
body.dark-mode .buttonSudmite{
|
||||
background: var(--main-dark-gradient);
|
||||
color: var(--main-dark-text-color);
|
||||
}
|
||||
|
||||
/* ====== LIGHT MODE ====== */
|
||||
body.light-mode h1{
|
||||
color : black;
|
||||
color : var(--main-light-text-color);
|
||||
}
|
||||
|
||||
body.light-mode p{
|
||||
color : var(--main-light-text-color);
|
||||
}
|
||||
|
||||
body.light-mode .login{
|
||||
background: var(--main-light-other-color);
|
||||
}
|
||||
|
||||
body.light-mode .createAccount{
|
||||
background: var(--main-light-other-color);
|
||||
}
|
||||
|
||||
body.light-mode .buttonSubmit{
|
||||
background: var(--main-light-gradirent);
|
||||
color: var(--main-light-text-color);
|
||||
}
|
||||
|
||||
body.light-mode a{
|
||||
color: var(--main-light-text-color);
|
||||
}
|
||||
|
||||
|
||||
/* ====== ECRAN DEFAULT ====== */
|
||||
|
||||
.buttonSubmitDiv{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-family: "Lemon", serif;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
margin-top: 10%;
|
||||
}
|
||||
|
||||
body.light-mode p{
|
||||
p{
|
||||
margin-top: 6%;
|
||||
margin-bottom: 2%;
|
||||
color : black;
|
||||
font-size: 20px;
|
||||
font-family: "Lemon", serif;
|
||||
}
|
||||
|
||||
body.light-mode .login{
|
||||
background-color: white;
|
||||
width: 30%;
|
||||
margin-left: 35%;
|
||||
margin-top: 3%;
|
||||
.login{
|
||||
width: 35vw;
|
||||
margin-left: 30.5vw;
|
||||
margin-top: 3vh;
|
||||
border-radius: 25px;
|
||||
border: 2px solid black;
|
||||
padding: 2%;
|
||||
padding: 2vw;
|
||||
}
|
||||
|
||||
body.light-mode .createAccount{
|
||||
.createAccount{
|
||||
margin-top: 5%;
|
||||
margin-bottom: 5%;
|
||||
font-size: 13px;
|
||||
font-size: 1em;
|
||||
text-align: center;
|
||||
padding-top: 1%;
|
||||
color: black;
|
||||
font-family: "Lemon", serif;
|
||||
}
|
||||
|
||||
body.light-mode .buttonSubmit{
|
||||
background: linear-gradient(180deg, rgba(187,211,249,1) 0%, rgba(199,246,196,1) 100%);
|
||||
.buttonSudmite{
|
||||
font-family: "Lemon", serif;
|
||||
border: none;
|
||||
color: black;
|
||||
padding: 2%;
|
||||
border-radius: 25px;
|
||||
width: 75%;
|
||||
font-size: 20px;
|
||||
width: 50%;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
body.light-mode .connexion{
|
||||
width:90%;
|
||||
.connexion{
|
||||
width:94%;
|
||||
height: 40px;
|
||||
padding-left: 3%;
|
||||
margin-left: 1%;
|
||||
margin-top: -1%;
|
||||
border-radius: 25px;
|
||||
border: 1px solid black;
|
||||
background-color: #fff1f1;
|
||||
border: none;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* ====== ECRAN TABLETTE ====== */
|
||||
|
||||
/* ====== DEFAULT ====== */
|
||||
.buttonSubmitDiv{
|
||||
text-align: center;
|
||||
@media (max-width: 834px){
|
||||
.login{
|
||||
width: 50vw;
|
||||
margin-left: 22vw;
|
||||
margin-top: 9vh;
|
||||
padding: 3vh;
|
||||
padding-bottom: 5vh;
|
||||
}
|
||||
|
||||
.createAccount{
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.buttonSudmite{
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ====== ECRAN TELEPHONE====== */
|
||||
|
||||
@media (max-width: 480px){
|
||||
|
||||
}
|
||||
@ -0,0 +1,120 @@
|
||||
/* Conteneur pour les suggestions en deux colonnes */
|
||||
.suggestions-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
a.link-citation {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
width: 47.5%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Citations */
|
||||
.citation-container {
|
||||
background: linear-gradient(to right, #4a148c, #7b1fa2);
|
||||
border-radius: 12px;
|
||||
color: white;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
height: 150px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
word-wrap: break-word; /* Permet de couper les mots trop longs */
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* Fixe la taille pour s'assurer que toutes les citations restent cohérentes */
|
||||
.citation-container .text-content {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.quote {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.citation-image {
|
||||
width: 150px;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.text-content {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center; /* Centre verticalement le texte */
|
||||
word-wrap: break-word; /* Permet de couper les mots trop longs */
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.quoteContent {
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 10px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.citation .movie, .character, .year {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* Mode sombre */
|
||||
body.dark-mode .quote {
|
||||
background: linear-gradient(45deg, #4a148c, #7b1fa2);
|
||||
color:white;
|
||||
}
|
||||
|
||||
/* Mode clair */
|
||||
body.light-mode .quote {
|
||||
background-image: linear-gradient(-28deg, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
|
||||
color:black; /* Changer le texte en noir pour le mode clair */
|
||||
}
|
||||
|
||||
body.light-mode .citation,
|
||||
body.light-mode .movie,
|
||||
body.light-mode .character,
|
||||
body.light-mode .year {
|
||||
color: black; /* Forcer le texte en noir pour le mode clair */
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
.suggestions-container {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.citation-container {
|
||||
width: 100%; /* Chaque citation prend toute la largeur sur mobile */
|
||||
max-width: 100%;
|
||||
height: 100px; /* Supprimer la hauteur fixe sur mobile */
|
||||
}
|
||||
|
||||
.citation-image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.quote {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
@ -1,142 +1,140 @@
|
||||
@import url(./style.css);
|
||||
|
||||
h1{
|
||||
margin-top: 10%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.signin{
|
||||
border-radius: 25px;
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-template-rows: repeat(5, 1fr);
|
||||
width : 30%;
|
||||
margin-left: 35%;
|
||||
margin-top: 3%;
|
||||
padding : 2%;
|
||||
/* ====== DARK MODE ====== */
|
||||
|
||||
body.dark-mode .signin{
|
||||
background: var(--main-dark-other-color);
|
||||
}
|
||||
|
||||
p{
|
||||
font-size: 20px;
|
||||
margin-top: 7%;
|
||||
margin-bottom: 2%;
|
||||
font-weight: bold;
|
||||
body.dark-mode .h1{
|
||||
color : var(--main-dark-text-color);
|
||||
}
|
||||
|
||||
.DivId{
|
||||
grid-area: 1 / 1 / 2 / 2;
|
||||
body.dark-mode .p{
|
||||
color : var(--main-dark-text-color);
|
||||
}
|
||||
|
||||
.DivEmail{
|
||||
grid-area: 2 / 1 / 3 / 2;
|
||||
body.dark-mode .btn{
|
||||
background: var(--main-dark-gradient);
|
||||
color : var(--main-dark-text-color);
|
||||
}
|
||||
|
||||
.mdp{
|
||||
grid-area: 3 / 1 / 4 / 3;
|
||||
body.dark-mode a{
|
||||
color: var(--main-dark-text-color);
|
||||
}
|
||||
|
||||
.confmdp{
|
||||
grid-area: 4 / 1 / 5 / 3;
|
||||
/* ====== LIGHT MODE ====== */
|
||||
|
||||
body.light-mode .signin{
|
||||
background: var(--main-light-other-color);
|
||||
}
|
||||
|
||||
.imgprof{
|
||||
grid-area: 1 / 2 / 3 / 3;
|
||||
body.light-mode .h1{
|
||||
color : var(--main-light-text-color);
|
||||
}
|
||||
|
||||
.confirmer{
|
||||
grid-area: 5 / 1 / 6 / 3;
|
||||
align-self: center;
|
||||
text-align: center;
|
||||
body.light-mode .p{
|
||||
color : var(--main-light-text-color);
|
||||
}
|
||||
|
||||
.champ{
|
||||
width: 90%;
|
||||
height : 35%;
|
||||
border-radius: 25px;
|
||||
margin-left: 1%;
|
||||
padding-left: 3%;
|
||||
margin-top: -1%;
|
||||
font-size: 15px;
|
||||
body.light-mode .btn{
|
||||
background: var(--main-light-gradient);
|
||||
color : var(--main-light-text-color);
|
||||
}
|
||||
|
||||
.btn{
|
||||
margin-top: 10%;
|
||||
width:75%;
|
||||
font-size: 20px;
|
||||
padding: 2%;
|
||||
border-radius: 25px;
|
||||
border: none;
|
||||
font-family: "Lemon", serif;
|
||||
body.light-mode a{
|
||||
color: var(--main-light-text-color);
|
||||
}
|
||||
|
||||
/*Dark mode*/
|
||||
/* ====== ECRAN DEFAULT ====== */
|
||||
|
||||
body.dark-mode .signin{
|
||||
background-color: #000000;
|
||||
border: 2px solid transparent;
|
||||
h1{
|
||||
font-family: "Lemon", serif;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
margin-top: 10%;
|
||||
}
|
||||
|
||||
body.dark-mode .h1{
|
||||
color : white;
|
||||
.signin{
|
||||
width: 35vw;
|
||||
margin-left: 30.5vw;
|
||||
margin-top: 3vh;
|
||||
border-radius: 25px;
|
||||
padding: 2vw;
|
||||
}
|
||||
|
||||
body.dark-mode .p{
|
||||
color : white;
|
||||
p{
|
||||
margin-top: 4%;
|
||||
margin-bottom: 2%;
|
||||
font-size: 20px;
|
||||
font-family: "Lemon", serif;
|
||||
}
|
||||
|
||||
body.dark-mode .btn{
|
||||
background: linear-gradient(90deg, #6100ff 0%, #1b0048 100%);
|
||||
color : white;
|
||||
.confirmer{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
body.dark-mode .champ{
|
||||
background-color: #ffffff;
|
||||
border: 2px solid #ffffff;
|
||||
.champ{
|
||||
width:94%;
|
||||
height: 40px;
|
||||
padding-left: 3%;
|
||||
margin-left: 1%;
|
||||
margin-top: -1%;
|
||||
border-radius: 25px;
|
||||
border: none;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/*Light*/
|
||||
|
||||
body.light-mode .signin{
|
||||
background-color: #ffffff;
|
||||
border: 2px solid #000000;
|
||||
.btn{
|
||||
font-family: "Lemon", serif;
|
||||
border: none;
|
||||
padding: 2%;
|
||||
border-radius: 25px;
|
||||
width: 50%;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
body.light-mode .h1{
|
||||
color : #000000;
|
||||
.connectAccount{
|
||||
margin-top: 5%;
|
||||
margin-bottom: 5%;
|
||||
font-size: 1em;
|
||||
text-align: center;
|
||||
padding-top: 1%;
|
||||
font-family: "Lemon", serif;
|
||||
}
|
||||
|
||||
body.light-mode .p{
|
||||
color : #000000;
|
||||
.createAccount{
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
body.light-mode .btn{
|
||||
background: linear-gradient(90deg, #caffde 0%, #b7c8ff 100%);
|
||||
color : #000000;
|
||||
}
|
||||
/* ====== ECRAN TABLETTE ====== */
|
||||
|
||||
body.light-mode .champ{
|
||||
background-color: #fff1f1;
|
||||
border: 1px solid #000000;
|
||||
}
|
||||
@media (max-width: 834px){
|
||||
.signin{
|
||||
width: 50vw;
|
||||
margin-left: 22vw;
|
||||
margin-top: 9vh;
|
||||
padding: 3vh;
|
||||
padding-bottom: 5vh;
|
||||
}
|
||||
|
||||
.btn{
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
body.dark-mode .connectAccount{
|
||||
margin-top: 5%;
|
||||
margin-bottom: 5%;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
padding-top: 1%;
|
||||
color: white;
|
||||
border: 1px solid transparent;
|
||||
font-family: "Lemon", serif;
|
||||
}
|
||||
.createAccount{
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.connectAccount{
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
body.light-mode .connectAccount{
|
||||
margin-top: 5%;
|
||||
margin-bottom: 5%;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
padding-top: 1%;
|
||||
color: black;
|
||||
font-family: "Lemon", serif;
|
||||
}
|
||||
|
||||
/* ====== ECRAN TELEPHONE====== */
|
||||
|
||||
@media (max-width: 480px){
|
||||
|
||||
}
|
||||
@ -0,0 +1,108 @@
|
||||
/* header.css */
|
||||
|
||||
/* Styles généraux */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #120b1d;
|
||||
font-family: "Lemon", serif;
|
||||
margin-top: 200px;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
background-color: #000000;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
vertical-align: center;
|
||||
gap: 30px;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.user {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
vertical-align: center;
|
||||
gap: 30px;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
vertical-align: center;
|
||||
margin: 10px;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
||||
/* Mode sombre */
|
||||
body.dark-mode {
|
||||
background-color: #120B1D;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
body.dark-mode .header {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
body.dark-mode .header img {
|
||||
filter: invert(0%);
|
||||
}
|
||||
|
||||
body.dark-mode .nav img:hover {
|
||||
filter: invert(59%) sepia(96%) saturate(6733%) hue-rotate(275deg) brightness(112%) contrast(122%);
|
||||
}
|
||||
|
||||
body.dark-mode .search {
|
||||
background: white;
|
||||
}
|
||||
|
||||
/* Mode clair */
|
||||
body.light-mode {
|
||||
background-color: #ffffff;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
body.light-mode .header {
|
||||
background-color: #F4F1DE;
|
||||
}
|
||||
|
||||
body.light-mode .header img {
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
body.light-mode .nav img:hover {
|
||||
filter: invert(22%) sepia(6%) saturate(2269%) hue-rotate(193deg) brightness(98%) contrast(106%);
|
||||
}
|
||||
|
||||
body.light-mode .search {
|
||||
background: black;
|
||||
}
|
||||
@ -1,20 +1,16 @@
|
||||
<div class="header">
|
||||
<div class="nav">
|
||||
<a href="{{ racine }}/favorite"><img src="{{ racine }}/images/coeur.svg" alt="coeur" width="67px" height="67px" onmousedown="return false"></a>
|
||||
<img id="theme-icon" src="{{ racine }}/images/dark.svg" alt="toggle theme" width="72px" height="37px" onmousedown="return false" onclick="toggleTheme()">
|
||||
<a href="{{ racine }}/quiz/1"><img src="{{ racine }}/images/quizz.svg" alt="quizz" width="51px" height="82px" onmousedown="return false"></a>
|
||||
<a href="{{ racine }}/favorite"><img src="{{ racine }}/images/coeur.svg" alt="coeur" onmousedown="return false"></a>
|
||||
<img id="theme-icon" src="{{ racine }}/images/dark.svg" alt="toggle theme" onmousedown="return false" onclick="toggleTheme()">
|
||||
<a href="{{ racine }}/quiz/1"><img src="{{ racine }}/images/quizz.svg" alt="quizz" onmousedown="return false"></a>
|
||||
|
||||
</div>
|
||||
<div class="logo">
|
||||
<a href="{{ racine }}/"><img src="{{ racine }}/images/WIKIFANTASY.png" alt="Logo" width="227px" height="106px" onmousedown="return false"></a>
|
||||
<a href="{{ racine }}/"><img src="{{ racine }}/images/WIKIFANTASY.png" alt="Logo" onmousedown="return false"></a>
|
||||
</div>
|
||||
|
||||
<div class="user">
|
||||
|
||||
|
||||
<div class="search">
|
||||
<a href="{{ racine }}/search"><img src="{{ racine }}/images/search.png" alt="search" width="50px" height="50px" onmousedown="return false"></a>
|
||||
</div>
|
||||
<a href="{{ racine }}/profil"><img src="{{ racine }}/images/user_dark.png" alt="user" width="70px" height="70px" onmousedown="return false"></a>
|
||||
<a href="{{ racine }}/search"><img src="{{ racine }}/images/loupe.svg" alt="search" onmousedown="return false"></a>
|
||||
<a href="{{ racine }}/profil"><img src="{{ racine }}/images/user_dark.png" alt="user" onmousedown="return false"></a>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,6 +1,10 @@
|
||||
<body>
|
||||
<h1 style="color: #b7c8ff"> {{ score }} </h1>
|
||||
<h1> {{ nextquiz }} </h1>
|
||||
|
||||
<h1>Résultat</h1>
|
||||
<div class="resultat">
|
||||
<p> nombre de réponse juste : {{ score }}</p>
|
||||
<p> nombre de réponse fausse : {{ 10 - score }}</p>
|
||||
<a class="suiv" href="{{racine}}/quiz/{{ nextquiz }}" alt="quiz suivant">
|
||||
<img src="../images/suivant.png" />
|
||||
</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,25 +1,27 @@
|
||||
<h1>▶ Connexion ◀</h1>
|
||||
|
||||
<form class="login" method="post" action="{{ racine }}/validlogin">
|
||||
<p> <strong>Identifiant *</strong></p>
|
||||
<input type="text" class="connexion" name="pseudo" id="pseudo" placeholder="Entrez votre pseudo" required />
|
||||
<div class="login">
|
||||
<form method="post" action="{{ racine }}/validlogin">
|
||||
<p> <strong>Identifiant *</strong></p>
|
||||
<input type="text" class="connexion" name="pseudo" id="pseudo" placeholder="Entrez votre pseudo" required />
|
||||
|
||||
<p> <strong> Mot de passe *</strong></p>
|
||||
<input type="password" class="connexion" name="mdp" id="mdp" placeholder="Entrez votre mdp" required />
|
||||
<p> <strong> Mot de passe *</strong></p>
|
||||
<input type="password" class="connexion" name="mdp" id="mdp" placeholder="Entrez votre mdp" required />
|
||||
|
||||
{% if error is defined and error is not empty %}
|
||||
<p style="color: red">{{ error }}</p>
|
||||
{% endif %}
|
||||
<div class="createAccount">
|
||||
<p class="createAccount">Vous n'avez de compte?</p>
|
||||
<a href="{{ racine }}/signin" class="createAccount">S'incrire</a>
|
||||
</div>
|
||||
|
||||
{% if error is defined and error is not empty %}
|
||||
<p style="color: red">{{ error }}</p>
|
||||
{% endif %}
|
||||
<div class="createAccount">
|
||||
<p class="createAccount">Vous n'avez de compte?</p>
|
||||
<a href="{{ racine }}/signin" class="createAccount">S'incrire</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="buttonSubmitDiv">
|
||||
<button class="buttonSudmite">Se Connecter</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<div class="buttonSubmitDiv">
|
||||
<button class="buttonSudmite">Se Connecter</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in new issue