style: Responsive page Ajout + Solo

tests
yvan.calatayud 2 years ago
parent ccea28238d
commit fffd607fb8

@ -12,4 +12,4 @@ Autoload::charger();
$controller = new FrontController(); $controller = new FrontController();
*/ */
//require_once("vues/Acceuil.php"); //require_once("vues/Acceuil.php");
require_once("vues/Ajout.php"); require_once("vues/Solo.php");

@ -21,48 +21,49 @@
</head> </head>
<body style="background: linear-gradient(to bottom, rgba(37, 34, 71, 1), rgba(37, 35, 72, 1)); color:white;"> <body style="background: linear-gradient(to bottom, rgba(37, 34, 71, 1), rgba(37, 35, 72, 1)); color:white;">
<div class="d-flex flex-column align-items-center justify-content-center" style="height:85vh;"> <div class="container-fluid text-center pt-5" style="height:85vh;">
<form class="row g-3 needs-validation w-100" action="traitementAjout.php" method="post" novalidate> <form class="row g-3 needs-validation w-100" action="traitementAjout.php" method="post" novalidate>
<div class="container text-center d-flex flex-column align-items-center text-center flex-grow fs-2"> <div class="container fs-2">
<label for="question">Question:</label> <label for="question" class="form-label">Question:</label>
<textarea class="form-control" id="question" name="question" rows="4" cols="50" required></textarea> <textarea class="form-control fs-2" id="question" name="question" rows="4" cols="50" style="resize: none; text-align: center"required></textarea>
<div class="invalid-feedback"> <div class="invalid-feedback">
Please provide a valid question. Please provide a valid question.
</div> </div>
<div class="container text-center d-flex flex-row align-items-center text-center flex-grow"> </div>
<div class="container text-center d-flex flex-column align-items-center text-center flex-grow"> <div class="container fs-2 pt-5">
<label for="reponse1">Réponse 1:</label> <div class="row">
<textarea id="reponse1" name="reponse1" rows="1" required></textarea> <div class="col">
<label for="reponse1" class="form-label">Réponse 1:</label>
<input id="reponse1" name="reponse1" rows="1" required></input>
<div class="invalid-feedback"> <div class="invalid-feedback">
Please provide a valid answer. Please provide a valid answer.
</div> </div>
</div> </div>
<div class="container text-center d-flex flex-column align-items-center text-center flex-grow"> <div class="col">
<label for="reponse2">Réponse 2:</label> <label for="reponse2" class="form-label">Réponse 2:</label>
<textarea id="reponse2" name="reponse2" rows="1" required></textarea> <input id="reponse2" name="reponse2" rows="1" required></input>
<div class="invalid-feedback"> <div class="invalid-feedback">
Please provide a valid answer. Please provide a valid answer.
</div> </div>
</div> </div>
</div> </div>
<div class="container text-center d-flex flex-row align-items-center text-center flex-grow"> <div class="row">
<div class="container text-center d-flex flex-column align-items-center text-center flex-grow"> <div class="col">
<label for="reponse3">Réponse 3:</label> <label for="reponse3" class="form-label">Réponse 3:</label>
<textarea id="reponse3" name="reponse3" rows="1" required></textarea> <input id="reponse3" name="reponse3" rows="1" required></input>
<div class="invalid-feedback"> <div class="invalid-feedback">
Please provide a valid answer. Please provide a valid answer.
</div> </div>
</div> </div>
<div class="container text-center d-flex flex-column align-items-center text-center flex-grow"> <div class="col">
<label for="reponse4">Réponse 4:</label> <label for="reponse4" class="form-label">Réponse 4:</label>
<textarea id="reponse4" name="reponse4" rows="1" required></textarea> <input id="reponse4" name="reponse4" rows="1" required></input>
<div class="invalid-feedback"> <div class="invalid-feedback">
Please provide a valid answer. Please provide a valid answer.
</div> </div>
</div> </div>
</div> </div>
<div class="container text-center d-flex flex-row align-items-center text-center flex-grow"> <div class="pt-5">
<div class="container text-center d-flex flex-column align-items-center text-center flex-grow">
<label for="theme" class="form-label">Themes</label> <label for="theme" class="form-label">Themes</label>
<select id="theme" name="theme" required> <select id="theme" name="theme" required>
<option selected disabled value=""></option> <option selected disabled value=""></option>
@ -73,7 +74,7 @@
<div class="invalid-feedback"> <div class="invalid-feedback">
Please select a valid theme. Please select a valid theme.
</div> </div>
</div>
</div> </div>
<input class="m-5" type="submit" value="ajouter" style="background-color:green;"> <input class="m-5" type="submit" value="ajouter" style="background-color:green;">
</div> </div>

@ -19,48 +19,38 @@
</head> </head>
<body style="background: linear-gradient(to bottom, rgba(37, 34, 71, 1), rgba(37, 35, 72, 1));"> <body style="background: linear-gradient(to bottom, rgba(37, 34, 71, 1), rgba(37, 35, 72, 1));">
<div class="d-flex flex-column align-items-center justify-content-center" style="height:95vh"> <div class="container text-center">
<div style="width:90vw; height:30vh; margin-top:50px;" class="text-center d-flex align-items-center text-center text-white border border-white rounded"> <div class="container text-center text-white border border-white rounded mt-5">
<p class="sm-fs-5 mx-auto m-5"> <p class="fs-2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident fuga cum soluta iure libero! Ullam, expedita excepturi! Odio distinctio quos quasi commodi libero ratione corrupti, unde iste explicabo suscipit consequatur ipsum! Id beatae corrupti ipsa totam deserunt, vel tenetur, iusto quaerat asperiores veritatis quidem! Vel dolorem recusandae necessitatibus ullam laborum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident fuga cum soluta iure libero! Ullam, expedita excepturi! Odio distinctio quos quasi commodi libero ratione corrupti, unde iste explicabo suscipit consequatur ipsum! Id beatae corrupti ipsa totam deserunt, vel tenetur, iusto quaerat asperiores veritatis quidem! Vel dolorem recusandae necessitatibus ullam laborum!
<?php /* Query to bd d'une question aléatoire */ ?> <?php /* Query to bd d'une question aléatoire */ ?>
</p> </p>
</div> </div>
<div class="container text-center d-flex flex-column align-items-center text-center flex-grow"> <div class="row g-5">
<div class="container text-center d-flex flex-row align-items-center text-center flex-grow"> <div class="col pt-5">
<button href="vues/Solo.php" class="text-white m-3 container text-center d-flex align-items-center w-75 h-75 rounded border border-white text-center" style="background-color:blue;text-decoration: none;color: black; height:20vh;"> <button class="text-white fs-2 d-grid gap-2 container text-center rounded border border-white" style="background-color:blue;text-decoration: none;color: black; ">
<div class="container text-center d-flex align-items-center text-center">
<p class="mx-auto fs-5">
Lorem, ipsum. Lorem, ipsum.
<?php /* Query to bd d'une question aléatoire */ ?> <?php /* Query to bd d'une question aléatoire */ ?>
</p>
</div>
</button> </button>
<button href="vues/Multijoueur.php" class="text-white m-3 container text-center d-flex align-items-center w-75 h-75 rounded border border-white text-center" style="background-color:green;text-decoration: none;color: black;height:20vh;"> </div>
<div class="container text-center d-flex align-items-center text-center"> <div class="col pt-5">
<p class="mx-auto fs-5"> <button class="text-white fs-2 container text-center rounded border border-white" style="background-color:green;text-decoration: none;color: black;">
Lorem, ipsum. Lorem, ipsum.
<?php /* Query to bd d'une question aléatoire */ ?> <?php /* Query to bd d'une question aléatoire */ ?>
</p>
</div>
</button> </button>
</div> </div>
<div class="container text-center d-flex flex-row align-items-center text-center flex-grow"> </div>
<button href="vues/AddQuestions.php" class="text-white m-3 container text-center d-flex align-items-center w-75 h-75 rounded border border-white text-center" style="background-color:red;text-decoration: none;color: black;height:20vh;"> <div class="row g-5">
<div class="container text-center d-flex align-items-center text-center"> <div class="col pt-5">
<p class="mx-auto fs-5"> <button class="text-white fs-2 container text-center rounded border border-white" style="background-color:red;text-decoration: none;color: black;">
e^5 e^5
<?php /* Query to bd d'une question aléatoire */ ?> <?php /* Query to bd d'une question aléatoire */ ?>
</p>
</div>
</button> </button>
<button href="vues/AddQuestions.php" class="text-white m-3 container text-center d-flex align-items-center w-75 h-75 rounded border border-white text-center" style="background-color:orange;text-decoration: none;color: black;height:20vh;"> </div>
<div class="container text-center d-flex align-items-center text-center"> <div class="col pt-5">
<p class="mx-auto fs-5"> <button class="text-white fs-2 container text-center rounded border border-white" style="background-color:orange;text-decoration: none;color: black;">
Lorem, ipsum. Lorem, ipsum.
<?php /* Query to bd d'une question aléatoire */ ?> <?php /* Query to bd d'une question aléatoire */ ?>
</p>
</div>
</button> </button>
</div> </div>
</div> </div>

Loading…
Cancel
Save