1
0
Fork 0

Update front

This commit is contained in:
Ethanell 2020-02-01 18:18:25 +01:00
parent d4f1150ab3
commit 8dd2e156a1
6 changed files with 101 additions and 75 deletions

View file

@ -35,6 +35,7 @@
body, html { body, html {
height: 100%; height: 100%;
font-family: Poppins-Regular, sans-serif; font-family: Poppins-Regular, sans-serif;
background-color: rgb(20, 20, 20);
} }
/*---------------------------------------------*/ /*---------------------------------------------*/
@ -68,7 +69,7 @@ p {
font-family: Poppins-Regular; font-family: Poppins-Regular;
font-size: 14px; font-size: 14px;
line-height: 1.7; line-height: 1.7;
color: #666666; color: #e7e7e7;
margin: 0px; margin: 0px;
} }
@ -442,14 +443,10 @@ textarea.input2 + .focus-input2::after {
} }
.container{ .container{
background: rgba(219,21,99,0.8);
background: -webkit-linear-gradient(45deg, rgba(213,0,125,0.8), rgba(229,57,53,0.8));
background: -o-linear-gradient(45deg, rgba(213,0,125,0.8), rgba(229,57,53,0.8));
background: -moz-linear-gradient(45deg, rgba(213,0,125,0.8), rgba(229,57,53,0.8));
background: linear-gradient(45deg, rgba(213,0,125,0.8), rgba(229,57,53,0.8));
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
min-height: 100vh; height:40vh;
width: 100%; width: 100%;
justify-content: space-around; justify-content: space-around;
align-items: flex-start; align-items: flex-start;
@ -463,16 +460,17 @@ textarea.input2 + .focus-input2::after {
} }
.container div{ .container div{
background-color: white; background-color: rgb(54, 54, 54);
padding: 1vw; padding: 1vw;
margin-top: 2vh; margin-top: 2vh;
border-radius: 1vw; border-radius: 1vw;
color: rgb(206, 206, 206);
} }
.liste{ .liste{
width: 27%; width: 27%;
height: 100vh; height: 91vh;
background-color: rgba(211, 211, 211, 0.938); background-color: rgba(87, 87, 87, 0.938);
overflow: scroll; overflow: scroll;
} }
@ -481,11 +479,19 @@ textarea.input2 + .focus-input2::after {
flex-wrap: nowrap; flex-wrap: nowrap;
} }
.liste button{
padding: 0.5vw;
font-size: 20px;
border-radius: 0.5vw;
display: block;
margin: auto;
}
.liste div{ .liste div{
background-color: rgb(255, 255, 255); background-color: rgb(131, 131, 131);
padding: 0.5vw; padding: 0.5vw;
border-bottom-left-radius: 2vw; border-bottom-left-radius: 2vw;
box-shadow: 10px 8px 5px grey; box-shadow: 10px 8px 5px rgb(0, 0, 0);
margin-top: 1vh; margin-top: 1vh;
cursor: pointer; cursor: pointer;
} }
@ -495,12 +501,9 @@ textarea.input2 + .focus-input2::after {
} }
.liste div button{ .liste div button{
background-color: rgb(3, 177, 41); background-color: rgb(0, 105, 0);
border-radius: 0.5vw; color: rgb(206, 206, 206);
display: block;
margin: auto;
margin-top: 0.5vw;
padding: 0.2vw;
} }
.liste .spec{ .liste .spec{
@ -513,6 +516,7 @@ textarea.input2 + .focus-input2::after {
} }
.liste .annuler { .liste .annuler {
background-color: rgb(179, 179, 179);
display: none; display: none;
} }
@ -521,11 +525,11 @@ textarea.input2 + .focus-input2::after {
} }
.liste .donnee { .liste .donnee {
background-color: rgb(0, 185, 0); background-color: rgb(0, 105, 0);
} }
.liste .probleme { .liste .probleme {
background-color: rgb(240, 6, 6); background-color: rgb(133, 1, 1);
} }
.liste .probleme .erreur, .liste .probleme .donner{ .liste .probleme .erreur, .liste .probleme .donner{
@ -534,11 +538,11 @@ textarea.input2 + .focus-input2::after {
.liste .probleme .annuler{ .liste .probleme .annuler{
display: block; display: block;
color: black;
} }
.liste .erreur{ .liste .erreur{
background-color: rgb(240, 6, 6); background-color: rgb(133, 1, 1);
padding: 0.2vw;
} }
.liste .donnee .donner, .liste .donnee .erreur{ .liste .donnee .donner, .liste .donnee .erreur{
@ -547,29 +551,26 @@ textarea.input2 + .focus-input2::after {
.liste .donnee .annuler{ .liste .donnee .annuler{
display : block; display : block;
color: black;
} }
div#resume{
position: fixed;
width: 20%;
bottom:0;
left: 0;
border-radius: 0;
}
div#resume h2{ div#resume h2{
padding: 0.5vw; padding: 0.5vw;
background-color: lightgrey; background-color: rgb(116, 116, 116);
box-shadow: 10px 8px 5px grey; box-shadow: 10px 8px 5px rgb(0, 0, 0);
border-top-right-radius: 1vw; border-top-right-radius: 1vw;
color: black;
border-bottom-right-radius: 1vw; border-bottom-right-radius: 1vw;
border-top-left-radius: 1vw;
border-bottom-left-radius: 1vw;
} }
div#resume button{ div#resume button{
background-color: rgba(213,0,125,0.8); background-color: rgba(213,0,125,0.8);
padding: 0.5vw; padding: 0.8vw;
float: right; float: right;
box-shadow: 10px 8px 5px grey; box-shadow: 10px 8px 5px rgb(0, 0, 0);
font-size: 1.48rem; font-size: 1.48rem;
border-top-right-radius: 1vw; border-top-right-radius: 1vw;
border-bottom-right-radius: 1vw; border-bottom-right-radius: 1vw;
@ -617,6 +618,7 @@ nav ul li{
float: left; float: left;
padding : 0.2vw 2vw; padding : 0.2vw 2vw;
cursor: pointer; cursor: pointer;
color: white;
} }
nav ul li:hover{ nav ul li:hover{
@ -639,8 +641,9 @@ audio{
left: 18%; left: 18%;
padding: 1vw; padding: 1vw;
border-radius: 2vw; border-radius: 2vw;
background-color: white; background-color: rgb(32, 32, 32);
box-shadow: 10px 8px 5px grey; box-shadow: 10px 8px 5px rgb(0, 0, 0);
color: white;
z-index: 1; z-index: 1;
display:none; display:none;
} }
@ -661,7 +664,7 @@ audio{
#encours{ #encours{
display: flex; display: flex;
background-color: rgba(190, 187, 14, 0.733); background-color: rgba(139, 91, 1, 0.87);
flex-wrap : nowrap; flex-wrap : nowrap;
flex-direction: row; flex-direction: row;
width: 100%; width: 100%;
@ -669,23 +672,23 @@ audio{
} }
#encours div{ #encours div{
background-color: rgb(248, 234, 103); background-color: rgb(192, 112, 7);
padding: 1vw; padding: 1vw;
margin-top: 10vh; margin-top: 5vh;
height: 25vh; height: 25vh;
border-radius: 0.5vw; border-radius: 0.5vw;
} }
#attente{ #attente{
display: flex; display: flex;
background-color: rgba(255, 0, 0, 0.466); background-color: rgba(110, 1, 1, 0.466);
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-around; justify-content: space-around;
width: 100%; width: 100%;
} }
#attente div{ #attente div{
background-color: rgb(253, 121, 121); background-color: rgb(190, 101, 101);
padding: 1vw; padding: 1vw;
margin-top: 2vh; margin-top: 2vh;
border-radius: 0.5vw; border-radius: 0.5vw;
@ -697,7 +700,7 @@ audio{
} }
#realisee{ #realisee{
background-color: rgba(0, 255, 0, 0.479); background-color: rgba(3, 102, 3, 0.849);
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: row-reverse; flex-direction: row-reverse;
@ -706,7 +709,7 @@ audio{
} }
#realisee div{ #realisee div{
background-color: rgb(116, 240, 100); background-color: rgb(86, 158, 75);
padding: 1vw; padding: 1vw;
margin-top: 2vh; margin-top: 2vh;
border-radius: 0.5vw; border-radius: 0.5vw;
@ -721,18 +724,13 @@ audio{
display: none; display: none;
} }
#encours>h1{ #encours>h1{
position: fixed; position: fixed;
top: 2%; top: 2%;
} }
#txtcom1{
left: 8%;
}
#txtcom3{
right: 8%;
}
input[type=number]{ input[type=number]{
width: 10%; width: 10%;
@ -740,7 +738,42 @@ input[type=number]{
font-size: 20px; font-size: 20px;
} }
form>div{ form>div{
box-shadow: 10px 8px 5px rgb(73, 73, 73); box-shadow: 10px 8px 5px rgb(32, 32, 32);
}
.com h1{
text-align: center;
color: rgb(255, 255, 255);
width: 10%;
}
.com>button{
float: right;
}
#resume input#user {
width: 80%;
font-size: 25px;
background-color: grey;
margin-bottom: 1vh;
}
@media only screen and (max-width: 768px) {
.liste{
width: 40%;
}
}
@media only screen and (min-width: 1000px){
div#resume{
position: fixed;
width: 20%;
bottom:0;
left: 0;
border-radius: 0;
}
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 336 KiB

After

Width:  |  Height:  |  Size: 860 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 30 KiB

View file

@ -10,7 +10,7 @@ let radios = {"plate": null};
function addcmd(id, plate, content, sauce, drink, dessert, state) { function addcmd(id, plate, content, sauce, drink, dessert, state) {
$(list).append(`<div class='com' id='cmd${id}'> <h1>Commande ${id}</h1> <div class='spec'> <p>${plate}</p><p>${content}</p><p>${sauce}</p><p>${drink}</p><p>${dessert}</p><button class='annuler' onclick='annuler(${id})'>Annuler</button> </div><button class='donner' onclick='donner(${id})'>Donnée</button><button class='erreur' onclick='erreur(${id})'>Erreur</button> </div>`); $(list).append(`<div class='com' id='cmd${id}'> <button class='donner' onclick='donner(${id})'>Donnée</button> <h1>${id}</h1> <div class='spec'> <p>${plate}</p><p>${content}</p><p>${sauce}</p><p>${drink}</p><p>${dessert}</p><button class='annuler' onclick='annuler(${id})'>Annuler</button><button class='erreur' onclick='erreur(${id})'>Erreur</button> </div> </div>`);
let e = document.querySelector(`.liste #cmd${id}`); let e = document.querySelector(`.liste #cmd${id}`);
e.addEventListener( "click" ,env => { e.addEventListener( "click" ,env => {
env.stopPropagation(); env.stopPropagation();

View file

@ -5,28 +5,27 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================--> <!--===============================================================================================-->
<link rel="icon" type="image/png" href="../static/images/icons/favicon.ico"/> <link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
<!--===============================================================================================--> <!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="../static/vendor/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================--> <!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="../static/fonts/font-awesome-4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================--> <!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="../static/vendor/animate/animate.css"> <link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<!--===============================================================================================--> <!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="../static/vendor/css-hamburgers/hamburgers.min.css"> <link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
<!--===============================================================================================--> <!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="../static/vendor/select2/select2.min.css"> <link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<!--===============================================================================================--> <!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="../static/css/util.css"> <link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="../static/css/main.css"> <link rel="stylesheet" type="text/css" href="css/main.css">
<!--===============================================================================================--> <!--===============================================================================================-->
</head> </head>
<body> <body>
<div class="bg-contact2" id="main-container" style="background-image: url('../static/images/bg-01.jpg');"> <div class="bg-contact2" id="main-container" style="background-image: url('images/bg-01.jpg');">
<div id="middle-container"> <div id="middle-container">
<div id="encours"> <div id="encours">
<h1 id="txtcom1">Sandwich 1</h1>
<div class="commis1"> <div class="commis1">
<h1>Commande 1</h1> <h1>Commande 1</h1>
<p>Sandwich dinde - jambon - tomate</p> <p>Sandwich dinde - jambon - tomate</p>
@ -34,7 +33,6 @@
<p>Coca-cola</p> <p>Coca-cola</p>
<p>Beignet Chocolat</p> <p>Beignet Chocolat</p>
</div> </div>
<h1 id="txtcom2">Sandwich 2</h1 id="txtcom1">
<div class="commis2"> <div class="commis2">
<h1>Commande 2</h1> <h1>Commande 2</h1>
<p>Sandwich dinde - jambon</p> <p>Sandwich dinde - jambon</p>
@ -42,7 +40,6 @@
<p>Coca-cola</p> <p>Coca-cola</p>
<p>Beignet Chocolat</p> <p>Beignet Chocolat</p>
</div> </div>
<h1 id="txtcom3">Sandwich 3</h1 id="txtcom1">
<div class="commis3"> <div class="commis3">
<h1>Commande 3</h1> <h1>Commande 3</h1>
<p>Sandwich dinde - jambon</p> <p>Sandwich dinde - jambon</p>
@ -131,14 +128,14 @@
<!--===============================================================================================--> <!--===============================================================================================-->
<script src="../static/vendor/jquery/jquery-3.2.1.min.js"></script> <script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================--> <!--===============================================================================================-->
<script src="../static/vendor/bootstrap/js/popper.js"></script> <script src="vendor/bootstrap/js/popper.js"></script>
<script src="../static/vendor/bootstrap/js/bootstrap.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================--> <!--===============================================================================================-->
<script src="../static/vendor/select2/select2.min.js"></script> <script src="vendor/select2/select2.min.js"></script>
<!--===============================================================================================--> <!--===============================================================================================-->
<script src="../static/js/main.js"></script> <script src="js/main.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics --> <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-23581568-13"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-23581568-13"></script>

View file

@ -62,10 +62,7 @@
<p></p> <p></p>
<p></p> <p></p>
<p></p> <p></p>
<div class="no-margin"> <input id="user" type="text" placeholder="Username">
<input type="checkbox" checked name="paiement" id="payer">
<label for="payer">Payée</label>
</div>
<button class="validation" type="submit">Valider</button> <button class="validation" type="submit">Valider</button>
<h2>3,40€</h2> <h2>3,40€</h2>
@ -79,6 +76,5 @@
<!--===============================================================================================--> <!--===============================================================================================-->
<script src="{{ url_for('static', filename='vendor/jquery/jquery-3.2.1.min.js') }}"></script> <script src="{{ url_for('static', filename='vendor/jquery/jquery-3.2.1.min.js') }}"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js" integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js" integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script>
<!--===============================================================================================-->
<script src="{{ url_for('static', filename='js/pc.js') }}"></script> <script src="{{ url_for('static', filename='js/pc.js') }}"></script>
{% endblock %} {% endblock %}