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. 27
      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. 8
      style/style_main.css
  18. 49
      style/styles_fun.scss
  19. 28
      style/styles_index.scss
  20. 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>

27
index.html

@ -14,12 +14,12 @@
<header>
<h1><a class="_title" href="home.html"><span class="word1">Pop</span><span class="word3">Op</span></a></h1>
<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="reading.html">Lectures</a></li>
</ul>
<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>
</div>
</header>
@ -131,20 +131,17 @@
<div class="main-contents">
<aside>
<h2>À propos...</h2>
<p>Voici un site ma foi 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
et d'inscription requiert de "simuler" un serveur ou d'en être sur un réel. Par conséquent ce
système n'est pas mis en place ou effectif. Sur mon "test" de <a
href="https://minivoltrush.alwaysdata.net/signup.php" target="_blank">site à ce lien</a>, ce
système fonctionne très bien. Cependant je n'assume plus son contenu ^-^.</p>
<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 le
dimanche soir
précédent la rentrée du
Lundi 8 Novembre.</p>
<p>Faire un lien un minimum esthétique c'est long. -_-</p>
<p>En cliquant sur le lien vous accèderai à plus d'informations sur les conditions de création de ce
site : <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank">Cliquez ici</a>
</aside>
<aside>
<h2>Image aléatoire</h2>
@ -160,6 +157,4 @@
<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>
</body>

4
mentions-legales.html

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

118
reading.html

@ -14,12 +14,12 @@
<header>
<h1><a class="_title" href="home.html"><span class="word1">Pop</span><span class="word3">Op</span></a></h1>
<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="reading.html">Lectures</a></li>
</ul>
<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>
</div>
</header>
@ -103,88 +103,104 @@
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 3€</u>
</div>
</a>
<a href="https://livre.fnac.com/a15171008/Blue-Period-Tome-01-Blue-Period-Tsubasa-Yamaguchi#omnsearchpos=1"
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"
<a href="https://www.webtoons.com/fr/fantasy/omniscient-reader/list?title_no=2175" class="element elmnt1"
target="_blank">
<img src="https://swebtoon-phinf.pstatic.net/20200814_47/1597371219311kW6GG_JPEG/M_details.jpg?type=crop540_540"
alt="thumbnail">
<div>
<h2>La ballade de Lila K</h2>
<p>Blandine le callet<br></p>
<p class="hidden">Une jeune femme, Lila K., fragile et volontaire, raconte son histoire. Un jour,
des hommes en noir l'ont brutalement arrachée à sa mère.
<h2>Omniscient</h2>
<p>Sleepy-C / UMI<br></p>
<p class="hidden">« Je suis le seul lecteur à connaître la fin du monde. »
</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://livre.fnac.com/a3784037/Blandine-Le-Callet-La-Ballade-de-Lila-K#omnsearchpos=1"
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"
<a href="https://www.webtoons.com/fr/action/ghost-king/list?title_no=3674" class="element elmnt1"
target="_blank">
<img src="https://swebtoon-phinf.pstatic.net/20211117_242/1637119335923dHRBM_JPEG/1M_details.jpg?type=crop540_540"
alt="thumbnail">
<div>
<h2>La ballade de Lila K</h2>
<p>Blandine le callet<br></p>
<p class="hidden">Une jeune femme, Lila K., fragile et volontaire, raconte son histoire. Un jour,
des hommes en noir l'ont brutalement arrachée à sa mère.
<h2>Ghost King</h2>
<p>Park Jin-Seok / Son Gohu<br></p>
<p class="hidden">Dans un monde où les arts martiaux du passé se prolongent dans le présent… la paix
est revenue après la disparition d'un tueur sanguinaire, le Roi Spectral.
</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://livre.fnac.com/a3784037/Blandine-Le-Callet-La-Ballade-de-Lila-K#omnsearchpos=1"
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"
<a href="https://www.webtoons.com/fr/action/ghost-king/list?title_no=3674" class="element elmnt1"
target="_blank">
<img src="https://swebtoon-phinf.pstatic.net/20191219_16/15766814430890w1m9_JPEG/M_details_720x1230.jpg?type=crop540_540"
alt="thumbnail">
<div>
<h2>La ballade de Lila K</h2>
<p>Blandine le callet<br></p>
<p class="hidden">Une jeune femme, Lila K., fragile et volontaire, raconte son histoire. Un jour,
des hommes en noir l'ont brutalement arrachée à sa mère.
<h2>Tower Of God</h2>
<p>SIU <br></p>
<p class="hidden">“Que désirez-vous? La richesse? La gloire? Le pouvoir? La vengeance? Ou une chose
qui surpasse toutes les autres ? Quel que soit votre désir, il se trouve ici !”
</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://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">
<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">
<div>
<h2>La ballade de Lila K</h2>
<p>Blandine le callet<br></p>
<p class="hidden">Une jeune femme, Lila K., fragile et volontaire, raconte son histoire. Un jour,
des hommes en noir l'ont brutalement arrachée à sa mère.
<h2>The God of High School</h2>
<p>Yongje Park<br></p>
<p class="hidden">Le destin de trois lycéens, experts en arts martiaux, se croisent lorsque les
Juges font leur apparition, leur proposant de participer à un tournoi :
</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://livre.fnac.com/a3784037/Blandine-Le-Callet-La-Ballade-de-Lila-K#omnsearchpos=1"
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"
<a href="https://www.webtoons.com/fr/thriller/sweethome/list?title_no=1996" class="element elmnt1"
target="_blank">
<img src="https://swebtoon-phinf.pstatic.net/20200428_23/1588053177319xEVr7_JPEG/04_EC9E91ED9288EC8381EC84B8_mobile.jpg?type=crop540_540"
alt="thumbnail">
<div>
<h2>La ballade de Lila K</h2>
<p>Blandine le callet<br></p>
<p class="hidden">Une jeune femme, Lila K., fragile et volontaire, raconte son histoire. Un jour,
des hommes en noir l'ont brutalement arrachée à sa mère.
<h2>Sweet home</h2>
<p>Carnby Kim / Youngchan Hwang <br></p>
<p class="hidden">Après une tragédie familiale inattendue, un lycéen solitaire est obligé de quitter
son domicile -
</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>
</a>
</div>
<div class="main-contents">
<aside>
<h2>À propos...</h2>
<p>Voici un site ma foi 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
et d'inscription requiert de "simuler" un serveur ou d'en être sur un réel. Par conséquent ce
système n'est pas mis en place ou effectif. Sur mon "test" de <a
href="https://minivoltrush.alwaysdata.net/signup.php" target="_blank">site à ce lien</a>, ce
système fonctionne très bien. Cependant je n'assume plus son contenu ^-^.</p>
<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 le
dimanche soir
précédent la rentrée du
Lundi 8 Novembre.</p>
<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>

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 -->
<?php
/*
@ -107,4 +220,5 @@ if (isset($_POST['submit'])) {
</div>
</body>
>>>>>>> 24db56327fed9097898d28c291f7d01a5d9802b1
</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;
}
}
@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 {
padding: 10px;
background-color: white;
@ -29,7 +49,10 @@ main a:visited, main a:active, main a:link {
main .element {
position: relative;
padding-bottom: 24px;
word-break: break-word;
word-wrap: break-word;
text-align: justify;
hyphens: auto;
width: 11em;
height: 25em;
padding: 10px 10px 10px 10px;
@ -79,8 +102,12 @@ main .main-contents {
flex-direction: column;
}
main .main-contents aside {
animation: load-items-right 0.2s ease-out;
display: flex;
flex-direction: column;
word-break: break-all;
word-wrap: break-word;
text-align: justify;
padding: 20px 10px;
margin: 15px 0px;
background-color: #f8f9fa;
@ -152,6 +179,7 @@ main .main-contents aside a:hover::after {
width: 100%;
}
main .main-side {
animation: load-items-left 0.2s ease-out;
background-color: white;
padding: inherit;
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"}

8
style/style_main.css

@ -19,7 +19,7 @@ header h1 {
margin: 0;
position: relative;
}
header h1::before {
header h1 ::before {
content: " ";
position: absolute;
background-color: rgba(255, 255, 255, 0);
@ -30,10 +30,10 @@ header h1::before {
height: 0px;
border: 2px solid transparent;
}
header h1:hover::before {
header h1 :hover::before {
animation: border_top_right 0.75s linear forwards;
}
header h1::after {
header h1 ::after {
content: " ";
position: absolute;
background-color: rgba(255, 255, 255, 0);
@ -44,7 +44,7 @@ header h1::after {
height: 0px;
border: 2px solid transparent;
}
header h1:hover::after {
header h1 :hover::after {
animation: border_bottom_left 0.75s linear forwards;
}
header h1 a {

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

18
style/styles_main.scss

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

Loading…
Cancel
Save