├── .github
    ├── startpage.gif
    └── startpage.mp4
├── .gitignore
├── LICENSE
├── README.md
├── config.json
├── css
    ├── img
    │   └── jsoneditor-icons.svg
    ├── jsoneditor.min.css
    └── main.css
├── fonts
    ├── woff
    │   ├── JetBrainsMono-Bold-Italic.woff
    │   ├── JetBrainsMono-Bold.woff
    │   ├── JetBrainsMono-ExtraBold-Italic.woff
    │   ├── JetBrainsMono-ExtraBold.woff
    │   ├── JetBrainsMono-Italic.woff
    │   ├── JetBrainsMono-Medium-Italic.woff
    │   ├── JetBrainsMono-Medium.woff
    │   └── JetBrainsMono-Regular.woff
    └── woff2
    │   ├── JetBrainsMono-Bold-Italic.woff2
    │   ├── JetBrainsMono-Bold.woff2
    │   ├── JetBrainsMono-ExtraBold-Italic.woff2
    │   ├── JetBrainsMono-ExtraBold.woff2
    │   ├── JetBrainsMono-Italic.woff2
    │   ├── JetBrainsMono-Medium-Italic.woff2
    │   ├── JetBrainsMono-Medium.woff2
    │   └── JetBrainsMono-Regular.woff2
├── img
    └── icon64.png
├── index.html
├── js
    ├── autocomplete.js
    ├── jsoneditor.min.js
    ├── main.js
    └── settings.js
├── manifest.json
└── scss
    └── main.scss


/.github/startpage.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbdelrhmanNile/startpage-onedark/97a194d962a2be41c4ee30a73186b403e0c4ab2f/.github/startpage.gif


--------------------------------------------------------------------------------
/.github/startpage.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbdelrhmanNile/startpage-onedark/97a194d962a2be41c4ee30a73186b403e0c4ab2f/.github/startpage.mp4


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | web-ext*/*


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) [2020] [Deepjyoti Barman]
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | my fork of [this](https://github.com/deepjyoti30/startpage/) start page
2 | 
3 | i just changed the color palette to onedark,
4 | you will find the documentations and everything on the original repo
5 | # SCREENSHOTS
6 | <img src = "https://i.imgur.com/s5T9dKK.png">
7 | <img src = "https://i.imgur.com/wJagxIv.png">
8 | 


--------------------------------------------------------------------------------
/config.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "squares": [
 3 |     { "name": "media",
 4 |       "color": "#61afef",
 5 |       "links": [
 6 |         { "name": "Spotify", "url": "https://open.spotify.com/" },
 7 |         { "name": "YoutubeMusic", "url": "https://music.youtube.com/" },
 8 |         { "name": "Netflix", "url": "https://netflix.com" },
 9 |         { "name": "Youtube", "url": "https://youtube.com" }
10 |       ]
11 |     },
12 |     { "name": "work",
13 |       "color": "#e06c75",
14 |       "links": [
15 |         { "name": "Github", "url": "https://github.com" },
16 |         { "name": "Heroku", "url": "http://heroku.com/" },
17 |         { "name": "localhost", "url": "http://localhost:8000/" }
18 |       ]
19 |     },
20 |     { "name": "social",
21 |       "color": "#e5c07b",
22 |       "links": [
23 |         { "name": "Reddit", "url": "https://reddit.com" },
24 |         { "name": "Unixporn Love", "url": "https://deepjyoti30.github.io/unixporn-love/" },
25 |         { "name": "r/unixporn", "url": "https://www.reddit.com/r/unixporn/" },
26 |         { "name": "r/mk", "url": "https://www.reddit.com/r/MechanicalKeyboards/" }
27 |       ]
28 |     },
29 |     {
30 |       "name": "Others",
31 |       "color": "#98c379",
32 |       "links": [
33 |         {"name": "Material Colors", "url": "http://materialuicolors.co/"},
34 |         {"name": "Gmail", "url": "http://gmail.com/"},
35 |         {"name": "neo4j Local", "url": "http://localhost:7474/"},
36 |         {"name": "rarbg", "url": "http://rarbg.to"}
37 |       ]
38 |     }
39 |   ],
40 |   "searchEngine":"Brave",
41 |   "user": "Pirate",
42 |   "disableMessage": false,
43 |   "disableDate": false,
44 |   "disableSearchBar": false,
45 |   "disable24Hour": true,
46 |   "disableWeather": false,
47 |   "timeZone": "Africa/Cairo",
48 |   "weatherConf": {
49 |     "location": "Giza Egypt",
50 |     "unit": "cel"
51 |   },
52 |   "settingsIcon": false,
53 |   "style": {
54 |     "backgroundColor": "#282c34",
55 |     "messageColor": "#fff",
56 |     "dateColor": "#c8ccd4",
57 |     "lineColor": "#fff",
58 |     "weatherColor": "#c8ccd4",
59 |     "searchColor": "#c8ccd4",
60 |     "searchBackgroundColor": "#1e222a",
61 |     "squareColor": "#abb2bf",
62 |     "squareBackgroundColor": "#1e222a",
63 |     "autocompleteHighlightBackgroundColor": "#3e4451"
64 |   }
65 | }
66 | 


--------------------------------------------------------------------------------
/css/img/jsoneditor-icons.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2 | <svg
  3 |    xmlns:dc="http://purl.org/dc/elements/1.1/"
  4 |    xmlns:cc="http://creativecommons.org/ns#"
  5 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  6 |    xmlns:svg="http://www.w3.org/2000/svg"
  7 |    xmlns="http://www.w3.org/2000/svg"
  8 |    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
  9 |    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
 10 |    width="240"
 11 |    height="144"
 12 |    id="svg4136"
 13 |    version="1.1"
 14 |    inkscape:version="0.91 r13725"
 15 |    sodipodi:docname="jsoneditor-icons.svg">
 16 |   <title
 17 |      id="title6512">JSON Editor Icons</title>
 18 |   <metadata
 19 |      id="metadata4148">
 20 |     <rdf:RDF>
 21 |       <cc:Work
 22 |          rdf:about="">
 23 |         <dc:format>image/svg+xml</dc:format>
 24 |         <dc:type
 25 |            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
 26 |         <dc:title>JSON Editor Icons</dc:title>
 27 |       </cc:Work>
 28 |     </rdf:RDF>
 29 |   </metadata>
 30 |   <defs
 31 |      id="defs4146" />
 32 |   <sodipodi:namedview
 33 |      pagecolor="#ff63ff"
 34 |      bordercolor="#666666"
 35 |      borderopacity="1"
 36 |      objecttolerance="10"
 37 |      gridtolerance="10"
 38 |      guidetolerance="10"
 39 |      inkscape:pageopacity="0"
 40 |      inkscape:pageshadow="2"
 41 |      inkscape:window-width="1920"
 42 |      inkscape:window-height="1026"
 43 |      id="namedview4144"
 44 |      showgrid="true"
 45 |      inkscape:zoom="4"
 46 |      inkscape:cx="13.229181"
 47 |      inkscape:cy="119.82429"
 48 |      inkscape:window-x="0"
 49 |      inkscape:window-y="0"
 50 |      inkscape:window-maximized="1"
 51 |      inkscape:current-layer="svg4136"
 52 |      showguides="false"
 53 |      borderlayer="false"
 54 |      inkscape:showpageshadow="true"
 55 |      showborder="true">
 56 |     <inkscape:grid
 57 |        type="xygrid"
 58 |        id="grid4640"
 59 |        empspacing="24" />
 60 |   </sodipodi:namedview>
 61 |   <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 62 |   <rect
 63 |      style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0"
 64 |      id="svg_1"
 65 |      height="16"
 66 |      width="16"
 67 |      y="4"
 68 |      x="4" />
 69 |   <rect
 70 |      id="svg_1-7"
 71 |      height="16"
 72 |      width="16"
 73 |      y="3.999995"
 74 |      x="28.000006"
 75 |      style="fill:#ec3f29;fill-opacity:0.94117647;stroke:none;stroke-width:0" />
 76 |   <rect
 77 |      style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0"
 78 |      x="52.000004"
 79 |      y="3.999995"
 80 |      width="16"
 81 |      height="16"
 82 |      id="rect4165" />
 83 |   <rect
 84 |      id="rect4175"
 85 |      height="16"
 86 |      width="16"
 87 |      y="3.9999852"
 88 |      x="172.00002"
 89 |      style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0" />
 90 |   <rect
 91 |      id="rect4175-3"
 92 |      height="16"
 93 |      width="16"
 94 |      y="3.999995"
 95 |      x="196"
 96 |      style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0" />
 97 |   <g
 98 |      id="g4299"
 99 |      style="stroke:none">
100 |     <rect
101 |        x="7.0000048"
102 |        y="10.999998"
103 |        width="9.9999924"
104 |        height="1.9999986"
105 |        id="svg_1-1"
106 |        style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0" />
107 |     <rect
108 |        x="11.000005"
109 |        y="7.0000114"
110 |        width="1.9999955"
111 |        height="9.9999838"
112 |        id="svg_1-1-1"
113 |        style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0" />
114 |   </g>
115 |   <g
116 |      id="g4299-3"
117 |      transform="matrix(0.70710678,-0.70710678,0.70710678,0.70710678,19.029435,12.000001)"
118 |      style="stroke:none">
119 |     <rect
120 |        x="7.0000048"
121 |        y="10.999998"
122 |        width="9.9999924"
123 |        height="1.9999986"
124 |        id="svg_1-1-0"
125 |        style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0" />
126 |     <rect
127 |        x="11.000005"
128 |        y="7.0000114"
129 |        width="1.9999955"
130 |        height="9.9999838"
131 |        id="svg_1-1-1-9"
132 |        style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0" />
133 |   </g>
134 |   <rect
135 |      id="svg_1-7-5"
136 |      height="6.9999905"
137 |      width="6.9999909"
138 |      y="7.0000048"
139 |      x="55.000004"
140 |      style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0" />
141 |   <rect
142 |      style="fill:#ffffff;fill-opacity:1;stroke:#4c4c4c;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
143 |      x="58"
144 |      y="10.00001"
145 |      width="6.9999909"
146 |      height="6.9999905"
147 |      id="rect4354" />
148 |   <rect
149 |      id="svg_1-7-5-7"
150 |      height="6.9999905"
151 |      width="6.9999909"
152 |      y="10.000005"
153 |      x="58.000004"
154 |      style="fill:#ffffff;fill-opacity:1;stroke:#3c80df;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647" />
155 |   <g
156 |      id="g4378">
157 |     <rect
158 |        style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0"
159 |        x="198"
160 |        y="10.999999"
161 |        width="7.9999909"
162 |        height="1.9999965"
163 |        id="svg_1-7-5-3" />
164 |     <rect
165 |        id="rect4374"
166 |        height="1.9999946"
167 |        width="11.999995"
168 |        y="7.0000005"
169 |        x="198"
170 |        style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0" />
171 |     <rect
172 |        id="rect4376"
173 |        height="1.9999995"
174 |        width="3.9999928"
175 |        y="14.999996"
176 |        x="198"
177 |        style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0" />
178 |   </g>
179 |   <g
180 |      transform="matrix(1,0,0,-1,-23.999995,23.999995)"
181 |      id="g4383">
182 |     <rect
183 |        id="rect4385"
184 |        height="1.9999965"
185 |        width="7.9999909"
186 |        y="10.999999"
187 |        x="198"
188 |        style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0" />
189 |     <rect
190 |        style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0"
191 |        x="198"
192 |        y="7.0000005"
193 |        width="11.999995"
194 |        height="1.9999946"
195 |        id="rect4387" />
196 |     <rect
197 |        style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0"
198 |        x="198"
199 |        y="14.999996"
200 |        width="3.9999928"
201 |        height="1.9999995"
202 |        id="rect4389" />
203 |   </g>
204 |   <rect
205 |      style="fill:#4c4c4c;fill-opacity:1;stroke:none"
206 |      id="rect3754-4"
207 |      width="16"
208 |      height="16"
209 |      x="76"
210 |      y="3.9999199" />
211 |   <path
212 |      style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0.2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
213 |      d="m 85.10447,6.0157384 -0.0156,1.4063 c 3.02669,-0.2402 0.33008,3.6507996 2.48438,4.5780996 -2.18694,1.0938 0.49191,4.9069 -2.45313,4.5781 l -0.0156,1.4219 c 5.70828,0.559 1.03264,-5.1005 4.70313,-5.2656 l 0,-1.4063 c -3.61303,-0.027 1.11893,-5.7069996 -4.70313,-5.3124996 z"
214 |      id="path4351"
215 |      inkscape:connector-curvature="0"
216 |      sodipodi:nodetypes="cccccccc" />
217 |   <path
218 |      style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0.2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
219 |      d="m 82.78125,5.9984384 0.0156,1.4063 c -3.02668,-0.2402 -0.33007,3.6506996 -2.48437,4.5780996 2.18694,1.0938 -0.49192,4.9069 2.45312,4.5781 l 0.0156,1.4219 c -5.70827,0.559 -1.03263,-5.1004 -4.70312,-5.2656 l 0,-1.4063 c 3.61303,-0.027 -1.11894,-5.7070996 4.70312,-5.3124996 z"
220 |      id="path4351-9"
221 |      inkscape:connector-curvature="0"
222 |      sodipodi:nodetypes="cccccccc" />
223 |   <rect
224 |      style="fill:#4c4c4c;fill-opacity:1;stroke:none"
225 |      id="rect3754-25"
226 |      width="16"
227 |      height="16"
228 |      x="100"
229 |      y="3.9999199" />
230 |   <path
231 |      style="fill:#ffffff;fill-opacity:1;stroke:none"
232 |      d="m 103.719,5.6719384 0,12.7187996 3.03125,0 0,-1.5313 -1.34375,0 0,-9.6249996 1.375,0 0,-1.5625 z"
233 |      id="path2987"
234 |      inkscape:connector-curvature="0" />
235 |   <path
236 |      style="fill:#ffffff;fill-opacity:1;stroke:none"
237 |      d="m 112.2185,5.6721984 0,12.7187996 -3.03125,0 0,-1.5313 1.34375,0 0,-9.6249996 -1.375,0 0,-1.5625 z"
238 |      id="path2987-1"
239 |      inkscape:connector-curvature="0" />
240 |   <rect
241 |      style="fill:#4c4c4c;fill-opacity:1;stroke:none"
242 |      id="rect3754-73"
243 |      width="16"
244 |      height="16"
245 |      x="124"
246 |      y="3.9999199" />
247 |   <path
248 |      style="fill:#ffffff;fill-opacity:1;stroke:none"
249 |      d="m 126.2824,17.602938 1.78957,0 1.14143,-2.8641 5.65364,0 1.14856,2.8641 1.76565,0 -4.78687,-11.1610996 -1.91903,0 z"
250 |      id="path3780"
251 |      inkscape:connector-curvature="0"
252 |      sodipodi:nodetypes="ccccccccc" />
253 |   <path
254 |      style="fill:#4c4c4c;fill-opacity:1;stroke:none"
255 |      d="m 129.72704,13.478838 4.60852,0.01 -2.30426,-5.5497996 z"
256 |      id="path3782"
257 |      inkscape:connector-curvature="0" />
258 |   <rect
259 |      style="fill:#4c4c4c;fill-opacity:1;stroke:none"
260 |      id="rect3754-35"
261 |      width="16"
262 |      height="16"
263 |      x="148"
264 |      y="3.9999199" />
265 |   <path
266 |      style="fill:#ffffff;fill-opacity:1;stroke:none"
267 |      d="m 156.47655,5.8917384 0,2.1797 0.46093,2.3983996 1.82813,0 0.39844,-2.3983996 0,-2.1797 z"
268 |      id="path5008-2"
269 |      inkscape:connector-curvature="0"
270 |      sodipodi:nodetypes="ccccccc" />
271 |   <path
272 |      style="fill:#ffffff;fill-opacity:1;stroke:none"
273 |      d="m 152.51561,5.8906384 0,2.1797 0.46094,2.3983996 1.82812,0 0.39844,-2.3983996 0,-2.1797 z"
274 |      id="path5008-2-8"
275 |      inkscape:connector-curvature="0"
276 |      sodipodi:nodetypes="ccccccc" />
277 |   <rect
278 |      id="svg_1-7-2"
279 |      height="1.9999961"
280 |      width="11.999996"
281 |      y="64"
282 |      x="54"
283 |      style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0" />
284 |   <rect
285 |      id="svg_1-7-2-2"
286 |      height="2.9999905"
287 |      width="2.9999907"
288 |      y="52"
289 |      x="80.000008"
290 |      style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0" />
291 |   <rect
292 |      style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
293 |      x="85.000008"
294 |      y="52"
295 |      width="2.9999907"
296 |      height="2.9999905"
297 |      id="rect4561" />
298 |   <rect
299 |      style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
300 |      x="80.000008"
301 |      y="58"
302 |      width="2.9999907"
303 |      height="2.9999905"
304 |      id="rect4563" />
305 |   <rect
306 |      id="rect4565"
307 |      height="2.9999905"
308 |      width="2.9999907"
309 |      y="58"
310 |      x="85.000008"
311 |      style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0" />
312 |   <rect
313 |      id="rect4567"
314 |      height="2.9999905"
315 |      width="2.9999907"
316 |      y="64"
317 |      x="80.000008"
318 |      style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0" />
319 |   <rect
320 |      style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
321 |      x="85.000008"
322 |      y="64"
323 |      width="2.9999907"
324 |      height="2.9999905"
325 |      id="rect4569" />
326 |   <circle
327 |      style="opacity:1;fill:none;fill-opacity:1;stroke:#4c4c4c;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
328 |      id="path4571"
329 |      cx="110.06081"
330 |      cy="57.939209"
331 |      r="4.7438836" />
332 |   <rect
333 |      style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
334 |      x="116.64566"
335 |      y="-31.79752"
336 |      width="4.229713"
337 |      height="6.4053884"
338 |      id="rect4563-2"
339 |      transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" />
340 |   <path
341 |      style="fill:#4c4c4c;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
342 |      d="M 125,56 138.77027,56.095 132,64 Z"
343 |      id="path4613"
344 |      inkscape:connector-curvature="0"
345 |      sodipodi:nodetypes="cccc" />
346 |   <path
347 |      sodipodi:nodetypes="cccc"
348 |      inkscape:connector-curvature="0"
349 |      id="path4615"
350 |      d="M 149,64 162.77027,63.905 156,56 Z"
351 |      style="fill:#4c4c4c;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
352 |   <rect
353 |      style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
354 |      x="54"
355 |      y="53"
356 |      width="11.999996"
357 |      height="1.9999961"
358 |      id="rect4638" />
359 |   <rect
360 |      id="svg_1-7-2-24"
361 |      height="1.9999957"
362 |      width="12.99999"
363 |      y="-56"
364 |      x="53"
365 |      style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
366 |      transform="matrix(0,1,-1,0,0,0)" />
367 |   <rect
368 |      transform="matrix(0,1,-1,0,0,0)"
369 |      style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
370 |      x="53"
371 |      y="-66"
372 |      width="12.99999"
373 |      height="1.9999957"
374 |      id="rect4657" />
375 |   <rect
376 |      id="rect4659"
377 |      height="0.99999291"
378 |      width="11.999999"
379 |      y="57"
380 |      x="54"
381 |      style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0" />
382 |   <rect
383 |      style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
384 |      x="54"
385 |      y="88.000122"
386 |      width="11.999996"
387 |      height="1.9999961"
388 |      id="rect4661" />
389 |   <rect
390 |      style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
391 |      x="80.000008"
392 |      y="76.000122"
393 |      width="2.9999907"
394 |      height="2.9999905"
395 |      id="rect4663" />
396 |   <rect
397 |      id="rect4665"
398 |      height="2.9999905"
399 |      width="2.9999907"
400 |      y="76.000122"
401 |      x="85.000008"
402 |      style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1" />
403 |   <rect
404 |      id="rect4667"
405 |      height="2.9999905"
406 |      width="2.9999907"
407 |      y="82.000122"
408 |      x="80.000008"
409 |      style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1" />
410 |   <rect
411 |      style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
412 |      x="85.000008"
413 |      y="82.000122"
414 |      width="2.9999907"
415 |      height="2.9999905"
416 |      id="rect4669" />
417 |   <rect
418 |      style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
419 |      x="80.000008"
420 |      y="88.000122"
421 |      width="2.9999907"
422 |      height="2.9999905"
423 |      id="rect4671" />
424 |   <rect
425 |      id="rect4673"
426 |      height="2.9999905"
427 |      width="2.9999907"
428 |      y="88.000122"
429 |      x="85.000008"
430 |      style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1" />
431 |   <circle
432 |      r="4.7438836"
433 |      cy="81.939331"
434 |      cx="110.06081"
435 |      id="circle4675"
436 |      style="opacity:1;fill:none;fill-opacity:1;stroke:#d3d3d3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
437 |   <rect
438 |      transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
439 |      id="rect4677"
440 |      height="6.4053884"
441 |      width="4.229713"
442 |      y="-14.826816"
443 |      x="133.6163"
444 |      style="fill:#d3d3d3;fill-opacity:1;stroke:#d3d3d3;stroke-width:0;stroke-opacity:1" />
445 |   <path
446 |      sodipodi:nodetypes="cccc"
447 |      inkscape:connector-curvature="0"
448 |      id="path4679"
449 |      d="m 125,80.000005 13.77027,0.09499 L 132,87.999992 Z"
450 |      style="fill:#d3d3d3;fill-opacity:1;fill-rule:evenodd;stroke:#d3d3d3;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
451 |   <path
452 |      style="fill:#d3d3d3;fill-opacity:1;fill-rule:evenodd;stroke:#d3d3d3;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
453 |      d="M 149,88.0002 162.77027,87.9052 156,80.0002 Z"
454 |      id="path4681"
455 |      inkscape:connector-curvature="0"
456 |      sodipodi:nodetypes="cccc" />
457 |   <rect
458 |      id="rect4683"
459 |      height="1.9999961"
460 |      width="11.999996"
461 |      y="77.000122"
462 |      x="54"
463 |      style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1" />
464 |   <rect
465 |      transform="matrix(0,1,-1,0,0,0)"
466 |      style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
467 |      x="77.000122"
468 |      y="-56"
469 |      width="12.99999"
470 |      height="1.9999957"
471 |      id="rect4685" />
472 |   <rect
473 |      id="rect4687"
474 |      height="1.9999957"
475 |      width="12.99999"
476 |      y="-66"
477 |      x="77.000122"
478 |      style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
479 |      transform="matrix(0,1,-1,0,0,0)" />
480 |   <rect
481 |      style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
482 |      x="54"
483 |      y="81.000122"
484 |      width="11.999999"
485 |      height="0.99999291"
486 |      id="rect4689" />
487 |   <rect
488 |      id="rect4761-1"
489 |      height="1.9999945"
490 |      width="15.99999"
491 |      y="101"
492 |      x="76.000008"
493 |      style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
494 |   <rect
495 |      id="rect4761-0"
496 |      height="1.9999945"
497 |      width="15.99999"
498 |      y="105"
499 |      x="76.000008"
500 |      style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
501 |   <rect
502 |      id="rect4761-7"
503 |      height="1.9999945"
504 |      width="9"
505 |      y="109"
506 |      x="76.000008"
507 |      style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
508 |   <rect
509 |      id="rect4761-1-1"
510 |      height="1.9999945"
511 |      width="12"
512 |      y="125"
513 |      x="76.000008"
514 |      style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
515 |   <rect
516 |      id="rect4761-1-1-4"
517 |      height="1.9999945"
518 |      width="10"
519 |      y="137"
520 |      x="76.000008"
521 |      style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
522 |   <rect
523 |      id="rect4761-1-1-4-4"
524 |      height="1.9999945"
525 |      width="10"
526 |      y="129"
527 |      x="82"
528 |      style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
529 |   <rect
530 |      id="rect4761-1-1-4-4-3"
531 |      height="1.9999945"
532 |      width="9"
533 |      y="133"
534 |      x="82"
535 |      style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
536 |   <path
537 |      inkscape:connector-curvature="0"
538 |      style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.8;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.66157866;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
539 |      d="m 36.398438,100.0254 c -0.423362,-0.013 -0.846847,0.01 -1.265626,0.062 -1.656562,0.2196 -3.244567,0.9739 -4.507812,2.2266 L 29,100.5991 l -2.324219,7.7129 7.826172,-1.9062 -1.804687,-1.9063 c 1.597702,-1.5308 4.048706,-1.8453 5.984375,-0.7207 1.971162,1.1452 2.881954,3.3975 2.308593,5.5508 -0.573361,2.1533 -2.533865,3.6953 -4.830078,3.6953 l 0,3.0742 c 3.550756,0 6.710442,-2.4113 7.650391,-5.9414 0.939949,-3.5301 -0.618463,-7.2736 -3.710938,-9.0703 -1.159678,-0.6738 -2.431087,-1.0231 -3.701171,-1.0625 z"
540 |      id="path4138" />
541 |   <path
542 |      inkscape:connector-curvature="0"
543 |      style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.8;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.66157866;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
544 |      d="m 59.722656,99.9629 c -1.270084,0.039 -2.541493,0.3887 -3.701172,1.0625 -3.092475,1.7967 -4.650886,5.5402 -3.710937,9.0703 0.939949,3.5301 4.09768,5.9414 7.648437,5.9414 l 0,-3.0742 c -2.296214,0 -4.256717,-1.542 -4.830078,-3.6953 -0.573361,-2.1533 0.337432,-4.4056 2.308594,-5.5508 1.935731,-1.1246 4.38863,-0.8102 5.986326,0.7207 l -1.806638,1.9063 7.828128,1.9062 -2.32422,-7.7129 -1.62696,1.7168 c -1.26338,-1.2531 -2.848917,-2.0088 -4.505855,-2.2285 -0.418778,-0.055 -0.842263,-0.076 -1.265625,-0.062 z"
545 |      id="path4138-1" />
546 |   <path
547 |      inkscape:connector-curvature="0"
548 |      style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.96599996;stroke-miterlimit:4;stroke-dasharray:none"
549 |      d="m 10.5,100 0,2 -2.4999996,0 L 12,107 l 4,-5 -2.5,0 0,-2 -3,0 z"
550 |      id="path3055-0-77" />
551 |   <path
552 |      style="opacity:0.8;fill:none;stroke:#ffffff;stroke-width:1.96599996;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
553 |      d="m 4.9850574,108.015 14.0298856,-0.03"
554 |      id="path5244-5-0-5"
555 |      inkscape:connector-curvature="0"
556 |      sodipodi:nodetypes="cc" />
557 |   <path
558 |      style="opacity:0.8;fill:none;stroke:#ffffff;stroke-width:1.96599996;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
559 |      d="m 4.9849874,132.015 14.0298866,-0.03"
560 |      id="path5244-5-0-5-8"
561 |      inkscape:connector-curvature="0"
562 |      sodipodi:nodetypes="cc" />
563 |   <path
564 |      inkscape:connector-curvature="0"
565 |      style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.4;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.66157866;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
566 |      d="m 36.398438,123.9629 c -0.423362,-0.013 -0.846847,0.01 -1.265626,0.062 -1.656562,0.2196 -3.244567,0.9739 -4.507812,2.2266 L 29,124.5366 l -2.324219,7.7129 7.826172,-1.9062 -1.804687,-1.9063 c 1.597702,-1.5308 4.048706,-1.8453 5.984375,-0.7207 1.971162,1.1453 2.881954,3.3975 2.308593,5.5508 -0.573361,2.1533 -2.533864,3.6953 -4.830078,3.6953 l 0,3.0742 c 3.550757,0 6.710442,-2.4093 7.650391,-5.9394 0.939949,-3.5301 -0.618463,-7.2756 -3.710938,-9.0723 -1.159678,-0.6737 -2.431087,-1.0231 -3.701171,-1.0625 z"
567 |      id="path4138-12" />
568 |   <path
569 |      inkscape:connector-curvature="0"
570 |      style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.4;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.66157866;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
571 |      d="m 59.722656,123.9629 c -1.270084,0.039 -2.541493,0.3888 -3.701172,1.0625 -3.092475,1.7967 -4.650886,5.5422 -3.710937,9.0723 0.939949,3.5301 4.09768,5.9394 7.648437,5.9394 l 0,-3.0742 c -2.296214,0 -4.256717,-1.542 -4.830078,-3.6953 -0.573361,-2.1533 0.337432,-4.4055 2.308594,-5.5508 1.935731,-1.1246 4.38863,-0.8102 5.986326,0.7207 l -1.806638,1.9063 7.828128,1.9062 -2.32422,-7.7129 -1.62696,1.7168 c -1.26338,-1.2531 -2.848917,-2.0088 -4.505855,-2.2285 -0.418778,-0.055 -0.842263,-0.076 -1.265625,-0.062 z"
572 |      id="path4138-1-3" />
573 |   <path
574 |      id="path6191"
575 |      d="m 10.5,116 0,-2 -2.4999996,0 L 12,109 l 4,5 -2.5,0 0,2 -3,0 z"
576 |      style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.96599996;stroke-miterlimit:4;stroke-dasharray:none"
577 |      inkscape:connector-curvature="0" />
578 |   <path
579 |      inkscape:connector-curvature="0"
580 |      style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.96599996;stroke-miterlimit:4;stroke-dasharray:none"
581 |      d="m 10.5,129 0,-2 -2.4999996,0 L 12,122 l 4,5 -2.5,0 0,2 -3,0 z"
582 |      id="path6193" />
583 |   <path
584 |      id="path6195"
585 |      d="m 10.5,135 0,2 -2.4999996,0 L 12,142 l 4,-5 -2.5,0 0,-2 -3,0 z"
586 |      style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.96599996;stroke-miterlimit:4;stroke-dasharray:none"
587 |      inkscape:connector-curvature="0" />
588 |   <path
589 |      sodipodi:type="star"
590 |      style="fill:#4d4d4d;fill-opacity:0.90196078;stroke:#d3d3d3;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
591 |      id="path4500"
592 |      sodipodi:sides="3"
593 |      sodipodi:cx="11.55581"
594 |      sodipodi:cy="60.073242"
595 |      sodipodi:r1="5.1116104"
596 |      sodipodi:r2="2.5558052"
597 |      sodipodi:arg1="0"
598 |      sodipodi:arg2="1.0471976"
599 |      inkscape:flatsided="false"
600 |      inkscape:rounded="0"
601 |      inkscape:randomized="0"
602 |      d="m 16.66742,60.073242 -3.833708,2.213392 -3.8337072,2.213393 0,-4.426785 0,-4.426784 3.8337082,2.213392 z"
603 |      inkscape:transform-center-x="-1.2779026" />
604 |   <path
605 |      inkscape:transform-center-x="1.277902"
606 |      d="m -31.500004,60.073242 -3.833708,2.213392 -3.833707,2.213393 0,-4.426785 0,-4.426784 3.833707,2.213392 z"
607 |      inkscape:randomized="0"
608 |      inkscape:rounded="0"
609 |      inkscape:flatsided="false"
610 |      sodipodi:arg2="1.0471976"
611 |      sodipodi:arg1="0"
612 |      sodipodi:r2="2.5558052"
613 |      sodipodi:r1="5.1116104"
614 |      sodipodi:cy="60.073242"
615 |      sodipodi:cx="-36.611614"
616 |      sodipodi:sides="3"
617 |      id="path4502"
618 |      style="fill:#4d4d4d;fill-opacity:0.90196078;stroke:#d3d3d3;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
619 |      sodipodi:type="star"
620 |      transform="scale(-1,1)" />
621 |   <path
622 |      d="m 16.66742,60.073212 -3.833708,2.213392 -3.8337072,2.213392 0,-4.426784 0,-4.426785 3.8337082,2.213392 z"
623 |      inkscape:randomized="0"
624 |      inkscape:rounded="0"
625 |      inkscape:flatsided="false"
626 |      sodipodi:arg2="1.0471976"
627 |      sodipodi:arg1="0"
628 |      sodipodi:r2="2.5558052"
629 |      sodipodi:r1="5.1116104"
630 |      sodipodi:cy="60.073212"
631 |      sodipodi:cx="11.55581"
632 |      sodipodi:sides="3"
633 |      id="path4504"
634 |      style="fill:#4d4d4d;fill-opacity:0.90196078;stroke:#d3d3d3;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
635 |      sodipodi:type="star"
636 |      transform="matrix(0,1,-1,0,72.0074,71.7877)"
637 |      inkscape:transform-center-y="1.2779029" />
638 |   <path
639 |      inkscape:transform-center-y="-1.2779026"
640 |      transform="matrix(0,-1,-1,0,96,96)"
641 |      sodipodi:type="star"
642 |      style="fill:#4d4d4d;fill-opacity:0.90196078;stroke:#d3d3d3;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
643 |      id="path4506"
644 |      sodipodi:sides="3"
645 |      sodipodi:cx="11.55581"
646 |      sodipodi:cy="60.073212"
647 |      sodipodi:r1="5.1116104"
648 |      sodipodi:r2="2.5558052"
649 |      sodipodi:arg1="0"
650 |      sodipodi:arg2="1.0471976"
651 |      inkscape:flatsided="false"
652 |      inkscape:rounded="0"
653 |      inkscape:randomized="0"
654 |      d="m 16.66742,60.073212 -3.833708,2.213392 -3.8337072,2.213392 0,-4.426784 0,-4.426785 3.8337082,2.213392 z" />
655 |   <path
656 |      sodipodi:nodetypes="cccc"
657 |      inkscape:connector-curvature="0"
658 |      id="path4615-5"
659 |      d="m 171.82574,65.174193 16.34854,0 -8.17427,-13.348454 z"
660 |      style="fill:#fbb917;fill-opacity:1;fill-rule:evenodd;stroke:#fbb917;stroke-width:1.65161395;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
661 |   <path
662 |      style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
663 |      d="m 179,55 0,6 2,0 0,-6"
664 |      id="path4300"
665 |      inkscape:connector-curvature="0"
666 |      sodipodi:nodetypes="cccc" />
667 |   <path
668 |      style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
669 |      d="m 179,62 0,2 2,0 0,-2"
670 |      id="path4300-6"
671 |      inkscape:connector-curvature="0"
672 |      sodipodi:nodetypes="cccc" />
673 |   <path
674 |      style="fill:#ffffff;fill-opacity:0.8;fill-rule:evenodd;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:0.8"
675 |      d="M 99.994369,113.0221 102,114.98353 l 7,-6.9558 3,0.97227 2,-1 1,-2 0,-3 -3,3 -3,-3 3,-3 -3,0 -2,1 -1,2 0.99437,3.0221 z"
676 |      id="path4268"
677 |      inkscape:connector-curvature="0"
678 |      sodipodi:nodetypes="ccccccccccccccc" />
679 |   <rect
680 |      id="rect4175-3-5"
681 |      height="16"
682 |      width="16"
683 |      y="4"
684 |      x="220"
685 |      style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0" />
686 |   <path
687 |      style="fill:#ffffff;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
688 |      d="m 234,6 0,2 -5,5 0,5 -2,0 0,-5 -5,-5 0,-2"
689 |      id="path3546"
690 |      inkscape:connector-curvature="0"
691 |      sodipodi:nodetypes="cccccccc" />
692 |   <g
693 |      transform="matrix(1.3333328,0,0,-1.5999992,-139.9999,127.19999)"
694 |      id="g4383-6">
695 |     <rect
696 |        id="rect4385-2"
697 |        height="1.2499905"
698 |        width="5.9999924"
699 |        y="12.625005"
700 |        x="198.00002"
701 |        style="fill:#ffffff;fill-opacity:0.8;stroke:#000000;stroke-width:0" />
702 |     <rect
703 |        style="fill:#ffffff;fill-opacity:0.8;stroke:#000000;stroke-width:0"
704 |        x="198.00002"
705 |        y="15.125007"
706 |        width="7.4999928"
707 |        height="1.2499949"
708 |        id="rect4387-9" />
709 |     <rect
710 |        style="fill:#ffffff;fill-opacity:0.8;stroke:#000000;stroke-width:0"
711 |        x="198.00002"
712 |        y="7.6250024"
713 |        width="2.9999909"
714 |        height="1.2499905"
715 |        id="rect4389-1-0" />
716 |     <rect
717 |        style="fill:#ffffff;fill-opacity:0.8;stroke:#000000;stroke-width:0"
718 |        x="198.00002"
719 |        y="10.125004"
720 |        width="4.4999919"
721 |        height="1.2499905"
722 |        id="rect4389-1-9" />
723 |     <path
724 |        style="fill:#ffffff;fill-opacity:0.8;fill-rule:evenodd;stroke:none;stroke-width:0.68465352px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
725 |        d="m 207.00001,16.375004 0,-5.625005 -2.25,0 3,-3.1250014 3,3.1250014 -2.25,0 0,5.625005 -1.5,0"
726 |        id="path4402"
727 |        inkscape:connector-curvature="0"
728 |        sodipodi:nodetypes="cccccccc" />
729 |   </g>
730 |   <path
731 |      style="fill:#ffffff;fill-opacity:0.8;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
732 |      d="m 164,100 0,3 -6,6 0,7 -4,0 0,-7 -6,-6 0,-3"
733 |      id="path3546-2-2"
734 |      inkscape:connector-curvature="0"
735 |      sodipodi:nodetypes="cccccccc" />
736 |   <rect
737 |      style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0"
738 |      id="svg_1-3"
739 |      height="16"
740 |      width="16"
741 |      y="28"
742 |      x="4" />
743 |   <path
744 |      sodipodi:nodetypes="ccccccccc"
745 |      inkscape:connector-curvature="0"
746 |      id="path4402-5-7"
747 |      d="m 15,41 0,-7 -4,0 0,3 -5,-4 5,-4 0,3 6,0 0,9"
748 |      style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.68465352px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
749 | </svg>
750 | 


--------------------------------------------------------------------------------
/css/jsoneditor.min.css:
--------------------------------------------------------------------------------
1 | .jsoneditor input,.jsoneditor input:not([type]),.jsoneditor input[type=search],.jsoneditor input[type=text],.jsoneditor-modal input,.jsoneditor-modal input:not([type]),.jsoneditor-modal input[type=search],.jsoneditor-modal input[type=text]{height:auto;border:inherit;box-shadow:none;font-size:inherit;box-sizing:inherit;padding:inherit;font-family:inherit;transition:none;line-height:inherit}.jsoneditor input:focus,.jsoneditor input:not([type]):focus,.jsoneditor input[type=search]:focus,.jsoneditor input[type=text]:focus,.jsoneditor-modal input:focus,.jsoneditor-modal input:not([type]):focus,.jsoneditor-modal input[type=search]:focus,.jsoneditor-modal input[type=text]:focus{border:inherit;box-shadow:inherit}.jsoneditor textarea,.jsoneditor-modal textarea{height:inherit}.jsoneditor select,.jsoneditor-modal select{display:inherit;height:inherit}.jsoneditor label,.jsoneditor-modal label{font-size:inherit;font-weight:inherit;color:inherit}.jsoneditor table,.jsoneditor-modal table{border-collapse:collapse;width:auto}.jsoneditor td,.jsoneditor th,.jsoneditor-modal td,.jsoneditor-modal th{padding:0;display:table-cell;text-align:left;vertical-align:inherit;border-radius:inherit}.jsoneditor .autocomplete.dropdown{position:absolute;background:#fff;box-shadow:2px 2px 12px rgba(128,128,128,.3);border:1px solid #d3d3d3;overflow-x:hidden;overflow-y:auto;cursor:default;margin:0;padding:5px;text-align:left;outline:0;font-family:"dejavu sans mono","droid sans mono",consolas,monaco,"lucida console","courier new",courier,monospace,sans-serif;font-size:10pt}.jsoneditor .autocomplete.dropdown .item{color:#333}.jsoneditor .autocomplete.dropdown .item.hover{background-color:#ddd}.jsoneditor .autocomplete.hint{color:#aaa;top:4px;left:4px}.jsoneditor-contextmenu-root{position:relative;width:0;height:0}.jsoneditor-contextmenu{position:absolute;box-sizing:content-box;z-index:1}.jsoneditor-contextmenu .jsoneditor-menu{position:relative;left:0;top:0;width:128px;height:auto;background:#fff;border:1px solid #d3d3d3;box-shadow:2px 2px 12px rgba(128,128,128,.3);list-style:none;margin:0;padding:0}.jsoneditor-contextmenu .jsoneditor-menu button{position:relative;padding:0 4px 0 0;margin:0;width:128px;height:auto;border:none;cursor:pointer;color:#4d4d4d;background:0 0;font-size:10pt;font-family:arial,sans-serif;box-sizing:border-box;text-align:left}.jsoneditor-contextmenu .jsoneditor-menu button::-moz-focus-inner{padding:0;border:0}.jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-default{width:96px}.jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-expand{float:right;width:32px;height:24px;border-left:1px solid #e5e5e5}.jsoneditor-contextmenu .jsoneditor-menu li{overflow:hidden}.jsoneditor-contextmenu .jsoneditor-menu li ul{display:none;position:relative;left:-10px;top:0;border:none;box-shadow:inset 0 0 10px rgba(128,128,128,.5);padding:0 10px;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.jsoneditor-contextmenu .jsoneditor-menu li ul .jsoneditor-icon{margin-left:24px}.jsoneditor-contextmenu .jsoneditor-menu li ul li button{padding-left:24px;animation:all ease-in-out 1s}.jsoneditor-contextmenu .jsoneditor-menu li button .jsoneditor-expand{position:absolute;top:0;right:0;width:24px;height:24px;padding:0;margin:0 4px 0 0;background:url(img/jsoneditor-icons.svg) 0 -72px}.jsoneditor-contextmenu .jsoneditor-icon{position:absolute;top:0;left:0;width:24px;height:24px;border:none;padding:0;margin:0;background-image:url(img/jsoneditor-icons.svg)}.jsoneditor-contextmenu .jsoneditor-text{padding:4px 0 4px 24px;word-wrap:break-word}.jsoneditor-contextmenu .jsoneditor-text.jsoneditor-right-margin{padding-right:24px}.jsoneditor-contextmenu .jsoneditor-separator{height:0;border-top:1px solid #e5e5e5;padding-top:5px;margin-top:5px}.jsoneditor-contextmenu button.jsoneditor-remove .jsoneditor-icon{background-position:-24px 0}.jsoneditor-contextmenu button.jsoneditor-append .jsoneditor-icon{background-position:0 0}.jsoneditor-contextmenu button.jsoneditor-insert .jsoneditor-icon{background-position:0 0}.jsoneditor-contextmenu button.jsoneditor-duplicate .jsoneditor-icon{background-position:-48px 0}.jsoneditor-contextmenu button.jsoneditor-sort-asc .jsoneditor-icon{background-position:-168px 0}.jsoneditor-contextmenu button.jsoneditor-sort-desc .jsoneditor-icon{background-position:-192px 0}.jsoneditor-contextmenu button.jsoneditor-transform .jsoneditor-icon{background-position:-216px 0}.jsoneditor-contextmenu button.jsoneditor-extract .jsoneditor-icon{background-position:0 -24px}.jsoneditor-contextmenu button.jsoneditor-type-string .jsoneditor-icon{background-position:-144px 0}.jsoneditor-contextmenu button.jsoneditor-type-auto .jsoneditor-icon{background-position:-120px 0}.jsoneditor-contextmenu button.jsoneditor-type-object .jsoneditor-icon{background-position:-72px 0}.jsoneditor-contextmenu button.jsoneditor-type-array .jsoneditor-icon{background-position:-96px 0}.jsoneditor-contextmenu button.jsoneditor-type-modes .jsoneditor-icon{background-image:none;width:6px}.jsoneditor-contextmenu li,.jsoneditor-contextmenu ul{box-sizing:content-box;position:relative}.jsoneditor-contextmenu .jsoneditor-menu button:focus,.jsoneditor-contextmenu .jsoneditor-menu button:hover{color:#1a1a1a;background-color:#f5f5f5;outline:0}.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected,.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:focus,.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:hover{color:#fff;background-color:#ee422e}.jsoneditor-contextmenu .jsoneditor-menu li ul li button:focus,.jsoneditor-contextmenu .jsoneditor-menu li ul li button:hover{background-color:#f5f5f5}.jsoneditor-modal{max-width:95%;border-radius:2px!important;padding:45px 15px 15px 15px!important;box-shadow:2px 2px 12px rgba(128,128,128,.3);color:#4d4d4d;line-height:1.3em}.jsoneditor-modal.jsoneditor-modal-transform{width:600px!important}.jsoneditor-modal .pico-modal-header{position:absolute;box-sizing:border-box;top:0;left:0;width:100%;padding:0 10px;height:30px;line-height:30px;font-family:arial,sans-serif;font-size:11pt;background:#3883fa;color:#fff}.jsoneditor-modal table{width:100%}.jsoneditor-modal table td{padding:3px 0}.jsoneditor-modal table td.jsoneditor-modal-input{text-align:right;padding-right:0;white-space:nowrap}.jsoneditor-modal table td.jsoneditor-modal-actions{padding-top:15px}.jsoneditor-modal table th{vertical-align:middle}.jsoneditor-modal p:first-child{margin-top:0}.jsoneditor-modal a{color:#3883fa}.jsoneditor-modal .jsoneditor-jmespath-block{margin-bottom:10px}.jsoneditor-modal .pico-close{background:0 0!important;font-size:24px!important;top:7px!important;right:7px!important;color:#fff}.jsoneditor-modal input{padding:4px}.jsoneditor-modal input[type=text]{cursor:inherit}.jsoneditor-modal input[disabled]{background:#d3d3d3;color:grey}.jsoneditor-modal .jsoneditor-select-wrapper{position:relative;display:inline-block}.jsoneditor-modal .jsoneditor-select-wrapper:after{content:"";width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #666;position:absolute;right:8px;top:14px;pointer-events:none}.jsoneditor-modal select{padding:3px 24px 3px 10px;min-width:180px;max-width:350px;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-indent:0;text-overflow:"";font-size:10pt;line-height:1.5em}.jsoneditor-modal select::-ms-expand{display:none}.jsoneditor-modal .jsoneditor-button-group input{padding:4px 10px;margin:0;border-radius:0;border-left-style:none}.jsoneditor-modal .jsoneditor-button-group input.jsoneditor-button-first{border-top-left-radius:3px;border-bottom-left-radius:3px;border-left-style:solid}.jsoneditor-modal .jsoneditor-button-group input.jsoneditor-button-last{border-top-right-radius:3px;border-bottom-right-radius:3px}.jsoneditor-modal .jsoneditor-transform-preview{background:#f5f5f5;height:200px}.jsoneditor-modal .jsoneditor-transform-preview.jsoneditor-error{color:#ee422e}.jsoneditor-modal .jsoneditor-jmespath-wizard{line-height:1.2em;width:100%;padding:0;border-radius:3px}.jsoneditor-modal .jsoneditor-jmespath-label{font-weight:700;color:#1e90ff;margin-top:20px;margin-bottom:5px}.jsoneditor-modal .jsoneditor-jmespath-wizard-table{width:100%;border-collapse:collapse}.jsoneditor-modal .jsoneditor-jmespath-wizard-label{font-style:italic;margin:4px 0 2px 0}.jsoneditor-modal .jsoneditor-inline{position:relative;display:inline-block;width:100%;padding-top:2px;padding-bottom:2px}.jsoneditor-modal .jsoneditor-inline:not(:last-child){padding-right:2px}.jsoneditor-modal .jsoneditor-jmespath-filter{display:flex;flex-wrap:wrap}.jsoneditor-modal .jsoneditor-jmespath-filter-field{width:180px}.jsoneditor-modal .jsoneditor-jmespath-filter-relation{width:100px}.jsoneditor-modal .jsoneditor-jmespath-filter-value{min-width:180px;flex:1}.jsoneditor-modal .jsoneditor-jmespath-sort-field{width:170px}.jsoneditor-modal .jsoneditor-jmespath-sort-order{width:150px}.jsoneditor-modal .jsoneditor-jmespath-select-fields{width:100%}.jsoneditor-modal .selectr-selected{border-color:#d3d3d3;padding:4px 28px 4px 8px}.jsoneditor-modal .selectr-selected .selectr-tag{background-color:#3883fa;border-radius:5px}.jsoneditor-modal table td,.jsoneditor-modal table th{text-align:left;vertical-align:middle;font-weight:400;color:#4d4d4d;border-spacing:0;border-collapse:collapse}.jsoneditor-modal #query,.jsoneditor-modal input,.jsoneditor-modal input[type=text],.jsoneditor-modal input[type=text]:focus,.jsoneditor-modal select,.jsoneditor-modal textarea{background:#fff;border:1px solid #d3d3d3;color:#4d4d4d;border-radius:3px;padding:4px}.jsoneditor-modal,.jsoneditor-modal #query,.jsoneditor-modal input,.jsoneditor-modal input[type=text],.jsoneditor-modal option,.jsoneditor-modal select,.jsoneditor-modal table td,.jsoneditor-modal table th,.jsoneditor-modal textarea{font-size:10.5pt;font-family:arial,sans-serif}.jsoneditor-modal #query,.jsoneditor-modal .jsoneditor-transform-preview{font-family:"dejavu sans mono","droid sans mono",consolas,monaco,"lucida console","courier new",courier,monospace,sans-serif;font-size:10pt;width:100%;box-sizing:border-box}.jsoneditor-modal input[type=button],.jsoneditor-modal input[type=submit]{background:#f5f5f5;padding:4px 20px}.jsoneditor-modal input,.jsoneditor-modal select{cursor:pointer}.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-asc input.jsoneditor-button-asc,.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-desc input.jsoneditor-button-desc{background:#3883fa;border-color:#3883fa;color:#fff}.jsoneditor{color:#1a1a1a;border:thin solid #3883fa;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;position:relative;padding:0;line-height:100%}div.jsoneditor-default,div.jsoneditor-field,div.jsoneditor-readonly,div.jsoneditor-value{border:1px solid transparent;min-height:16px;min-width:32px;padding:2px;margin:1px;word-wrap:break-word;float:left}div.jsoneditor-field p,div.jsoneditor-value p{margin:0}div.jsoneditor-value{word-break:break-word}div.jsoneditor-value.jsoneditor-empty::after{content:"value"}div.jsoneditor-value.jsoneditor-string{color:#006000}div.jsoneditor-value.jsoneditor-number{color:#ee422e}div.jsoneditor-value.jsoneditor-boolean{color:#ff8c00}div.jsoneditor-value.jsoneditor-null{color:#004ed0}div.jsoneditor-value.jsoneditor-invalid{color:#000}div.jsoneditor-readonly{min-width:16px;color:grey}div.jsoneditor-empty{border-color:#d3d3d3;border-style:dashed;border-radius:2px}div.jsoneditor-field.jsoneditor-empty::after{content:"field"}div.jsoneditor td{vertical-align:top}div.jsoneditor td.jsoneditor-separator{padding:3px 0;vertical-align:top;color:grey}div.jsoneditor td.jsoneditor-tree{vertical-align:top}div.jsoneditor.busy pre.jsoneditor-preview{background:#f5f5f5;color:grey}div.jsoneditor.busy div.jsoneditor-busy{display:inherit}div.jsoneditor code.jsoneditor-preview{background:0 0}div.jsoneditor.jsoneditor-mode-preview pre.jsoneditor-preview{width:100%;height:100%;box-sizing:border-box;overflow:auto;padding:2px;margin:0;white-space:pre-wrap;word-break:break-all}div.jsoneditor-default{color:grey;padding-left:10px}div.jsoneditor-tree{width:100%;height:100%;position:relative;overflow:auto}div.jsoneditor-tree button.jsoneditor-button{width:24px;height:24px;padding:0;margin:0;border:none;cursor:pointer;background:transparent url(img/jsoneditor-icons.svg)}div.jsoneditor-tree button.jsoneditor-button:focus{background-color:#f5f5f5;outline:#e5e5e5 solid 1px}div.jsoneditor-tree button.jsoneditor-collapsed{background-position:0 -48px}div.jsoneditor-tree button.jsoneditor-expanded{background-position:0 -72px}div.jsoneditor-tree button.jsoneditor-contextmenu-button{background-position:-48px -72px}div.jsoneditor-tree button.jsoneditor-invisible{visibility:hidden;background:0 0}div.jsoneditor-tree button.jsoneditor-dragarea{background:url(img/jsoneditor-icons.svg) -72px -72px;cursor:move}div.jsoneditor-tree :focus{outline:0}div.jsoneditor-tree div.jsoneditor-show-more{display:inline-block;padding:3px 4px;margin:2px 0;background-color:#e5e5e5;border-radius:3px;color:grey;font-family:arial,sans-serif;font-size:10pt}div.jsoneditor-tree div.jsoneditor-show-more a{display:inline-block;color:grey}div.jsoneditor-tree div.jsoneditor-color{display:inline-block;width:12px;height:12px;margin:4px;border:1px solid grey;cursor:pointer}div.jsoneditor-tree div.jsoneditor-date{background:#a1a1a1;color:#fff;font-family:arial,sans-serif;border-radius:3px;display:inline-block;padding:3px;margin:0 3px}div.jsoneditor-tree table.jsoneditor-tree{border-collapse:collapse;border-spacing:0;width:100%}div.jsoneditor-tree .jsoneditor-button.jsoneditor-schema-error{width:24px;height:24px;padding:0;margin:0 4px 0 0;background:url(img/jsoneditor-icons.svg) -168px -48px}div.jsoneditor-outer{position:static;width:100%;height:100%;margin:0;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}div.jsoneditor-outer.has-nav-bar{margin-top:-26px;padding-top:26px}div.jsoneditor-outer.has-nav-bar.has-main-menu-bar{margin-top:-61px;padding-top:61px}div.jsoneditor-outer.has-status-bar{margin-bottom:-26px;padding-bottom:26px}div.jsoneditor-outer.has-main-menu-bar{margin-top:-35px;padding-top:35px}div.jsoneditor-busy{position:absolute;top:15%;left:0;box-sizing:border-box;width:100%;text-align:center;display:none}div.jsoneditor-busy span{background-color:#ffffab;border:1px solid #fe0;border-radius:3px;padding:5px 15px;box-shadow:0 0 5px rgba(0,0,0,.4)}div.jsoneditor-field.jsoneditor-empty::after,div.jsoneditor-value.jsoneditor-empty::after{pointer-events:none;color:#d3d3d3;font-size:8pt}a.jsoneditor-value.jsoneditor-url,div.jsoneditor-value.jsoneditor-url{color:#006000;text-decoration:underline}a.jsoneditor-value.jsoneditor-url{display:inline-block;padding:2px;margin:2px}a.jsoneditor-value.jsoneditor-url:focus,a.jsoneditor-value.jsoneditor-url:hover{color:#ee422e}div.jsoneditor-field.jsoneditor-highlight,div.jsoneditor-field[contenteditable=true]:focus,div.jsoneditor-field[contenteditable=true]:hover,div.jsoneditor-value.jsoneditor-highlight,div.jsoneditor-value[contenteditable=true]:focus,div.jsoneditor-value[contenteditable=true]:hover{background-color:#ffffab;border:1px solid #fe0;border-radius:2px}div.jsoneditor-field.jsoneditor-highlight-active,div.jsoneditor-field.jsoneditor-highlight-active:focus,div.jsoneditor-field.jsoneditor-highlight-active:hover,div.jsoneditor-value.jsoneditor-highlight-active,div.jsoneditor-value.jsoneditor-highlight-active:focus,div.jsoneditor-value.jsoneditor-highlight-active:hover{background-color:#fe0;border:1px solid #ffc700;border-radius:2px}div.jsoneditor-value.jsoneditor-array,div.jsoneditor-value.jsoneditor-object{min-width:16px}div.jsoneditor-tree button.jsoneditor-contextmenu-button.jsoneditor-selected,div.jsoneditor-tree button.jsoneditor-contextmenu-button:focus,div.jsoneditor-tree button.jsoneditor-contextmenu-button:hover,tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-contextmenu-button{background-position:-48px -48px}div.jsoneditor-tree div.jsoneditor-show-more a:focus,div.jsoneditor-tree div.jsoneditor-show-more a:hover{color:#ee422e}.ace-jsoneditor,textarea.jsoneditor-text{min-height:150px}.ace-jsoneditor *,textarea.jsoneditor-text *{font-family:"dejavu sans mono","droid sans mono",consolas,monaco,"lucida console","courier new",courier,monospace,sans-serif}textarea.jsoneditor-text{width:100%;height:100%;margin:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;outline-width:0;border:none;background-color:#fff;resize:none}tr.jsoneditor-highlight,tr.jsoneditor-selected{background-color:#d3d3d3}tr.jsoneditor-selected button.jsoneditor-contextmenu-button,tr.jsoneditor-selected button.jsoneditor-dragarea{visibility:hidden}tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-contextmenu-button,tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-dragarea{visibility:visible}div.jsoneditor-tree button.jsoneditor-dragarea:focus,div.jsoneditor-tree button.jsoneditor-dragarea:hover,tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-dragarea{background-position:-72px -48px}div.jsoneditor td,div.jsoneditor th,div.jsoneditor tr{padding:0;margin:0}.jsoneditor-popover,.jsoneditor-schema-error,div.jsoneditor td,div.jsoneditor textarea,div.jsoneditor th,div.jsoneditor-field,div.jsoneditor-value,pre.jsoneditor-preview{font-family:"dejavu sans mono","droid sans mono",consolas,monaco,"lucida console","courier new",courier,monospace,sans-serif;font-size:10pt;color:#1a1a1a}.jsoneditor-schema-error{cursor:default;display:inline-block;height:24px;line-height:24px;position:relative;text-align:center;width:24px}.jsoneditor-popover{background-color:#4c4c4c;border-radius:3px;box-shadow:0 0 5px rgba(0,0,0,.4);color:#fff;padding:7px 10px;position:absolute;cursor:auto;width:200px}.jsoneditor-popover.jsoneditor-above{bottom:32px;left:-98px}.jsoneditor-popover.jsoneditor-above:before{border-top:7px solid #4c4c4c;bottom:-7px}.jsoneditor-popover.jsoneditor-below{top:32px;left:-98px}.jsoneditor-popover.jsoneditor-below:before{border-bottom:7px solid #4c4c4c;top:-7px}.jsoneditor-popover.jsoneditor-left{top:-7px;right:32px}.jsoneditor-popover.jsoneditor-left:before{border-left:7px solid #4c4c4c;border-top:7px solid transparent;border-bottom:7px solid transparent;content:"";top:19px;right:-14px;left:inherit;margin-left:inherit;margin-top:-7px;position:absolute}.jsoneditor-popover.jsoneditor-right{top:-7px;left:32px}.jsoneditor-popover.jsoneditor-right:before{border-right:7px solid #4c4c4c;border-top:7px solid transparent;border-bottom:7px solid transparent;content:"";top:19px;left:-14px;margin-left:inherit;margin-top:-7px;position:absolute}.jsoneditor-popover:before{border-right:7px solid transparent;border-left:7px solid transparent;content:"";display:block;left:50%;margin-left:-7px;position:absolute}.jsoneditor-text-errors tr.jump-to-line:hover{text-decoration:underline;cursor:pointer}.jsoneditor-schema-error:focus .jsoneditor-popover,.jsoneditor-schema-error:hover .jsoneditor-popover{display:block;animation:fade-in .3s linear 1,move-up .3s linear 1}@keyframes fade-in{from{opacity:0}to{opacity:1}}.jsoneditor .jsoneditor-validation-errors-container{max-height:130px;overflow-y:auto}.jsoneditor .jsoneditor-validation-errors{width:100%;overflow:hidden}.jsoneditor .jsoneditor-additional-errors{position:absolute;margin:auto;bottom:31px;left:calc(50% - 92px);color:grey;background-color:#ebebeb;padding:7px 15px;border-radius:8px}.jsoneditor .jsoneditor-additional-errors.visible{visibility:visible;opacity:1;transition:opacity 2s linear}.jsoneditor .jsoneditor-additional-errors.hidden{visibility:hidden;opacity:0;transition:visibility 0s 2s,opacity 2s linear}.jsoneditor .jsoneditor-text-errors{width:100%;border-collapse:collapse;border-top:1px solid #ffc700}.jsoneditor .jsoneditor-text-errors td{padding:3px 6px;vertical-align:middle}.jsoneditor .jsoneditor-text-errors td pre{margin:0;white-space:normal}.jsoneditor .jsoneditor-text-errors tr{background-color:#ffffab}.jsoneditor .jsoneditor-text-errors tr.parse-error{background-color:#ee2e2e70}.jsoneditor-text-errors .jsoneditor-schema-error{border:none;width:24px;height:24px;padding:0;margin:0 4px 0 0;cursor:pointer}.jsoneditor-text-errors tr .jsoneditor-schema-error{background:url(img/jsoneditor-icons.svg) -168px -48px}.jsoneditor-text-errors tr.parse-error .jsoneditor-schema-error{background:url(img/jsoneditor-icons.svg) -25px 0}.jsoneditor-anchor{cursor:pointer}.jsoneditor-anchor .picker_wrapper.popup.popup_bottom{top:28px;left:-10px}.fadein{-webkit-animation:fadein .3s;animation:fadein .3s;-moz-animation:fadein .3s;-o-animation:fadein .3s}@keyframes fadein{0%{opacity:0}100%{opacity:1}}.jsoneditor-modal input[type=search].selectr-input{border:1px solid #d3d3d3;width:calc(100% - 4px);margin:2px;padding:4px;box-sizing:border-box}.jsoneditor-modal button.selectr-input-clear{right:8px}.jsoneditor-menu{width:100%;height:35px;padding:2px;margin:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;color:#fff;background-color:#3883fa;border-bottom:1px solid #3883fa}.jsoneditor-menu>.jsoneditor-modes>button,.jsoneditor-menu>button{width:26px;height:26px;margin:2px;padding:0;border-radius:2px;border:1px solid transparent;background:transparent url(img/jsoneditor-icons.svg);color:#fff;opacity:.8;font-family:arial,sans-serif;font-size:10pt;float:left}.jsoneditor-menu>.jsoneditor-modes>button:hover,.jsoneditor-menu>button:hover{background-color:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.4)}.jsoneditor-menu>.jsoneditor-modes>button:active,.jsoneditor-menu>.jsoneditor-modes>button:focus,.jsoneditor-menu>button:active,.jsoneditor-menu>button:focus{background-color:rgba(255,255,255,.3)}.jsoneditor-menu>.jsoneditor-modes>button:disabled,.jsoneditor-menu>button:disabled{opacity:.5;background-color:transparent;border:none}.jsoneditor-menu>button.jsoneditor-collapse-all{background-position:0 -96px}.jsoneditor-menu>button.jsoneditor-expand-all{background-position:0 -120px}.jsoneditor-menu>button.jsoneditor-sort{background-position:-120px -96px}.jsoneditor-menu>button.jsoneditor-transform{background-position:-144px -96px}.jsoneditor.jsoneditor-mode-form>.jsoneditor-menu>button.jsoneditor-sort,.jsoneditor.jsoneditor-mode-form>.jsoneditor-menu>button.jsoneditor-transform,.jsoneditor.jsoneditor-mode-view>.jsoneditor-menu>button.jsoneditor-sort,.jsoneditor.jsoneditor-mode-view>.jsoneditor-menu>button.jsoneditor-transform{display:none}.jsoneditor-menu>button.jsoneditor-undo{background-position:-24px -96px}.jsoneditor-menu>button.jsoneditor-undo:disabled{background-position:-24px -120px}.jsoneditor-menu>button.jsoneditor-redo{background-position:-48px -96px}.jsoneditor-menu>button.jsoneditor-redo:disabled{background-position:-48px -120px}.jsoneditor-menu>button.jsoneditor-compact{background-position:-72px -96px}.jsoneditor-menu>button.jsoneditor-format{background-position:-72px -120px}.jsoneditor-menu>button.jsoneditor-repair{background-position:-96px -96px}.jsoneditor-menu>.jsoneditor-modes{display:inline-block;float:left}.jsoneditor-menu>.jsoneditor-modes>button{background-image:none;width:auto;padding-left:6px;padding-right:6px}.jsoneditor-menu>.jsoneditor-modes>button.jsoneditor-separator,.jsoneditor-menu>button.jsoneditor-separator{margin-left:10px}.jsoneditor-menu a{font-family:arial,sans-serif;font-size:10pt;color:#fff;opacity:.8;vertical-align:middle}.jsoneditor-menu a:hover{opacity:1}.jsoneditor-menu a.jsoneditor-poweredBy{font-size:8pt;position:absolute;right:0;top:0;padding:10px}.jsoneditor-navigation-bar{width:100%;height:26px;line-height:26px;padding:0;margin:0;border-bottom:1px solid #d3d3d3;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;color:grey;background-color:#ebebeb;overflow:hidden;font-family:arial,sans-serif;font-size:10pt}.jsoneditor-search{font-family:arial,sans-serif;position:absolute;right:4px;top:4px;border-collapse:collapse;border-spacing:0;display:flex}.jsoneditor-search input{color:#1a1a1a;width:120px;border:none;outline:0;margin:1px;line-height:20px;font-family:arial,sans-serif}.jsoneditor-search button{width:16px;height:24px;padding:0;margin:0;border:none;background:url(img/jsoneditor-icons.svg);vertical-align:top}.jsoneditor-search button:hover{background-color:transparent}.jsoneditor-search button.jsoneditor-refresh{width:18px;background-position:-99px -73px}.jsoneditor-search button.jsoneditor-next{cursor:pointer;background-position:-124px -73px}.jsoneditor-search button.jsoneditor-next:hover{background-position:-124px -49px}.jsoneditor-search button.jsoneditor-previous{cursor:pointer;background-position:-148px -73px;margin-right:2px}.jsoneditor-search button.jsoneditor-previous:hover{background-position:-148px -49px}.jsoneditor-results{font-family:arial,sans-serif;color:#fff;padding-right:5px;line-height:26px}.jsoneditor-frame{border:1px solid transparent;background-color:#fff;padding:0 2px;margin:0}.jsoneditor-statusbar{line-height:26px;height:26px;color:grey;background-color:#ebebeb;border-top:1px solid #d3d3d3;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:10pt}.jsoneditor-statusbar>.jsoneditor-curserinfo-val{margin-right:12px}.jsoneditor-statusbar>.jsoneditor-curserinfo-count{margin-left:4px}.jsoneditor-statusbar>.jsoneditor-validation-error-icon{float:right;width:24px;height:24px;padding:0;margin-top:1px;background:url(img/jsoneditor-icons.svg) -168px -48px;cursor:pointer}.jsoneditor-statusbar>.jsoneditor-validation-error-count{float:right;margin:0 4px 0 0;cursor:pointer}.jsoneditor-statusbar>.jsoneditor-parse-error-icon{float:right;width:24px;height:24px;padding:0;margin:1px;background:url(img/jsoneditor-icons.svg) -25px 0}.jsoneditor-statusbar .jsoneditor-array-info a{color:inherit}div.jsoneditor-statusbar>.jsoneditor-curserinfo-label,div.jsoneditor-statusbar>.jsoneditor-size-info{margin:0 4px}.jsoneditor-treepath{padding:0 5px;overflow:hidden;white-space:nowrap;outline:0}.jsoneditor-treepath.show-all{word-wrap:break-word;white-space:normal;position:absolute;background-color:#ebebeb;z-index:1;box-shadow:2px 2px 12px rgba(128,128,128,.3)}.jsoneditor-treepath.show-all span.jsoneditor-treepath-show-all-btn{display:none}.jsoneditor-treepath div.jsoneditor-contextmenu-root{position:absolute;left:0}.jsoneditor-treepath .jsoneditor-treepath-show-all-btn{position:absolute;background-color:#ebebeb;left:0;height:20px;padding:0 3px;cursor:pointer}.jsoneditor-treepath .jsoneditor-treepath-element{margin:1px;font-family:arial,sans-serif;font-size:10pt}.jsoneditor-treepath .jsoneditor-treepath-seperator{margin:2px;font-size:9pt;font-family:arial,sans-serif}.jsoneditor-treepath span.jsoneditor-treepath-element:hover,.jsoneditor-treepath span.jsoneditor-treepath-seperator:hover{cursor:pointer;text-decoration:underline}/*!
2 |  * Selectr 2.4.0
3 |  * https://github.com/Mobius1/Selectr
4 |  *
5 |  * Released under the MIT license
6 |  */.selectr-container{position:relative}.selectr-container li{list-style:none}.selectr-hidden{position:absolute;overflow:hidden;clip:rect(0,0,0,0);width:1px;height:1px;margin:-1px;padding:0;border:0 none}.selectr-visible{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;z-index:11}.selectr-desktop.multiple .selectr-visible{display:none}.selectr-desktop.multiple.native-open .selectr-visible{top:100%;min-height:200px!important;height:auto;opacity:1;display:block}.selectr-container.multiple.selectr-mobile .selectr-selected{z-index:0}.selectr-selected{position:relative;z-index:1;box-sizing:border-box;width:100%;padding:7px 28px 7px 14px;cursor:pointer;border:1px solid #999;border-radius:3px;background-color:#fff}.selectr-selected::before{position:absolute;top:50%;right:10px;width:0;height:0;content:'';-o-transform:rotate(0) translate3d(0,-50%,0);-ms-transform:rotate(0) translate3d(0,-50%,0);-moz-transform:rotate(0) translate3d(0,-50%,0);-webkit-transform:rotate(0) translate3d(0,-50%,0);transform:rotate(0) translate3d(0,-50%,0);border-width:4px 4px 0 4px;border-style:solid;border-color:#6c7a86 transparent transparent}.selectr-container.native-open .selectr-selected::before,.selectr-container.open .selectr-selected::before{border-width:0 4px 4px 4px;border-style:solid;border-color:transparent transparent #6c7a86}.selectr-label{display:none;overflow:hidden;width:100%;white-space:nowrap;text-overflow:ellipsis}.selectr-placeholder{color:#6c7a86}.selectr-tags{margin:0;padding:0;white-space:normal}.has-selected .selectr-tags{margin:0 0 -2px}.selectr-tag{list-style:none;position:relative;float:left;padding:2px 25px 2px 8px;margin:0 2px 2px 0;cursor:default;color:#fff;border:medium none;border-radius:10px;background:#acb7bf none repeat scroll 0 0}.selectr-container.multiple.has-selected .selectr-selected{padding:5px 28px 5px 5px}.selectr-options-container{position:absolute;z-index:10000;top:calc(100% - 1px);left:0;display:none;box-sizing:border-box;width:100%;border-width:0 1px 1px;border-style:solid;border-color:transparent #999 #999;border-radius:0 0 3px 3px;background-color:#fff}.selectr-container.open .selectr-options-container{display:block}.selectr-input-container{position:relative;display:none}.selectr-clear,.selectr-input-clear,.selectr-tag-remove{position:absolute;top:50%;right:22px;width:20px;height:20px;padding:0;cursor:pointer;-o-transform:translate3d(0,-50%,0);-ms-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);border:medium none;background-color:transparent;z-index:11}.selectr-clear,.selectr-input-clear{display:none}.selectr-container.has-selected .selectr-clear,.selectr-input-container.active .selectr-input-clear{display:block}.selectr-selected .selectr-tag-remove{right:2px}.selectr-clear::after,.selectr-clear::before,.selectr-input-clear::after,.selectr-input-clear::before,.selectr-tag-remove::after,.selectr-tag-remove::before{position:absolute;top:5px;left:9px;width:2px;height:10px;content:' ';background-color:#6c7a86}.selectr-tag-remove::after,.selectr-tag-remove::before{top:4px;width:3px;height:12px;background-color:#fff}.selectr-clear:before,.selectr-input-clear::before,.selectr-tag-remove::before{-o-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.selectr-clear:after,.selectr-input-clear::after,.selectr-tag-remove::after{-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.selectr-input-container.active,.selectr-input-container.active .selectr-clear{display:block}.selectr-input{top:5px;left:5px;box-sizing:border-box;width:calc(100% - 30px);margin:10px 15px;padding:7px 30px 7px 9px;border:1px solid #999;border-radius:3px}.selectr-notice{display:none;box-sizing:border-box;width:100%;padding:8px 16px;border-top:1px solid #999;border-radius:0 0 3px 3px;background-color:#fff}.selectr-container.notice .selectr-notice{display:block}.selectr-container.notice .selectr-selected{border-radius:3px 3px 0 0}.selectr-options{position:relative;top:calc(100% + 2px);display:none;overflow-x:auto;overflow-y:scroll;max-height:200px;margin:0;padding:0}.selectr-container.notice .selectr-options-container,.selectr-container.open .selectr-input-container,.selectr-container.open .selectr-options{display:block}.selectr-option{position:relative;display:block;padding:5px 20px;list-style:outside none none;cursor:pointer;font-weight:400}.selectr-options.optgroups>.selectr-option{padding-left:25px}.selectr-optgroup{font-weight:700;padding:0}.selectr-optgroup--label{font-weight:700;margin-top:10px;padding:5px 15px}.selectr-match{text-decoration:underline}.selectr-option.selected{background-color:#ddd}.selectr-option.active{color:#fff;background-color:#5897fb}.selectr-option.disabled{opacity:.4}.selectr-option.excluded{display:none}.selectr-container.open .selectr-selected{border-color:#999 #999 transparent #999;border-radius:3px 3px 0 0}.selectr-container.open .selectr-selected::after{-o-transform:rotate(180deg) translate3d(0,50%,0);-ms-transform:rotate(180deg) translate3d(0,50%,0);-moz-transform:rotate(180deg) translate3d(0,50%,0);-webkit-transform:rotate(180deg) translate3d(0,50%,0);transform:rotate(180deg) translate3d(0,50%,0)}.selectr-disabled{opacity:.6}.has-selected .selectr-placeholder,.selectr-empty{display:none}.has-selected .selectr-label{display:block}.taggable .selectr-selected{padding:4px 28px 4px 4px}.taggable .selectr-selected::after{display:table;content:" ";clear:both}.taggable .selectr-label{width:auto}.taggable .selectr-tags{float:left;display:block}.taggable .selectr-placeholder{display:none}.input-tag{float:left;min-width:90px;width:auto}.selectr-tag-input{border:medium none;padding:3px 10px;width:100%;font-family:inherit;font-weight:inherit;font-size:inherit}.selectr-input-container.loading::after{position:absolute;top:50%;right:20px;width:20px;height:20px;content:'';-o-transform:translate3d(0,-50%,0);-ms-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);-o-transform-origin:50% 0 0;-ms-transform-origin:50% 0 0;-moz-transform-origin:50% 0 0;-webkit-transform-origin:50% 0 0;transform-origin:50% 0 0;-moz-animation:.5s linear 0s normal forwards infinite running spin;-webkit-animation:.5s linear 0s normal forwards infinite running spin;animation:.5s linear 0s normal forwards infinite running spin;border-width:3px;border-style:solid;border-color:#aaa #ddd #ddd;border-radius:50%}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0) translate3d(0,-50%,0);transform:rotate(0) translate3d(0,-50%,0)}100%{-webkit-transform:rotate(360deg) translate3d(0,-50%,0);transform:rotate(360deg) translate3d(0,-50%,0)}}@keyframes spin{0%{-webkit-transform:rotate(0) translate3d(0,-50%,0);transform:rotate(0) translate3d(0,-50%,0)}100%{-webkit-transform:rotate(360deg) translate3d(0,-50%,0);transform:rotate(360deg) translate3d(0,-50%,0)}}.selectr-container.open.inverted .selectr-selected{border-color:transparent #999 #999;border-radius:0 0 3px 3px}.selectr-container.inverted .selectr-options-container{border-width:1px 1px 0;border-color:#999 #999 transparent;border-radius:3px 3px 0 0;background-color:#fff}.selectr-container.inverted .selectr-options-container{top:auto;bottom:calc(100% - 1px)}.selectr-container ::-webkit-input-placeholder{color:#6c7a86;opacity:1}.selectr-container ::-moz-placeholder{color:#6c7a86;opacity:1}.selectr-container :-ms-input-placeholder{color:#6c7a86;opacity:1}.selectr-container ::placeholder{color:#6c7a86;opacity:1}


--------------------------------------------------------------------------------
/css/main.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
  2 | .roboto {
  3 |   font-family: 'Roboto', sans-serif; }
  4 | 
  5 | @font-face {
  6 |   font-family: "JetBrains Mono";
  7 |   src: url("../fonts/woff/JetBrainsMono-Regular.woff") format("woff"), url("../fonts/woff2/JetBrainsMono-Regular.woff2") format("woff2"); }
  8 | 
  9 | .jetbrains-mono, body {
 10 |   font-family: 'JetBrains Mono'; }
 11 | 
 12 | body {
 13 |   height: 97.5vh;
 14 |   display: flex;
 15 |   align-items: center;
 16 |   justify-content: center;
 17 |   background: #212121;
 18 |   color: #fff; }
 19 | 
 20 | .main {
 21 |   width: 100%;
 22 |   text-align: center; }
 23 |   .main #date h2 {
 24 |     padding-top: 15px;
 25 |     display: inline-block;
 26 |     vertical-align: top; }
 27 |   .main #date-text, .main #weather-text {
 28 |     color: #d9d9d9; }
 29 |   .main #message-text {
 30 |     font-size: 23px; }
 31 |   .main #search-bar {
 32 |     width: 50%;
 33 |     margin: 0 auto 50px auto;
 34 |     height: 45px;
 35 |     padding-top: 35px;
 36 |     position: relative;
 37 |     display: inline-block; }
 38 |     .main #search-bar #search-bar-input {
 39 |       height: 50px;
 40 |       width: 100%;
 41 |       background: #2e2e2e;
 42 |       box-shadow: none;
 43 |       border: none;
 44 |       text-align: center;
 45 |       border-radius: 6px;
 46 |       outline: none;
 47 |       padding: 7px 14px;
 48 |       font-size: 18px;
 49 |       color: #fff;
 50 |       box-sizing: border-box; }
 51 |       .main #search-bar #search-bar-input:focus {
 52 |         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
 53 |         transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
 54 |     .main #search-bar .autocomplete-items-container {
 55 |       position: absolute;
 56 |       top: 100%;
 57 |       left: 0;
 58 |       right: 0;
 59 |       z-index: 99;
 60 |       border-radius: 6px;
 61 |       background: #2e2e2e;
 62 |       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
 63 |       transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
 64 |       .main #search-bar .autocomplete-items-container .autocomplete-item {
 65 |         width: 100%;
 66 |         background: #2e2e2e;
 67 |         box-shadow: none;
 68 |         border: none;
 69 |         text-align: center;
 70 |         outline: none;
 71 |         padding: 7px 14px;
 72 |         font-size: 18px;
 73 |         color: #fff;
 74 |         box-sizing: border-box;
 75 |         z-index: -1;
 76 |         cursor: pointer; }
 77 |         .main #search-bar .autocomplete-items-container .autocomplete-item:hover {
 78 |           background: #3b3b3b; }
 79 |       .main #search-bar .autocomplete-items-container .autocomplete-active {
 80 |         background: #353535; }
 81 |     @media only screen and (max-width: 791px) {
 82 |       .main #search-bar {
 83 |         width: 65%; } }
 84 |   .main #other-content {
 85 |     margin: 40px auto;
 86 |     padding: 10px 0; }
 87 |     .main #other-content .sqr {
 88 |       vertical-align: top;
 89 |       display: inline-block;
 90 |       margin-left: 5px;
 91 |       margin-right: 5px;
 92 |       width: 170px;
 93 |       background: #2e2e2e;
 94 |       padding: 15px 15px;
 95 |       border-radius: 6px;
 96 |       min-height: 150px;
 97 |       margin-top: 10px; }
 98 |       .main #other-content .sqr h4 {
 99 |         font-size: 18px;
100 |         margin: 15px; }
101 |         .main #other-content .sqr h4 a {
102 |           color: inherit;
103 |           font-size: inherit; }
104 |       .main #other-content .sqr:hover {
105 |         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
106 |         transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
107 |       .main #other-content .sqr a {
108 |         color: #9E9E9E;
109 |         font-size: 16px;
110 |         transition: .1s ease-in;
111 |         display: block;
112 |         text-decoration: none;
113 |         line-height: 22px; }
114 |         .main #other-content .sqr a:hover {
115 |           color: #fff;
116 |           text-decoration: none;
117 |           transition: .1s ease-in; }
118 |     .main #other-content .media h4, .main #other-content .media a:hover {
119 |       color: #4DD0E1; }
120 |     .main #other-content .work h4, .main #other-content .work a:hover {
121 |       color: #F06292; }
122 |     .main #other-content .social h4, .main #other-content .social a:hover {
123 |       color: #FFF176; }
124 |     .main #other-content .others h4, .main #other-content .others a:hover {
125 |       color: #81C784; }
126 |     .main #other-content .funky h4, .main #other-content .funky a:hover {
127 |       color: #4DB6AC; }
128 |     .main #other-content .purple h4, .main #other-content .purple a:hover {
129 |       color: #9575CD; }
130 |     .main #other-content .upvoty h4, .main #other-content .upvoty a:hover {
131 |       color: #FF8A65; }
132 |     .main #other-content .indigo h4, .main #other-content .indigo a:hover {
133 |       color: #7986CB; }
134 |     .main #other-content .foxxy h4, .main #other-content .foxxy a:hover {
135 |       color: #A1887F; }
136 | 
137 | .settings-modal {
138 |   display: none;
139 |   position: fixed;
140 |   z-index: 3;
141 |   width: 80vw;
142 |   height: 80vh;
143 |   overflow: auto;
144 |   background: #fff;
145 |   color: #212121;
146 |   padding: 15px; }
147 |   .settings-modal .modal-content {
148 |     width: 100%;
149 |     height: 100%; }
150 |   .settings-modal .close {
151 |     color: #aaa;
152 |     float: right;
153 |     font-size: 28px;
154 |     font-weight: bold; }
155 |     .settings-modal .close:hover, .settings-modal .close:focus {
156 |       color: black;
157 |       text-decoration: none;
158 |       cursor: pointer; }
159 | 
160 | #settings-cog {
161 |   width: 23px;
162 |   height: 23px;
163 |   position: absolute;
164 |   bottom: 25px;
165 |   right: 25px;
166 |   transition: 2s ease-in;
167 |   display: none; }
168 |   #settings-cog:hover .cog {
169 |     fill: white;
170 |     stroke: white;
171 |     transition: 2s ease-in; }
172 | 


--------------------------------------------------------------------------------
/fonts/woff/JetBrainsMono-Bold-Italic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbdelrhmanNile/startpage-onedark/97a194d962a2be41c4ee30a73186b403e0c4ab2f/fonts/woff/JetBrainsMono-Bold-Italic.woff


--------------------------------------------------------------------------------
/fonts/woff/JetBrainsMono-Bold.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbdelrhmanNile/startpage-onedark/97a194d962a2be41c4ee30a73186b403e0c4ab2f/fonts/woff/JetBrainsMono-Bold.woff


--------------------------------------------------------------------------------
/fonts/woff/JetBrainsMono-ExtraBold-Italic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbdelrhmanNile/startpage-onedark/97a194d962a2be41c4ee30a73186b403e0c4ab2f/fonts/woff/JetBrainsMono-ExtraBold-Italic.woff


--------------------------------------------------------------------------------
/fonts/woff/JetBrainsMono-ExtraBold.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbdelrhmanNile/startpage-onedark/97a194d962a2be41c4ee30a73186b403e0c4ab2f/fonts/woff/JetBrainsMono-ExtraBold.woff


--------------------------------------------------------------------------------
/fonts/woff/JetBrainsMono-Italic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbdelrhmanNile/startpage-onedark/97a194d962a2be41c4ee30a73186b403e0c4ab2f/fonts/woff/JetBrainsMono-Italic.woff


--------------------------------------------------------------------------------
/fonts/woff/JetBrainsMono-Medium-Italic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbdelrhmanNile/startpage-onedark/97a194d962a2be41c4ee30a73186b403e0c4ab2f/fonts/woff/JetBrainsMono-Medium-Italic.woff


--------------------------------------------------------------------------------
/fonts/woff/JetBrainsMono-Medium.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbdelrhmanNile/startpage-onedark/97a194d962a2be41c4ee30a73186b403e0c4ab2f/fonts/woff/JetBrainsMono-Medium.woff


--------------------------------------------------------------------------------
/fonts/woff/JetBrainsMono-Regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbdelrhmanNile/startpage-onedark/97a194d962a2be41c4ee30a73186b403e0c4ab2f/fonts/woff/JetBrainsMono-Regular.woff


--------------------------------------------------------------------------------
/fonts/woff2/JetBrainsMono-Bold-Italic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbdelrhmanNile/startpage-onedark/97a194d962a2be41c4ee30a73186b403e0c4ab2f/fonts/woff2/JetBrainsMono-Bold-Italic.woff2


--------------------------------------------------------------------------------
/fonts/woff2/JetBrainsMono-Bold.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbdelrhmanNile/startpage-onedark/97a194d962a2be41c4ee30a73186b403e0c4ab2f/fonts/woff2/JetBrainsMono-Bold.woff2


--------------------------------------------------------------------------------
/fonts/woff2/JetBrainsMono-ExtraBold-Italic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbdelrhmanNile/startpage-onedark/97a194d962a2be41c4ee30a73186b403e0c4ab2f/fonts/woff2/JetBrainsMono-ExtraBold-Italic.woff2


--------------------------------------------------------------------------------
/fonts/woff2/JetBrainsMono-ExtraBold.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbdelrhmanNile/startpage-onedark/97a194d962a2be41c4ee30a73186b403e0c4ab2f/fonts/woff2/JetBrainsMono-ExtraBold.woff2


--------------------------------------------------------------------------------
/fonts/woff2/JetBrainsMono-Italic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbdelrhmanNile/startpage-onedark/97a194d962a2be41c4ee30a73186b403e0c4ab2f/fonts/woff2/JetBrainsMono-Italic.woff2


--------------------------------------------------------------------------------
/fonts/woff2/JetBrainsMono-Medium-Italic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbdelrhmanNile/startpage-onedark/97a194d962a2be41c4ee30a73186b403e0c4ab2f/fonts/woff2/JetBrainsMono-Medium-Italic.woff2


--------------------------------------------------------------------------------
/fonts/woff2/JetBrainsMono-Medium.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbdelrhmanNile/startpage-onedark/97a194d962a2be41c4ee30a73186b403e0c4ab2f/fonts/woff2/JetBrainsMono-Medium.woff2


--------------------------------------------------------------------------------
/fonts/woff2/JetBrainsMono-Regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbdelrhmanNile/startpage-onedark/97a194d962a2be41c4ee30a73186b403e0c4ab2f/fonts/woff2/JetBrainsMono-Regular.woff2


--------------------------------------------------------------------------------
/img/icon64.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AbdelrhmanNile/startpage-onedark/97a194d962a2be41c4ee30a73186b403e0c4ab2f/img/icon64.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 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>New Tab</title>
 7 |     <!--Json Editor-->
 8 |     <link rel="stylesheet" href="css/jsoneditor.min.css" type="text/css">
 9 |     <!--Custom CSS-->
10 |     <link rel="stylesheet" href="css/main.css">
11 | </head>
12 | <body>
13 |     <div id="settings" class="settings-modal">
14 |         <div class="modal-content">
15 |             <span class="close">&times;</span>
16 |             <h2>
17 |                 Edit the config.json below. Check <a href="https://github.com/deepjyoti30/startpage#settings">this</a> for details
18 |             </h2>
19 |             <div id="jsoneditor" style="width: 100%;height: 80%;"></div>
20 |         </div>
21 |     </div>
22 |     <div id="main" class="main">
23 |         <div id="message">
24 |             <h1 id="message-text">Good Morning!</h1>
25 |         </div>
26 |         <div id="date">
27 |             <h2 id="date-text"></h2>
28 |             <h2 id="line">|</h2>
29 |             <h2 id="weather-text">Fetching Weather...</h2>
30 |         </div>
31 |         <div id="search-bar">
32 |             <input id="search-bar-input"></input>
33 |             <div class="autocomplete-items-container">
34 |             </div>
35 |         </div>
36 |         <div id="other-content">
37 |         </div>
38 |         <svg id="settings-cog" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-settings" viewBox="0 0 24 24" stroke-width="1.5" stroke="#607D8B" fill="none" stroke-linecap="round" stroke-linejoin="round">
39 |             <path stroke="none" d="M0 0h24v24H0z"/>
40 |             <path class="cog" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
41 |             <circle cx="12" cy="12" r="3" />
42 |         </svg>
43 |     </div>
44 |     <!--JSON Editor-->
45 |     <script src="js/jsoneditor.min.js"></script>
46 |     <!--Custom JS-->
47 |     <script src="js/settings.js"></script>
48 |     <script src="js/autocomplete.js"></script>
49 |     <script src="js/main.js"></script>
50 | </body>
51 | </html>
52 | 


--------------------------------------------------------------------------------
/js/autocomplete.js:
--------------------------------------------------------------------------------
  1 | function autocomplete(inp, passedValues, style) {
  2 |     var currentFocus;
  3 | 
  4 |     /*execute a function when someone writes in the text field:*/
  5 |     inp.addEventListener("input", function(e) {
  6 |         var item, val = this.value;
  7 |         var parentContainer = document.getElementsByClassName('autocomplete-items-container')[0];
  8 |         
  9 |         /*close any already open lists of autocompleted values*/
 10 |         closeAllLists();
 11 |         if (!val) {
 12 |             parentContainer.style.paddingBottom = "0";
 13 |             return false;
 14 |         }
 15 |         currentFocus = -1;
 16 | 
 17 |         // Update some values of the parent container
 18 |         parentContainer.setAttribute("id", this.id + "-autocomplete-list");
 19 |         parentContainer.style.paddingBottom = "1rem";
 20 | 
 21 |         if(style["searchBackgroundColor"]) {
 22 |             parentContainer.style.backgroundColor = style["searchBackgroundColor"];
 23 |         }
 24 | 
 25 |         /*for each item in the array...*/
 26 |         Object.keys(passedValues).forEach((el, i, arr) => {
 27 | 
 28 |           /*check if the item starts with the same letters as the text field value:*/
 29 |           if (arr[i].toLowerCase().includes(val.toLowerCase())) {
 30 |             /*create a DIV element for each matching element:*/
 31 |             item = document.createElement("DIV");
 32 |             item.setAttribute("class", "autocomplete-item");
 33 |             // Add the url as an attribute
 34 |             item.setAttribute('url', passedValues[el]);
 35 | 
 36 |             if(style["searchBackgroundColor"]) {
 37 |                 item.style.backgroundColor = style["searchBackgroundColor"];
 38 |             }
 39 | 
 40 |             if(style["searchColor"]) {
 41 |                 item.style.color = style["searchColor"];
 42 |             }
 43 |             
 44 |             /*make the matching letters bold:*/
 45 |             item.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
 46 |             item.innerHTML += arr[i].substr(val.length);
 47 |             /*insert a input field that will hold the current array item's value:*/
 48 |             item.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
 49 |             /*execute a function when someone clicks on the item value (DIV element):*/
 50 |                 item.addEventListener("click", function(e) {
 51 |                 /*insert the value for the autocomplete text field:*/
 52 |                 inp.value = this.getElementsByTagName("input")[0].value;
 53 |                 /*close the list of autocompleted values,
 54 |                 (or any other open lists of autocompleted values:*/
 55 |                 closeAllLists();
 56 |             });
 57 |             parentContainer.appendChild(item);
 58 |           }
 59 |         })
 60 |     });
 61 | 
 62 |     /*execute a function presses a key on the keyboard:*/
 63 |     inp.addEventListener("keydown", function(e) {
 64 |         var x = document.getElementById(this.id + "-autocomplete-list");
 65 |         if (x) x = x.getElementsByTagName("div");
 66 |         if (e.keyCode == 40) {
 67 |             /*If the arrow DOWN key is pressed,
 68 |             increase the currentFocus variable:*/
 69 |             currentFocus++;
 70 |             /*and and make the current item more visible:*/
 71 |             addActive(x);
 72 |         }
 73 |         else if (e.keyCode == 38) {
 74 |             /*If the arrow UP key is pressed,
 75 |             decrease the currentFocus variable:*/
 76 |             currentFocus--;
 77 |             /*and and make the current item more visible:*/
 78 |             addActive(x);
 79 |         }
 80 |         else if (e.keyCode == 13) {
 81 |             /*If the ENTER key is pressed, prevent the form from being submitted,*/
 82 |             if (currentFocus > -1) {
 83 |                 e.preventDefault();
 84 |                 /*and simulate a click on the "active" item:*/
 85 |                 if (x) window.location = x[0].getAttribute('url');
 86 |             }
 87 |         }
 88 |     });
 89 | 
 90 |     function addActive(x) {
 91 |         /*a function to classify an item as "active":*/
 92 |         if (!x) return false;
 93 |         /*start by removing the "active" class on all items:*/
 94 |         removeActive(x);
 95 |         if (currentFocus >= x.length) currentFocus = 0;
 96 |         if (currentFocus < 0) currentFocus = (x.length - 1);
 97 |         /*add class "autocomplete-active":*/
 98 |         x[currentFocus].classList.add("autocomplete-active");
 99 |     }
100 | 
101 |     function removeActive(x) {
102 |         /*a function to remove the "active" class from all autocomplete items:*/
103 |         for (var i = 0; i < x.length; i++) {
104 |             x[i].classList.remove("autocomplete-active");
105 |         }
106 |     }
107 | 
108 |     function closeAllLists(elmnt) {
109 |         /*close all autocomplete lists in the document,
110 |         except the one passed as an argument:*/
111 |         document.getElementsByClassName("autocomplete-items-container")[0].innerHTML = "";
112 |     }
113 | 
114 |     /*execute a function when someone clicks in the document:*/
115 |     document.addEventListener("click", function (e) {
116 |         closeAllLists(e.target);
117 |     });
118 | }


--------------------------------------------------------------------------------
/js/main.js:
--------------------------------------------------------------------------------
  1 | window.onload = function() {
  2 |     this.initBody();
  3 |     this.listenForSettings();
  4 | }
  5 | 
  6 | 
  7 | debug = false; // Enable while testing on local
  8 | searchBarDivId = "search-bar"
  9 | searchBarId = "search-bar-input"
 10 | messageDivId = "message"
 11 | dateDivId = "date"
 12 | dateId = "date-text"
 13 | weatherId = "weather-text"
 14 | lineId = "line"
 15 | messageId = "message-text"
 16 | timeZ = undefined
 17 | otherContentId = "other-content"
 18 | userName = ""
 19 | disable24Hour = false;
 20 | appId = "fd2c04ed7f9802656bd2cc23bddc7ad9"
 21 | apiUrl = "http://api.openweathermap.org/data/2.5/weather"
 22 | bgClassContainer = [
 23 |     "media",
 24 |     "work",
 25 |     "social",
 26 |     "others",
 27 |     "funky",
 28 |     "purple",
 29 |     "upvoty",
 30 |     "indigo",
 31 |     "foxxy"
 32 | ]
 33 | searchEngines = {
 34 |     "Google": "https://www.google.com/search?q=",
 35 |     "DuckDuckGo": "https://duckduckgo.com/?q=",
 36 |     "Brave": "https://search.brave.com/search?q=",
 37 |     "Yahoo": "https://search.yahoo.com/search?p=",
 38 |     "Ecosia": "https://www.ecosia.org/search?q="
 39 | }
 40 | validWeatherUnit = [
 41 |     "fah", "cel"
 42 | ]
 43 | validQuickLinks = {}
 44 | 
 45 | 
 46 | function initBody() {
 47 |     /**
 48 |      * Function called when the body is loaded.
 49 |      *
 50 |      * Do everything like adding an event listener to
 51 |      * other things.
 52 |      */
 53 |     // If running on local, just read the conf
 54 |     if (debug) {
 55 |         readJSON("config.json");
 56 |         return;
 57 |     }
 58 | 
 59 |     // Read the json file
 60 |     BROWSER.storage.sync.get(result => {
 61 |         Object.keys(result).length == 0 ? readJSON("config.json") : parseAndCreate(result)
 62 |     })
 63 | }
 64 | 
 65 | function initSearchBar(jsonData) {
 66 |     // Clear the search bar on load, just in case
 67 |     document.getElementById(searchBarId).value = ""
 68 |     document.getElementById(searchBarId).focus()
 69 |     searchEngine = jsonData["searchEngine"]
 70 |     if(!Object.keys(this.searchEngines).includes(searchEngine)){
 71 |         searchEngine = "Google"
 72 |     }
 73 |     searchUrl = this.searchEngines[searchEngine]
 74 |     document.getElementById(searchBarId).placeholder = `${searchEngine} Search`
 75 |     document.getElementById(searchBarId).addEventListener("keypress", (event) => {
 76 |         if (event.key != 'Enter') return
 77 | 
 78 |         // Do whatever the user wants to do
 79 |         query = document.getElementById(searchBarId).value
 80 | 
 81 |         // Open settings
 82 |         if (query == "--setting" || query == "--settings") {
 83 |             showSettings()
 84 |             document.getElementById(searchBarId).value = ""
 85 |             // Remove the autocomplete boxes
 86 |             document.getElementById("search-bar-input-autocomplete-list").style.display = "none";
 87 |             return
 88 |         }
 89 | 
 90 |         // If not others, then it's probably a search
 91 |         query = query.replace(/\ /g, "+")
 92 |         document.location = searchUrl + query
 93 |     })
 94 | }
 95 | 
 96 | function buildMsg() {
 97 |     /**
 98 |      * Build a nice message for the user.
 99 |      *
100 |      * Following is how the message would be decided.
101 |      * 0 - 5:59 : It's too late, take some sleep
102 |      * 6 - 8:59 : You're up early
103 |      * 9 - 11:59 : Have a good day ahead
104 |      * 12 - 16:59 : Good Afternoon
105 |      * 17 - 19:59 : Good Evening
106 |      * 20 - 23:59 : It's time to wrap up for the day
107 |      */
108 |     date = new Date()
109 |     currentHour = date.getHours()
110 |     currentMinute = date.getMinutes()
111 |     currentTime = currentHour + (0.01 * currentMinute)
112 | 
113 |     if (inRange(currentTime, 0, 5.59))
114 |         return "It's too late, take some sleep"
115 |     if (inRange(currentTime, 6, 8.59))
116 |         return "You're up early"
117 |     if (inRange(currentTime, 9, 11.59))
118 |         return "Have a good day ahead"
119 |     if (inRange(currentTime, 12, 16.59))
120 |         return "Good Afternoon"
121 |     if (inRange(currentTime, 17, 19.59))
122 |         return "Good Evening"
123 |     if (inRange(currentTime, 20, 24))
124 |         return "It's time to wrap up for the day"
125 |     else
126 |         return ""
127 | }
128 | 
129 | function handleMessage(userName) {
130 |     /**
131 |      * Handle the creation of the message
132 |      *
133 |      * Build the message based on the time of the day.
134 |      * If the message is null then add just the username
135 |      * Else, add the username before the message.
136 |      */
137 |     var builtMsg = buildMsg()
138 |     builtMsg == "" ?
139 |         builtMsg = `Hello ${userName}` : builtMsg = `Hey ${userName}, ${builtMsg}!`
140 |     return builtMsg;
141 | }
142 | 
143 | function updateTime() {
144 |     /**
145 |      * Get the current time and date and return it.
146 |      */
147 |     currentDate = new Date()
148 |     options = {
149 |             day: 'numeric',
150 |             month: 'short',
151 |             hour: 'numeric',
152 |             minute: 'numeric',
153 |             hour12: disable24Hour,
154 |             timeZone: timeZ
155 |     }
156 |     finalDate = currentDate.toLocaleString(undefined, options)
157 |     document.getElementById(dateId).textContent = finalDate
158 | }
159 | 
160 | function updateTimeHook() {
161 |     updateTime()
162 |     interval = setInterval(() => {
163 |         updateTime()
164 |     }, 30 * 1000)
165 | }
166 | 
167 | function updateWeather(weatherConfig) {
168 |     /**
169 |      * Get the weather using the location passed by the user using
170 |      * the config and update it in a formatted way according to
171 |      * the unit.
172 |      */
173 |     userLocation = weatherConfig["location"].replace(/\ /g, ",")
174 |     passedUnit = weatherConfig["unit"]
175 |     unit = validWeatherUnit.includes(passedUnit.substring(0, 3)) ?
176 |         passedUnit : "cel"
177 | 
178 |     fetchUrl = apiUrl + `?q=${userLocation}&appid=${appId}&units=metric`
179 | 
180 |     fetch(fetchUrl)
181 |         .then(response => {return response.json()})
182 |         .then(jsonData => {
183 |             temp = Math.floor(jsonData["main"]["temp"])
184 |             weatherType = jsonData["weather"][0]["main"]
185 | 
186 |             temp = !unit.includes("cel") ?
187 |                 getFahrenheit(temp) + "&deg;F" : temp + "&deg;C"
188 |             weatherText = temp + ", " + indexUppercase(weatherType)
189 |             document.getElementById(weatherId).innerHTML = weatherText
190 |         })
191 | }
192 | 
193 | function readJSON(fileName) {
194 |     // Load the data of the passed file.
195 |     fetch(fileName)
196 |         .then(response => {return response.json()})
197 |         .then(jsonData => {
198 |             parseAndCreate(jsonData)
199 |             saveSettings(jsonData)
200 |         })
201 | }
202 | 
203 | function saveSettings(settings) {
204 |     if (debug) return;
205 | 
206 |     BROWSER.storage.sync.set(settings)
207 | }
208 | 
209 | function parseAndCreate(jsonData) {
210 |     /**
211 |      * Parse the passed jsonData and create div's accordingly.
212 |      */
213 |     this.userName = jsonData["user"]
214 | 
215 |     // Enable the settings button if it is enabled
216 |     if (jsonData["settingsIcon"]) enableCog();
217 | 
218 |     // If the user has not passed any custom message
219 |     if (Object.keys(jsonData).includes("message") &&
220 |             typeof(jsonData["message"]) == "string" &&
221 |             jsonData["message"] != "")
222 |         builtMsg = jsonData["message"]
223 |     else
224 |         builtMsg = this.handleMessage(this.userName);
225 | 
226 |     document.getElementById(messageId).textContent = builtMsg
227 |     // Check if 24 hour is disabled
228 |     disable24Hour = jsonData["disable24Hour"]
229 |     timeZ = jsonData["timeZone"]
230 |     timeZ = isValidTimeZone(timeZ) ? timeZ : undefined
231 |     // Check if welcome message is supposed to be disabled
232 |     if (jsonData["disableMessage"])
233 |         document.getElementById(messageDivId).style.display = "none"
234 |     if (jsonData["disableDate"]) {
235 |         // Hide the date and the line
236 |         document.getElementById(dateId).style.display = "none"
237 |         document.getElementById(lineId).style.display = "none"
238 |     }
239 |     else
240 |         updateTimeHook()
241 |     if (jsonData["disableWeather"]){
242 |         // Hide the date and the line
243 |         document.getElementById(weatherId).style.display = "none"
244 |         document.getElementById(lineId).style.display = "none"
245 |     }
246 |     else
247 |         updateWeather(jsonData["weatherConf"])
248 |     if (jsonData["disableSearchBar"])
249 |         document.getElementById(searchBarDivId).style.display = "none"
250 |     else
251 |         initSearchBar(jsonData)
252 | 
253 |     sqrs = jsonData["squares"]
254 | 
255 |     sqrs.forEach((element, index) => {
256 |         sqr = createSqr(element, index)
257 |         document.getElementById(otherContentId).appendChild(sqr)
258 |     })
259 | 
260 |     // Apply styling if present
261 |     if (jsonData["style"]) {
262 |         styleData = jsonData["style"]
263 |         if (styleData["backgroundColor"]) {
264 |             document.body.style.backgroundColor = styleData["backgroundColor"]
265 |         }
266 |         if (styleData["messageColor"]) {
267 |             document.getElementById(messageId).style.color = styleData["messageColor"]
268 |         }
269 |         if (styleData["dateColor"]) {
270 |             document.getElementById(dateId).style.color = styleData["dateColor"]
271 |         }
272 |         if (styleData["lineColor"]) {
273 |             document.getElementById(lineId).style.color = styleData["lineColor"]
274 |         }
275 |         if (styleData["weatherColor"]) {
276 |             document.getElementById(weatherId).style.color = styleData["weatherColor"]
277 |         }
278 |         if (styleData["searchColor"]) {
279 |             document.getElementById(searchBarId).style.color = styleData["searchColor"]
280 |         }
281 |         if (styleData["searchBackgroundColor"]) {
282 |             document.getElementById(searchBarId).style.backgroundColor = styleData["searchBackgroundColor"]
283 |             autocompleteBackgroundColor = styleData["searchBackgroundColor"]
284 |         }
285 |         if (styleData["searchPlaceholderColor"]) {
286 |             document.getElementById(searchBarId).classList.add(createPlaceholderStyleClass(styleData["searchPlaceholderColor"]));
287 |         }
288 |         if (styleData["autocompleteHighlightBackgroundColor"]) {
289 |             addAutocompleteStyleClass(styleData["autocompleteHighlightBackgroundColor"]);
290 |         }
291 |         if (styleData["squareBackgroundColor"]) {
292 |             elements = document.getElementsByClassName("sqr")
293 |             var i;
294 |             for (i = 0; i < elements.length; i++) {
295 |                 elements[i].style.backgroundColor = styleData["squareBackgroundColor"]
296 |             }
297 |         }
298 |         if (styleData["squareColor"]) {
299 |             elements = document.querySelectorAll(".sqr a")
300 |             var i;
301 |             for (i = 0; i < elements.length; i++) {
302 |                 elements[i].style.color = styleData["squareColor"]
303 |             }
304 |         }
305 |     }
306 | 
307 |     // Extract the quicklinks from the sqrs
308 |     extractQuickLinks(sqrs, jsonData["style"]);
309 | }
310 | 
311 | function createSqr(sqrData, index) {
312 |     // Create a new square division with the passed element
313 |     name = sqrData["name"];
314 |     link = sqrData["url"];
315 |     links = sqrData["links"];
316 |     color = sqrData["color"];
317 | 
318 |     // Sometimes, the user might not have set a value for the color,
319 |     // in which case it will be undefined.
320 |     colorValid = (color == undefined) ? false : isColorValid(color);
321 | 
322 |     div = document.createElement("div")
323 |     cls = document.createAttribute("class")
324 |     div.setAttributeNode(cls)
325 |     div.classList.add("sqr")
326 | 
327 |     if (colorValid)
328 |         customClass = createClass(color);
329 |     else if (index > bgClassContainer.length - 1)
330 |         customClass = 'media';
331 |     else
332 |         customClass = bgClassContainer[index];
333 | 
334 |     div.classList.add(customClass);
335 | 
336 |     h4 = getTitle(name, link);
337 | 
338 |     div.appendChild(h4)
339 | 
340 |     links.forEach(element => {
341 |         aName = element["name"]
342 |         aHref = element["url"]
343 | 
344 |         a = document.createElement("a")
345 |         attrHref = document.createAttribute("href")
346 |         attrHref.value = aHref
347 |         a.setAttributeNode(attrHref)
348 | 
349 |         a.textContent = aName
350 | 
351 |         div.appendChild(a)
352 |     })
353 | 
354 |     return div
355 | }
356 | 
357 | function getTitle(titleContent, linkHref=null) {
358 |     /**
359 |      * Create the title for the sqr card.
360 |      *
361 |      * The card will be optionally clicable and will open
362 |      * a new link.
363 |      *
364 |      * If the link is not passed in the config then the title
365 |      * will not be clickable.
366 |      */
367 |     h4 = document.createElement("h4");
368 | 
369 |     if (!linkHref) {
370 |         h4.textContent = titleContent;
371 |         return h4;
372 |     }
373 | 
374 |     // If the link is passed, create a nested child
375 |     a = document.createElement("a");
376 |     a.setAttribute("href", linkHref);
377 |     a.textContent = titleContent;
378 | 
379 |     h4.appendChild(a);
380 |     return h4;
381 | }
382 | 
383 | // Utility functions
384 | 
385 | function isValidTimeZone(tz) {
386 |     if (!Intl || !Intl.DateTimeFormat().resolvedOptions().timeZone) {
387 |         throw 'Time zones are not available in this environment';
388 |     }
389 | 
390 |     try {
391 |         Intl.DateTimeFormat(undefined, {timeZone: tz});
392 |         return true;
393 |     }
394 |     catch (ex) {
395 |         return false;
396 |     }
397 | }
398 | 
399 | function getFahrenheit(inCelcius) {
400 |     return Math.floor((inCelcius * 9 / 5) + 32)
401 | }
402 | 
403 | function indexUppercase(unformatted) {
404 |     return unformatted.split(" ").map(w => {
405 |         return w[0].toUpperCase() + w.substring(1)
406 |     }).join(" ")
407 | }
408 | 
409 | function inRange(number, min, max) {
410 |     return (number >= min && number <= max)
411 | }
412 | 
413 | function isColorValid(color) {
414 |     /**
415 |      * Check if the passed color is valid.
416 |      *
417 |      * Currently supports only css color names
418 |      * or hex colors having 3 or 6 characters.
419 |      */
420 |     // Check CSS match
421 |     let defaultStyles = new Option().style;
422 |     defaultStyles.color = color
423 |     if (defaultStyles.color == color) return true;
424 | 
425 |     // In case the above failed, check if it's a hex
426 |     return /^#([0-9A-F]{3}){1,2}$/i.test(color);
427 | }
428 | 
429 | function createClass(color) {
430 |     /**
431 |      * Create a new class in a style and add it to
432 |      * the head.
433 |      *
434 |      * I did check other alternatives since adding something like
435 |      * this in the innerHTML is not a preferred way to go,
436 |      * especially since I'm building this as an extension,
437 |      * however, there's no other way.
438 |      *
439 |      * Since I also want to add hover effects, there seriously
440 |      * is no other way to do that without adding a style or using
441 |      * a library (cannot/don't want to do that because this is an extension).
442 |      */
443 |     var style = document.createElement('style');
444 |     const newClassName = `bg-${Math.random().toString(36).substring(7)}`;
445 |     style.type = 'text/css';
446 |     style.innerHTML = `.${newClassName} h4 {color: ${color} !important;} .${newClassName} a:hover {color: ${color} !important;}`;
447 |     document.getElementsByTagName('head')[0].appendChild(style);
448 | 
449 |     return newClassName;
450 | }
451 | 
452 | function createPlaceholderStyleClass(color) {
453 |     /**
454 |      * Create a new class with for placeholder styling.
455 |      *
456 |      * This is pretty much a continuation of what has done preivously
457 |      * in the createClass function.
458 |      */
459 |     var style = document.createElement('style');
460 |     const newClassName = `bg-${Math.random().toString(36).substring(7)}`;
461 |     style.type = 'text/css';
462 |     style.innerHTML = `::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
463 |         color: ${color} !important;
464 |         opacity: 1; /* Firefox */
465 |       }
466 | 
467 |       :-ms-input-placeholder { /* Internet Explorer 10-11 */
468 |         color: ${color} !important;
469 |       }
470 | 
471 |       ::-ms-input-placeholder { /* Microsoft Edge */color: ${color} !important;}`;
472 |     document.getElementsByTagName('head')[0].appendChild(style);
473 | 
474 |     return newClassName;
475 | }
476 | 
477 | function addAutocompleteStyleClass(color) {
478 |     /**
479 |      * Add some colors for the autocomplete classes in order to
480 |      * keep. We need to add styles for :hover property so it is
481 |      * easier to just inject some CSS.
482 |      */
483 |     var style = document.createElement("style");
484 |     style.type = "text/css";
485 |     style.innerHTML = `
486 |     .autocomplete-item:hover {
487 |         background: ${color} !important;
488 |     }
489 | 
490 |     .autocomplete-active {
491 |         background: ${color} !important;
492 |     }
493 |     `;
494 |     document.getElementsByTagName('head')[0].appendChild(style);
495 | }
496 | 
497 | 
498 | function extractQuickLinks(passedSqrs, style) {
499 |     /**
500 |      * Extract the quicklinks passed in the config
501 |      *
502 |      * Cache the quicklinks passed by the user in the config JSON
503 |      * so that they can be used as a shortcut called from the
504 |      * search bar.
505 |      */
506 |     passedSqrs.forEach(linksContainer => {
507 |         linksContainer.links.forEach(linkObject => this.validQuickLinks[linkObject.name] = linkObject.url);
508 |     });
509 | 
510 |     // Start the autocomplete
511 |     autocomplete(document.getElementById("search-bar-input"), this.validQuickLinks, style);
512 | }
513 | 
514 | // Listen to key click
515 | 
516 | function listenForSettings() {
517 |     document.onkeyup = event => {
518 |         // Show the settings if ctrl and , is pressed
519 |         if (event.ctrlKey && event.which == 188)
520 |             showSettings();
521 |     }
522 | }
523 | 
524 | // Handle the settings cog
525 | 
526 | function enableCog() {
527 |     /**
528 |      * Enable the settings cog.
529 |      *
530 |      * It will be disabled by default, however, if the user
531 |      * wishes to enable it through the config, it will be shown.
532 |      *
533 |      * Once shown, we need to add some event listeners to it as
534 |      * well so it works the right way.
535 |      */
536 |     settingsCogElement = document.getElementById("settings-cog");
537 | 
538 |     // Unhide it
539 |     settingsCogElement.style.display = "block";
540 | 
541 |     // Add event listener
542 |     settingsCogElement.onclick = function() {
543 |         editor = showSettings()
544 | 
545 |         // Add an onclick listener to hide settings if the button is clicked
546 |         // again.
547 |         settingsCogElement.onclick = () => {
548 |             hideSettings(editor);
549 |         }
550 |     }
551 | }
552 | 


--------------------------------------------------------------------------------
/js/settings.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * File to handle editing the settings from the menu itself.
 3 |  * 
 4 |  * A modal will be shown where the user can edit settings
 5 |  * and finally when submitted, the settings will be written to
 6 |  * the config.json and this config is read each time the page
 7 |  * loads.
 8 |  */
 9 | 
10 | modalId = "settings"
11 | closeId = "close"
12 | jsonContainer = "jsoneditor"
13 | 
14 | // Detect browser
15 | BROWSER = detectBrowser()
16 | 
17 | function showSettings() {
18 |     modalEl = document.getElementById(modalId)
19 |     closeBtn = document.getElementsByClassName(closeId)[0]
20 |     modalEl.style.display = "block"
21 | 
22 |     // Define the jsonEditor
23 |     container = document.getElementById(jsonContainer)
24 |     const options = {
25 |         mode: 'tree',
26 |         modes: ['code', 'tree', 'view']
27 |     }
28 |     const editor = new JSONEditor(container, options)
29 |     loadJson(editor)
30 | 
31 |     closeBtn.onclick = () => {
32 |         hideSettings(editor);
33 |     }
34 | 
35 |     return editor
36 | }
37 | 
38 | function hideSettings(editor) {
39 |     /**
40 |      * Hide the settings.
41 |      * 
42 |      * This function is to be called when the settings window
43 |      * is supposed to be hidden, This will automatically
44 |      * handle saving the updated settings to the localstorage.
45 |      */
46 |     modalEl.style.display = "none"
47 |     // Get the updated JSON
48 |     updatedJson = editor.get()
49 |     BROWSER.storage.sync.set(updatedJson)
50 |     document.getElementById(jsonContainer).innerHTML = ""
51 |     location.reload()
52 | }
53 | 
54 | async function loadJson(editor) {
55 |     BROWSER.storage.sync.get(async result => {
56 |         if (Object.keys(result).length == 0) {
57 |             const response = await fetch("config.json")
58 |             result = await response.json()
59 |         }
60 |         // Populate the editor
61 |         editor.set(result)
62 |     })
63 | };
64 | 
65 | function detectBrowser() {
66 |     // Firefox
67 |     if (typeof InstallTrigger !== 'undefined')
68 |         BROWSER = browser
69 |     else if (!!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime))
70 |         BROWSER = chrome
71 | 
72 |     return BROWSER;
73 | };
74 | 


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "manifest_version": 2,
 3 |   "name": "minimal-startpage",
 4 |   "short_name": "minimal-startpage",
 5 |   "version": "0.2",
 6 |   "description": "Overrides the browsers newtab page with a custom startpage.",
 7 |   "author": "deepjyoti30",
 8 | 
 9 |   "icons": {
10 |     "64": "img/icon64.png"
11 |   },
12 |   "chrome_url_overrides": {
13 |     "newtab": "index.html"
14 |   },
15 |   "permissions": ["storage"]
16 | }
17 | 


--------------------------------------------------------------------------------
/scss/main.scss:
--------------------------------------------------------------------------------
  1 | $background: #282c34;
  2 | $foreground: #abb2bf;
  3 | @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
  4 | $media: #61afef;
  5 | $work: #e06c75;
  6 | $social: #e5c07b;
  7 | $others: #98c379;
  8 | $funky: #56b6c2;
  9 | $purple: #c678dd;
 10 | $upvoty: #FF8A65;
 11 | $indigo: #7986CB;
 12 | $foxxy: #A1887F;
 13 | 
 14 | .roboto {
 15 |     font-family: 'Roboto', sans-serif;
 16 | }
 17 | 
 18 | // JetBrains Mono
 19 | @font-face {
 20 |     font-family: "JetBrains Mono";
 21 |     src: url("../fonts/woff/JetBrainsMono-Regular.woff") format("woff"),
 22 |          url("../fonts/woff2/JetBrainsMono-Regular.woff2") format("woff2");
 23 | }
 24 | 
 25 | .jetbrains-mono {
 26 |     font-family: 'JetBrains Mono';
 27 | }
 28 | 
 29 | body {
 30 |     height: 97.5vh;
 31 |     display: flex;
 32 |     align-items: center;
 33 |     justify-content: center;
 34 |     background: $background;
 35 |     color: $foreground;
 36 |     @extend .jetbrains-mono;
 37 | }
 38 | 
 39 | .main {
 40 |     width: 100%;
 41 |     text-align: center;
 42 | 
 43 |     #date {
 44 |         h2 {
 45 |             padding-top: 15px;
 46 |             display: inline-block;
 47 |             vertical-align: top;
 48 |         }
 49 |     }
 50 | 
 51 |     #date-text, #weather-text {
 52 |         color: darken($foreground, 15);
 53 |     }
 54 | 
 55 |     #message-text {
 56 |         font-size: 23px;
 57 |     }
 58 | 
 59 |     #search-bar {
 60 |         width: 50%;
 61 |         margin: 0 auto 50px auto;
 62 |         height: 45px;
 63 |         padding-top: 35px;
 64 |         position: relative;
 65 |         display: inline-block;
 66 | 
 67 | 
 68 |         #search-bar-input {
 69 |             height: 50px;
 70 |             width: 100%;
 71 |             background: lighten($background, 5);
 72 |             box-shadow: none;
 73 |             border: none;
 74 |             text-align: center;
 75 |             border-radius: 6px;
 76 |             outline: none;
 77 |             padding: 7px 14px;
 78 |             font-size: 18px;
 79 |             color: $foreground;
 80 |             box-sizing: border-box;
 81 | 
 82 |             &:focus {
 83 |                 box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 84 |                 transition: all 0.3s cubic-bezier(.25,.8,.25,1);
 85 |             }
 86 |         }
 87 | 
 88 |         .autocomplete-items-container {
 89 |             position: absolute;
 90 |             top: 100%;
 91 |             left: 0;
 92 |             right: 0;
 93 |             z-index: 99;
 94 |             border-radius: 6px;
 95 |             background: lighten($background, 5);
 96 |             box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 97 |             transition: all 0.3s cubic-bezier(.25,.8,.25,1);
 98 | 
 99 |             .autocomplete-item {
100 |                 width: 100%;
101 |                 background: lighten($background, 5);
102 |                 box-shadow: none;
103 |                 border: none;
104 |                 text-align: center;
105 |                 outline: none;
106 |                 padding: 7px 14px;
107 |                 font-size: 18px;
108 |                 color: $foreground;
109 |                 box-sizing: border-box;
110 |                 z-index: -1;
111 |                 cursor: pointer;
112 | 
113 |                 &:hover {
114 |                     background: lighten($background, 10);
115 |                 }
116 |             }
117 | 
118 |             .autocomplete-active {
119 |                 background: lighten($background, 8);
120 |             }
121 |         }
122 | 
123 |         @media only screen and (max-width: 791px) {
124 |             width: 65%;
125 |         }
126 |     }
127 | 
128 |     #other-content {
129 |         margin: 40px auto;
130 |         padding: 10px 0;
131 | 
132 |         .sqr {
133 |             vertical-align: top;
134 |             display: inline-block;
135 |             margin-left: 5px;
136 |             margin-right: 5px;
137 |             width: 170px;
138 |             background: lighten($background, 5);
139 |             padding: 15px 15px;
140 |             border-radius: 6px;
141 |             min-height: 150px;
142 |             margin-top: 10px;
143 | 
144 |             h4 {
145 |                 font-size: 18px;
146 |                 margin: 15px;
147 | 
148 |                 a {
149 |                     color: inherit;
150 |                     font-size: inherit;
151 |                 }
152 |           }
153 | 
154 |             &:hover {
155 |                 box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
156 |                 transition: all 0.3s cubic-bezier(.25,.8,.25,1);
157 |             }
158 | 
159 |             a {
160 |                 color: #9E9E9E;
161 |                 font-size: 16px;
162 |                 transition: .1s ease-in;
163 |                 display: block;
164 |                 text-decoration: none;
165 |                 line-height: 22px;
166 | 
167 |                 &:hover {
168 |                     color: $foreground;
169 |                     text-decoration: none;
170 |                     transition: .1s ease-in;
171 |                 }
172 |             }
173 |         }
174 | 
175 |         .media {
176 |             h4, a:hover {
177 |                 color: $media;
178 |             }
179 |         }
180 | 
181 |         .work {
182 |             h4, a:hover {
183 |                 color: $work;
184 |             }
185 |         }
186 | 
187 |         .social {
188 |             h4, a:hover {
189 |                 color: $social;
190 |             }
191 | 
192 |         }
193 | 
194 |         .others {
195 |             h4, a:hover {
196 |                 color: $others;
197 |             }
198 |         }
199 | 
200 |         .funky {
201 |             h4, a:hover {
202 |                 color: $funky;
203 |             }
204 |         }
205 | 
206 |         .purple {
207 |             h4, a:hover {
208 |                 color: $purple;
209 |             }
210 |         }
211 | 
212 |         .upvoty {
213 |             h4, a:hover {
214 |                 color: $upvoty;
215 |             }
216 |         }
217 | 
218 |         .indigo {
219 |             h4, a:hover {
220 |                 color: $indigo;
221 |             }
222 |         }
223 | 
224 |         .foxxy {
225 |             h4, a:hover {
226 |                 color: $foxxy;
227 |             }
228 |         }
229 |     }
230 | }
231 | 
232 | .settings-modal {
233 |     display: none;
234 |     position: fixed;
235 |     z-index: 3;
236 |     width: 80vw;
237 |     height: 80vh;
238 |     overflow: auto;
239 |     background: $foreground;
240 |     color: #212121;
241 |     padding: 15px;
242 | 
243 |     .modal-content {
244 |         width: 100%;
245 |         height: 100%;
246 |     }
247 | 
248 |     .close {
249 |         color: #aaa;
250 |         float: right;
251 |         font-size: 28px;
252 |         font-weight: bold;
253 | 
254 |         &:hover, &:focus {
255 |             color: black;
256 |             text-decoration: none;
257 |             cursor: pointer;
258 |             }
259 |       }
260 | }
261 | 
262 | #settings-cog {
263 |     width: 23px;
264 |     height: 23px;
265 |     position: absolute;
266 |     bottom: 25px;
267 |     right: 25px;
268 |     transition: 2s ease-in;
269 |     display: none;
270 | 
271 |     &:hover .cog {
272 |         fill: white;
273 |         stroke: white;
274 |         transition: 2s ease-in;
275 |     }
276 | }
277 | 


--------------------------------------------------------------------------------