84 lines
3.6 KiB
HTML
84 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Settings</title>
|
|
<meta http-equiv="Content-Security-Policy" content="script-src 'self';">
|
|
<style>
|
|
body { font-family: sans-serif; margin: 20px; background-color: #f4f4f4; color: #333; }
|
|
.container { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
|
|
h1 { color: #333; }
|
|
.setting { margin-bottom: 15px; display: flex; align-items: center; }
|
|
.setting label { margin-left: 10px; flex-grow: 1;}
|
|
.setting input[type="checkbox"] { width: 18px; height: 18px; }
|
|
.section { margin-top: 20px; border-top: 1px solid #eee; padding-top: 20px; }
|
|
h2 { color: #555; margin-bottom: 10px;}
|
|
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
|
|
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
|
|
th { background-color: #f0f0f0; }
|
|
.actions button { margin-right: 5px; padding: 5px 10px; cursor: pointer; }
|
|
.add-provider-form input[type="text"] { padding: 8px; margin-right: 10px; border: 1px solid #ccc; border-radius: 4px; }
|
|
.add-provider-form button { padding: 8px 15px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Settings</h1>
|
|
|
|
<div class="section">
|
|
<h2>General</h2>
|
|
<div class="setting">
|
|
<input type="checkbox" id="autoHideEnabled">
|
|
<label for="autoHideEnabled">Auto-Hide on Focus Loss</label>
|
|
</div>
|
|
<div class="setting">
|
|
<input type="checkbox" id="reloadOnPasteEnabled">
|
|
<label for="reloadOnPasteEnabled">Reload on Screenshot/Paste</label>
|
|
</div>
|
|
<div class="setting">
|
|
<input type="checkbox" id="isAlwaysOnTop">
|
|
<label for="isAlwaysOnTop">Always on Top</label>
|
|
</div>
|
|
<div class="setting">
|
|
<input type="checkbox" id="isFrameVisible">
|
|
<label for="isFrameVisible">Show Title Bar (Requires Restart)</label>
|
|
</div>
|
|
<div class="setting">
|
|
<input type="checkbox" id="launchOnStartup">
|
|
<label for="launchOnStartup">Launch on Startup</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Current Provider</h2>
|
|
<div class="setting">
|
|
<select id="currentProviderSelect" style="padding: 8px; border-radius: 4px; border: 1px solid #ccc; width: 100%;">
|
|
<!-- Options will be populated by settingsRenderer.js -->
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Providers</h2>
|
|
<table id="providersTable">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>URL</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Provider rows will be inserted here -->
|
|
</tbody>
|
|
</table>
|
|
<div class="add-provider-form" style="margin-top: 15px;">
|
|
<input type="text" id="newProviderName" placeholder="Provider Name">
|
|
<input type="text" id="newProviderUrl" placeholder="Provider URL">
|
|
<button id="addProviderBtn">Add Provider</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="./src/settingsRenderer.js"></script>
|
|
</body>
|
|
</html>
|