Kraft102's picture
feat(api): implement dynamic api configuration via options page
038a1a3
<!DOCTYPE html>
<html>
<head>
<title>WidgeTDC Options</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #0f172a;
color: #e2e8f0;
}
.container {
max-width: 400px;
margin: 0 auto;
}
h1 {
font-size: 18px;
border-bottom: 1px solid #334155;
padding-bottom: 10px;
}
label {
display: block;
margin-top: 15px;
margin-bottom: 5px;
font-size: 14px;
}
input {
width: 100%;
padding: 8px;
background: #1e293b;
border: 1px solid #334155;
color: white;
border-radius: 4px;
box-sizing: border-box;
}
button {
margin-top: 20px;
padding: 10px 20px;
background: #2563eb;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background: #1d4ed8;
}
#status {
margin-top: 10px;
font-size: 13px;
color: #4ade80;
height: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>WidgeTDC Settings</h1>
<label for="apiUrl">Backend API URL</label>
<input type="text" id="apiUrl" placeholder="http://localhost:3001">
<button id="save">Save Settings</button>
<div id="status"></div>
</div>
<script src="options.js"></script>
</body>
</html>