[V0_FILE]jpg:file="public/images/bgg1.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/bgg1.jpg-nz8wvjEV2J2OxOxSMdJdTlCglFWFOF.jpeg" isMerged="true" [V0_FILE]plaintext:file="public/images/f1-logo.webp" query="Formula 1 official logo" isMerged="true" [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Space_Grotesk } from "next/font/google" import "./globals.css" const spaceGrotesk = Space_Grotesk({ subsets: ["latin"], display: "swap", variable: "--font-space-grotesk", }) export const metadata: Metadata = { title: "Glassmorphic Widget Dashboard", description: "Interactive widget dashboard with glassmorphic design", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isFixed="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); --font-space-grotesk: "Space Grotesk", sans-serif; } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: var(--font-space-grotesk); --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground font-sans; } } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { AppleMusicWidget } from "@/components/apple-music-widget" import { TimeWeatherWidget } from "@/components/time-weather-widget" import { F1RaceWidget } from "@/components/f1-race-widget" export default function Home() { return (

{/* Widgets Container */}

{/* Footer */}

) } [V0_FILE]png:file="public/images/karan-aujla-album.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/karan-aujla-album-xwCHb1xVy1V3cDdhGiCNXu7ZED31p8.png" isMerged="true" [V0_FILE]png:file="public/images/redbull-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/redbull-logo-34tRSRbI47CpCMnfwFytqBF0ZDjcOv.png" isMerged="true" [V0_FILE]jpg:file="public/images/making-memories-album.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ab67616d0000b273bb25239324c4e16ae01fda36.jpg-TDfYBFCuUw0WAh4QsmgxXcpSCBaPnq.jpeg" isMerged="true" [V0_FILE]plaintext:file="public/images/f1-official-logo.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/F1.svg-6hZDuzx6j3hruzoWcsc5j7hxBIZ5b1.webp" isMerged="true" [V0_FILE]typescriptreact:file="components/apple-music-widget.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Heart, Volume2, VolumeX, Shuffle, SkipBack, Play, Pause, SkipForward, Repeat } from "lucide-react" import Image from "next/image" export function AppleMusicWidget() { const [isPlaying, setIsPlaying] = useState(false) const [progress, setProgress] = useState(45) // 1:23 / 3:05 ≈ 45% const [isLiked, setIsLiked] = useState(false) const [isMuted, setIsMuted] = useState(false) const [isShuffled, setIsShuffled] = useState(false) const [repeatMode, setRepeatMode] = useState<"off" | "all" | "one">("one") const [volume, setVolume] = useState(75) const [showVolumeSlider, setShowVolumeSlider] = useState(false) useEffect(() => { let interval: NodeJS.Timeout if (isPlaying) { interval = setInterval(() => { setProgress((prev) => (prev >= 100 ? 0 : prev + 0.3)) }, 600) } return () => clearInterval(interval) }, [isPlaying]) const formatTime = (seconds: number) => { const mins = Math.floor(seconds / 60) const secs = seconds % 60 return `${mins}:${secs.toString().padStart(2, "0")}` } const currentTime = 83 // 1:23 = 83 seconds const totalTime = 185 // 3:05 = 185 seconds const handleProgressClick = (e: React.MouseEvent) => { const rect = e.currentTarget.getBoundingClientRect() const clickX = e.clientX - rect.left const newProgress = (clickX / rect.width) * 100 setProgress(Math.max(0, Math.min(100, newProgress))) } return (

Admirin You

Karan Aujla

{showVolumeSlider && (

setShowVolumeSlider(true)} onMouseLeave={() => setShowVolumeSlider(false)} > setVolume(Number(e.target.value))} className="w-full h-1 bg-white/20 rounded-lg appearance-none cursor-pointer slider" />

)}

{formatTime(currentTime)} {formatTime(totalTime)}

) } [V0_FILE]typescriptreact:file="components/time-weather-widget.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { RefreshCw, Sun, Cloud, CloudRain, Snowflake, Wind, Youtube } from "lucide-react" const weatherConditions = [ { name: "Sunny", icon: Sun, temp: 24, feels: 26, humidity: 45, color: "bg-yellow-500" }, { name: "Cloudy", icon: Cloud, temp: 18, feels: 20, humidity: 65, color: "bg-gray-500" }, { name: "Rainy", icon: CloudRain, temp: 15, feels: 13, humidity: 85, color: "bg-blue-500" }, { name: "Snowy", icon: Snowflake, temp: -2, feels: -5, humidity: 75, color: "bg-blue-200" }, { name: "Windy", icon: Wind, temp: 20, feels: 18, humidity: 55, color: "bg-teal-500" }, ] export function TimeWeatherWidget() { const [currentTime, setCurrentTime] = useState(new Date()) const [weatherIndex, setWeatherIndex] = useState(0) useEffect(() => { const timer = setInterval(() => { setCurrentTime(new Date()) }, 1000) return () => clearInterval(timer) }, []) const currentWeather = weatherConditions[weatherIndex] const WeatherIcon = currentWeather.icon const refreshWeather = () => { setWeatherIndex((prev) => (prev + 1) % weatherConditions.length) } const formatTime = (date: Date) => { return date.toLocaleTimeString("en-US", { hour12: true, hour: "2-digit", minute: "2-digit", second: "2-digit", }) } const formatDate = (date: Date) => { return date.toLocaleDateString("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric", }) } const handleSubscribe = () => { window.open("https://youtube.com/@diecastbydollar", "_blank") } return (

{/* Time Display */}

{formatTime(currentTime)}

{formatDate(currentTime)}

{/* Weather Section */}

Weather

{currentWeather.name}

{currentWeather.temp}°C

Feels like {currentWeather.feels}°C

Humidity {currentWeather.humidity}%

Diecast by Dollar

YouTube Channel

HotWheels, Matchbox and Jada Toys

) } [V0_FILE]typescriptreact:file="components/f1-race-widget.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { Play } from "lucide-react" import Image from "next/image" const drivers = [ { position: 1, code: "VER", name: "Verstappen", team: "Red Bull", gap: "Leader", tire: "M", teamColor: "bg-blue-600", logo: "/images/redbull-logo.png", }, { position: 2, code: "PIA", name: "Piastri", team: "McLaren", gap: "+0.785", tire: "M", teamColor: "bg-orange-500" }, { position: 3, code: "RUS", name: "Russell", team: "Mercedes", gap: "+2.785", tire: "M", teamColor: "bg-gray-400" }, { position: 4, code: "SAI", name: "Sainz", team: "Ferrari", gap: "+5.785", tire: "H", teamColor: "bg-red-600" }, { position: 5, code: "NOR", name: "Norris", team: "McLaren", gap: "+0.785", tire: "H", teamColor: "bg-orange-500" }, ] export function F1RaceWidget() { const [liveTime, setLiveTime] = useState({ hours: 1, minutes: 29, seconds: 16 }) useEffect(() => { const timer = setInterval(() => { setLiveTime((prev) => { let newSeconds = prev.seconds + 1 let newMinutes = prev.minutes let newHours = prev.hours if (newSeconds >= 60) { newSeconds = 0 newMinutes += 1 } if (newMinutes >= 60) { newMinutes = 0 newHours += 1 } return { hours: newHours, minutes: newMinutes, seconds: newSeconds } }) }, 1000) return () => clearInterval(timer) }, []) const formatLiveTime = () => { return `${liveTime.hours}h:${liveTime.minutes.toString().padStart(2, "0")}m:${liveTime.seconds.toString().padStart(2, "0")}s` } return (

{/* Header */}

RACE

{/* Race Info */}

Saudi Arabian GP

Lap 36 / 50

{/* Driver Standings */}

{drivers.map((driver) => (

{driver.position}

{driver.logo ? (

) : (

{driver.team === "Mercedes" ? ( M ) : driver.team === "Williams" ? ( W ) : driver.team === "Ferrari" ? ( F ) : driver.team === "Alpine" ? ( A ) : driver.team === "RB" ? ( R ) : driver.team === "Haas" ? ( H ) : driver.team === "Aston Martin" ? ( AM ) : driver.team === "Kick Sauber" ? ( K ) : null}

)}

{driver.code}

{driver.gap}

{driver.tire}

))}

{/* Watch Live Button */}

) }

About

Tags

Share

About

Tags

Share

More from dollargill

More Templates Like This

About

Tags

Share

About

Tags

Share

More from dollargill

More Templates Like This