polar-web
Gayathri Gunda```text id="gkq8a2" Build me a FULLY RESPONSIVE futuristic Gen-Z web application called: “AI Engineer Glow-Up OS” This is NOT just a productivity tracker. It should feel like: - a Gen-Z self improvement operating system - an anime-inspired AI dashboard - a futuristic life management app - aesthetic, cinematic, motivating, immersive, and addictive to use ━━━━━━━━━━━━━━━━━━━━ THEME REFERENCE ━━━━━━━━━━━━━━━━━━━━ Use this exact visual aesthetic: - Deep black background - Neon crimson red gradients (#df2531) - Glassmorphism UI - Rounded large containers - Transparent layered cards - Smooth blur effects - Luxury cyberpunk feel - Minimal but premium typography - Moody dark aesthetic - Soft red glowing shadows - Smooth transitions and animations MAIN COLOR PALETTE: - Primary Red: #df2531 - Black: #000000 - White: #ffffff - Dark crimson shades - Frosted transparent overlays - Muted grey typography UI STYLE: - cinematic - futuristic - Gen-Z - anime-inspired - premium startup-quality - elegant + playful - modern AI dashboard ━━━━━━━━━━━━━━━━━━━━ GEN-Z + ANIME ELEMENTS ━━━━━━━━━━━━━━━━━━━━ Add immersive Gen-Z features: - XP system - streak system - level-up animations - achievement badges - productivity score - “locked in” focus mode - animated motivational popups - aesthetic progress rings - hover glow effects - floating particles OPTIONAL CHARACTER SYSTEM: Add an AI mascot/assistant character: - anime cyber assistant - chibi productivity robot - hologram AI girl - floating AI helper The assistant should: - react to completed tasks - motivate the user - celebrate streaks - suggest tasks - speak in modern Gen-Z style Examples: - “Locked in today fr 🔥” - “Bro your consistency is insane” - “You’re building future FAANG energy” - “Main character arc activated” - “One more task and you level up” ━━━━━━━━━━━━━━━━━━━━ MAIN FEATURES ━━━━━━━━━━━━━━━━━━━━ 1. DASHBOARD HOME Create a beautiful cinematic dashboard showing: - Welcome section - AI assistant greeting - Daily quote - Daily focus goals - XP earned today - Current streak - Weekly completion % - Time spent studying - Tasks completed - Productivity score - Upcoming goals - Quick action buttons Add: - animated charts - glowing widgets - smooth transitions - floating UI cards ━━━━━━━━━━━━━━━━━━━━ 2. 4-MONTH AI ENGINEER ROADMAP TRACKER ━━━━━━━━━━━━━━━━━━━━ Create dedicated roadmap sections for: - Python - DSA - SQL - Machine Learning - Deep Learning - Generative AI - LLM Engineering - RAG - LangChain - Vector Databases - FastAPI - Deployment - System Design basics - Git/GitHub - Projects - Resume Building - LinkedIn Growth - Aptitude - Interview Preparation Each roadmap section should include: - daily tasks - weekly goals - progress bars - animated completion rings - completion tracking - notes area - revision tracker - deadline tracking - skill XP progress ━━━━━━━━━━━━━━━━━━━━ 3. DAILY TRACKER ━━━━━━━━━━━━━━━━━━━━ Create a powerful daily habit tracker for: STUDY: - Study hours - Coding hours - DSA problems solved - Notes completed - Revision completed - Mock interviews HEALTH: - Water intake - Sleep hours - Gym/workout - Walking steps - Stretching - Meditation SELF-CARE: - Haircare - Skincare - Grooming - Morning routine - Night routine LIFESTYLE: - Reading - Screen time - Journaling - Mood tracking - Dopamine detox - Social media limit Add: - streak visuals - progress animations - completion celebrations - daily score system ━━━━━━━━━━━━━━━━━━━━ 4. FITNESS + GLOW-UP SECTION ━━━━━━━━━━━━━━━━━━━━ Include: - Workout planner - Weight tracker - Body progress tracker - Healthy diet checklist - Calorie tracker - Water tracker - Meal planner - Habit consistency tracker - Haircare routine tracker - Skin routine tracker - Glow-up checklist Add: - weekly fitness analytics - progress charts - motivational fitness quotes - transformation visuals ━━━━━━━━━━━━━━━━━━━━ 5. PROJECT TRACKER ━━━━━━━━━━━━━━━━━━━━ Create sections for: - Current projects - Completed projects - GitHub repositories - Deployment links - Tech stack used - Progress timeline - Deadlines - Notes section - AI/ML projects showcase Add project cards with: - animated hover effects - project status indicators - XP rewards after completion ━━━━━━━━━━━━━━━━━━━━ 6. INTERVIEW PREP SECTION ━━━━━━━━━━━━━━━━━━━━ Track: - Aptitude practice - DSA topics - ML concepts - DL concepts - LLM concepts - RAG concepts - HR interview questions - Behavioral questions - Mock interviews - Resume reviews Add: - interview confidence meter - revision reminders - question bank cards - preparation heatmaps ━━━━━━━━━━━━━━━━━━━━ 7. LEADERBOARD + ANALYTICS PAGE ━━━━━━━━━━━━━━━━━━━━ Create a futuristic analytics dashboard showing: - Weekly productivity - Monthly consistency - XP gained - Skill growth - Focus hours - Heatmaps - Habit consistency - Study analytics - Fitness analytics - Performance graphs Use: - animated charts - glowing graph cards - futuristic data visualizations ━━━━━━━━━━━━━━━━━━━━ 8. AI ASSISTANT PANEL ━━━━━━━━━━━━━━━━━━━━ Create a floating AI assistant sidebar that: - motivates the user - gives productivity tips - reacts dynamically - suggests tasks - celebrates streaks - reminds user to drink water or sleep - comments on productivity level The assistant should feel alive and interactive. ━━━━━━━━━━━━━━━━━━━━ 9. SETTINGS + CUSTOMIZATION ━━━━━━━━━━━━━━━━━━━━ Allow users to: - change themes - switch dark/light mode - customize accent colors - toggle AI assistant - customize dashboard layout - enable notifications - reset progress - upload profile avatar - customize productivity goals ━━━━━━━━━━━━━━━━━━━━ LANDING PAGE ━━━━━━━━━━━━━━━━━━━━ Create a stunning cinematic landing page with: - animated hero section - glowing red gradients - futuristic typography - floating UI mockups - AI assistant intro - “Start Your Transformation” CTA - smooth scrolling animations - premium product showcase sections ━━━━━━━━━━━━━━━━━━━━ EXTRA FEATURES ━━━━━━━━━━━━━━━━━━━━ Add: - Pomodoro timer - Spotify-style music widget - Calendar integration - Weekly review popup - Vision board - Dream company tracker - FAANG preparation tracker - GitHub integration - LinkedIn growth tracker - Daily affirmations - Productivity insights - Achievement unlock animations - Notifications system - Mood tracker - Lock-in focus mode ━━━━━━━━━━━━━━━━━━━━ TECH STACK ━━━━━━━━━━━━━━━━━━━━ Use: - React + Vite - Tailwind CSS - Framer Motion - Recharts - Lucide React Icons - Local Storage or Firebase ━━━━━━━━━━━━━━━━━━━━ IMPORTANT DESIGN DETAILS ━━━━━━━━━━━━━━━━━━━━ - Use reusable components - Use responsive layouts - Add smooth page transitions - Add hover tilt animations - Add glow shadows - Add loading skeletons - Add beautiful empty states - Add modern navigation sidebar - Add animated buttons - Add scroll reveal effects - Add aesthetic typography - Use modern spacing and alignment - Make the app feel premium and immersive ━━━━━━━━━━━━━━━━━━━━ FINAL GOAL ━━━━━━━━━━━━━━━━━━━━ The final website should feel like: “A futuristic AI-powered self-improvement operating system where a Gen-Z student transforms into an elite AI Engineer while leveling up mentally, physically, academically, and aesthetically.” The experience should feel: - immersive - motivating - cinematic - addictive - futuristic - emotional - premium - aesthetic - main-character-energy driven ``` build me a website so that i can use it daily
Comments (0)
Sign in to leave a comment
System Requirements
polar-web System Requirements Document
Introduction
The "polar-web" project is envisioned as a futuristic Gen-Z web application named "AI Engineer Glow-Up OS." This platform is designed to be more than just a productivity tracker; it is a self-improvement operating system with an anime-inspired AI dashboard. The application aims to provide a cinematic, motivating, immersive, and addictive user experience.
System Overview
The "AI Engineer Glow-Up OS" is a web application that combines elements of gamification, cyberpunk aesthetics, and AI-driven interactions to create a unique self-improvement journey. The platform will feature a Gen-Z cyberpunk personality AI assistant, an XP/streaks/achievements system, and an immersive anime/cyberpunk UI. The primary goal is to transform users into elite AI engineers through a structured and engaging experience.
Functional Requirements
- As a User, I should be able to interact with a text-based AI assistant with a Gen-Z cyberpunk personality.
- As a User, I should be able to track my productivity using an XP system, streaks, and achievements.
- As a User, I should receive motivational messages from the AI assistant.
- As a User, I should experience an immersive anime/cyberpunk UI.
- As a User, I should be guided through a glow-up AI engineer transformation journey.
User Personas
- User: A Gen-Z individual seeking to improve productivity and personal growth through a gamified and immersive experience.
- AI Assistant: A text-based cyberpunk personality that interacts with the user, providing motivation and guidance.
Visuals Colors and Theme
- primary: #df2531 (Neon Crimson Red)
- primary_light: #ff4d5c (Lighter Neon Red)
- secondary: #1f1f1f (Dark Grey)
- accent: #00ffcc (Vibrant Aqua)
- highlight: #ffcc00 (Warm Gold)
- bg: #000000 (Deep Black)
- surface: rgba(31, 31, 31, 0.8) (Dark Grey with Transparency)
- text: #ffffff (White)
- text_muted: #b3b3b3 (Muted Grey)
- border: rgba(255, 255, 255, 0.2) (Subtle White)
Signature Design Concept
The homepage of "AI Engineer Glow-Up OS" will feature an interactive cyberpunk cityscape. Users will navigate through a 3D city using @react-three/fiber and @react-three/drei, where each building represents a different section of the app (e.g., Dashboard, Roadmap, Daily Tracker). As users hover over buildings, they will illuminate with neon lights, and clicking on them will zoom into the section. The cityscape will have floating holographic signs and animated drones that deliver motivational messages. The AI assistant will appear as a hologram, providing real-time feedback and encouragement.
Interaction Model & Motion Direction
The landing page will utilize a "parallax" interaction model, creating a layered depth effect as users scroll. Decorative elements like floating particles and neon lights will move at different speeds, enhancing the immersive experience. Internal pages will have an "animated" interaction model with scroll-triggered reveals, hover transitions, and spring physics on interactive elements, ensuring a polished and engaging user experience.
Non-Functional Requirements
- The application must be fully responsive across all devices.
- The UI should load within 3 seconds on standard broadband connections.
- The system should handle up to 10,000 concurrent users without performance degradation.
Tech Stack
- Frontend: React + Vite, Tailwind CSS, Framer Motion
- Backend: Not specified, but options include Python with FastAPI
- Database: Local Storage or Firebase
- Icons: Lucide React Icons
Assumptions and Constraints
- The AI assistant will only support text interactions.
- The application will primarily target Gen-Z users interested in self-improvement and AI engineering.
- The design will adhere to a cyberpunk/anime aesthetic, focusing on immersive and engaging user experiences.
Glossary
- XP System: A gamification feature that rewards users with experience points for completing tasks.
- Streaks: A feature that tracks consecutive days of activity or task completion.
- Achievements: Milestones or badges awarded for reaching specific goals or completing tasks.
- AI Assistant: A virtual companion that interacts with users, providing motivation and guidance.
- Cyberpunk: A genre characterized by futuristic, high-tech, and dystopian themes.
- Glassmorphism: A design trend featuring frosted glass-like elements with transparency and blur effects.
No completed page designs yet.
Completed design pages will appear here when they are ready to preview.
No user flows yet.
The User Flow Agent will generate per-persona navigation diagrams after SRD updates.
No completed page designs yet.
Completed design pages will appear here when they are ready to preview.
No user flows yet.
The User Flow Agent will generate per-persona navigation diagrams after SRD updates.
No comments yet. Be the first!