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

css on settings container

Browse Source
This commit is contained in:
Simon
2025-07-24 23:15:08 -04:00
parent ae9b36b8e3
commit db8ddb23a5
1 changed files with 189 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files
startpage.html
+189 -173
View File
@@ -69,6 +69,7 @@
align-self: flex-end; align-self: flex-end;
height: 25rem; height: 25rem;
width: 40rem;
overflow: scroll; overflow: scroll;
} }
@@ -99,12 +100,17 @@
font-weight: bold; font-weight: bold;
text-decoration: underline; text-decoration: underline;
} }
.tabContent {
display: none;
flex-direction: column;
padding-left: 1rem;
padding-right: 1rem;
}
a.visited { a.visited {
color: black; color: black;
} }
#ioTab {
flex-shrink: 1;
}
#containers { #containers {
padding-left: .25rem; padding-left: .25rem;
@@ -112,17 +118,8 @@
/* /*
* SETTINGS PAGES * SETTINGS PAGES
*/ */
form,
#instructionsForm {
display: none;
flex-direction: column;
}
.formTitle {
margin-bottom: 1rem;
text-decoration: underline;
font-style: italic;
align-self: center;
}
label { label {
align-self: start; align-self: start;
} }
@@ -143,7 +140,6 @@
margin: 0 0 0 0; margin: 0 0 0 0;
padding: .5rem 0rem .5rem .5rem; padding: .5rem 0rem .5rem .5rem;
width: 100%;
} }
.expandableMenuToggle.active, .expandableMenuToggle:hover { .expandableMenuToggle.active, .expandableMenuToggle:hover {
background-color: rgba(213, 205, 205, 1); background-color: rgba(213, 205, 205, 1);
@@ -170,14 +166,17 @@
} }
.containerListing { .containerListing {
border: 1px solid black;
margin-bottom: .5rem;
} }
.manageButtons { .manageButtons {
display: flex; display: flex;
flex-direction: reow; flex-direction: row;
justify-content: space-between; justify-content: space-between;
margin: 1rem 0rem; align-items: center;
padding: 1rem 0rem;
} }
.bookmarkListingContainer { .bookmarkListingContainer {
display: flex; display: flex;
@@ -214,6 +213,11 @@
input[type="color"] { input[type="color"] {
width: 4rem; width: 4rem;
} }
button {
border: none;
border-radius: 50px;
padding: .25rem .5rem .25rem .5rem;
}
.bookmarkListingButtons { .bookmarkListingButtons {
} }
@@ -227,10 +231,9 @@
.bookmarkDeleteButton { .bookmarkDeleteButton {
} }
.bookmarkDeleteButton:hover { .deleteButton:hover {
background-color: rgba(173, 165, 165, 0.8); background-color: rgba(173, 165, 165, 0.8);
color: red; color: red;
cursor: pointer;
} }
hr { hr {
@@ -268,14 +271,8 @@
</div> </div>
</div> </div>
<div style="padding: 0 .5rem;"> <div>
<!-- note to self: <div id="instructionsPage" class="tabContent">
- 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">
<p> <p>
you are now editing the page!<br /><br /> you are now editing the page!<br /><br />
@@ -365,7 +362,11 @@
there are some keyboard shortcuts for your convenience:<br /> there are some keyboard shortcuts for your convenience:<br />
"e" = enables editing mode<br /> "e" = enables editing mode<br />
esc = disables editing mode (and saves page)<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>
<p> <p>
floating text:<br /> floating text:<br />
@@ -377,136 +378,142 @@
</div> </div>
</div> </div>
<form id="containerForm" onsubmit="return false"> <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>
<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>
</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>
<form id="globalSettingsForm" onsubmit="return false">
<div> <div>
<p class="menuHeader">image manipulation</p> <h2 class="menuHeader">add bookmark layer</h2>
<div class="containerOptionListing"> <input
<label for="imageRatioToggle">image free transform mode</label> id="newTextContainerNameInput"
<input type="checkbox" id="imageRatioToggle" /> placeholder="(optional) layer name"
</div> style="width: 100%"
type="text"
<p class="menuHeader">change page wallpaper</p> />
<div class="containerOptionListing"> <button id="newTextContainerCreateButton" onclick="createNewTextContainer(this)">
<label for="wallpaperUrl">set image as wallpaper: </label> create new layer
<div style="display: flex; flex-direction: column; align-items: end;"> </button>
<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>
<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>
<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>
<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> </div>
</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>
<div id="ioPage" class="tabContent">
<p>export current setup to clipboard (see help tab for more information):</p>
<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>
<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>
<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>
<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>
<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 either white-listing this site in your browser
or generally enabling "allow auto-play audio" in your browser's settings.
</p>
</div>
</div> </div>
todo: make tab shortcuts.
also change section buttons to actual buttons, and collapse / expand all logic
</body> </body>
<script> <script>
@@ -651,7 +658,6 @@
} }
this.initializeImageContainer(); this.initializeImageContainer();
// this.createImageContainerMenuListing();
} }
// if constructing text container // if constructing text container
else { else {
@@ -867,12 +873,17 @@
createTextContainerMenuListing() { createTextContainerMenuListing() {
let zindex = parseInt(this.containerSettings.zIndex); let zindex = parseInt(this.containerSettings.zIndex);
let upButtons = ` 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-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 = ` let downButtons = `
<button id="` + this.id + `--move-down-button"} onclick="reorderContainer(this, 'down')">move down</button> <div ${zindex == 1 ? `` : `style="margin-top: .25rem;"`}>
<button id="` + this.id + `--move-bottom-button"} onclick="reorderContainer(this, 'bottom')">banish to bottom</button> <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( document.getElementById("containers").insertAdjacentHTML(
@@ -884,7 +895,7 @@
<p id=${this.id + "--listing-header"}>[${this.containerSettings.zIndex}]: ${this.name}</p> <p id=${this.id + "--listing-header"}>[${this.containerSettings.zIndex}]: ${this.name}</p>
<p class="expandedMenuIndicator">-</p> <p class="expandedMenuIndicator">-</p>
</div> </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)"> <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
<p>${this.name}: bookmarks</p> <p>${this.name}: bookmarks</p>
@@ -1034,9 +1045,7 @@
<div class="containerOptionListing"> <div class="containerOptionListing">
<div> <div>
<p style="margin: 0;"> <p style="margin: 0;">
change font (see instructions for more info):<br /> change font:<br />(see help tab for more info)<br />
<b>current font:</b>
<span id=${this.id + "-settings-font-name"}></span>
</p> </p>
</div> </div>
@@ -1044,6 +1053,9 @@
<input id=${this.id + "-settings-font-input"} /> <input id=${this.id + "-settings-font-input"} />
<br /> <br />
<button id=${this.id + "-settings-set-font-button"}>set font</button> <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>
</div> </div>
<br /> <br />
@@ -1139,7 +1151,7 @@
${zindex == 1 ? `` : downButtons} ${zindex == 1 ? `` : downButtons}
</div> </div>
<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> </div>
</div> </div>
@@ -1240,12 +1252,16 @@
createImageContainerMenuListing() { createImageContainerMenuListing() {
let zindex = this.containerSettings.zIndex; let zindex = this.containerSettings.zIndex;
let upButtons = ` 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-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 = ` let downButtons = `
<button id="` + this.id + `--move-down-button"} onclick="reorderContainer(this, 'down')">move down</button> <div ${zindex == 1 ? `` : `style="margin-top: .25rem;"`}>
<button id="` + this.id + `--move-bottom-button"} onclick="reorderContainer(this, 'bottom')">banish to bottom</button> <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( document.getElementById("containers").insertAdjacentHTML(
@@ -1257,7 +1273,7 @@
<p id=${this.id + "--listing-header"}>[${this.containerSettings.zIndex}]: ${this.name}</p> <p id=${this.id + "--listing-header"}>[${this.containerSettings.zIndex}]: ${this.name}</p>
<p class="expandedMenuIndicator">-</p> <p class="expandedMenuIndicator">-</p>
</div> </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)"> <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
<p>border + shape options</p> <p>border + shape options</p>
@@ -1794,7 +1810,7 @@
activeTabId = activeTabId =
JSON.parse(localStorage.getItem("activeTabId")) || "instructionsTab"; JSON.parse(localStorage.getItem("activeTabId")) || "instructionsTab";
document.getElementById( document.getElementById(
activeTabId.replace("Tab", "Form") activeTabId.replace("Tab", "Page")
).style.display = "flex"; ).style.display = "flex";
document.getElementById(activeTabId).classList.add("active"); document.getElementById(activeTabId).classList.add("active");
// add tab-switching listeners // add tab-switching listeners
@@ -2054,13 +2070,13 @@
document.getElementById(activeTabId).classList.remove("active"); document.getElementById(activeTabId).classList.remove("active");
document.getElementById( document.getElementById(
activeTabId.replace("Tab", "Form") activeTabId.replace("Tab", "Page")
).style.display = "none"; ).style.display = "none";
// set new tab // set new tab
activeTabId = event.target.id; activeTabId = event.target.id;
document.getElementById( document.getElementById(
activeTabId.replace("Tab", "Form") activeTabId.replace("Tab", "Page")
).style.display = "flex"; ).style.display = "flex";
document.getElementById(activeTabId).classList.add("active"); document.getElementById(activeTabId).classList.add("active");