commit 9daf3daeef4146b51e2056954ceb9f9c8f07050c
parent a005bac883e502ea54fe32cff178f2eba600403c
Author: Hunter
Date: Sun, 16 Nov 2025 22:12:34 -0500
add reusable .popup-notification component
Diffstat:
| M | script.js | | | 23 | +++++++++++++++++++++++ |
| M | style.css | | | 36 | +++++++++++++++++++++++++++++++++++- |
2 files changed, 58 insertions(+), 1 deletion(-)
diff --git a/script.js b/script.js
@@ -4,6 +4,9 @@ const GRID_ROWS = 66;
const grid = document.getElementById('grid');
const page = document.querySelector('.page');
+let popupElement = null;
+let popupTimeout = null;
+
// Calculate cell size dynamically based on actual grid dimensions
function getCellSize() {
const gridRect = grid.getBoundingClientRect();
@@ -1064,3 +1067,22 @@ fileInput.addEventListener('change', async (e) => {
// Clear the input so the same files can be selected again
fileInput.value = '';
});
+
+function showPopup(message, displayDuration = 1250) {
+ if (!popupElement) {
+ popupElement = document.createElement('div');
+ popupElement.className = 'popup-notification';
+ document.body.appendChild(popupElement);
+ }
+
+ if (popupTimeout) clearTimeout(popupTimeout);
+
+ popupElement.textContent = message;
+ popupElement.classList.remove('fade-out');
+ popupElement.classList.add('show');
+
+ popupTimeout = setTimeout(() => {
+ popupElement.classList.remove('show');
+ popupElement.classList.add('fade-out');
+ }, displayDuration);
+}
+\ No newline at end of file
diff --git a/style.css b/style.css
@@ -61,6 +61,9 @@
/* Set text color for all themes */
color: var(--white);
+
+ /* Set font */
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* Theme definitions */
@@ -558,7 +561,6 @@ body.dragging * {
border-radius: 100px;
padding: 14px 28px;
font-size: 16px;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
@@ -586,3 +588,35 @@ body.dragging * {
opacity: 1;
}
}
+
+.popup-notification {
+ position: fixed;
+ bottom: 2rem;
+ left: 50%;
+ transform: translateX(-50%);
+ background-color: var(--accent);
+ color: var(--page);
+ border: 2px solid var(--page);
+ padding: 0.7rem 0.9rem;
+ border-radius: 50rem;
+ font-size: 1.2rem;
+ text-align: center;
+ white-space: nowrap;
+ user-select: none;
+ width: fit-content;
+ height: fit-content;
+ opacity: 0;
+ pointer-events: none;
+ z-index: 10000;
+}
+
+.popup-notification.show {
+ opacity: 1;
+ transition: none;
+}
+
+.popup-notification.fade-out {
+ opacity: 0;
+ filter: blur(4px);
+ transition: opacity 1.5s ease-out, filter 1.5s ease-out;
+}