Spaces:
Running
Running
Ctrl+K
put image cover music album for this <div class="w-full h-64 lg:h-80 rounded-xl bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center"> and make other page for project - Follow Up Deployment
f9539fa verified - 1.52 kB initial commit
- 201 Bytes You are a frontend developer specializing in HTML and Tailwind CSS. Your task is to build a modern, content-focused UI for a music streaming platform, replicating the design principles and user experience of Radio Javan based on the provided analysis. The UI should be fully responsive, adapting seamlessly from desktop to mobile. **Project Goal:** Implement the core UI components and layout described below using clean HTML markup and Tailwind CSS for all styling, ensuring responsiveness, accessibility, and a smooth user experience. **I. Color Palette & Tailwind Configuration:** Utilize the following color palette. Define custom colors in your `tailwind.config.js` or use appropriate existing Tailwind classes that match closely: * `--color-primary-dark`: #121820 (Main background, `bg-rj-primary-dark`) * `--color-secondary-dark`: #1A202A (Secondary background/Cards, `bg-rj-secondary-dark`) * `--color-text-white`: #FFFFFF (Main text, `text-white`) * `--color-text-light-gray`: #E0E0E0 (Secondary text/Icons, `text-rj-light-gray`) * `--color-accent-blue`: #00BFFF (Highlight/Links, `text-rj-accent-blue`) * `--color-live-red`: #FF0000 (Live indicator, `text-rj-live-red`) **II. Typography:** Select a modern, simple sans-serif font family (e.g., Inter, Vazirmatn if supporting Persian, or a suitable web-safe alternative) that is legible on dark backgrounds and works well for both Latin and potentially Persian scripts. * **Primary Font:** Apply this as the base `font-sans`. * **Headings (h1, h2, h3):** Use `font-bold` or `font-semibold` with varying sizes (e.g., `text-2xl`, `text-xl`, `text-lg`) to establish a clear visual hierarchy. * **Body Text (p):** Use `font-normal` with appropriate sizes (e.g., `text-base`, `text-sm`) for descriptions and details. **III. Overall Layout Structure:** The layout is dark, modern, and content-centric. It consists of three main structural areas: 1. **Global Navigation:** * **Desktop:** A fixed sidebar on the left (`lg:w-64`, `lg:fixed`, `lg:h-screen`). * **Mobile:** A fixed header at the top (`fixed`, `top-0`, `left-0`, `w-full`, `h-16`). 2. **Main Content Area:** The dynamic region where content cards and sections are displayed. This area should adjust its `margin-left` for the desktop sidebar and `padding-top` for the mobile header and `padding-bottom` for the persistent player. 3. **Persistent Music Player:** A fixed footer at the bottom of the viewport (`fixed`, `bottom-0`, `left-0`, `w-full`, `h-20`). **IV. Component Breakdown & Implementation Details:** **1. Global Navigation (Header/Sidebar):** * **Content:** Logo (Radio Javan icon/text), Search Icon, User Account Icon (e.g., profile picture or placeholder), and primary navigation links (Music, Video, Podcast, Artists). * **Desktop (Sidebar - `lg:` breakpoint):** * `bg-rj-secondary-dark`, `text-rj-light-gray`. * `flex flex-col` for vertical arrangement of links. * Minimalistic design with padding and hover effects (`hover:text-white`, `hover:bg-rj-primary-dark`). * Include relevant icons next to navigation text. * **Mobile (Header - default/small screens):** * `bg-rj-secondary-dark`, `text-rj-light-gray`. * `flex items-center justify-between`. * Include logo, search icon, user account icon. A hamburger menu icon should be present (though its functionality is JS, its visual presence is important). * **Responsiveness:** Hide sidebar on mobile, show header; hide header on desktop, show sidebar. **2. Content Cards:** These cards are used to display various media items (songs, albums, music videos, podcasts). * **Structure:** Each card should have: * A square image (cover art). * A title (song/album name, `text-white`, `font-semibold`). * An artist/creator name (`text-rj-light-gray`, `text-sm`). * **Layout:** Display cards in a responsive grid (`grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4` or similar). * **Hover State:** * On hover, slightly scale up the card (`scale-105`). * Overlay the cover with a semi-transparent dark background (`opacity-80`). * Display a prominent - Initial Deployment
- 38.8 kB put image cover music album for this <div class="w-full h-64 lg:h-80 rounded-xl bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center"> and make other page for project - Follow Up Deployment
- 388 Bytes initial commit