remove settings-design-playground.html
This commit is contained in:
parent
a9ea99c104
commit
af23a63a73
1 changed files with 0 additions and 337 deletions
|
|
@ -1,337 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Settings UI Design Playground</title>
|
||||
<style>
|
||||
:root {
|
||||
--color-base: #f5f5f5;
|
||||
--color-base-font: #444;
|
||||
--color-base-background: #fff;
|
||||
--color-header-background: #f7f7f7;
|
||||
--color-header-border: #ddd;
|
||||
--color-search-border: #bbb;
|
||||
--color-search-focus: #3498db;
|
||||
--color-link: #3498db;
|
||||
--color-sidebar-background: #f7f7f7;
|
||||
--color-sidebar-border: #ddd;
|
||||
--color-pagination-border: #ddd;
|
||||
--color-suggestion: #666;
|
||||
--color-footer: #888;
|
||||
--color-btn-background: #fff;
|
||||
--color-btn-border: #ddd;
|
||||
--color-btn-hover: #eee;
|
||||
--color-result-border: #eee;
|
||||
--radius: 4px;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-base: #222;
|
||||
--color-base-font: #dcdcdc;
|
||||
--color-base-background: #2b2b2b;
|
||||
--color-header-background: #333;
|
||||
--color-header-border: #444;
|
||||
--color-search-border: #555;
|
||||
--color-search-focus: #5dade2;
|
||||
--color-link: #5dade2;
|
||||
--color-sidebar-background: #333;
|
||||
--color-sidebar-border: #444;
|
||||
--color-pagination-border: #444;
|
||||
--color-suggestion: #999;
|
||||
--color-footer: #666;
|
||||
--color-btn-background: #333;
|
||||
--color-btn-border: #555;
|
||||
--color-btn-hover: #444;
|
||||
--color-result-border: #3a3a3a;
|
||||
}
|
||||
}
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
html { font-size: 16px; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
color: var(--color-base-font);
|
||||
background: var(--color-base);
|
||||
line-height: 1.6;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.playground { display: grid; grid-template-columns: 260px 1fr; gap: 1.5rem; padding: 1.5rem; max-width: 1100px; margin: 0 auto; width: 100%; }
|
||||
.controls { background: var(--color-base-background); border: 1px solid var(--color-sidebar-border); border-radius: var(--radius); padding: 1rem; height: fit-content; position: sticky; top: 1rem; }
|
||||
.preview-area { display: flex; flex-direction: column; gap: 1rem; }
|
||||
.prompt-box { background: #1a1a2e; color: #a8dadc; padding: 1rem; border-radius: var(--radius); font-family: monospace; font-size: 0.8rem; white-space: pre-wrap; min-height: 80px; position: relative; }
|
||||
.prompt-box button { position: absolute; top: 0.5rem; right: 0.5rem; background: #3498db; color: white; border: none; padding: 0.3rem 0.7rem; border-radius: 3px; cursor: pointer; font-size: 0.75rem; }
|
||||
.prompt-box button:hover { background: #2980b9; }
|
||||
.control-group { margin-bottom: 1rem; }
|
||||
.control-group:last-child { margin-bottom: 0; }
|
||||
.control-label { font-size: 0.8rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--color-base-font); }
|
||||
select, input[type="range"] { width: 100%; }
|
||||
select { padding: 0.4rem; border: 1px solid var(--color-sidebar-border); border-radius: 3px; background: var(--color-base-background); color: var(--color-base-font); font-size: 0.85rem; }
|
||||
input[type="range"] { -webkit-appearance: none; height: 6px; background: var(--color-pagination-border); border-radius: 3px; outline: none; }
|
||||
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; background: var(--color-link); border-radius: 50%; cursor: pointer; }
|
||||
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 0.3rem 0; }
|
||||
.toggle { position: relative; width: 40px; height: 22px; }
|
||||
.toggle input { opacity: 0; width: 0; height: 0; }
|
||||
.toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--color-pagination-border); border-radius: 22px; transition: 0.2s; }
|
||||
.toggle-slider::before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: 0.2s; }
|
||||
.toggle input:checked + .toggle-slider { background: var(--color-link); }
|
||||
.toggle input:checked + .toggle-slider::before { transform: translateX(18px); }
|
||||
.preset-row { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; }
|
||||
.preset-btn { padding: 0.3rem 0.7rem; font-size: 0.75rem; border: 1px solid var(--color-sidebar-border); border-radius: 3px; background: var(--color-btn-background); color: var(--color-base-font); cursor: pointer; }
|
||||
.preset-btn:hover { background: var(--color-btn-hover); }
|
||||
.preset-btn.active { background: var(--color-link); color: white; border-color: var(--color-link); }
|
||||
.mock-page { background: var(--color-base-background); border: 1px solid var(--color-sidebar-border); border-radius: var(--radius); overflow: hidden; position: relative; }
|
||||
.mock-header { background: var(--color-header-background); border-bottom: 1px solid var(--color-header-border); padding: 0.6rem 1rem; display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; }
|
||||
.mock-search-bar { padding: 0.6rem 1rem; border-bottom: 1px solid var(--color-sidebar-border); }
|
||||
.mock-search-bar input { width: 100%; padding: 0.5rem; border: 1px solid var(--color-search-border); border-radius: var(--radius); font-size: 0.85rem; background: var(--color-base-background); color: var(--color-base-font); }
|
||||
.mock-content { display: flex; min-height: 280px; }
|
||||
.mock-sidebar { width: 160px; background: var(--color-sidebar-background); border-right: 1px solid var(--color-sidebar-border); padding: 1rem; font-size: 0.8rem; }
|
||||
.mock-main { flex: 1; padding: 1rem; }
|
||||
.result-demo { border-bottom: 1px solid var(--color-result-border); padding: 0.5rem 0; }
|
||||
.gear-btn { background: none; border: none; font-size: 1.1rem; cursor: pointer; padding: 0.3rem; border-radius: 50%; }
|
||||
.gear-btn:hover { background: var(--color-sidebar-background); }
|
||||
.settings-panel { background: var(--color-base-background); border: 1px solid var(--color-sidebar-border); border-radius: var(--radius); overflow: hidden; }
|
||||
.settings-drawer { position: absolute; bottom: 0.8rem; right: 0.8rem; width: 300px; max-height: 420px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,0.15); border-radius: var(--radius); z-index: 50; }
|
||||
.settings-modal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.4); z-index: 50; }
|
||||
.settings-modal-inner { width: 380px; max-height: 480px; overflow-y: auto; border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0,0,0,0.2); }
|
||||
.settings-sidebar-panel { position: absolute; left: 0; top: 0; bottom: 0; width: 250px; background: var(--color-base-background); border-right: 1px solid var(--color-sidebar-border); overflow-y: auto; z-index: 50; }
|
||||
.settings-inline { margin-top: 0.8rem; border: 1px solid var(--color-sidebar-border); border-radius: var(--radius); }
|
||||
.settings-inline .panel-header { background: var(--color-header-background); border-bottom: 1px solid var(--color-sidebar-border); padding: 0.6rem 1rem; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; }
|
||||
.panel-header { background: var(--color-header-background); border-bottom: 1px solid var(--color-sidebar-border); padding: 0.75rem 1rem; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
|
||||
.close-btn { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--color-base-font); padding: 0 0.4rem; line-height: 1; }
|
||||
.panel-body { padding: 0.8rem; }
|
||||
.settings-section { margin-bottom: 1rem; }
|
||||
.settings-section:last-child { margin-bottom: 0; }
|
||||
.section-title { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-suggestion); margin-bottom: 0.6rem; }
|
||||
.setting-row { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0; border-bottom: 1px solid var(--color-result-border); }
|
||||
.setting-row:last-child { border-bottom: none; }
|
||||
.setting-label { font-size: 0.85rem; }
|
||||
.setting-desc { font-size: 0.7rem; color: var(--color-suggestion); }
|
||||
.engine-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; }
|
||||
.engine-toggle { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; padding: 0.25rem; border-radius: 3px; background: var(--color-sidebar-background); }
|
||||
.engine-toggle input { width: auto; }
|
||||
.engine-toggle span { flex: 1; }
|
||||
.theme-selector { display: flex; gap: 0.4rem; }
|
||||
.theme-btn { padding: 0.3rem 0.6rem; border: 1px solid var(--color-sidebar-border); border-radius: 3px; background: var(--color-btn-background); cursor: pointer; font-size: 0.75rem; }
|
||||
.theme-btn.active { background: var(--color-link); color: white; border-color: var(--color-link); }
|
||||
select.mini { width: 90px; font-size: 0.75rem; padding: 0.2rem 0.3rem; }
|
||||
.btn-save { width: 100%; padding: 0.5rem; background: var(--color-link); color: white; border: none; border-radius: var(--radius); cursor: pointer; font-size: 0.85rem; margin-top: 0.8rem; }
|
||||
.btn-save:hover { opacity: 0.9; }
|
||||
.range-value { font-size: 0.7rem; color: var(--color-suggestion); text-align: right; margin-top: 0.2rem; }
|
||||
.theme-dark { --color-base: #1a1a2e; --color-base-font: #e0e0e0; --color-base-background: #16213e; --color-header-background: #0f3460; --color-header-border: #1a4a7a; --color-search-border: #2a5a8a; --color-search-focus: #5dade2; --color-link: #5dade2; --color-sidebar-background: #0f3460; --color-sidebar-border: #1a4a7a; --color-pagination-border: #2a4a6a; --color-suggestion: #8a8a9a; --color-footer: #6a6a7a; --color-btn-background: #0f3460; --color-btn-border: #2a5a8a; --color-btn-hover: #1a4a7a; --color-result-border: #2a2a3a; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="playground">
|
||||
<div class="controls">
|
||||
<div class="preset-row">
|
||||
<button class="preset-btn active" data-preset="clean">Clean</button>
|
||||
<button class="preset-btn" data-preset="compact">Compact</button>
|
||||
<button class="preset-btn" data-preset="detailed">Detailed</button>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<div class="control-label">Access Pattern</div>
|
||||
<select id="accessPattern">
|
||||
<option value="drawer">Slide-out Drawer (bottom-right)</option>
|
||||
<option value="modal">Modal Overlay</option>
|
||||
<option value="sidebar">Sidebar Panel</option>
|
||||
<option value="inline">Inline Expansion</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<div class="control-label">Theme Preview</div>
|
||||
<select id="themePreview">
|
||||
<option value="light">Light Mode</option>
|
||||
<option value="dark">Dark Mode</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<div class="control-label">Trigger Button</div>
|
||||
<select id="triggerStyle">
|
||||
<option value="gear">Gear Icon</option>
|
||||
<option value="sliders">Sliders Icon</option>
|
||||
<option value="text">"Preferences" Text</option>
|
||||
<option value="cog-sliders">Combined</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<div class="control-label">Settings Density</div>
|
||||
<input type="range" id="density" min="0" max="2" value="1">
|
||||
<div class="range-value" id="densityLabel">Normal</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<div class="control-label">Animation</div>
|
||||
<div class="toggle-row">
|
||||
<span style="font-size: 0.85rem;">Enable transitions</span>
|
||||
<label class="toggle">
|
||||
<input type="checkbox" id="animations" checked>
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<div class="control-label">Sections to Show</div>
|
||||
<div class="toggle-row"><span style="font-size: 0.8rem;">Theme</span><label class="toggle"><input type="checkbox" class="section-toggle" data-section="theme" checked><span class="toggle-slider"></span></label></div>
|
||||
<div class="toggle-row"><span style="font-size: 0.8rem;">Engines</span><label class="toggle"><input type="checkbox" class="section-toggle" data-section="engines" checked><span class="toggle-slider"></span></label></div>
|
||||
<div class="toggle-row"><span style="font-size: 0.8rem;">Search Defaults</span><label class="toggle"><input type="checkbox" class="section-toggle" data-section="search" checked><span class="toggle-slider"></span></label></div>
|
||||
</div>
|
||||
<div style="margin-top: 1rem; padding: 0.7rem; background: var(--color-sidebar-background); border-radius: var(--radius); font-size: 0.75rem; color: var(--color-suggestion);">
|
||||
Click the gear button in the preview to toggle the settings panel.
|
||||
</div>
|
||||
</div>
|
||||
<div class="preview-area">
|
||||
<div class="prompt-box" id="promptBox">Update the settings UI to use a clean, minimal design with a slide-out drawer...</div>
|
||||
<div class="mock-page" id="mockPage">
|
||||
<div class="mock-header">
|
||||
<span>kafka</span>
|
||||
<button class="gear-btn" id="gearBtn">⚙</button>
|
||||
</div>
|
||||
<div class="mock-search-bar">
|
||||
<input type="text" value="golang metasearch engine" placeholder="Search…">
|
||||
</div>
|
||||
<div class="mock-content">
|
||||
<div class="mock-sidebar">
|
||||
<p><strong>Results</strong></p>
|
||||
<p style="color: var(--color-suggestion); font-size: 0.75rem; margin-top: 0.3rem;">About 42 results</p>
|
||||
<p style="margin-top: 0.8rem; font-size: 0.75rem;">Powered by kafka</p>
|
||||
</div>
|
||||
<div class="mock-main">
|
||||
<div class="result-demo">
|
||||
<div style="font-size: 1rem; color: var(--color-link);">github.com/golang/go</div>
|
||||
<div style="font-size: 0.8rem; color: var(--color-suggestion);">The Go Programming Language</div>
|
||||
</div>
|
||||
<div class="result-demo">
|
||||
<div style="font-size: 1rem; color: var(--color-link);">go.dev</div>
|
||||
<div style="font-size: 0.8rem; color: var(--color-suggestion);">Go land</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="settingsContainer" style="position: absolute; inset: 0; pointer-events: none;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const state = {
|
||||
accessPattern: 'drawer',
|
||||
themePreview: 'light',
|
||||
triggerStyle: 'gear',
|
||||
density: 1,
|
||||
animations: true,
|
||||
sections: { theme: true, engines: true, search: true },
|
||||
panelOpen: false
|
||||
};
|
||||
const triggerIcons = { gear: '\u2699', sliders: '\uD83D\uDD27', text: 'Preferences', 'cog-sliders': '\u2699\uD83D\uDD27' };
|
||||
const densityLabels = ['Compact', 'Normal', 'Detailed'];
|
||||
const densityPadding = ['0.5rem', '0.8rem', '1rem'];
|
||||
const engineCols = ['1fr 1fr 1fr', '1fr 1fr', '1fr'];
|
||||
|
||||
function updateAll() {
|
||||
renderPreview();
|
||||
updatePrompt();
|
||||
updatePresetButtons();
|
||||
}
|
||||
|
||||
function buildPanelBody() {
|
||||
const d = state.density;
|
||||
const densityFont = ['0.75rem', '0.85rem', '0.9rem'][d];
|
||||
const showDesc = d > 0;
|
||||
const showRPP = d === 2;
|
||||
let html = '';
|
||||
if (state.sections.theme) {
|
||||
html += '<div class="settings-section"><div class="section-title">Appearance</div><div class="setting-row"><div><div style="font-size:'+densityFont+';">Theme</div>'+(showDesc?'<div class="setting-desc">Color scheme</div>':'')+'</div><div class="theme-selector"><button class="theme-btn active" style="padding:0.25rem 0.5rem;">☼</button><button class="theme-btn" style="padding:0.25rem 0.5rem;">☾</button><button class="theme-btn" style="padding:0.25rem 0.5rem;">⌨</button></div></div></div>';
|
||||
}
|
||||
if (state.sections.engines) {
|
||||
const engines = ['Wikipedia','ArXiv','Crossref','Brave','Qwant','Duck','GitHub','Reddit','Bing'];
|
||||
let engHtml = '';
|
||||
for (let i = 0; i < engines.length; i++) {
|
||||
engHtml += '<label class="engine-toggle"><input type="checkbox" checked style="width:auto;"><span>'+engines[i]+'</span></label>';
|
||||
}
|
||||
html += '<div class="settings-section"><div class="section-title">Engines</div><div class="engine-grid" style="grid-template-columns:'+engineCols[d]+';gap:0.3rem;">'+engHtml+'</div></div>';
|
||||
}
|
||||
if (state.sections.search) {
|
||||
html += '<div class="settings-section"><div class="section-title">Search Defaults</div>';
|
||||
if (showRPP) html += '<div class="setting-row"><div><div style="font-size:0.85rem;">Results per page</div></div><select class="mini"><option>10</option><option>20</option><option>50</option></select></div>';
|
||||
html += '<div class="setting-row"><div><div style="font-size:'+densityFont+';">Safe search</div>'+(showDesc?'<div class="setting-desc">Filter adult content</div>':'')+'</div><select class="mini"><option>Moderate</option><option>Strict</option><option>Off</option></select></div>';
|
||||
html += '<div class="setting-row"><div><div style="font-size:'+densityFont+';">Default format</div>'+(showDesc?'<div class="setting-desc">Response format</div>':'')+'</div><select class="mini"><option>HTML</option><option>JSON</option><option>CSV</option></select></div>';
|
||||
html += '</div>';
|
||||
}
|
||||
html += '<button class="btn-save">Save Preferences</button>';
|
||||
return html;
|
||||
}
|
||||
|
||||
function renderPreview() {
|
||||
const page = document.getElementById('mockPage');
|
||||
const container = document.getElementById('settingsContainer');
|
||||
page.classList.toggle('theme-dark', state.themePreview === 'dark');
|
||||
document.getElementById('gearBtn').textContent = triggerIcons[state.triggerStyle];
|
||||
document.getElementById('densityLabel').textContent = densityLabels[state.density];
|
||||
if (!state.panelOpen) { container.innerHTML = ''; return; }
|
||||
const pad = densityPadding[state.density];
|
||||
let panelClass = 'settings-drawer';
|
||||
let inner = '';
|
||||
if (state.accessPattern === 'modal') { panelClass = 'settings-modal'; inner = '<div class="settings-modal-inner"><div class="panel-header">Preferences <button class="close-btn">\uD7</button></div><div class="panel-body" style="padding:'+pad+';">'+buildPanelBody()+'</div></div>'; }
|
||||
else if (state.accessPattern === 'sidebar') { panelClass = 'settings-sidebar-panel'; inner = '<div class="panel-header">Preferences</div><div class="panel-body" style="padding:'+pad+';">'+buildPanelBody()+'</div>'; }
|
||||
else if (state.accessPattern === 'inline') { container.style.pointerEvents = 'auto'; container.innerHTML = '<div style="padding:0 1rem;"><div class="settings-inline"><div class="panel-header">⚙ Preferences <span style="font-size:0.8rem;">▼</span></div><div class="panel-body" style="padding:'+pad+';display:none;">'+buildPanelBody()+'</div></div></div>'; return; }
|
||||
else { inner = '<div class="panel-header">Preferences <button class="close-btn">\uD7</button></div><div class="panel-body" style="padding:'+pad+';">'+buildPanelBody()+'</div>'; }
|
||||
container.style.pointerEvents = 'auto';
|
||||
container.innerHTML = '<div class="'+panelClass+'">'+inner+'</div>';
|
||||
}
|
||||
|
||||
function updatePrompt() {
|
||||
const parts = [];
|
||||
const patternNames = { drawer: 'slide-out drawer', modal: 'modal overlay', sidebar: 'sidebar panel', inline: 'inline expansion' };
|
||||
parts.push(patternNames[state.accessPattern] + ' access pattern');
|
||||
if (state.themePreview === 'dark') parts.push('dark mode preview');
|
||||
if (state.density === 0) parts.push('compact density');
|
||||
if (state.density === 2) parts.push('detailed density');
|
||||
if (!state.animations) parts.push('no animations');
|
||||
const secNames = { theme: 'Theme', engines: 'Engines', search: 'Search Defaults' };
|
||||
const activeSections = Object.entries(state.sections).filter(function(e){return e[1]}).map(function(e){return secNames[e[0]]});
|
||||
if (activeSections.length < 3) parts.push('only ' + activeSections.join(' and ') + ' sections');
|
||||
var prompt = 'Implement a settings/preferences UI for kafka with a ' + parts.join(', ') + '. The panel should appear when the user clicks the ' + triggerIcons[state.triggerStyle] + ' button in the header. Store preferences in localStorage.';
|
||||
document.getElementById('promptBox').textContent = prompt;
|
||||
}
|
||||
|
||||
function updatePresetButtons() {
|
||||
document.querySelectorAll('.preset-btn').forEach(function(btn) {
|
||||
var isActive = (btn.dataset.preset === 'clean' && state.accessPattern === 'drawer' && state.density === 1 && state.sections.theme && state.sections.engines && state.sections.search) ||
|
||||
(btn.dataset.preset === 'compact' && state.accessPattern === 'sidebar' && state.density === 0) ||
|
||||
(btn.dataset.preset === 'detailed' && state.accessPattern === 'modal' && state.density === 2);
|
||||
btn.classList.toggle('active', isActive);
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('accessPattern').addEventListener('change', function(e) { state.accessPattern = e.target.value; updateAll(); });
|
||||
document.getElementById('themePreview').addEventListener('change', function(e) { state.themePreview = e.target.value; updateAll(); });
|
||||
document.getElementById('triggerStyle').addEventListener('change', function(e) { state.triggerStyle = e.target.value; updateAll(); });
|
||||
document.getElementById('density').addEventListener('input', function(e) { state.density = parseInt(e.target.value); updateAll(); });
|
||||
document.getElementById('animations').addEventListener('change', function(e) { state.animations = e.target.checked; updateAll(); });
|
||||
document.querySelectorAll('.section-toggle').forEach(function(toggle) {
|
||||
toggle.addEventListener('change', function(e) { state.sections[e.target.dataset.section] = e.target.checked; updateAll(); });
|
||||
});
|
||||
document.querySelectorAll('.preset-btn').forEach(function(btn) {
|
||||
btn.addEventListener('click', function() {
|
||||
var p = btn.dataset.preset;
|
||||
if (p === 'clean') { state.accessPattern = 'drawer'; state.density = 1; state.sections = {theme:true, engines:true, search:true}; }
|
||||
if (p === 'compact') { state.accessPattern = 'sidebar'; state.density = 0; state.sections = {theme:true, engines:true, search:true}; }
|
||||
if (p === 'detailed') { state.accessPattern = 'modal'; state.density = 2; state.sections = {theme:true, engines:true, search:true}; }
|
||||
document.getElementById('accessPattern').value = state.accessPattern;
|
||||
document.getElementById('density').value = state.density;
|
||||
updateAll();
|
||||
});
|
||||
});
|
||||
document.getElementById('gearBtn').addEventListener('click', function() { state.panelOpen = !state.panelOpen; updateAll(); });
|
||||
document.getElementById('promptBox').insertAdjacentHTML('beforeend', '<button id="copyBtn">Copy</button>');
|
||||
document.getElementById('copyBtn').addEventListener('click', function() {
|
||||
var text = document.getElementById('promptBox').textContent;
|
||||
navigator.clipboard.writeText(text).then(function() {
|
||||
var btn = document.getElementById('copyBtn');
|
||||
btn.textContent = 'Copied!';
|
||||
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
|
||||
});
|
||||
});
|
||||
updateAll();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue