ishapathak19/roadmap-wizardry
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>Theory | Roadmap Wizardry 🧙♂️</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">12 <custom-navbar></custom-navbar>13 14 <main class="container mx-auto px-4 py-12">15 <div class="flex flex-col md:flex-row gap-8">16 <div class="md:w-1/4">17 <div class="bg-white p-6 rounded-xl shadow-lg sticky top-6">18 <h3 class="text-xl font-bold mb-4 text-indigo-800">Topics</h3>19 <ul id="theory-topics" class="space-y-2">20 <!-- Topics will be loaded from JSON -->21 </ul>22 </div>23 </div>24 25 <div class="md:w-3/4">26 <div class="bg-white p-8 rounded-xl shadow-lg">27 <h2 class="text-3xl font-bold text-indigo-800 mb-6">Theory Content</h2>28 <div id="theory-content">29 <p class="text-gray-600">Select a topic from the sidebar to view its content.</p>30 </div>31 </div>32 </div>33 </div>34 </main>35 36 <custom-footer></custom-footer>37 38 <script src="components/navbar.js"></script>39 <script src="components/footer.js"></script>40 <script src="script.js"></script>41 <script>42 feather.replace();43 44 // Load theory topics from JSON45 fetch('data/theory.json')46 .then(response => response.json())47 .then(data => {48 const topicsContainer = document.getElementById('theory-topics');49 data.forEach(topic => {50 const topicItem = document.createElement('li');51 topicItem.className = 'cursor-pointer hover:text-indigo-600 transition-colors';52 topicItem.textContent = topic.title;53 topicItem.addEventListener('click', () => loadTheoryContent(topic));54 topicsContainer.appendChild(topicItem);55 });56 });57 58 function loadTheoryContent(topic) {59 const contentContainer = document.getElementById('theory-content');60 contentContainer.innerHTML = `61 <h3 class="text-2xl font-bold mb-4">${topic.title}</h3>62 <div class="prose max-w-none">63 ${topic.content}64 </div>65 ${topic.resources ? `66 <div class="mt-8">67 <h4 class="text-lg font-bold mb-3">Additional Resources</h4>68 <ul class="space-y-2">69 ${topic.resources.map(res => `<li><a href="${res.url}" target="_blank" class="text-indigo-600 hover:underline">${res.title}</a></li>`).join('')}70 </ul>71 </div>72 ` : ''}73 `;74 }75 </script>76</body>77</html>