-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
321 lines (309 loc) · 12 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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Digital Agency Website" />
<meta name="keywords" content="HTML, CSS, JavaScript, Agency, Robotics" />
<meta name="author" content="Michael Williams - Elena Marinaki" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="./favicon.ico" />
<link rel="stylesheet" href="style.css" />
<script defer src="script.js"></script>
<script defer src="client.js"></script>
<title>MEA Robotics</title>
</head>
<body>
<header>
<div class="center width-lg row justify-space-between stack-lg">
<!-- ------------ NAVIGATION ------------ -->
<h1 tabindex="0">MEA Robotics</h1>
<ul class="navbar row">
<li><a href="#About">About Us</a></li>
<li><a href="#Team">Our Team</a></li>
<li><a href="#Clients">Clients</a></li>
<li><a href="#Members">Members</a></li>
<li><a href="#Socials">Let's connect!</a></li>
</ul>
</div>
<!-- <div class="center"></div> -->
</header>
<main class="stack-xxl">
<!-- ------------ ABOUT SECTION ------------ -->
<section id="About">
<div class="row center width-lg stack-md">
<img src="images/robot-camera.jpg" alt="Robot Camera" />
<div>
<h2>About MEA Robotics</h2>
<p>
MEA Robotics was founded in 2021 by Michael Williams and Elena
Marinaki to provide modern solutions to the rising demands of
everyday life. An innovative agency with the most technologically
advanced team members, ready to cater every need!
</p>
</div>
</div>
</section>
<!-- ------------ TEAM MEMBERS ------------ -->
<section id="Team" class="center width-md stack-md">
<div class="center width-md stack-lg">
<h2>Meet our team members!</h2>
</div>
<ul class="grid" id="members-list">
<li>
<div class="member stack-md">
<img src="images/Hom-3hpl.jpg" alt="Colorful Robot - Herbie" />
<h3>Meet Herbie the Home Helper!</h3>
<p>
A classic choice and one of our most popular members,
<strong>Herbie</strong> is here to help you with everyday
chores! From cooking and to tiding up to fixing home
malfunctions, it is the assistant that came here to stay!
</p>
</div>
</li>
<li>
<div class="member stack-md">
<img src="images/Sch-3dlr.jpg" alt="BB8 as Scarlett" />
<h3>Meet Scarlett the Scheduler!</h3>
<p>
The modern solution to balancing personal and work life!
<strong>Scarlett</strong> creates the perfect schedule for you,
manages the correspondence you want, and takes of your tasks.
Because time is not money, it's life!
</p>
</div>
</li>
<li>
<div class="member stack-md">
<img src="images/Shop-P3R.jpg" alt="Fashionable Robot - Shane" />
<h3>Meet Shane the Shopper!</h3>
<p>
Either personal or owned by up to 3 different households,
<strong>Shane</strong> takes care of your shopping list. Running
out of groceries or want to buy a new pair of headphones?
Consider it done!
</p>
</div>
</li>
<li>
<div class="member stack-md">
<img src="images/VS-ua1.jpg" alt="C-3PO as Vivian" />
<h3>Meet Vivian the Visual Assistant!</h3>
<p>
The ultimate companion for users with impaired eyesight!
<strong>Vivian</strong> is equipped with the latest advances of
AI, adapts to your habits, and assists you in the most efficient
and discreet way - from reading, to navigating the city!
</p>
</div>
</li>
<li>
<div class="member stack-md">
<img src="images/Doc-tR.jpg" alt="Friendly Robot - Chiron" />
<h3>Meet Chiron the Doctor!</h3>
<p>
For all your medical needs,
<strong>Chiron</strong> can be personal or owned by up to 3
different households. It helps diagnosing medical issues fast
and reliably and communicates everything with your GP!
</p>
</div>
</li>
<li>
<div class="member stack-md">
<img src="images/Ent3r-tNr.jpg" alt="Pianist Robot - Enzo" />
<h3>Meet Enzo the Entertainer!</h3>
<p>
Planning an event and you have run out of ideas? Worry not!
<strong>Enzo</strong> comes to the rescue and takes care of
everything. As skilled a pianist as a potential comedian, Enzo
is here to steal the show!
</p>
</div>
</li>
<!-- ----------------------------- NEW MEMBER TEMPLATE ----------------------------- -->
<template id="new-member">
<li>
<div class="member stack-md">
<img
alt=""
class="member-avatar"
width="200"
onchange="loadFile(event)"
/>
<h3 class="member-title"></h3>
<p></p>
</div>
</li>
</template>
</ul>
</section>
</main>
<!-- ----------------------------- CLIENT AREA ----------------------------- -->
<section id ="Clients" class="client-area center width-md stack-lg">
<h2>Get your own MEA Robot!</h2>
<form action="" class="center stack-lg" id = "client-form">
<article class="center stack-md">
<h3>Client Info</h3>
<!-- --------------------- name -->
<section>
<section>
<label for="client-name">Name/ Company Name:</label>
<div class="error-text hide">Please enter a valid name (between 3 and 20 characters).</div>
</section>
<input
type="text"
id="client-name"
placeholder="e.g John Smith"
required
/>
</section>
<!-- --------------------- email -->
<section>
<section>
<label for="client-email">E-mail address:</label>
<div class="error-text hide">Enter a valid email address!</div>
<input type="email" id="client-email" size="30" required />
</section>
</section>
<!-- --------------------- Which robot? -->
<section>
Select your desired robot:
<select id="robot">
<!-- <option value="none">Choose here</option> -->
<option value="Herbie the Home Helper">Herbie</option>
<option value="Scarlett the Scheduler">Scarlett</option>
<option value="Shane the Shopper">Shane</option>
<option value="Vivian the Visual Assistant">Vivian</option>
<option value="Chiron the Doctor">Chiron</option>
<option value="Enzo the Entertainer">Enzo</option>
</select>
</section>
<!-- --------------------- What would you like the robot to do -->
<section>
<section>
<label for="request">What would you like the robot to do?</label>
<div class="error-text hide">Too many characters! Only 200 characters allowed</div>
</section>
<textarea
name="request"
id="request"
placeholder="max 200 characters"
cols="65"
rows="7"
></textarea>
</section>
</article>
<button type="button" id="button">Create inquiry</button>
</form>
<section id = "newReq">
<!-- <h2>Request recieved:</h2> -->
<div id="new-client"></div>
</section>
<template id = "review-client">
<header>Request received:</header>
<h2 id = "formName">Hello </h2>
<h3 id = "formEmail">Your email is: </h3>
<h1 id = "formRobot">Your robot: </h1>
<p id = "formReq"><b>What you would like the robot to do:</b> </p>
<h4>Thanks for choosing MEA Robotics! We'll be in touch soon! <span class = "waving-hand">👋</span></h4>
</template>
</section>
<!-- ----------------------------- MEMBERS AREA ----------------------------- -->
<section id="Members" class="members-area member center width-md stack-lg">
<h2>Enter our team!</h2>
<form class="center stack-lg">
<article class="center stack-md">
<h3>Tell us a few things about you</h3>
<!-- --------------------- name -->
<div>
<div class="row">
<label for="name">Member Name:</label>
<div class="span-text hide">use between 3 and 20 characters!</div>
</div>
<input
type="text"
id="name"
placeholder="3-20 characters"
required
/>
</div>
<!-- --------------------- avatar -->
<div>
<label for="avatar">Please upload your avatar:</label>
<input
type="file"
id="avatar"
name="avatar"
accept="image/png, image/jpeg"
/>
</div>
<!-- --------------------- description -->
<div>
<div id="desc-label" class="row">
<label for="description">Please add your description:</label>
<div class="span-text hide">max 149 characters</div>
</div>
<textarea
name="description"
id="description"
placeholder="max 149 characters"
cols="65"
rows="7"
></textarea>
</div>
</article>
<article class="center stack-md">
<h3>Please enter your login details</h3>
<!-- --------------------- email -->
<div>
<div class="row">
<label for="email">E-mail address:</label>
<div class="span-text hide">enter a valid email address</div>
</div>
<input type="email" id="email" size="30" required />
</div>
<!-- --------------------- password -->
<div>
<div class="row">
<label for="pass">Password:</label>
<div class="span-text hide">min 8 characters</div>
</div>
<input
type="password"
id="pass"
name="password"
minlength="8"
required
/>
</div>
</article>
<div>
<button type="button" id="member-submit">Submit</button>
</div>
</form>
</section>
<!-- ----------------------------- F O O T E R ----------------------------- -->
<footer id="Socials">
<!-- ------------ SOCIALS ------------ -->
<!-- <div class="center width-md stack-md">
<h2>Let's connect!</h2>
</div> -->
<ul class="center row gap-lg justify-space-between">
<li class="links"><img src="socials/twitter.svg" alt="twitter" /></li>
<li class="links">
<img src="socials/instagram.svg" alt="instagram" />
</li>
<li class="links">
<a
href="https://github.com/fac22/Michael-Elena-Agency"
target="_blank"
><img src="socials/github.svg" alt="github"
/></a>
</li>
<li class="links"><img src="socials/youtube.svg" alt="youtube" /></li>
</ul>
</footer>
</body>
</html>