Apply glassmorphism effect to overlays and panels
- Header: semi-transparent white with backdrop blur - Visit counter: frosted glass instead of dark overlay - Mobile filter panel: translucent with blur - BottomSheet: frosted glass background - Footer: subtle glass effect Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -420,7 +420,7 @@ export default function Home() {
|
|||||||
return (
|
return (
|
||||||
<div className="h-screen flex flex-col">
|
<div className="h-screen flex flex-col">
|
||||||
{/* ── Header row 1: Logo + User ── */}
|
{/* ── Header row 1: Logo + User ── */}
|
||||||
<header className="bg-white border-b shrink-0">
|
<header className="bg-white/80 backdrop-blur-md border-b shrink-0">
|
||||||
<div className="px-5 py-3 flex items-center justify-between">
|
<div className="px-5 py-3 flex items-center justify-between">
|
||||||
<button onClick={handleReset} className="text-lg font-bold whitespace-nowrap">
|
<button onClick={handleReset} className="text-lg font-bold whitespace-nowrap">
|
||||||
Tasteby
|
Tasteby
|
||||||
@@ -656,7 +656,7 @@ export default function Home() {
|
|||||||
|
|
||||||
{/* Collapsible filter panel */}
|
{/* Collapsible filter panel */}
|
||||||
{showMobileFilters && (
|
{showMobileFilters && (
|
||||||
<div className="bg-gray-50 rounded-xl p-3.5 space-y-3 border">
|
<div className="bg-white/70 backdrop-blur-md rounded-xl p-3.5 space-y-3 border border-white/50 shadow-sm">
|
||||||
{/* Dropdown filters */}
|
{/* Dropdown filters */}
|
||||||
<div className="flex items-center gap-2 flex-wrap">
|
<div className="flex items-center gap-2 flex-wrap">
|
||||||
<select
|
<select
|
||||||
@@ -769,7 +769,7 @@ export default function Home() {
|
|||||||
flyTo={regionFlyTo}
|
flyTo={regionFlyTo}
|
||||||
/>
|
/>
|
||||||
{visits && (
|
{visits && (
|
||||||
<div className="absolute bottom-1 right-2 bg-black/40 text-white text-[10px] px-2 py-0.5 rounded">
|
<div className="absolute bottom-1 right-2 bg-white/60 backdrop-blur-sm text-gray-700 text-[10px] px-2.5 py-1 rounded-lg shadow-sm">
|
||||||
오늘 {visits.today} · 전체 {visits.total.toLocaleString()}
|
오늘 {visits.today} · 전체 {visits.total.toLocaleString()}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@@ -789,7 +789,7 @@ export default function Home() {
|
|||||||
flyTo={regionFlyTo}
|
flyTo={regionFlyTo}
|
||||||
/>
|
/>
|
||||||
{visits && (
|
{visits && (
|
||||||
<div className="absolute bottom-1 right-2 bg-black/40 text-white text-[10px] px-2 py-0.5 rounded">
|
<div className="absolute bottom-1 right-2 bg-white/60 backdrop-blur-sm text-gray-700 text-[10px] px-2.5 py-1 rounded-lg shadow-sm">
|
||||||
오늘 {visits.today} · 전체 {visits.total.toLocaleString()}
|
오늘 {visits.today} · 전체 {visits.total.toLocaleString()}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@@ -811,7 +811,7 @@ export default function Home() {
|
|||||||
flyTo={regionFlyTo}
|
flyTo={regionFlyTo}
|
||||||
/>
|
/>
|
||||||
{visits && (
|
{visits && (
|
||||||
<div className="absolute bottom-1 right-2 bg-black/40 text-white text-[10px] px-2 py-0.5 rounded z-10">
|
<div className="absolute bottom-1 right-2 bg-white/60 backdrop-blur-sm text-gray-700 text-[10px] px-2.5 py-1 rounded-lg shadow-sm z-10">
|
||||||
오늘 {visits.today} · 전체 {visits.total.toLocaleString()}
|
오늘 {visits.today} · 전체 {visits.total.toLocaleString()}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@@ -836,7 +836,7 @@ export default function Home() {
|
|||||||
flyTo={regionFlyTo}
|
flyTo={regionFlyTo}
|
||||||
/>
|
/>
|
||||||
{visits && (
|
{visits && (
|
||||||
<div className="absolute bottom-1 right-2 bg-black/40 text-white text-[10px] px-2 py-0.5 rounded z-10">
|
<div className="absolute bottom-1 right-2 bg-white/60 backdrop-blur-sm text-gray-700 text-[10px] px-2.5 py-1 rounded-lg shadow-sm z-10">
|
||||||
오늘 {visits.today} · 전체 {visits.total.toLocaleString()}
|
오늘 {visits.today} · 전체 {visits.total.toLocaleString()}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@@ -853,7 +853,7 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Footer */}
|
{/* Footer */}
|
||||||
<footer className="shrink-0 border-t bg-gradient-to-r from-gray-50 via-white to-gray-50 py-2.5 flex items-center justify-center gap-2 text-[11px] text-gray-400 group">
|
<footer className="shrink-0 border-t bg-white/60 backdrop-blur-sm py-2.5 flex items-center justify-center gap-2 text-[11px] text-gray-400 group">
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<img
|
<img
|
||||||
src="/icon.jpg"
|
src="/icon.jpg"
|
||||||
|
|||||||
@@ -89,7 +89,7 @@ export default function BottomSheet({ open, onClose, children }: BottomSheetProp
|
|||||||
{/* Sheet */}
|
{/* Sheet */}
|
||||||
<div
|
<div
|
||||||
ref={sheetRef}
|
ref={sheetRef}
|
||||||
className="fixed bottom-0 left-0 right-0 z-50 md:hidden flex flex-col bg-white rounded-t-2xl shadow-2xl"
|
className="fixed bottom-0 left-0 right-0 z-50 md:hidden flex flex-col bg-white/85 backdrop-blur-xl rounded-t-2xl shadow-2xl"
|
||||||
style={{
|
style={{
|
||||||
height: `${height * 100}vh`,
|
height: `${height * 100}vh`,
|
||||||
transition: dragging ? "none" : "height 0.3s cubic-bezier(0.2, 0, 0, 1)",
|
transition: dragging ? "none" : "height 0.3s cubic-bezier(0.2, 0, 0, 1)",
|
||||||
|
|||||||
Reference in New Issue
Block a user