diff options
Diffstat (limited to 'startpage.html')
| -rw-r--r-- | startpage.html | 181 |
1 files changed, 98 insertions, 83 deletions
diff --git a/startpage.html b/startpage.html index e8df1a5..91090d8 100644 --- a/startpage.html +++ b/startpage.html @@ -144,9 +144,9 @@ color: black; } - /** #newTextContainerCreateButton, #newImageContainerCreateButton { - margin-top: .25rem; - } */ + #newTextContainerNameInput, #newImageContainerNameInput, #newImageContainerUrlInput { + margin-bottom: .25rem; + } #containers { padding-left: .25rem; @@ -214,6 +214,13 @@ align-items: center; padding: 1rem 1rem; } + + .newBookmarkForm { + display: flex; + flex-direction: column; + align-items: center; + gap: .25rem; + } .bookmarkListingContainer { display: flex; flex-direction: column; @@ -242,6 +249,7 @@ .containerOptionListing { display: flex; justify-content: space-between; + margin: .25rem 0; } #noContainerWarning { @@ -249,13 +257,7 @@ } input { - width: 4rem; - } - input[type="text"] { - width: 4rem; - } - input[type="color"] { - width: 4rem; + width: 6rem; } button { border: none; @@ -320,10 +322,10 @@ <p> you are now editing the page!<br /><br /> - this is the settings box - use the tabs above to find various + this is the configuration panel - use the tabs above to find various customization options for your startpage experience.<br /><br /> - this box is adjustable, and so will be every layer you add to the page. + this panel is adjustable, as every "layer" you add to the page will be as well. click + drag to move, right-click + drag to resize.<br /><br /> on the "layers" tab, you can add two types of layers to the page: @@ -331,19 +333,21 @@ <ol> <li> <b>bookmark layer:</b><br />a customizable box that can serve as a clock, - tell you the date, and/or hold bookmarks.<br /><br />to group a bookmarks - together within a layer, enter links with the same "section". + tell you the date, and/or hold bookmarks.<br /><br />to group multiple bookmarks + together, enter links with the same "section". uncategorized (no "section" specified) bookmarks will stay at the top of their layer. </li><br /> <li> <b>media layer:</b><br />paste any URL that either points directly to an image/GIF - or to a youtube video to add it to the page.<br /><br />use "free transform" in the - "global settings" tab to change the container's resizing style. + or to a youtube video to add it to the page. images/GIFs can act as bookmarks themselves. + <br /><br />use "free transform" in the "global settings" tab to toggle the resizing + mode on media containers. </li> </ol> <p> - <b>your changes will be saved to the page when you exit editing mode.</b><br /><br /> - to undo current changes / revert to the last saved state, refresh the page without disabling / exiting "editing" mode. + <b><u>your changes will be saved to the page when you exit editing mode!</u></b><br /><br /> + to undo current changes / revert to the last saved state, force refresh the page while still + editing the page. <br /><br /> that concludes the basics. there's some more advanced information below: @@ -406,7 +410,7 @@ </div> <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)"> - <p>sharing / backing pages up</p> + <p>sharing / backing up (import/export tab)</p> <p class="expandedMenuIndicator">+</p> </div> <div class="expandableMenu"> @@ -436,6 +440,8 @@ </button> </div> + <hr style="margin-top: 2rem" /> + <div style="display:flex;flex-direction:column;align-items:center;"> <h2 class="menuHeader">add media layer</h2> <input @@ -457,6 +463,8 @@ <a href="https://imgur.com/upload" target="_blank" style="color: black; font-size: .75rem;">imgur upload for convenience</a> </div> + <hr style="margin-top: 2rem" /> + <div> <h2 class="menuHeader">layer list</h2> <div style="display: flex; flex-direction: row; justify-content: space-around; margin-bottom: 1rem;"> @@ -468,29 +476,29 @@ </div> <div id="ioPage" class="tabContent"> - <p>export current setup to clipboard (see help tab for more information):</p> - <div> + <div style="margin-top: 2.5rem"> <button style="height: 3rem; width: 100%; margin-bottom: 2.5rem;" onclick="exportData()">export data</button> </div> <hr /> - <div style="display: flex; flex-direction: column; margin-top: 2.5rem; gap: 1rem;"> + <div style="display: flex; flex-direction: column; margin-top: 2.5rem; gap: 1rem;align-items:center;"> <input id="importDataInput" style="width: 90%; align-self: center" placeholder="paste theme data to import here"/> <button style="width: 100%; height: 3rem;" onclick="importData()" > import data </button> + <span style="font-size: .8rem">(see help tab for more information)</span> </div> </div> <div id="globalSettingsPage" class="tabContent"> - <p class="menuHeader">media manipulation</p> + <h2 class="menuHeader">media manipulation</h2> <div class="containerOptionListing" style="margin-bottom: 2rem;"> - <label for="imageRatioToggle">free transform mode</label> + <label for="imageRatioToggle">toggle free transform on images/videos</label> <input type="checkbox" id="imageRatioToggle" /> </div> <hr /> - <p class="menuHeader">change wallpaper</p> + <h2 class="menuHeader">change wallpaper</h2> <div class="containerOptionListing"> <label for="wallpaperUrl">set image as wallpaper: </label> <div style="display: flex; flex-direction: column; align-items: end;"> @@ -512,55 +520,62 @@ <hr /> - <p class="menuHeader">change cursors</p> - <p><a target="_blank" href="https://www.totallyfreecursors.com/">site with a bunch of cursors for reference</a> (copy desired cursor image URLs for below)</p> + <h2 class="menuHeader">change cursors</h2> + <p> + NOTE: images larger than 32x32 may not work (based on browser)<br /> + <a target="_blank" href="https://www.totallyfreecursors.com/"> + site with a bunch of cursors for reference + </a> + </p> <div class="containerOptionListing"> <label for="pointerCursorInput">change normal cursor:</label> <div style="display: flex; flex-direction: column; align-items: end;"> - <input id="pointerCursorInput" placeholder="paste link to image URL" /> + <input id="pointerCursorInput" style="width: 80%" placeholder="paste image URL" /> <button onclick="setDefaultCursor()">set normal cursor</button> </div> </div> <div class="containerOptionListing"> <label for="grabCursorInput">change grab cursor:</label> <div style="display: flex; flex-direction: column; align-items: end;"> - <input id="grabCursorInput" placeholder="paste link to image URL" /> + <input id="grabCursorInput" style="width: 80%" placeholder="paste image URL" /> <button onclick="setGrabCursor()">set grabbing cursor</button> </div> </div> <div class="containerOptionListing" style="margin-bottom: 2rem;"> <label for="linkCursorInput">change link cursor:</label> <div style="display: flex; flex-direction: column; align-items: end;"> - <input id="linkCursorInput" placeholder="paste link to cursor image URL here" /> + <input id="linkCursorInput" style="width: 80%" placeholder="paste image URL" /> <button onclick="setLinkHoverCursor()">set link hover cursor</button> </div> </div> <hr /> - <p class="menuHeader">audio</p> + <h2 class="menuHeader">audio</h2> <div class="containerOptionListing"> + <label for=audioLinkInput">paste a direct URL to an audio file:</label> <div style="display: flex; flex-direction: column; align-items: end;"> - <input id="audioLinkInput" /> + <input id="audioLinkInput" style="width: 80%" placeholder="paste file URL" /> <button onclick="setAudioLink()">set audio</button> </div> </div> + <audio id="audio" controls style="width: 100%"> + <source id="audioSource" src="" type="audio/mp3" /> + </audio> + <div class="containerOptionListing"> <label for="autoplayAudioToggle">auto-play when page loads? </label> <input id="autoplayAudioToggle" type="checkbox" checked /> </div> - <audio id="audio" controls style="width: 100%"> - <source id="audioSource" src="" type="audio/mp3" /> - </audio> - - <p> - (note: this will require either white-listing this site in your browser - or generally enabling "allow auto-play audio" in your browser's settings. + <p> + NOTE: autoplay requires either whitelisting this site or generally + enabling "allow auto-play audio" in your browser's settings. </p> + </div> </div> </body> @@ -932,49 +947,47 @@ <p class="expandedMenuIndicator">+</p> </div> <div class="expandableMenu" id=${this.id + "-bookmark-menu"} > - - <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)"> - <p>manage</p> - <p class="expandedMenuIndicator">+</p> - </div> - <div class="expandableMenu"> - <div class="menuHeader">current bookmarks</div> - <div id=${this.id + "-bookmark-menu--listings"} class="bookmarkListingContainer"> - </div> - </div> - <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)"> <p>add new</p> <p class="expandedMenuIndicator">+</p> </div> <div class="expandableMenu" id=${this.id + "-bookmark-menu--add-new"} > - <input - id=${this.id + "-url-input"} - type="text" name="url" - placeholder="enter URL for bookmark" - style="width: 90%;" - /> - <br /> + <div class="newBookmarkForm"> + <input + id=${this.id + "-url-input"} + type="text" name="url" + placeholder="enter URL for bookmark" + style="width: 100%;" + /> - <input - id=${this.id + "-label-input"} - type="text" name="label" - placeholder="enter label for bookmark" - style="width: 90%" - /> - <br /> + <input + id=${this.id + "-label-input"} + type="text" name="label" + placeholder="enter label for bookmark" + style="width: 100%" + /> - <input - id=${this.id + "-section-input"} - type="text" name="section" - placeholder="optional: enter a new or existing section name" - style="width: 90%" - /> - <br /> + <input + id=${this.id + "-section-input"} + type="text" name="section" + placeholder="optional: enter a new or existing section name" + style="width: 100%" + /> + + <button + id=${this.id + "-add-link-button"} + onclick="addLink(this)" + style="width: 50%"> + add it + </button> + </div> + </div> - <button id=${this.id + "-add-link-button"} onclick="addLink(this)">add it</button> + <div class="menuHeader">current bookmarks</div> + <div id=${this.id + "-bookmark-menu--listings"} class="bookmarkListingContainer"> </div> + </div> <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)"> @@ -1140,11 +1153,11 @@ <div class="containerOptionListing"> <div> <p style="margin: 0;"> - change font:<br />(see help tab for more info)<br /> + change font:<br /><span style="font-size: .8rem">(see help tab for more info)</span><br /> </p> </div> - <div style="display: flex; flex-direction: column; align-items: end; gap: .5rem;"> + <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> @@ -1219,7 +1232,7 @@ // FONT if (settings.fontName == "") { document.getElementById(this.id + "-settings-font-name").innerHTML = - "system default"; + "browser default"; } else { document.getElementById(this.id + "-settings-font-name").innerHTML = settings.fontName; @@ -1389,7 +1402,7 @@ <div class="containerOptionListing"> <label for=${this.id + "-settings-image-hyperlink-input"}>hyperlink image</label> - <div style="display: flex; flex-direction: column; align-items: end; gap: .5rem"> + <div style="display: flex; flex-direction: column; align-items: end;"> <input id=${this.id + "-settings-image-hyperlink-input"} placeholder="URL to apply to image" @@ -1997,13 +2010,7 @@ }); } - /** (FROM ADDSETTINGSEVENTLISTENERS) local state setting input listeners */ - document - .getElementById("imageRatioToggle") - .addEventListener("change", toggleImageRatio, false); - document - .getElementById("autoplayAudioToggle") - .addEventListener("change", toggleAutoplayAudio, false); + // page wallpaper document @@ -2121,6 +2128,14 @@ mouseDownMovableElement, true ); + // local state inputs + document.getElementById("imageRatioToggle").checked = !keepImageRatio; + document + .getElementById("imageRatioToggle") + .addEventListener("change", toggleImageRatio, false); + document + .getElementById("autoplayAudioToggle") + .addEventListener("change", toggleAutoplayAudio, false); // prevent context menu when resizing settingsContainer.addEventListener("contextmenu", (e) => { |