akash1313 commited on
Commit
641bd43
·
verified ·
1 Parent(s): 9fdf833

Create a professional, responsive, and modern web dashboard for a "JustDial Data Extractor".

Browse files

Key requirements:
1. Layout & Navigation:
- Left fixed sidebar with branding/logo and navigation (Dashboard, Runs, Settings).
- Top header with welcome message, profile avatar, and dark mode toggle.
- Use glassmorphism + gradient accents (indigo → purple).
- Sidebar collapsible on mobile with overlay.

2. Input Section:
- Card to paste multiple URLs (textarea with counter).
- Show number of URLs pasted in real-time.
- Modern floating labels and focus animations.

3. Controls Section:
- Start, Stop, Clear, Copy, Export (CSV, Excel) buttons.
- Gradient buttons with hover/scale animation.
- Disable/enable states based on activity.

4. Status & Progress:
- Card with animated spinner, status text (Idle, Extracting, Finished).
- Smooth animated progress bar with percentage inside.
- Error alert banner (red, dismissible).
- Success toast notification (bottom-right, auto-hide).

5. Results Table:
- Responsive scrollable table with sticky header.
- Columns: Index, Name, Phone, WhatsApp (with green WhatsApp icon link).
- Row animation on data load (slide-in).
- Search/filter box above table.

6. Recent Runs:
- List previous runs with Run ID, Status (Running / Finished).
- Action buttons: Log, Results, Stop (if running).
- Auto-refresh runs every few seconds.

7. Footer:
- Social media icons (GitHub, LinkedIn, Twitter).
- "Made with ❤️ by Akash | ©2025" text.

8. Theme:
- Light/Dark mode switch with smooth transitions.
- Glassmorphism cards, soft shadows, rounded-2xl corners.
- Typography: bold headings, clean sans-serif body font.

9. Animations:
- Fade-in, slide-in-row, ripple effect on buttons.
- Pulse heart animation in footer ❤️.

10. Code Quality:
- Use TailwindCSS for styling.
- Vanilla JS for interactivity (fetch APIs: /extract, /progress, /runs).
- Clean, semantic HTML structure with accessibility in mind.

Make it look futuristic, minimalistic, and highly user-friendly.
- Follow Up Deployment

Files changed (0) hide show