Design a Chrome Extension New Tab page with the following MVP features: Background image,Core Widgets: Clock & Date: Live clock updating every second., Weather Widget: Mock weather data with modern icons., Search Bar: Integrated with Google search, supports Enter key., Quick Bookmarks: Display 6 frequently used bookmarks with emoji icons., Daily Pet Quote: Show rotating pet-related quotes every 30 seconds., Settings Panel: Toggle individual widgets on/off. The widget should have Glassmorphism effect. You can use this css snippet: .glass3d { --filter-glass3d: blur(32px) brightness(0.85) saturate(2.5); --color-glass3d: hsl(189 80% 10% / 0.2); --noise-glass3d: url("https://www.transparenttextures.com/patterns/egg-shell.png"); position: relative; z-index: 4; box-shadow: 0 0 0.75px hsl(205 20% 10% / 0.2), 0.7px 0.8px 1.2px -0.4px hsl(205 20% 10% / 0.1), 1.3px 1.5px 2.2px -0.8px hsl(205 20% 10% / 0.1), 2.3px 2.6px 3.9px -1.2px hsl(205 20% 10% / 0.1), 3.9px 4.4px 6.6px -1.7px hsl(205 20% 10% / 0.1), 6.5px 7.2px 10.9px -2.1px hsl(205 20% 10% / 0.1), 8px 9px 14px -2.5px hsl(205 20% 10% / 0.2); } .glass3d::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; overflow: hidden; z-index: 3; -webkit-backdrop-filter: var(--filter-glass3d); backdrop-filter: var(--filter-glass3d); background-color: var(--color-glass3d); background-image: var(--noise-glass3d); background-size: 100px; background-repeat: repeat; } .glass3d::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; overflow: hidden; z-index: 5; box-shadow: inset 2px 2px 1px -3px hsl(205 20% 90% / 0.8), inset 4px 4px 2px -6px hsl(205 20% 90% / 0.3), inset 1.5px 1.5px 1.5px -0.75px hsl(205 20% 90% / 0.15), inset 1.5px 1.5px 0.25px hsl(205 20% 90% / 0.03), inset 0 0 0.25px 0.5px hsl(205 20% 90% / 0.03); } .glass3d > * { position: relative; z-index: 6; } - Initial Deployment
cfd592a
verified