serny.s
/
siteWeb
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

nouvelle adresse -- config

master
SERNY Sacha 3 years ago
parent
6e94b1df96
commit
ef802b0a2b
13 changed files with 679 additions and 220 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      .gitignore
  2. BIN
      _content/fnac-icon.png
  3. 79
      index.html
  4. 206
      reading.html
  5. 53
      sign_in.html
  6. 69
      sign_up.html
  7. 110
      sign_up.php
  8. 26
      style/style_index.css
  9. 2
      style/style_index.css.map
  10. 177
      style/style_log.css
  11. 1
      style/style_log.css.map
  12. 30
      style/styles_index.scss
  13. 119
      style/styles_log.scss

1
.gitignore
View File

@ -0,0 +1 @@
"C:\Users\MiniV\OneDrive - lycée Paul Constans\Cours\1re\NSI\sernyS_nsi_web\style\style_index.css.map"

BIN
_content/fnac-icon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

79
index.html
View File

@ -12,15 +12,15 @@
<body>
<header>
<h1><a class="_title" href="index.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>
<li><a href="#unlinked">Top</a></li>
<li><a href="#unlinked">Musiques</a></li>
<li><a href="#unlinked">Lectures</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_up.html">S'inscrire</a>
<a href="sign_up.php">S'inscrire</a>
</div>
</header>
<main>
@ -30,80 +30,101 @@
<img src="_content/picture2.jpg" alt="thumbnail">
<div>
<h2>Royals</h2>
<p>Royals - Lorde<br><u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien
(payant)</u></p>
<p>Royals - Lorde<br></p>
<p class="hidden">Ella Marija Lani Yelich-O'Connor dite Lorde, née le 7 novembre 1996 à Auckland, en
Nouvelle-Zélande, est une auteure-compositrice-interprétatrice et productrice néo-zélandaise.
</p>
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u>
</div>
</a>
<a href="https://open.spotify.com/search/numb%20link" class="element elmnt2">
<img src="_content/picture1.jpg" alt="thumbnail" target="_blank">
<div>
<h2>Numb</h2>
<p>Numb - Linkin Park<br><u><img class="icon" src="_content/spotify-icon.png"
alt="spotify-icon">Lien (payant)</u></p>
<p>Numb - Linkin Park<br></p>
<p class="hidden">Linkin Park est un groupe de rock et de metal américain, originaire d'Agoura Hills
en Californie. Il est formé en 1996.</p>
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u>
</div>
</a>
<a href="https://open.spotify.com/track/6xWFzrQE9KIioQSYXlVN2t?si=a8ebcfbc70804976" class="element elmnt1">
<img src="_content/picture3.jpg" alt="thumbnail" target="_blank">
<div>
<h2>Red</h2>
<p>Red - Survive said the prophet <br><u><img class="icon" src="_content/spotify-icon.png"
alt="spotify-icon">Lien (payant)</u></p>
<p>Red - Survive said the prophet <br></p>
<p class="hidden">Survive Said The Prophet est un groupe de rock alternatif japonais originaire de
Tōkyō. Il est actuellement composé de 5 membres : Yosh, Yudai, Ivan, Tatsuya et Show.</p>
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u>
</div>
</a>
<a href="https://open.spotify.com/track/2lXu7SNGIKHJ8EV2EetYFa?si=f29c10aab5964beb" class="element elmnt2">
<img src="_content/picture4.jpeg" alt="thumbnail" target="_blank">
<div>
<h2>命に嫌われて</h2>
<p>命に嫌われている。- Majiko<br><u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien
(payant)</u></p>
<p>命に嫌われている。- Majiko<br></p>
<p class="hidden">majiko (まじ娘) est un auteur-compositeur-interprète japonais. Elle a commencé sa
carrière en faisant des reprises de chansons sur Nico Nico Douga.</p>
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u>
</div>
</a>
<a href="https://open.spotify.com/track/1x5sYLZiu9r5E43kMlt9f8?si=631da71145414cc0" class="element elmnt1">
<a href="https://open.spotify.com/track/1x5sYLZiu9r5E43kMlt9f8?si=631da71145414cc0" class="element">
<img src="_content/picture5.jpg" alt="thumbnail" target="_blank">
<div>
<h2>Symphony</h2>
<p>Symphony - Clean Bandit (feat. Zara Larsson) <br><u><img class="icon"
src="_content/spotify-icon.png" alt="spotify-icon">Lien (payant)</u></p>
<p>Symphony - Clean Bandit (feat. Zara Larsson)></p>
<p class="hidden">Clean Bandit est un groupe de musique électronique anglais, fondé à Cambridge en
2009. Il est composé de trois membres : Grace Chatto, Luke Patterson et Jack Patterson.</p>
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u>
</div>
</a>
<a href="https://open.spotify.com/track/7djl4lZ6guZYAckDsfzrfs?si=e9c779cc72644f81" class="element elmnt2">
<img src="_content/picture6.jpg" alt="thumbnail" target="_blank">
<div>
<h2>Reckoning song</h2>
<p>Reckoning song (cover) - Asaf Avidan, The Mojos <br><u><img class="icon"
src="_content/spotify-icon.png" alt="spotify-icon">Lien (payant)</u></p>
<p>Reckoning song (cover) - Asaf Avidan, The Mojos</p>
<p class="hidden">Asaf Avidan est un auteur-compositeur-interprète israélien né le 23 mars 1980 à
Jérusalem.</p>
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u>
</div>
</a>
<a href="https://open.spotify.com/track/1hwJKpe0BPUsq6UUrwBWTw?si=71cfd097e58349b0" class="element elmnt1">
<img src="_content/picture7.jpg" alt="thumbnail" target="_blank">
<a href="https://open.spotify.com/track/1hwJKpe0BPUsq6UUrwBWTw?si=71cfd097e58349b0" class="element elmnt2">
<img src="_content/picture7.jpg" alt="thumbnail" target="_blank" width="150" height="150">
<div>
<h2>Boulevard of Broken Dreams</h2>
<p>Boulevard of Broken Dreams - Green Day<br><u><img class="icon" src="_content/spotify-icon.png"
alt="spotify-icon">Lien (payant)</u></p>
<h2>Boulevard of..</h2>
<p>Boulevard of Broken Dreams - Green Day</p>
<p class="hidden">Green Day est un groupe de punk rock américain, originaire de Berkeley, en
Californie.</p>
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u>
</div>
</a>
<a href="https://open.spotify.com/album/3zpPQp0SG0voOUtkovK7O5" class="element elmnt2">
<img src="_content/picture8.jpg" alt="thumbnail" target="_blank">
<div>
<h2>Centuries</h2>
<p>Centuries - Fall Out Boy <br><u><img class="icon" src="_content/spotify-icon.png"
alt="spotify-icon">Lien (payant)</u></p>
<p>Centuries - Fall Out Boy</p>
<p class="hidden">Fall Out Boy (FOB) est un groupe de rock américain, originaire de Wilmette, près
de Chicago.</p>
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u>
</div>
</a>
<a href="https://open.spotify.com/track/2U5kSevItDmL0XzSDyemRp?si=dff1294e198f4439" class="element elmnt1">
<img src="_content/picture9.jpg" alt="thumbnail" target="_blank">
<div>
<h2>Le temps est bon</h2>
<p>Le temps est bon - Bon Entendeur <br><u><img class="icon" src="_content/spotify-icon.png"
alt="spotify-icon">Lien (payant)</u></p>
<p>Le temps est bon - Bon Entendeur </p>
<p class="hidden">Bon Entendeur est le nom d’un collectif musical français, fondé en 2012 par Arnaud
Bonet.</p>
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u>
</div>
</a>
<a href="https://open.spotify.com/track/62yJjFtgkhUrXktIoSjgP2?si=8de8d5f411a04de7" class="element elmnt2">
<img src="_content/picture10.jpg" alt="thumbnail" target="_blank">
<div>
<h2>Radioactive</h2>
<p>Radioactive - Imagine Dragons<br><u><img class="icon" src="_content/spotify-icon.png"
alt="spotify-icon">Lien (payant)</u></p>
<p>Radioactive - Imagine Dragons<br></p>
<p class="hidden">Imagine Dragons est un groupe de pop rock américain, originaire de Las Vegas, dans
le Nevada.</p>
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u>
</div>
</a>
</div>
@ -137,7 +158,7 @@
</main>
<footer>
<a href="#mentions-legales" target="_blank">Mentions légales + points d'amélioration.</a> <br> Mise en page par
SERNY Sacha.
SERNY Sacha. Données par <a href="https://www.wikipedia.org">Wikipedia</a>
</footer>
</body>

206
reading.html
View File

@ -0,0 +1,206 @@
<!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_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="#unlinked">Top</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_up.php">S'inscrire</a>
</div>
</header>
<main>
<div class="main-side">
<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"
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.
</p>
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</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/Images/FR/NR/fd/04/a9/11076861/1540-1/tsp20190829135208/La-Princee-de-Cleves-Bac-2020.jpg"
alt="thumbnail">
<div>
<h2>La Princesse de Clèves</h2>
<p>Madame de Lafayette<br></p>
<p class="hidden">Le célèbre roman de Mme de Lafayette, suivi d’un parcours littéraire « Individu,
morale et société ».
</p>
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 2.95€</u>
</div>
</a>
<a href="https://livre.fnac.com/a15608794/Banana-Fish-Tome-01-Banana-Fish-Perfect-Edition-Akimi-Yoshida#omnsearchpos=1"
class="element elmnt1" target="_blank">
<img src="https://static.fnac-static.com/multimedia/Images/FR/NR/88/03/c9/13173640/1540-1/tsp20210310071957/Banana-Fish-Perfect-Edition.jpg"
alt="thumbnail">
<div>
<h2>Banana Fish</h2>
<p>Akimi Yoshida<br></p>
<p class="hidden">" - Une nuit au Vietnam, un mec de mon unité a complètement disjoncté. Il a chopé
un M16 et il a tué trois de mes hommes.
</p>
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 16€</u>
</div>
</a>
<a href="https://livre.fnac.com/a13914808/Makoto-Shinkai-Les-Enfants-du-Temps#omnsearchpos=8"
class="element elmnt1" target="_blank">
<img src="https://static.fnac-static.com/multimedia/Images/FR/NR/eb/67/af/11495403/1540-1/tsp20191212070455/Les-Enfants-du-Temps.jpg"
alt="thumbnail">
<div>
<h2>Les enfants du temps</h2>
<p>Makoto Shinkai<br></p>
<p class="hidden">Lors des vacances d’été, Hodaka fugue de son île natale pour se rendre à Tokyo,
terre de liberté. Malheureusement
</p>
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 14.95€</u>
</div>
</a>
<a href="https://livre.fnac.com/mp34593993/The-Farm?oref=893a8e73-7ef9-2622-ce4c-30bdeafef41a#omnsearchpos=1"
class="element elmnt1" target="_blank">
<img src="https://static.fnac-static.com/multimedia/Images/FR/MC/c9/dc/0f/34593993/1540-1/tsp20180412213418/The-Farm.jpg#9e5621e2-1042-4e2c-aea8-069eb6e87108"
alt="thumbnail">
<div>
<h2>The Farm [EN]</h2>
<p>Tom Rob Smith<br></p>
<p class="hidden">A suspenseful psychological thriller from the author of Booker-longlisted Child
44, now a film starring Tom Hardy, Noomi Rapace and Gary Oldman
</p>
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 0.90€</u>
</div>
</a>
<a href="https://livre.fnac.com/a892244/Edmond-Rostand-Cyrano-de-Bergerac#omnsearchpos=1"
class="element elmnt1" target="_blank">
<img src="https://static.fnac-static.com/multimedia/Images/FR/NR/54/9d/0d/892244/1540-1/tsp20211015181720/Cyrano-de-Bergerac.jpg"
alt="thumbnail">
<div>
<h2>Edmond Rostand</h2>
<p>Cyrano de Bergerac<br></p>
<p class="hidden">Aimable jeune homme et auteur à demi-succès patronné par Sarah Bernhardt, Rostand
devient du jour au lendemain avec Cyrano de Bergerac un héros national,
</p>
<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"
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.
</p>
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</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"
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.
</p>
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</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"
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.
</p>
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</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"
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.
</p>
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</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"
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.
</p>
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</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>
</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>
</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>

53
sign_in.html
View File

@ -8,55 +8,36 @@
<html lang="fr">
<head>
<title>Titre</title>
<title>Conenxion</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style/style_main.css" rel="stylesheet">
<link href="style/style_log.css" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="_content/favicon-32x32.png">
</head>
<body>
<header>
<h1><a class="_title" href="index.html"><span class="word1">Pop</span><span class="word3">Op</span></a></h1>
<ul>
<li><a href="#unlinked">Top</a></li>
<li><a href="#unlinked">Musiques</a></li>
<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>
</div>
</header>
<main>
<div class="red-banner">
En attente de l'ajout d'un systeme PHP.
<br>Cette page est moche et mal faite.
</div>
<div class="log-area">
<p>Connecte-toi pour accéder à plus de foncitonnalités</p>
<form action="" method="POST">
<h2>Connexion</h2>
<div class="form_p_contents">
<div class="f_inputs">
<div>
<label for="pseudo">Pseudo : </label><input autocomplete="off" name="pseudo" type="text"
placeholder="Pseudo">
<label for="f_email">Adresse mail : </label><input type="email" id="f_email" maxlength="70"
placeholder="Adresse mail">
</div>
<div>
<label for="password">Mot de passe : </label><input autocomplete="off" name="password"
type="password" placeholder="Mot de passe">
<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>
<br>
<input name="password" type="submit" value="Valider">
<p><a href="#forget">Mot de passe oublié ?</a></p>
</div>
</form>
</main>
<footer>
<a href="#mentions-legales">Conditions générales d'utilisation.</a> <br> Mise en page par SERNY Sacha.
</footer>
</div>
</body>
</html>

69
sign_up.html
View File

@ -1,69 +0,0 @@
<!-- Traitement PHP -->
<?php
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Titre</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style/style_main.css" rel="stylesheet">
<link href="style/style_log.css" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="_content/favicon-32x32.png">
</head>
<body>
<header>
<h1><a class="_title" href="index.html"><span class="word1">Pop</span><span class="word3">Op</span></a></h1>
<ul>
<li><a href="#unlinked">Top</a></li>
<li><a href="#unlinked">Musiques</a></li>
<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>
</div>
</header>
<main>
<div class="red-banner">
En attente de l'ajout d'un systeme PHP.
<br>Cette page est moche et mal faite.
</div>
<form action="" method="POST">
<h2>Inscription</h2>
<div class="form_p_contents">
<div>
<label for="pseudo">Pseudo : </label><input autocomplete="off" name="pseudo" type="text"
placeholder="Pseudo">
</div>
<div class="names">
<label for="first_name">Prénom - Nom : </label><input autocomplete="off" name="first_name"
type="text" placeholder="Prénom"><input autocomplete="off" name="surname_name" type="text"
placeholder="Nom">
</div>
<div>
<label for="mail">Adresse mail : </label><input autocomplete="off" name="mail" type="mail"
placeholder="Adresse mail">
</div>
<div>
<label for="password">Mot de passe : </label><input autocomplete="off" name="password"
type="password" placeholder="Mot de passe">
</div>
<br>
<input name="password" type="submit" value="Valider">
</div>
</form>
</main>
<footer>
<a href="#mentions-legales">Conditions générales d'utilisation.</a> <br> Mise en page par SERNY Sacha.
</footer>
</body>
</html>

110
sign_up.php
View File

@ -0,0 +1,110 @@
<!-- 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['password']), PASSWORD_BCRYPT);
$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.";
}
}
}
?>
<!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.html">Déjà un compte ?</a>
</div>
<div class="sign_in">
<input type="submit" name="submit" value="S'inscrire" id="submit">
</div>
</div>
<div>
<?= $erreur ?>
</div>
</form>
</div>
</body>
</html>

26
style/style_index.css
View File

@ -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%;

2
style/style_index.css.map
View File

@ -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"}
{"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"}

177
style/style_log.css
View File

@ -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";
@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;
}
main {
padding: 5px 20%;
height: 79vh;
input:focus-visible {
outline: rgba(0, 0, 0, 0) solid 0px;
outline-offset: 0px;
}
/* Fin Reset */
input:focus {
position: relative;
color: red;
}
main .red-banner {
input:focus::before {
content: " ";
position: absolute;
background-color: red;
color: white;
height: auto;
font-size: 24px;
padding: 30px 0;
text-align: center;
font-family: "Montserrat", sans-serif;
top: 0;
width: 10px;
height: 1000px;
}
form {
body {
position: relative;
margin: 0;
}
.log-area {
display: flex;
justify-content: center;
font-family: "Roboto", sans-serif;
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 .names {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 5px 0px;
align-items: inherit;
form {
font-family: monospace, sans-serif;
}
form .form_p_contents {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
.f_inputs {
text-align: center;
}
form .form_p_contents p a {
font-size: 14px;
color: #696969;
text-decoration: none;
.f_inputs > div {
margin-top: 5px;
}
form .form_p_contents p a:hover {
font-size: 14px;
color: #696969;
text-decoration: none;
.buttons {
display: flex;
align-items: center;
justify-content: center;
margin-top: 25px;
}
form {
margin: 5px 0px;
font-size: 24px;
.sign_in {
background-color: #00dc64;
}
label {
letter-spacing: -1px;
.sign_up {
background-color: #6a6a6a;
}
input {
border: 0px;
background-color: #24252a;
color: rgb(255, 0, 0);
border-radius: 3.5px;
margin-left: 2px;
padding: 3px;
font-size: 18px;
.buttons > div {
padding: 10px 40px;
border-radius: 25px;
margin: 0 20px;
}
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;
div > input[type=submit], div > a {
font-family: roboto, sans-serif;
background-color: inherit;
}
/*# sourceMappingURL=style_log.css.map */

1
style/style_log.css.map
View File

@ -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"}

30
style/styles_index.scss
View File

@ -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);

119
style/styles_log.scss
View File

@ -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;
}
Write Preview
Loading…
Cancel
Save