sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update website design with modern gradients and improved styling

Browse Source 
Implement a new visual theme across the platform, introducing gradient backgrounds, updated UI elements in the header and video cards, and refined styles for search inputs and modals.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d7424866-83d1-4486-a212-ac12b4c7becf
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/d7424866-83d1-4486-a212-ac12b4c7becf/qWrgPMU
This commit is contained in:
sebastjanartic
2025-08-28 14:52:31 +00:00
parent b547af08a2
commit 41a8c3541f
4 changed files with 75 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/search-header.tsx
+2 -2
View File
@@ -40,12 +40,12 @@ export default function SearchHeader({
};
return (
<div className="bg-bunny-gray border-b border-gray-700 sticky top-0 z-50">
<div className="bunny-gray border-b border-white/20 sticky top-0 z-50 backdrop-blur-md">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-20">
<div className="flex items-center space-x-4">
<a href="/" className="flex items-center space-x-2 hover:opacity-80 transition-opacity">
<div className="w-9 h-9 bg-bunny-blue rounded-lg flex items-center justify-center">
<div className="w-9 h-9 gradient-primary rounded-lg flex items-center justify-center shadow-lg">
<div className="w-0 h-0 border-l-[10px] border-l-white border-y-[7px] border-y-transparent ml-1"></div>
</div>
<h1 className="text-2xl font-bold text-white tracking-wide">go4.video</h1>
client/src/components/video-card.tsx
+4 -4
View File
@@ -44,11 +44,11 @@ export default function VideoCard({ video, onClick }: VideoCardProps) {
return (
<div
data-testid={`card-video-${video.id}`}
className="transition-transform duration-200 hover:scale-[1.02]"
className="video-card transition-transform duration-200 hover:scale-[1.02] p-3"
>
{/* Simple thumbnail with fallback - no HLS loading until needed */}
<div
className="relative bg-bunny-gray rounded-xl overflow-hidden mb-4 aspect-video cursor-pointer group"
className="relative gradient-card rounded-xl overflow-hidden mb-4 aspect-video cursor-pointer group"
onClick={() => window.location.href = `/video/${video.id}`}
>
<img
@@ -83,8 +83,8 @@ export default function VideoCard({ video, onClick }: VideoCardProps) {
{/* Play button overlay */}
<div className="absolute inset-0 bg-black/20 group-hover:bg-black/40 transition-all duration-300 flex items-center justify-center">
<div className="bg-white/20 backdrop-blur-sm rounded-full w-16 h-16 flex items-center justify-center group-hover:bg-white/30 group-hover:scale-110 transition-all duration-300">
<Play className="text-white ml-1 text-xl" />
<div className="gradient-primary rounded-full w-16 h-16 flex items-center justify-center group-hover:scale-110 transition-all duration-300 shadow-lg">
<div className="w-0 h-0 border-l-[12px] border-l-white border-y-[8px] border-y-transparent ml-1"></div>
</div>
</div>
</div>