diff options
Diffstat (limited to 'startpage.html')
| -rw-r--r-- | startpage.html | 323 |
1 files changed, 157 insertions, 166 deletions
diff --git a/startpage.html b/startpage.html index 68b490e..7b7c700 100644 --- a/startpage.html +++ b/startpage.html @@ -902,7 +902,7 @@ <div class="expandableMenu" id=${this.id + "-settings-menu"} style="display: block; margin: 0;"> <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)"> - <p>${this.name}: bookmarks</p> + <p>bookmarks</p> <p class="expandedMenuIndicator">+</p> </div> <div class="expandableMenu" id=${this.id + "-bookmark-menu"} > @@ -951,210 +951,201 @@ </div> </div> - <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)"> - <p>${this.name}: customize</p> + <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)"> + <p>color + shape options</p> <p class="expandedMenuIndicator">+</p> </div> <div class="expandableMenu"> - <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)"> - <p>header options</p> - <p class="expandedMenuIndicator">+</p> - </div> - <div class="expandableMenu"> + <p class="menuHeader">background color</p> + <div class="containerOptionListing"> + <label for=${this.id + "-settings-bg-color"}>set background color: </label> + <input id=${this.id + "-settings-bg-color"} type="color" /> + </div> - <p class="menuHeader">date + time options</p> - <div class="containerOptionListing"> - <label for=${this.id + "-settings-date-toggle"}>show date?</label> - <input id=${this.id + "-settings-date-toggle"} type="checkbox" /> - </div> - - <div class="containerOptionListing"> - <label for=${this.id + "-settings-clock-toggle"}>show clock?</label> - <input id=${this.id + "-settings-clock-toggle"} type="checkbox" /> - </div> + <div class="containerOptionListing"> + <label for=${this.id + "-settings-bg-alpha"}>set background opacity (%): </label> + <input id=${this.id + "-settings-bg-alpha"} type="range" min="0" max="100" /> + </div> - <br /> + <p class="menuHeader">layer shape</p> + <div class="containerOptionListing"> + <label for=${this.id + "-settings-border-radius"}>roundness: </label> + <input id=${this.id + "-settings-border-radius"} type="range" max="175" /> + </div> - <div class="containerOptionListing"> - <label for=${this.id + "-settings-clock-color"}>set header text color: </label> - <input id=${this.id + "-settings-clock-color"} type="color" /> - </div> - - <br /> + <p class="menuHeader">border</p> + <div class="containerOptionListing"> + <label for=${this.id + "-settings-border-color"}>set border color: </label> + <input id=${this.id + "-settings-border-color"} type="color" /> + </div> - <div class="containerOptionListing"> - <label>set header font size (px): </label> - <input id=${this.id + "-settings-clock-size"} /> - </div> + <div class="containerOptionListing"> + <label for=${this.id + "-settings-border-width"}>set border width: </label> + <input id=${this.id + "-settings-border-width"} type="range" min="0" max="100" /> + </div> - <div class="containerOptionListing"> - <label for=${this.id + "-settings-clock-bold"}>bold?</label> - <input id=${this.id + "-settings-clock-bold"} type="checkbox" /> - </div> + - <div class="containerOptionListing"> - <label for=${this.id + "-settings-clock-italic"}>italic?</label> - <input id=${this.id + "-settings-clock-italic"} type="checkbox" /> - </div> + <p class="menuHeader">shadow / glow</p> + <div class="containerOptionListing"> + <label for=${this.id + "-settings-shadow-color"}>shadow color: </label> + <input id=${this.id + "-settings-shadow-color"} type="color" /> + </div> - <p class="menuHeader">divider options</p> - <div class="containerOptionListing"> - <label for=${this.id + "-settings-divider-toggle"}>display divider?</label> - <input id=${this.id + "-settings-divider-toggle"} type="checkbox" /> - </div> + <div class="containerOptionListing"> + <label>shadow opacity:</label> + <input id=${this.id + "-settings-shadow-alpha"} type="range" min="0" max="100" /> + </div> - <div class="containerOptionListing"> - <label>divider color: </label> - <input id=${this.id + "-settings-divider-color"} type="color" /> - </div> - </div> + <br /> - <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)"> - <p>text options</p> - <p class="expandedMenuIndicator">+</p> - </div> - <div class="expandableMenu"> + <div class="containerOptionListing"> + <label for=${this.id + "-settings-shadow-x"}>shift shadow left/right: </label> + <input id=${this.id + "-settings-shadow-x"} type="range" min="-1000" max="1000" /> + </div> - <p class="menuHeader">section text options</p> - <div class="containerOptionListing"> - <label for=${this.id + "-settings-section-size"}>set section size (px): </label> - <input id=${this.id + "-settings-section-size"} /> - </div> + <div class="containerOptionListing"> + <label for=${this.id + "-settings-shadow-y"}>shift shadow up/down: </label> + <input id=${this.id + "-settings-shadow-y"} type="range" min="-1000" max="1000" /> + </div> - <div class="containerOptionListing"> - <label for=${this.id + "-settings-section-color"}>set section color: </label> - <input id=${this.id + "-settings-section-color"} type="color" /> - </div> + <br /> - <div class="containerOptionListing"> - <label for="sectionBoldToggle">bold?</label> - <input id=${this.id + "-settings-section-bold"} type="checkbox" /> - </div> + <div class="containerOptionListing"> + <label for=${this.id + "-settings-shadow-blur"}>shadow sharpness/fuzziness: </label> + <input id=${this.id + "-settings-shadow-blur"} type="range" min="0" max="200" /> + </div> + </div> - <div class="containerOptionListing"> - <label for="sectionItalicToggle">italic?</label> - <input id=${this.id + "-settings-section-italic"} type="checkbox" /> - </div> + <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)"> + <p>header text options</p> + <p class="expandedMenuIndicator">+</p> + </div> + <div class="expandableMenu"> - <p class="menuHeader">bookmark text options</p> - <div class="containerOptionListing"> - <label for=${this.id + "-settings-link-size"}>set link size (px): </label> - <input id=${this.id + "-settings-link-size"} /> - </div> + <p class="menuHeader">date + time options</p> + <div class="containerOptionListing"> + <label for=${this.id + "-settings-date-toggle"}>show date?</label> + <input id=${this.id + "-settings-date-toggle"} type="checkbox" /> + </div> + + <div class="containerOptionListing"> + <label for=${this.id + "-settings-clock-toggle"}>show clock?</label> + <input id=${this.id + "-settings-clock-toggle"} type="checkbox" /> + </div> - <div class="containerOptionListing"> - <label for=${this.id + "-settings-link-color"}>set link color: </label> - <input id=${this.id + "-settings-link-color"} type="color" /> - </div> + <br /> - <p class="menuHeader">layer-wide options</p> + <div class="containerOptionListing"> + <label for=${this.id + "-settings-clock-color"}>set header text color: </label> + <input id=${this.id + "-settings-clock-color"} type="color" /> + </div> - <div class="containerOptionListing"> - <div> - <p style="margin: 0;"> - change font:<br />(see help tab for more info)<br /> - </p> - </div> + <br /> - <div style="display: flex; flex-direction: column; align-items: end;"> - <input id=${this.id + "-settings-font-input"} /> - <br /> - <button id=${this.id + "-settings-set-font-button"}>set font</button> - <br /> - <b>current font:</b> - <span id=${this.id + "-settings-font-name"}></span> - </div> - </div> - <br /> - <div class="containerOptionListing" > - <p style="margin-top: 0;">align text:</p> + <div class="containerOptionListing"> + <label>set header font size (px): </label> + <input id=${this.id + "-settings-clock-size"} /> + </div> - <div style="display: flex; flex-direction: column; align-items: end;"> - <div> - <label for=${this.id + "-settings-left-align"}>left</label> - <input id=${this.id + "-settings-left-align"} type="radio" name="align" /> - </div> - <div> - <label for=${this.id + "-settings-center-align"}>center</label> - <input id=${this.id + "-settings-center-align"} type="radio" name="align" /> - </div> - <div> - <label for=${this.id + "-settings-right-align"}>right</label> - <input id=${this.id + "-settings-right-align"} type="radio" name="align" /> - </div> - </div> - </div> - </div> + <div class="containerOptionListing"> + <label for=${this.id + "-settings-clock-bold"}>bold?</label> + <input id=${this.id + "-settings-clock-bold"} type="checkbox" /> + </div> - <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)"> - <p>color + shape options</p> - <p class="expandedMenuIndicator">+</p> - </div> - <div class="expandableMenu"> + <div class="containerOptionListing"> + <label for=${this.id + "-settings-clock-italic"}>italic?</label> + <input id=${this.id + "-settings-clock-italic"} type="checkbox" /> + </div> - <p class="menuHeader">background color</p> - <div class="containerOptionListing"> - <label for=${this.id + "-settings-bg-color"}>set background color: </label> - <input id=${this.id + "-settings-bg-color"} type="color" /> - </div> + <p class="menuHeader">divider options</p> + <div class="containerOptionListing"> + <label for=${this.id + "-settings-divider-toggle"}>display divider?</label> + <input id=${this.id + "-settings-divider-toggle"} type="checkbox" /> + </div> - <div class="containerOptionListing"> - <label for=${this.id + "-settings-bg-alpha"}>set background opacity (%): </label> - <input id=${this.id + "-settings-bg-alpha"} type="range" min="0" max="100" /> - </div> + <div class="containerOptionListing"> + <label>divider color: </label> + <input id=${this.id + "-settings-divider-color"} type="color" /> + </div> + </div> - <p class="menuHeader">layer shape</p> - <div class="containerOptionListing"> - <label for=${this.id + "-settings-border-radius"}>roundness: </label> - <input id=${this.id + "-settings-border-radius"} type="range" max="175" /> - </div> + <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)"> + <p>general text options</p> + <p class="expandedMenuIndicator">+</p> + </div> + <div class="expandableMenu"> - <p class="menuHeader">border</p> - <div class="containerOptionListing"> - <label for=${this.id + "-settings-border-color"}>set border color: </label> - <input id=${this.id + "-settings-border-color"} type="color" /> - </div> + <p class="menuHeader">section text options</p> + <div class="containerOptionListing"> + <label for=${this.id + "-settings-section-size"}>set section size (px): </label> + <input id=${this.id + "-settings-section-size"} /> + </div> - <div class="containerOptionListing"> - <label for=${this.id + "-settings-border-width"}>set border width: </label> - <input id=${this.id + "-settings-border-width"} type="range" min="0" max="100" /> - </div> + <div class="containerOptionListing"> + <label for=${this.id + "-settings-section-color"}>set section color: </label> + <input id=${this.id + "-settings-section-color"} type="color" /> + </div> - + <div class="containerOptionListing"> + <label for="sectionBoldToggle">bold?</label> + <input id=${this.id + "-settings-section-bold"} type="checkbox" /> + </div> - <p class="menuHeader">shadow / glow</p> - <div class="containerOptionListing"> - <label for=${this.id + "-settings-shadow-color"}>shadow color: </label> - <input id=${this.id + "-settings-shadow-color"} type="color" /> - </div> + <div class="containerOptionListing"> + <label for="sectionItalicToggle">italic?</label> + <input id=${this.id + "-settings-section-italic"} type="checkbox" /> + </div> - <div class="containerOptionListing"> - <label>shadow opacity:</label> - <input id=${this.id + "-settings-shadow-alpha"} type="range" min="0" max="100" /> - </div> + <p class="menuHeader">bookmark text options</p> + <div class="containerOptionListing"> + <label for=${this.id + "-settings-link-size"}>set link size (px): </label> + <input id=${this.id + "-settings-link-size"} /> + </div> - <br /> + <div class="containerOptionListing"> + <label for=${this.id + "-settings-link-color"}>set link color: </label> + <input id=${this.id + "-settings-link-color"} type="color" /> + </div> - <div class="containerOptionListing"> - <label for=${this.id + "-settings-shadow-x"}>shift shadow left/right: </label> - <input id=${this.id + "-settings-shadow-x"} type="range" min="-1000" max="1000" /> - </div> + <p class="menuHeader">layer-wide options</p> - <div class="containerOptionListing"> - <label for=${this.id + "-settings-shadow-y"}>shift shadow up/down: </label> - <input id=${this.id + "-settings-shadow-y"} type="range" min="-1000" max="1000" /> + <div class="containerOptionListing"> + <div> + <p style="margin: 0;"> + change font:<br />(see help tab for more info)<br /> + </p> </div> - <br /> - - <div class="containerOptionListing"> - <label for=${this.id + "-settings-shadow-blur"}>shadow sharpness/fuzziness: </label> - <input id=${this.id + "-settings-shadow-blur"} type="range" min="0" max="200" /> + <div style="display: flex; flex-direction: column; align-items: end;"> + <input id=${this.id + "-settings-font-input"} /> + <br /> + <button id=${this.id + "-settings-set-font-button"}>set font</button> + <br /> + <b>current font:</b> + <span id=${this.id + "-settings-font-name"}></span> </div> - + </div> + <br /> + <div class="containerOptionListing" > + <p style="margin-top: 0;">align text:</p> - </div> + <div style="display: flex; flex-direction: column; align-items: end;"> + <div> + <label for=${this.id + "-settings-left-align"}>left</label> + <input id=${this.id + "-settings-left-align"} type="radio" name="align" /> + </div> + <div> + <label for=${this.id + "-settings-center-align"}>center</label> + <input id=${this.id + "-settings-center-align"} type="radio" name="align" /> + </div> + <div> + <label for=${this.id + "-settings-right-align"}>right</label> + <input id=${this.id + "-settings-right-align"} type="radio" name="align" /> + </div> + </div> + </div> </div> </div> |