Merge branch 'main' of https://github.com/Yasder5/projet_php into laura
ajout css et html formulaire inscription
This commit is contained in:
laura.chevillet
commit
f2cae8f54d
3 changed files with 302 additions and 0 deletions
107
app/views/connexion.php
Normal file
107
app/views/connexion.php
Normal file
|
|
@ -0,0 +1,107 @@
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="public/assets/styles.css">
|
||||||
|
<title>Connexion — Folliow</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- Contenu principal de la page -->
|
||||||
|
<main class="container py-5">
|
||||||
|
|
||||||
|
<!-- Centrage horizontal du formulaire -->
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-12 col-md-8 col-lg-5">
|
||||||
|
|
||||||
|
<!-- Carte contenant le formulaire de connexion -->
|
||||||
|
<div class="card shadow-sm border-0 rounded-4 p-4 p-lg-5">
|
||||||
|
|
||||||
|
<!-- Titre principal -->
|
||||||
|
<h1 class="h3 fw-bold mb-1">Connexion</h1>
|
||||||
|
|
||||||
|
<!-- Texte descriptif -->
|
||||||
|
<p class="text-secondary mb-4">
|
||||||
|
Connectez-vous à votre compte.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- Formulaire de connexion -->
|
||||||
|
<!-- Le traitement sera effectué en PHP via la méthode POST -->
|
||||||
|
<form method="POST">
|
||||||
|
|
||||||
|
<div class="row g-3">
|
||||||
|
|
||||||
|
<!-- Champ : adresse e-mail de l'utilisateur -->
|
||||||
|
<div class="col-12">
|
||||||
|
<label for="user_mail" class="form-label">
|
||||||
|
Adresse e-mail
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
class="form-control"
|
||||||
|
id="user_mail"
|
||||||
|
name="user_mail"
|
||||||
|
required
|
||||||
|
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Champ : mot de passe -->
|
||||||
|
<div class="col-12">
|
||||||
|
<label for="user_password" class="form-label">
|
||||||
|
Mot de passe
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
class="form-control"
|
||||||
|
id="user_password"
|
||||||
|
name="user_password"
|
||||||
|
required
|
||||||
|
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Option "Se souvenir de moi" (fonctionnalité optionnelle côté PHP) -->
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="form-check">
|
||||||
|
<input class="form-check-input" type="checkbox" id="remember_me" name="remember_me">
|
||||||
|
<label class="form-check-label" for="remember_me">
|
||||||
|
Se souvenir de moi
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Bouton de soumission du formulaire -->
|
||||||
|
<div class="col-12 d-grid mt-2">
|
||||||
|
<button type="submit" class="btn btn-primary btn-lg rounded-3">
|
||||||
|
Se connecter
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Lien vers la page d'inscription -->
|
||||||
|
<div class="col-12 text-center">
|
||||||
|
<small class="text-secondary">
|
||||||
|
Pas encore de compte ?
|
||||||
|
<a href="inscription.php" class="link-primary">Créer un compte</a>
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Lien pour la récupération du mot de passe -->
|
||||||
|
<div class="col-12 text-center">
|
||||||
|
<small>
|
||||||
|
<a href="#" class="link-primary">
|
||||||
|
Mot de passe oublié ?
|
||||||
|
</a>
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
184
app/views/inscription.php
Normal file
184
app/views/inscription.php
Normal file
|
|
@ -0,0 +1,184 @@
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="public/assets/styles.css">
|
||||||
|
<title>Connexion — Folliow</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- Contenu principal de la page -->
|
||||||
|
<main class="container py-5">
|
||||||
|
|
||||||
|
<!-- Centrage horizontal du formulaire -->
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-12 col-md-10 col-lg-6">
|
||||||
|
|
||||||
|
<!-- Carte contenant le formulaire d'inscription -->
|
||||||
|
<div class="card shadow-sm border-0 rounded-4 p-4 p-lg-5">
|
||||||
|
|
||||||
|
<!-- Titre principal de la page -->
|
||||||
|
<h1 class="h3 fw-bold mb-1">Inscription</h1>
|
||||||
|
|
||||||
|
<!-- Texte descriptif -->
|
||||||
|
<p class="text-secondary mb-4">
|
||||||
|
Créez votre compte utilisateur.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- Formulaire d'inscription -->
|
||||||
|
<!-- Les données seront traitées côté serveur en PHP via la méthode POST -->
|
||||||
|
<form method="POST">
|
||||||
|
|
||||||
|
<div class="row g-3">
|
||||||
|
|
||||||
|
<!-- Champ : prénom de l'utilisateur -->
|
||||||
|
<div class="col-md-6">
|
||||||
|
<label class="form-label" for="user_firstname">
|
||||||
|
Prénom *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="form-control"
|
||||||
|
type="text"
|
||||||
|
id="user_firstname"
|
||||||
|
name="user_firstname"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Champ : nom de l'utilisateur -->
|
||||||
|
<div class="col-md-6">
|
||||||
|
<label class="form-label" for="user_name">
|
||||||
|
Nom *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="form-control"
|
||||||
|
type="text"
|
||||||
|
id="user_name"
|
||||||
|
name="user_name"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Champ : pseudo (identifiant public de l'utilisateur) -->
|
||||||
|
<div class="col-12">
|
||||||
|
<label class="form-label" for="user_pseudo">
|
||||||
|
Pseudo *
|
||||||
|
</label>
|
||||||
|
<div class="input-group">
|
||||||
|
<span class="input-group-text">@</span>
|
||||||
|
<input
|
||||||
|
class="form-control"
|
||||||
|
type="text"
|
||||||
|
id="user_pseudo"
|
||||||
|
name="user_pseudo"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Champ : adresse e-mail -->
|
||||||
|
<div class="col-12">
|
||||||
|
<label class="form-label" for="user_mail">
|
||||||
|
Adresse e-mail *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="form-control"
|
||||||
|
type="email"
|
||||||
|
id="user_mail"
|
||||||
|
name="user_mail"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Champ : mot de passe -->
|
||||||
|
<div class="col-12">
|
||||||
|
<label class="form-label" for="user_password">
|
||||||
|
Mot de passe *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="form-control"
|
||||||
|
type="password"
|
||||||
|
id="user_password"
|
||||||
|
name="user_password"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Champ optionnel : numéro de téléphone -->
|
||||||
|
<div class="col-12">
|
||||||
|
<label class="form-label" for="user_phone">
|
||||||
|
Téléphone
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="form-control"
|
||||||
|
type="text"
|
||||||
|
id="user_phone"
|
||||||
|
name="user_phone"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Champ optionnel : profession de l'utilisateur -->
|
||||||
|
<div class="col-12">
|
||||||
|
<label class="form-label" for="user_work">
|
||||||
|
Profession
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="form-control"
|
||||||
|
type="text"
|
||||||
|
id="user_work"
|
||||||
|
name="user_work"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Champ optionnel : localisation de l'utilisateur -->
|
||||||
|
<div class="col-12">
|
||||||
|
<label class="form-label" for="user_location">
|
||||||
|
Localisation
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="form-control"
|
||||||
|
type="text"
|
||||||
|
id="user_location"
|
||||||
|
name="user_location"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Champ optionnel : phrase d'accroche / description courte -->
|
||||||
|
<div class="col-12">
|
||||||
|
<label class="form-label" for="user_description">
|
||||||
|
Phrase d'accroche
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
class="form-control"
|
||||||
|
id="user_description"
|
||||||
|
name="user_description"
|
||||||
|
rows="3"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Bouton de soumission du formulaire -->
|
||||||
|
<div class="col-12 d-grid mt-2">
|
||||||
|
<button type="submit" class="btn btn-primary btn-lg rounded-3">
|
||||||
|
Créer mon compte
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Lien vers la page de connexion -->
|
||||||
|
<div class="col-12 text-center">
|
||||||
|
<small class="text-secondary">
|
||||||
|
Déjà un compte ?
|
||||||
|
<a href="connexion.php">Se connecter</a>
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
|
||||||
11
public/assests/styles.css
Normal file
11
public/assests/styles.css
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
/* Style général appliqué à toute la page */
|
||||||
|
body{
|
||||||
|
/* Couleur de fond claire pour améliorer la lisibilité */
|
||||||
|
background: #f7f8fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style de base des cartes Bootstrap */
|
||||||
|
.card{
|
||||||
|
/* Fond blanc pour mettre en valeur le contenu */
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue