style: Responsive page Ajout + Solo

tests
yvan.calatayud 2 years ago
parent ccea28238d
commit fffd607fb8

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

@ -21,48 +21,49 @@
</head>
<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>
<div class="container text-center d-flex flex-column align-items-center text-center flex-grow fs-2">
<label for="question">Question:</label>
<textarea class="form-control" id="question" name="question" rows="4" cols="50" required></textarea>
<div class="container fs-2">
<label for="question" class="form-label">Question:</label>
<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">
Please provide a valid question.
</div>
<div class="container text-center d-flex flex-row align-items-center text-center flex-grow">
<div class="container text-center d-flex flex-column align-items-center text-center flex-grow">
<label for="reponse1">Réponse 1:</label>
<textarea id="reponse1" name="reponse1" rows="1" required></textarea>
</div>
<div class="container fs-2 pt-5">
<div class="row">
<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">
Please provide a valid answer.
</div>
</div>
<div class="container text-center d-flex flex-column align-items-center text-center flex-grow">
<label for="reponse2">Réponse 2:</label>
<textarea id="reponse2" name="reponse2" rows="1" required></textarea>
<div class="col">
<label for="reponse2" class="form-label">Réponse 2:</label>
<input id="reponse2" name="reponse2" rows="1" required></input>
<div class="invalid-feedback">
Please provide a valid answer.
</div>
</div>
</div>
<div class="container text-center d-flex flex-row align-items-center text-center flex-grow">
<div class="container text-center d-flex flex-column align-items-center text-center flex-grow">
<label for="reponse3">Réponse 3:</label>
<textarea id="reponse3" name="reponse3" rows="1" required></textarea>
<div class="row">
<div class="col">
<label for="reponse3" class="form-label">Réponse 3:</label>
<input id="reponse3" name="reponse3" rows="1" required></input>
<div class="invalid-feedback">
Please provide a valid answer.
</div>
</div>
<div class="container text-center d-flex flex-column align-items-center text-center flex-grow">
<label for="reponse4">Réponse 4:</label>
<textarea id="reponse4" name="reponse4" rows="1" required></textarea>
<div class="col">
<label for="reponse4" class="form-label">Réponse 4:</label>
<input id="reponse4" name="reponse4" rows="1" required></input>
<div class="invalid-feedback">
Please provide a valid answer.
</div>
</div>
</div>
<div class="container text-center d-flex flex-row align-items-center text-center flex-grow">
<div class="container text-center d-flex flex-column align-items-center text-center flex-grow">
<div class="pt-5">
<label for="theme" class="form-label">Themes</label>
<select id="theme" name="theme" required>
<option selected disabled value=""></option>
@ -73,7 +74,7 @@
<div class="invalid-feedback">
Please select a valid theme.
</div>
</div>
</div>
<input class="m-5" type="submit" value="ajouter" style="background-color:green;">
</div>

@ -19,48 +19,38 @@
</head>
<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 style="width:90vw; height:30vh; margin-top:50px;" class="text-center d-flex align-items-center text-center text-white border border-white rounded">
<p class="sm-fs-5 mx-auto m-5">
<div class="container text-center">
<div class="container text-center text-white border border-white rounded mt-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!
<?php /* Query to bd d'une question aléatoire */ ?>
</p>
</div>
<div class="container text-center d-flex flex-column align-items-center text-center flex-grow">
<div class="container text-center d-flex flex-row align-items-center text-center flex-grow">
<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;">
<div class="container text-center d-flex align-items-center text-center">
<p class="mx-auto fs-5">
<div class="row g-5">
<div class="col pt-5">
<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; ">
Lorem, ipsum.
<?php /* Query to bd d'une question aléatoire */ ?>
</p>
</div>
</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 class="container text-center d-flex align-items-center text-center">
<p class="mx-auto fs-5">
</div>
<div class="col pt-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.
<?php /* Query to bd d'une question aléatoire */ ?>
</p>
</div>
</button>
</div>
<div class="container text-center d-flex flex-row align-items-center text-center flex-grow">
<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="container text-center d-flex align-items-center text-center">
<p class="mx-auto fs-5">
</div>
<div class="row g-5">
<div class="col pt-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
<?php /* Query to bd d'une question aléatoire */ ?>
</p>
</div>
</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 class="container text-center d-flex align-items-center text-center">
<p class="mx-auto fs-5">
</div>
<div class="col pt-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.
<?php /* Query to bd d'une question aléatoire */ ?>
</p>
</div>
</button>
</div>
</div>

Loading…
Cancel
Save