Skip to content

Commit b5ecf0b

Browse files
yohan-ocyohan-oc
committed
mode mock design added
1 parent d3e3c6b commit b5ecf0b

File tree

13 files changed

+164
-1
lines changed

13 files changed

+164
-1
lines changed

‎designs/modes/desktop-imaged.png‎

1.25 KB
Loading

‎designs/modes/desktop.png‎

1023 Bytes
Loading

‎designs/modes/laptop-imaged.png‎

1.58 KB
Loading

‎designs/modes/laptop.png‎

999 Bytes
Loading

‎designs/modes/logo.png‎

54.7 KB
Loading

‎designs/modes/logo_new.png‎

7.32 KB
Loading

‎designs/modes/modes.html‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Select a Mode - Turing Trust</title>
7+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
9+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
10+
<style>
11+
body {
12+
background-color: #f0f2f5;
13+
}
14+
.navbar {
15+
background-color: #0b4c62;
16+
}
17+
.navbar-brand {
18+
color: white;
19+
font-weight: bold;
20+
}
21+
.logout {
22+
color: white;
23+
text-decoration: none;
24+
}
25+
.container {
26+
margin-top: 40px;
27+
}
28+
.section-title {
29+
color: #0b4c62;
30+
/*font-weight: bold;*/
31+
margin-bottom: 10px;
32+
}
33+
.card {
34+
text-align: center;
35+
padding: 20px;
36+
border-radius: 10px;
37+
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
38+
}
39+
.btn-outline-success {
40+
border-color: #04A27D;
41+
color: #04A27D;
42+
}
43+
.btn-outline-success:hover {
44+
background-color: #04A27D;
45+
color: white;
46+
}
47+
.card {
48+
border-bottom-width: 3px;
49+
border-bottom-color: #04A27D;
50+
/*width: 216px; !* Adjust as needed *!*/
51+
/*height: 200px;*/
52+
}
53+
54+
</style>
55+
</head>
56+
<body>
57+
58+
<nav class="navbar navbar-dark px-4">
59+
<a class="navbar-brand" href="#">
60+
<img src="logo_new.png" alt="Turing Trust Logo" height="30">
61+
</a>
62+
<a class="logout" href="#"><i class="bi bi-box-arrow-left"></i> Log out</a>
63+
</nav>
64+
65+
<div class="container">
66+
<h4 class="section-title">Select a mode</h4>
67+
<p style="color: #075976;">Begin palleting or by selecting a mode below.</p>
68+
69+
<div class="row">
70+
<div class="col-md-2">
71+
<h5 class="section-title">Palleting</h5>
72+
</div>
73+
<div class="col-md-2">
74+
<div class="card">
75+
<img src="work-in-progress.png" alt="Work in Progress" width="50" class="d-block mx-auto">
76+
<br/><p>Work in progress palleting</p>
77+
<button class="btn btn-outline-success w-100">Start →</button>
78+
</div>
79+
</div>
80+
<div class="col-md-2">
81+
<div class="card">
82+
<img src="shipping-box.png" alt="Shipping Box" width="50" class="d-block mx-auto">
83+
<br/><p>Shipping box palleting</p>
84+
<button class="btn btn-outline-success w-100">Start →</button>
85+
</div>
86+
</div>
87+
</div>
88+
89+
<div class="row mt-4">
90+
<div class="col-md-2">
91+
<h5 class="section-title">Boxing</h5>
92+
</div>
93+
94+
<div class="col-md-2">
95+
<div class="card">
96+
<img src="desktop.png" alt="Wiped Desktops" width="50" class="d-block mx-auto">
97+
<br/><p>Boinlxing (Wiped) Desktops for shipping</p>
98+
<button class="btn btn-outline-success w-100">Start →</button>
99+
</div>
100+
</div>
101+
102+
<div class="col-md-2">
103+
<div class="card">
104+
<img src="desktop-imaged.png" alt="Imaged Desktops" width="50" class="d-block mx-auto">
105+
<br/><p>Boxing (Imaged) Desktops for shipping</p>
106+
<button class="btn btn-outline-success w-100">Start →</button>
107+
</div>
108+
</div>
109+
110+
<div class="col-md-2">
111+
<div class="card">
112+
<img src="laptop.png" alt="Wiped Laptops" width="50" class="d-block mx-auto">
113+
<br/>
114+
<p>Boxing (Wiped) Laptops for shipping</p>
115+
<br/>
116+
<button class="btn btn-outline-success w-100">Start →</button>
117+
</div>
118+
</div>
119+
120+
<div class="col-md-2">
121+
<div class="card">
122+
<img src="laptop-imaged.png" alt="Imaged Laptops" width="50" class="d-block mx-auto">
123+
<br/><p>Boxing (Imaged) Laptops for shipping</p><br/>
124+
<button class="btn btn-outline-success w-100">Start →</button>
125+
</div>
126+
</div>
127+
128+
</div>
129+
130+
<div class="row mt-4 mb-5">
131+
<div class="col-md-2">
132+
133+
</div>
134+
135+
<div class="col-md-2">
136+
<div class="card">
137+
<img src="monitor.png" alt="Monitors" width="50" class="d-block mx-auto">
138+
<br/><p>Boxing monitors for shipping</p><br/>
139+
<button class="btn btn-outline-success w-100">Start →</button>
140+
</div>
141+
</div>
142+
143+
<div class="col-md-2">
144+
<div class="card">
145+
<img src="phone.png" alt="Phones and Laptops" width="50" class="d-block mx-auto">
146+
<br/><p>Boxing (Wiped) phones and laptops for shipping</p>
147+
<button class="btn btn-outline-success w-100">Start →</button>
148+
</div>
149+
</div>
150+
151+
<div class="col-md-2">
152+
<div class="card">
153+
<img src="money.png" alt="For Sale" width="50" class="d-block mx-auto">
154+
<br/><p>Boxing Desktops and Laptops for sale</p><br/>
155+
<button class="btn btn-outline-success w-100">Start →</button>
156+
</div>
157+
</div>
158+
</div>
159+
160+
</div>
161+
</body>
162+
</html>

‎designs/modes/money.png‎

1.48 KB
Loading

‎designs/modes/monitor.png‎

1.39 KB
Loading

‎designs/modes/phone.png‎

1.64 KB
Loading

0 commit comments

Comments
 (0)