diff --git a/bookish/static/css/style.css b/bookish/static/css/style.css index 9cd4069..e3cfbe7 100644 --- a/bookish/static/css/style.css +++ b/bookish/static/css/style.css @@ -593,6 +593,42 @@ body { border-radius: 4px; } +/* Toast notification */ +.reader-toast { + position: fixed; + bottom: 24px; + left: 50%; + transform: translateX(-50%) translateY(20px); + background: #1d1d1f; + color: #fff; + padding: 0.7rem 1.4rem; + border-radius: 10px; + font-size: 0.85rem; + box-shadow: 0 4px 20px rgba(0,0,0,0.25); + z-index: 300; + opacity: 0; + transition: opacity 0.3s, transform 0.3s; + pointer-events: none; + white-space: nowrap; +} + +.reader-toast.show { + opacity: 1; + transform: translateX(-50%) translateY(0); +} + +/* Bookmark button flash */ +.bm-flash { + animation: bmPulse 0.6s ease; +} + +@keyframes bmPulse { + 0% { transform: scale(1); } + 30% { transform: scale(1.25); color: #007aff; } + 60% { transform: scale(1); } + 100% { transform: scale(1); } +} + /* Reader Layout */ .reader-container { display: flex; diff --git a/bookish/static/js/reader.js b/bookish/static/js/reader.js index 4e1a7ca..7b7a3c0 100644 --- a/bookish/static/js/reader.js +++ b/bookish/static/js/reader.js @@ -713,6 +713,17 @@ bookmarks.push(data); saveBookmarks(bookmarks); renderBookmarks(); + + // Feedback visivo + flashBookmarkBtn(); + showToast("Segnalibro aggiunto — vedi la scheda Segnalibri nella sidebar"); + } + + function flashBookmarkBtn() { + const btn = document.getElementById("bookmarkToggle"); + if (!btn) return; + btn.classList.add("bm-flash"); + setTimeout(() => btn.classList.remove("bm-flash"), 600); } function removeBookmark(id) { @@ -778,6 +789,26 @@ }); } + // === Toast notifications === + + function showToast(msg) { + const existing = document.querySelector(".reader-toast"); + if (existing) existing.remove(); + + const toast = document.createElement("div"); + toast.className = "reader-toast"; + toast.textContent = msg; + document.body.appendChild(toast); + + // Trigger animation + requestAnimationFrame(() => toast.classList.add("show")); + + setTimeout(() => { + toast.classList.remove("show"); + setTimeout(() => toast.remove(), 300); + }, 3000); + } + // === Utils === function debounce(fn, ms) { let timer;