feat: Bouton radio + Boutons Passer/valider + css

tests
Yvan CALATAYUD 1 year ago
parent fb25689ae4
commit 3d5e80ef44

@ -0,0 +1,48 @@
#chrono{
width: 120px;
height: 120px;
border-radius: 50%;
background: red;
border: solid white;
display: flex;
align-items: center;
justify-content: center;
left:5%;
}
#centre{
height: 10px;
width: 10px;
border-radius: 50%;
background: white;
position: absolute;
z-index: 2;
}
#aiguille-container{
position: absolute;
top: 2px;
height: 58px;
width: 3px;
}
#aiguille{
height: 100%;
background: red;
transform-origin: center bottom;
transform: rotate(0deg);
}
#fond{
position: absolute;
width: 120px;
height: 120px;
border: solid white;
display: flex;
align-items: center;
justify-content: center;
background: conic-gradient(red 0%, red 0deg, #4b4b4b 0deg, #4b4b4b 360deg);
border-radius:50%;
}

@ -0,0 +1,13 @@
#bodyStyle{
background: linear-gradient(to bottom, rgba(37, 34, 71, 1), rgba(37, 35, 72, 1));
}
@font-face{
font-family: 'MenuFont';
src: url('../Media/mathEducFont.ttf') format('truetype');
}
* {
font-family: 'MenuFont';
}

@ -6,19 +6,10 @@
<meta charset=utf-8> <meta charset=utf-8>
<title>Math'Educ</title> <title>Math'Educ</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style> <link rel="stylesheet" href="css/global.css">
@font-face {
font-family: 'MenuFont';
src: url('Media/mathEducFont.ttf') format('truetype');
}
* {
font-family: 'MenuFont';
}
</style>
</head> </head>
<body style="background: linear-gradient(to bottom, rgba(37, 34, 71, 1), rgba(37, 35, 72, 1));"> <body id="bodyStyle">
<div class="d-flex flex-column align-items-center justify-content-between" style="height:95vh"> <div class="d-flex flex-column align-items-center justify-content-between" style="height:95vh">
<img src="Media/Logo.png" style="margin-top:50px; object-fit:fill;" class="h-25"> <img src="Media/Logo.png" style="margin-top:50px; object-fit:fill;" class="h-25">
<a href="/solo" class="text-white m-3 container text-center d-flex align-items-center w-75 rounded border border-white text-center" style="background-color:green;text-decoration: none;color: black; height:20vh;"> <a href="/solo" class="text-white m-3 container text-center d-flex align-items-center w-75 rounded border border-white text-center" style="background-color:green;text-decoration: none;color: black; height:20vh;">

@ -7,20 +7,10 @@
<title>Math'Educ</title> <title>Math'Educ</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="css/global.css">
<style>
@font-face {
font-family: 'MenuFont';
src: url('Media/mathEducFont.ttf') format('truetype');
}
* {
font-family: 'MenuFont';
}
</style>
</head> </head>
<body style="background: linear-gradient(to bottom, rgba(37, 34, 71, 1), rgba(37, 35, 72, 1)); color:white;"> <body style="color:white;">
<div class="container-fluid text-center pt-5" 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 fs-2"> <div class="container fs-2">

@ -6,17 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</script> </script>
<link rel="stylesheet" href="css/global.css">
<style>
@font-face {
font-family: 'MenuFont';
src: url('Media/mathEducFont.ttf') format('truetype');
}
* {
font-family: 'MenuFont';
}
</style>
</head> </head>
<body> <body>

@ -6,17 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</script> </script>
<link rel="stylesheet" href="css/global.css">
<style>
@font-face {
font-family: 'MenuFont';
src: url('Media/mathEducFont.ttf') format('truetype');
}
* {
font-family: 'MenuFont';
}
</style>
</head> </head>
<body> <body>

@ -6,17 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</script> </script>
<link rel="stylesheet" href="css/global.css">
<style>
@font-face {
font-family: 'MenuFont';
src: url('Media/mathEducFont.ttf') format('truetype');
}
* {
font-family: 'MenuFont';
}
</style>
</head> </head>
<body> <body>

@ -6,17 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</script> </script>
<link rel="stylesheet" href="css/global.css">
<style>
@font-face {
font-family: 'MenuFont';
src: url('Media/mathEducFont.ttf') format('truetype');
}
* {
font-family: 'MenuFont';
}
</style>
</head> </head>
<body> <body>

@ -6,17 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</script> </script>
<link rel="stylesheet" href="css/global.css">
<style>
@font-face {
font-family: 'MenuFont';
src: url('Media/mathEducFont.ttf') format('truetype');
}
* {
font-family: 'MenuFont';
}
</style>
</head> </head>
<body> <body>

@ -6,17 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</script> </script>
<link rel="stylesheet" href="css/global.css">
<style>
@font-face {
font-family: 'MenuFont';
src: url('Media/mathEducFont.ttf') format('truetype');
}
* {
font-family: 'MenuFont';
}
</style>
</head> </head>
<body> <body>

@ -3,25 +3,14 @@
<head> <head>
<title>Maths Educ</title> <title>Maths Educ</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" href="css/global.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<style>
@font-face {
font-family: 'MenuFont';
src: url('Media/mathEducFont.ttf') format('truetype');
}
* {
font-family: 'MenuFont';
}
</style>
</head> </head>
<body style="background: linear-gradient(to bottom, rgba(37, 34, 71, 1), rgba(37, 35, 72, 1));"> <body id="bodyStyle">
<div class="text-center" style="padding-top: 30vh"> <div class="text-center" style="padding-top: 30vh">
<h1 style="color: white; font-size: 50px">Difficulte :</h1> <h1 style="color: white; font-size: 50px">Difficulte :</h1>
<input type="radio" class="btn-check" name="difficulte" id="facile" autocomplete="off" checked> <input type="radio" class="btn-check" name="difficulte" id="facile" autocomplete="off" checked>

@ -1,32 +0,0 @@
<!DOCTYPE html>
<html lang="fr">
<html>
<head>
<meta charset=utf-8>
<title>Math'Educ</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style>
@font-face {
font-family: 'MenuFont';
src: url('Media/mathEducFont.ttf') format('truetype');
}
* {
font-family: 'MenuFont';
}
</style>
</head>
<body style="background: linear-gradient(to bottom, rgba(37, 34, 71, 1), rgba(37, 35, 72, 1));">
<div class="d-flex flex-row justify-content-around align-items-end" style="height:95vh">
<img src="Media/moon.png" class="position-absolute" style="top:0%; height:15vh;">
<img src="Media/rocket.png" style="width:8vh;">
<img src="Media/rocket.png" style="width:8vh;">
<img src="Media/rocket.png" style="width:8vh;">
<img src="Media/rocket.png" style="width:8vh;">
</div>
</body>
</html>

@ -4,18 +4,9 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Math'Educ - Connexion</title> <title>Math'Educ - Connexion</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style> <link rel="stylesheet" href="css/global.css">
@font-face {
font-family: 'MenuFont';
src: url('Media/mathEducFont.ttf') format('truetype');
}
* {
font-family: 'MenuFont';
}
</style>
</head> </head>
<body style="height: 100%;"> <body>
<div class="container mt-5"> <div class="container mt-5">
<div class="row"> <div class="row">
<div class="col-md-4 offset-md-4"> <div class="col-md-4 offset-md-4">

@ -5,62 +5,66 @@
<head> <head>
<meta charset=utf-8> <meta charset=utf-8>
<title>Math'Educ</title> <title>Math'Educ</title>
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/chrono.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style>
@font-face {
font-family: 'MenuFont';
src: url('Media/mathEducFont.ttf') format('truetype');
}
* {
font-family: 'MenuFont';
}
</style>
</head> </head>
<body style="background: linear-gradient(to bottom, rgba(37, 34, 71, 1), rgba(37, 35, 72, 1));"> <body id="bodyStyle">
<div class="d-flex flex-column align-items-center justify-content-center" style="height:95vh"> <div id="chrono" class="container mx-5 my-4 position-relative">
<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 id="centre"></div>
<p class="sm-fs-5 mx-auto m-5"> <div id="aiguille-container">
<div id="aiguille" class="aiguille"></div>
</div>
<div id="fond"></div>
</div>
<script src="js/scriptChrono.js"></script>
<div class="container text-center text-white">
<div class="container 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! 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> </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;"> <input type="radio" class="btn-check" name="reponse" id="reponse1" autocomplete="off">
<div class="container text-center d-flex align-items-center text-center"> <label class="btn fs-2 container text-white" for="reponse1" style="background-color:blue;">
<p class="mx-auto fs-5"> Lorem, ipsum.
Lorem, ipsum. </label>
<?php /* Query to bd d'une question aléatoire */ ?> </div>
</p> <div class="col pt-5">
</div> <input type="radio" class="btn-check" name="reponse" id="reponse2" autocomplete="off">
</button> <label class="btn fs-2 container text-white" for="reponse2" style="background-color:green;">
<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;"> Lorem, ipsum.
<div class="container text-center d-flex align-items-center text-center"> </label>
<p class="mx-auto fs-5">
Lorem, ipsum.
<?php /* Query to bd d'une question aléatoire */ ?>
</p>
</div>
</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"> <input type="radio" class="btn-check" name="reponse" id="reponse3" autocomplete="off">
e^5 <label class="btn fs-2 container text-white" for="reponse3" style="background-color:red;">
<?php /* Query to bd d'une question aléatoire */ ?> Lorem, ipsum.
</p> </label>
</div> </div>
<div class="col pt-5">
<input type="radio" class="btn-check" name="reponse" id="reponse4" autocomplete="off">
<label class="btn fs-2 container text-white" for="reponse4" style="background-color:orange;">
Lorem, ipsum.
</label>
</div>
</div>
<div class="row justify-content-center">
<div class="col-1 pt-5">
<button type="button" class="fs-2 btn btn-success btn-lg">
Valider
</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-1 pt-5">
<p class="mx-auto fs-5"> <button type="button" class="fs-2 btn btn-danger btn-lg">
Lorem, ipsum. Passer
<?php /* Query to bd d'une question aléatoire */ ?>
</p>
</div>
</button> </button>
</div> </div>
</div> </div>

@ -1,68 +1,73 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<html style="height: 100%" class="row"> <html>
<head> <head>
<meta charset=utf-8> <meta charset=utf-8>
<title>Math'Educ</title> <title>Math'Educ</title>
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/chrono.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
@font-face {
font-family: 'MenuFont';
src: url('Media/mathEducFont.ttf') format('truetype');
}
* {
font-family: 'MenuFont';
}
</style>
</head> </head>
<body style="background: linear-gradient(to bottom, rgba(37, 34, 71, 1), rgba(37, 35, 72, 1));" > <body id="bodyStyle">
<div id="chrono" class="container mx-5 my-4 position-relative" style="width: 120px; height: 120px; border-radius: 50%; background: red; border: solid white; display: flex; align-items: center; justify-content: center;left:5%"> <div id="chrono" class="container mx-5 my-4 position-relative">
<div id="centre" style="height: 10px; width: 10px; border-radius: 50%; background: white; position: absolute; z-index: 2;"></div> <div id="centre"></div>
<div id="aiguille-container" style="position: absolute; top: 2px; height: 58px; width: 3px;"> <div id="aiguille-container">
<div id="aiguille" class="aiguille" style="height: 100%; background: red; transform-origin: center bottom; transform: rotate(0deg);"></div> <div id="aiguille" class="aiguille"></div>
</div> </div>
<div id="fond" style="position: absolute; width: 120px; height: 120px;border: solid white;display: flex; align-items: center; justify-content: center; background: conic-gradient(red 0%, red 0deg, #4b4b4b 0deg, #4b4b4b 360deg);border-radius:50%;"></div> <div id="fond"></div>
</div> </div>
<script src="js/scriptChrono.js"></script> <script src="js/scriptChrono.js"></script>
<div class="container text-center"> <div class="container text-center text-white">
<div class="container text-center text-white border border-white rounded mt-5"> <div class="container border border-white rounded mt-5">
<p class="fs-2"> <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 */ ?>
</p> </p>
</div> </div>
<div class="row g-5"> <div class="row g-5">
<div class="col pt-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; "> <input type="radio" class="btn-check" name="reponse" id="reponse1" autocomplete="off">
<label class="btn fs-2 container text-white" for="reponse1" style="background-color:blue;">
Lorem, ipsum. Lorem, ipsum.
<?php /* Query to bd d'une question aléatoire */ ?> </label>
</button>
</div> </div>
<div class="col pt-5"> <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;"> <input type="radio" class="btn-check" name="reponse" id="reponse2" autocomplete="off">
<label class="btn fs-2 container text-white" for="reponse2" style="background-color:green;">
Lorem, ipsum. Lorem, ipsum.
<?php /* Query to bd d'une question aléatoire */ ?> </label>
</button>
</div> </div>
</div> </div>
<div class="row g-5"> <div class="row g-5">
<div class="col pt-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;"> <input type="radio" class="btn-check" name="reponse" id="reponse3" autocomplete="off">
e^5 <label class="btn fs-2 container text-white" for="reponse3" style="background-color:red;">
<?php /* Query to bd d'une question aléatoire */ ?> Lorem, ipsum.
</button> </label>
</div> </div>
<div class="col pt-5"> <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;"> <input type="radio" class="btn-check" name="reponse" id="reponse4" autocomplete="off">
<label class="btn fs-2 container text-white" for="reponse4" style="background-color:orange;">
Lorem, ipsum. Lorem, ipsum.
<?php /* Query to bd d'une question aléatoire */ ?> </label>
</div>
</div>
<div class="row justify-content-center">
<div class="col-1 pt-5">
<button type="button" class="fs-2 btn btn-danger btn-lg">
Passer
</button>
</div>
<div class="col-1 pt-5">
<button type="button" class="fs-2 btn btn-success btn-lg">
Valider
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</body> </body>

@ -1,86 +0,0 @@
<!DOCTYPE html>
<html lang="fr">
<html>
<head>
<meta charset=utf-8>
<title>Math'Educ</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style>
@font-face {
font-family: 'MenuFont';
src: url('Media/mathEducFont.ttf') format('truetype');
}
* {
font-family: 'MenuFont';
}
</style>
</head>
<body style="background: linear-gradient(to bottom, rgba(37, 34, 71, 1), rgba(37, 35, 72, 1)); color:white;">
<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 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>
<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="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="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="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="pt-5">
<label for="theme" class="form-label">Themes</label>
<select id="theme" name="theme" required>
<option selected disabled value=""></option>
<option>Theme1</option>
<option>Theme2</option>
<option>Theme3</option>
</select>
<div class="invalid-feedback">
Please select a valid theme.
</div>
</div>
<input class="m-5" type="submit" value="ajouter" style="background-color:green;">
</div>
</form>
</div>
<script src="js/script.js"></script>
</body>
</html>

@ -1,55 +0,0 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Maths Educ</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<style>
@font-face {
font-family: 'MenuFont';
src: url('Media/mathEducFont.ttf') format('truetype');
}
* {
font-family: 'MenuFont';
}
</style>
</head>
<body style="background: linear-gradient(to bottom, rgba(37, 34, 71, 1), rgba(37, 35, 72, 1));">
<div class="text-center" style="padding-top: 30vh">
<h1 style="color: white; font-size: 50px">Difficulte :</h1>
<input type="radio" class="btn-check" name="difficulte" id="facile" autocomplete="off" checked>
<label class="btn btn-outline-success fs-1" for="facile" style="margin-right: 20px">Facile</label>
<input type="radio" class="btn-check" name="difficulte" id="moyen" autocomplete="off">
<label class="btn btn-outline-warning fs-1" for="moyen" style="margin-right: 20px">Moyen</label>
<input type="radio" class="btn-check" name="difficulte" id="difficulte" autocomplete="off">
<label class="btn btn-outline-danger fs-1" for="difficulte">Difficile</label>
</div>
<div class="dropdown d-flex flex-column align-items-center p-5">
<button class="btn btn-secondary dropdown-toggle btn-lg fs-1" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Theme
</button>
<ul class="dropdown-menu">
<li><button class="dropdown-item fs-1" type="button">Theme1</button></li>
<li><button class="dropdown-item fs-1" type="button">Theme2</button></li>
<li><button class="dropdown-item fs-1" type="button">Theme3</button></li>
</ul>
</div>
<div class="d-flex flex-column align-items-center">
<button type="button" class="btn btn-success btn-lg fs-1" >Jouer</button>
</div>
</body>
</html>

@ -1,32 +0,0 @@
<!DOCTYPE html>
<html lang="fr">
<html>
<head>
<meta charset=utf-8>
<title>Math'Educ</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style>
@font-face {
font-family: 'MenuFont';
src: url('Media/mathEducFont.ttf') format('truetype');
}
* {
font-family: 'MenuFont';
}
</style>
</head>
<body style="background: linear-gradient(to bottom, rgba(37, 34, 71, 1), rgba(37, 35, 72, 1));">
<div class="d-flex flex-row justify-content-around align-items-end" style="height:95vh">
<img src="Media/moon.png" class="position-absolute" style="top:0%; height:15vh;">
<img src="Media/rocket.png" style="width:8vh;">
<img src="Media/rocket.png" style="width:8vh;">
<img src="Media/rocket.png" style="width:8vh;">
<img src="Media/rocket.png" style="width:8vh;">
</div>
</body>
</html>

@ -1,68 +0,0 @@
<!DOCTYPE html>
<html lang="fr">
<html>
<head>
<meta charset=utf-8>
<title>Math'Educ</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style>
@font-face {
font-family: 'MenuFont';
src: url('Media/mathEducFont.ttf') format('truetype');
}
* {
font-family: 'MenuFont';
}
</style>
</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">
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">
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">
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">
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">
Lorem, ipsum.
<?php /* Query to bd d'une question aléatoire */ ?>
</p>
</div>
</button>
</div>
</div>
</div>
</body>

@ -1,99 +0,0 @@
<!DOCTYPE html>
<html lang="fr">
<html style="height: 100%" class="row">
<head>
<meta charset=utf-8>
<title>Math'Educ</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
@font-face {
font-family: 'MenuFont';
src: url('Media/mathEducFont.ttf') format('truetype');
}
* {
font-family: 'MenuFont';
}
</style>
</head>
<body style="background: linear-gradient(to bottom, rgba(37, 34, 71, 1), rgba(37, 35, 72, 1));" class="col my-auto">
<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="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 */ ?>
</button>
</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 */ ?>
</button>
</div>
</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 */ ?>
</button>
</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 */ ?>
</button>
</div>
</div>
<div class="row g-5 pt-5 justify-content-center">
<div class="col-4 pt-5">
<button class="text-white fs-2 container text-center rounded border border-white btn btn-lg" style="background-color:red;text-decoration: none;color: black;">
annuler
</button>
</div>
<div class="col-4 pt-5">
<button class="text-white fs-2 container text-center rounded border border-white btn btn-lg" style="background-color:green;text-decoration: none;color: black;" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Valider
<?php /* Query to bd d'une question aléatoire */ ?>
</button>
</div>
</div>
</div>
<!-- <div class="d-flex justify-content-center fs-3" style="height:10vh;">
<button style="width:25vw;background-color:red;color: white;">annuler</button>
<button style="width:25vw;background-color:green;color: white;" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Valider</button>
</div> -->
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel">Question ajoutée</h1>
<!-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> -->
</div>
<div class="modal-body">
Voulez vous ajouter une autre question ?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Non</button>
<button type="button" class="btn btn-success">Oui</button>
</div>
</div>
</div>
</div>
</body>

@ -1,58 +0,0 @@
<!DOCTYPE html>
<html lang="fr">
<html style="height: 100%" class="row">
<head>
<meta charset=utf-8>
<title>Math'Educ</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style>
@font-face {
font-family: 'MenuFont';
src: url('Media/mathEducFont.ttf') format('truetype');
}
* {
font-family: 'MenuFont';
}
</style>
</head>
<body style="background: linear-gradient(to bottom, rgba(37, 34, 71, 1), rgba(37, 35, 72, 1));" class="col my-auto">
<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="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 */ ?>
</button>
</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 */ ?>
</button>
</div>
</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 */ ?>
</button>
</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 */ ?>
</button>
</div>
</div>
</div>
</body>

@ -1,48 +0,0 @@
<!DOCTYPE html>
<html lang="fr">
<html>
<head>
<meta charset=utf-8>
<title>Math'Educ</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style>
@font-face {
font-family: 'MenuFont';
src: url('Media/mathEducFont.ttf') format('truetype');
}
* {
font-family: 'MenuFont';
}
</style>
</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-between" style="height:95vh">
<img src="Media/Logo.png" style="margin-top:50px; object-fit:fill;" class="h-25">
<a href="/solo" class="text-white m-3 container text-center d-flex align-items-center w-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">
<h1 class="mx-auto fs-1">
SOLO
</h1>
</div>
</a>
<a href="/multi" class="text-white m-3 container text-center d-flex align-items-center w-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">
<h1 class="mx-auto fs-1">
MULTIJOUEUR
</h1>
</div>
</a>
<a href="/addquestions" class="text-white m-3 container text-center d-flex align-items-center w-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">
<h1 class="mx-auto fs-1">
ajouter des questions
</h1>
</div>
</a>
</div>
</body>
</html>
Loading…
Cancel
Save