body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
.warehouse {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #ddd;
}
.shelf {
position: absolute;
top: 10%;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 20px;
background-color: #999;
}
.item {
position: absolute;
top: 5px;
width: 30px;
height: 30px;
background-color: #ffcc00;
border-radius: 5px;
}
/* Placer varer på hylden */
.item1 { left: 20%; }
.item2 { left: 40%; }
.item3 { left: 60%; }
.item4 { left: 80%; }
.person {
position: absolute;
left: 5%;
top: 50%;
width: 50px;
height: 100px;
background-color: #3498db;
border-radius: 10px;
animation: walk 8s infinite;
}
/* Person animation */
@keyframes walk {
0% { left: 5%; }
25% { left: 30%; }
50% { left: 55%; }
75% { left: 80%; }
100% { left: 5%; }
}
.scanner {
position: absolute;
top: 70%;
left: 55%;
width: 20px;
height: 40px;
background-color: #000;
animation: scan 8s infinite;
}
/* Scanner animation */
@keyframes scan {
0%, 100% { opacity: 0; }
50% { opacity: 1; }
}
