SERNY Sacha 3 years ago
parent
commit
ce0cbef8b0
  1. BIN
      _content/42.png
  2. BIN
      _content/sky.jpg
  3. BIN
      _content/star.png
  4. BIN
      _content/webtoon-icon.png
  5. 87
      fun.html
  6. 25
      index.html
  7. 4
      mentions-legales.html
  8. 118
      reading.html
  9. 43
      sign_in.html
  10. 157
      sign_in.php
  11. 114
      sign_up.php
  12. 51
      style/style_fun.css
  13. 1
      style/style_fun.css.map
  14. 28
      style/style_index.css
  15. 1
      style/style_index.css.map
  16. 1
      style/style_log.css.map
  17. 49
      style/styles_fun.scss
  18. 28
      style/styles_index.scss
  19. 18
      style/styles_main.scss

BIN
_content/42.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

BIN
_content/sky.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

BIN
_content/star.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 430 KiB

BIN
_content/webtoon-icon.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

87
fun.html

@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<title>PopOp</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style/style_index.css" rel="stylesheet">
<link href="style/style_fun.css" rel="stylesheet">
<link href="style/style_main.css" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="_content/favicon-32x32.png">
</head>
<body>
<header>
<h1><a class="_title" href="home.html"><span class="word1">Pop</span><span class="word3">Op</span></a></h1>
<ul>
<li><a href="fun.html">Fun</a></li>
<li><a href="index.html">Musiques</a></li>
<li><a href="reading.html">Lectures</a></li>
</ul>
<div>
<a href="sign_in.php">Se connecter</a>
<a href="sign_up.php">S'inscrire</a>
</div>
</header>
<main>
<div class="star-wars">
<div>
<marquee behavior="" direction="left"><img src="_content/42.png" alt=""><img src="_content/42.png"
alt=""><img src="_content/42.png" alt=""><img src="_content/42.png" alt=""><img
src="_content/42.png" alt=""><img src="_content/42.png" alt=""><img src="_content/42.png"
alt=""></marquee>
<p>
D'après https://simple.wikipedia.org/wiki/42_(answer)
<br><br>
42 is the "Answer to the Ultimate Question of Life, the
Universe, and Everything" in The
Hitchhiker's Guide to the Galaxy books. It was computed by Deep Thought, the second greatest
computer ever. The descendants of Deep Thought's creators are upset by the numeric nature of the
answer, not understanding what to do with it or what to tell the people who had commissioned the
7.5-million year project.
<br><br>
When asked to produce The Ultimate Question to go
with the answer "42", Deep Thought admits it
is
not capable of computing that itself, but that it can help to design an even more powerful
computer,
which can. This new computer will incorporate living beings into the "computational matrix" and
will
run for ten million years. It is the planet Earth.
</p>
</div>
</div>
<div class="main-contents">
<aside>
<h2>À propos...</h2>
<p>Voici un site très peu utile et pertinent afin de rendre un travail un minimum
complété. Voilà Voilà, <a href="https://minivoltrush.alwaysdata.net/signup.php" target="_blank">
cliquez ici</a> pour découvrir l'envers du décor (ou pas). <br><br>
Le rhinopharyngitolaryngographologie et cyclopentanoperhydrophénanthrène met en avant la
contraventionnalisation anticonstitutionnelle mis en avant les apports en
aminométhylpyrimidinylhydroxyéthylméthylthiazolium.</p>
</aside>
<aside>
<h2>Fun Fact</h2>
<p>Je me suis souvenu qu'il fallait faire <a href="index.html" target="_blank">ce site</a> uniquement
Mardi 30 Novembre.</p>
<p>Faire un lien un minimum esthétique c'est long. -_-</p>
</aside>
<aside>
<h2>Image aléatoire</h2>
<p>Un site du nom de <a href="https://picsum.photos" target="_blank">picsum</a> affiche une image
aléatoire. Rien de
plus.
</p>
<img src="https://picsum.photos/400/240" alt="random-pic" height="240" width="400">
</aside>
</div>
</main>
<footer>
<a href="#mentions-legales" target="_blank">Mentions légales + points d'amélioration.</a> <br> Mise en page par
SERNY Sacha. Données par <a href="https://www.wikipedia.org">Wikipedia</a>
</footer>
</body>
</html>

25
index.html

@ -14,12 +14,12 @@
<header> <header>
<h1><a class="_title" href="home.html"><span class="word1">Pop</span><span class="word3">Op</span></a></h1> <h1><a class="_title" href="home.html"><span class="word1">Pop</span><span class="word3">Op</span></a></h1>
<ul> <ul>
<li><a href="#unlinked">Top</a></li> <li><a href="fun.html">Fun</a></li>
<li><a href="index.html">Musiques</a></li> <li><a href="index.html">Musiques</a></li>
<li><a href="reading.html">Lectures</a></li> <li><a href="reading.html">Lectures</a></li>
</ul> </ul>
<div> <div>
<a href="sign_in.html">Se connecter</a> <a href="sign_in.php">Se connecter</a>
<a href="sign_up.php">S'inscrire</a> <a href="sign_up.php">S'inscrire</a>
</div> </div>
</header> </header>
@ -131,20 +131,17 @@
<div class="main-contents"> <div class="main-contents">
<aside> <aside>
<h2>À propos...</h2> <h2>À propos...</h2>
<p>Voici un site ma foi très peu utile et pertinent afin de rendre un travail un minimum <p>Voici un site très peu utile et pertinent afin de rendre un travail un minimum
complété. Ce site n'a pas vraiment d'objectif. Dans l'état actuel des choses le système de connexion complété. Voilà Voilà, <a href="https://minivoltrush.alwaysdata.net/signup.php" target="_blank">
et d'inscription requiert de "simuler" un serveur ou d'en être sur un réel. Par conséquent ce cliquez ici</a> pour découvrir l'envers du décor (ou pas). <br><br>
système n'est pas mis en place ou effectif. Sur mon "test" de <a Le rhinopharyngitolaryngographologie et cyclopentanoperhydrophénanthrène met en avant la
href="https://minivoltrush.alwaysdata.net/signup.php" target="_blank">site à ce lien</a>, ce contraventionnalisation anticonstitutionnelle mis en avant les apports en
système fonctionne très bien. Cependant je n'assume plus son contenu ^-^.</p> aminométhylpyrimidinylhydroxyéthylméthylthiazolium.</p>
</aside> </aside>
<aside> <aside>
<h2>Fun Fact</h2> <h2>Fun Fact</h2>
<p>Je me suis souvenu qu'il fallait faire <a href="index.html" target="_blank">ce site</a> uniquement le <p>En cliquant sur le lien vous accèderai à plus d'informations sur les conditions de création de ce
dimanche soir site : <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank">Cliquez ici</a>
précédent la rentrée du
Lundi 8 Novembre.</p>
<p>Faire un lien un minimum esthétique c'est long. -_-</p>
</aside> </aside>
<aside> <aside>
<h2>Image aléatoire</h2> <h2>Image aléatoire</h2>
@ -161,5 +158,3 @@
SERNY Sacha. Données par <a href="https://www.wikipedia.org">Wikipedia</a> SERNY Sacha. Données par <a href="https://www.wikipedia.org">Wikipedia</a>
</footer> </footer>
</body> </body>
</html>

4
mentions-legales.html

@ -18,8 +18,8 @@
<li><a href="#unlinked">Lectures</a></li> <li><a href="#unlinked">Lectures</a></li>
</ul> </ul>
<div> <div>
<a href="sign_in.html">Se connecter</a> <a href="sign_in.php">Se connecter</a>
<a href="sign_up.html">S'inscrire</a> <a href="sign_up.php">S'inscrire</a>
</div> </div>
</header> </header>
</body> </body>

118
reading.html

@ -14,12 +14,12 @@
<header> <header>
<h1><a class="_title" href="home.html"><span class="word1">Pop</span><span class="word3">Op</span></a></h1> <h1><a class="_title" href="home.html"><span class="word1">Pop</span><span class="word3">Op</span></a></h1>
<ul> <ul>
<li><a href="#unlinked">Top</a></li> <li><a href="fun.html">Fun</a></li>
<li><a href="index.html">Musiques</a></li> <li><a href="index.html">Musiques</a></li>
<li><a href="reading.html">Lectures</a></li> <li><a href="reading.html">Lectures</a></li>
</ul> </ul>
<div> <div>
<a href="sign_in.html">Se connecter</a> <a href="sign_in.php">Se connecter</a>
<a href="sign_up.php">S'inscrire</a> <a href="sign_up.php">S'inscrire</a>
</div> </div>
</header> </header>
@ -103,88 +103,104 @@
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 3€</u> <u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 3€</u>
</div> </div>
</a> </a>
<a href="https://livre.fnac.com/a15171008/Blue-Period-Tome-01-Blue-Period-Tsubasa-Yamaguchi#omnsearchpos=1" <a href="https://www.webtoons.com/fr/fantasy/omniscient-reader/list?title_no=2175" class="element elmnt1"
class="element elmnt1" target="_blank"> target="_blank">
<img src="https://static.fnac-static.com/multimedia/FR/Images_Produits/FR/fnac.com/Visual_Principal_340/2/5/7/9782253161752/tsp20121009132147/La-ballade-de-Lila-K.jpg" <img src="https://swebtoon-phinf.pstatic.net/20200814_47/1597371219311kW6GG_JPEG/M_details.jpg?type=crop540_540"
alt="thumbnail"> alt="thumbnail">
<div> <div>
<h2>La ballade de Lila K</h2> <h2>Omniscient</h2>
<p>Blandine le callet<br></p> <p>Sleepy-C / UMI<br></p>
<p class="hidden">Une jeune femme, Lila K., fragile et volontaire, raconte son histoire. Un jour, <p class="hidden">« Je suis le seul lecteur à connaître la fin du monde. »
des hommes en noir l'ont brutalement arrachée à sa mère.
</p> </p>
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</u> <u><img class="icon" src="_content/webtoon-icon.png" alt="spotify-icon">Lien gratuit</u>
</div> </div>
</a> </a>
<a href="https://livre.fnac.com/a3784037/Blandine-Le-Callet-La-Ballade-de-Lila-K#omnsearchpos=1" <a href="https://www.webtoons.com/fr/action/ghost-king/list?title_no=3674" class="element elmnt1"
class="element elmnt1" target="_blank"> target="_blank">
<img src="https://static.fnac-static.com/multimedia/FR/Images_Produits/FR/fnac.com/Visual_Principal_340/2/5/7/9782253161752/tsp20121009132147/La-ballade-de-Lila-K.jpg" <img src="https://swebtoon-phinf.pstatic.net/20211117_242/1637119335923dHRBM_JPEG/1M_details.jpg?type=crop540_540"
alt="thumbnail"> alt="thumbnail">
<div> <div>
<h2>La ballade de Lila K</h2> <h2>Ghost King</h2>
<p>Blandine le callet<br></p> <p>Park Jin-Seok / Son Gohu<br></p>
<p class="hidden">Une jeune femme, Lila K., fragile et volontaire, raconte son histoire. Un jour, <p class="hidden">Dans un monde où les arts martiaux du passé se prolongent dans le présent… la paix
des hommes en noir l'ont brutalement arrachée à sa mère. est revenue après la disparition d'un tueur sanguinaire, le Roi Spectral.
</p> </p>
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</u> <u><img class="icon" src="_content/webtoon-icon.png" alt="spotify-icon">Lien gratuit</u>
</div> </div>
</a> </a>
<a href="https://livre.fnac.com/a3784037/Blandine-Le-Callet-La-Ballade-de-Lila-K#omnsearchpos=1" <a href="https://www.webtoons.com/fr/action/ghost-king/list?title_no=3674" class="element elmnt1"
class="element elmnt1" target="_blank"> target="_blank">
<img src="https://static.fnac-static.com/multimedia/FR/Images_Produits/FR/fnac.com/Visual_Principal_340/2/5/7/9782253161752/tsp20121009132147/La-ballade-de-Lila-K.jpg" <img src="https://swebtoon-phinf.pstatic.net/20191219_16/15766814430890w1m9_JPEG/M_details_720x1230.jpg?type=crop540_540"
alt="thumbnail"> alt="thumbnail">
<div> <div>
<h2>La ballade de Lila K</h2> <h2>Tower Of God</h2>
<p>Blandine le callet<br></p> <p>SIU <br></p>
<p class="hidden">Une jeune femme, Lila K., fragile et volontaire, raconte son histoire. Un jour, <p class="hidden">“Que désirez-vous? La richesse? La gloire? Le pouvoir? La vengeance? Ou une chose
des hommes en noir l'ont brutalement arrachée à sa mère. qui surpasse toutes les autres ? Quel que soit votre désir, il se trouve ici !”
</p> </p>
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</u> <u><img class="icon" src="_content/webtoon-icon.png" alt="spotify-icon">Lien gratuit</u>
</div> </div>
</a> </a>
<a href="https://livre.fnac.com/a3784037/Blandine-Le-Callet-La-Ballade-de-Lila-K#omnsearchpos=1" <a href="https://www.webtoons.com/fr/action/the-god-of-high-school/list?title_no=1831"
class="element elmnt1" target="_blank"> class="element elmnt1" target="_blank">
<img src="https://static.fnac-static.com/multimedia/FR/Images_Produits/FR/fnac.com/Visual_Principal_340/2/5/7/9782253161752/tsp20121009132147/La-ballade-de-Lila-K.jpg" <img src="https://swebtoon-phinf.pstatic.net/20191127_291/1574821884836JUV15_JPEG/bg_mobile.jpg?type=crop540_540"
alt="thumbnail"> alt="thumbnail">
<div> <div>
<h2>La ballade de Lila K</h2> <h2>The God of High School</h2>
<p>Blandine le callet<br></p> <p>Yongje Park<br></p>
<p class="hidden">Une jeune femme, Lila K., fragile et volontaire, raconte son histoire. Un jour, <p class="hidden">Le destin de trois lycéens, experts en arts martiaux, se croisent lorsque les
des hommes en noir l'ont brutalement arrachée à sa mère. Juges font leur apparition, leur proposant de participer à un tournoi :
</p> </p>
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</u> <u><img class="icon" src="_content/webtoon-icon.png" alt="spotify-icon">Lien gratuit</u>
</div> </div>
</a> </a>
<a href="https://livre.fnac.com/a3784037/Blandine-Le-Callet-La-Ballade-de-Lila-K#omnsearchpos=1" <a href="https://www.webtoons.com/fr/thriller/sweethome/list?title_no=1996" class="element elmnt1"
class="element elmnt1" target="_blank"> target="_blank">
<img src="https://static.fnac-static.com/multimedia/FR/Images_Produits/FR/fnac.com/Visual_Principal_340/2/5/7/9782253161752/tsp20121009132147/La-ballade-de-Lila-K.jpg" <img src="https://swebtoon-phinf.pstatic.net/20200428_23/1588053177319xEVr7_JPEG/04_EC9E91ED9288EC8381EC84B8_mobile.jpg?type=crop540_540"
alt="thumbnail"> alt="thumbnail">
<div> <div>
<h2>La ballade de Lila K</h2> <h2>Sweet home</h2>
<p>Blandine le callet<br></p> <p>Carnby Kim / Youngchan Hwang <br></p>
<p class="hidden">Une jeune femme, Lila K., fragile et volontaire, raconte son histoire. Un jour, <p class="hidden">Après une tragédie familiale inattendue, un lycéen solitaire est obligé de quitter
des hommes en noir l'ont brutalement arrachée à sa mère. son domicile -
</p> </p>
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</u> <u><img class="icon" src="_content/webtoon-icon.png" alt="spotify-icon">Lien gratuit</u>
</div>
</a>
<a href="https://www.webtoons.com/fr/sports/the-boxer/list?title_no=2037" class="element elmnt1"
target="_blank">
<img src="https://swebtoon-phinf.pstatic.net/20200428_54/1588055670703Ehplg_JPEG/M_details.jpg?type=crop540_540"
alt="thumbnail">
<div>
<h2>The Boxer</h2>
<p>JH<br></p>
<p class="hidden">Avoir un talent particulier, bénédiction ou malédiction ?
</p>
<u><img class="icon" src="_content/webtoon-icon.png" alt="spotify-icon">Lien gratuit</u>
</div> </div>
</a> </a>
</div> </div>
<div class="main-contents"> <div class="main-contents">
<aside> <aside>
<h2>À propos...</h2> <h2>À propos...</h2>
<p>Voici un site ma foi très peu utile et pertinent afin de rendre un travail un minimum <p>Voici un site très peu utile et pertinent afin de rendre un travail un minimum
complété. Ce site n'a pas vraiment d'objectif. Dans l'état actuel des choses le système de connexion complété. Voilà Voilà, <a href="https://minivoltrush.alwaysdata.net/signup.php" target="_blank">
et d'inscription requiert de "simuler" un serveur ou d'en être sur un réel. Par conséquent ce cliquez ici</a> pour découvrir l'envers du décor (ou pas). <br><br>
système n'est pas mis en place ou effectif. Sur mon "test" de <a Le rhinopharyngitolaryngographologie et cyclopentanoperhydrophénanthrène met en avant la
href="https://minivoltrush.alwaysdata.net/signup.php" target="_blank">site à ce lien</a>, ce contraventionnalisation anticonstitutionnelle mis en avant les apports en
système fonctionne très bien. Cependant je n'assume plus son contenu ^-^.</p> aminométhylpyrimidinylhydroxyéthylméthylthiazolium.</p>
</aside> </aside>
<aside> <aside>
<h2>Fun Fact</h2> <h2>Fun Fact</h2>
<p>Je me suis souvenu qu'il fallait faire <a href="index.html" target="_blank">ce site</a> uniquement le <p>Je me suis souvenu qu'il fallait faire <a href="index.html" target="_blank">ce site</a> uniquement
dimanche soir Mardi 30 Novembre.</p>
précédent la rentrée du
Lundi 8 Novembre.</p>
<p>Faire un lien un minimum esthétique c'est long. -_-</p> <p>Faire un lien un minimum esthétique c'est long. -_-</p>
</aside> </aside>
<aside> <aside>

43
sign_in.html

@ -1,43 +0,0 @@
<!-- Traitement PHP -->
<?php
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Conenxion</title>
<meta charset="UTF-8">
<link href="style/style_log.css" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="_content/favicon-32x32.png">
</head>
<body>
<div class="log-area">
<p>Connecte-toi pour accéder à plus de foncitonnalités</p>
<form action="" method="POST">
<div class="f_inputs">
<div>
<label for="f_email">Adresse mail : </label><input type="email" id="f_email" maxlength="70"
placeholder="Adresse mail">
</div>
<div>
<label for="f_password">Mot de passe : </label><input type="password" id="f_password" maxlength="40"
placeholder="Mot de passe">
</div>
</div>
<div class="buttons">
<div class="sign_up">
<a href="sign_up.html">Pas de compte ?</a>
</div>
<div class="sign_in">
<input type="submit" name="" value="Se connecter" id="submit">
</div>
</div>
</form>
</div>
</body>
</html>

157
sign_in.php

@ -0,0 +1,157 @@
<<<<<<< HEAD
<!-- Traitement PHP -->
<?php
$servername = 'mysql-serny-nsi.alwaysdata.net';
$username = 'serny-nsi';
$mdp = 'ecole9090*';
$bdd = new PDO('mysql:host=mysql-serny-nsi.alwaysdata.net;dbname=serny-nsi_main', $username, $mdp);
if (isset($_POST['submit'])) {
$response ="here2";
if (isset($_POST['f_email']) AND !empty($_POST['f_email']) AND isset($_POST['f_password']) AND !empty($_POST['f_password'])) {
$email = htmlspecialchars($_POST['f_email']);
$password = htmlspecialchars($_POST['f_password']);
$look = $bdd->prepare("SELECT * FROM membres WHERE mail = ?");
$look->execute(array($email));
$check = $look->fetch();
var_dump($check['password']);
var_dump($password);
var_dump(password_verify($password, $check['password']));
$response ="here";
if ($check['mail'] != $email) {
$response = "Ce compte n'existe pas.";
}
else {
if (password_verify($password, $check['password'])) {
$response = "Vous êtes maintenant connecté.";
header('location: https://serny-nsi.alwaysdata.net');
} else {
$response = "Le mot de passe n'est pas valide.";
}
}
} else {
$response ="Veuillez remplir les champs ci-dessus.";
}
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Conenxion</title>
<meta charset="UTF-8">
<link href="style/style_log.css" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="_content/favicon-32x32.png">
</head>
<body>
<div class="log-area">
<p>Connecte-toi pour accéder à plus de foncitonnalités</p>
<form action="" method="POST">
<div class="f_inputs">
<div>
<label for="f_email">Adresse mail : </label><input type="email" name="f_email" id="f_email" maxlength="70"
placeholder="Adresse mail">
</div>
<div>
<label for="f_password">Mot de passe : </label><input type="password" name="f_password" id="f_password" maxlength="40"
placeholder="Mot de passe">
</div>
</div>
<div class="buttons">
<div class="sign_up">
<a href="sign_up.php">Pas de compte ?</a>
</div>
<div class="sign_in">
<input type="submit" name="submit" value="Se connecter" id="submit">
</div>
</div>
<p><?= $response ?></p>
</form>
</div>
</body>
=======
<!-- Traitement PHP -->
<?php
/*
Faire de la sécurité et de l'optimisation
Ce code est pourri mais VRAIMENT
*/
$servername = 'mysql-serny-nsi.alwaysdata.net';
$username = 'serny-nsi';
$mdp = 'ecole9090*';
$bdd = new PDO('mysql:host=mysql-serny-nsi.alwaysdata.net;dbname=serny-nsi_main', $username, $mdp);
if (isset($_POST['submit'])) {
if (isset($_POST["f_email"]) AND !empty($_POST["f_email"]) AND isset($_POST["f_password"]) AND !empty($_POST["f_password"])) {
$password = htmlspecialchars($_POST['password']);
$mail = htmlspecialchars($_POST['f_email']);
$look = $bdd->prepare("SELECT * FROM membres WHERE email = :mail");
$look->bindParam(":mail", $mail);
$look->execute();
$userexist = -1;
$userexist = $look->rowCount();
if ($userexist == 0) {
$data = $look->fetch();
var_dump($password,$data['password']);
if (password_verify($password,$data['password'])) {
$erreur = "Vous avez été correctement connecté.";
} else {
$erreur = "Les mots de passe ne correspondent pas.";
}
} else {
$erreur = "Le mail utilisé est inconnu.";
}
}
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Conenxion</title>
<meta charset="UTF-8">
<link href="style/style_log.css" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="_content/favicon-32x32.png">
</head>
<body>
<div class="log-area">
<p>Connecte-toi pour accéder à plus de foncitonnalités</p>
<form action="" method="POST">
<div class="f_inputs">
<div>
<label for="f_email">Adresse mail : </label><input type="email" id="f_email" maxlength="70"
placeholder="Adresse mail"
name="f_email">
</div>
<div>
<label for="f_password">Mot de passe : </label><input type="password" id="f_password" maxlength="40"
placeholder="Mot de passe"
name="f_password">
</div>
</div>
<div class="buttons">
<div class="sign_up">
<a href="sign_up.html">Pas de compte ?</a>
</div>
<div class="sign_in">
<input type="submit" name="submit" value="Se connecter" id="submit">
</div>
</div>
<div>
<?= $erreur ?>
</div>
</form>
</div>
</body>
>>>>>>> 24db56327fed9097898d28c291f7d01a5d9802b1
</html>

114
sign_up.php

@ -1,3 +1,116 @@
<<<<<<< HEAD
<!-- Traitement PHP -->
<?php
/*
Faire de la sécurité et de l'optimisation
Ce code est pourri
*/
$servername = 'mysql-serny-nsi.alwaysdata.net';
$username = 'serny-nsi';
$mdp = 'ecole9090*';
$bdd = new PDO('mysql:host=mysql-serny-nsi.alwaysdata.net;dbname=serny-nsi_main', $username, $mdp);
if (isset($_POST['submit'])) {
if (isset($_POST["f_email"]) AND !empty($_POST["f_email"]) AND isset($_POST["f_pseudo"]) AND !empty($_POST["f_pseudo"])AND isset($_POST["f_password"]) AND !empty($_POST["f_password"]) AND isset($_POST['f_password2']) AND !empty($_POST['f_password2'])) {
if ($_POST['f_password'] == $_POST['f_password2']) {
$password = password_hash(htmlspecialchars($_POST['f_password']), PASSWORD_DEFAULT);
$pseudo = htmlspecialchars($_POST['f_pseudo']);
$mail = htmlspecialchars($_POST['f_email']);
$mail2 = htmlspecialchars($_POST['f_email2']);
if($mail == $mail2) {
if (strlen($pseudo) < 254) {
if (strlen($mail) < 254) {
$look = $bdd->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.";
}
} else {
$erreur = "Veuillez remplir les champs ci-dessus.";
}
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Conenxion</title>
<meta charset="UTF-8">
<link href="style/style_log.css" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="_content/favicon-32x32.png">
</head>
<body>
<div class="log-area">
<p>Inscris-toi pour accéder à plus de foncitonnalités</p>
<form action="" method="POST">
<div class="f_inputs">
<div>
<label for="f_pseudo">Pseudo       : </label><input type="text" id="f_pseudo" maxlength="70"
placeholder="Pseudo" name="f_pseudo" autocomplete="off">
</div>
<div>
<label for="f_email">Adresse mail : </label><input type="email" id="f_email" maxlength="70"
placeholder="Adresse mail" name="f_email" autocomplete="off">
</div>
<div>
<label for="f_email2">Confirmer    : </label><input type="email" id="f_email2" maxlength="70"
placeholder="Confirmer"
name="f_email2" autocomplete="off">
</div>
<div>
<label for="f_password">Mot de passe : </label><input type="password" id="f_password" maxlength="40"
placeholder="Mot de passe"
name="f_password" autocomplete="off">
</div>
<div>
<label for="f_password2"> Confirmer    : </label><input type="password" id="f_password2"
maxlength="40" placeholder="Confirmer"
name="f_password2" autocomplete="off">
</div>
</div>
<div class="buttons">
<div class="sign_up">
<a href="sign_in.php">Déjà un compte ?</a>
</div>
<div class="sign_in">
<input type="submit" name="submit" value="S'inscrire" id="submit">
</div>
</div>
<p>
<?= $erreur ?>
</p>
</form>
</div>
</body>
=======
<!-- Traitement PHP --> <!-- Traitement PHP -->
<?php <?php
/* /*
@ -107,4 +220,5 @@ if (isset($_POST['submit'])) {
</div> </div>
</body> </body>
>>>>>>> 24db56327fed9097898d28c291f7d01a5d9802b1
</html> </html>

51
style/style_fun.css

@ -0,0 +1,51 @@
@keyframes defilement {
0% {
top: 0;
transform: rotateX(15deg) translateZ(2200px);
}
100% {
top: -10000px;
transform: rotateX(20deg) translateZ(-2200px);
}
}
@keyframes rainbow {
0% {
color: yellow;
}
25% {
color: yellowgreen;
}
50% {
color: red;
}
75% {
color: blue;
}
100% {
color: yellow;
}
}
.main-contents {
z-index: 9999;
}
.star-wars {
background-color: black;
height: 100vh;
margin-right: 10px;
transform: perspective(400px) rotateX(20deg);
overflow: hidden;
background-image: url("../_content/star.png");
background-repeat: repeat;
background-size: 400px;
padding: 0 10%;
}
.star-wars div {
font-family: "Pathway Gothic One", sans-serif;
text-align: center;
font-size: 28px;
animation: defilement 40s linear infinite;
color: yellow;
}
/*# sourceMappingURL=style_fun.css.map */

1
style/style_fun.css.map

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["styles_fun.scss"],"names":[],"mappings":"AAAA;EACI;IACE;IACA;;EAEF;IACE;IACA;;;AAGN;EACI;IACI;;EAEJ;IACI;;EAEJ;IACI;;EAEJ;IACI;;EAEJ;IACI;;;AAGN;EACE;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA","file":"style_fun.css"}

28
style/style_index.css

@ -14,6 +14,26 @@ body {
padding: 0 20vh 0 20vh; padding: 0 20vh 0 20vh;
} }
} }
@keyframes load-items-left {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0%);
opacity: 1;
}
}
@keyframes load-items-right {
0% {
transform: translateX(100%);
opacity: 0;
}
100% {
transform: translateX(0%);
opacity: 1;
}
}
main { main {
padding: 10px; padding: 10px;
background-color: white; background-color: white;
@ -29,7 +49,10 @@ main a:visited, main a:active, main a:link {
main .element { main .element {
position: relative; position: relative;
padding-bottom: 24px; padding-bottom: 24px;
word-break: break-word;
word-wrap: break-word;
text-align: justify; text-align: justify;
hyphens: auto;
width: 11em; width: 11em;
height: 25em; height: 25em;
padding: 10px 10px 10px 10px; padding: 10px 10px 10px 10px;
@ -79,8 +102,12 @@ main .main-contents {
flex-direction: column; flex-direction: column;
} }
main .main-contents aside { main .main-contents aside {
animation: load-items-right 0.2s ease-out;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
word-break: break-all;
word-wrap: break-word;
text-align: justify;
padding: 20px 10px; padding: 20px 10px;
margin: 15px 0px; margin: 15px 0px;
background-color: #f8f9fa; background-color: #f8f9fa;
@ -152,6 +179,7 @@ main .main-contents aside a:hover::after {
width: 100%; width: 100%;
} }
main .main-side { main .main-side {
animation: load-items-left 0.2s ease-out;
background-color: white; background-color: white;
padding: inherit; padding: inherit;
align-content: flex-start; align-content: flex-start;

1
style/style_index.css.map

@ -1 +0,0 @@
{"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"}

1
style/style_log.css.map

@ -1 +0,0 @@
{"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"}

49
style/styles_fun.scss

@ -0,0 +1,49 @@
@keyframes defilement {
0% {
top: 0;
transform: rotateX(15deg) translateZ(2200px);
}
100% {
top: -10000px;
transform: rotateX(20deg) translateZ(-2200px);
}
}
@keyframes rainbow {
0% {
color: yellow;
}
25% {
color: yellowgreen;
}
50% {
color: red;
}
75% {
color: blue;
}
100% {
color:yellow;
}
}
.main-contents {
z-index: 9999;
}
.star-wars {
background-color: black;
height: 100vh;
margin-right: 10px;
transform: perspective(400px) rotateX(20deg);
overflow: hidden;
background-image: url("../_content/star.png");
background-repeat: repeat;
background-size: 400px;
padding: 0 10%;
div {
font-family: 'Pathway Gothic One', sans-serif;
text-align: center;
font-size: 28px;
animation: defilement 40s linear infinite;
color: yellow;
}
}

28
style/styles_index.scss

@ -12,6 +12,26 @@ body {
padding: 0 20vh 0 20vh; padding: 0 20vh 0 20vh;
} }
} }
@keyframes load-items-left {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0%);
opacity: 1;
}
}
@keyframes load-items-right {
0% {
transform: translateX(100%);
opacity: 0;
}
100% {
transform: translateX(0%);
opacity: 1;
}
}
main { main {
padding: 10px; padding: 10px;
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
@ -30,7 +50,10 @@ main {
& .element { & .element {
position: relative; position: relative;
padding-bottom: 24px; padding-bottom: 24px;
word-break: break-word;
word-wrap: break-word;
text-align: justify; text-align: justify;
hyphens: auto;
width: 11em; width: 11em;
height: 25em; height: 25em;
padding: 10px 10px 10px 10px; padding: 10px 10px 10px 10px;
@ -86,8 +109,12 @@ main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
& aside { & aside {
animation: load-items-right 0.2s ease-out;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
word-break: break-all;
word-wrap: break-word;
text-align: justify;
img { img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
@ -166,6 +193,7 @@ main {
} }
& .main-side { & .main-side {
animation: load-items-left 0.2s ease-out;
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
padding: inherit; padding: inherit;
align-content: flex-start; align-content: flex-start;

18
style/styles_main.scss

@ -13,10 +13,10 @@ header {
align-items: center; align-items: center;
align-content: center; align-content: center;
text-decoration: none; text-decoration: none;
& h1 { h1 {
margin: 0; margin: 0;
position: relative; position: relative;
&::before { ::before {
content: " "; content: " ";
position: absolute; position: absolute;
background-color: rgba(255, 255, 255, 0); background-color: rgba(255, 255, 255, 0);
@ -27,10 +27,10 @@ header {
height: 0px; height: 0px;
border: 2px solid transparent; border: 2px solid transparent;
} }
&:hover::before { :hover::before {
animation: border_top_right 0.75s linear forwards; animation: border_top_right 0.75s linear forwards;
} }
&::after { ::after {
content: " "; content: " ";
position: absolute; position: absolute;
background-color: rgba(255, 255, 255, 0); background-color: rgba(255, 255, 255, 0);
@ -41,22 +41,22 @@ header {
height: 0px; height: 0px;
border: 2px solid transparent; border: 2px solid transparent;
} }
&:hover::after { :hover::after {
animation: border_bottom_left 0.75s linear forwards; animation: border_bottom_left 0.75s linear forwards;
} }
& a { a {
color: rgb(237, 240, 241); color: rgb(237, 240, 241);
text-decoration: none; text-decoration: none;
font-family: sans-serif; font-family: sans-serif;
letter-spacing: 0px; letter-spacing: 0px;
padding: 5px; padding: 5px;
& .word1 { .word1 {
color: rgb(146,147,149); color: rgb(146,147,149);
} }
& .word2 { .word2 {
color: rgb(192, 192, 192); color: rgb(192, 192, 192);
} }
& .word3 { .word3 {
color:rgb(237, 240, 241); color:rgb(237, 240, 241);
} }
} }

Loading…
Cancel
Save