Skip to content

Commit 5cfcbc1

Browse files
SwapCodesDevSwapCodesDev
committed
Refactor index.html: Update layout and styling, replace old functionality with health check and documentation loading
1 parent 927f8b9 commit 5cfcbc1

File tree

1 file changed

+186
-71
lines changed

1 file changed

+186
-71
lines changed

‎api/index.html‎

Lines changed: 186 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,192 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Farmingo Crop Recommendation</title>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width,initial-scale=1" />
6+
<title>Farmingo API</title>
7+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
8+
<style>
9+
:root {
10+
--bg: #0b132b;
11+
--card: #1c2541;
12+
--accent: #6EE7B7;
13+
--offline: #ef4444;
14+
--online: #22c55e;
15+
--muted: #a1a8c3;
16+
--mono: ui-monospace, Menlo, monospace;
17+
color-scheme: dark;
18+
}
19+
20+
* { box-sizing: border-box; }
21+
22+
body {
23+
margin: 0;
24+
font-family: 'Inter', system-ui;
25+
background: var(--bg);
26+
color: #e5eef5;
27+
display: flex;
28+
justify-content: center;
29+
align-items: center;
30+
min-height: 100vh;
31+
padding: 20px;
32+
}
33+
34+
.card {
35+
background: var(--card);
36+
padding: 32px;
37+
border-radius: 20px;
38+
max-width: 600px;
39+
width: 100%;
40+
border: 1px solid rgba(255,255,255,0.08);
41+
box-shadow: 0 10px 25px rgba(0,0,0,0.5);
42+
text-align: left;
43+
transition: transform 0.3s ease, box-shadow 0.3s ease;
44+
}
45+
46+
.card:hover {
47+
transform: translateY(-5px);
48+
box-shadow: 0 15px 35px rgba(0,0,0,0.6);
49+
}
50+
51+
h1 {
52+
margin: 0 0 12px;
53+
font-size: 2rem;
54+
display: flex;
55+
align-items: center;
56+
gap: 12px;
57+
flex-wrap: wrap;
58+
}
59+
60+
.chip {
61+
display: inline-block;
62+
padding: 4px 10px;
63+
border-radius: 12px;
64+
background: rgba(255,255,255,0.1);
65+
font-size: 0.85rem;
66+
font-weight: 600;
67+
color: var(--accent);
68+
}
69+
70+
#desc {
71+
font-size: 1rem;
72+
color: var(--muted);
73+
margin-bottom: 16px;
74+
}
75+
76+
.status {
77+
display: flex;
78+
align-items: center;
79+
gap: 10px;
80+
margin-bottom: 24px;
81+
}
82+
83+
.status-chip {
84+
display: inline-flex;
85+
align-items: center;
86+
gap: 6px;
87+
padding: 4px 10px;
88+
border-radius: 12px;
89+
font-size: 0.85rem;
90+
font-weight: 600;
91+
color: #062414;
92+
background: var(--offline);
93+
transition: background 0.3s ease;
94+
}
95+
96+
.dot {
97+
width: 10px;
98+
height: 10px;
99+
border-radius: 50%;
100+
background: #fff;
101+
flex-shrink: 0;
102+
}
103+
104+
.btn {
105+
display: inline-block;
106+
padding: 12px 20px;
107+
border-radius: 12px;
108+
background: var(--accent);
109+
color: #062414;
110+
font-weight: 600;
111+
text-decoration: none;
112+
transition: background 0.3s ease, transform 0.2s ease;
113+
}
114+
115+
.btn:hover {
116+
background: #4ed2a6;
117+
transform: translateY(-2px);
118+
}
119+
120+
.btn.disabled {
121+
opacity: 0.5;
122+
pointer-events: none;
123+
}
124+
125+
.msg {
126+
color: var(--muted);
127+
font-size: 0.85rem;
128+
margin-top: 12px;
129+
}
130+
</style>
7131
</head>
8132
<body>
9-
<h2>Farmingo Crop Recommendation</h2>
10-
11-
<pre id="log"></pre>
12-
<pre id="response"></pre>
13-
<pre id="error" style="color:red;"></pre>
14-
15-
<script>
16-
const API_BASE = "https://swapcodes-farmingo.hf.space";
17-
18-
function log(msg) {
19-
document.getElementById("log").textContent += msg + "\n";
20-
}
21-
22-
async function getLocationAndSend() {
23-
log("Requesting browser location...");
24-
25-
navigator.geolocation.getCurrentPosition(async (pos) => {
26-
const lat = pos.coords.latitude;
27-
const lon = pos.coords.longitude;
28-
29-
log(`Location detected: ${lat}, ${lon}`);
30-
31-
// Step 1 → MUST send to /location
32-
log("Sending location to backend (/location)...");
33-
const locRes = await fetch(`${API_BASE}/location`, {
34-
method: "POST",
35-
headers: { "Content-Type": "application/json" },
36-
body: JSON.stringify({
37-
latitude: lat,
38-
longitude: lon,
39-
}),
40-
});
41-
42-
const locData = await locRes.json();
43-
log("Location saved on backend: " + JSON.stringify(locData));
44-
45-
// Step 2 → Call /recommend
46-
log("Calling /recommend...");
47-
const recRes = await fetch(`${API_BASE}/recommend`, {
48-
method: "POST",
49-
headers: { "Content-Type": "application/json" },
50-
body: JSON.stringify({
51-
auto_location: true,
52-
latitude: lat,
53-
longitude: lon
54-
}),
55-
});
56-
57-
const recData = await recRes.json();
58-
59-
if (!recRes.ok) {
60-
document.getElementById("error").textContent =
61-
"Server error: " + JSON.stringify(recData, null, 2);
62-
return;
63-
}
64-
65-
document.getElementById("response").textContent =
66-
JSON.stringify(recData, null, 2);
67-
},
68-
(err) => {
69-
document.getElementById("error").textContent =
70-
"Location permission denied: " + err.message;
71-
});
72-
}
73-
74-
window.onload = getLocationAndSend;
75-
</script>
133+
<div class="card">
134+
<h1 id="title">Loading... <span id="ver" class="chip"></span></h1>
135+
<div id="desc"></div>
136+
<div class="status">
137+
<span class="status-chip"><div id="dot" class="dot"></div><span id="statustxt">Checking...</span></span>
138+
</div>
139+
<a id="docsBtn" class="btn" href="https://swapcodes-farmingo.hf.space/docs" target="_blank">Open Docs</a>
140+
<div id="docsMsg" class="msg"></div>
141+
</div>
142+
143+
<script>
144+
const BASE = "https://swapcodes-farmingo.hf.space";
145+
146+
async function checkHealth(){
147+
try{
148+
const r = await fetch(BASE + "/health");
149+
if(!r.ok) throw 0;
150+
document.getElementById('dot').parentElement.style.background = getComputedStyle(document.documentElement).getPropertyValue('--online');
151+
document.getElementById('statustxt').textContent = "Online";
152+
}catch{
153+
document.getElementById('dot').parentElement.style.background = getComputedStyle(document.documentElement).getPropertyValue('--offline');
154+
document.getElementById('statustxt').textContent = "Offline";
155+
}
156+
}
157+
158+
async function checkDocs(){
159+
try{
160+
const r = await fetch(BASE + "/docs", { method:"GET" });
161+
if(r.status === 200){
162+
docsBtn.classList.remove("disabled");
163+
docsMsg.textContent = "";
164+
} else {
165+
throw 0;
166+
}
167+
} catch {
168+
docsBtn.classList.add("disabled");
169+
docsMsg.textContent = "Docs unavailable — contact admin";
170+
}
171+
}
172+
173+
async function loadInfo(){
174+
try{
175+
const r = await fetch(BASE + "/info");
176+
const data = await r.json();
177+
document.getElementById('title').childNodes[0].nodeValue = data.title || "Farmingo API" + ' ';
178+
document.getElementById('ver').textContent = data.version ? `v${data.version}` : "";
179+
document.getElementById('desc').textContent = data.description || "";
180+
}catch{
181+
document.getElementById('title').childNodes[0].nodeValue = "Farmingo API" + ' ';
182+
document.getElementById('ver').textContent = "";
183+
document.getElementById('desc').textContent = "";
184+
}
185+
}
186+
187+
checkHealth();
188+
checkDocs();
189+
loadInfo();
190+
</script>
76191
</body>
77192
</html>

0 commit comments

Comments
 (0)