Adding Terms & Privacy routes #7
Conversation
There was a problem hiding this comment.
Code Review
This pull request introduces several enhancements to the ProdHub application, including a new branded splash screen, updated metadata for SEO, and the addition of dedicated Privacy Policy and Terms of Service pages. The UI has also been refined with improved contrast in the habit tracker and the inclusion of legal links in the footer. Feedback focuses on improving code quality by modernizing the splash screen script, reducing CSS duplication between the new legal pages, and recommending that build artifacts like the Firebase hosting cache be excluded from version control.
| manifest.json,1776425419677,ee04fb47e525c67d8424ffe9b4d8a8a24e434504478afca4e0ca602146836d4c | ||
| manifest.extension.json,1776431311833,b8fe4579bf2ebb0758b82390c03040eed5c18529264fdac5ba0597fc134ecc1e |
| document.addEventListener('DOMContentLoaded', function () { | ||
| var observer = new MutationObserver(function () { | ||
| var root = document.getElementById('root'); | ||
| if (root && root.childElementCount > 0) { | ||
| var splash = document.getElementById('splash'); | ||
| if (splash) { | ||
| splash.style.opacity = '0'; | ||
| setTimeout(function () { splash.remove(); }, 350); | ||
| } | ||
| observer.disconnect(); | ||
| } | ||
| }); | ||
| observer.observe(document.getElementById('root'), { childList: true }); | ||
| }); |
There was a problem hiding this comment.
The script for hiding the splash screen uses older JavaScript syntax and lacks a safety check for the root element before observation. Modernizing this to use const and arrow functions, while ensuring the element exists, would improve code quality and prevent potential runtime errors.
| document.addEventListener('DOMContentLoaded', function () { | |
| var observer = new MutationObserver(function () { | |
| var root = document.getElementById('root'); | |
| if (root && root.childElementCount > 0) { | |
| var splash = document.getElementById('splash'); | |
| if (splash) { | |
| splash.style.opacity = '0'; | |
| setTimeout(function () { splash.remove(); }, 350); | |
| } | |
| observer.disconnect(); | |
| } | |
| }); | |
| observer.observe(document.getElementById('root'), { childList: true }); | |
| }); | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const root = document.getElementById('root'); | |
| const splash = document.getElementById('splash'); | |
| if (!root || !splash) return; | |
| const observer = new MutationObserver(() => { | |
| if (root.childElementCount > 0) { | |
| splash.style.opacity = '0'; | |
| setTimeout(() => splash.remove(), 350); | |
| observer.disconnect(); | |
| } | |
| }); | |
| observer.observe(root, { childList: true }); | |
| }); |
| <style> | ||
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | ||
|
|
||
| body { | ||
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | ||
| background: #0f1117; | ||
| color: #cbd5e1; | ||
| line-height: 1.75; | ||
| min-height: 100vh; | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| /* ── Nav ── */ | ||
| nav { | ||
| position: sticky; | ||
| top: 0; | ||
| z-index: 10; | ||
| background: rgba(15, 17, 23, 0.85); | ||
| backdrop-filter: blur(12px); | ||
| border-bottom: 1px solid #1e293b; | ||
| padding: 0 1.5rem; | ||
| height: 60px; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| } | ||
| .nav-brand { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 0.5rem; | ||
| text-decoration: none; | ||
| font-weight: 700; | ||
| font-size: 1.1rem; | ||
| color: #60a5fa; | ||
| letter-spacing: -0.3px; | ||
| } | ||
| .nav-brand svg { flex-shrink: 0; } | ||
| .nav-back { | ||
| font-size: 0.875rem; | ||
| color: #64748b; | ||
| text-decoration: none; | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 0.35rem; | ||
| transition: color 0.2s; | ||
| } | ||
| .nav-back:hover { color: #94a3b8; } | ||
|
|
||
| /* ── Hero banner ── */ | ||
| .hero { | ||
| background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); | ||
| border-bottom: 1px solid #1e293b; | ||
| padding: 3rem 1.5rem 2.5rem; | ||
| text-align: center; | ||
| } | ||
| .hero-badge { | ||
| display: inline-flex; | ||
| align-items: center; | ||
| gap: 0.4rem; | ||
| background: rgba(96, 165, 250, 0.1); | ||
| border: 1px solid rgba(96, 165, 250, 0.25); | ||
| color: #60a5fa; | ||
| font-size: 0.75rem; | ||
| font-weight: 600; | ||
| letter-spacing: 0.05em; | ||
| text-transform: uppercase; | ||
| padding: 0.3rem 0.8rem; | ||
| border-radius: 999px; | ||
| margin-bottom: 1rem; | ||
| } | ||
| .hero h1 { | ||
| font-size: clamp(1.75rem, 4vw, 2.5rem); | ||
| font-weight: 700; | ||
| color: #f1f5f9; | ||
| margin-bottom: 0.5rem; | ||
| letter-spacing: -0.5px; | ||
| } | ||
| .hero .subtitle { | ||
| color: #64748b; | ||
| font-size: 0.9rem; | ||
| } | ||
|
|
||
| /* ── Content ── */ | ||
| .container { | ||
| max-width: 780px; | ||
| margin: 0 auto; | ||
| padding: 3rem 1.5rem; | ||
| flex: 1; | ||
| } | ||
|
|
||
| .section { | ||
| background: #1a1f2e; | ||
| border: 1px solid #1e293b; | ||
| border-radius: 12px; | ||
| padding: 1.75rem 2rem; | ||
| margin-bottom: 1.25rem; | ||
| transition: border-color 0.2s; | ||
| } | ||
| .section:hover { border-color: #334155; } | ||
|
|
||
| .section-header { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 0.75rem; | ||
| margin-bottom: 1rem; | ||
| } | ||
| .section-icon { | ||
| width: 36px; | ||
| height: 36px; | ||
| border-radius: 8px; | ||
| background: rgba(96, 165, 250, 0.1); | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| flex-shrink: 0; | ||
| font-size: 1rem; | ||
| } | ||
| h2 { | ||
| font-size: 1.05rem; | ||
| font-weight: 600; | ||
| color: #e2e8f0; | ||
| } | ||
|
|
||
| p { margin-bottom: 0.75rem; font-size: 0.925rem; } | ||
| p:last-child { margin-bottom: 0; } | ||
| ul { | ||
| padding-left: 1.4rem; | ||
| font-size: 0.925rem; | ||
| } | ||
| li { margin-bottom: 0.4rem; } | ||
| strong { color: #e2e8f0; font-weight: 600; } | ||
| a { color: #60a5fa; text-decoration: none; } | ||
| a:hover { text-decoration: underline; } | ||
|
|
||
| /* ── Footer ── */ | ||
| footer { | ||
| border-top: 1px solid #1e293b; | ||
| padding: 1.5rem; | ||
| text-align: center; | ||
| font-size: 0.8rem; | ||
| color: #475569; | ||
| } | ||
| footer a { color: #64748b; margin: 0 0.5rem; } | ||
| footer a:hover { color: #94a3b8; } | ||
| .footer-links { margin-top: 0.4rem; } | ||
| </style> |
There was a problem hiding this comment.
|
Visit the preview URL for this PR (updated for commit 6d67d76): https://my-productivity-hub-5a3ba--pr7-refactor-architectur-yre7xceb.web.app (expires Mon, 27 Apr 2026 19:03:41 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: 4ef75aef15076a8cc05555b91f31935d9a13db8e |
…nd core application shell
No description provided.