Pushing to live

2026-02-13 10:19:01 -05:00
parent 679561bcdb
commit e2406bf978
41 changed files with 17634 additions and 15 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -60,6 +60,9 @@
            --cf-text: #f1f5f9;
            --cf-text-strong: #e2e8f0;
            --cf-text-muted: #94a3b8;
+            --cf-link: #93c5fd;
+            --cf-link-hover: #bfdbfe;
+            --cf-link-visited: #c4b5fd;
            --cf-header-bg: rgba(15, 23, 42, 0.85);
            --cf-card-bg: #1e293b;
            --cf-modal-bg: #0f172a;
@@ -72,6 +75,9 @@
            --cf-text: #0f172a;
            --cf-text-strong: #0f172a;
            --cf-text-muted: #475569;
+            --cf-link: #1d4ed8;
+            --cf-link-hover: #1e40af;
+            --cf-link-visited: #6d28d9;
            --cf-header-bg: rgba(248, 250, 252, 0.92);
            --cf-card-bg: #ffffff;
            --cf-modal-bg: #ffffff;
@@ -84,6 +90,9 @@
            --cf-text: #f1f5f9;
            --cf-text-strong: #e2e8f0;
            --cf-text-muted: #94a3b8;
+            --cf-link: #93c5fd;
+            --cf-link-hover: #bfdbfe;
+            --cf-link-visited: #c4b5fd;
            --cf-header-bg: rgba(15, 23, 42, 0.85);
            --cf-card-bg: #1e293b;
            --cf-modal-bg: #0f172a;
@@ -96,6 +105,9 @@
            --cf-text: #ffffff;
            --cf-text-strong: #ffffff;
            --cf-text-muted: #f8fafc;
+            --cf-link: #ffff80;
+            --cf-link-hover: #ffff00;
+            --cf-link-visited: #ffb3ff;
            --cf-header-bg: rgba(0, 0, 0, 0.96);
            --cf-card-bg: #000000;
            --cf-modal-bg: #000000;
@@ -200,8 +212,10 @@
            background: rgba(59, 91, 219, 0.14);
        }
        html[data-theme='light'] .modal-cta:hover { background: rgba(59, 91, 219, 0.22); }
-        html[data-theme='light'] .text-gray-500,
-        html[data-theme='light'] .text-gray-400 { color: #475569 !important; }
+        html[data-theme='light'] .modal-section-title { color: #1e3a8a; }
+        html[data-theme='contrast'] .modal-section-title { color: #ffff00; }
+        .cf-body .text-gray-500,
+        .cf-body .text-gray-400 { color: var(--cf-text-muted) !important; }
        .theme-btn {
            width: 28px;
            height: 28px;
@@ -255,8 +269,27 @@
        html[data-theme='light'] .share-icon-btn:hover {
            background: rgba(59, 130, 246, 0.2);
        }
-        .footer-link { text-decoration: underline; text-underline-offset: 2px; }
-        .footer-link:hover { color: #dbeafe; }
+        .source-link,
+        .footer-link,
+        .powered-link {
+            color: var(--cf-link);
+            text-decoration: underline;
+            text-underline-offset: 2px;
+        }
+        .source-link:hover,
+        .source-link:focus-visible,
+        .footer-link:hover,
+        .footer-link:focus-visible,
+        .powered-link:hover,
+        .powered-link:focus-visible {
+            color: var(--cf-link-hover);
+        }
+        .source-link:visited,
+        .footer-link:visited,
+        .powered-link:visited {
+            color: var(--cf-link-visited);
+        }
+        .news-card:hover .news-card-title { color: var(--cf-link-hover); }
        .site-footer {
            background: color-mix(in srgb, var(--cf-bg) 92%, transparent);
            backdrop-filter: blur(10px);
@@ -297,6 +330,11 @@
            pointer-events: none;
            box-shadow: 0 8px 22px rgba(2, 6, 23, 0.45);
        }
+        html[data-theme='light'] .contact-hint {
+            background: rgba(255, 255, 255, 0.98);
+            color: #0f172a;
+            border-color: rgba(15, 23, 42, 0.2);
+        }
        *:focus-visible {
            outline: 2px solid #5c7cfa;
            outline-offset: 2px;
@@ -401,7 +439,7 @@
                                    Read TL;DR
                                </button>
                                <a :href="item.source_url" target="_blank" rel="noopener"
-                                   class="hover:text-cf-400 transition-colors"
+                                   class="source-link transition-colors"
                                   @click="trackEvent('hero-source-click')"
                                   x-show="item.source_url">
                                    Via: <span x-text="extractDomain(item.source_url)" class="underline underline-offset-2"></span>
@@ -462,11 +500,11 @@
                        <div class="absolute inset-0 bg-gradient-to-t from-[#1e293b] to-transparent opacity-60"></div>
                    </div>
                    <div class="p-5">
-                        <h3 class="font-bold text-base mb-2 line-clamp-2 group-hover:text-cf-400 transition-colors news-card-title" x-text="item.headline"></h3>
+                        <h3 class="font-bold text-base mb-2 line-clamp-2 transition-colors news-card-title" x-text="item.headline"></h3>
                        <p class="text-sm line-clamp-2 mb-3 news-card-summary" x-text="item.summary"></p>
                        <div class="flex items-center justify-between text-xs mb-3 news-card-meta">
                            <a :href="item.source_url" target="_blank" rel="noopener"
-                               class="hover:text-cf-400 transition-colors truncate max-w-[60%]"
+                               class="source-link transition-colors truncate max-w-[60%]"
                               @click.stop="trackEvent('source-link-click')"
                               x-show="item.source_url"
                               x-text="extractDomain(item.source_url)"></a>
@@ -613,17 +651,20 @@

 <footer x-data="footerEnhancements()" x-init="init()" class="site-footer sticky bottom-0 z-40 border-t border-white/10 py-3 text-center text-xs text-gray-500">
    <div class="max-w-7xl mx-auto px-4 space-y-1.5">
-        <p>Powered by <a href="https://www.perplexity.ai" target="_blank" rel="noopener" class="text-cf-400 hover:text-cf-300 transition-colors">Perplexity</a></p>
+        <p>Powered by <a href="https://www.perplexity.ai" target="_blank" rel="noopener" class="powered-link transition-colors">Perplexity</a></p>
        <p class="space-x-3">
            <button type="button" class="footer-link" @click="window.dispatchEvent(new CustomEvent('open-policy-modal', { detail: { type: 'terms' } }))">Terms of Use</button>
            <button type="button" class="footer-link" @click="window.dispatchEvent(new CustomEvent('open-policy-modal', { detail: { type: 'attribution' } }))">Attribution</button>
            <a x-show="githubUrl" :href="githubUrl" target="_blank" rel="noopener" class="footer-link">GitHub</a>
            <a x-show="contactEmail" :href="'mailto:' + contactEmail" class="footer-link"
-               @mouseenter="showHint($event)" @mousemove="moveHint($event)" @mouseleave="hideHint()" x-text="contactEmail"></a>
+               aria-describedby="contact-hint"
+               @mouseenter="showHint($event)" @mousemove="moveHint($event)" @mouseleave="hideHint()"
+               @focus="showHint($event)" @blur="hideHint()"
+               x-text="contactEmail"></a>
        </p>
        <p>&copy; <span x-data x-text="new Date().getFullYear()"></span> ClawFort. All rights reserved.</p>
    </div>
-    <div x-show="hintVisible" x-cloak class="contact-hint" :style="`left:${hintX}px; top:${hintY}px`" x-text="hintText"></div>
+    <div id="contact-hint" x-show="hintVisible" x-cloak class="contact-hint" :style="`left:${hintX}px; top:${hintY}px`" x-text="hintText"></div>
 </footer>

 <div id="cookie-consent-banner" class="hidden fixed bottom-4 left-1/2 -translate-x-1/2 w-[95%] max-w-3xl z-50 rounded-lg border border-white/15 bg-slate-900/95 backdrop-blur p-4 transition-opacity duration-700 opacity-100">
@@ -1075,15 +1116,26 @@ function footerEnhancements() {
        randomHint() {
            return CONTACT_HINTS[Math.floor(Math.random() * CONTACT_HINTS.length)];
        },
-        showHint(event) {
+        showHint(event, isTouch = false) {
            this.hintText = this.randomHint();
            this.hintVisible = true;
-            this.moveHint(event);
+            this.moveHint(event, isTouch);
        },
-        moveHint(event) {
+        moveHint(event, isTouch = false) {
            if (!event) return;
-            this.hintX = Math.min(event.clientX + 16, window.innerWidth - 290);
-            this.hintY = Math.min(event.clientY + 18, window.innerHeight - 80);
+            const source = event.touches && event.touches[0] ? event.touches[0] : event;
+            if (typeof source.clientX === 'number' && typeof source.clientY === 'number') {
+                const xOffset = isTouch ? 10 : 16;
+                const yOffset = isTouch ? 22 : 18;
+                this.hintX = Math.max(8, Math.min(source.clientX + xOffset, window.innerWidth - 290));
+                this.hintY = Math.max(8, Math.min(source.clientY + yOffset, window.innerHeight - 80));
+                return;
+            }
+            const target = event.target;
+            if (!(target instanceof HTMLElement)) return;
+            const rect = target.getBoundingClientRect();
+            this.hintX = Math.max(8, Math.min(rect.left, window.innerWidth - 290));
+            this.hintY = Math.max(8, Math.min(rect.top - 52, window.innerHeight - 80));
        },
        hideHint() {
            this.hintVisible = false;