diff options
Diffstat (limited to 'scripts/theme-studio/theme-studio.template.html')
| -rw-r--r-- | scripts/theme-studio/theme-studio.template.html | 104 |
1 files changed, 104 insertions, 0 deletions
diff --git a/scripts/theme-studio/theme-studio.template.html b/scripts/theme-studio/theme-studio.template.html new file mode 100644 index 000000000..a6f50beb7 --- /dev/null +++ b/scripts/theme-studio/theme-studio.template.html @@ -0,0 +1,104 @@ +<!doctype html><meta charset=utf-8><title>theme-studio</title> +<style> +STYLES_CSS</style> +<div class="topbar"> + <h1 id="pagetitle">Untitled: theme</h1> + <div class="saveload"> + <div class="filebar end"> + <label style="color:#b4b1a2">theme name</label><input type="text" id="themename" value="" placeholder="untitled" oninput="updateTitle()" style="background:#161412;border:1px solid #252321;color:#cdced1;border-radius:4px;padding:5px 8px;font:10pt monospace;width:200px"> + <button onclick="exportTheme()">⬇ export</button> + <button class="fbtn" onclick="importTheme()">⬆ import</button><input type="file" id="fileinput" accept=".json" onchange="importFile(event)" style="display:none"> + <button id="jsonbtn" onclick="toggleJSON()">show</button> + </div> + <textarea id="export" style="display:none" readonly></textarea> + </div> +</div> + <section class="pane grow"> + <h1>palette</h1> + <div class="palctl"> + <div id="swatch" class="swatch" title="open color picker"></div> + <input type="text" id="newhexstr" placeholder="#rrggbb" value="#67809c" oninput="syncHex()" onkeydown="if(event.key==='Enter')applyEdit()" style="width:110px"> + <input type="text" id="newname" placeholder="name" onkeydown="if(event.key==='Enter')applyEdit()"> + <button onclick="addColor()">+ add color</button> + <button onclick="updateColor()">↻ update selected</button> + <button onclick="clearPalette()" title="remove every palette color except the bg and fg tiles">clear palette</button> + <span id="palmsg"></span> + <div id="picker" class="picker"> + <div class="prow"> + <div id="sv" class="sv"><canvas id="svmask" class="svmask"></canvas><div id="svsafe" class="svsafe" style="display:none"></div><div id="svcur" class="svcur"></div></div> + <div id="hue" class="hue"><div id="huecur" class="huecur"></div></div> + </div> + <div class="pmodel">edit <button data-pm="hsv" class="on">HSV</button><button data-pm="oklch">OKLCH</button></div> + <div class="pmodel" title="in OKLCH mode, shade the lightness too light to keep this overlay face readable over its foreground set">safe for <select id="safefor" onchange="setSafeFace(this.value)"><option value="">none</option></select></div> + <div class="oklchctl" id="oklchctl"> + <div class="ocrow"><label title="perceptual lightness">L</label><input type="range" id="okL" min="0" max="1" step="0.001"><input type="number" id="okLn" min="0" max="1" step="0.001"></div> + <div class="ocrow"><label title="chroma (colorfulness)">C</label><input type="range" id="okC" min="0" max="0.4" step="0.001"><input type="number" id="okCn" min="0" max="0.4" step="0.001"></div> + <div class="ocrow"><label title="hue angle, degrees">H</label><input type="range" id="okH" min="0" max="360" step="1"><input type="number" id="okHn" min="0" max="360" step="1"></div> + <div class="pclamp" id="pkclamp"></div> + </div> + <div class="pinfo"><span id="pkhex">#67809c</span><span id="pkcon"></span></div> + <div class="pinfo2"><span id="pkoklch" title="OKLCH perceptual coordinates: lightness L (0..1), chroma C, hue H in degrees"></span><span id="pkapca"></span></div> + <div class="pmode">limit <button data-m="any" class="on">any</button><button data-m="aa">AA+</button><button data-m="aaa">AAA</button></div> + <div id="pkchips" class="pkchips"></div> + </div> + </div> + <div class="genctl" id="genctl"> + <div class="genrow"> + <label>intent <select id="genintent"></select></label> + <label>vibe <select id="genvibe"></select></label> + <label>source <select id="gensource"></select></label> + <label title="how many base columns to propose">accent count <input id="genaccents" type="number" min="1" max="12" step="1" value="5"></label> + <label>contrast <select id="gencontrast"></select></label> + <button onclick="previewGenerator()">preview</button> + <button onclick="clearGeneratorPreview()">clear preview</button> + <span id="genmsg"></span> + </div> + <div id="genpreview" class="genpreview"></div> + </div> + <div class="pals" id="pals"></div> + </section> +<h1>assignment</h1> +<div class="pkgbar"><label style="color:#b4b1a2">view</label><button id="viewprev" class="viewnav" title="previous in the list" onclick="stepView(-1)">‹</button><select id="viewsel" class="chip" style="width:auto;font:bold 10pt monospace" onchange="onViewChange()"></select><button id="viewnext" class="viewnav" title="next in the list" onclick="stepView(1)">›</button></div> +<div id="view-code" class="viewblock"> +<div class="cols"> + <section class="pane"> + <div class="legctl"><button id="syntaxlocktoggle" class="fbtn" onclick="toggleAllLocks('syntax')" title="lock or unlock every syntax row">lock all</button><button id="syntaxexpandall" class="fbtn" onclick="toggleAllExpanded('syntaxexpandall')" title="expand or collapse every row's detail">▶ expand all</button><button class="fbtn" onclick="resetUnlocked()" title="reset to captured defaults, preserving locked rows">↻ reset</button><button class="fbtn" onclick="clearUnlocked()" title="erase, preserving locked rows">erase</button></div> + <table class="leg" id="legtable"><thead><tr><th title="lock a decided element↔color association"></th><th onclick="srtTable('legbody',1)">elements △</th><th onclick="srtTable('legbody',2)">fg △</th><th onclick="srtTable('legbody',3)">bg △</th><th>style</th><th title="face :box (border)">box</th><th title="WCAG contrast of this color on the background">contrast</th><th>example</th></tr></thead><tbody id="legbody"></tbody></table> + </section> + <section class="pane grow"> + <div class="langbar"><label style="color:#b4b1a2">language</label><button id="langprev" class="viewnav" title="previous in the list" onclick="stepLang(-1)">‹</button><select id="langsel" class="chip" style="width:auto;font:bold 10pt monospace" onchange="renderCode();buildPkgPreview()"></select><button id="langnext" class="viewnav" title="next in the list" onclick="stepLang(1)">›</button></div> + <pre id="codepre"></pre> + </section> +</div> +</div> +<div id="view-ui" class="viewblock" style="display:none"> +<div class="cols stretch"> + <section class="pane"> + <div class="legctl"><button id="uilocktoggle" class="fbtn" onclick="toggleAllLocks('ui')" title="lock or unlock every UI face row">lock all</button><button id="uiexpandall" class="fbtn" onclick="toggleAllExpanded('uiexpandall')" title="expand or collapse every row's detail">▶ expand all</button><button class="fbtn" onclick="resetUnlockedUI()" title="reset to captured defaults, preserving locked rows">↻ reset</button><button class="fbtn" onclick="clearUnlockedUI()" title="erase, preserving locked rows">erase</button></div> + <table class="leg" id="uitable"><thead><tr><th title="lock a decided face"></th><th onclick="srtTable('uibody',1)">face △</th><th onclick="srtTable('uibody',2)" title="foreground">fg △</th><th onclick="srtTable('uibody',3)" title="background">bg △</th><th>style</th><th title="face :box (border)">box</th><th onclick="srtTable('uibody',6)" title="WCAG contrast: this face's foreground on its background (or the ground)">contrast △</th><th>preview</th></tr></thead><tbody id="uibody"></tbody></table> + </section> + <section class="pane grow" style="display:flex;flex-direction:column"> + <div class="langbar"><label style="color:#b4b1a2">live buffer preview</label></div> + <div id="mockframe" class="mock"></div> + </section> +</div> +</div> +<div id="view-pkg" class="viewblock" style="display:none"> +<div class="pkgbar"> + <label style="color:#b4b1a2">filter</label><input id="pkgfilter" type="text" placeholder="face name" oninput="buildPkgTable()" style="background:#161412;border:1px solid #252321;color:#cdced1;border-radius:4px;padding:5px 8px;font:10pt monospace;width:160px"> + <button onclick="resetApp()" title="reset to captured defaults, preserving locked rows">↻ reset</button> + <button id="pkglocktoggle" class="fbtn" onclick="toggleAllLocks('pkg')" title="lock or unlock every face row in the current package">lock all</button><button id="pkgexpandall" class="fbtn" onclick="toggleAllExpanded('pkgexpandall')" title="expand or collapse every row's detail">▶ expand all</button> + <button class="fbtn" onclick="clearUnlockedPkg()" title="erase, preserving locked rows">erase</button> +</div> +<div class="cols stretch"> + <section class="pane"> + <table class="leg" id="pkgtable"><thead><tr><th title="lock a decided face"></th><th onclick="srtTable('pkgbody',1)">face △</th><th onclick="srtTable('pkgbody',2)">fg △</th><th onclick="srtTable('pkgbody',3)">bg △</th><th>style</th><th title="face :box (border)">box</th><th onclick="srtTable('pkgbody',6)">contrast △</th></tr></thead><tbody id="pkgbody"></tbody></table> + </section> + <section class="pane grow" style="display:flex;flex-direction:column"> + <div class="langbar"><label id="pkgprevlabel" style="color:#b4b1a2">preview</label></div> + <div id="pkgpreview" class="mock" style="overflow:auto;min-height:60vh"></div> + </section> +</div> +</div> +<script> +APP_JS</script> |