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

Compare commits

merge into: chris:main
Branches Tags
chris:main
chris:pattern
chris:android-dev
...
pull from: chris:android-dev
Branches Tags
chris:pattern
chris:android-dev
chris:main

1 Commits
main ... android-de

Author SHA1 Message Date
chris
47d7ac1098 Optimize assets: minified CSS, WebP icons, local Font Awesome 2025-12-13 18:08:38 -05:00
11 changed files with 91 additions and 54 deletions
Show Stats Expand all files Collapse all files

8
TODO.md Normal file
View File

@ -0,0 +1,8 @@
# TODO
- Add server cache headers for static assets (CSS/JS/icons/SVG/webfonts) — e.g., `Cache-Control: public, max-age=31536000, immutable` for assets and `must-revalidate` for HTML.
- Consider hashing asset URLs (CSS/JS) to pair with long-lived caching.
- Optimize remaining small icons (32/128 PNGs) or add WebP fallbacks to favicon links.
- Optional: download/add FA regular/brands webfonts to cache (or strip unused @font-face blocks) to trim unused CSS warnings.
- Explore further CSS optimization (critical inline for first paint) if needed.
- Validate Lighthouse after these changes to confirm FCP/LCP improvements.

1
assets/app.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
assets/icons/appicon-1024x1024.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 68 KiB

BIN
assets/icons/appicon-256x256.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
assets/icons/appicon-64x64.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

8
assets/site.webmanifest
View File

@ -5,15 +5,15 @@
"scope": ".", "scope": ".",
"icons": [ "icons": [
{ {
"src": "icons/appicon-256x256.png", "src": "icons/appicon-256x256.webp",
"sizes": "256x256", "sizes": "256x256",
"type": "image/png", "type": "image/webp",
"purpose": "maskable" "purpose": "maskable"
}, },
{ {
"src": "icons/appicon-1024x1024.png", "src": "icons/appicon-1024x1024.webp",
"sizes": "1024x1024", "sizes": "1024x1024",
"type": "image/png", "type": "image/webp",
"purpose": "maskable" "purpose": "maskable"
} }
], ],

1
assets/style.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

9
assets/vendor/fontawesome/all.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
assets/vendor/fontawesome/webfonts/fa-solid-900.woff2 vendored Normal file
View File

Binary file not shown.

40
index.html
View File

@ -2,24 +2,34 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Toadstool Cottage Counter lets you track cozy cottagecore projects with themed counters, notes, and saves.">
<title>Toadstool Cottage Counter</title> <title>Toadstool Cottage Counter</title>
<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 rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;700&family=Quicksand:wght@400;600;700&display=swap" onload="this.onload=null;this.rel='stylesheet'">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer"> <noscript>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;700&family=Quicksand:wght@400;600;700&display=swap">
</noscript>
<link rel="stylesheet" href="assets/vendor/fontawesome/all.min.css">
<link rel="icon" type="image/png" sizes="32x32" href="assets/icons/appicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="assets/icons/appicon-32x32.png">
<link rel="icon" type="image/png" sizes="128x128" href="assets/icons/appicon-128x128.png"> <link rel="icon" type="image/png" sizes="128x128" href="assets/icons/appicon-128x128.png">
<link rel="apple-touch-icon" href="assets/icons/appicon-256x256.png"> <link rel="apple-touch-icon" href="assets/icons/appicon-256x256.png">
<link rel="manifest" href="assets/site.webmanifest"> <link rel="manifest" href="assets/site.webmanifest">
<meta name="theme-color" content="#e4e8d5"> <meta name="theme-color" content="#e4e8d5">
<link rel="stylesheet" href="assets/style.css"> <link rel="preload" as="style" href="assets/style.min.css" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
<link rel="stylesheet" href="assets/style.min.css">
</noscript>
</head> </head>
<body> <body>
<header> <header>
<div class="brand"> <div class="brand">
<img class="brand-icon" src="assets/icons/appicon-128x128.png" alt="Toadstool Cottage Counter icon"> <picture>
<source srcset="assets/icons/appicon-64x64.webp" type="image/webp">
<img class="brand-icon" src="assets/icons/appicon-64x64.png" alt="Toadstool Cottage Counter icon" loading="lazy" width="64" height="64">
</picture>
<h1 id="appTitle">Toadstool Cottage Counter</h1> <h1 id="appTitle">Toadstool Cottage Counter</h1>
</div> </div>
<div class="header-controls"> <div class="header-controls">
@ -32,11 +42,12 @@
</header> </header>
<input type="file" id="importFile" accept="application/json" class="hidden-input" /> <input type="file" id="importFile" accept="application/json" class="hidden-input" />
<div class="container" id="app"></div> <main id="mainContent">
<div class="container" id="app"></div>
<button class="fab" onclick="openModal('addProject')">+</button> <button class="fab" onclick="openModal('addProject')">+</button>
<div class="modal-overlay" id="modalOverlay"> <div class="modal-overlay" id="modalOverlay">
<div class="modal-content"> <div class="modal-content">
<h3 class="modal-title" id="modalTitle">Title</h3> <h3 class="modal-title" id="modalTitle">Title</h3>
<input type="text" class="modal-input" id="modalInput" autocomplete="off"> <input type="text" class="modal-input" id="modalInput" autocomplete="off">
@ -45,9 +56,9 @@
<button class="modal-btn btn-save" onclick="saveModal()">Save</button> <button class="modal-btn btn-save" onclick="saveModal()">Save</button>
</div> </div>
</div> </div>
</div> </div>
<div class="color-overlay" id="colorOverlay"> <div class="color-overlay" id="colorOverlay">
<div class="color-modal"> <div class="color-modal">
<h3 class="color-title">Pick a color</h3> <h3 class="color-title">Pick a color</h3>
<div class="color-grid" id="colorGrid"></div> <div class="color-grid" id="colorGrid"></div>
@ -57,9 +68,9 @@
</div> </div>
<button class="modal-btn btn-cancel" onclick="closeColorPicker()">Close</button> <button class="modal-btn btn-cancel" onclick="closeColorPicker()">Close</button>
</div> </div>
</div> </div>
<div class="save-overlay" id="saveOverlay"> <div class="save-overlay" id="saveOverlay">
<div class="save-modal"> <div class="save-modal">
<h3 class="color-title">Save or Load</h3> <h3 class="color-title">Save or Load</h3>
<p class="save-subtext">Choose projects to include:</p> <p class="save-subtext">Choose projects to include:</p>
@ -78,9 +89,10 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</main>
<script src="assets/app.js"></script> <script src="assets/app.min.js"></script>
<footer class="footer-bg" aria-hidden="true"></footer> <footer class="footer-bg" aria-hidden="true"></footer>
</body> </body>
</html> </html>

10
sw.js
View File

@ -2,9 +2,15 @@ const CACHE_NAME = 'toadstool-tally-v1';
const ASSETS = [ const ASSETS = [
'/', '/',
'/index.html', '/index.html',
'/assets/style.css', '/assets/style.min.css',
'/assets/app.js', '/assets/app.min.js',
'/assets/vendor/fontawesome/all.min.css',
'/assets/vendor/fontawesome/webfonts/fa-solid-900.woff2',
'/assets/textures/mushroom.svg', '/assets/textures/mushroom.svg',
'/assets/icons/appicon-64x64.webp',
'/assets/icons/appicon-64x64.png',
'/assets/icons/appicon-256x256.webp',
'/assets/icons/appicon-1024x1024.webp',
'/assets/icons/favicon-96x96.png', '/assets/icons/favicon-96x96.png',
'/assets/icons/favicon.ico', '/assets/icons/favicon.ico',
'/assets/icons/favicon.svg', '/assets/icons/favicon.svg',