-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
102 lines (101 loc) · 4.64 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="./client/public/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Word List</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Mukta:wght@200;300;400;500;600;700;800&display=swap"
rel="stylesheet"
/>
<link href="./client/styles/index.css" rel="stylesheet" />
</head>
<body>
<!-- page container -->
<div class="page">
<!-- intro section -->
<div class="intro">
<h1>List Maker</h1>
<p>
Welcome! In this page you can create and edit lists. <br />
Please type a word in the box below. <br />Press the 'add' button to
add your word to the list.<br />Use the 'remove' button to remove
words from your list. <br /><br />
Use the sort drop bar to edit the order of words on your list.<br />
have fun!
</p>
</div>
<!-- end of intro section -->
<!-- input section -->
<div id="input" class="input">
<h2 class="input__head">Enter Word</h2>
<form id="input-form">
<input
id="box"
class="input__box"
name="text"
placeholder="New Word"
/>
<div class="buttons">
<input class="input__add" type="button" value="add" />
<input class="input__remove" type="button" value="remove" />
</div>
</form>
<code id="warnings" class="warning"></code>
<br />
<!-- sort: -->
<div class="opt">
<label class="opt__lbl" for="select">Sort by:</label>
<select class="input__sort" id="sort-type">
<option value="oldest">old -> new</option>
<option value="newest">new -> old</option>
<option value="a">a -> z</option>
<option value="z">z -> a</option>
<option value="shortest">short -> long</option>
<option value="longest">long -> short</option>
</select>
</div>
<h2 class="input__lihead">Your List:</h2>
<div class="input__list" id="list-container"></div>
</div>
<!-- end of input section -->
<!-- footer -->
<div class="footer">
<p class="footer__p">
Thank you for visiting.<br />
Please check out my code on Github
</p>
<a href="https://github.com/lab-antwerp-1/aviv-soc-wordlist"
><svg
class="icon"
width="78"
height="73"
viewBox="0 0 78 73"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
class="icon__colour"
fill-rule="evenodd"
clip-rule="evenodd"
d="M39 0C17.4525 0 0 16.7469 0 37.4232C0 53.983 11.1637 67.9699 26.6662 72.9285C28.6162 73.256 29.3475 72.1333 29.3475 71.1509C29.3475 70.2621 29.2988 67.315 29.2988 64.1808C19.5 65.9117 16.965 61.8887 16.185 59.7836C15.7463 58.7077 13.845 55.3864 12.1875 54.4976C10.8225 53.7959 8.8725 52.0651 12.1387 52.0183C15.21 51.9715 17.4037 54.7315 18.135 55.8542C21.645 61.5144 27.2512 59.9239 29.4937 58.9416C29.835 56.5091 30.8588 54.8718 31.98 53.9362C23.3025 53.0006 14.235 49.7729 14.235 35.4585C14.235 31.3887 15.7463 28.0206 18.2325 25.401C17.8425 24.4654 16.4775 20.6296 18.6225 15.4839C18.6225 15.4839 21.8887 14.5015 29.3475 19.3197C32.4675 18.4777 35.7825 18.0567 39.0975 18.0567C42.4125 18.0567 45.7275 18.4777 48.8475 19.3197C56.3062 14.4547 59.5725 15.4839 59.5725 15.4839C61.7175 20.6296 60.3525 24.4654 59.9625 25.401C62.4488 28.0206 63.96 31.3419 63.96 35.4585C63.96 49.8197 54.8438 53.0006 46.1662 53.9362C47.58 55.1057 48.7988 57.3511 48.7988 60.8595C48.7988 65.8649 48.75 69.8879 48.75 71.1509C48.75 72.1333 49.4812 73.3027 51.4312 72.9285C59.1733 70.4203 65.9008 65.6456 70.6669 59.2764C75.433 52.9072 77.9977 45.2643 78 37.4232C78 16.7469 60.5475 0 39 0Z"
fill="#8D9497"
/>
</svg>
</a>
</div>
<!-- end of footer -->
<!-- end of page container -->
</div>
<script type="module" src="./client/src/init/index.js"></script>
</body>
</html>