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

got rid of "edit page" toggle, updated some help text

Browse Source
This commit is contained in:
simon
2026-04-17 16:11:49 -04:00
parent 2b0bb9ee47
commit a009cb050a
1 changed files with 53 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
startpage.html
+53 -78
View File
@@ -38,6 +38,7 @@
body { body {
height: 100vh; height: 100vh;
margin: 0; margin: 0;
background-color: #181818;
} }
@@ -285,25 +286,10 @@
hr { hr {
width: 75%; width: 75%;
} }
#editToggle {
z-index: 999;
position: fixed;
font-size: 0.75rem;
}
#editToggle:hover {
cursor: pointer;
}
</style> </style>
</head> </head>
<body> <body>
<div style="display: flex; flex-direction: column">
<a id="editToggle" onClick="toggleEditMode()" style="align-self: flex-end"
>edit page
</a>
</div>
<div id="settingsContainer" class="movable settingsContainer hidden"> <div id="settingsContainer" class="movable settingsContainer hidden">
<div id="tabList"> <div id="tabList">
@@ -320,13 +306,19 @@
<div> <div>
<div id="helpPage" class="tabContent"> <div id="helpPage" class="tabContent">
<p> <p>
you are now editing the page!<br /><br />
welcome to the custom startpage creator - you are now editing the page!<br /><br />
if you're not familiar with the concept of a startpage or what this is:<br />
you can customize this page to your liking, then set it as your browser's default webpage for when you open new tabs. that way, you have quick access to your links in a format comfortable to you.<br /><br />
<b><u>(i would like to return to this project to clean the UI up, but have other priorities for now. everything should work well as is, it's just an extremely confusing menu at first. leave a comment for help)</u></b><br /><br />
this is the configuration panel - use the tabs above to find various this is the configuration panel - use the tabs above to find various
customization options for your startpage experience.<br /><br /> customization options for your startpage experience.<br /><br />
this panel is adjustable, and every "layer" you add to the page will be as well. this panel is adjustable, and every "layer" you add to the page will be as well.<br /><br />
click + drag to move, right-click + drag to resize.<br /><br /> click + drag to move this box, or right-click + drag to resize it.<br /><br />
on the "layers" tab, you can add two types of layers to the page: on the "layers" tab, you can add two types of layers to the page:
</p> </p>
@@ -345,9 +337,21 @@
</li> </li>
</ol> </ol>
<p> <p>
there are some keyboard shortcuts for your convenience:<br />
"e" = enables editing mode<br />
esc = disables editing mode (and saves page)<br />
backspace = delete last clicked container (only in editing mode)<br />
<b><u>your changes will be saved to the page when you exit editing mode!</u></b><br /><br /> <b><u>your changes will be saved to the page when you exit editing mode!</u></b><br /><br />
to undo current changes / revert to the last saved state, force refresh the page while still to undo current changes made since entering "edit" mode (or revert to the last saved state),
editing the page. force refresh the page while still in "edit" mode.
<br /><br />
<i>
i do not store or collect any information about your page at all.
that's why all media you embed has to be via URL, i host nothing!
all of your customizations are stored as cookies locally on your own machine.
</i>
<br /><br /> <br /><br />
that concludes the basics. there's some more advanced information below: that concludes the basics. there's some more advanced information below:
@@ -358,13 +362,7 @@
<p class="expandedMenuIndicator">+</p> <p class="expandedMenuIndicator">+</p>
</div> </div>
<div class="expandableMenu"> <div class="expandableMenu">
<p>
there are some keyboard shortcuts for your convenience:<br />
"e" = enables editing mode<br />
esc = disables editing mode (and saves page)<br />
backspace = delete last clicked container (only in editing mode)<br />
</p>
<hr />
<p> <p>
<u>precise adjustments:</u> <u>precise adjustments:</u>
click on a container or settings slider to focus it, then use the arrow keys click on a container or settings slider to focus it, then use the arrow keys
@@ -417,6 +415,30 @@
layer's "text options" layer's "text options"
</p> </p>
</div> </div>
<div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
<p>importing/exporting themes</p>
<p class="expandedMenuIndicator">+</p>
</div>
<div class="expandableMenu">
<p>
on the far right tab, you can export your theme as a text file (and import exported themes). this allows you to rotate between different setups, or share with people.<br /><br />
if you want an idea of what can be done with this, <a href="https://github.com/sotrali/startpage/tree/main/themes" target="_blank">here's a link to a few text files you can download and import yourself</a>
</p>
</div>
<div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
<p>starting from scratch</p>
<p class="expandedMenuIndicator">+</p>
</div>
<div class="expandableMenu">
<p>
should you want a totally clean slate:<br /><br />
open your web browser's settings menu, find the cookies/cache page, and wipe all data for carcrash.lol
</p>
</div>
</div> </div>
<div id="containerPage" class="tabContent"> <div id="containerPage" class="tabContent">
@@ -572,19 +594,6 @@
NOTE: autoplay requires either whitelisting this site or generally NOTE: autoplay requires either whitelisting this site or generally
enabling "allow auto-play audio" in your browser's settings. enabling "allow auto-play audio" in your browser's settings.
</p> </p>
<hr />
<h2 class="menuHeader">edit mode toggle</h2>
<div class="containerOptionListing">
<label for="edit-toggle-color">set "edit mode" toggle color: </label>
<input id="edit-toggle-color" type="color" />
</div>
<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>
</div> </div>
</div> </div>
</div> </div>
@@ -2042,27 +2051,7 @@
} }
}); });
/** set edit mode toggle color */
editToggleRgba = localStorage.getItem("editToggleRgba")
|| "rgba(0,0,0,1)";
document.getElementById("editToggle").style.color = editToggleRgba;
// fill in inputs with saved value
document.getElementById("edit-toggle-color").value =
rgbToHex(
editToggleRgba.replace("rgba(", "").slice(0, -1).split(",").splice(0, 3)
);
document.getElementById("edit-toggle-alpha").value =
parseInt(
editToggleRgba.replace("rgba(", "").slice(0, -1).split(",")[3]
) * 100;
// set event listeners
document
.getElementById("edit-toggle-color")
.addEventListener("input", changeEditToggleColor, false);
document
.getElementById("edit-toggle-alpha")
.addEventListener("input", changeEditToggleColor, false);
/** set wallpaper */ /** set wallpaper */
wallpaper = JSON.parse(localStorage.getItem("wallpaper")) || ""; wallpaper = JSON.parse(localStorage.getItem("wallpaper")) || "";
if (wallpaper.startsWith("#")) { if (wallpaper.startsWith("#")) {
@@ -2123,6 +2112,8 @@
let containerMapValues = let containerMapValues =
JSON.parse(localStorage.getItem("containerMapValues")) || []; JSON.parse(localStorage.getItem("containerMapValues")) || [];
numberTotalContainers = containerMapValues.length; numberTotalContainers = containerMapValues.length;
if (numberTotalContainers == 0 && wallpaper == "") alert("press \"e\" to get started (after you've closed this alert)");
for (let i = 0; i < numberTotalContainers; i++) { for (let i = 0; i < numberTotalContainers; i++) {
containerDataMap.set(containerMapValues[i].id, new Container( containerDataMap.set(containerMapValues[i].id, new Container(
@@ -2259,7 +2250,6 @@
else { else {
editing = false; editing = false;
toggleEditingElements(false); toggleEditingElements(false);
document.getElementById("editToggle").innerHTML = "saving";
// if data was just imported directly to localStorage, don't save current element states (would overwrite import) // if data was just imported directly to localStorage, don't save current element states (would overwrite import)
if (justImported) { if (justImported) {
@@ -2302,26 +2292,19 @@
// save active settings tab for next session // save active settings tab for next session
localStorage.setItem("activeTabId", JSON.stringify(activeTabId)); localStorage.setItem("activeTabId", JSON.stringify(activeTabId));
// save edit mode toggle customization
localStorage.setItem("editToggleRgba", editToggleRgba);
// lastly, set current state as download contents for export button // lastly, set current state as download contents for export button
const exportData = new Blob([JSON.stringify(localStorage)], {type: 'text/plain'}); const exportData = new Blob([JSON.stringify(localStorage)], {type: 'text/plain'});
const url = window.URL.createObjectURL(exportData); const url = window.URL.createObjectURL(exportData);
document.getElementById("export-button").href = url; document.getElementById("export-button").href = url;
document.getElementById("editToggle").innerHTML = "edit page";
} }
} }
/** handles the revealing/concealing of elements part of toggling edit mode */ /** handles the revealing/concealing of elements part of toggling edit mode */
function toggleEditingElements(show) { function toggleEditingElements(show) {
const editButton = document.getElementById("editToggle");
const settingsContainer = document.getElementById("settingsContainer"); const settingsContainer = document.getElementById("settingsContainer");
/** when editing-mode is enabled, */ /** when editing-mode is enabled, */
if (show) { if (show) {
editButton.innerHTML = "save + stop editing";
// reveal settings container // reveal settings container
settingsContainer.classList.remove("hidden"); settingsContainer.classList.remove("hidden");
@@ -2818,15 +2801,7 @@
} }
} }
function changeEditToggleColor(colorChange) {
editToggleRgba = hexToRgba(
document.getElementById("edit-toggle-color").value,
document.getElementById("edit-toggle-alpha").value
);
document.getElementById("editToggle").style.color = editToggleRgba;
}
function moveElement(mouseMove) { function moveElement(mouseMove) {
if (!moving) { if (!moving) {
return; return;