Acadly/Frontend/roadmap.html at main · pranitdhanade-sys/Acadly · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>AcadLy — Product Roadmap</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
  <link rel="stylesheet" href="CSS/roadmap.css">

</head>
<body class="bg-slate-950 text-slate-100 min-h-screen">
  <div class="fixed -top-24 -left-16 h-96 w-96 rounded-full bg-purple-700/20 blur-3xl"></div>
  <div class="fixed -bottom-20 -right-16 h-96 w-96 rounded-full bg-cyan-500/20 blur-3xl"></div>

  <header class="relative z-10 border-b border-white/10 backdrop-blur bg-slate-950/70">
    <div class="max-w-7xl mx-auto px-6 py-5 flex flex-wrap items-center justify-between gap-3">
      <div>
        <p class="text-cyan-300 text-sm tracking-wide uppercase">AcadLy</p>
        <h1 class="text-2xl md:text-3xl font-extrabold">Roadmap & Feature Delivery Hub</h1>
      </div>
      <div class="flex items-center gap-3">
        <a href="dashboard_v2.html" class="px-4 py-2 rounded-lg border border-white/20 hover:border-cyan-300/70 text-sm font-medium">
          <i class="fa-solid fa-arrow-left mr-1"></i> Dashboard
        </a>
        <a href="acadly_learning_path.html" class="px-4 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-cyan-500 text-sm font-semibold">
          <i class="fa-solid fa-route mr-1"></i> Learning Path
        </a>
      </div>
    </div>
  </header>

  <main class="relative z-10 max-w-7xl mx-auto px-6 py-10 space-y-10">
    <section class="grid grid-cols-1 md:grid-cols-4 gap-4">
      <article class="rounded-2xl p-5 border border-white/10 bg-slate-900/70"><p class="text-slate-400 text-sm">Planned Features</p><p class="text-3xl font-bold mt-2">36</p></article>
      <article class="rounded-2xl p-5 border border-white/10 bg-slate-900/70"><p class="text-slate-400 text-sm">In Progress</p><p class="text-3xl font-bold mt-2 text-amber-300">11</p></article>
      <article class="rounded-2xl p-5 border border-white/10 bg-slate-900/70"><p class="text-slate-400 text-sm">Released</p><p class="text-3xl font-bold mt-2 text-emerald-300">19</p></article>
      <article class="rounded-2xl p-5 border border-white/10 bg-slate-900/70"><p class="text-slate-400 text-sm">Community Votes</p><p class="text-3xl font-bold mt-2 text-cyan-300">4,280</p></article>
      <article class="rounded-2xl p-5 border border-white/10 bg-slate-900/70">
        <p class="text-slate-400 text-sm">Planned Features</p>
        <p class="text-3xl font-bold mt-2">36</p>
      </article>
      <article class="rounded-2xl p-5 border border-white/10 bg-slate-900/70">
        <p class="text-slate-400 text-sm">In Progress</p>
        <p class="text-3xl font-bold mt-2 text-amber-300">11</p>
      </article>
      <article class="rounded-2xl p-5 border border-white/10 bg-slate-900/70">
        <p class="text-slate-400 text-sm">Released</p>
        <p class="text-3xl font-bold mt-2 text-emerald-300">19</p>
      </article>
      <article class="rounded-2xl p-5 border border-white/10 bg-slate-900/70">
        <p class="text-slate-400 text-sm">Community Votes</p>
        <p class="text-3xl font-bold mt-2 text-cyan-300">4,280</p>
      </article>
    </section>

    <section class="rounded-2xl border border-white/10 bg-slate-900/60 p-5 md:p-7">
      <div class="flex flex-wrap items-center justify-between gap-4 mb-5">
        <h2 class="text-xl md:text-2xl font-bold">Quarterly Plan</h2>
        <div class="flex flex-wrap gap-2" id="quarterTabs">
          <button class="quarter-btn active-quarter px-3 py-1.5 rounded-lg text-sm border border-white/20" data-quarter="Q2">Q2 2026</button>
          <button class="quarter-btn px-3 py-1.5 rounded-lg text-sm border border-white/20" data-quarter="Q3">Q3 2026</button>
          <button class="quarter-btn px-3 py-1.5 rounded-lg text-sm border border-white/20" data-quarter="Q4">Q4 2026</button>
        </div>
      </div>
      <div id="quarterDescription" class="text-slate-300 leading-relaxed">Q2 focuses on core learning quality: adaptive recommendations, deeper analytics, and consistency across web experiences.</div>
      <div id="quarterDescription" class="text-slate-300 leading-relaxed">
        Q2 focuses on core learning quality: adaptive recommendations, deeper analytics, and consistency across web experiences.
      </div>
    </section>

    <section>
      <div class="flex flex-wrap items-center justify-between gap-4 mb-4">
        <h2 class="text-xl md:text-2xl font-bold">Feature Backlog (Many Features)</h2>
        <select id="statusFilter" class="bg-slate-900 border border-white/20 rounded-lg px-3 py-2 text-sm">
          <option value="all">All statuses</option><option value="planned">Planned</option><option value="progress">In Progress</option><option value="released">Released</option>
        </select>
      </div>
      <div id="roadmapGrid" class="grid md:grid-cols-2 xl:grid-cols-3 gap-4"></div>
    </section>

    <section class="rounded-2xl border border-cyan-400/20 bg-slate-900/60 p-5 md:p-7">
      <div class="flex flex-wrap items-center justify-between gap-3 mb-5">
        <div>
          <h2 class="text-xl md:text-2xl font-bold">Mindmap Library (50+)</h2>
          <p class="text-slate-300 text-sm">Each mindmap has arrow connectors and expands Topic → Subtopic → Concepts.</p>
        </div>
        <p class="text-xs text-cyan-300" id="mindmapCount"></p>
      </div>
      <div id="mindmapGrid" class="grid md:grid-cols-2 gap-4"></div>
          <option value="all">All statuses</option>
          <option value="planned">Planned</option>
          <option value="progress">In Progress</option>
          <option value="released">Released</option>
        </select>
      </div>

      <div id="roadmapGrid" class="grid md:grid-cols-2 xl:grid-cols-3 gap-4"></div>
    </section>
  </main>

  <script>
    const roadmapItems = [
      { title: "AI Study Copilot", status: "progress", quarter: "Q2", area: "AI", details: "Contextual hints, step-by-step breakdowns, and confidence scoring for every session." },
      { title: "Personalized Learning Streaks", status: "released", quarter: "Q2", area: "Gamification", details: "Streak protection tokens, smart reminders, and streak freeze calendar." },
      { title: "Group Study Rooms", status: "planned", quarter: "Q3", area: "Collaboration", details: "Shared whiteboard, synchronized timers, and breakout channels." },
      { title: "Offline Lesson Packs", status: "planned", quarter: "Q4", area: "Mobile", details: "Download modules with encrypted sync for low-connectivity learners." },
      { title: "Live Mentor Sessions", status: "progress", quarter: "Q3", area: "Mentorship", details: "Book 1:1 sessions with built-in notes, replay, and action items." },
      { title: "Advanced Roadmap Analytics", status: "progress", quarter: "Q2", area: "Analytics", details: "Completion heatmaps, module drop-off reasons, and weekly insights." },
      { title: "Badge Marketplace", status: "planned", quarter: "Q4", area: "Community", details: "Redeem achievements for profile upgrades and peer recognition." },
      { title: "Project-Based Assessments", status: "released", quarter: "Q2", area: "Assessment", details: "Rubric-driven submissions with instant formative feedback." },
      { title: "Voice Q&A Tutor", status: "planned", quarter: "Q3", area: "AI", details: "Ask questions by voice and receive transcript-backed answers." },
      { title: "Syllabus Auto Import", status: "released", quarter: "Q2", area: "Setup", details: "Import academic goals from CSV, PDF, and LMS exports." },
      { title: "Leaderboards 2.0", status: "progress", quarter: "Q3", area: "Gamification", details: "Course-level and cohort-level rankings with anti-cheat checks." },
      { title: "Career Path Alignments", status: "planned", quarter: "Q4", area: "Career", details: "Map skills to internships and role-based competency matrices." }
    ];

    const quarterCopy = {
      Q2: "Q2 focuses on core learning quality: adaptive recommendations, deeper analytics, and consistency across web experiences.",
      Q3: "Q3 expands collaboration and live teaching: group rooms, mentor sessions, and leaderboard upgrades.",
      Q4: "Q4 targets scale and long-term value: offline support, careers mapping, and community growth systems."
    };

    const statusMeta = {
      planned: { label: "Planned", color: "bg-slate-400" },
      progress: { label: "In Progress", color: "bg-amber-400" },
      released: { label: "Released", color: "bg-emerald-400" }
    };

    const baseMindmaps = [
      "Algebra", "Geometry", "Calculus", "Probability", "Statistics", "Mechanics", "Electricity", "Magnetism", "Thermodynamics", "Optics",
      "Organic Chemistry", "Inorganic Chemistry", "Physical Chemistry", "Data Structures", "Algorithms", "Operating Systems", "Databases", "Computer Networks", "Machine Learning", "Cybersecurity",
      "English Grammar", "Essay Writing", "Public Speaking", "Critical Reading", "Creative Writing", "World History", "Indian History", "Geography", "Political Science", "Economics",
      "Accounting", "Business Studies", "Marketing", "Entrepreneurship", "Psychology", "Sociology", "Biology", "Genetics", "Ecology", "Human Anatomy",
      "Environmental Science", "Astronomy", "Robotics", "Cloud Computing", "Web Development", "Mobile Development", "UI/UX Design", "Project Management", "Time Management", "Exam Strategy",
      "Research Methods", "Presentation Skills", "Communication", "Digital Literacy", "Ethics", "Financial Literacy", "Career Planning", "Interview Prep", "Resume Building", "Leadership"
    ];

    const mindmaps = baseMindmaps.map((topic, index) => ({
      id: `mindmap-${index + 1}`,
      title: topic,
      subtopics: [
        {
          name: `${topic} Foundations`,
          concepts: [`Core definitions in ${topic}`, `${topic} terminology`, `${topic} starter exercises`]
        },
        {
          name: `${topic} Intermediate`,
          concepts: [`Problem solving patterns`, `Common mistakes in ${topic}`, `Practice framework`]
        },
        {
          name: `${topic} Advanced`,
          concepts: [`Real-world applications`, `Higher-order questions`, `${topic} capstone checklist`]
        }
      ]
    }));

    function renderRoadmap() {
      const selected = document.getElementById("statusFilter").value;
      const items = selected === "all" ? roadmapItems : roadmapItems.filter(item => item.status === selected);
      document.getElementById("roadmapGrid").innerHTML = items.map(item => {
        const meta = statusMeta[item.status];
        return `<article class="roadmap-card rounded-2xl border border-white/10 bg-slate-900/70 p-5"><div class="flex items-center justify-between gap-2 mb-3"><span class="feature-pill text-xs px-2 py-1 rounded-full text-slate-200">${item.area}</span><span class="text-xs text-slate-300 inline-flex items-center gap-2"><i class="status-dot ${meta.color}"></i>${meta.label}</span></div><h3 class="font-bold text-lg leading-snug">${item.title}</h3><p class="text-slate-300 text-sm mt-2 leading-relaxed">${item.details}</p><div class="mt-4 text-xs text-cyan-300 font-semibold">Target: ${item.quarter} 2026</div></article>`;
      }).join("");
    }

    function renderMindmaps() {
      document.getElementById("mindmapCount").textContent = `${mindmaps.length} mindmaps available`;
      document.getElementById("mindmapGrid").innerHTML = mindmaps.map(map => `
        <article class="mindmap-node rounded-2xl p-4">
          <button class="w-full flex items-center justify-between gap-3 text-left" data-toggle="${map.id}">
            <div>
              <p class="text-xs text-cyan-300">Topic</p>
              <h3 class="text-lg font-bold">${map.title}</h3>
            </div>
            <span class="arrow-chip text-cyan-200 text-xs px-2 py-1 rounded-full"><i class="fa-solid fa-arrow-right"></i> Expand</span>
          </button>
          <div id="${map.id}" class="hidden-tree mt-4 tree-root pl-2 space-y-2">
            ${map.subtopics.map(sub => `
              <div class="tree-branch">
                <div class="rounded-lg border border-purple-400/25 bg-purple-500/10 p-2 text-sm font-semibold text-purple-200 inline-flex items-center gap-2">
                  <i class="fa-solid fa-arrow-right"></i> ${sub.name}
                </div>
                <ul class="mt-2 ml-2 space-y-2">
                  ${sub.concepts.map(concept => `<li class="tree-branch"><div class="rounded-lg border border-cyan-400/20 bg-cyan-500/10 px-3 py-2 text-sm text-slate-200 inline-flex items-center gap-2"><i class="fa-solid fa-arrow-right text-cyan-300"></i> ${concept}</div></li>`).join("")}
                </ul>
              </div>
            `).join("")}
          </div>
        </article>
      `).join("");

      document.querySelectorAll("[data-toggle]").forEach(btn => {
        btn.addEventListener("click", () => {
          const node = document.getElementById(btn.dataset.toggle);
          node.classList.toggle("hidden-tree");
        });
      });
    }

    document.getElementById("statusFilter").addEventListener("change", renderRoadmap);
    renderRoadmap();
    renderMindmaps();
    const grid = document.getElementById("roadmapGrid");
    const filter = document.getElementById("statusFilter");

    function render() {
      const selected = filter.value;
      const items = selected === "all" ? roadmapItems : roadmapItems.filter(item => item.status === selected);

      grid.innerHTML = items.map(item => {
        const meta = statusMeta[item.status];
        return `
          <article class="roadmap-card rounded-2xl border border-white/10 bg-slate-900/70 p-5">
            <div class="flex items-center justify-between gap-2 mb-3">
              <span class="feature-pill text-xs px-2 py-1 rounded-full text-slate-200">${item.area}</span>
              <span class="text-xs text-slate-300 inline-flex items-center gap-2"><i class="status-dot ${meta.color}"></i>${meta.label}</span>
            </div>
            <h3 class="font-bold text-lg leading-snug">${item.title}</h3>
            <p class="text-slate-300 text-sm mt-2 leading-relaxed">${item.details}</p>
            <div class="mt-4 text-xs text-cyan-300 font-semibold">Target: ${item.quarter} 2026</div>
          </article>
        `;
      }).join("");
    }

    filter.addEventListener("change", render);
    render();

    document.querySelectorAll('.quarter-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        document.querySelectorAll('.quarter-btn').forEach(other => other.classList.remove('active-quarter'));
        btn.classList.add('active-quarter');
        document.getElementById('quarterDescription').textContent = quarterCopy[btn.dataset.quarter];
      });
    });
  </script>
</body>
</html>