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>ConceptCraft - Lecture Notes Visualizer</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 <script src="https://unpkg.com/feather-icons"></script>11 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>12 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>13 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>14</head>15<body class="bg-gray-50 min-h-screen flex flex-col">16 <custom-navbar></custom-navbar>17 18 <main class="flex-grow container mx-auto px-4 py-8">19 <section id="hero" class="text-center py-16">20 <h1 class="text-5xl font-bold text-indigo-700 mb-4">Transform Your Lecture Notes</h1>21 <p class="text-xl text-gray-600 max-w-2xl mx-auto mb-8">22 ConceptCraft automatically extracts key concepts and relationships to generate interactive knowledge graphs from your lecture notes.23 </p>24 <div class="flex justify-center gap-4">25 <a href="/upload.html" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition-colors flex items-center gap-2">26 <i data-feather="upload"></i> Upload Notes27 </a>28 <a href="#demo" class="bg-white hover:bg-gray-100 text-indigo-600 border border-indigo-600 px-6 py-3 rounded-lg font-medium transition-colors flex items-center gap-2">29 <i data-feather="eye"></i> See Demo30 </a>31 </div>32 </section>33 34 <section id="demo" class="py-12">35 <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">How It Works</h2>36 37 <div class="grid md:grid-cols-3 gap-8">38 <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">39 <div class="w-14 h-14 bg-indigo-100 rounded-full flex items-center justify-center mb-4">40 <i data-feather="upload" class="text-indigo-600"></i>41 </div>42 <h3 class="text-xl font-semibold mb-2">Upload Notes</h3>43 <p class="text-gray-600">Paste your lecture notes or upload documents (PDF, DOCX, TXT).</p>44 </div>45 46 <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">47 <div class="w-14 h-14 bg-indigo-100 rounded-full flex items-center justify-center mb-4">48 <i data-feather="cpu" class="text-indigo-600"></i>49 </div>50 <h3 class="text-xl font-semibold mb-2">AI Processing</h3>51 <p class="text-gray-600">Our NLP models extract key concepts and relationships automatically.</p>52 </div>53 54 <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">55 <div class="w-14 h-14 bg-indigo-100 rounded-full flex items-center justify-center mb-4">56 <i data-feather="share-2" class="text-indigo-600"></i>57 </div>58 <h3 class="text-xl font-semibold mb-2">Visualize & Learn</h3>59 <p class="text-gray-600">Explore interactive knowledge graphs to enhance your understanding.</p>60 </div>61 </div>62 </section>63 <section id="demo-graph" class="py-12 bg-white rounded-xl shadow-lg p-6">64 <h2 class="text-3xl font-bold text-center text-gray-800 mb-8">Sample Knowledge Graph</h2>65 <div class="h-96 bg-gray-100 rounded-lg relative overflow-hidden" id="vanta-background">66 <div id="graph-container"></div>67<div class="absolute bottom-4 right-4 bg-white p-2 rounded-lg shadow-md">68 <button id="regenGraph" class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded-lg transition-colors text-sm">69 Regenerate70 </button>71 <button id="zoomIn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded-lg transition-colors text-sm ml-2">72 <i data-feather="zoom-in"></i>73 </button>74 <button id="zoomOut" class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded-lg transition-colors text-sm ml-2">75 <i data-feather="zoom-out"></i>76 </button>77 </div>78 </div>79 <div class="mt-6 text-center">80 <p class="text-gray-600 mb-4">Interactive visualization of concepts extracted from sample lecture notes</p>81 <div class="flex justify-center gap-4">82 <button id="physicsToggle" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition-colors text-sm">83 Toggle Physics84 </button>85 <button id="layoutToggle" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition-colors text-sm">86 Change Layout87 </button>88 </div>89 </div>90 </section>91</main>92 93 <custom-footer></custom-footer>94 95 <script src="components/navbar.js"></script>96 <script src="components/footer.js"></script>97 <script src="script.js"></script>98 <script>99 feather.replace();100 // Initialize Vanta.js background101 VANTA.NET({102 el: "#vanta-background",103 mouseControls: true,104 touchControls: true,105 gyroControls: false,106 minHeight: 200.00,107 minWidth: 200.00,108 scale: 1.00,109 scaleMobile: 1.00,110 color: 0x5b6ee1,111 backgroundColor: 0xf8fafc,112 points: 10.00,113 maxDistance: 22.00114 });115 </script>116<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>117</body>118</html>