simon/diy-startpage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

setup global settings menu

Browse Source
This commit is contained in:
Simon
2025-07-20 18:10:49 -04:00
parent f73e34a20c
commit 40c8be15a7
1 changed files with 162 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
startpage.html
+131 -104
View File
@@ -16,25 +16,41 @@
body { body {
cursor: url(""), auto; cursor: url(""), auto;
} }
.grabbable:hover {
cursor: url(""), grab;
}
.removable:hover { .removable:hover {
cursor: url(""), crosshair; cursor: url(""), crosshair;
} }
.grabbable:hover {
cursor: grab;
}
*/ */
body {
height: 100vh;
overflow: hidden;
}
.movable { .movable {
position: fixed; position: fixed;
user-select: none;
} }
.container { .container {
z-index: 998; z-index: 998;
display: flex; display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow: auto; overflow: auto;
} }
.containerHeader {
display: flex;
flex-direction: column;
width: 100%;
padding-left: 3rem;
}
.section { .section {
margin-top: 0rem; margin-top: 0rem;
@@ -44,9 +60,6 @@
background-color: rgba(173, 165, 165, 0.8); background-color: rgba(173, 165, 165, 0.8);
z-index: 999; z-index: 999;
user-select: none;
border: solid black 2px; border: solid black 2px;
border-radius: 10px; border-radius: 10px;
padding: 10px; padding: 10px;
@@ -72,8 +85,8 @@
.tab { .tab {
margin-right: 2rem; margin-right: 2rem;
user-select: none;
text-wrap: nowrap; text-wrap: nowrap;
color: black;
} }
.tab:hover { .tab:hover {
cursor: pointer; cursor: pointer;
@@ -83,6 +96,9 @@
font-weight: bold; font-weight: bold;
text-decoration: underline; text-decoration: underline;
} }
a.visited {
color: black;
}
#ioTab { #ioTab {
flex-shrink: 1; flex-shrink: 1;
} }
@@ -224,9 +240,7 @@
<div id="settingsContainer" class="movable settingsContainer hidden"> <div id="settingsContainer" class="movable settingsContainer hidden">
<div id="tabList"> <div id="tabList">
<span class="tab" id="containerTab">layers</span> <a class="tab" id="containerTab">layers</a>
<span class="tab" id="imageAndWallpaperTab">images + wallpaper</span>
<span class="tab" id="audioTab">audio</span>
<span class="tab" id="globalSettingsTab">global settings</span> <span class="tab" id="globalSettingsTab">global settings</span>
<br /> <br />
<span class="tab" id="ioTab">import / export</span> <span class="tab" id="ioTab">import / export</span>
@@ -327,52 +341,12 @@
<button id="newImageContainerCreateButton" onclick="createNewImageContainer(this)"> <button id="newImageContainerCreateButton" onclick="createNewImageContainer(this)">
place image place image
</button> </button>
<a href="https://imgur.com/upload" target="_blank">imgur upload</a>
<h2 class="menuHeader">layers</h2> <h2 class="menuHeader">layers</h2>
<div id="containers"></div> <div id="containers"></div>
</div> </div>
</form> </form>
<form id="imageAndWallpaperForm" onsubmit="return false">
<div class="formTitle">edit images</div>
<div>
<label> add a floating image to the page: </label><br />
<input type="text" name="url" placeholder="paste image URL" />
<span
><a
href="https://imgur.com/upload"
target="_blank"
style="color: white"
>imgur upload</a
></span
>
</div>
<button onclick="addFloatingImage()">add floating image</button><br />
<div>
<label for="imageRatioToggle">free transform mode</label>
<input type="checkbox" id="imageRatioToggle" />
</div>
<div>
<label for="imageRemovalToggle">image removal mode</label>
<input type="checkbox" id="imageRemovalToggle" />
</div>
<br />
<div class="formTitle">edit wallpaper</div>
<div>
<label> image as wallpaper: </label><br />
<input id="wallpaperUrl" placeholder="paste image URL" />
<button id="submitUrl" onclick="changeWallpaper()">
set image
</button>
<label for="wallpaperRepeatToggle"> tile? </label>
<input id="wallpaperRepeatToggle" type="checkbox" />
</div>
<div>
<label> solid color as wallpaper: </label><br />
<input type="color" id="wallpaperColorPicker" />
</div>
</form>
<form id="ioForm" onsubmit="return false"> <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> <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 /> <button onclick="exportData()">export data</button><br />
@@ -386,36 +360,85 @@
</button> </button>
</form> </form>
<form id="audioForm" onsubmit="return false">
<label
>paste a direct URL to an audio file (ending in .mp3 or .wav or
whatever) to load:</label
>
<input id="audioLinkInput" />
<button onclick="setAudioLink()">set audio</button>
<audio id="audio" controls>
<source id="audioSource" src="" type="audio/mp3" />
</audio>
<label for="autoplayAudioToggle">auto-play when page loads? </label>
<input id="autoplayAudioToggle" type="checkbox" checked />
<label
>(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")</label
>
</form>
<form id="globalSettingsForm" onsubmit="return false"> <form id="globalSettingsForm" onsubmit="return false">
<div>
<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>for reference: <a href="https://www.totallyfreecursors.com/">cursors</a></p>
<label>enter source for normal cursor: </label> <div class="containerOptionListing">
<input id="pointerCursorInput" placeholder="paste link here" /> <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> <button onclick="setDefaultCursor()">set normal cursor</button>
</div>
<label>enter source for grabbing cursor: </label> </div>
<input id="grabCursorInput" placeholder="paste link here" /> <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> <button onclick="setGrabCursor()">set grabbing cursor</button>
</div>
</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="setGrabCursor()">set link hover cursor</button>
</div>
</div>
<p class="menuHeader">audio</p>
<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" />
<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>
<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>
</div>
</form> </form>
<form id="resetForm" onsubmit="return false"> <form id="resetForm" onsubmit="return false">
@@ -432,6 +455,7 @@
<button onclick="resetFont()">reset font</button> <button onclick="resetFont()">reset font</button>
</form> </form>
</div> </div>
TODO: CONTAINER TEXT RIGHT ALIGN AND ALSO PADDING LEVELS
</div> </div>
</body> </body>
@@ -630,7 +654,6 @@
* loadBookmarks() and applySettings() do the rest * loadBookmarks() and applySettings() do the rest
*/ */
initializeImageContainer() { initializeImageContainer() {
document.body.insertAdjacentHTML( document.body.insertAdjacentHTML(
"beforeend", "beforeend",
` `
@@ -664,16 +687,13 @@
"beforeend", "beforeend",
` `
<div class="movable container" id=${this.id}> <div class="movable container" id=${this.id}>
<div> <div id=${this.id + "-header"} class="containerHeader">
<div id=${this.id + "-header"}> <div id=${this.id + "-date"}></div>
<span id=${this.id + "-date"}></span> <div id=${this.id + "-clock"}></div>
<br />
<span id=${this.id + "-clock"}></span>
</div> </div>
<hr id=${this.id + "-divider"} /> <hr id=${this.id + "-divider"} />
<div id=${this.id + "-bookmarks"} ></div> <div id=${this.id + "-bookmarks"} ></div>
</div> </div>
</div>
` `
); );
@@ -721,7 +741,6 @@
* -> remove "images" from wallpaper tab * -> remove "images" from wallpaper tab
* -> furthermore, condense all global settings into one tab * -> furthermore, condense all global settings into one tab
* - including wallpaper, audio, cursor * - including wallpaper, audio, cursor
* add toggles for each settings menu
* rename settings form div ids (see "note to self") * rename settings form div ids (see "note to self")
*/ */
@@ -874,39 +893,47 @@
<p class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">+ header options</p> <p class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">+ header options</p>
<div class="expandableMenu"> <div class="expandableMenu">
<p class="menuHeader">date + time options</p> <p class="menuHeader">date + time options</p>
<div class="containerOptionListing">
<label for=${this.id + "-settings-date-toggle"}>show date?</label> <label for=${this.id + "-settings-date-toggle"}>show date?</label>
<input id=${this.id + "-settings-date-toggle"} type="checkbox" /> <input id=${this.id + "-settings-date-toggle"} type="checkbox" />
<br /> </div>
<div class="containerOptionListing">
<label for=${this.id + "-settings-clock-toggle"}>show clock?</label> <label for=${this.id + "-settings-clock-toggle"}>show clock?</label>
<input id=${this.id + "-settings-clock-toggle"} type="checkbox" /> <input id=${this.id + "-settings-clock-toggle"} type="checkbox" />
<br /><br /> </div>
<div class="containerOptionListing">
<label for=${this.id + "-settings-clock-color"}>set header text color: </label> <label for=${this.id + "-settings-clock-color"}>set header text color: </label>
<input id=${this.id + "-settings-clock-color"} type="color" /> <input id=${this.id + "-settings-clock-color"} type="color" />
<br /><br /> </div>
<div class="containerOptionListing">
<label>set header font size (px): </label> <label>set header font size (px): </label>
<input id=${this.id + "-settings-clock-size"} /> <input id=${this.id + "-settings-clock-size"} />
<br /><br /> </div>
<div class="containerOptionListing">
<label for=${this.id + "-settings-clock-bold"}>bold header?</label> <label for=${this.id + "-settings-clock-bold"}>bold header?</label>
<input id=${this.id + "-settings-clock-bold"} type="checkbox" /> <input id=${this.id + "-settings-clock-bold"} type="checkbox" />
<br /> </div>
<div class="containerOptionListing">
<label for=${this.id + "-settings-clock-italic"}>italic header?</label> <label for=${this.id + "-settings-clock-italic"}>italic header?</label>
<input id=${this.id + "-settings-clock-italic"} type="checkbox" /> <input id=${this.id + "-settings-clock-italic"} type="checkbox" />
</div>
<p class="menuHeader">divider options</p> <p class="menuHeader">divider options</p>
<div class="containerOptionListing">
<label for=${this.id + "-settings-divider-toggle"}>display divider?</label> <label for=${this.id + "-settings-divider-toggle"}>display divider?</label>
<input id=${this.id + "-settings-divider-toggle"} type="checkbox" /> <input id=${this.id + "-settings-divider-toggle"} type="checkbox" />
<br /> </div>
<div class="containerOptionListing">
<label>set divider color: </label> <label>set divider color: </label>
<input id=${this.id + "-settings-divider-color"} type="color" /> <input id=${this.id + "-settings-divider-color"} type="color" />
</div> </div>
</div>
<p class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">+ text options</p> <p class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">+ text options</p>
<div class="expandableMenu"> <div class="expandableMenu">
@@ -1602,9 +1629,6 @@
document document
.getElementById("imageRatioToggle") .getElementById("imageRatioToggle")
.addEventListener("change", toggleImageRatio, false); .addEventListener("change", toggleImageRatio, false);
document
.getElementById("imageRemovalToggle")
.addEventListener("change", toggleImageRemoval, false);
document document
.getElementById("autoplayAudioToggle") .getElementById("autoplayAudioToggle")
.addEventListener("change", toggleAutoplayAudio, false); .addEventListener("change", toggleAutoplayAudio, false);
@@ -1868,10 +1892,6 @@
let images = document.getElementsByClassName("userImage"); let images = document.getElementsByClassName("userImage");
if (removing) { if (removing) {
for (let i = 0; i < images.length; i++) { for (let i = 0; i < images.length; i++) {
// change cursor on images to crosshair
images[i].classList.remove("grabbable");
images[i].classList.add("removable");
images[i].addEventListener( images[i].addEventListener(
"mousedown", "mousedown",
mouseDownRemovableElement, mouseDownRemovableElement,
@@ -1884,10 +1904,6 @@
} }
} else { } else {
for (let i = 0; i < images.length; i++) { for (let i = 0; i < images.length; i++) {
// remove crosshair cursor from images
images[i].classList.remove("removable");
images[i].classList.add("grabbable");
images[i].removeEventListener( images[i].removeEventListener(
"mousedown", "mousedown",
mouseDownRemovableElement, mouseDownRemovableElement,
@@ -1915,13 +1931,14 @@
// change cursor on movable elements to indicate grabbable // change cursor on movable elements to indicate grabbable
let movableElements = document.getElementsByClassName("movable"); let movableElements = document.getElementsByClassName("movable");
for (let i = 0; i < movableElements.length; i++) { for (let i = 0; i < movableElements.length; i++) {
movableElements[i].classList.add("grabbable"); // mmovableElements[i].classList.add("grabbable");
movableElements[i].style.cursor = cursors.grab ? 'url("' + cursors.grab + '"), grab' : "grab";
} }
} else { } else {
// remove grabbable cursor // remove grabbable cursor
let movableElements = document.getElementsByClassName("movable"); let movableElements = document.getElementsByClassName("movable");
for (let i = 0; i < movableElements.length; i++) { for (let i = 0; i < movableElements.length; i++) {
movableElements[i].classList.remove("grabbable"); movableElements[i].style.cursor = "";
} }
// disable image removal mode active // disable image removal mode active
@@ -2291,6 +2308,7 @@
function moveElement(mouseMove) { function moveElement(mouseMove) {
if (!moving) { if (!moving) {
console.log("RETURN: " + mouseMove.target.tagName);
return; return;
} }
@@ -2417,11 +2435,20 @@
// apply new default cursor to entire html document // apply new default cursor to entire html document
document.getElementsByTagName("html")[0].style.cursor = document.getElementsByTagName("html")[0].style.cursor =
'url("' + cursors.default + '"), auto'; 'url("' + cursors.default + '"), auto';
document.getElementById("pointerCursorInput").value = "";
} }
function setGrabCursor() { function setGrabCursor() {
cursors.grab = document.getElementById("grabCursorInput").value; cursors.grab = document.getElementById("grabCursorInput").value;
// apply new grab cursor to grabbable elements... // apply new grab cursor to grabbable elements...
let movableElements = document.getElementsByClassName("movable");
for (let i = 0; i < movableElements.length; i++) {
console.log(movableElements[i]);
movableElements[i].style.cursor = cursors.grab ? 'url("' + cursors.grab + '"), grab' : "grab";
}
document.getElementById("grabCursorInput").value = "";
} }
/********************** /**********************
* BOOK MARK HANDLERS * * BOOK MARK HANDLERS *