tinkal/FestinHegre
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Css et Form sur le Login

Browse Source
This commit is contained in:
Joshua 2024-10-10 17:56:52 +02:00
parent 5e1a06735c
commit df467e2b77
7 changed files with 200 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
assets/styles/login.css Normal file
View File

@ -0,0 +1,84 @@
html {
background-image: url("asset/image/BackgroundLogin.jpg"); background-repeat: no-repeat; background-size: cover;
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
}
.Login {
width: 100%;
height: 100%;
}
.Circle {
background: #db5559;
width: 41%;
height: 80%;
margin: 0 auto;
border-style: solid;
border-radius: 50%;
border-color: white;
border-width: 5px;
}
.Form {
background: #791c1c;
height: 40%;
width: 55%;
margin: auto;
border-style: solid;
border-radius: 50px;
border-color: white;
border-width: 2px;
text-align: center;
font-family: "Qwitcher Grypen", cursive;
font-size: 40px;
font-style: italic;
color: white;
padding-bottom: 0;
}
.Logo {
display: flex;
margin: auto;
margin-top: 8%;
}
.Title1 {
margin: 0;
padding: 0;
}
.Title2 {
display: grid;
place-items: center;
height: 7vh;
color: black;
font-family: "Qwitcher Grypen", cursive;
font-size: 40px;
margin: 0;
}
.form-group{
display: grid;
place-items: center;
height: 7vh;
align-items: center;
text-align: center;
/*margin-bottom: 10px;*/
}
.form-control{
background-color: #f19595;
margin-left: 10px;
border-radius: 5px;
}
.btn{
background-color: #279b63;
border-radius: 6px;
height: 30px;
}

BIN
public/asset/image/BackgroundLogin.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 MiB

BIN
public/asset/image/BackgroundLogin.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 65 KiB

10
src/Controller/LoginController.php
View File

@ -2,6 +2,7 @@
namespace App\Controller;
use App\Form\LoginFormType;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
@ -10,8 +11,13 @@ use Symfony\Component\Routing\Attribute\Route;
class LoginController extends AbstractController
{
#[Route('/login', name: 'app_login')]
public function index(): Response
public function index(Request $request): Response
{
return $this->render('login/login.html.twig');
$form = $this->createForm(LoginFormType::class);
$form->handleRequest($request);
return $this->render('login/login.html.twig',[
'form' => $form->createView(),
]);
}
}

34
src/Form/LoginFormType.php Normal file
View File

@ -0,0 +1,34 @@
<?php
namespace App\Form;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\EmailType;
use Symfony\Component\Form\Extension\Core\Type\PasswordType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
class LoginFormType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options): void
{
$builder
->add('email', EmailType::class, [
'label' => 'Email',
])
->add('password', PasswordType::class, [
'label' => 'Mot de passe',
])
->add('confirm', SubmitType::class, [
'label' => 'Connexion',
]);
}
public function configureOptions(OptionsResolver $resolver): void
{
$resolver->setDefaults([
// Configure your form options here
]);
}
}

3
templates/base.html.twig
View File

@ -4,6 +4,9 @@
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
<link rel="" href="">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Qwitcher+Grypen:wght@400;700&display=swap" rel="stylesheet">
{% block stylesheets %}
{% endblock %}

78
templates/login/login.html.twig
View File

@ -1,12 +1,18 @@
{% extends 'base.html.twig' %}
{% block stylesheets %}
<link rel="stylesheet" href="../../../assets/styles/login.css">
{% endblock %}
{% block title %}Login{% endblock %}
{% block body %}
<style>
html {
background-color: #f8b5b5 ;
height: 1000px;
background-image: url("asset/image/BackgroundLogin.jpg"); background-repeat: no-repeat; background-size: cover;
height: 100%;
width: 100%;
}
@ -16,17 +22,16 @@
}
.Login {
background-color: #f8b5b5 ;
width: 100%;
height: 100%;
}
.Circle {
background: #db5559;
width: 44%;
height: 70%;
width: 41%;
height: 80%;
margin: 0 auto;
border-style: solid;
border-radius: 1000px;
border-radius: 50%;
border-color: white;
border-width: 5px;
}
@ -39,6 +44,13 @@
border-radius: 50px;
border-color: white;
border-width: 2px;
text-align: center;
font-family: "Qwitcher Grypen", cursive;
font-size: 40px;
font-style: italic;
color: white;
padding-bottom: 0;
}
.Logo {
@ -46,13 +58,65 @@
margin: auto;
margin-top: 8%;
}
.Title1 {
margin: 0;
padding: 0;
}
.Title2 {
display: grid;
place-items: center;
height: 7vh;
color: black;
font-family: "Qwitcher Grypen", cursive;
font-size: 40px;
margin: 0;
}
.form-group{
display: grid;
place-items: center;
height: 7vh;
align-items: center;
text-align: center;
/*margin-bottom: 10px;*/
}
.form-control{
background-color: #f19595;
margin-left: 10px;
border-radius: 5px;
}
.btn{
background-color: #279b63;
border-radius: 6px;
height: 30px;
}
</style>
<div class="Login">
<div class="Circle">
<img src="asset/image/LogoHegre.png" class="Logo">
<div class="Form">
{{ form_start(form) }}
<h1 class="Title1">Bienvenue !</h1>
<div class="form-group">
{{ form_label(form.email) }}
{{ form_widget(form.email, {'attr': {'class': 'form-control'}}) }}
</div>
<div class="form-group">
{{ form_label(form.password) }}
{{ form_widget(form.password, {'attr': {'class': 'form-control'}}) }}
</div>
<div class="form-group">
{{ form_widget(form.confirm, {'attr': {'class': 'btn btn-primary'}}) }}
</div>
{{ form_end(form) }}
</div>
<h1 class="Title2">Volaille en fête, Saveurs parfaites !</h1>
</div>
</div>
{% endblock %}