ff:"ExplicitChatIdProvider" 100:I[903690,["$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$7d","$7e","$7f","$80","$79","$7a","$7b","$81","$82"],"$ff"] 101:I[838238,["$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$7d","$7e","$7f","$80","$79","$7a","$7b","$81","$82"],"SWRDataProvider"] 103:[] 104:[["qOLVxnU4naT","b_3JfnxpXxzbf"]] 105:[["qOLVxnU4naT",{"templateVersionId":null,"templateCanonId":null}]] 106:[["qOLVxnU4naT","$D2025-12-30T10:16:51.867Z"]] 107:[["qOLVxnU4naT",false]] 108:[["qOLVxnU4naT","$undefined"]] 109:[["qOLVxnU4naT",null]] 10a:[["qOLVxnU4naT",true]] 10b:[["qOLVxnU4naT",true]] 10c:[] 10d:Tf9188,[V0_FILE]yaml:file=".github/workflows/nextjs.yml" # Sample workflow for building and deploying a Next.js site to GitHub Pages # # To get started with Next.js see: https://nextjs.org/docs/getting-started # name: Deploy Next.js site to Pages on: # Runs on pushes targeting the default branch push: branches: ["main"] # Allows you to run this workflow manually from the Actions tab workflow_dispatch: # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages permissions: contents: read pages: write id-token: write # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. concurrency: group: "pages" cancel-in-progress: false jobs: # Build job build: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v4 - name: Detect package manager id: detect-package-manager run: | if [ -f "${{ github.workspace }}/yarn.lock" ]; then echo "manager=yarn" >> $GITHUB_OUTPUT echo "command=install" >> $GITHUB_OUTPUT echo "runner=yarn" >> $GITHUB_OUTPUT exit 0 elif [ -f "${{ github.workspace }}/package.json" ]; then echo "manager=npm" >> $GITHUB_OUTPUT echo "command=ci" >> $GITHUB_OUTPUT echo "runner=npx --no-install" >> $GITHUB_OUTPUT exit 0 else echo "Unable to determine package manager" exit 1 fi - name: Setup Node uses: actions/setup-node@v4 with: node-version: "20" cache: ${{ steps.detect-package-manager.outputs.manager }} - name: Setup Pages uses: actions/configure-pages@v5 with: # Automatically inject basePath in your Next.js configuration file and disable # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized). # # You may remove this line if you want to manage the configuration yourself. static_site_generator: next - name: Restore cache uses: actions/cache@v4 with: path: | .next/cache # Generate a new cache whenever packages or source files change. key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }} # If source files changed but packages didn't, rebuild from a prior cache. restore-keys: | ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}- - name: Install dependencies run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }} - name: Build with Next.js run: ${{ steps.detect-package-manager.outputs.runner }} next build - name: Upload artifact uses: actions/upload-pages-artifact@v3 with: path: ./out # Deployment job deploy: environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} runs-on: ubuntu-latest needs: build steps: - name: Deploy to GitHub Pages id: deployment uses: actions/deploy-pages@v4 [V0_FILE]yaml:file=".github/workflows/pages.yml" name: Deploy Next.js (static) to GitHub Pages on: push: branches: [ main ] workflow_dispatch: permissions: contents: read pages: write id-token: write concurrency: group: pages cancel-in-progress: true jobs: build: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v4 - name: Setup pnpm uses: pnpm/action-setup@v4 with: version: 9 - name: Setup Node uses: actions/setup-node@v4 with: node-version: 20 cache: pnpm cache-dependency-path: pnpm-lock.yaml - name: Install dependencies run: pnpm install --frozen-lockfile - name: Build (Next.js → static ./out) run: pnpm run build - name: Setup Pages uses: actions/configure-pages@v5 - name: Upload artifact uses: actions/upload-pages-artifact@v3 with: path: ./out deploy: environment: name: github-pages url: ${{ steps.deploy.outputs.page_url }} needs: build runs-on: ubuntu-latest steps: - name: Deploy to GitHub Pages id: deploy uses: actions/deploy-pages@v4 [V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" # IPod Classic Interface *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/sidhyu-8335s-projects/v0-ip-od-classic-interface) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/projects/b8Th7TxtH4l) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/sidhyu-8335s-projects/v0-ip-od-classic-interface](https://vercel.com/sidhyu-8335s-projects/v0-ip-od-classic-interface)** ## Build your app Continue building your app on: **[https://v0.app/chat/projects/b8Th7TxtH4l](https://v0.app/chat/projects/b8Th7TxtH4l)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]css:file="app/globals.css" @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); /* Updated font to Helvetica with fallbacks */ --font-helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif; --font-cabin: "Cabin", sans-serif; /* Added Amiri font variable */ --font-amiri: "Amiri", serif; /* Added Bitcount font variable */ --font-bitcount: "Bitcount", monospace; /* Added Rokkitt font variable */ --font-rokkitt: "Rokkitt", 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 { /* Updated font-sans to use Helvetica */ --font-sans: var(--font-helvetica); --font-serif: var(--font-cabin); /* Added Amiri font to theme */ --font-amiri: var(--font-amiri); /* Added Bitcount font to theme */ --font-bitcount: var(--font-bitcount); /* Added Rokkitt font to theme */ --font-rokkitt: var(--font-rokkitt); --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; } /* Prevent horizontal page growth from transforms */ html, body { overflow-x: hidden; } /* Prevent vertical scrolling on mobile devices */ @media (max-width: 767px) { html, body { overflow-y: hidden; height: 100vh; position: fixed; width: 100%; } } } @keyframes float-slow { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -30px) scale(1.1); } 66% { transform: translate(-20px, 20px) scale(0.9); } } @keyframes float-medium { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-40px, 40px) scale(1.15); } } @keyframes float-fast { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(20px, 30px) scale(0.95); } 50% { transform: translate(-30px, -20px) scale(1.1); } 75% { transform: translate(40px, -30px) scale(0.9); } } .animate-float-slow { animation: float-slow 20s ease-in-out infinite; } .animate-float-medium { animation: float-medium 15s ease-in-out infinite; } .animate-float-fast { animation: float-fast 12s ease-in-out infinite; } .bg-gradient-radial { background: radial-gradient(circle, var(--tw-gradient-stops)); } .bg-noise { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .scrollbar-hide::-webkit-scrollbar { display: none; } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Analytics } from "@vercel/analytics/next" import { Suspense } from "react" import { Amiri, Fragment_Mono as Bitcount_Mono_Single, Rokkitt } from "next/font/google" import "./globals.css" const amiri = Amiri({ weight: ["400", "700"], subsets: ["latin"], variable: "--font-amiri", }) const bitcount = Bitcount_Mono_Single({ weight: ["400"], subsets: ["latin"], variable: "--font-bitcount", }) const rokkitt = Rokkitt({ weight: ["400", "500", "600", "700"], subsets: ["latin"], variable: "--font-rokkitt", }) export const metadata: Metadata = { title: "Played – Music Player Skin", description: "A music player skin for anyone who is feeling nostalgic and wants to interact with their favorite device.", generator: "v0.app", metadataBase: new URL("https://music.sidhyatikku.com"), openGraph: { title: "Played – Music Player Skin", description: "A music player skin for anyone who is feeling nostalgic and wants to interact with their favorite device.", url: "https://music.sidhyatikku.com", siteName: "Played", images: [ { url: "/og-image.png", width: 1920, height: 1080, alt: "Played - Nostalgic music player skins including iPod Classic and Sony Walkman", }, ], locale: "en_US", type: "website", }, twitter: { card: "summary_large_image", title: "Played – Music Player Skin", description: "A music player skin for anyone who is feeling nostalgic and wants to interact with their favorite device.", images: ["/og-image.png"], }, icons: { icon: "/favicon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( Loading...}> {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" import { DeviceCarousel } from "@/components/device-carousel" import { GradientBackground } from "@/components/gradient-background" export default function Home() { return (

) } [V0_FILE]json:file="components.json" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/audio-visualizer.tsx" "use client" import { useEffect, useRef } from "react" export function AudioVisualizer() { const canvasRef = useRef(null) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return canvas.width = window.innerWidth canvas.height = window.innerHeight const bars = 60 const barWidth = canvas.width / bars const barHeights = Array(bars) .fill(0) .map(() => Math.random()) const barSpeeds = Array(bars) .fill(0) .map(() => 0.02 + Math.random() * 0.03) function animate() { if (!ctx || !canvas) return ctx.clearRect(0, 0, canvas.width, canvas.height) for (let i = 0; i < bars; i++) { barHeights[i] += barSpeeds[i] if (barHeights[i] > 1) barHeights[i] = 0 const height = Math.sin(barHeights[i] * Math.PI) * (canvas.height * 0.4) const x = i * barWidth const y = canvas.height / 2 - height / 2 const gradient = ctx.createLinearGradient(x, y, x, y + height) gradient.addColorStop(0, "rgba(100, 200, 200, 0.1)") gradient.addColorStop(0.5, "rgba(80, 150, 180, 0.2)") gradient.addColorStop(1, "rgba(60, 100, 150, 0.1)") ctx.fillStyle = gradient ctx.fillRect(x, y, barWidth - 2, height) } requestAnimationFrame(animate) } animate() const handleResize = () => { canvas.width = window.innerWidth canvas.height = window.innerHeight } window.addEventListener("resize", handleResize) return () => window.removeEventListener("resize", handleResize) }, []) return

Artists

{navigation.selectedArtist.name}

{navigation.selectedAlbum.name}

Artists

{navigation.selectedArtist.name}

{navigation.selectedAlbum.name}