92 lines
4.5 KiB
HTML
92 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { width: 400px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0a0a0a; color: #e5e5e5; padding: 16px; font-size: 13px; }
|
|
h2 { font-size: 16px; color: #6366f1; margin-bottom: 16px; font-weight: 700; }
|
|
.section { margin-bottom: 16px; padding: 12px; background: #171717; border-radius: 8px; border: 1px solid #262626; }
|
|
.section h3 { font-size: 13px; color: #d4d4d4; margin-bottom: 10px; font-weight: 600; }
|
|
.field { margin-bottom: 10px; }
|
|
.field:last-child { margin-bottom: 0; }
|
|
label { display: block; font-size: 11px; color: #a3a3a3; margin-bottom: 4px; font-weight: 500; }
|
|
input[type="text"], input[type="password"], textarea { width: 100%; padding: 7px 10px; background: #0a0a0a; border: 1px solid #404040; border-radius: 4px; color: #e5e5e5; font-size: 12px; font-family: inherit; outline: none; }
|
|
input:focus, textarea:focus { border-color: #6366f1; }
|
|
textarea { resize: vertical; min-height: 60px; font-family: 'SF Mono', 'Consolas', monospace; font-size: 11px; }
|
|
select { width: 100%; padding: 7px 10px; background: #0a0a0a; border: 1px solid #404040; border-radius: 4px; color: #e5e5e5; font-size: 12px; outline: none; }
|
|
.help { font-size: 10px; color: #737373; margin-top: 3px; }
|
|
.auth-status { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 4px; margin-bottom: 10px; font-size: 12px; }
|
|
.auth-status.authed { background: #052e16; border: 1px solid #166534; color: #4ade80; }
|
|
.auth-status.not-authed { background: #1e1b4b; border: 1px solid #3730a3; color: #a5b4fc; }
|
|
.btn-row { display: flex; gap: 8px; margin-top: 10px; }
|
|
button { padding: 7px 14px; border: none; border-radius: 5px; font-size: 12px; font-weight: 600; cursor: pointer; transition: opacity 0.15s; }
|
|
button:hover { opacity: 0.85; }
|
|
.btn-primary { background: #6366f1; color: #fff; }
|
|
.btn-secondary { background: #262626; color: #e5e5e5; border: 1px solid #404040; }
|
|
.btn-danger { background: #991b1b; color: #fca5a5; }
|
|
.btn-small { padding: 5px 10px; font-size: 11px; }
|
|
.status { margin-top: 12px; padding: 8px 10px; border-radius: 4px; font-size: 12px; display: none; }
|
|
.status.success { background: #052e16; border: 1px solid #166534; color: #4ade80; display: block; }
|
|
.status.error { background: #450a0a; border: 1px solid #991b1b; color: #fca5a5; display: block; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2>rSpace Web Clipper Settings</h2>
|
|
|
|
<div class="section">
|
|
<h3>Connection</h3>
|
|
<div class="field">
|
|
<label for="host">rSpace URL</label>
|
|
<input type="text" id="host" value="https://rspace.online" />
|
|
<div class="help">The URL of your rSpace instance</div>
|
|
</div>
|
|
<div class="field">
|
|
<label for="slug">Space slug</label>
|
|
<input type="text" id="slug" placeholder="my-space" />
|
|
<div class="help">Your space name in the URL (e.g. "my-space" from rspace.online/my-space)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Authentication</h3>
|
|
<div id="authStatus" class="auth-status not-authed">Not signed in</div>
|
|
<div id="loginSection">
|
|
<div class="field">
|
|
<label>Step 1: Sign in on rSpace</label>
|
|
<button class="btn-secondary btn-small" id="openSigninBtn">Open rSpace Sign-in</button>
|
|
<div class="help">Opens rSpace in a new tab. Sign in with your passkey.</div>
|
|
</div>
|
|
<div class="field">
|
|
<label for="tokenInput">Step 2: Paste your token</label>
|
|
<textarea id="tokenInput" placeholder="Paste your token here..."></textarea>
|
|
</div>
|
|
<div class="btn-row">
|
|
<button class="btn-primary" id="saveTokenBtn">Save Token</button>
|
|
</div>
|
|
</div>
|
|
<div id="loggedInSection" style="display: none;">
|
|
<button class="btn-danger btn-small" id="logoutBtn">Logout</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Default Notebook</h3>
|
|
<div class="field">
|
|
<label for="defaultNotebook">Save clips to</label>
|
|
<select id="defaultNotebook"><option value="">No default (choose each time)</option></select>
|
|
<div class="help">Pre-selected notebook when clipping</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="btn-row" style="justify-content: flex-end;">
|
|
<button class="btn-secondary" id="testBtn">Test Connection</button>
|
|
<button class="btn-primary" id="saveBtn">Save Settings</button>
|
|
</div>
|
|
|
|
<div id="status" class="status"></div>
|
|
|
|
<script src="options.js"></script>
|
|
</body>
|
|
</html>
|