Change to dock style
This commit is contained in:
104
app/page.tsx
104
app/page.tsx
@@ -230,37 +230,6 @@ export default function HomePage() {
|
||||
<>
|
||||
<video ref={videoRef} autoPlay playsInline muted onCanPlay={() => videoRef.current?.play()} className="h-full w-full object-cover" />
|
||||
|
||||
{/* Settings Panel Trigger - Bouncing Tab */}
|
||||
<div
|
||||
className={`absolute left-0 top-1/2 transform -translate-y-1/2 z-50 transition-all duration-500 ease-out ${
|
||||
isSettingsPanelOpen ? 'translate-x-80' : 'translate-x-0'
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
onClick={() => setSettingsPanelOpen(!isSettingsPanelOpen)}
|
||||
className="bg-white/20 backdrop-blur-sm border border-white/30 rounded-r-2xl pl-4 pr-3 py-6 text-white shadow-xl hover:bg-white/30 transition-all duration-300 group animate-bounce"
|
||||
style={{
|
||||
animation: isSettingsPanelOpen ? 'none' : 'bounce 2s infinite'
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Settings
|
||||
size={20}
|
||||
className={`transition-transform duration-300 ${
|
||||
isSettingsPanelOpen ? 'rotate-90' : 'group-hover:rotate-12'
|
||||
}`}
|
||||
/>
|
||||
<ChevronRight
|
||||
size={16}
|
||||
className={`transition-transform duration-300 ${
|
||||
isSettingsPanelOpen ? 'rotate-180' : ''
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute -right-1 top-3 w-2 h-8 bg-gradient-to-r from-transparent to-white/10 rounded-r-full"></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Settings Panel */}
|
||||
<div className={`absolute left-0 top-0 bottom-0 w-80 bg-black/80 backdrop-blur-xl border-r border-white/20 transform transition-transform duration-500 ease-out z-40 ${
|
||||
isSettingsPanelOpen ? 'translate-x-0' : '-translate-x-full'
|
||||
@@ -355,16 +324,69 @@ export default function HomePage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-between p-6">
|
||||
<div className="flex w-full items-start justify-end gap-2">
|
||||
<Button variant="ghost" size="icon" className="text-white hover:bg-white/20 hover:text-white" onClick={() => setHistoryOpen(true)}>
|
||||
<History size={24} />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex flex-col items-center">
|
||||
<Button size="lg" className="h-16 w-16 rounded-full border-4 border-white bg-transparent text-white shadow-lg hover:bg-white/20" onClick={handleScan}>
|
||||
<Camera size={32} />
|
||||
</Button>
|
||||
{/* Modern Glassmorphism Dock at Bottom */}
|
||||
<div className={`absolute bottom-6 left-1/2 transform -translate-x-1/2 z-50 transition-all duration-300 ${
|
||||
isPopupOpen || isHistoryOpen || isSettingsPanelOpen ? 'opacity-0 translate-y-4 pointer-events-none' : 'opacity-100 translate-y-0'
|
||||
}`}>
|
||||
<div className="relative">
|
||||
{/* Dock Container */}
|
||||
<div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-3xl px-8 py-4 shadow-2xl">
|
||||
<div className="flex items-center space-x-6">
|
||||
|
||||
{/* Settings Button */}
|
||||
<button
|
||||
onClick={() => setSettingsPanelOpen(!isSettingsPanelOpen)}
|
||||
className="group relative"
|
||||
>
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-blue-500/30 to-purple-500/30 rounded-full flex items-center justify-center border border-white/30 hover:from-blue-500/50 hover:to-purple-500/50 transition-all duration-300 transform hover:scale-110 hover:rotate-12">
|
||||
<Settings size={20} className="text-white drop-shadow-sm" />
|
||||
</div>
|
||||
<div className="absolute -top-10 left-1/2 transform -translate-x-1/2 bg-black/80 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200">
|
||||
Ajustes
|
||||
</div>
|
||||
{/* Glow Effect */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-full blur opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform scale-150"></div>
|
||||
</button>
|
||||
|
||||
{/* Main Capture Button - Larger */}
|
||||
<button
|
||||
onClick={handleScan}
|
||||
className="group relative"
|
||||
>
|
||||
<div className="w-16 h-16 bg-gradient-to-br from-red-500/40 to-pink-500/40 rounded-full flex items-center justify-center border-2 border-white/40 hover:from-red-500/60 hover:to-pink-500/60 transition-all duration-300 transform hover:scale-110 shadow-2xl">
|
||||
<div className="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center">
|
||||
<Camera size={28} className="text-white drop-shadow-lg" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute -top-12 left-1/2 transform -translate-x-1/2 bg-black/80 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
|
||||
Detectar Zapato
|
||||
</div>
|
||||
{/* Pulsing Ring */}
|
||||
<div className="absolute inset-0 rounded-full border-2 border-red-400/50 animate-ping"></div>
|
||||
{/* Glow Effect */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-red-500/30 to-pink-500/30 rounded-full blur opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform scale-150"></div>
|
||||
</button>
|
||||
|
||||
{/* History Button */}
|
||||
<button
|
||||
onClick={() => setHistoryOpen(true)}
|
||||
className="group relative"
|
||||
>
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-green-500/30 to-emerald-500/30 rounded-full flex items-center justify-center border border-white/30 hover:from-green-500/50 hover:to-emerald-500/50 transition-all duration-300 transform hover:scale-110 hover:rotate-12">
|
||||
<History size={20} className="text-white drop-shadow-sm" />
|
||||
</div>
|
||||
<div className="absolute -top-10 left-1/2 transform -translate-x-1/2 bg-black/80 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200">
|
||||
Historial
|
||||
</div>
|
||||
{/* Glow Effect */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-green-500/20 to-emerald-500/20 rounded-full blur opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform scale-150"></div>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dock Shadow/Reflection */}
|
||||
<div className="absolute top-full left-1/2 transform -translate-x-1/2 w-full h-4 bg-gradient-to-b from-white/5 to-transparent rounded-b-3xl blur-sm"></div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -55,8 +55,8 @@ export default function ShoeResultsPopup({ shoe, isOpen, onOpenChange }: ShoeRes
|
||||
return (
|
||||
<Drawer.Root open={isOpen} onOpenChange={onOpenChange}>
|
||||
<Drawer.Portal>
|
||||
<Drawer.Overlay className="fixed inset-0 bg-black/40" />
|
||||
<Drawer.Content className="fixed bottom-0 left-0 right-0 mt-24 flex h-[90%] flex-col rounded-t-2xl bg-gray-100 dark:bg-gray-900">
|
||||
<Drawer.Overlay className="fixed inset-0 bg-black/40 z-[100]" />
|
||||
<Drawer.Content className="fixed bottom-0 left-0 right-0 mt-24 flex h-[90%] flex-col rounded-t-2xl bg-gray-100 dark:bg-gray-900 z-[101]">
|
||||
<div className="flex-1 overflow-y-auto rounded-t-[10px]">
|
||||
<div className="sticky top-0 z-10 w-full bg-inherit rounded-t-[10px] py-4">
|
||||
<div className="mx-auto h-1.5 w-12 flex-shrink-0 rounded-full bg-gray-300 dark:bg-gray-700" />
|
||||
|
||||
Reference in New Issue
Block a user