tools / commit
adding default icons
separator-page/icons/template-icon-1.png | Bin 0 -> 23061 bytes separator-page/icons/template-icon-10.png | Bin 0 -> 28966 bytes separator-page/icons/template-icon-11.png | Bin 0 -> 39781 bytes separator-page/icons/template-icon-12.png | Bin 0 -> 30222 bytes separator-page/icons/template-icon-13.png | Bin 0 -> 19720 bytes separator-page/icons/template-icon-2.png | Bin 0 -> 14143 bytes separator-page/icons/template-icon-3.png | Bin 0 -> 16440 bytes separator-page/icons/template-icon-4.png | Bin 0 -> 37455 bytes separator-page/icons/template-icon-5.png | Bin 0 -> 24424 bytes separator-page/icons/template-icon-6.png | Bin 0 -> 26763 bytes separator-page/icons/template-icon-7.png | Bin 0 -> 31415 bytes separator-page/icons/template-icon-8.png | Bin 0 -> 21859 bytes separator-page/icons/template-icon-9.png | Bin 0 -> 26307 bytes separator-page/index.html | 73 ++++++++++++++++++++++++++++-- 14 files changed, 69 insertions(+), 4 deletions(-) diff --git a/separator-page/icons/template-icon-1.png b/separator-page/icons/template-icon-1.png new file mode 100644 index 0000000..6f3825b Binary files /dev/null and b/separator-page/icons/template-icon-1.png differ diff --git a/separator-page/icons/template-icon-10.png b/separator-page/icons/template-icon-10.png new file mode 100644 index 0000000..e96db50 Binary files /dev/null and b/separator-page/icons/template-icon-10.png differ diff --git a/separator-page/icons/template-icon-11.png b/separator-page/icons/template-icon-11.png new file mode 100644 index 0000000..0029ab6 Binary files /dev/null and b/separator-page/icons/template-icon-11.png differ diff --git a/separator-page/icons/template-icon-12.png b/separator-page/icons/template-icon-12.png new file mode 100644 index 0000000..1d644e2 Binary files /dev/null and b/separator-page/icons/template-icon-12.png differ diff --git a/separator-page/icons/template-icon-13.png b/separator-page/icons/template-icon-13.png new file mode 100644 index 0000000..b1517ac Binary files /dev/null and b/separator-page/icons/template-icon-13.png differ diff --git a/separator-page/icons/template-icon-2.png b/separator-page/icons/template-icon-2.png new file mode 100644 index 0000000..e78e157 Binary files /dev/null and b/separator-page/icons/template-icon-2.png differ diff --git a/separator-page/icons/template-icon-3.png b/separator-page/icons/template-icon-3.png new file mode 100644 index 0000000..ca665b1 Binary files /dev/null and b/separator-page/icons/template-icon-3.png differ diff --git a/separator-page/icons/template-icon-4.png b/separator-page/icons/template-icon-4.png new file mode 100644 index 0000000..10eaaf3 Binary files /dev/null and b/separator-page/icons/template-icon-4.png differ diff --git a/separator-page/icons/template-icon-5.png b/separator-page/icons/template-icon-5.png new file mode 100644 index 0000000..48753c1 Binary files /dev/null and b/separator-page/icons/template-icon-5.png differ diff --git a/separator-page/icons/template-icon-6.png b/separator-page/icons/template-icon-6.png new file mode 100644 index 0000000..95ef782 Binary files /dev/null and b/separator-page/icons/template-icon-6.png differ diff --git a/separator-page/icons/template-icon-7.png b/separator-page/icons/template-icon-7.png new file mode 100644 index 0000000..922e89e Binary files /dev/null and b/separator-page/icons/template-icon-7.png differ diff --git a/separator-page/icons/template-icon-8.png b/separator-page/icons/template-icon-8.png new file mode 100644 index 0000000..eedb323 Binary files /dev/null and b/separator-page/icons/template-icon-8.png differ diff --git a/separator-page/icons/template-icon-9.png b/separator-page/icons/template-icon-9.png new file mode 100644 index 0000000..1a81b6e Binary files /dev/null and b/separator-page/icons/template-icon-9.png differ diff --git a/separator-page/index.html b/separator-page/index.html index 35f9a21..2dc61d3 100644 --- a/separator-page/index.html +++ b/separator-page/index.html @@ -190,7 +190,22 @@ <div class="description-container"> <textarea id="description" class="description" placeholder="Write your Markdown here..."># Info -This is a separator page!</textarea> +This is a separator page! +## TODO + +1. Read this page +1. Understand this page +1. The page name, icon, and content are editable +1. To enter "edit mode", click on the "Edit" button +1. Click "Done" button to return to "view mode" +1. Replace the contents on this page to whatever you want a new separator page to contain +1. Markdown contents will be rendered as HTML +1. Content links will always open in a new tab +1. All the information about a tab is stored under a specific id in local storage. Copy-pasting the url in a new tab will work, as long as you're in the same browser. +1. Your data is stored in local storage, under the tab id. +1. Local storage is accessible by any other script that's executing on the separator page (or on the same domain), so +technically *some* scripts can get your local "default separator page" state + </textarea> <div id="description-rendered" class="description-rendered"></div> <button id="edit-description" class="edit-button">Edit</button> </div> @@ -201,6 +216,8 @@ This is a separator page!</textarea> <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;"> <h3 style="margin: 0;">Previous Icons (shift-click to remove)</h3> <div style="display: flex; gap: 8px;"> + <button id="reset-icons" + style="padding: 4px 8px; font-size: 0.8em; background: #ddd; border: none; border-radius: 4px; cursor: pointer;">Reset</button> <button id="export-icons" style="padding: 4px 8px; font-size: 0.8em; background: #ddd; border: none; border-radius: 4px; cursor: pointer;">Export PNG</button> @@ -269,10 +286,30 @@ This is a separator page!</textarea> /** @type {HTMLButtonElement} */ const exportIconsButton = document.getElementById("export-icons"); + /** @type {HTMLButtonElement} */ + const resetIconsButton = document.getElementById("reset-icons"); + // Global storage key for previous icons (shared across all tabs) const previousIconsKey = "separator-previous-icons"; const maxPreviousIcons = 100; // Limit to 100 recent icons + // Default icons from the icons folder + const defaultIcons = [ + "./icons/template-icon-1.png", + "./icons/template-icon-2.png", + "./icons/template-icon-3.png", + "./icons/template-icon-4.png", + "./icons/template-icon-5.png", + "./icons/template-icon-6.png", + "./icons/template-icon-7.png", + "./icons/template-icon-8.png", + "./icons/template-icon-9.png", + "./icons/template-icon-10.png", + "./icons/template-icon-11.png", + "./icons/template-icon-12.png", + "./icons/template-icon-13.png" + ]; + // Load saved data const savedData = JSON.parse(localStorage.getItem(localStorageKey) || "null"); @@ -289,8 +326,35 @@ This is a separator page!</textarea> } // Initialize previous icons display + initializeDefaultIcons(); renderPreviousIcons(); + function initializeDefaultIcons() { + const existingIcons = JSON.parse(localStorage.getItem(previousIconsKey) || "[]"); + + // If no icons exist, populate with defaults + if (existingIcons.length === 0) { + localStorage.setItem(previousIconsKey, JSON.stringify(defaultIcons)); + console.log('Initialized with default icons'); + } + } + + function resetToDefaultIcons() { + localStorage.setItem(previousIconsKey, JSON.stringify(defaultIcons)); + renderPreviousIcons(); + + // Show feedback + const originalText = resetIconsButton.textContent; + resetIconsButton.textContent = "Reset!"; + resetIconsButton.style.background = "#4CAF50"; + setTimeout(() => { + resetIconsButton.textContent = originalText; + resetIconsButton.style.background = "#ddd"; + }, 2000); + + console.log('Reset to default icons'); + } + function updateFavicon(iconUrl) { console.debug('Updating favicon with URL:', iconUrl); faviconElement.href = iconUrl; @@ -334,7 +398,7 @@ This is a separator page!</textarea> const iconElement = document.createElement("div"); iconElement.className = "previous-icon"; iconElement.style.backgroundImage = `url('${iconUrl}')`; - iconElement.title = `${iconUrl}\n\nClick to use • Shift+Click to remove`; + iconElement.title = `Click to use • Shift+Click to remove`; iconElement.addEventListener("click", (event) => { if (event.shiftKey) { removePreviousIcon(iconUrl); @@ -536,9 +600,10 @@ This is a separator page!</textarea> // Export icons as PNG files exportIconsButton.addEventListener("click", exportIcons); - // Import icons from JSON file - importIconsButton.addEventListener("click", importIcons); + // Reset icons to defaults + resetIconsButton.addEventListener("click", resetToDefaultIcons); + console.debug("here!"); // Title and description event listeners titleElement.addEventListener("input", () => { console.debug('Title updated to:', titleElement.innerText);