-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
162 lines (155 loc) · 9.93 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, shrink-to-fit=no">
<title>Icons</title>
<link rel="stylesheet" href="design/Main.css" />
<script type="module" src="source/Main.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,1,0" />
</head>
<body class="light-mode">
<header>
<section class="title" data-action="open-select-project">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path d="M280-160v-441q0-33 24-56t57-23h439q33 0 56.5 23.5T880-600v320L680-80H360q-33 0-56.5-23.5T280-160ZM81-710q-6-33 13-59.5t52-32.5l434-77q33-6 59.5 13t32.5 52l10 54H360q-66 0-113 47t-47 113v382q-16-9-27.5-24T158-276L81-710Zm719 390H640v160l160-160Z"/>
</svg>
<h1>Icons</h1>
</section>
<section class="card search">
<input type="text" name="search" placeholder="Search icon ..." />
<div class="action clear-search" data-action="clear-search">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/>
</svg>
</div>
<div class="action" data-action="search-icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/>
</svg>
</div>
<div class="action">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path d="M440-120v-240h80v80h320v80H520v80h-80Zm-320-80v-80h240v80H120Zm160-160v-80H120v-80h160v-80h80v240h-80Zm160-80v-80h400v80H440Zm160-160v-240h80v80h160v80H680v80h-80Zm-480-80v-80h400v80H120Z"/>
</svg>
</div>
<div class="action">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/>
</svg>
</div>
</section>
<section class="light-dark card">
<div class="light action selected" data-action="light-mode">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path d="M480-280q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM80-440q-17 0-28.5-11.5T40-480q0-17 11.5-28.5T80-520h80q17 0 28.5 11.5T200-480q0 17-11.5 28.5T160-440H80Zm720 0q-17 0-28.5-11.5T760-480q0-17 11.5-28.5T800-520h80q17 0 28.5 11.5T920-480q0 17-11.5 28.5T880-440h-80ZM480-760q-17 0-28.5-11.5T440-800v-80q0-17 11.5-28.5T480-920q17 0 28.5 11.5T520-880v80q0 17-11.5 28.5T480-760Zm0 720q-17 0-28.5-11.5T440-80v-80q0-17 11.5-28.5T480-200q17 0 28.5 11.5T520-160v80q0 17-11.5 28.5T480-40ZM226-678l-43-42q-12-11-11.5-28t11.5-29q12-12 29-12t28 12l42 43q11 12 11 28t-11 28q-11 12-27.5 11.5T226-678Zm494 495-42-43q-11-12-11-28.5t11-27.5q11-12 27.5-11.5T734-282l43 42q12 11 11.5 28T777-183q-12 12-29 12t-28-12Zm-42-495q-12-11-11.5-27.5T678-734l42-43q11-12 28-11.5t29 11.5q12 12 12 29t-12 28l-43 42q-12 11-28 11t-28-11ZM183-183q-12-12-12-29t12-28l43-42q12-11 28.5-11t27.5 11q12 11 11.5 27.5T282-226l-42 43q-11 12-28 11.5T183-183Z"/>
</svg>
</div>
<div class="dark action" data-action="dark-mode">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Z"/>
</svg>
</div>
</section>
</header>
<main style="display:none">
<section class="mine card">
<h2>My Icons</h2>
<ol class="icons"></ol>
<div class="empty">
<p>(^-^*)</p>
<p>Search for icons and add them.</p>
</div>
</section>
<section class="results card" style="display:none">
<h2>Icons Found</h2>
<ol class="icons"></ol>
<div class="empty">
<p>(^-^*)</p>
<p>There are no icons for the searched text.</p>
</div>
</section>
</main>
<section>
<div class="select-project backdrop" data-dialog="select-project" style="display:none">
<dialog open>
<h2>Select a Project</h2>
<p class="select-empty">Use the button bellow to add a new Project.</p>
<ol class="select-list"></ol>
<button class="btn btn-fill" data-action="open-add-project">Add Project</button>
<a href="#" class="close" data-action="close-select-project"></a>
</dialog>
</div>
<div class="backdrop important" data-dialog="edit-project" style="display:none">
<dialog open>
<h2>Edit Project</h2>
<p>Name the Project and optionally import the icons from a json file.</p>
<div class="field" data-field="name">
<label>Name</label>
<input type="text" name="name" />
<div class="error" data-error="name">You must complete de project name.</div>
</div>
<div class="field file-input project-file" data-field="file">
<section>
<div>
<label>Icons File</label>
<div class="file-name"></div>
</div>
<div>
<a href="#" class="close" data-action="remove-file"></a>
<button class="btn" data-action="upload-file">Upload File</button>
</div>
</section>
<div class="error" data-error="json">The file must be a valid JSON file.</div>
</div>
<div class="field project-position" data-field="position">
<label>Position</label>
<input type="number" name="position" />
</div>
<button class="btn btn-fill dialog-btn" data-action="edit-project"></button>
<button class="btn" data-action="close-edit-project">Cancel</button>
<a href="#" class="close" data-action="close-edit-project"></a>
</dialog>
</div>
<div class="backdrop important" data-dialog="delete-project" style="display:none">
<dialog open>
<h2>Delete Project</h2>
<p class="select-empty">Do you really want to delete the selected Project?</p>
<button class="btn btn-fill" data-action="delete-project">Delete</button>
<button class="btn" data-action="close-delete-project">Cancel</button>
<a href="#" class="close" data-action="close-delete-project"></a>
</dialog>
</div>
<div class="edit-icon backdrop important" data-dialog="edit-icon" style="display:none">
<dialog open>
<h2>Add icon</h2>
<div class="icon selected">
<span class="icon-icon material-symbols-outlined"></span>
<span class="icon-name"></span>
</div>
<p>Name the icon.</p>
<div class="field" data-field="name">
<label>Name</label>
<input type="text" name="name" />
<div class="error" data-error="empty">You must complete de icon name.</div>
<div class="error" data-error="invalid">The name must only contain the letters a-z and -.</div>
<div class="error" data-error="repeated">There is another icon with the given name.</div>
</div>
<button class="btn btn-fill dialog-btn" data-action="edit-icon"></button>
<button class="btn btn-fill delete-btn" data-action="open-delete-icon">Delete</button>
<button class="btn" data-action="close-edit-icon">Cancel</button>
<a href="#" class="close" data-action="close-edit-icon"></a>
</dialog>
</div>
<div class="backdrop important" data-dialog="delete-icon" style="display:none">
<dialog open>
<h2>Delete Icon</h2>
<p class="select-empty">Do you really want to delete the selected Icon?</p>
<button class="btn btn-fill" data-action="delete-icon">Delete</button>
<button class="btn" data-action="close-delete-icon">Cancel</button>
<a href="#" class="close" data-action="close-delete-icon"></a>
</dialog>
</div>
</section>
</body>
</html>