Add shared header and footer to tool pages (#53)

rodrigogiraoserrao · web-flow · commit a824644da38d · 2025-11-25T14:35:21.000Z
- add shared site link header and attribution footer to every tool page - define reusable header and footer styles in the global stylesheet - captured updated screenshots for each tool page ------ [Codex Task](https://chatgpt.com/codex/tasks/task_e_69256d0548c48325880dd13d868dc238)
diff --git a/b64-encode.html b/b64-encode.html
@@ -88,7 +88,8 @@
 </head>
 
 <body>
-    <header>
+    <header class="page-header">
+        <a class="site-link" href="https://tools.mathspp.com/" aria-label="Back to tools.mathspp.com">← tools.mathspp.com</a>
         <h1>Base64 Encoder</h1>
         <p class="lead">Paste any text, encode it to Base64, and quickly copy the result.</p>
     </header>
@@ -192,6 +193,10 @@ <h2>Base64 output</h2>
             clearButton.addEventListener('click', handleClear);
         })();
     </script>
+
+    <footer class="page-footer">
+        <p>Built with ❤️, 🤖, and 🐍, by <a href="https://mathspp.com/">Rodrigo Girão Serrão</a></p>
+    </footer>
 </body>
 
 </html>
diff --git a/colour-translator.html b/colour-translator.html
@@ -106,7 +106,8 @@
 </head>
 
 <body>
-    <header>
+    <header class="page-header">
+        <a class="site-link" href="https://tools.mathspp.com/" aria-label="Back to tools.mathspp.com">← tools.mathspp.com</a>
         <h1>Universal Colour Translator</h1>
         <p class="lead">Pick or paste any colour and instantly see it synchronised across hex, RGB, HSL, CMYK, and ANSI colour
             names.</p>
@@ -588,6 +589,10 @@ <h2>Synchronised inputs</h2>
             updateUI(parseHex(picker.value));
         })();
     </script>
+
+    <footer class="page-footer">
+        <p>Built with ❤️, 🤖, and 🐍, by <a href="https://mathspp.com/">Rodrigo Girão Serrão</a></p>
+    </footer>
 </body>
 
 </html>
diff --git a/dmarc-analyser.html b/dmarc-analyser.html
@@ -203,9 +203,12 @@
 </head>
 
 <body>
-    <h1>DMARC Report Analyser</h1>
-    <p class="description">Drop a DMARC aggregate report (.xml, .gz or .zip) to see summary insights and examine failed
-        authentication attempts.</p>
+    <header class="page-header">
+        <a class="site-link" href="https://tools.mathspp.com/" aria-label="Back to tools.mathspp.com">← tools.mathspp.com</a>
+        <h1>DMARC Report Analyser</h1>
+        <p class="description">Drop a DMARC aggregate report (.xml, .gz or .zip) to see summary insights and examine failed
+            authentication attempts.</p>
+    </header>
 
     <div id="dropzone" class="surface">
         <strong>Drop your DMARC report here</strong>
@@ -563,6 +566,10 @@ <h2>Record Details</h2>
         showFailuresOnlyCheckbox.addEventListener('change', () => renderTable(currentRecords));
         highlightFailuresCheckbox.addEventListener('change', () => renderTable(currentRecords));
     </script>
+
+    <footer class="page-footer">
+        <p>Built with ❤️, 🤖, and 🐍, by <a href="https://mathspp.com/">Rodrigo Girão Serrão</a></p>
+    </footer>
 </body>
 
 </html>
diff --git a/gumroad-links.html b/gumroad-links.html
@@ -204,7 +204,8 @@
 </head>
 
 <body>
-    <header>
+    <header class="page-header">
+        <a class="site-link" href="https://tools.mathspp.com/" aria-label="Back to tools.mathspp.com">← tools.mathspp.com</a>
         <h1>Gumroad Link Builder</h1>
         <p class="lead">Compose Gumroad product URLs with optional checkout parameters to prefill your customer’s
             experience.</p>
@@ -686,6 +687,10 @@ <h3 style="margin: 0; font-size: 1.1rem;">Included parameters</h3>
             buildLink();
         })();
     </script>
+
+    <footer class="page-footer">
+        <p>Built with ❤️, 🤖, and 🐍, by <a href="https://mathspp.com/">Rodrigo Girão Serrão</a></p>
+    </footer>
 </body>
 
 </html>
diff --git a/image-resizer.html b/image-resizer.html
@@ -109,7 +109,8 @@
 </head>
 
 <body>
-    <header>
+    <header class="page-header">
+        <a class="site-link" href="https://tools.mathspp.com/" aria-label="Back to tools.mathspp.com">← tools.mathspp.com</a>
         <h1>Image Resizer</h1>
         <p class="lead">Drop a PNG, JPEG, or WebP image and generate a resized copy using quick presets or exact dimensions.</p>
     </header>
@@ -342,6 +343,10 @@ <h2>Result</h2>
             });
         })();
     </script>
+
+    <footer class="page-footer">
+        <p>Built with ❤️, 🤖, and 🐍, by <a href="https://mathspp.com/">Rodrigo Girão Serrão</a></p>
+    </footer>
 </body>
 
 </html>
diff --git a/lifting-max.html b/lifting-max.html
@@ -68,7 +68,8 @@
     </style>
 </head>
 <body>
-    <header>
+    <header class="page-header">
+        <a class="site-link" href="https://tools.mathspp.com/" aria-label="Back to tools.mathspp.com">← tools.mathspp.com</a>
         <h1>Lifting Max Estimator</h1>
         <p class="lead">Estimate your one-rep max (1RM) from any working weight and reps using multiple evidence-based formulas.</p>
     </header>
@@ -217,5 +218,9 @@ <h2>Range</h2>
             weightInput.addEventListener('input', updateEstimates);
         })();
     </script>
+
+    <footer class="page-footer">
+        <p>Built with ❤️, 🤖, and 🐍, by <a href="https://mathspp.com/">Rodrigo Girão Serrão</a></p>
+    </footer>
 </body>
 </html>
diff --git a/pre-fill-testimonial.html b/pre-fill-testimonial.html
@@ -196,11 +196,14 @@
 </head>
 
 <body>
-    <h1>Mathspp Testimonial Pre-fill Builder</h1>
-    <p class="lead">
-        Fill in the fields below to generate a direct link to the Mathspp testimonial form with your details pre-filled.
-        Any field you leave blank will be ignored when building the URL.
-    </p>
+    <header class="page-header">
+        <a class="site-link" href="https://tools.mathspp.com/" aria-label="Back to tools.mathspp.com">← tools.mathspp.com</a>
+        <h1>Mathspp Testimonial Pre-fill Builder</h1>
+        <p class="lead">
+            Fill in the fields below to generate a direct link to the Mathspp testimonial form with your details pre-filled.
+            Any field you leave blank will be ignored when building the URL.
+        </p>
+    </header>
 
     <form id="testimonial-form" class="surface">
         <div class="form-group">
@@ -342,6 +345,10 @@ <h2>Pre-filled testimonial link</h2>
             });
         })();
     </script>
+
+    <footer class="page-footer">
+        <p>Built with ❤️, 🤖, and 🐍, by <a href="https://mathspp.com/">Rodrigo Girão Serrão</a></p>
+    </footer>
 </body>
 
 </html>
diff --git a/qr.html b/qr.html
@@ -180,7 +180,8 @@
 </head>
 
 <body>
-    <header>
+    <header class="page-header">
+        <a class="site-link" href="https://tools.mathspp.com/" aria-label="Back to tools.mathspp.com">← tools.mathspp.com</a>
         <h1>Custom QR Code Builder</h1>
         <p class="lead">Generate downloadable QR codes with custom colours and preset styles. Paste your link, pick your
             palette, and export the code in SVG or PNG.</p>
@@ -640,6 +641,10 @@ <h2>Preview</h2>
         state.data = urlInput.value;
         refreshQr();
     </script>
+
+    <footer class="page-footer">
+        <p>Built with ❤️, 🤖, and 🐍, by <a href="https://mathspp.com/">Rodrigo Girão Serrão</a></p>
+    </footer>
 </body>
 
 </html>
diff --git a/social-link-preview.html b/social-link-preview.html
@@ -230,7 +230,8 @@
     </style>
 </head>
 <body data-default-origin="https://mathspp.com" data-worker-endpoint="https://social-link-preview-production.rodrigogiraoserrao.workers.dev/api/social-link-preview">
-    <header>
+    <header class="page-header">
+        <a class="site-link" href="https://tools.mathspp.com/" aria-label="Back to tools.mathspp.com">← tools.mathspp.com</a>
         <h1>Social Link Preview Inspector</h1>
         <p class="lead">Fetch a web page and audit its metadata for rich link previews. The tool checks general SEO
             metadata and validates the Open Graph and Twitter tags needed for sharing on LinkedIn, X (Twitter), Facebook,
@@ -708,14 +709,18 @@ <h2>Social platform previews</h2>
                 }
             }
 
-            function safeHostname(url) {
-                try {
-                    return new URL(url).hostname;
-                } catch (error) {
-                    return '';
-                }
+        function safeHostname(url) {
+            try {
+                return new URL(url).hostname;
+            } catch (error) {
+                return '';
             }
-        })();
+        }
+    })();
     </script>
+
+    <footer class="page-footer">
+        <p>Built with ❤️, 🤖, and 🐍, by <a href="https://mathspp.com/">Rodrigo Girão Serrão</a></p>
+    </footer>
 </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -90,6 +90,25 @@ body {
     text-rendering: optimizeLegibility;
 }
 
+.page-header {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    align-items: flex-start;
+}
+
+.site-link {
+    font-weight: 600;
+    color: var(--tx-2);
+    text-decoration: none;
+}
+
+.site-link:hover,
+.site-link:focus-visible {
+    color: var(--tx);
+    text-decoration: underline;
+}
+
 .page-shell {
     max-width: 960px;
     margin: 0 auto;
@@ -98,6 +117,15 @@ body {
     gap: clamp(2rem, 4vw, 3rem);
 }
 
+.page-footer {
+    text-align: center;
+    margin-top: clamp(2.5rem, 6vw, 3.5rem);
+}
+
+.page-footer p {
+    margin: 0;
+}
+
 @media (max-width: 720px) {
     .page-shell {
         padding: clamp(1.5rem, 8vw, 2.25rem) clamp(1rem, 6vw, 1.5rem) clamp(2.5rem, 9vw, 3.25rem);
diff --git a/url-encode.html b/url-encode.html
@@ -64,7 +64,8 @@
 </head>
 
 <body>
-    <header>
+    <header class="page-header">
+        <a class="site-link" href="https://tools.mathspp.com/" aria-label="Back to tools.mathspp.com">← tools.mathspp.com</a>
         <h1>URL Encoder</h1>
         <p class="lead">Convert text into a URL-safe encoded string and copy it with one click.</p>
     </header>
@@ -152,6 +153,10 @@ <h2>Encoded content</h2>
             });
         })();
     </script>
+
+    <footer class="page-footer">
+        <p>Built with ❤️, 🤖, and 🐍, by <a href="https://mathspp.com/">Rodrigo Girão Serrão</a></p>
+    </footer>
 </body>
 
 </html>
diff --git a/video-to-gif.html b/video-to-gif.html
@@ -118,7 +118,8 @@
 </head>
 
 <body>
-    <header>
+    <header class="page-header">
+        <a class="site-link" href="https://tools.mathspp.com/" aria-label="Back to tools.mathspp.com">← tools.mathspp.com</a>
         <h1>Video to GIF</h1>
         <p class="lead">Drop a video and convert it to a GIF directly in your browser. Nothing is uploaded to a server.</p>
     </header>
@@ -418,6 +419,10 @@ <h2>Conversion</h2>
             reset();
         })();
     </script>
+
+    <footer class="page-footer">
+        <p>Built with ❤️, 🤖, and 🐍, by <a href="https://mathspp.com/">Rodrigo Girão Serrão</a></p>
+    </footer>
 </body>
 
 </html>
diff --git a/what-time-is-it-for-me.html b/what-time-is-it-for-me.html
@@ -151,7 +151,8 @@
 </head>
 
 <body>
-    <header>
+    <header class="page-header">
+        <a class="site-link" href="https://tools.mathspp.com/" aria-label="Back to tools.mathspp.com">← tools.mathspp.com</a>
         <h1>What time is it for me?</h1>
         <p class="lead">Pick a date, time, and timezone to create a shareable link that shows what that moment looks
             like from your timezone.</p>
@@ -610,6 +611,10 @@ <h2 id="comparison-heading">Preview across time zones</h2>
             });
         })();
     </script>
+
+    <footer class="page-footer">
+        <p>Built with ❤️, 🤖, and 🐍, by <a href="https://mathspp.com/">Rodrigo Girão Serrão</a></p>
+    </footer>
 </body>
 
 </html>
diff --git a/word-counter.html b/word-counter.html
@@ -72,7 +72,8 @@
 </head>
 
 <body>
-    <header>
+    <header class="page-header">
+        <a class="site-link" href="https://tools.mathspp.com/" aria-label="Back to tools.mathspp.com">← tools.mathspp.com</a>
         <h1>Word Counter</h1>
         <p class="lead">Paste any text to see live counts for paragraphs, lines, words, and characters.</p>
     </header>
@@ -157,6 +158,10 @@ <h1>Word Counter</h1>
             updateCounts();
         })();
     </script>
+
+    <footer class="page-footer">
+        <p>Built with ❤️, 🤖, and 🐍, by <a href="https://mathspp.com/">Rodrigo Girão Serrão</a></p>
+    </footer>
 </body>
 
 </html>
diff --git a/workout-history.html b/workout-history.html
@@ -181,7 +181,8 @@
 </head>
 
 <body>
-    <header>
+    <header class="page-header">
+        <a class="site-link" href="https://tools.mathspp.com/" aria-label="Back to tools.mathspp.com">← tools.mathspp.com</a>
         <h1>Workout History</h1>
         <p class="lead">Browse past logs from your Cloudflare Worker workouts, one session at a time, and compare them side by
             side.</p>
@@ -668,6 +669,10 @@ <h2 style="margin: 0;">Template history</h2>
             document.addEventListener('DOMContentLoaded', init);
         })();
     </script>
+
+    <footer class="page-footer">
+        <p>Built with ❤️, 🤖, and 🐍, by <a href="https://mathspp.com/">Rodrigo Girão Serrão</a></p>
+    </footer>
 </body>
 
 </html>
diff --git a/workout-logger.html b/workout-logger.html
@@ -162,7 +162,8 @@
 </head>
 
 <body>
-    <header>
+    <header class="page-header">
+        <a class="site-link" href="https://tools.mathspp.com/" aria-label="Back to tools.mathspp.com">← tools.mathspp.com</a>
         <h1>Workout Logger</h1>
         <p class="lead">Fill out a workout template from the Cloudflare Worker, with autosave and last-session
             references.</p>
@@ -720,6 +721,10 @@ <h2 id="workout-title" style="margin: 0;"></h2>
             init();
         })();
     </script>
+
+    <footer class="page-footer">
+        <p>Built with ❤️, 🤖, and 🐍, by <a href="https://mathspp.com/">Rodrigo Girão Serrão</a></p>
+    </footer>
 </body>
 
 </html>
diff --git a/workout-manager.html b/workout-manager.html
