Update website design with modern gradients and improved styling
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
parent
b547af08a2
commit
41a8c3541f
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -24,10 +24,11 @@
|
||||
--ring: hsl(217, 91%, 60%);
|
||||
--radius: 0.75rem;
|
||||
|
||||
/* Custom video app colors */
|
||||
--bunny-dark: hsl(222, 84%, 4.9%);
|
||||
--bunny-gray: hsl(217, 32.6%, 17.5%);
|
||||
--bunny-blue: hsl(217, 91%, 60%);
|
||||
/* Custom video app colors - Modern gradient theme */
|
||||
--bunny-dark: hsl(250, 50%, 15%);
|
||||
--bunny-gray: hsl(240, 30%, 25%);
|
||||
--bunny-blue: hsl(200, 100%, 60%);
|
||||
--bunny-purple: hsl(280, 80%, 60%);
|
||||
--bunny-light: hsl(210, 40%, 98%);
|
||||
--bunny-muted: hsl(215, 20.2%, 65.1%);
|
||||
}
|
||||
@ -61,20 +62,31 @@
|
||||
|
||||
body {
|
||||
@apply font-sans antialiased bg-background text-foreground;
|
||||
background-color: hsl(222, 84%, 4.9%);
|
||||
background: linear-gradient(135deg, hsl(250, 50%, 15%) 0%, hsl(240, 30%, 25%) 50%, hsl(260, 40%, 20%) 100%);
|
||||
color: hsl(210, 40%, 98%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.bunny-dark {
|
||||
background-color: hsl(222, 84%, 4.9%);
|
||||
background: linear-gradient(135deg, hsl(250, 50%, 15%) 0%, hsl(240, 30%, 25%) 100%);
|
||||
}
|
||||
|
||||
.bunny-gray {
|
||||
background-color: hsl(217, 32.6%, 17.5%);
|
||||
background: linear-gradient(135deg, hsl(240, 30%, 25%) 0%, hsl(235, 25%, 30%) 100%);
|
||||
}
|
||||
|
||||
|
||||
.gradient-primary {
|
||||
background: linear-gradient(135deg, hsl(200, 100%, 60%) 0%, hsl(280, 80%, 60%) 100%);
|
||||
}
|
||||
|
||||
.gradient-card {
|
||||
background: linear-gradient(135deg, rgba(75, 85, 175, 0.1) 0%, rgba(128, 90, 213, 0.1) 100%);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.bunny-blue {
|
||||
background-color: hsl(217, 91%, 60%);
|
||||
}
|
||||
@ -143,7 +155,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Zagotovi vidnost besedila v input poljih - super visoka prioriteta */
|
||||
/* Video edit modal styles */
|
||||
.video-edit-modal input,
|
||||
.video-edit-modal textarea,
|
||||
.video-edit-modal select,
|
||||
@ -154,7 +166,6 @@ textarea[data-testid*="input-video"] {
|
||||
border-color: #6b7280 !important;
|
||||
}
|
||||
|
||||
/* Zagotovi vidnost placeholder besedila */
|
||||
.video-edit-modal input::placeholder,
|
||||
.video-edit-modal textarea::placeholder,
|
||||
input[data-testid*="input-video"]::placeholder,
|
||||
@ -163,19 +174,16 @@ textarea[data-testid*="input-video"]::placeholder {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Modal ozadje - temno sivo */
|
||||
.video-edit-modal {
|
||||
background-color: #1f2937 !important;
|
||||
}
|
||||
|
||||
/* Label besedilo - belo */
|
||||
.video-edit-modal label,
|
||||
.video-edit-modal .text-gray-700,
|
||||
.video-edit-modal .dark\:text-gray-300 {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Dropdown/Select elementi - siva shema */
|
||||
.video-edit-modal select,
|
||||
select[data-testid*="select"],
|
||||
.video-edit-modal [role="combobox"],
|
||||
@ -184,3 +192,48 @@ select[data-testid*="select"],
|
||||
color: #ffffff !important;
|
||||
border-color: #6b7280 !important;
|
||||
}
|
||||
|
||||
/* Search input styles */
|
||||
input[type="search"],
|
||||
input[placeholder*="Search"],
|
||||
input[data-testid*="search"] {
|
||||
background-color: rgba(55, 65, 81, 0.8) !important;
|
||||
color: #ffffff !important;
|
||||
border-color: #6b7280 !important;
|
||||
}
|
||||
|
||||
input[type="search"]::placeholder,
|
||||
input[placeholder*="Search"]::placeholder,
|
||||
input[data-testid*="search"]::placeholder {
|
||||
color: #d1d5db !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Video card hover effects with gradients */
|
||||
.video-card:hover {
|
||||
transform: translateY(-2px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.video-card {
|
||||
transition: all 0.3s ease;
|
||||
background: linear-gradient(135deg, rgba(75, 85, 175, 0.05) 0%, rgba(128, 90, 213, 0.05) 100%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* Modern button styles */
|
||||
.gradient-button {
|
||||
background: linear-gradient(135deg, hsl(200, 100%, 60%) 0%, hsl(280, 80%, 60%) 100%);
|
||||
border: none;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.gradient-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
|
||||
}
|
||||
@ -72,7 +72,7 @@ export default function Home() {
|
||||
}, [searchQuery, offset, refetch]);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-bunny-dark">
|
||||
<div className="min-h-screen bunny-dark">
|
||||
<SearchHeader
|
||||
onSearch={handleSearch}
|
||||
onViewChange={setViewMode}
|
||||
@ -94,12 +94,12 @@ export default function Home() {
|
||||
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="bg-bunny-gray/50 border-t border-gray-700 mt-16">
|
||||
<footer className="bunny-gray border-t border-white/20 mt-16">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<div className="col-span-1 md:col-span-2">
|
||||
<div className="flex items-center space-x-2 mb-4">
|
||||
<div className="w-8 h-8 bg-bunny-blue rounded-lg flex items-center justify-center">
|
||||
<div className="w-8 h-8 gradient-primary rounded-lg flex items-center justify-center shadow-lg">
|
||||
<div className="w-0 h-0 border-l-[8px] border-l-white border-y-[5px] border-y-transparent ml-1"></div>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-bunny-light">go4.video</h3>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user