chris/toadstoolTally
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace emojis with Font Awesome icons

Browse Source
This commit is contained in:
chris 2025-12-10 12:05:41 -05:00
parent e552026efa
commit edf5175236
3 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
assets/app.js
View File

@ -146,10 +146,10 @@ if (animationsEnabled === null) animationsEnabled = true;
function applyTheme() { function applyTheme() {
if (isDarkMode) { if (isDarkMode) {
document.body.classList.add('dark-mode'); document.body.classList.add('dark-mode');
document.getElementById('themeBtn').innerHTML = '🌙'; document.getElementById('themeBtn').innerHTML = '<i class="fa-solid fa-moon"></i>';
} else { } else {
document.body.classList.remove('dark-mode'); document.body.classList.remove('dark-mode');
document.getElementById('themeBtn').innerHTML = '☀️'; document.getElementById('themeBtn').innerHTML = '<i class="fa-solid fa-sun"></i>';
} }
handleAmbientDrift(); handleAmbientDrift();
updateMotionBtn(); updateMotionBtn();
@ -168,7 +168,7 @@ applyTheme();
function updateMotionBtn() { function updateMotionBtn() {
if (!motionBtn) return; if (!motionBtn) return;
motionBtn.innerHTML = animationsEnabled ? '✨' : '🚫'; motionBtn.innerHTML = animationsEnabled ? '<i class="fa-solid fa-wand-magic-sparkles"></i>' : '<i class="fa-solid fa-ban"></i>';
motionBtn.title = animationsEnabled ? 'Toggle Animations' : 'Animations disabled'; motionBtn.title = animationsEnabled ? 'Toggle Animations' : 'Animations disabled';
} }
@ -621,7 +621,7 @@ function render() {
const isLocked = part.locked ? 'is-locked' : ''; const isLocked = part.locked ? 'is-locked' : '';
const isFinished = part.finished ? 'is-finished' : ''; const isFinished = part.finished ? 'is-finished' : '';
const isMinimized = part.minimized ? 'is-minimized' : ''; const isMinimized = part.minimized ? 'is-minimized' : '';
const lockIcon = part.locked ? '🔒' : '🔓'; const lockIcon = part.locked ? '<i class="fa-solid fa-lock"></i>' : '<i class="fa-solid fa-lock-open"></i>';
const lockBtnClass = part.locked ? 'btn-lock locked-active' : 'btn-lock'; const lockBtnClass = part.locked ? 'btn-lock locked-active' : 'btn-lock';
const controlsDimmed = (part.locked || part.finished) ? 'dimmed' : ''; const controlsDimmed = (part.locked || part.finished) ? 'dimmed' : '';
const hideControls = (part.finished || part.minimized) ? 'hidden-controls' : ''; const hideControls = (part.finished || part.minimized) ? 'hidden-controls' : '';
@ -637,18 +637,18 @@ function render() {
const partCardFullClass = `${isLocked} ${isFinished} ${isMinimized} ${finishPulseClass}`; const partCardFullClass = `${isLocked} ${isFinished} ${isMinimized} ${finishPulseClass}`;
const lockDisabled = part.locked ? 'disabled' : ''; const lockDisabled = part.locked ? 'disabled' : '';
const actionsHtml = part.minimized const actionsHtml = part.minimized
? `<div class="part-actions"><button class="icon-btn btn-toggle-part" onclick="togglePartMinimize(${project.id}, ${part.id})" title="Expand">▼</button></div>` ? `<div class="part-actions"><button class="icon-btn btn-toggle-part" onclick="togglePartMinimize(${project.id}, ${part.id})" title="Expand"><i class="fa-solid fa-chevron-down"></i></button></div>`
: `<div class="part-actions"> : `<div class="part-actions">
<button class="btn-color" style="--project-color: ${accent}" onclick="document.getElementById('${colorInputId}').click()" title="Set color"></button> <button class="btn-color" style="--project-color: ${accent}" onclick="document.getElementById('${colorInputId}').click()" title="Set color"></button>
<input type="color" id="${colorInputId}" class="color-input" value="${accent}" onchange="setPartColor(${project.id}, ${part.id}, this.value)"> <input type="color" id="${colorInputId}" class="color-input" value="${accent}" onchange="setPartColor(${project.id}, ${part.id}, this.value)">
<button class="icon-btn btn-reset-part" onclick="resetCount(${project.id}, ${part.id})" ${isFinished || part.locked ? 'disabled' : ''}>↺</button> <button class="icon-btn btn-reset-part" onclick="resetCount(${project.id}, ${part.id})" ${isFinished || part.locked ? 'disabled' : ''}><i class="fa-solid fa-rotate-left"></i></button>
<button class="icon-btn btn-delete-part" onclick="deletePart(${project.id}, ${part.id})" ${lockDisabled}>🗑️</button> <button class="icon-btn btn-delete-part" onclick="deletePart(${project.id}, ${part.id})" ${lockDisabled}><i class="fa-solid fa-trash"></i></button>
<button class="icon-btn btn-toggle-part" onclick="togglePartMinimize(${project.id}, ${part.id})" title="Minimize">▼</button> <button class="icon-btn btn-toggle-part" onclick="togglePartMinimize(${project.id}, ${part.id})" title="Minimize"><i class="fa-solid fa-chevron-down"></i></button>
</div>`; </div>`;
const countSubtext = part.minimized ? '' : ` const countSubtext = part.minimized ? '' : `
<div class="count-subtext"> <div class="count-subtext">
${part.max !== null ? `<strong>${part.count}</strong> / ${part.max}` : 'No max set'} ${part.max !== null ? `<strong>${part.count}</strong> / ${part.max}` : 'No max set'}
<button class="icon-btn ${showSetMax}" onclick="openModal('setMax', ${project.id}, ${part.id})" title="Set max" ${lockDisabled}>⚙️</button> <button class="icon-btn ${showSetMax}" onclick="openModal('setMax', ${project.id}, ${part.id})" title="Set max" ${lockDisabled}><i class="fa-solid fa-gear"></i></button>
</div> </div>
`; `;

1
assets/style.css
View File

@ -127,6 +127,7 @@ h1 {
color: var(--header-text); color: var(--header-text);
transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.2s; transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.2s;
transform: translateY(0); transform: translateY(0);
font-family: inherit;
} }
.header-btn:hover { transform: translateY(-1px) scale(1.03); box-shadow: 0 6px 14px rgba(0,0,0,0.12); } .header-btn:hover { transform: translateY(-1px) scale(1.03); box-shadow: 0 6px 14px rgba(0,0,0,0.12); }
.header-btn:active { transform: translateY(0) scale(0.96); box-shadow: none; } .header-btn:active { transform: translateY(0) scale(0.96); box-shadow: none; }

13
index.html
View File

@ -7,6 +7,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;700&family=Quicksand:wght@400;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;700&family=Quicksand:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-4LrZ0Yqhgm/Vdyg0LJ5Rzc5x8g6f5seRTwOAyq1DmiIYQnqak44fUgWuxlHfwDfC0BNp8f7C0R60VNZ9sFlQmA==" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="icon" href="assets/icons/favicon.ico"> <link rel="icon" href="assets/icons/favicon.ico">
<link rel="icon" type="image/png" sizes="96x96" href="assets/icons/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="96x96" href="assets/icons/favicon-96x96.png">
<link rel="icon" type="image/svg+xml" href="assets/icons/favicon.svg"> <link rel="icon" type="image/svg+xml" href="assets/icons/favicon.svg">
@ -23,12 +24,12 @@
<h1 id="appTitle">Toadstool Cottage Counter</h1> <h1 id="appTitle">Toadstool Cottage Counter</h1>
</div> </div>
<div class="header-controls"> <div class="header-controls">
<button class="header-btn hidden" id="installBtn" title="Install app">⬇️</button> <button class="header-btn hidden" id="installBtn" title="Install app"><i class="fa-solid fa-download"></i></button>
<button class="header-btn" id="motionBtn" onclick="toggleAnimations()" title="Toggle Animations">✨</button> <button class="header-btn" id="motionBtn" onclick="toggleAnimations()" title="Toggle Animations"><i class="fa-solid fa-wand-magic-sparkles"></i></button>
<button class="header-btn" id="themeBtn" onclick="toggleTheme()" title="Toggle Dark Mode">🌓</button> <button class="header-btn" id="themeBtn" onclick="toggleTheme()" title="Toggle Dark Mode"><i class="fa-solid fa-moon"></i></button>
<button class="header-btn" id="focusBtn" onclick="toggleFocusMode()" title="Focus Mode (Keeps Screen On)">👁️</button> <button class="header-btn" id="focusBtn" onclick="toggleFocusMode()" title="Focus Mode (Keeps Screen On)"><i class="fa-solid fa-eye"></i></button>
<button class="header-btn" id="exportBtn" onclick="exportData()" title="Export data">⬆️</button> <button class="header-btn" id="exportBtn" onclick="exportData()" title="Export data"><i class="fa-solid fa-file-export"></i></button>
<button class="header-btn" id="importBtn" title="Import data">⬇️</button> <button class="header-btn" id="importBtn" title="Import data"><i class="fa-solid fa-file-import"></i></button>
</div> </div>
</header> </header>
<input type="file" id="importFile" accept="application/json" class="hidden-input" /> <input type="file" id="importFile" accept="application/json" class="hidden-input" />