vignesdg/conceptcraft-lecture-notes-visualizer
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Development Phases | ConceptCraft</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10</head>11<body class="bg-gray-50 min-h-screen flex flex-col">12 <custom-navbar></custom-navbar>13 14 <main class="flex-grow container mx-auto px-4 py-12">15 <div class="max-w-4xl mx-auto">16 <div class="text-center mb-12">17 <h1 class="text-4xl font-bold text-indigo-700 mb-4">Project Development Phases</h1>18 <p class="text-xl text-gray-600">Our structured approach to building ConceptCraft</p>19 </div>20 21 <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8">22 <div class="p-8">23 <div class="timeline">24 <div class="timeline-item left">25 <div class="timeline-content">26 <h3 class="font-bold text-indigo-700">Phase 1: Project Initiation</h3>27 <p class="text-gray-600">Establish foundation and define project scope</p>28 <ul class="mt-2 space-y-1 text-sm text-gray-500">29 <li class="flex items-start">30 <i data-feather="check-circle" class="w-4 h-4 mt-0.5 mr-2 text-green-500"></i>31 <span>Requirements gathering</span>32 </li>33 <li class="flex items-start">34 <i data-feather="check-circle" class="w-4 h-4 mt-0.5 mr-2 text-green-500"></i>35 <span>Technical feasibility study</span>36 </li>37 </ul>38 </div>39 </div>40 <div class="timeline-item right">41 <div class="timeline-content">42 <h3 class="font-bold text-indigo-700">Phase 2: AI Processing Engine</h3>43 <p class="text-gray-600">Build NLP & AI-driven concept extraction pipeline</p>44 <ul class="mt-2 space-y-1 text-sm text-gray-500">45 <li class="flex items-start">46 <i data-feather="check-circle" class="w-4 h-4 mt-0.5 mr-2 text-green-500"></i>47 <span>Concept extraction models</span>48 </li>49 <li class="flex items-start">50 <i data-feather="check-circle" class="w-4 h-4 mt-0.5 mr-2 text-green-500"></i>51 <span>Relationship detection</span>52 </li>53 </ul>54 </div>55 </div>56 <div class="timeline-item left">57 <div class="timeline-content">58 <h3 class="font-bold text-indigo-700">Phase 3: Concept Map Visualization</h3>59 <p class="text-gray-600">Implement dynamic graph visualization</p>60 <ul class="mt-2 space-y-1 text-sm text-gray-500">61 <li class="flex items-start">62 <i data-feather="check-circle" class="w-4 h-4 mt-0.5 mr-2 text-green-500"></i>63 <span>Interactive graph library</span>64 </li>65 <li class="flex items-start">66 <i data-feather="check-circle" class="w-4 h-4 mt-0.5 mr-2 text-green-500"></i>67 <span>Layout algorithms</span>68 </li>69 </ul>70 </div>71 </div>72 <div class="timeline-item right">73 <div class="timeline-content">74 <h3 class="font-bold text-indigo-700">Phase 4: UI/UX Layer</h3>75 <p class="text-gray-600">Build user-facing pages with navigation</p>76 <ul class="mt-2 space-y-1 text-sm text-gray-500">77 <li class="flex items-start">78 <i data-feather="check-circle" class="w-4 h-4 mt-0.5 mr-2 text-green-500"></i>79 <span>Responsive design</span>80 </li>81 <li class="flex items-start">82 <i data-feather="check-circle" class="w-4 h-4 mt-0.5 mr-2 text-green-500"></i>83 <span>User workflows</span>84 </li>85 </ul>86 </div>87 </div>88 <div class="timeline-item left">89 <div class="timeline-content">90 <h3 class="font-bold text-indigo-700">Phase 5: Collaboration & Analytics</h3>91 <p class="text-gray-600">Add real-time collaboration and learning analytics</p>92 <ul class="mt-2 space-y-1 text-sm text-gray-500">93 <li class="flex items-start">94 <i data-feather="clock" class="w-4 h-4 mt-0.5 mr-2 text-yellow-500"></i>95 <span>Shared concept maps</span>96 </li>97 <li class="flex items-start">98 <i data-feather="clock" class="w-4 h-4 mt-0.5 mr-2 text-yellow-500"></i>99 <span>Knowledge retention metrics</span>100 </li>101 </ul>102 </div>103 </div>104 <div class="timeline-item right">105 <div class="timeline-content">106 <h3 class="font-bold text-indigo-700">Phase 6: Customization</h3>107 <p class="text-gray-600">Enhance personalization and visual preferences</p>108 <ul class="mt-2 space-y-1 text-sm text-gray-500">109 <li class="flex items-start">110 <i data-feather="clock" class="w-4 h-4 mt-0.5 mr-2 text-yellow-500"></i>111 <span>Theme customization</span>112 </li>113 <li class="flex items-start">114 <i data-feather="clock" class="w-4 h-4 mt-0.5 mr-2 text-yellow-500"></i>115 <span>Layout preferences</span>116 </li>117 </ul>118 </div>119 </div>120 <div class="timeline-item left">121 <div class="timeline-content">122 <h3 class="font-bold text-indigo-700">Phase 7: Testing & QA</h3>123 <p class="text-gray-600">Ensure reliability, performance, and usability</p>124 <ul class="mt-2 space-y-1 text-sm text-gray-500">125 <li class="flex items-start">126 <i data-feather="clock" class="w-4 h-4 mt-0.5 mr-2 text-yellow-500"></i>127 <span>User testing</span>128 </li>129 <li class="flex items-start">130 <i data-feather="clock" class="w-4 h-4 mt-0.5 mr-2 text-yellow-500"></i>131 <span>Performance optimization</span>132 </li>133 </ul>134 </div>135 </div>136 <div class="timeline-item right">137 <div class="timeline-content">138 <h3 class="font-bold text-indigo-700">Phase 8: Deployment</h3>139 <p class="text-gray-600">Make the app publicly accessible</p>140 <ul class="mt-2 space-y-1 text-sm text-gray-500">141 <li class="flex items-start">142 <i data-feather="clock" class="w-4 h-4 mt-0.5 mr-2 text-yellow-500"></i>143 <span>Cloud infrastructure</span>144 </li>145 <li class="flex items-start">146 <i data-feather="clock" class="w-4 h-4 mt-0.5 mr-2 text-yellow-500"></i>147 <span>Launch preparation</span>148 </li>149 </ul>150 </div>151 </div>152 <div class="timeline-item left">153 <div class="timeline-content">154 <h3 class="font-bold text-indigo-700">Phase 9: Post-Launch</h3>155 <p class="text-gray-600">Continuous improvement and scaling</p>156 <ul class="mt-2 space-y-1 text-sm text-gray-500">157 <li class="flex items-start">158 <i data-feather="clock" class="w-4 h-4 mt-0.5 mr-2 text-yellow-500"></i>159 <span>Feature enhancements</span>160 </li>161 <li class="flex items-start">162 <i data-feather="clock" class="w-4 h-4 mt-0.5 mr-2 text-yellow-500"></i>163 <span>User feedback integration</span>164 </li>165 </ul>166 </div>167 </div>168 </div>169 </div>170 </div>171 172 <div class="bg-white rounded-xl shadow-md p-8">173 <h2 class="text-2xl font-bold text-gray-800 mb-4">Current Status</h2>174 <div class="space-y-4">175 <div>176 <h3 class="font-semibold text-indigo-700 mb-2">Completed Phases (1-4)</h3>177 <div class="w-full bg-gray-200 rounded-full h-4">178 <div class="bg-green-500 h-4 rounded-full" style="width: 45%"></div>179 </div>180 </div>181 <div>182 <h3 class="font-semibold text-indigo-700 mb-2">In Progress (5-6)</h3>183 <div class="w-full bg-gray-200 rounded-full h-4">184 <div class="bg-yellow-500 h-4 rounded-full" style="width: 30%"></div>185 </div>186 </div>187 <div>188 <h3 class="font-semibold text-indigo-700 mb-2">Upcoming (7-9)</h3>189 <div class="w-full bg-gray-200 rounded-full h-4">190 <div class="bg-gray-300 h-4 rounded-full" style="width: 25%"></div>191 </div>192 </div>193 </div>194 </div>195 </div>196 </main>197 198 <custom-footer></custom-footer>199 200 <script src="components/navbar.js"></script>201 <script src="components/footer.js"></script>202 <script src="script.js"></script>203 <script>feather.replace();</script>204</body>205</html>