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

update

Browse Source
This commit is contained in:
Simon
2025-06-12 00:17:55 -04:00
parent 9d0224a843
commit 2aae8d0872
1 changed files with 185 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files
startpage.html
+184 -259
View File
@@ -249,52 +249,9 @@
</div> </div>
<form id="bookmarkForm" onsubmit="return false"> <form id="bookmarkForm" onsubmit="return false">
<div class="formTitle">add bookmarks</div>
<div>
<label> enter url: </label>
<input id="linkInput" type="text" name="url" />
</div>
<div>
<label> enter label: </label>
<input id="labelInput" type="text" name="label" />
</div>
<div>
<label> enter section (optional): </label>
<input type="text" name="section" />
</div>
<button onclick="addLink()">add link</button>
<br /> <br />
<div class="formTitle">customize sections</div>
<div>
<label>set section size (px): </label>
<input id="sectionSize" />
</div>
<div>
<label>set section color: </label>
<input id="sectionColorPicker" type="color" />
</div>
<div>
<label for="sectionBoldToggle">bold sections?</label>
<input id="sectionBoldToggle" type="checkbox" />
</div>
<div>
<label for="sectionItalicToggle">italic sections?</label>
<input id="sectionItalicToggle" type="checkbox" />
</div>
<br />
<div class="formTitle">customize sections</div>
<div>
<label>set link size (px): </label>
<input id="linkSize" />
</div>
<div>
<label>set link color: </label>
<input id="linkColorPicker" type="color" />
</div>
</form> </form>
<form id="addContainerForm" onsubmit="return false"> <form id="addContainerForm" onsubmit="return false">
@@ -310,92 +267,6 @@
</form> </form>
<form id="containerCustomizationForm" onsubmit="return false"> <form id="containerCustomizationForm" onsubmit="return false">
<div class="formTitle">change text</div>
<div>
<label>change font (see instructions for more info):</label>
<input id="fontInput" />
<button id="setFontButton">set font</button>
<label>current font: </label><span id="currentFont"></span>
</div>
<div>
align text:
<label for="setLeftAlign">left</label>
<input id="setLeftAlign" type="radio" name="align" />
<label for="setCenterAlign">center</label>
<input id="setCenterAlign" type="radio" name="align" />
</div>
<br />
<div class="formTitle">change background</div>
<div>
<label>set background color: </label>
<input id="containerColorPicker" type="color" />
</div>
<div>
<label>set background opacity (%): </label>
<input id="containerAlpha" />
</div>
<br />
<div class="formTitle">change border + shape</div>
<div>
<label>set border color: </label>
<input id="borderColorPicker" type="color" />
</div>
<div>
<label>set border width (px): </label>
<input id="borderWidth" placeholder="0 for none" />
</div>
<div>
<label>set border radius / roundedness (px): </label>
<input id="borderRadius" placeholder="0 for square" />
</div>
<br />
<div class="formTitle">change date + clock</div>
<div>
<label>set date + time color: </label>
<input id="clockColorPicker" type="color" />
</div>
<div>
<label>set date + time font size (px): </label>
<input id="clockSize" />
</div>
<div>
<label for="clockBoldToggle">bold?</label>
<input id="clockBoldToggle" type="checkbox" />
</div>
<div>
<label for="clockItalicToggle">italic?</label>
<input id="clockItalicToggle" type="checkbox" />
</div>
<br />
<div class="formTitle">change divider</div>
<div>
<label for="dividerToggle">disable divider: </label>
<input id="dividerToggle" type="checkbox" />
</div>
<div>
<label>set divider color: </label>
<input id="dividerColorPicker" type="color" />
</div>
<br />
<div class="formTitle">change shadow / glow</div>
<div>
shadow settings:<br />
<label>x-offset (px): </label><br />
<input id="shadowX" placeholder="all 0 for none" /><br />
<label>y-offset (px): </label><br />
<input id="shadowY" placeholder="all 0 for none" /><br />
<label>blur radius / fuzziness (px): </label><br />
<input id="shadowBlur" placeholder="all 0 for none" /><br />
<label>shadow color: </label><br />
<input id="shadowColorPicker" type="color" /><br />
<label>shadow opacity:</label>
<input id="shadowAlpha" />
</div>
</form> </form>
<form id="imageAndWallpaperForm" onsubmit="return false"> <form id="imageAndWallpaperForm" onsubmit="return false">
@@ -647,6 +518,7 @@
this.loadBookmarks(); this.loadBookmarks();
// then create container options UI in settings menu // then create container options UI in settings menu
this.insertContainerOptionsMenu(); this.insertContainerOptionsMenu();
setTimeout(() => { console.log("waiting"); }, 10000);
this.applyContainerSettings(); this.applyContainerSettings();
numberOfContainers++; numberOfContainers++;
@@ -673,138 +545,191 @@
document.getElementById("addContainerForm").insertAdjacentHTML( document.getElementById("addContainerForm").insertAdjacentHTML(
"beforeend", "beforeend",
` `
<div id=${this.id + "-settings-form"}> <div id=${this.id + "-bookmark-form"}>
<div class="formTitle">change background</div>
<div> <div class="formTitle">add bookmarks</div>
<label>set background color: </label> <div>
<input id=${this.id + "-settings-bg-color"} type="color" /> <label> enter url: </label>
</div> <input id=${this.id + "-url-input"} type="text" name="url" />
<div> </div>
<label>set background opacity (%): </label> <div>
<input id=${this.id + "-settings-bg-alpha"} /> <label> enter label: </label>
</div> <input id=${this.id + "-label-input"} type="text" name="label" />
<br /> </div>
<div class="formTitle">change text</div> <div>
<div> <label> enter section (optional): </label>
<label>change font (see instructions for more info):</label> <input id=${this.id + "-section-input"} type="text" name="section" />
<input id=${this.id + "-settings-font-input"} /> </div>
<button id=${
this.id + "-settings-set-font-button" <button onclick="addLink(${this.id})">add link</button>
}>set font</button>
<label>current font:</label><span id=${
this.id + "-settings-font-name"
}></span>
</div> </div>
<br /> <br />
<div> <div id=${this.id + "-settings-form"}>
align text:
<div class="formTitle">change background</div>
<div>
<label>set background color: </label>
<input id=${this.id + "-settings-bg-color"} type="color" />
</div>
<div>
<label>set background opacity (%): </label>
<input id=${this.id + "-settings-bg-alpha"} />
</div>
<br />
<div class="formTitle">change text</div>
<div>
<label>change font (see instructions for more info):</label>
<input id=${this.id + "-settings-font-input"} />
<button id=${
this.id + "-settings-set-font-button"
}>set font</button>
<label>current font:</label><span id=${
this.id + "-settings-font-name"
}></span>
</div>
<br />
<div class="formTitle">align text:</div>
<div>
<label for=${this.id + "-settings-left-align"}>left</label> <label for=${this.id + "-settings-left-align"}>left</label>
<input id=${ <input id=${
this.id + "-settings-left-align" this.id + "-settings-left-align"
} type="radio" name="align" /> } type="radio" name="align" />
<label for=${this.id + "-settings-center-align"}>center</label> <label for=${this.id + "-settings-center-align"}>center</label>
<input id=${ <input id=${
this.id + "-settings-center-align" this.id + "-settings-center-align"
} type="radio" name="align" /> } type="radio" name="align" />
</div> </div>
<br />
` + <br />
/*
*
* TODO
* MOVE THE SECTION COLOR AMD STUFF HERE
*
*
*/
`
<div class="formTitle">change border + shape</div>
<div>
<label>set border color: </label>
<input id=${this.id + "-settings-border-color"} type="color" />
</div>
<div>
<label>set border width (px): </label>
<input id=${
this.id + "-settings-border-width"
} placeholder="0 for none" />
</div>
<div>
<label>set container roundedness (px): </label>
<input id=${
this.id + "-settings-border-radius"
} placeholder="0 for square" />
</div>
<br />
<div class="formTitle">change date + clock</div> <div class="formTitle">customize sections</div>
<div> <div>
<label>show date?</label> <label>set section size (px): </label>
<input id=${this.id + "-settings-date-toggle"} /> <input id=${this.id + "-settings-section-size"} />
</div> </div>
<div> <div>
<label>show clock?</label> <label>set section color: </label>
<input id=${this.id + "-settings-clock-toggle"} /> <input id=${this.id + "-settings-section-color"} type="color" />
</div> </div>
<div> <div>
<label>set date + time color: </label> <label for="sectionBoldToggle">bold sections?</label>
<input id=${this.id + "-settings-clock-color"} type="color" /> <input id=${this.id + "-settings-section-bold"} type="checkbox" />
</div> </div>
<div> <div>
<label>set date + time font size (px): </label> <label for="sectionItalicToggle">italic sections?</label>
<input id=${this.id + "-settings-clock-size"} /> <input id=${this.id + "-settings-section-italic"} type="checkbox" />
</div> </div>
<div>
<label for=${this.id + "-settings-clock-bold"}>bold?</label>
<input id=${this.id + "-settings-clock-bold"} type="checkbox" />
</div>
<div>
<label for=${this.id + "-settings-clock-italic"}>italic?</label>
<input id=${
this.id + "-settings-clock-italic"
} type="checkbox" />
</div>
<br />
<div class="formTitle">change divider</div> <br />
<div>
<label for=${
this.id + "-settings-divider-toggle"
}>disable divider: </label>
<input id=${
this.id + "-settings-divider-toggle"
} type="checkbox" />
</div>
<div>
<label>set divider color: </label>
<input id=${this.id + "-settings-divider-color"} type="color" />
</div>
<br />
<div class="formTitle">change shadow / glow</div> <div class="formTitle">customize links</div>
<div> <div>
shadow settings:<br /> <label>set link size (px): </label>
<label>x-offset (px): </label><br /> <input id=${this.id + "-settings-link-size"} />
<input id=${ </div>
this.id + "-settings-shadow-x" <div>
} placeholder="all 0 for none" /><br /> <label>set link color: </label>
<label>y-offset (px): </label><br /> <input id=${this.id + "-settings-link-color"} type="color" />
<input id=${ </div>
this.id + "-settings-shadow-y"
} placeholder="all 0 for none" /><br /> <br />
<label>blur radius / fuzziness (px): </label><br />
<input id=${ <div class="formTitle">change border + shape</div>
this.id + "-settings-shadow-blur" <div>
} placeholder="all 0 for none" /><br /> <label>set border color: </label>
<label>shadow color: </label><br /> <input id=${this.id + "-settings-border-color"} type="color" />
<input id=${ </div>
this.id + "-settings-shadow-color" <div>
} type="color" /><br /> <label>set border width (px): </label>
<label>shadow opacity:</label> <input id=${
<input id=${this.id + "-settings-shadow-alpha"} /> this.id + "-settings-border-width"
} placeholder="0 for none" />
</div>
<div>
<label>set container roundedness (px): </label>
<input id=${
this.id + "-settings-border-radius"
} placeholder="0 for square" />
</div>
<br />
<div class="formTitle">change date + clock</div>
<div>
<label>show date?</label>
<input id=${this.id + "-settings-date-toggle"} />
</div>
<div>
<label>show clock?</label>
<input id=${this.id + "-settings-clock-toggle"} />
</div>
<div>
<label>set date + time color: </label>
<input id=${this.id + "-settings-clock-color"} type="color" />
</div>
<div>
<label>set date + time font size (px): </label>
<input id=${this.id + "-settings-clock-size"} />
</div>
<div>
<label for=${this.id + "-settings-clock-bold"}>bold?</label>
<input id=${this.id + "-settings-clock-bold"} type="checkbox" />
</div>
<div>
<label for=${this.id + "-settings-clock-italic"}>italic?</label>
<input id=${
this.id + "-settings-clock-italic"
} type="checkbox" />
</div>
<br />
<div class="formTitle">change divider</div>
<div>
<label for=${
this.id + "-settings-divider-toggle"
}>disable divider: </label>
<input id=${
this.id + "-settings-divider-toggle"
} type="checkbox" />
</div>
<div>
<label>set divider color: </label>
<input id=${this.id + "-settings-divider-color"} type="color" />
</div>
<br />
<div class="formTitle">change shadow / glow</div>
<div>
shadow settings:<br />
<label>x-offset (px): </label><br />
<input id=${
this.id + "-settings-shadow-x"
} placeholder="all 0 for none" /><br />
<label>y-offset (px): </label><br />
<input id=${
this.id + "-settings-shadow-y"
} placeholder="all 0 for none" /><br />
<label>blur radius / fuzziness (px): </label><br />
<input id=${
this.id + "-settings-shadow-blur"
} placeholder="all 0 for none" /><br />
<label>shadow color: </label><br />
<input id=${
this.id + "-settings-shadow-color"
} type="color" /><br />
<label>shadow opacity:</label>
<input id=${this.id + "-settings-shadow-alpha"} />
</div>
</div> </div>
</div>
` `
); );
} }
@@ -854,15 +779,15 @@
document.body.insertAdjacentHTML( document.body.insertAdjacentHTML(
"beforeend", "beforeend",
` `
<div class="movable" id="${this.id}"> <div class="movable" id=${this.id}>
<div style="margin: auto"> <div style="margin: auto">
<div id="${this.id}-clock"> <div id=${this.id + "-clock"}>
<span id="${this.id}-date"></span> <span id=${this.id + "-date"}></span>
<br /> <br />
<span id="${this.id}-time"></span> <span id=${this.id + "-time"}></span>
</div> </div>
<hr id="${this.id}-divider" /> <hr id=${this.id + "-divider"} />
<div id="${this.id}-sections"></div> <div id=${this.id + "-sections"} ></div>
</div> </div>
` `
); );
@@ -1045,7 +970,7 @@
} }
if (containerSettings.enableDate) { if (containerSettings.enableDate) {
} }
document.getElementById(this.id + "-settings-clock").style.color = document.getElementById(this.id + "-clock").style.color =
containerSettings.clockColor; containerSettings.clockColor;
document.getElementById(this.id + "-clock").style.fontSize = document.getElementById(this.id + "-clock").style.fontSize =
containerSettings.clockSize + "px"; containerSettings.clockSize + "px";