diff options
Diffstat (limited to 'startpage.html')
| -rw-r--r-- | startpage.html | 326 |
1 files changed, 171 insertions, 155 deletions
diff --git a/startpage.html b/startpage.html index 0bb9a43..00e4041 100644 --- a/startpage.html +++ b/startpage.html @@ -69,6 +69,7 @@ align-self: flex-end; height: 25rem; + width: 40rem; overflow: scroll; } @@ -99,12 +100,17 @@ font-weight: bold; text-decoration: underline; } + + .tabContent { + display: none; + flex-direction: column; + padding-left: 1rem; + padding-right: 1rem; + } + a.visited { color: black; } - #ioTab { - flex-shrink: 1; - } #containers { padding-left: .25rem; @@ -112,17 +118,8 @@ /* * SETTINGS PAGES */ - form, - #instructionsForm { - display: none; - flex-direction: column; - } - .formTitle { - margin-bottom: 1rem; - text-decoration: underline; - font-style: italic; - align-self: center; - } + + label { align-self: start; } @@ -143,7 +140,6 @@ margin: 0 0 0 0; padding: .5rem 0rem .5rem .5rem; - width: 100%; } .expandableMenuToggle.active, .expandableMenuToggle:hover { background-color: rgba(213, 205, 205, 1); @@ -170,14 +166,17 @@ } .containerListing { + border: 1px solid black; + margin-bottom: .5rem; } .manageButtons { display: flex; - flex-direction: reow; + flex-direction: row; justify-content: space-between; - margin: 1rem 0rem; + align-items: center; + padding: 1rem 0rem; } .bookmarkListingContainer { display: flex; @@ -214,6 +213,11 @@ input[type="color"] { width: 4rem; } + button { + border: none; + border-radius: 50px; + padding: .25rem .5rem .25rem .5rem; + } .bookmarkListingButtons { } @@ -227,10 +231,9 @@ .bookmarkDeleteButton { } - .bookmarkDeleteButton:hover { + .deleteButton:hover { background-color: rgba(173, 165, 165, 0.8); color: red; - cursor: pointer; } hr { @@ -268,14 +271,8 @@ </div> </div> - <div style="padding: 0 .5rem;"> - <!-- note to self: - - i should rename these so they don't end in "Form", - - rather something like "Page". to do that though i need - - to change the logic for switching tabs that has the string - - modification hardcoded - --> - <div id="instructionsForm"> + <div> + <div id="instructionsPage" class="tabContent"> <p> you are now editing the page!<br /><br /> @@ -365,7 +362,11 @@ there are some keyboard shortcuts for your convenience:<br /> "e" = enables editing mode<br /> esc = disables editing mode (and saves page)<br /> - "1"-"4" = jump between settings box tabs<br /> + "1"-"4" = jump between settings box tabs<br /><br /> + + if you've accidentally pressed down on a "delete" button and want to + cancel, you can hit escape before releasing the mouse button to save + your progress and prevent your thing from being deleted. </p> <p> floating text:<br /> @@ -377,136 +378,142 @@ </div> </div> - <form id="containerForm" onsubmit="return false"> - <div> - <h2 class="menuHeader">add bookmark layer</h2> - <input - id="newTextContainerNameInput" - placeholder="(optional) layer name" - style="width: 100%" - type="text" - /> - <button id="newTextContainerCreateButton" onclick="createNewTextContainer(this)"> - create new layer - </button> - </div> - <div> - <h2 class="menuHeader">add image to page</h2> - <input - id="newImageContainerNameInput" - placeholder="(optional) image name" - style="width: 100%;" - type="text" - /> - <input - id="newImageContainerUrlInput" - placeholder="direct URL to image" - style="width: 100%;" - type="text" - /> - <button id="newImageContainerCreateButton" onclick="createNewImageContainer(this)"> - place image - </button> - <a href="https://imgur.com/upload" target="_blank" style="color: black">imgur upload for convenience</a> - <h2 class="menuHeader">layers</h2> - <div id="containers"></div> + <div id="containerPage" class="tabContent"> + <div> + <h2 class="menuHeader">add bookmark layer</h2> + <input + id="newTextContainerNameInput" + placeholder="(optional) layer name" + style="width: 100%" + type="text" + /> + <button id="newTextContainerCreateButton" onclick="createNewTextContainer(this)"> + create new layer + </button> </div> - </form> - - <form id="ioForm" onsubmit="return false"> - <label>use the button below to copy your current configuration to your clipboard<br />(you should save this somewhere)</label> - <button onclick="exportData()">export data</button><br /> - <input id="importDataInput" /> - <button - onclick="importData()" - placeholder="paste exported data here to load" - > - import data - </button> - </form> + <div> + <h2 class="menuHeader">add image to page</h2> + <input + id="newImageContainerNameInput" + placeholder="(optional) image name" + style="width: 100%;" + type="text" + /> + <input + id="newImageContainerUrlInput" + placeholder="direct URL to image" + style="width: 100%;" + type="text" + /> + <button id="newImageContainerCreateButton" onclick="createNewImageContainer(this)"> + place image + </button> + <a href="https://imgur.com/upload" target="_blank" style="color: black">imgur upload for convenience</a> + <h2 class="menuHeader">layers</h2> + <div style="display: flex; flex-direction: row; justify-content: space-around; margin-bottom: 1rem;"> + <button onclick="collapseLayerListings()">collapse all listings</button> + <button onclick="expandLayerListings()">expand all listings</button> + </div> + <div id="containers"></div> + </div> + </div> - <form id="globalSettingsForm" onsubmit="return false"> + <div id="ioPage" class="tabContent"> + <p>export current setup to clipboard (see help tab for more information):</p> <div> - <p class="menuHeader">image manipulation</p> - <div class="containerOptionListing"> - <label for="imageRatioToggle">image free transform mode</label> - <input type="checkbox" id="imageRatioToggle" /> - </div> + <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;"> + <input id="importDataInput" style="width: 90%; align-self: center" placeholder="paste data to import here"/> + <button style="width: 100%; height: 3rem;" onclick="importData()" > + import data + </button> + </div> + </div> - <p class="menuHeader">change page wallpaper</p> - <div class="containerOptionListing"> - <label for="wallpaperUrl">set image as wallpaper: </label> - <div style="display: flex; flex-direction: column; align-items: end;"> - <input id="wallpaperUrl" placeholder="paste image URL" style="width: 10rem" /> - <br /> - <button id="submitUrl" onclick="changeWallpaper()"> - set image - </button> - </div> - </div> - <div class="containerOptionListing"> - <label for="wallpaperRepeatToggle"> tile wallpaper? </label> - <input id="wallpaperRepeatToggle" type="checkbox" /> - </div> - <div class="containerOptionListing"> - <label for="wallpaperColorPicker">or, set wallpaper as solid color: </label> - <input type="color" id="wallpaperColorPicker" /> + <div id="globalSettingsPage" class="tabContent"> + <p class="menuHeader">image manipulation</p> + <div class="containerOptionListing"> + <label for="imageRatioToggle">image free transform mode</label> + <input type="checkbox" id="imageRatioToggle" /> + </div> + + <p class="menuHeader">change page wallpaper</p> + <div class="containerOptionListing"> + <label for="wallpaperUrl">set image as wallpaper: </label> + <div style="display: flex; flex-direction: column; align-items: end;"> + <input id="wallpaperUrl" placeholder="paste image URL" style="width: 10rem" /> + <br /> + <button id="submitUrl" onclick="changeWallpaper()"> + set image + </button> </div> + </div> + <div class="containerOptionListing"> + <label for="wallpaperRepeatToggle"> tile wallpaper? </label> + <input id="wallpaperRepeatToggle" type="checkbox" /> + </div> + <div class="containerOptionListing"> + <label for="wallpaperColorPicker">or, set wallpaper as solid color: </label> + <input type="color" id="wallpaperColorPicker" /> + </div> - <p class="menuHeader">change cursors</p> - <p>for reference: <a href="https://www.totallyfreecursors.com/">cursors</a></p> + <p class="menuHeader">change cursors</p> + <p>for reference: <a href="https://www.totallyfreecursors.com/">cursors</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" /> - <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" /> - <button onclick="setGrabCursor()">set grabbing cursor</button> - </div> + <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" /> + <button onclick="setDefaultCursor()">set normal cursor</button> </div> - <div class="containerOptionListing"> - <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" /> - <button onclick="setLinkHoverCursor()">set link hover 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" /> + <button onclick="setGrabCursor()">set grabbing cursor</button> </div> - - <p class="menuHeader">audio</p> + </div> <div class="containerOptionListing"> - <label for=audioLinkInput">paste a direct URL to an audio file:</label> - + <label for="linkCursorInput">change link cursor:</label> <div style="display: flex; flex-direction: column; align-items: end;"> - <input id="audioLinkInput" /> - <button onclick="setAudioLink()">set audio</button> + <input id="linkCursorInput" placeholder="paste link to cursor image URL here" /> + <button onclick="setLinkHoverCursor()">set link hover cursor</button> </div> </div> - <audio id="audio" controls style="width: 100%"> - <source id="audioSource" src="" type="audio/mp3" /> - </audio> + <p class="menuHeader">audio</p> + <div class="containerOptionListing"> + <label for=audioLinkInput">paste a direct URL to an audio file:</label> - <div class="containerOptionListing"> - <label for="autoplayAudioToggle">auto-play when page loads? </label> - <input id="autoplayAudioToggle" type="checkbox" checked /> + <div style="display: flex; flex-direction: column; align-items: end;"> + <input id="audioLinkInput" /> + <button onclick="setAudioLink()">set audio</button> </div> + </div> - <p> - (note: this will require white-listing this site in your browser. - you can whitelist local HTML files! the URL would be something like - "file:///C:/path/to/saved/file") - </p> + <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> - </form> + + <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> + </div> </div> + + todo: make tab shortcuts. + also change section buttons to actual buttons, and collapse / expand all logic </body> <script> @@ -651,7 +658,6 @@ } this.initializeImageContainer(); - // this.createImageContainerMenuListing(); } // if constructing text container else { @@ -867,12 +873,17 @@ createTextContainerMenuListing() { let zindex = parseInt(this.containerSettings.zIndex); let upButtons = ` - <button id="` + this.id + `--move-top-button"} onclick="reorderContainer(this, 'top')">summon to top</button> + <div> <button id="` + this.id + `--move-up-button"} onclick="reorderContainer(this, 'up')">move up</button> - `; + <button id="` + this.id + `--move-top-button"} onclick="reorderContainer(this, 'top')">summon to top</button> + </div> + + `; let downButtons = ` - <button id="` + this.id + `--move-down-button"} onclick="reorderContainer(this, 'down')">move down</button> - <button id="` + this.id + `--move-bottom-button"} onclick="reorderContainer(this, 'bottom')">banish to bottom</button> + <div ${zindex == 1 ? `` : `style="margin-top: .25rem;"`}> + <button id="` + this.id + `--move-down-button"} onclick="reorderContainer(this, 'down')">move down</button> + <button id="` + this.id + `--move-bottom-button"} onclick="reorderContainer(this, 'bottom')">banish to bottom</button> + </div> `; document.getElementById("containers").insertAdjacentHTML( @@ -884,7 +895,7 @@ <p id=${this.id + "--listing-header"}>[${this.containerSettings.zIndex}]: ${this.name}</p> <p class="expandedMenuIndicator">-</p> </div> - <div class="expandableMenu" id=${this.id + "-settings-menu"} style="display: block;"> + <div class="expandableMenu" id=${this.id + "-settings-menu"} style="display: block; margin: 0;"> <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)"> <p>${this.name}: bookmarks</p> @@ -1034,9 +1045,7 @@ <div class="containerOptionListing"> <div> <p style="margin: 0;"> - change font (see instructions for more info):<br /> - <b>current font:</b> - <span id=${this.id + "-settings-font-name"}></span> + change font:<br />(see help tab for more info)<br /> </p> </div> @@ -1044,6 +1053,9 @@ <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 /> @@ -1139,7 +1151,7 @@ ${zindex == 1 ? `` : downButtons} </div> <div> - <button id=${this.id + "--delete-button"} onclick="deleteContainer(this)">delete layer</button> + <button id=${this.id + "--delete-button"} class="deleteButton" onclick="deleteContainer(this)">delete layer</button> </div> </div> </div> @@ -1240,12 +1252,16 @@ createImageContainerMenuListing() { let zindex = this.containerSettings.zIndex; let upButtons = ` - <button id="` + this.id + `--move-top-button"} onclick="reorderContainer(this, 'top')">summon to top</button> + <div> <button id="` + this.id + `--move-up-button"} onclick="reorderContainer(this, 'up')">move up</button> - `; + <button id="` + this.id + `--move-top-button"} onclick="reorderContainer(this, 'top')">summon to top</button> + </div> + `; let downButtons = ` - <button id="` + this.id + `--move-down-button"} onclick="reorderContainer(this, 'down')">move down</button> - <button id="` + this.id + `--move-bottom-button"} onclick="reorderContainer(this, 'bottom')">banish to bottom</button> + <div ${zindex == 1 ? `` : `style="margin-top: .25rem;"`}> + <button id="` + this.id + `--move-down-button"} onclick="reorderContainer(this, 'down')">move down</button> + <button id="` + this.id + `--move-bottom-button"} onclick="reorderContainer(this, 'bottom')">banish to bottom</button> + </div> `; document.getElementById("containers").insertAdjacentHTML( @@ -1257,7 +1273,7 @@ <p id=${this.id + "--listing-header"}>[${this.containerSettings.zIndex}]: ${this.name}</p> <p class="expandedMenuIndicator">-</p> </div> - <div class="expandableMenu" id=${this.id + "-settings-menu"} style="display: block;"> + <div class="expandableMenu" style="display: block; margin: 0;" id=${this.id + "-settings-menu"}> <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)"> <p>border + shape options</p> @@ -1794,7 +1810,7 @@ activeTabId = JSON.parse(localStorage.getItem("activeTabId")) || "instructionsTab"; document.getElementById( - activeTabId.replace("Tab", "Form") + activeTabId.replace("Tab", "Page") ).style.display = "flex"; document.getElementById(activeTabId).classList.add("active"); // add tab-switching listeners @@ -2054,13 +2070,13 @@ document.getElementById(activeTabId).classList.remove("active"); document.getElementById( - activeTabId.replace("Tab", "Form") + activeTabId.replace("Tab", "Page") ).style.display = "none"; // set new tab activeTabId = event.target.id; document.getElementById( - activeTabId.replace("Tab", "Form") + activeTabId.replace("Tab", "Page") ).style.display = "flex"; document.getElementById(activeTabId).classList.add("active"); |