Saved your changes before starting work

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: f8b8f0ea-e52e-4118-9b6b-e44184e17203
Replit-Commit-Checkpoint-Type: full_checkpoint
This commit is contained in:
kimjaehyeon0101
2025-10-01 05:45:47 +00:00
parent 0894a95fa9
commit bf5ff95c0e
3 changed files with 25 additions and 1 deletions

View File

@ -14,6 +14,10 @@ run = ["npm", "run", "start"]
localPort = 5000 localPort = 5000
externalPort = 80 externalPort = 80
[[ports]]
localPort = 33997
externalPort = 4200
[[ports]] [[ports]]
localPort = 34047 localPort = 34047
externalPort = 3002 externalPort = 3002

View File

@ -73,13 +73,14 @@ export default function MainContent() {
const renderOutletCard = (outlet: MediaOutlet) => { const renderOutletCard = (outlet: MediaOutlet) => {
const articleCount = articleCountByOutlet[outlet.id] || 0; const articleCount = articleCountByOutlet[outlet.id] || 0;
const hasArticles = articleCount > 0; const hasArticles = articleCount > 0;
const isErlingHaaland = outlet.slug === 'erling-haaland';
return ( return (
<Card <Card
key={outlet.id} key={outlet.id}
className={`hover:shadow-md transition-all cursor-pointer bg-white relative ${ className={`hover:shadow-md transition-all cursor-pointer bg-white relative ${
hasArticles ? 'animate-float ring-2 ring-blue-400/30 shadow-lg' : '' hasArticles ? 'animate-float ring-2 ring-blue-400/30 shadow-lg' : ''
}`} } ${isErlingHaaland ? 'animate-shake' : ''}`}
data-testid={`card-outlet-${outlet.id}`} data-testid={`card-outlet-${outlet.id}`}
> >
{hasArticles && ( {hasArticles && (

View File

@ -137,10 +137,29 @@
animation: float 3s ease-in-out infinite; animation: float 3s ease-in-out infinite;
} }
@keyframes shake {
0%, 100% {
transform: translateX(0) rotate(0deg);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-2px) rotate(-1deg);
}
20%, 40%, 60%, 80% {
transform: translateX(2px) rotate(1deg);
}
}
.animate-shake {
animation: shake 0.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.animate-float { .animate-float {
animation: none; animation: none;
} }
.animate-shake {
animation: none;
}
} }
.card-hover:hover { .card-hover:hover {