errereee/love-code-uncertainty
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>StudyBuddy AI - Smart Learning Companion</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</head>12<body class="bg-gray-50 min-h-screen flex flex-col">13 <custom-navbar></custom-navbar>14 15 <main class="flex-grow container mx-auto px-4 py-8">16 <!-- Login/Signup Form (shown when not logged in) -->17 <div id="auth-container" class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden p-8">18 <h2 class="text-2xl font-bold text-gray-800 mb-6">Welcome to StudyBuddy AI</h2>19 20 <div id="login-form">21 <div class="mb-4">22 <label class="block text-gray-700 text-sm font-bold mb-2" for="login-email">Email</label>23 <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="login-email" type="email" placeholder="Email">24 </div>25 <div class="mb-6">26 <label class="block text-gray-700 text-sm font-bold mb-2" for="login-password">Password</label>27 <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="login-password" type="password" placeholder="Password">28 </div>29 <div class="flex items-center justify-between">30 <button id="login-btn" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">31 Sign In32 </button>33 <button id="show-signup" class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800">34 Create Account35 </button>36 </div>37 </div>38 39 <div id="signup-form" class="hidden">40 <div class="mb-4">41 <label class="block text-gray-700 text-sm font-bold mb-2" for="signup-name">Name</label>42 <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="signup-name" type="text" placeholder="Your Name">43 </div>44 <div class="mb-4">45 <label class="block text-gray-700 text-sm font-bold mb-2" for="signup-email">Email</label>46 <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="signup-email" type="email" placeholder="Email">47 </div>48 <div class="mb-6">49 <label class="block text-gray-700 text-sm font-bold mb-2" for="signup-password">Password</label>50 <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="signup-password" type="password" placeholder="Password">51 </div>52 <div class="flex items-center justify-between">53 <button id="signup-btn" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">54 Create Account55 </button>56 <button id="show-login" class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800">57 Already have an account?58 </button>59 </div>60 </div>61 </div>62 63 <!-- Main App (shown when logged in) -->64 <div id="app-container" class="hidden">65 <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">66 <!-- AI Study Assistant -->67 <div class="lg:col-span-2 bg-white rounded-xl shadow-md overflow-hidden">68 <div class="p-6">69 <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">70 <i data-feather="cpu" class="mr-2"></i> AI Study Assistant71 </h2>72 <div id="ai-chat" class="h-64 overflow-y-auto mb-4 p-4 bg-gray-50 rounded-lg">73 <div class="ai-message bg-blue-100 p-3 rounded-lg mb-2 max-w-xs">74 <p>Hello! I'm your StudyBuddy AI. How can I help you learn today?</p>75 </div>76 </div>77 <div class="flex">78 <input id="ai-input" type="text" class="flex-grow border rounded-l-lg py-2 px-3 text-gray-700 focus:outline-none" placeholder="Ask me anything...">79 <button id="ai-send" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-r-lg">80 <i data-feather="send"></i>81 </button>82 </div>83 </div>84 </div>85 86 <!-- To-Do List -->87 <div class="bg-white rounded-xl shadow-md overflow-hidden">88 <div class="p-6">89 <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">90 <i data-feather="check-circle" class="mr-2"></i> Study Tasks91 </h2>92 <div class="flex mb-4">93 <input id="todo-input" type="text" class="flex-grow border rounded-l-lg py-2 px-3 text-gray-700 focus:outline-none" placeholder="Add a new task...">94 <button id="todo-add" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-r-lg">95 <i data-feather="plus"></i>96 </button>97 </div>98 <ul id="todo-list" class="space-y-2">99 <!-- Tasks will be added here -->100 </ul>101 </div>102 </div>103 </div>104 105 <!-- Study Resources -->106 <div class="mt-6 bg-white rounded-xl shadow-md overflow-hidden">107 <div class="p-6">108 <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">109 <i data-feather="book" class="mr-2"></i> My Study Resources110 </h2>111 <div class="grid grid-cols-1 md:grid-cols-3 gap-4">112 <div class="border rounded-lg p-4 hover:bg-gray-50 cursor-pointer">113 <h3 class="font-semibold mb-2">Mathematics</h3>114 <p class="text-sm text-gray-600">5 notes, 3 quizzes</p>115 </div>116 <div class="border rounded-lg p-4 hover:bg-gray-50 cursor-pointer">117 <h3 class="font-semibold mb-2">Science</h3>118 <p class="text-sm text-gray-600">8 notes, 2 quizzes</p>119 </div>120 <div class="border rounded-lg p-4 hover:bg-gray-50 cursor-pointer">121 <h3 class="font-semibold mb-2">History</h3>122 <p class="text-sm text-gray-600">3 notes, 1 quiz</p>123 </div>124 </div>125 </div>126 </div>127 </div>128 </main>129 130 <custom-footer></custom-footer>131 132 <script src="components/navbar.js"></script>133 <script src="components/footer.js"></script>134 <script src="script.js"></script>135 <script>feather.replace();</script>136</body>137</html>