Add Smart Suggestions page with AI-simulated roadmaps and Framer-like animations

[Copilot]

Implements AI-powered learning roadmap generator with three pre-built templates (DSA, Full Stack, General Programming). Simulates AI processing with 1.5s delay before rendering step-by-step roadmaps with completion tracking.

Changes

New Files:

• suggestions.html - Roadmap generator UI reusing dashboard.css, dropdown selector, and dynamic content container
• suggestions.js - Core logic with roadmap templates, animations, and completion state management
• .gitignore - Excludes server logs and build artifacts

Modified:

• dashboard.html - Updated Smart Suggestions nav link from # to suggestions.html

Implementation Details

Animations (Framer-like specs):

• Card entrance: opacity: 0→1, translateY(30px→0), 600ms, cubic-bezier(0.4, 0, 0.2, 1)
• Stagger: 120ms between elements
• Buttons: hover scale(1.08), click scale(0.95)

Roadmap Templates:
Each includes 5-7 steps with title, duration, and 3 key topics. Templates cover:

• Data Structures & Algorithms (arrays, linked lists, trees, graphs, DP, interview prep)
• Full Stack Development (HTML/CSS, JS, React, Node/Express, databases, deployment)
• General Programming (fundamentals, OOP, problem-solving, Git, clean code, project)

Mark-as-Complete:

• Toggles button state (lavender → green gradient)
• Applies grayscale filter to completed cards
• Confetti animation on completion using Web Animations API

OpenAI Integration:
Commented block ready for production use:

async function generateRoadmapWithAI(goal) {
    const apiKey = 'YOUR_OPENAI_API_KEY';
    const response = await fetch('https://api.openai.com/v1/chat/completions', {
        method: 'POST',
        headers: { 'Authorization': `Bearer ${apiKey}` },
        body: JSON.stringify({
            model: 'gpt-3.5-turbo',
            messages: [/* structured prompt for roadmap generation */]
        })
    });
    // Parse and display AI-generated roadmap
}

Screenshots

Initial state:

Generated DSA roadmap:

Completed step with visual feedback:

Full Stack roadmap:

Technical Notes

• Zero dependencies - vanilla CSS/JS
• Maintains lavender color palette consistency (#3a225d, #b57aff, #d1aaff)
• Responsive design inherits from dashboard.css

Original prompt

Add Smart Suggestions pages and JS to implement AI-simulated roadmap generator and Framer-like animations.

Files to add:

• suggestions.html (UI, reuses dashboard.css, input and roadmap container)
• suggestions.js (logic: templates for DSA, Full Stack, default; simulated AI selection; animations; mark-as-complete)

Update:

• Update dashboard.html navigation link to point to suggestions.html (ensure nav contains link)

Requirements:

• Use existing dashboard color palette and classes
• CSS/JS only, no frameworks
• Animations: opacity 0->1, translateY(30->0), duration 600ms, easing cubic-bezier(0.4,0,0.2,1); stagger 120ms; scale 0.95->1
• Buttons: hover scale 1.08, click scale 0.95
• Provide optional commented OpenAI API block in suggestions.js

Include commit message: "Add Smart Suggestions page with AI-simulated roadmaps and Framer-like animations; update dashboard nav"

Repository: aditya48-q/The-Dark-knights

This pull request was created from Copilot chat.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.