prototyp planszy #1
109
frontend/index.html
Normal file
109
frontend/index.html
Normal 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
24
frontend/script.js
Normal 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
57
frontend/styles.css
Normal 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;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user