adding browser extension and some QoL
This commit is contained in:
103
browser-extension/options/options.html
Normal file
103
browser-extension/options/options.html
Normal file
@@ -0,0 +1,103 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>f0ckm Extension Options</title>
|
||||
<link rel="stylesheet" href="options.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<img src="../icons/icon48.png" alt="f0ckm Icon" class="logo">
|
||||
<div>
|
||||
<h1>f0ckm Browser Integration Settings</h1>
|
||||
<p class="subtitle">Configure browser extension upload modes and API settings</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form id="settings-form">
|
||||
<div class="section">
|
||||
<h2>Integration Mode</h2>
|
||||
<div class="field-group">
|
||||
<label class="radio-label">
|
||||
<input type="radio" name="uploadMode" value="desktop" id="mode-desktop">
|
||||
<div class="radio-content">
|
||||
<strong>Desktop Application Integration (f0ckm://)</strong>
|
||||
<p>Delegates downloads & uploads directly to the KDE system tray app. Provides live tray digit icons, Spectacle notifications, sound effects, and local gallery history.</p>
|
||||
</div>
|
||||
</label>
|
||||
<label class="radio-label">
|
||||
<input type="radio" name="uploadMode" value="direct" id="mode-direct">
|
||||
<div class="radio-content">
|
||||
<strong>Direct Browser Extension API Upload</strong>
|
||||
<p>Uploads files directly from the browser background page using API URL and API Key set below.</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>API & Server Configuration</h2>
|
||||
<div class="field">
|
||||
<label for="apiUrl">API Endpoint URL</label>
|
||||
<input type="url" id="apiUrl" placeholder="https://your-f0ckm-instance.com/api/v2/upload">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="apiKey">API Key</label>
|
||||
<input type="password" id="apiKey" placeholder="Enter your secret API key">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Default Upload Preferences</h2>
|
||||
<div class="grid-2">
|
||||
<div class="field">
|
||||
<label for="rating">Default Rating</label>
|
||||
<select id="rating">
|
||||
<option value="">Default (Untagged)</option>
|
||||
<option value="sfw">Safe (sfw)</option>
|
||||
<option value="nsfw">Questionable (nsfw)</option>
|
||||
<option value="nsfl">Explicit (nsfl)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="visibility">Default Visibility</label>
|
||||
<select id="visibility">
|
||||
<option value="0">Public (0)</option>
|
||||
<option value="1">Unlisted (1)</option>
|
||||
<option value="2">Private (2)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="tags">Default Tags</label>
|
||||
<input type="text" id="tags" placeholder="e.g. browser, web, media">
|
||||
</div>
|
||||
|
||||
<div class="field-row">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="isOc">
|
||||
<span>Mark uploads as Original Content (OC)</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="urlType">Copied Link Format</label>
|
||||
<select id="urlType">
|
||||
<option value="post">f0ckm Post URL (Viewer page)</option>
|
||||
<option value="direct">Direct File Link (Raw image/media file)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<button type="submit" id="btn-save" class="btn-save">Save Settings</button>
|
||||
<span id="save-toast" class="toast hidden">✓ Settings saved successfully!</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script src="options.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user