plansza init

This commit is contained in:
Wojciech Łukasik 2020-04-04 22:44:19 +02:00
parent 5babc3e7cd
commit 3a0c93293b
3 changed files with 190 additions and 0 deletions

109
frontend/index.html Normal file
View File

@ -0,0 +1,109 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inteligentny wózek</title>
<link type="text/css" rel="stylesheet" href="styles.css">
<script type="text/javascript" src="script.js">
</script>
</head>
<body onload="start()">
<div class="container">
<div class="plansza">
<div class="row" id="row-0">
<div class="pole" id="0-0"> </div>
<div class="pole" id="0-1"> </div>
<div class="pole" id="0-2"> </div>
<div class="pole" id="0-3"> </div>
<div class="pole" id="0-4"> </div>
<div class="pole" id="0-5"> </div>
<div class="pole" id="0-6"> </div>
<div class="pole" id="0-7"> </div>
<div class="pole" id="0-8"> </div>
<div class="pole" id="0-9"> </div>
<div class="pole" id="0-10"> </div>
</div>
<div class="row" id="row-1">
<div class="pole" id="1-0"> </div>
<div class="pole" id="1-1"> </div>
<div class="pole" id="1-2"> </div>
<div class="pole" id="1-3"> </div>
<div class="pole" id="1-4"> </div>
<div class="pole" id="1-5"> </div>
<div class="pole" id="1-6"> </div>
<div class="pole" id="1-7"> </div>
<div class="pole" id="1-8"> </div>
<div class="pole" id="1-9"> </div>
<div class="pole" id="1-10"> </div>
</div>
<div class="row" id="row-2">
<div class="pole" id="2-0"> </div>
<div class="pole" id="2-1"> </div>
<div class="pole" id="2-2"> </div>
<div class="pole" id="2-3"> </div>
<div class="pole" id="2-4"> </div>
<div class="pole" id="2-5"> </div>
<div class="pole" id="2-6"> </div>
<div class="pole" id="2-7"> </div>
<div class="pole" id="2-8"> </div>
<div class="pole" id="2-9"> </div>
<div class="pole" id="2-10"> </div>
</div>
<div class="row" id="row-3">
<div class="pole" id="3-0"> </div>
<div class="pole" id="3-1"> </div>
<div class="pole" id="3-2"> </div>
<div class="pole" id="3-3"> </div>
<div class="pole" id="3-4"> </div>
<div class="pole" id="3-5"> </div>
<div class="pole" id="3-6"> </div>
<div class="pole" id="3-7"> </div>
<div class="pole" id="3-8"> </div>
<div class="pole" id="3-9"> </div>
<div class="pole" id="3-10"> </div>
</div>
<div class="row" id="row-4">
<div class="pole" id="4-0"> </div>
<div class="pole" id="4-1"> </div>
<div class="pole" id="4-2"> </div>
<div class="pole" id="4-3"> </div>
<div class="pole" id="4-4"> </div>
<div class="pole" id="4-5"> </div>
<div class="pole" id="4-6"> </div>
<div class="pole" id="4-7"> </div>
<div class="pole" id="4-8"> </div>
<div class="pole" id="4-9"> </div>
<div class="pole" id="4-10"> </div>
</div>
<div class="row" id="row-5">
<div class="pole" id="5-0"> </div>
<div class="pole" id="5-1"> </div>
<div class="pole" id="5-2"> </div>
<div class="pole" id="5-3"> </div>
<div class="pole" id="5-4"> </div>
<div class="pole" id="5-5"> </div>
<div class="pole" id="5-6"> </div>
<div class="pole" id="5-7"> </div>
<div class="pole" id="5-8"> </div>
<div class="pole" id="5-9"> </div>
<div class="pole" id="5-10"> </div>
</div>
<div class="row" id="row-6">
<div class="pole" id="6-0"> </div>
<div class="pole" id="6-1"> </div>
<div class="pole" id="6-2"> </div>
<div class="pole" id="6-3"> </div>
<div class="pole" id="6-4"> </div>
<div class="pole" id="6-5"> </div>
<div class="pole" id="6-6"> </div>
<div class="pole" id="6-7"> </div>
<div class="pole" id="6-8"> </div>
<div class="pole" id="6-9"> </div>
<div class="pole" id="6-10"> </div>
</div>
</div>
</div>
</body>
</html>

24
frontend/script.js Normal file
View File

@ -0,0 +1,24 @@
var regaly = ['1-1', '1-3', '1-4', '1-6', '1-7', '1-9', '2-1', '2-9', '3-3', '3-4', '3-6', '3-7', '4-1', '4-9', '5-1', '5-3', '5-4', '5-6', '5-7', '5-9']
function start(){
ponumerujPola();
pokolorujRegaly();
}
function pokolorujRegaly(){
let x;
for(x = 0; x < regaly.length; x++){
document.getElementById(regaly[x]).className = 'regal';
}
}
function ponumerujPola(){
let x,y
for(x = 0; x < 7; x++){
for(y = 0; y < 11; y++){
id = x.toString() + "-" + y.toString();
document.getElementById(id).innerHTML = id;
}
}
}

57
frontend/styles.css Normal file
View File

@ -0,0 +1,57 @@
.container{
width: 100%;
height: 100%;
position: absolute;
background-color: grey;
}
.plansza{
width: 1100px;
height:700px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: lightyellow;
}
.row{
width: 1100px;
height: 100px;
display: flex;
flex-direction: row;
}
.pole{
height: 100px;
width: 100px;
background-color: lightyellow;
border-color: black;
border-width: 1px;
border-style: solid;
color: gray;
font-size: 30px;
font-weight: 500;
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.regal{
height: 100px;
width: 100px;
color: lightyellow;
background-color: darkslategrey;
border-color: black;
border-width: 1px;
border-style: solid;
font-size: 30px;
font-weight: 500;
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}