Hugging Face's logo

Spaces:
ShayanRl
/
form-request
Running

App Files Community
ShayanRl commited on
Commit
3ef2ec7
·
verified ·
1 Parent(s): da6139a

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +211 -19
index.html CHANGED
@@ -1,19 +1,211 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </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>Job Search API</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ body {
15
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
16
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
17
+ min-height: 100vh;
18
+ display: flex;
19
+ justify-content: center;
20
+ align-items: center;
21
+ padding: 20px;
22
+ }
23
+
24
+ .container {
25
+ background: white;
26
+ border-radius: 12px;
27
+ box-shadow: 0 20px 60px rgba(0,0,0,0.3);
28
+ padding: 40px;
29
+ max-width: 600px;
30
+ width: 100%;
31
+ }
32
+
33
+ h1 {
34
+ color: #333;
35
+ margin-bottom: 30px;
36
+ font-size: 28px;
37
+ }
38
+
39
+ .form-group {
40
+ margin-bottom: 20px;
41
+ }
42
+
43
+ label {
44
+ display: block;
45
+ margin-bottom: 8px;
46
+ color: #555;
47
+ font-weight: 500;
48
+ }
49
+
50
+ input {
51
+ width: 100%;
52
+ padding: 12px;
53
+ border: 2px solid #e0e0e0;
54
+ border-radius: 6px;
55
+ font-size: 16px;
56
+ transition: border-color 0.3s;
57
+ }
58
+
59
+ input:focus {
60
+ outline: none;
61
+ border-color: #667eea;
62
+ }
63
+
64
+ button {
65
+ width: 100%;
66
+ padding: 14px;
67
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
68
+ color: white;
69
+ border: none;
70
+ border-radius: 6px;
71
+ font-size: 16px;
72
+ font-weight: 600;
73
+ cursor: pointer;
74
+ transition: transform 0.2s, box-shadow 0.2s;
75
+ }
76
+
77
+ button:hover {
78
+ transform: translateY(-2px);
79
+ box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
80
+ }
81
+
82
+ button:active {
83
+ transform: translateY(0);
84
+ }
85
+
86
+ button:disabled {
87
+ opacity: 0.6;
88
+ cursor: not-allowed;
89
+ transform: none;
90
+ }
91
+
92
+ #result {
93
+ margin-top: 30px;
94
+ padding: 20px;
95
+ background: #f5f5f5;
96
+ border-radius: 6px;
97
+ display: none;
98
+ max-height: 400px;
99
+ overflow-y: auto;
100
+ }
101
+
102
+ #result.show {
103
+ display: block;
104
+ }
105
+
106
+ .error {
107
+ color: #d32f2f;
108
+ }
109
+
110
+ .success {
111
+ color: #2e7d32;
112
+ }
113
+
114
+ pre {
115
+ white-space: pre-wrap;
116
+ word-wrap: break-word;
117
+ font-size: 14px;
118
+ }
119
+ </style>
120
+ </head>
121
+ <body>
122
+ <div class="container">
123
+ <h1>Job Search API</h1>
124
+ <form id="searchForm">
125
+ <div class="form-group">
126
+ <label for="searchPhrase">Search Phrase</label>
127
+ <input type="text" id="searchPhrase" name="searchPhrase" value="Basis Ed Louisiana" required>
128
+ </div>
129
+
130
+ <div class="form-group">
131
+ <label for="pageStartIndex">Page Start Index</label>
132
+ <input type="number" id="pageStartIndex" name="pageStartIndex" value="11" min="0" required>
133
+ </div>
134
+
135
+ <div class="form-group">
136
+ <label for="pageEndIndex">Page End Index</label>
137
+ <input type="number" id="pageEndIndex" name="pageEndIndex" value="20" min="0" required>
138
+ </div>
139
+
140
+ <button type="submit" id="submitBtn">Search Jobs</button>
141
+ </form>
142
+
143
+ <div id="result"></div>
144
+ </div>
145
+
146
+ <script>
147
+ const form = document.getElementById('searchForm');
148
+ const resultDiv = document.getElementById('result');
149
+ const submitBtn = document.getElementById('submitBtn');
150
+
151
+ form.addEventListener('submit', async (e) => {
152
+ e.preventDefault();
153
+
154
+ const searchPhrase = document.getElementById('searchPhrase').value;
155
+ const pageStartIndex = parseInt(document.getElementById('pageStartIndex').value);
156
+ const pageEndIndex = parseInt(document.getElementById('pageEndIndex').value);
157
+
158
+ const requestBody = {
159
+ searchPhrase: searchPhrase,
160
+ filters: [
161
+ { name: "positionAreas", filters: [] },
162
+ { name: "gradeLevels", filters: [] },
163
+ { name: "jobTypes", filters: [] }
164
+ ],
165
+ pageStartIndex: pageStartIndex,
166
+ pageEndIndex: pageEndIndex
167
+ };
168
+
169
+ submitBtn.disabled = true;
170
+ submitBtn.textContent = 'Searching...';
171
+ resultDiv.classList.add('show');
172
+ resultDiv.innerHTML = '<p>Loading...</p>';
173
+
174
+ try {
175
+ const response = await fetch('https://api.k12jobspot.com/api/Jobs/Search', {
176
+ method: 'POST',
177
+ headers: {
178
+ 'Content-Type': 'application/json',
179
+ },
180
+ body: JSON.stringify(requestBody)
181
+ });
182
+
183
+ const data = await response.json();
184
+
185
+ if (response.ok) {
186
+ resultDiv.innerHTML = `
187
+ <h3 class="success">Success!</h3>
188
+ <p><strong>Status:</strong> ${response.status}</p>
189
+ <p><strong>Response:</strong></p>
190
+ <pre>${JSON.stringify(data, null, 2)}</pre>
191
+ `;
192
+ } else {
193
+ resultDiv.innerHTML = `
194
+ <h3 class="error">Error</h3>
195
+ <p><strong>Status:</strong> ${response.status}</p>
196
+ <pre>${JSON.stringify(data, null, 2)}</pre>
197
+ `;
198
+ }
199
+ } catch (error) {
200
+ resultDiv.innerHTML = `
201
+ <h3 class="error">Request Failed</h3>
202
+ <p>${error.message}</p>
203
+ `;
204
+ } finally {
205
+ submitBtn.disabled = false;
206
+ submitBtn.textContent = 'Search Jobs';
207
+ }
208
+ });
209
+ </script>
210
+ </body>
211
+ </html>