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

Improve video card appearance with new fonts and refined overlays

Browse Source 
Update video card styling to use Poppins and Inter fonts, remove black overlay bar, refine gradient overlay, and adjust loader text and font.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 890577b1-c154-40a4-a177-a0c6d55320c3
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/890577b1-c154-40a4-a177-a0c6d55320c3/S0hX96S
This commit is contained in:
sebastjanartic 2025-09-02 10:47:33 +00:00
parent bddd331745
commit 725fcaffcf
3 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/index.html
View File

@ -67,7 +67,7 @@
align-items: center;
justify-content: center;
z-index: 9999;
font-family: Arial, sans-serif;
font-family: 'Poppins', 'Inter', Arial, sans-serif;
">
<div style="text-align: center; color: white;">
<div style="
@ -90,8 +90,8 @@
margin-left: 4px;
"></div>
</div>
<h2 style="margin: 0; font-size: 24px; font-weight: bold;">go4.video</h2>
<p style="margin: 10px 0 0; opacity: 0.8;">Loading...</p>
<h2 style="margin: 0; font-size: 28px; font-weight: 800; letter-spacing: 1px; text-shadow: 2px 2px 8px rgba(0,0,0,0.5);">go4.video</h2>
<p style="margin: 10px 0 0; opacity: 0.9; font-size: 16px; font-weight: 500;">Loading amazing content...</p>
</div>
</div>
<style>

18
client/src/components/video-card.tsx
View File

@ -129,7 +129,7 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
>
{/* Video preview container */}
<div
className="relative gradient-card rounded-xl overflow-hidden aspect-[16/9] cursor-pointer group"
className="relative gradient-card rounded-xl overflow-hidden aspect-[16/9] cursor-pointer group hover:shadow-2xl transition-all duration-300"
onClick={() => onClick?.(video)}
>
{/* Static thumbnail - always visible */}
@ -209,14 +209,16 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
</div>
)}
{/* Title overlay - only show when not playing preview and hideOverlay is false */}
{/* Modern gradient overlay with title */}
{!showPreview && !hideOverlay && (
<div className="absolute bottom-2 left-2 right-2 bg-black/40 text-white px-2 py-1 rounded backdrop-blur-sm z-10">
<div className="truncate font-semibold text-base bg-gradient-to-r from-cyan-400 to-purple-500 bg-clip-text text-transparent">{video.title}</div>
<div className="text-xs text-gray-300 flex items-center space-x-1 mt-0.5">
<span>{formatViews(video.views)}</span>
<span>•</span>
<span>{formatDate(video.createdAt)}</span>
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent z-10 flex items-end p-4 group-hover:from-black/95 transition-all duration-300">
<div className="w-full">
<h3 className="text-white font-extrabold text-xl mb-2 leading-tight drop-shadow-2xl tracking-wide transform group-hover:scale-105 transition-transform duration-300" style={{fontFamily: 'Poppins, Inter, sans-serif', textShadow: '2px 2px 8px rgba(0,0,0,0.8)'}}>
{video.title.split(' - ')[1] || video.title}
</h3>
<p className="text-white/95 text-base font-bold drop-shadow-xl transform group-hover:scale-105 transition-transform duration-300" style={{fontFamily: 'Inter, sans-serif', textShadow: '1px 1px 4px rgba(0,0,0,0.8)'}}>
{video.title.split(' - ')[0] || 'go4.video'}
</p>
</div>
</div>
)}

2
client/src/index.css
View File

@ -1,3 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;