-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.xhtml
144 lines (103 loc) · 5.07 KB
/
index.xhtml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="https://github.com/Amarok24/" />
<meta name="description" content="A simple JobSearch using the jobs.com API" />
<title>JobSearch</title>
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./css/index.css" />
<link rel="stylesheet" href="./css/styledForms.css" />
<script src="./js/index.js" type="module" defer="defer" async="async"></script>
<!-- As of 2020-10-02 JS modules are _still_ not directly supported in XHTML (XML)
documents in CHROMIUM-based browsers! See crbug.com/717643
(no problems in Firefox though).
There's one possibility to make it work - to use async="async".
//TODO: once Chromium bug is resolved delete async in above script.
//TODO: maybe even worse problem in Safari?
-->
</head>
<body>
<header class="topHeader">
<form>
<input type="text" id="inputTitle" inputmode="text" placeholder="Job Title" autofocus="autofocus" />
<input type="text" id="inputLocation" placeholder="Location" />
<input type="submit" value="SEARCH" id="searchButton" />
<label>Country  
<select id="countriesList">
<option value="US" selected="selected">US</option>
<option value="CA">CA</option>
<option value="DE">DE</option>
<option value="AT">AT</option>
<option value="GB">GB</option>
<option value="FR">FR</option>
<option value="ES">ES</option>
<option value="IT">IT</option>
<option value="CZ">CZ</option>
</select>
</label>
</form>
<button id="toggleResults" title="Show/hide sidebar">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-notes" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" /><rect x="5" y="3" width="14" height="18" rx="2" /><line x1="9" y1="7" x2="15" y2="7" /><line x1="9" y1="11" x2="15" y2="11" /><line x1="9" y1="15" x2="13" y2="15" /></svg>
<!-- Icon "notes.svg", source https://github.com/tabler/tabler-icons
License: MIT License, see icons/LICENSE.icons.txt -->
</button>
</header>
<div class="container">
<section class="intro" id="intro">
<h1>JobSearch</h1>
<div class="dividerBook">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M1200,0H0V120H281.94C572.9,116.24,602.45,3.86,602.45,3.86h0S632,116.24,923,120h277Z" class="shape-fill"></path>
</svg>
</div>
</section>
<output for="inputTitle inputLocation" class="messages" id="messages">
<!-- search result summary -->
</output>
<main class="gridWrapper">
<section class="searchResults" id="searchResults">
<!-- jobs search results here -->
</section>
<section class="jobHeader" id="jobHeader">
<div class="headerLogo">
<img src="icons/logo-placeholder-optim.svg" class="companyLogoBig" alt="Logo" />
</div>
<div class="headerText">
<h2>Title</h2>
<h3>Company name</h3>
<h4>Location</h4>
<span>Last update</span>
</div>
<div class="headerButton">
<a href="#" target="_blank">APPLY</a>
</div>
</section>
<section class="jobContent">
<div class="rawJobData" id="rawJobData">
<!-- raw job data injected by JS -->
</div>
</section>
</main>
</div>
<template id="templateJob">
<!-- template for job search result (left column) -->
<article class="job" data-jobid="0">
<h3>Job title</h3>
<h4 class="company">Company name</h4>
<h4 class="location">Location</h4>
<img src="icons/logo-placeholder-optim.svg" class="companyLogoSmall" alt="Logo" />
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<circle cx="12" cy="12" r="9" />
<polyline points="12 7 12 12 15 15" />
</svg> <span class="lastUpdate"></span>
<div class="summary"></div>
</article>
</template>
<button class="loadMoreButton" id="loadMoreButton">Load more…</button>
<!-- Icon source https://github.com/tabler/tabler-icons
License: MIT License, see icons/LICENSE.icons.txt -->
</body>
</html>