191 lines
18 KiB
JavaScript
191 lines
18 KiB
JavaScript
(function(){const o=document.createElement("link").relList;if(o&&o.supports&&o.supports("modulepreload"))return;for(const r of document.querySelectorAll('link[rel="modulepreload"]'))n(r);new MutationObserver(r=>{for(const s of r)if(s.type==="childList")for(const l of s.addedNodes)l.tagName==="LINK"&&l.rel==="modulepreload"&&n(l)}).observe(document,{childList:!0,subtree:!0});function i(r){const s={};return r.integrity&&(s.integrity=r.integrity),r.referrerPolicy&&(s.referrerPolicy=r.referrerPolicy),r.crossOrigin==="use-credentials"?s.credentials="include":r.crossOrigin==="anonymous"?s.credentials="omit":s.credentials="same-origin",s}function n(r){if(r.ep)return;r.ep=!0;const s=i(r);fetch(r.href,s)}})();const d="/carnews/api",w=document.querySelector("#app"),e={articles:[],groups:[],loading:!0,error:null,filter:"all",viewMode:"regular",carMode:!1,carModeIndex:0,carModeInterval:null,aiArticleCount:0};function C(t){const o=new Date(t),n=new Date-o,r=Math.floor(n/(1e3*60*60)),s=Math.floor(n/(1e3*60));return s<60?s+"m ago":r<24?r+"h ago":o.toLocaleDateString("en-US",{month:"short",day:"numeric"})}function y(t,o=150){return!t||t.length<=o?t||"":t.slice(0,o).trim()+"..."}const h={abc:{name:"ABC News",color:"bg-blue-100 text-blue-800"},npr:{name:"NPR",color:"bg-indigo-100 text-indigo-800"},cnn:{name:"CNN",color:"bg-orange-100 text-orange-800"},nbc:{name:"NBC News",color:"bg-purple-100 text-purple-800"},cbs:{name:"CBS News",color:"bg-emerald-100 text-emerald-800"},nytimes:{name:"NY Times",color:"bg-slate-100 text-slate-800"}};function g(t){return h[t]?.color||"bg-gray-100 text-gray-800"}function u(t){return h[t]?.name||t}const v={politics:"bg-red-100 text-red-800",business:"bg-green-100 text-green-800",technology:"bg-blue-100 text-blue-800",sports:"bg-orange-100 text-orange-800",entertainment:"bg-pink-100 text-pink-800",health:"bg-teal-100 text-teal-800",science:"bg-purple-100 text-purple-800",world:"bg-indigo-100 text-indigo-800",other:"bg-gray-100 text-gray-800"};function M(t){return v[t]||v.other}function k(t){const o=t.image?`<div class="aspect-video overflow-hidden bg-gray-100"><img src="${t.image}" alt="" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" onerror="this.parentElement.style.display='none'" /></div>`:"",i=t.sources.slice(0,3).map(r=>`<span class="px-2 py-0.5 text-xs font-medium rounded-full ${g(r)}">${u(r)}</span>`).join(""),n=t.sources.length>3?`<span class="text-xs text-gray-500">+${t.sources.length-3}</span>`:"";return`<article class="group bg-white rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 overflow-hidden border border-gray-100 border-l-4 border-l-blue-500">
|
|
${o}
|
|
<div class="p-5">
|
|
<div class="flex items-center gap-2 mb-3 flex-wrap">
|
|
<span class="px-2.5 py-1 text-xs font-medium rounded-full ${M(t.category)}">
|
|
${t.category}
|
|
</span>
|
|
<span class="text-xs text-gray-500">${t.articleCount} articles</span>
|
|
<span class="ml-auto px-2 py-0.5 text-xs font-medium rounded-full bg-blue-600 text-white">AI Summary</span>
|
|
</div>
|
|
<h2 class="text-lg font-semibold text-gray-900 mb-3">
|
|
${t.title}
|
|
</h2>
|
|
<p class="text-sm text-gray-600 line-clamp-[10] mb-4">
|
|
${t.summary}
|
|
</p>
|
|
<div class="flex items-center gap-2 flex-wrap mb-3">
|
|
${i}${n}
|
|
</div>
|
|
<details class="text-sm">
|
|
<summary class="cursor-pointer text-blue-600 hover:text-blue-800 font-medium">View source articles</summary>
|
|
<ul class="mt-2 space-y-1 pl-4">
|
|
${t.articles.map(r=>`<li><a href="${r.link}" target="_blank" rel="noopener noreferrer" class="text-gray-600 hover:text-blue-600 hover:underline">${y(r.title,60)} <span class="text-gray-400">(${u(r.source)})</span></a></li>`).join("")}
|
|
</ul>
|
|
</details>
|
|
</div>
|
|
</article>`}function $(t){const o=t.image?`<div class="aspect-video overflow-hidden bg-gray-100"><img src="${t.image}" alt="" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" onerror="this.parentElement.style.display='none'" /></div>`:"";return`<article class="group bg-white rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 overflow-hidden border border-gray-100">
|
|
<a href="${t.link}" target="_blank" rel="noopener noreferrer" class="block">
|
|
${o}
|
|
<div class="p-5">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<span class="px-2.5 py-1 text-xs font-medium rounded-full ${g(t.source)}">
|
|
${u(t.source)}
|
|
</span>
|
|
<span class="text-xs text-gray-500">${C(t.pubDate)}</span>
|
|
</div>
|
|
<h2 class="text-lg font-semibold text-gray-900 group-hover:text-blue-600 transition-colors line-clamp-2 mb-2">
|
|
${t.title}
|
|
</h2>
|
|
<p class="text-sm text-gray-600 line-clamp-[10]">
|
|
${y(t.content,500)}
|
|
</p>
|
|
</div>
|
|
</a>
|
|
</article>`}function A(){let t="Loading latest news...";return(e.viewMode==="ai"||e.carMode)&&(e.aiArticleCount>0?t=`Sending ${e.aiArticleCount} articles to AI for analysis. Please wait patiently...`:t="Fetching news from sources..."),`<div class="col-span-full flex flex-col items-center justify-center py-20">
|
|
<div class="w-12 h-12 border-4 border-blue-200 border-t-blue-600 rounded-full animate-spin mb-4"></div>
|
|
<p class="text-gray-600">${t}</p>
|
|
</div>`}function j(t){return`<div class="col-span-full flex flex-col items-center justify-center py-20 text-center">
|
|
<div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-4">
|
|
<svg class="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
|
|
</svg></div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2">Failed to load news</h3>
|
|
<p class="text-gray-600 mb-4">${t}</p>
|
|
<button onclick="fetchNews()" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">Try Again</button>
|
|
</div>`}function b(){return`<div class="col-span-full flex flex-col items-center justify-center py-20 text-center">
|
|
<div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
|
|
<svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
|
|
</svg></div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2">No articles found</h3>
|
|
<p class="text-gray-600">Try selecting a different source filter.</p>
|
|
</div>`}function N(t,o,i){const n=t.sources.slice(0,4).map(s=>`<span class="px-3 py-1 text-sm font-medium rounded-full ${g(s)} bg-opacity-90">${u(s)}</span>`).join(""),r=t.sources.length>4?`<span class="text-sm text-gray-300">+${t.sources.length-4} more</span>`:"";return`
|
|
<div class="car-mode-card max-w-4xl w-full bg-white/95 backdrop-blur-sm rounded-3xl shadow-2xl overflow-hidden">
|
|
${t.image?`
|
|
<div class="h-64 sm:h-80 overflow-hidden">
|
|
<img src="${t.image}" alt="" class="w-full h-full object-cover" onerror="this.parentElement.style.display='none'" />
|
|
</div>
|
|
`:""}
|
|
<div class="p-8 sm:p-10">
|
|
<div class="flex items-center gap-3 mb-4 flex-wrap">
|
|
<span class="px-4 py-1.5 text-sm font-semibold rounded-full ${M(t.category)}">
|
|
${t.category}
|
|
</span>
|
|
<span class="text-gray-500">${t.articleCount} articles</span>
|
|
<span class="ml-auto px-3 py-1 text-sm font-medium rounded-full bg-blue-600 text-white">AI Summary</span>
|
|
</div>
|
|
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4 leading-tight">
|
|
${t.title}
|
|
</h2>
|
|
<p class="text-lg text-gray-600 leading-relaxed mb-6 line-clamp-6">
|
|
${t.summary}
|
|
</p>
|
|
<div class="flex items-center gap-2 flex-wrap">
|
|
${n}${r}
|
|
</div>
|
|
</div>
|
|
<!-- Progress bar -->
|
|
<div class="h-1 bg-gray-200">
|
|
<div class="car-mode-progress h-full bg-blue-600"></div>
|
|
</div>
|
|
</div>
|
|
<!-- Card counter -->
|
|
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 flex items-center gap-2">
|
|
${Array.from({length:i},(s,l)=>`
|
|
<div class="w-2 h-2 rounded-full transition-all duration-300 ${l===o?"bg-white w-6":"bg-white/40"}"></div>
|
|
`).join("")}
|
|
</div>
|
|
`}function I(){if(e.groups.length===0)return`
|
|
<div class="fixed inset-0 z-50 car-mode-bg flex items-center justify-center">
|
|
<div class="car-mode-blur-1"></div>
|
|
<div class="car-mode-blur-2"></div>
|
|
<div class="car-mode-blur-3"></div>
|
|
<div class="relative z-10 text-center text-white">
|
|
<div class="w-16 h-16 border-4 border-white/30 border-t-white rounded-full animate-spin mx-auto mb-6"></div>
|
|
<p class="text-xl">${e.aiArticleCount>0?`Sending ${e.aiArticleCount} articles to AI for analysis.<br>Please wait patiently...`:"Fetching news from sources..."}</p>
|
|
</div>
|
|
<button onclick="exitCarMode()" class="absolute top-6 right-6 z-20 p-3 text-white/70 hover:text-white hover:bg-white/10 rounded-full transition-colors" title="Exit Car Mode (Esc)">
|
|
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
`;const t=e.groups[e.carModeIndex];return`
|
|
<div class="fixed inset-0 z-50 car-mode-bg flex items-center justify-center p-6">
|
|
<div class="car-mode-blur-1"></div>
|
|
<div class="car-mode-blur-2"></div>
|
|
<div class="car-mode-blur-3"></div>
|
|
|
|
<!-- Exit button -->
|
|
<button onclick="exitCarMode()" class="absolute top-6 right-6 z-20 p-3 text-white/70 hover:text-white hover:bg-white/10 rounded-full transition-colors" title="Exit Car Mode (Esc)">
|
|
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Navigation buttons -->
|
|
<button onclick="carModePrev()" class="absolute left-6 top-1/2 -translate-y-1/2 z-20 p-3 text-white/70 hover:text-white hover:bg-white/10 rounded-full transition-colors" title="Previous">
|
|
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
|
</svg>
|
|
</button>
|
|
<button onclick="carModeNext()" class="absolute right-6 top-1/2 -translate-y-1/2 z-20 p-3 text-white/70 hover:text-white hover:bg-white/10 rounded-full transition-colors" title="Next">
|
|
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Card -->
|
|
<div class="relative z-10 flex items-center justify-center w-full">
|
|
${N(t,e.carModeIndex,e.groups.length)}
|
|
</div>
|
|
|
|
<!-- Car mode indicator -->
|
|
<div class="absolute top-6 left-6 z-20 flex items-center gap-2 text-white/70">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"></path>
|
|
</svg>
|
|
<span class="text-sm font-medium">Car Mode</span>
|
|
</div>
|
|
</div>
|
|
`}function a(){if(e.carMode){w.innerHTML=I();return}const t=e.filter==="all"?e.articles:e.articles.filter(c=>c.source===e.filter),o=e.loading?"animate-spin":"",i=[...new Set(e.articles.map(c=>c.source))];let n="";e.loading?n=A():e.error?n=j(e.error):e.viewMode==="ai"?e.groups.length===0?n=b():n=e.groups.map(k).join(""):t.length===0?n=b():n=t.map($).join("");const r=e.viewMode==="regular"?"bg-gray-900 text-white":"bg-gray-100 text-gray-700 hover:bg-gray-200",s=e.viewMode==="ai"?"bg-blue-600 text-white":"bg-blue-100 text-blue-700 hover:bg-blue-200",l=e.viewMode==="regular"?`
|
|
<button onclick="setFilter('all')" class="px-3 py-1.5 text-sm font-medium rounded-lg transition-colors ${e.filter==="all"?"bg-gray-900 text-white":"bg-gray-100 text-gray-700 hover:bg-gray-200"}">All</button>
|
|
${i.map(c=>`<button onclick="setFilter('${c}')" class="px-3 py-1.5 text-sm font-medium rounded-lg transition-colors ${e.filter===c?"bg-gray-900 text-white":g(c)}">${h[c]?.name||c}</button>`).join("")}
|
|
`:"";w.innerHTML=`<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
|
|
<header class="bg-white shadow-sm sticky top-0 z-10">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
|
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-gray-900">News Feed</h1>
|
|
<p class="text-sm text-gray-500">${e.viewMode==="ai"?"AI-grouped summaries from multiple sources":"Latest headlines from multiple sources"}</p>
|
|
</div>
|
|
<div class="flex items-center gap-2 flex-wrap">
|
|
<div class="flex items-center gap-1 mr-2 p-1 bg-gray-100 rounded-lg">
|
|
<button onclick="setViewMode('regular')" class="px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${r}">Regular</button>
|
|
<button onclick="setViewMode('ai')" class="px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${s}">AI Grouped</button>
|
|
</div>
|
|
${l}
|
|
${e.viewMode==="ai"?'<button onclick="clearCacheAndRefresh()" class="ml-2 px-3 py-1.5 text-sm font-medium text-red-600 hover:text-red-800 hover:bg-red-50 rounded-lg transition-colors" title="Clear cache and fetch fresh AI groupings">Clear Cache</button>':""}
|
|
<button onclick="enterCarMode()" class="ml-2 px-3 py-1.5 text-sm font-medium bg-indigo-100 text-indigo-700 hover:bg-indigo-200 rounded-lg transition-colors flex items-center gap-1.5" title="Enter Car Mode - Auto-cycling news display">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"></path>
|
|
</svg>
|
|
Car Mode
|
|
</button>
|
|
<button onclick="refresh()" class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors" title="Refresh">
|
|
<svg class="w-5 h-5 ${o}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
|
|
</svg></button>
|
|
</div></div></div></header>
|
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
${n}
|
|
</div></main>
|
|
<footer class="bg-white border-t border-gray-200 mt-auto">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 text-center text-sm text-gray-500">
|
|
News aggregated from ABC, NPR, CNN, NBC, CBS & NY Times
|
|
</div></footer></div>`}async function f(){e.loading=!0,e.error=null,a();try{const t=await fetch(`${d}/news`);if(!t.ok)throw new Error("Failed to fetch news");const o=await t.json(),i=o.feeds.flatMap(n=>n.items).sort((n,r)=>new Date(r.pubDate)-new Date(n.pubDate));e.articles=i,e.loading=!1,o.errors&&o.errors.length>0&&console.warn("Some feeds failed:",o.errors)}catch(t){e.error=t.message,e.loading=!1}a()}async function p(){e.loading=!0,e.error=null,e.aiArticleCount=0,a();try{const t=await fetch(`${d}/news`);if(t.ok){const r=(await t.json()).feeds.reduce((s,l)=>s+l.items.length,0);e.aiArticleCount=Math.min(r,50),a()}const o=await fetch(`${d}/grouped-news`);if(!o.ok)throw new Error("Failed to fetch grouped news");const i=await o.json();e.groups=i.groups,e.loading=!1,e.aiArticleCount=0}catch(t){e.error=t.message,e.loading=!1,e.aiArticleCount=0}a()}window.setFilter=function(t){e.filter=t,a()};window.setViewMode=function(t){e.viewMode=t,t==="ai"&&e.groups.length===0?p():a()};window.refresh=function(){e.viewMode==="ai"?p():f()};window.clearCacheAndRefresh=async function(){e.loading=!0,e.error=null,e.aiArticleCount=0,a();try{const t=await fetch(`${d}/news`);if(t.ok){const r=(await t.json()).feeds.reduce((s,l)=>s+l.items.length,0);e.aiArticleCount=Math.min(r,50),a()}const o=await fetch(`${d}/grouped-news?refresh=true`);if(!o.ok)throw new Error("Failed to fetch grouped news");const i=await o.json();e.groups=i.groups,e.loading=!1,e.aiArticleCount=0}catch(t){e.error=t.message,e.loading=!1,e.aiArticleCount=0}a()};window.fetchNews=f;window.fetchGroupedNews=p;window.enterCarMode=async function(){if(e.carMode=!0,e.carModeIndex=0,e.aiArticleCount=0,a(),e.groups.length===0)try{const t=await fetch(`${d}/news`);if(t.ok){const r=(await t.json()).feeds.reduce((s,l)=>s+l.items.length,0);e.aiArticleCount=Math.min(r,50),a()}const o=await fetch(`${d}/grouped-news`);if(!o.ok)throw new Error("Failed to fetch grouped news");const i=await o.json();e.groups=i.groups,e.aiArticleCount=0,a()}catch(t){console.error("Failed to load grouped news for car mode:",t),e.aiArticleCount=0}x()};window.exitCarMode=function(){e.carMode=!1,m(),a()};window.carModeNext=function(){e.groups.length!==0&&(e.carModeIndex=(e.carModeIndex+1)%e.groups.length,m(),a(),x())};window.carModePrev=function(){e.groups.length!==0&&(e.carModeIndex=(e.carModeIndex-1+e.groups.length)%e.groups.length,m(),a(),x())};function x(){m(),e.carModeInterval=setInterval(()=>{e.groups.length>0&&(e.carModeIndex=(e.carModeIndex+1)%e.groups.length,a())},5e3)}function m(){e.carModeInterval&&(clearInterval(e.carModeInterval),e.carModeInterval=null)}document.addEventListener("keydown",t=>{if(e.carMode)switch(t.key){case"Escape":window.exitCarMode();break;case"ArrowRight":case" ":window.carModeNext();break;case"ArrowLeft":window.carModePrev();break}});f();setInterval(()=>{e.viewMode==="ai"?p():f()},300*1e3);
|