diff --git a/.gitignore b/.gitignore index e69de29..4abbf33 100644 --- a/.gitignore +++ b/.gitignore @@ -0,0 +1 @@ +"C:\Users\MiniV\OneDrive - lycée Paul Constans\Cours\1re\NSI\sernyS_nsi_web\style\style_index.css.map" \ No newline at end of file diff --git a/_content/fnac-icon.png b/_content/fnac-icon.png new file mode 100644 index 0000000..38d267c Binary files /dev/null and b/_content/fnac-icon.png differ diff --git a/index.html b/index.html index 9d6efdf..f4f8c50 100644 --- a/index.html +++ b/index.html @@ -12,15 +12,15 @@
-

PopOp

+

PopOp

Se connecter - S'inscrire + S'inscrire
@@ -30,80 +30,101 @@ thumbnail

Royals

-

Royals - Lorde
spotify-iconLien - (payant)

+

Royals - Lorde

+ + spotify-iconLien (légal)
thumbnail

Numb

-

Numb - Linkin Park
spotify-iconLien (payant)

+

Numb - Linkin Park

+ + spotify-iconLien (légal)
thumbnail

Red

-

Red - Survive said the prophet
spotify-iconLien (payant)

+

Red - Survive said the prophet

+ + spotify-iconLien (légal)
thumbnail

命に嫌われて

-

命に嫌われている。- Majiko
spotify-iconLien - (payant)

+

命に嫌われている。- Majiko

+ + spotify-iconLien (légal)
- + thumbnail

Symphony

-

Symphony - Clean Bandit (feat. Zara Larsson)
spotify-iconLien (payant)

+

Symphony - Clean Bandit (feat. Zara Larsson)>

+ + spotify-iconLien (légal)
thumbnail

Reckoning song

-

Reckoning song (cover) - Asaf Avidan, The Mojos
spotify-iconLien (payant)

+

Reckoning song (cover) - Asaf Avidan, The Mojos

+ + spotify-iconLien (légal)
- - thumbnail + + thumbnail
-

Boulevard of Broken Dreams

-

Boulevard of Broken Dreams - Green Day
spotify-iconLien (payant)

+

Boulevard of..

+

Boulevard of Broken Dreams - Green Day

+ + spotify-iconLien (légal)
thumbnail

Centuries

-

Centuries - Fall Out Boy
spotify-iconLien (payant)

+

Centuries - Fall Out Boy

+ + spotify-iconLien (légal)
thumbnail

Le temps est bon

-

Le temps est bon - Bon Entendeur
spotify-iconLien (payant)

+

Le temps est bon - Bon Entendeur

+ + spotify-iconLien (légal)
thumbnail

Radioactive

-

Radioactive - Imagine Dragons
spotify-iconLien (payant)

+

Radioactive - Imagine Dragons

+ + spotify-iconLien (légal)
@@ -137,7 +158,7 @@
diff --git a/reading.html b/reading.html new file mode 100644 index 0000000..4c1fee4 --- /dev/null +++ b/reading.html @@ -0,0 +1,206 @@ + + + + + PopOp + + + + + + + + +
+

PopOp

+ +
+ Se connecter + S'inscrire +
+
+
+
+ + thumbnail +
+

La ballade de Lila K

+

Blandine le callet

+ + spotify-iconLien 7.70€ +
+ + + thumbnail +
+

La Princesse de Clèves

+

Madame de Lafayette

+ + spotify-iconLien 2.95€ +
+ + + thumbnail +
+

Banana Fish

+

Akimi Yoshida

+ + spotify-iconLien 16€ +
+ + + thumbnail +
+

Les enfants du temps

+

Makoto Shinkai

+ + spotify-iconLien 14.95€ +
+ + + thumbnail +
+

The Farm [EN]

+

Tom Rob Smith

+ + spotify-iconLien 0.90€ +
+ + + thumbnail +
+

Edmond Rostand

+

Cyrano de Bergerac

+ + spotify-iconLien 3€ +
+ + + thumbnail +
+

La ballade de Lila K

+

Blandine le callet

+ + spotify-iconLien 7.70€ +
+ + + thumbnail +
+

La ballade de Lila K

+

Blandine le callet

+ + spotify-iconLien 7.70€ +
+ + + thumbnail +
+

La ballade de Lila K

+

Blandine le callet

+ + spotify-iconLien 7.70€ +
+ + + thumbnail +
+

La ballade de Lila K

+

Blandine le callet

+ + spotify-iconLien 7.70€ +
+ + + thumbnail +
+

La ballade de Lila K

+

Blandine le callet

+ + spotify-iconLien 7.70€ +
+ +
+
+ + + +
+
+ + + + \ No newline at end of file diff --git a/sign_in.html b/sign_in.html index 2990cb0..14dc6ea 100644 --- a/sign_in.html +++ b/sign_in.html @@ -8,55 +8,36 @@ - Titre + Conenxion - - -
-

PopOp

- -
- Se connecter - S'inscrire -
-
-
-
- En attente de l'ajout d'un systeme PHP. -
Cette page est moche et mal faite. -
+
+

Connecte-toi pour accéder à plus de foncitonnalités

-

Connexion

- -
+
- +
-
- + +
+
+
+ + -
- - -

Mot de passe oublié ?

-
- + \ No newline at end of file diff --git a/sign_up.html b/sign_up.html deleted file mode 100644 index dd68598..0000000 --- a/sign_up.html +++ /dev/null @@ -1,69 +0,0 @@ - - - - - - - Titre - - - - - - - - -
-

PopOp

- -
- Se connecter - S'inscrire -
-
-
-
- En attente de l'ajout d'un systeme PHP. -
Cette page est moche et mal faite. -
-
-

Inscription

- -
-
- -
- -
- -
-
- -
-
- -
-
- -
-
-
- - - - \ No newline at end of file diff --git a/sign_up.php b/sign_up.php new file mode 100644 index 0000000..ca7d0f2 --- /dev/null +++ b/sign_up.php @@ -0,0 +1,110 @@ + +prepare("SELECT * FROM membres WHERE pseudo = ?"); + $look->execute(array($pseudo)); + $alreadyexist = -1; + $alreadyexist = $look->rowCount(); + $lookmail = $bdd->prepare("SELECT * FROM membres WHERE mail = ?"); + $lookmail->execute(array($mail)); + $alreadyexist2 = -1; + $alreadyexist2 = $lookmail->rowCount(); + if ($alreadyexist == 0 AND $alreadyexist2 == 0) { + $ins = $bdd->prepare("INSERT INTO membres(pseudo, mail, password, signup_date) VALUES(?, ?, ?, now())"); + $ins->execute(array($pseudo, $mail, $password)); + $erreur ="Vous avez été correctement inscrit dans notre base de donnée."; + } else { + $erreur ="Ce pseudo/mail est déjà utilisé"; + } + } else { + $erreur ="Le mail est trop long (max 255c)"; + } + } else { + $erreur ="Le pseudo est trop long (max 255c)"; + } + } else { + $erreur = "Les mails sont différents."; + } + } else { + $erreur = "Les mots de passe sont différents."; + } + } +} + + +?> + + + + + Conenxion + + + + + + +
+

Inscris-toi pour accéder à plus de foncitonnalités

+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ + +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/style/style_index.css b/style/style_index.css index 6f350f9..d6b4ccc 100644 --- a/style/style_index.css +++ b/style/style_index.css @@ -9,6 +9,11 @@ body { margin: 0; } +@media only screen and (min-width: 1080px) { + .main { + padding: 0 20vh 0 20vh; + } +} main { padding: 10px; background-color: white; @@ -26,8 +31,27 @@ main .element { padding-bottom: 24px; text-align: justify; width: 11em; - padding: 10px; + height: 25em; + padding: 10px 10px 10px 10px; margin: 2.5px 2.5px 0px 2.5px; + overflow: hidden; +} +main .element p:not(.hidden) { + display: block; +} +main .element p.hidden { + margin-top: 15px; + display: none; + font-style: italic; +} +main .element:hover p:not(.hidden) { + display: none; +} +main .element:hover h2 { + display: none; +} +main .element:hover p.hidden { + display: block; } main .element img { border-radius: 10% 40% 40% 40%; diff --git a/style/style_index.css.map b/style/style_index.css.map index dfd22bf..ca6b06d 100644 --- a/style/style_index.css.map +++ b/style/style_index.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["styles_index.scss"],"names":[],"mappings":"AAAQ;AACA;AACA;AACR;EACC;;;AAED;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAGC;EACC;EACD;;AAID;EACC;EACA;EACA;EACA;EACA;EACA;;AAGA;EACC;EACA;;AAED;EASC;EACA;EACA;EACA;;AAXA;EACC;EACA;EACA;;AASD;EACC;;AAKH;EACC;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EAqEA;EACA;EACA;EACA;EACA;;AAxEA;EACC;EACA;;AAED;EACC;EACA;EACA;;AAEC;EACC;EACA;EACA;EACA;EACA;EACA;;AAIH;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACC;EACA;;AAED;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACC;EACA;;AAaL;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA","file":"style_index.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["styles_index.scss"],"names":[],"mappings":"AAAQ;AACA;AACA;AACR;EACC;;;AAED;EACC;;;AAED;EACC;IACC;;;AAGF;EACC;EACA;EACA;EACA;EACA;EACA;;AAGC;EACC;EACD;;AAID;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;AAED;EACC;EACA;EACA;;AAIA;EACC;;AAED;EACC;;AAED;EACC;;AAGF;EACC;EACA;;AAED;EASC;EACA;EACA;EACA;;AAXA;EACC;EACA;EACA;;AASD;EACC;;AAKH;EACC;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EAqEA;EACA;EACA;EACA;EACA;;AAxEA;EACC;EACA;;AAED;EACC;EACA;EACA;;AAEC;EACC;EACA;EACA;EACA;EACA;EACA;;AAIH;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACC;EACA;;AAED;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACC;EACA;;AAaL;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA","file":"style_index.css"} \ No newline at end of file diff --git a/style/style_log.css b/style/style_log.css index 99e67c1..8f17fe4 100644 --- a/style/style_log.css +++ b/style/style_log.css @@ -1,87 +1,128 @@ -@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap"; -@import"https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap"; - -main { - padding: 5px 20%; - height: 79vh; -} -main .red-banner { - background-color: red; - color: white; - height: auto; - font-size: 24px; - padding: 30px 0; - text-align: center; - font-family: "Montserrat", sans-serif; +@import "https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap"; +@import "https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap"; +/* Reset CSS */ +input[type=submit i] { + appearance: none; + user-select: none; + white-space: normal; + align-items: flex-start; + text-align: start; + cursor: default; + color: black; + background-color: white; + box-sizing: border-box; + padding: 0px; + border-width: 0px; + border-style: none; + border-color: white; + border-image: initial; + font-size: 16px; } -form { - display: flex; - justify-content: center; - font-family: "Roboto", sans-serif; - flex-direction: column; - align-items: center; - text-align: center; -} -form .names { - display: flex; - flex-direction: row; - justify-content: space-between; - margin: 5px 0px; - align-items: inherit; -} -form .form_p_contents { - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: center; -} -form .form_p_contents p a { - font-size: 14px; - color: #696969; - text-decoration: none; -} -form .form_p_contents p a:hover { - font-size: 14px; - color: #696969; - text-decoration: none; + +a:-webkit-any-link { + color: black; + cursor: default; + text-decoration: none; +} + +input { + writing-mode: auto; + text-rendering: auto; + color: black; + letter-spacing: normal; + word-spacing: normal; + text-transform: none; + text-indent: auto; + text-shadow: none; + display: inline-block; + text-align: auto; + appearance: none; + background-color: white; + -webkit-rtl-ordering: none; + cursor: text; + margin: 0em; + font: 400 13.3333px Arial; + padding: 1px 2px; + border-width: 2px; + border-style: none; + border-color: white; + border-image: initial; +} + +input:focus-visible { + outline: rgba(0, 0, 0, 0) solid 0px; + outline-offset: 0px; +} + +/* Fin Reset */ +input:focus { + position: relative; + color: red; +} +input:focus::before { + content: " "; + position: absolute; + background-color: red; + top: 0; + width: 10px; + height: 1000px; +} + +body { + position: relative; + margin: 0; +} + +.log-area { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + height: 20vh; + margin: 30vh 0 50vh 0; + font-family: "montserrat", sans-serif; +} + +.log-area > p { + text-align: center; } + form { - margin: 5px 0px; - font-size: 24px; + font-family: monospace, sans-serif; } -label { - letter-spacing: -1px; + +.f_inputs { + text-align: center; } -input { - border: 0px; - background-color: #24252a; - color: rgb(255, 0, 0); - border-radius: 3.5px; - margin-left: 2px; - padding: 3px; - font-size: 18px; - + +.f_inputs > div { + margin-top: 5px; } -input:focus { - outline: 1px solid #24252a ; - transition: 0.2s; - text-decoration: underline; - background-color: #edf0f1; - color: #24252a; - -} -input[type="submit"] { - border: 0px; - background-color: #24252a; - color: #edf0f1; - font-family: "Montserrat", sans-serif; - padding: 10px; - font-weight: 700; - letter-spacing: 3px; -} -input[type="submit"]:hover { - transition: 0.2s; - outline: 4px solid #24252a; - color: #24252a; - background-color: #edf0f1; + +.buttons { + display: flex; + align-items: center; + justify-content: center; + margin-top: 25px; +} + +.sign_in { + background-color: #00dc64; +} + +.sign_up { + background-color: #6a6a6a; +} + +.buttons > div { + padding: 10px 40px; + border-radius: 25px; + margin: 0 20px; +} + +div > input[type=submit], div > a { + font-family: roboto, sans-serif; + background-color: inherit; } + +/*# sourceMappingURL=style_log.css.map */ diff --git a/style/style_log.css.map b/style/style_log.css.map new file mode 100644 index 0000000..4e27c8f --- /dev/null +++ b/style/style_log.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["styles_log.scss"],"names":[],"mappings":"AAAO;AACA;AAGP;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;;;AAEJ;AACA;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA","file":"style_log.css"} \ No newline at end of file diff --git a/style/styles_index.scss b/style/styles_index.scss index 132ae89..d48a494 100644 --- a/style/styles_index.scss +++ b/style/styles_index.scss @@ -7,7 +7,11 @@ body { margin: 0; } - +@media only screen and (min-width: 1080px) { + .main { + padding: 0 20vh 0 20vh; + } + } main { padding: 10px; background-color: rgb(255, 255, 255); @@ -28,10 +32,30 @@ main { padding-bottom: 24px; text-align: justify; width: 11em; - padding: 10px; + height: 25em; + padding: 10px 10px 10px 10px; margin: 2.5px 2.5px 0px 2.5px; - - + overflow: hidden; + p:not(.hidden) { + display: block; + } + p.hidden { + margin-top: 15px; + display: none; + font-style: italic; + } + + &:hover { + p:not(.hidden) { + display: none; + } + h2 { + display: none; + } + p.hidden { + display: block; + } + } & img { border-radius: 10% 40% 40% 40%; filter: blur(0.10px); diff --git a/style/styles_log.scss b/style/styles_log.scss new file mode 100644 index 0000000..2bb5dc7 --- /dev/null +++ b/style/styles_log.scss @@ -0,0 +1,119 @@ +@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap"; +@import"https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap"; + + +/* Reset CSS */ +input[type="submit" i] { + appearance: none; + user-select: none; + white-space: normal; + align-items: flex-start; + text-align: start; + cursor: default; + color: black; + background-color: white; + box-sizing: border-box; + padding: 0px; + border-width: 0px; + border-style: none; + border-color: white; + border-image: initial; + font-size: 16px; +} +a:-webkit-any-link { + color: black; + cursor: default; + text-decoration: none; +} +input { + writing-mode: auto; + text-rendering: auto; + color: black; + letter-spacing: normal; + word-spacing: normal; + text-transform: none; + text-indent: auto; + text-shadow: none; + display: inline-block; + text-align: auto; + appearance: none; + background-color: white; + -webkit-rtl-ordering: none; + cursor: text; + margin: 0em; + font: 400 13.3333px Arial; + padding: 1px 2px; + border-width: 2px; + border-style: none; + border-color: white; + border-image: initial; +} +input:focus-visible { + outline: rgba(0, 0, 0, 0) solid 0px; + outline-offset: 0px; +} +/* Fin Reset */ +input:focus { + position: relative; + color: red; + + &::before { + content: " "; + position: absolute; + background-color: red; + top: 0; + width: 10px; + height: 1000px; + } +} + +body { + position: relative; + margin: 0; +} + +.log-area { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + height: 20vh; + margin: 30vh 0 50vh 0; + font-family: 'montserrat', sans-serif; +} +.log-area > p { + text-align: center; +} +form { + font-family: monospace, sans-serif; +} +.f_inputs { + text-align: center; +} +.f_inputs > div { + margin-top: 5px; +} +.buttons { + display : flex; + align-items: center; + justify-content: center; + margin-top: 25px; +} +.sign_in { + background-color:#00dc64; +} +.sign_up { + background-color: #6a6a6a; +} +.buttons > div { + padding:10px 40px; + border-radius: 25px; + margin: 0 20px; +} + +div > input[type="submit"], div > a { + font-family: roboto, sans-serif; + background-color: inherit; +} + +