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

fixed some padding stuff, added faster nudges, and new themes

Browse Source
This commit is contained in:
Simon
2025-08-29 00:23:34 -04:00
parent bfaaf51795
commit 7818bcf0ba
10 changed files with 2900 additions and 2867 deletions
Download Patch File Download Diff File Expand all files Collapse all files
startpage.html
+50 -18
View File
@@ -37,7 +37,7 @@
body {
height: 100vh;
overflow: hidden;
margin: 0;
}
@@ -368,7 +368,7 @@
<p>
<u>precise adjustments:</u>
click on a container or settings slider to focus it, then use the arrow keys
to make minute changes.
to make minute changes (hold shift for a speed boost when moving containers).
</p>
<hr />
<p>
@@ -417,7 +417,6 @@
layer's "text options"
</p>
</div>
</div>
<div id="containerPage" class="tabContent">
@@ -472,7 +471,7 @@
<div id="ioPage" class="tabContent">
<div style="display: flex; flex-direction: column; margin: 2rem 0; gap: 1rem;align-items:center;">
<p class="menuHeader">import theme file</p>
<input id="import-input" type="file" accept".txt" style="width: 45%; align-self: center" />
<input id="import-input" type="file" accept=".txt" style="width: 45%; align-self: center" />
<button style="width: 100%; height: 3rem;" onclick="importData()" >
set new theme
@@ -552,7 +551,7 @@
<h2 class="menuHeader">audio</h2>
<div class="containerOptionListing">
<label for=audioLinkInput">paste a direct URL to an audio file:</label>
<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" style="width: 80%" placeholder="paste file URL" />
@@ -584,13 +583,11 @@
<div class="containerOptionListing">
<label for="edit-toggle-alpha">set "edit mode" toggle opacity (%): </label>
<input id="edit-toggle-alpha"} type="range" min="0" max="100" />
</div>
<input id="edit-toggle-alpha" type="range" min="0" max="100" />
</div>
</div>
</div>
</div>
</body>
<script>
// cookie holder for coordinates + size of settings menu
@@ -1884,7 +1881,9 @@
if (!settings.enableDivider) {
document.getElementById(this.id + "-divider").hidden = true;
// if there are links in this container, add room under the divider
if (Object.keys(this.sections).length > 0) {
if (Object.keys(this.sections).length > 0 &&
(settings.enableDate || settings.enableClock)
) {
document.getElementById(this.id + "-header").style.marginBottom =
"18px";
}
@@ -1976,11 +1975,16 @@
targetSection.insertAdjacentHTML(
"beforeend",
`
<div id="${this.id}-section-${s}-link-${l}" >
<div id="${this.id}-section-${s}-link-${l}"
${l < sectionData[s].links.length - 1 ?
`style="margin-bottom: .5rem"` :
`style="margin-bottom: 5px"`}
>
<a
class="${this.id}-link"
href="${sectionData[s].links[l].url}"
>
${sectionData[s].links[l].label}
</a>
@@ -1991,7 +1995,9 @@
}
// ensure smooth ux when rerendering
if (!settings.enableDivider) {
if (!settings.enableDivider &&
(settings.enableDate || settings.enableClock)
) {
document.getElementById(this.id + "-header").style.marginBottom = "18px";
}
@@ -2971,19 +2977,23 @@
}
// nudges
if(keyDown.key == "ArrowUp") {
changingElement.style.top =`${currentY - 1}px`;
changingElement.style.top =
`${keyDown.shiftKey ? currentY - 5 : currentY - 1}px`;
storeElementData();
}
if(keyDown.key == "ArrowRight") {
changingElement.style.left =`${currentX + 1}px`;
changingElement.style.left =
`${keyDown.shiftKey ? currentX + 5 : currentX + 1}px`;
storeElementData();
}
if(keyDown.key == "ArrowDown") {
changingElement.style.top =`${currentY + 1}px`;
changingElement.style.top =
`${keyDown.shiftKey ? currentY + 5 : currentY + 1}px`;
storeElementData();
}
if(keyDown.key == "ArrowLeft") {
changingElement.style.left =`${currentX - 1}px`;
changingElement.style.left =
`${keyDown.shiftKey ? currentX - 5 : currentX - 1}px`;
storeElementData();
}
}
@@ -3342,6 +3352,15 @@
container.settings.enableDate = checkboxChanged.target.checked;
document.getElementById(containerId + "-date").style.display =
checkboxChanged.target.checked ? "inline" : "none";
if (!checkboxChanged.target.checked &&
Object.keys(container.sections).length > 0 &&
container.settings.enableClock
) {
document.getElementById(containerId + "-header").style.marginBottom = "18px";
} else {
document.getElementById(containerId + "-header").style.marginBottom = "0px";
}
}
function toggleClock(checkboxChanged) {
let containerId = checkboxChanged.target.id.split("-settings")[0];
@@ -3350,6 +3369,15 @@
container.settings.enableClock = checkboxChanged.target.checked;
document.getElementById(containerId + "-clock").style.display =
checkboxChanged.target.checked ? "inline" : "none";
if (!checkboxChanged.target.checked &&
Object.keys(container.sections).length > 0 &&
container.settings.enableDate
) {
document.getElementById(containerId + "-header").style.marginBottom = "18px";
} else {
document.getElementById(containerId + "-header").style.marginBottom = "0px";
}
}
function changeHeaderColor(colorChange) {
let containerId = colorChange.target.id.split("-settings")[0];
@@ -3421,7 +3449,10 @@
document.getElementById(containerId + "-divider").style.display =
checkboxChanged.target.checked ? "block" : "none";
if (!checkboxChanged.target.checked && Object.keys(container.sections).length > 0) {
if (!checkboxChanged.target.checked &&
Object.keys(container.sections).length > 0 &&
(container.settings.enableDate || container.settings.enableClock)
) {
document.getElementById(containerId + "-header").style.marginBottom = "18px";
} else {
document.getElementById(containerId + "-header").style.marginBottom = "0px";
@@ -3669,4 +3700,5 @@
);
}
</script>
</body>
</html>
themes/experiment.txt
-1
View File
@@ -1 +0,0 @@
{"cursors":"{}","containerMapValues":"[{\"id\":\"container-2\",\"name\":\"horse clone\",\"x\":\"88px\",\"y\":\"322px\",\"height\":487,\"width\":690,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fclipart-library.com%2Fimages%2F5TRrgXbpc.gif&f=1&nofb=1&ipt=d33858e361adaf5dda2c98e4dcb165f4ed22a20915c3efe5cd201d7b0a6b3704\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,0.9)\",\"zIndex\":1,\"invertX\":false,\"invertY\":false}},{\"id\":\"container-1\",\"name\":\"image 2\",\"x\":\"928px\",\"y\":\"-10px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":2,\"invertX\":false,\"invertY\":true}},{\"id\":\"container-3\",\"name\":\"test\",\"x\":\"136px\",\"y\":\"184px\",\"height\":337,\"width\":323,\"containerSettings\":{\"backgroundRgba\":\"rgba(255,255,255,.9)\",\"backgroundAlpha\":100,\"borderWidth\":\"5\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"fontName\":\"\",\"fontCode\":\"\",\"sectionColor\":\"#c01c28\",\"sectionSize\":\"7\",\"sectionItalic\":false,\"sectionBold\":false,\"linkColor\":\"#986a44\",\"linkSize\":\"16\",\"enableDate\":true,\"enableClock\":true,\"headerColor\":\"\",\"headerSize\":\"16\",\"headerBold\":false,\"headerItalic\":false,\"enableDivider\":true,\"dividerColor\":\"\",\"textAlign\":\"center\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":3},\"sections\":{\"0\":{\"links\":[{\"label\":\"\",\"url\":\"\"}],\"label\":\"bingo\"},\"1\":{\"links\":[{\"label\":\"d\",\"url\":\"https://e\"}],\"label\":\"fs\"},\"2\":{\"links\":[{\"label\":\"ddd\",\"url\":\"https://ddd\"}],\"label\":\"fsd\"}},\"clockIntervalId\":2},{\"id\":\"container-4\",\"name\":\"image 2 clone\",\"x\":\"938px\",\"y\":\"0px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":4,\"invertX\":false,\"invertY\":true}},{\"id\":\"container-5\",\"name\":\"image 2 clone\",\"x\":\"938px\",\"y\":\"0px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":5,\"invertX\":false,\"invertY\":true}},{\"id\":\"container-6\",\"name\":\"image 2 clone\",\"x\":\"938px\",\"y\":\"0px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":6,\"invertX\":false,\"invertY\":true}}]","repeatWallpaper":"false","zIndexMapData":"{\"1\":\"container-2\",\"2\":\"container-1\",\"3\":\"container-3\",\"4\":\"container-4\",\"5\":\"container-5\",\"6\":\"container-6\"}","audioLink":"\"\"","wallpaper":"\"https://i.imgur.com/3QYCOxV.jpeg\"","settingsMenuData":"{\"x\":\"1074px\",\"y\":\"191px\",\"width\":631,\"height\":458}","autoplayAudio":"false","activeTabId":"\"containerTab\""}
themes/experiment2.txt
-1
View File
File diff suppressed because one or more lines are too long
themes/green_moutains
-1
View File
@@ -1 +0,0 @@
{"activeTabId":"\"containerTab\"","containerMapValues":"[{\"id\":\"container-1\",\"name\":\"bookmark layer 1\",\"x\":\"179px\",\"y\":\"160px\",\"height\":191,\"width\":241,\"containerSettings\":{\"backgroundRgba\":\"rgba(65,90,54,0.16)\",\"backgroundAlpha\":100,\"borderWidth\":\"2\",\"borderRadius\":\"0\",\"borderColor\":\"#000000\",\"fontName\":\"\",\"fontCode\":\"\",\"sectionColor\":\"\",\"sectionSize\":\"16\",\"sectionItalic\":false,\"sectionBold\":false,\"linkColor\":\"#000000\",\"linkSize\":\"16\",\"enableDate\":false,\"enableClock\":false,\"headerColor\":\"\",\"headerSize\":\"16\",\"headerBold\":false,\"headerItalic\":false,\"enableDivider\":false,\"dividerColor\":\"\",\"textAlign\":\"center\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"95\",\"shadowRgba\":\"rgba(47,52,63,0.18)\",\"zIndex\":1},\"sections\":{\"0\":{\"links\":[{\"label\":\"youtube\",\"url\":\"https://youtube.com\"},{\"label\":\"/wg/\",\"url\":\"https://4chan.org/wg/\"},{\"label\":\"github\",\"url\":\"https://github.com\"}],\"label\":\"\"}},\"clockIntervalId\":2},{\"id\":\"container-2\",\"name\":\"clock\",\"x\":\"1271px\",\"y\":\"374px\",\"height\":112,\"width\":213,\"containerSettings\":{\"backgroundRgba\":\"rgba(255,255,255,0)\",\"backgroundAlpha\":100,\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"fontName\":\"\",\"fontCode\":\"\",\"sectionColor\":\"\",\"sectionSize\":\"16\",\"sectionItalic\":false,\"sectionBold\":false,\"linkColor\":\"\",\"linkSize\":\"16\",\"enableDate\":false,\"enableClock\":true,\"headerColor\":\"\",\"headerSize\":\"20\",\"headerBold\":false,\"headerItalic\":true,\"enableDivider\":false,\"dividerColor\":\"\",\"textAlign\":\"center\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":2},\"sections\":{},\"clockIntervalId\":3}]","wallpaper":"\"https://i.imgur.com/K48zGBm.png\"","repeatWallpaper":"false","zIndexMapData":"{\"1\":\"container-1\",\"2\":\"container-2\"}","audioLink":"\"\"","settingsMenuData":"{\"x\":\"493px\",\"y\":\"131px\",\"width\":648,\"height\":408}","autoplayAudio":"false","cursors":"{}"}
themes/modern_green.txt
+1
View File
File diff suppressed because one or more lines are too long
themes/modern_night.txt
+1
View File
File diff suppressed because one or more lines are too long
themes/modern_olive.txt
+1
View File
File diff suppressed because one or more lines are too long
themes/modern_peach.txt
+1
View File
File diff suppressed because one or more lines are too long
themes/peaceful_horse.txt
-1
View File
@@ -1 +0,0 @@
{"autoplayAudio":"false","containerMapValues":"[{\"id\":\"container-2\",\"name\":\"horse clone\",\"x\":\"259px\",\"y\":\"472px\",\"height\":304,\"width\":450,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fclipart-library.com%2Fimages%2F5TRrgXbpc.gif&f=1&nofb=1&ipt=d33858e361adaf5dda2c98e4dcb165f4ed22a20915c3efe5cd201d7b0a6b3704\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,0.9)\",\"zIndex\":1}}]","wallpaper":"\"https://i.imgur.com/3QYCOxV.jpeg\"","repeatWallpaper":"false","zIndexMapData":"{\"1\":\"container-2\",\"2\":\"container-2\"}","audioLink":"\"\"","activeTabId":"\"containerTab\"","settingsMenuData":"{\"x\":\"803px\",\"y\":\"115px\",\"width\":644,\"height\":404}","cursors":"{}"}
themes/pillars_dark.txt
+1
View File
File diff suppressed because one or more lines are too long