-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
117 lines (113 loc) · 4.49 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!--!
@author Mohamed Muntasir
@link https://github.com/devmotheg
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" />
<link rel="stylesheet" href="css/styles.css" />
<title>Meadowfield Robots Visualizer</title>
</head>
<body>
<!-- Main -->
<main>
<!-- Tutorial -->
<div class="tutorial">
<div class="tutorial__page"></div>
</div>
<!-- Menu -->
<div class="menu">
<!-- Container -->
<div class="menu__background">
<div class="container">
<div class="menu__nav">
<h1>meadowfield robots Visualizer</h1>
<button class="menu__compare">compare <i class="fas fa-robot"></i></button>
<div class="menu__parcels">
<p><i class="fas fa-box"></i> count:
<span class="menu__parcels-count"></span>
</p>
<div class="menu__parcels-buttons">
<button class="up">INCREAMENT</button>
<button class="down">DECREAMENT</button>
</div>
</div>
<a href="https://github.com/devmotheg" class="my-github" target="_blank"><i class="fab fa-github"></i>
Mohamed Muntasir</a>
</div>
</div>
</div>
<div class="container">
<div class="menu__selection">
<div class="menu__selection-random">
<input type="checkbox" name="robot" id="random" data-class="RandomRobot" />
<label for="random" data-for="random"><span>random <i class="fas fa-robot"></i></span></label>
</div>
<div class="menu__selection-mail">
<input type="checkbox" name="robot" id="mail" data-class="MailRouteRobot" />
<label for="mail" data-for="mail"><span>mail route <i class="fas fa-robot"></i></span></label>
</div>
<div class="menu__selection-goal">
<input type="checkbox" name="robot" id="goal" data-class="GoalOrientedRobot" />
<label for="goal" data-for="goal"><span>goal oriented <i class="fas fa-robot"></i></span></label>
</div>
<div class="menu__selection-efficient">
<input type="checkbox" name="robot" id="efficient" data-class="EfficientRobot" />
<label for="efficient" data-for="efficient"><span>efficient <i class="fas fa-robot"></i></span></label>
</div>
</div>
</div>
</div>
<!-- Village -->
<div class="village">
<div class="container">
<div class="village__ranking">
<div class="village__ranking-random">
<div><i class="fas fa-box"></i>
<span class="random-picked item"></span>/<span class="parcels-count"></span>
</div>
<div><i class="fas fa-check-double"></i>
<span class="random-delivered item"></span>/<span class="parcels-count"></span>
</div>
</div>
<div class="village__ranking-mail">
<div><i class="fas fa-box"></i>
<span class="mail-picked item"></span>/<span class="parcels-count"></span>
</div>
<div><i class="fas fa-check-double"></i>
<span class="mail-delivered item"></span>/<span class="parcels-count"></span>
</div>
</div>
<div class="village__ranking-goal">
<div><i class="fas fa-box"></i>
<span class="goal-picked item"></span>/<span class="parcels-count"></span>
</div>
<div><i class="fas fa-check-double"></i>
<span class="goal-delivered item"></span>/<span class="parcels-count"></span>
</div>
</div>
<div class="village__ranking-efficient">
<div><i class="fas fa-box"></i>
<span class="efficient-picked item"></span>/<span class="parcels-count"></span>
</div>
<div><i class="fas fa-check-double"></i>
<span class="efficient-delivered item"></span>/<span class="parcels-count"></span>
</div>
</div>
</div>
<table class="village__map">
<tbody></tbody>
</table>
<div class="village__img">
<img src="./media/village.png" alt="" />
</div>
</div>
</div>
</main>
<script src="js/app.js" type="module"></script>
</body>
</html>