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

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

View file

@ -5,28 +5,27 @@
<meta charset="UTF-8">
<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="../static/css/main.css">
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--===============================================================================================-->
</head>
<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="encours">
<h1 id="txtcom1">Sandwich 1</h1>
<div class="commis1">
<h1>Commande 1</h1>
<p>Sandwich dinde - jambon - tomate</p>
@ -34,7 +33,6 @@
<p>Coca-cola</p>
<p>Beignet Chocolat</p>
</div>
<h1 id="txtcom2">Sandwich 2</h1 id="txtcom1">
<div class="commis2">
<h1>Commande 2</h1>
<p>Sandwich dinde - jambon</p>
@ -42,7 +40,6 @@
<p>Coca-cola</p>
<p>Beignet Chocolat</p>
</div>
<h1 id="txtcom3">Sandwich 3</h1 id="txtcom1">
<div class="commis3">
<h1>Commande 3</h1>
<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="../static/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="vendor/bootstrap/js/popper.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 -->
<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>
<div class="no-margin">
<input type="checkbox" checked name="paiement" id="payer">
<label for="payer">Payée</label>
</div>
<input id="user" type="text" placeholder="Username">
<button class="validation" type="submit">Valider</button>
<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="//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>
{% endblock %}