89 lines
2.2 KiB
HTML
89 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Forage</title>
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
background: #0f0f0f;
|
|
color: #e0e0e0;
|
|
padding: 16px;
|
|
width: 280px;
|
|
}
|
|
h2 { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 12px; }
|
|
label {
|
|
display: block;
|
|
font-size: 0.75rem;
|
|
color: #888;
|
|
margin-bottom: 3px;
|
|
margin-top: 10px;
|
|
}
|
|
input[type=text],
|
|
input[type=number],
|
|
input[type=password] {
|
|
width: 100%;
|
|
background: #1a1a1a;
|
|
border: 1px solid #333;
|
|
color: #e0e0e0;
|
|
border-radius: 5px;
|
|
padding: 6px 8px;
|
|
font-size: 0.85rem;
|
|
}
|
|
input:focus { outline: none; border-color: #4ade80; }
|
|
.toggle-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 12px;
|
|
font-size: 0.85rem;
|
|
}
|
|
input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; accent-color: #4ade80; }
|
|
button {
|
|
margin-top: 14px;
|
|
width: 100%;
|
|
background: #1a2e1a;
|
|
border: 1px solid #4ade80;
|
|
color: #4ade80;
|
|
padding: 8px;
|
|
border-radius: 6px;
|
|
font-size: 0.85rem;
|
|
cursor: pointer;
|
|
}
|
|
button:hover { background: #223e22; }
|
|
#last-capture {
|
|
margin-top: 12px;
|
|
font-size: 0.72rem;
|
|
color: #555;
|
|
min-height: 18px;
|
|
line-height: 1.4;
|
|
}
|
|
#save-status { font-size: 0.74rem; color: #4ade80; margin-top: 6px; min-height: 16px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2>Forage</h2>
|
|
|
|
<label for="server">Server URL</label>
|
|
<input type="text" id="server" placeholder="http://localhost:4242">
|
|
|
|
<label for="user_id">User ID</label>
|
|
<input type="number" id="user_id" min="1" placeholder="1">
|
|
|
|
<label for="token">Token (optional)</label>
|
|
<input type="password" id="token" placeholder="Bearer token">
|
|
|
|
<div class="toggle-row">
|
|
<input type="checkbox" id="enabled">
|
|
<label for="enabled" style="margin: 0; color: #ccc;">Enable capture</label>
|
|
</div>
|
|
|
|
<button id="save">Save</button>
|
|
<div id="last-capture"></div>
|
|
<div id="save-status"></div>
|
|
|
|
<script src="popup.js"></script>
|
|
</body>
|
|
</html>
|