|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>DeepSeek Homework Manager</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #6e8efb, #a777e3); |
|
|
} |
|
|
.subject-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
|
|
} |
|
|
.task-item:hover { |
|
|
background-color: rgba(255,255,255,0.1); |
|
|
} |
|
|
.code-editor { |
|
|
background-color: #1e293b; |
|
|
border-radius: 0.5rem; |
|
|
} |
|
|
.sidebar { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
@media (max-width: 768px) { |
|
|
.sidebar { |
|
|
transform: translateX(-100%); |
|
|
position: absolute; |
|
|
z-index: 10; |
|
|
height: 100vh; |
|
|
} |
|
|
.sidebar.open { |
|
|
transform: translateX(0); |
|
|
} |
|
|
} |
|
|
.markdown-content h1 { |
|
|
font-size: 1.5rem; |
|
|
font-weight: bold; |
|
|
margin: 1rem 0; |
|
|
} |
|
|
.markdown-content h2 { |
|
|
font-size: 1.25rem; |
|
|
font-weight: bold; |
|
|
margin: 0.8rem 0; |
|
|
} |
|
|
.markdown-content p { |
|
|
margin: 0.5rem 0; |
|
|
} |
|
|
.markdown-content ul { |
|
|
list-style-type: disc; |
|
|
margin-left: 1.5rem; |
|
|
} |
|
|
.markdown-content pre { |
|
|
background-color: #1e293b; |
|
|
padding: 1rem; |
|
|
border-radius: 0.5rem; |
|
|
overflow-x: auto; |
|
|
} |
|
|
.pulse-animation { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0% { |
|
|
box-shadow: 0 0 0 0 rgba(167, 119, 227, 0.7); |
|
|
} |
|
|
70% { |
|
|
box-shadow: 0 0 0 10px rgba(167, 119, 227, 0); |
|
|
} |
|
|
100% { |
|
|
box-shadow: 0 0 0 0 rgba(167, 119, 227, 0); |
|
|
} |
|
|
} |
|
|
.floating-btn { |
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.2); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.floating-btn:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 6px 20px rgba(0,0,0,0.3); |
|
|
} |
|
|
.task-priority-high { |
|
|
border-left: 4px solid #ef4444; |
|
|
} |
|
|
.task-priority-medium { |
|
|
border-left: 4px solid #f59e0b; |
|
|
} |
|
|
.task-priority-low { |
|
|
border-left: 4px solid #10b981; |
|
|
} |
|
|
.progress-bar { |
|
|
height: 6px; |
|
|
border-radius: 3px; |
|
|
background-color: #e5e7eb; |
|
|
} |
|
|
.progress-fill { |
|
|
height: 100%; |
|
|
border-radius: 3px; |
|
|
background: linear-gradient(90deg, #6e8efb, #a777e3); |
|
|
transition: width 0.5s ease; |
|
|
} |
|
|
.typewriter { |
|
|
overflow: hidden; |
|
|
border-right: .15em solid #a777e3; |
|
|
white-space: nowrap; |
|
|
margin: 0 auto; |
|
|
letter-spacing: .15em; |
|
|
animation: |
|
|
typing 3.5s steps(40, end), |
|
|
blink-caret .75s step-end infinite; |
|
|
} |
|
|
@keyframes typing { |
|
|
from { width: 0 } |
|
|
to { width: 100% } |
|
|
} |
|
|
@keyframes blink-caret { |
|
|
from, to { border-color: transparent } |
|
|
50% { border-color: #a777e3; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 min-h-screen"> |
|
|
|
|
|
<div class="md:hidden fixed top-4 left-4 z-20"> |
|
|
<button id="menuToggle" class="bg-white p-2 rounded-full shadow-lg hover:bg-gray-100 transition"> |
|
|
<i class="fas fa-bars text-purple-600"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="sidebar" class="sidebar bg-gradient-to-b from-purple-700 to-blue-600 text-white w-64 p-4 fixed h-full"> |
|
|
<div class="flex items-center mb-8"> |
|
|
<i class="fas fa-brain text-3xl mr-2"></i> |
|
|
<h1 class="text-2xl font-bold">DeepSeek HW</h1> |
|
|
</div> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<h2 class="text-lg font-semibold mb-2">Quick Actions</h2> |
|
|
<button id="newTaskBtn" class="w-full bg-white text-purple-600 py-2 px-4 rounded-lg mb-2 font-medium hover:bg-gray-100 transition flex items-center justify-center"> |
|
|
<i class="fas fa-plus mr-2"></i> New Task |
|
|
</button> |
|
|
<button id="aiAssistBtn" class="w-full bg-purple-800 text-white py-2 px-4 rounded-lg font-medium hover:bg-purple-900 transition flex items-center justify-center"> |
|
|
<i class="fas fa-robot mr-2"></i> AI Assist |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<h2 class="text-lg font-semibold mb-2">Subjects</h2> |
|
|
<ul> |
|
|
<li class="mb-2"> |
|
|
<a href="#" class="subject-filter flex items-center p-2 rounded hover:bg-purple-800 transition" data-subject="math"> |
|
|
<i class="fas fa-square-root-alt mr-2"></i> Mathematics |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-2"> |
|
|
<a href="#" class="subject-filter flex items-center p-2 rounded hover:bg-purple-800 transition" data-subject="science"> |
|
|
<i class="fas fa-flask mr-2"></i> Science |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-2"> |
|
|
<a href="#" class="subject-filter flex items-center p-2 rounded hover:bg-purple-800 transition" data-subject="history"> |
|
|
<i class="fas fa-landmark mr-2"></i> History |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-2"> |
|
|
<a href="#" class="subject-filter flex items-center p-2 rounded hover:bg-purple-800 transition" data-subject="english"> |
|
|
<i class="fas fa-book mr-2"></i> English |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-2"> |
|
|
<a href="#" class="subject-filter flex items-center p-2 rounded hover:bg-purple-800 transition" data-subject="coding"> |
|
|
<i class="fas fa-code mr-2"></i> Coding |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="subject-filter flex items-center p-2 rounded hover:bg-purple-800 transition" data-subject="other"> |
|
|
<i class="fas fa-ellipsis-h mr-2"></i> Other |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<h2 class="text-lg font-semibold mb-2">Filters</h2> |
|
|
<ul> |
|
|
<li class="mb-2"> |
|
|
<a href="#" class="status-filter flex items-center p-2 rounded hover:bg-purple-800 transition" data-status="all"> |
|
|
<i class="fas fa-tasks mr-2"></i> All Tasks |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-2"> |
|
|
<a href="#" class="status-filter flex items-center p-2 rounded hover:bg-purple-800 transition" data-status="pending"> |
|
|
<i class="fas fa-clock mr-2"></i> Pending |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-2"> |
|
|
<a href="#" class="status-filter flex items-center p-2 rounded hover:bg-purple-800 transition" data-status="completed"> |
|
|
<i class="fas fa-check-circle mr-2"></i> Completed |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="status-filter flex items-center p-2 rounded hover:bg-purple-800 transition" data-status="overdue"> |
|
|
<i class="fas fa-exclamation-circle mr-2"></i> Overdue |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="absolute bottom-4 left-0 right-0 px-4"> |
|
|
<div class="bg-purple-800 p-3 rounded-lg hover:bg-purple-900 transition cursor-pointer"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Student Profile</p> |
|
|
<p class="text-xs text-purple-200">View your progress</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="ml-0 md:ml-64 transition-all duration-300"> |
|
|
|
|
|
<header class="gradient-bg text-white p-4 shadow-lg"> |
|
|
<div class="container mx-auto flex justify-between items-center"> |
|
|
<h1 class="text-2xl font-bold">Homework Dashboard</h1> |
|
|
<div class="relative"> |
|
|
<input type="text" placeholder="Search tasks..." class="bg-white bg-opacity-20 placeholder-white text-white rounded-full py-2 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-white w-48 md:w-64 transition-all duration-300"> |
|
|
<i class="fas fa-search absolute left-3 top-3 text-white"></i> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="container mx-auto p-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6"> |
|
|
<div class="bg-white rounded-lg shadow p-4 flex items-center hover:shadow-md transition"> |
|
|
<div class="bg-blue-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-tasks text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500">Total Tasks</p> |
|
|
<p class="text-2xl font-bold" id="totalTasks">0</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-4 flex items-center hover:shadow-md transition"> |
|
|
<div class="bg-green-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-check-circle text-green-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500">Completed</p> |
|
|
<p class="text-2xl font-bold" id="completedTasks">0</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-4 flex items-center hover:shadow-md transition"> |
|
|
<div class="bg-yellow-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-clock text-yellow-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500">Pending</p> |
|
|
<p class="text-2xl font-bold" id="pendingTasks">0</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-4 flex items-center hover:shadow-md transition"> |
|
|
<div class="bg-red-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-exclamation-circle text-red-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500">Overdue</p> |
|
|
<p class="text-2xl font-bold" id="overdueTasks">0</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-4 mb-6"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<h2 class="text-lg font-semibold">Your Progress</h2> |
|
|
<span class="text-sm font-medium text-purple-600" id="progressPercentage">0%</span> |
|
|
</div> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" id="progressFill" style="width: 0%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden mb-6"> |
|
|
<div class="p-4 border-b flex justify-between items-center"> |
|
|
<h2 class="text-xl font-semibold">Your Tasks</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button id="sortDateBtn" class="bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded text-sm flex items-center"> |
|
|
<i class="fas fa-calendar-alt mr-1"></i> Sort by Date |
|
|
</button> |
|
|
<button id="sortPriorityBtn" class="bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded text-sm flex items-center"> |
|
|
<i class="fas fa-flag mr-1"></i> Sort by Priority |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div id="taskList" class="divide-y"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden mb-6"> |
|
|
<div class="p-4 border-b"> |
|
|
<h2 class="text-xl font-semibold">DeepSeek AI Assistant</h2> |
|
|
<p class="text-gray-600">Get help with your homework using AI</p> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Subject</label> |
|
|
<select id="aiSubject" class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500"> |
|
|
<option value="math">Mathematics</option> |
|
|
<option value="science">Science</option> |
|
|
<option value="history">History</option> |
|
|
<option value="english">English</option> |
|
|
<option value="coding">Coding</option> |
|
|
<option value="other">Other</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Topic</label> |
|
|
<input type="text" id="aiTopic" placeholder="Enter topic or question" class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2">Your Question</label> |
|
|
<textarea id="aiQuestion" rows="3" class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Describe what you need help with..."></textarea> |
|
|
</div> |
|
|
<div class="flex justify-end"> |
|
|
<button id="askAIBtn" class="gradient-bg text-white py-2 px-6 rounded-lg hover:opacity-90 transition flex items-center"> |
|
|
<i class="fas fa-paper-plane mr-2"></i> Ask DeepSeek |
|
|
</button> |
|
|
</div> |
|
|
<div id="aiResponse" class="mt-4 p-4 bg-gray-50 rounded-lg hidden"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<h3 class="font-semibold">AI Response</h3> |
|
|
<button id="copyResponseBtn" class="text-gray-500 hover:text-purple-600"> |
|
|
<i class="fas fa-copy"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div id="aiResponseContent" class="markdown-content"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden"> |
|
|
<div class="p-4 border-b"> |
|
|
<h2 class="text-xl font-semibold">Coding Workspace</h2> |
|
|
<p class="text-gray-600">Practice coding and get AI assistance</p> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Language</label> |
|
|
<select id="codeLanguage" class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500"> |
|
|
<option value="javascript">JavaScript</option> |
|
|
<option value="python">Python</option> |
|
|
<option value="java">Java</option> |
|
|
<option value="csharp">C#</option> |
|
|
<option value="cpp">C++</option> |
|
|
<option value="html">HTML</option> |
|
|
<option value="css">CSS</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Theme</label> |
|
|
<select id="codeTheme" class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500"> |
|
|
<option value="light">Light</option> |
|
|
<option value="dark" selected>Dark</option> |
|
|
<option value="solarized">Solarized</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
<div class="code-editor mb-4"> |
|
|
<div class="flex justify-between items-center bg-gray-800 text-white p-2 rounded-t-lg"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500"></div> |
|
|
</div> |
|
|
<div id="fileNameDisplay" class="text-sm">script.js</div> |
|
|
</div> |
|
|
<textarea id="codeEditor" class="w-full h-64 p-4 text-white font-mono focus:outline-none" spellcheck="false">// Write your code here |
|
|
// You can get AI assistance by clicking the button below |
|
|
|
|
|
function greet(name) { |
|
|
return `Hello, ${name}!`; |
|
|
} |
|
|
|
|
|
console.log(greet("DeepSeek User"));</textarea> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<div> |
|
|
<button id="runCodeBtn" class="bg-green-600 text-white py-2 px-4 rounded-lg mr-2 hover:bg-green-700 transition flex items-center"> |
|
|
<i class="fas fa-play mr-2"></i> Run Code |
|
|
</button> |
|
|
<button id="debugCodeBtn" class="bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition flex items-center"> |
|
|
<i class="fas fa-bug mr-2"></i> Debug |
|
|
</button> |
|
|
</div> |
|
|
<button id="codeHelpBtn" class="gradient-bg text-white py-2 px-6 rounded-lg hover:opacity-90 transition flex items-center"> |
|
|
<i class="fas fa-robot mr-2"></i> Get AI Help |
|
|
</button> |
|
|
</div> |
|
|
<div id="codeOutput" class="mt-4 p-4 bg-gray-800 text-white rounded-lg font-mono hidden"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<h3 class="font-semibold">Output</h3> |
|
|
<button id="clearOutputBtn" class="text-gray-400 hover:text-white"> |
|
|
<i class="fas fa-trash-alt"></i> |
|
|
</button> |
|
|
</div> |
|
|
<pre id="outputContent"></pre> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="taskModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white rounded-lg shadow-xl w-full max-w-md"> |
|
|
<div class="p-4 border-b flex justify-between items-center"> |
|
|
<h3 class="text-lg font-semibold" id="modalTitle">Add New Task</h3> |
|
|
<button id="closeModalBtn" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2">Task Title</label> |
|
|
<input type="text" id="taskTitle" class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Enter task title"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2">Subject</label> |
|
|
<select id="taskSubject" class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500"> |
|
|
<option value="math">Mathematics</option> |
|
|
<option value="science">Science</option> |
|
|
<option value="history">History</option> |
|
|
<option value="english">English</option> |
|
|
<option value="coding">Coding</option> |
|
|
<option value="other">Other</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-4 mb-4"> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Due Date</label> |
|
|
<input type="date" id="taskDueDate" class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Priority</label> |
|
|
<select id="taskPriority" class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500"> |
|
|
<option value="low">Low</option> |
|
|
<option value="medium" selected>Medium</option> |
|
|
<option value="high">High</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2">Description</label> |
|
|
<textarea id="taskDescription" rows="3" class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Enter task details..."></textarea> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 border-t flex justify-end"> |
|
|
<button id="cancelTaskBtn" class="bg-gray-200 text-gray-800 py-2 px-4 rounded-lg mr-2 hover:bg-gray-300 transition"> |
|
|
Cancel |
|
|
</button> |
|
|
<button id="saveTaskBtn" class="gradient-bg text-white py-2 px-6 rounded-lg hover:opacity-90 transition"> |
|
|
Save Task |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fixed bottom-6 right-6 z-20"> |
|
|
<button id="quickAddBtn" class="gradient-bg text-white w-14 h-14 rounded-full flex items-center justify-center shadow-lg floating-btn pulse-animation"> |
|
|
<i class="fas fa-plus text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
let tasks = [ |
|
|
{ |
|
|
id: 1, |
|
|
title: "Math homework - Algebra", |
|
|
subject: "math", |
|
|
dueDate: "2023-06-15", |
|
|
priority: "high", |
|
|
description: "Complete exercises 1-20 on page 45", |
|
|
status: "pending", |
|
|
createdAt: new Date("2023-06-10") |
|
|
}, |
|
|
{ |
|
|
id: 2, |
|
|
title: "Science project research", |
|
|
subject: "science", |
|
|
dueDate: "2023-06-20", |
|
|
priority: "medium", |
|
|
description: "Research on renewable energy sources", |
|
|
status: "pending", |
|
|
createdAt: new Date("2023-06-05") |
|
|
}, |
|
|
{ |
|
|
id: 3, |
|
|
title: "History essay", |
|
|
subject: "history", |
|
|
dueDate: "2023-06-12", |
|
|
priority: "high", |
|
|
description: "Write 1000-word essay on World War II", |
|
|
status: "completed", |
|
|
createdAt: new Date("2023-05-30") |
|
|
}, |
|
|
{ |
|
|
id: 4, |
|
|
title: "English reading", |
|
|
subject: "english", |
|
|
dueDate: "2023-06-08", |
|
|
priority: "low", |
|
|
description: "Read chapters 5-7 of To Kill a Mockingbird", |
|
|
status: "overdue", |
|
|
createdAt: new Date("2023-05-25") |
|
|
}, |
|
|
{ |
|
|
id: 5, |
|
|
title: "JavaScript practice", |
|
|
subject: "coding", |
|
|
dueDate: "2023-06-18", |
|
|
priority: "medium", |
|
|
description: "Complete coding challenges on functions", |
|
|
status: "pending", |
|
|
createdAt: new Date("2023-06-01") |
|
|
} |
|
|
]; |
|
|
|
|
|
|
|
|
const taskList = document.getElementById('taskList'); |
|
|
const taskModal = document.getElementById('taskModal'); |
|
|
const newTaskBtn = document.getElementById('newTaskBtn'); |
|
|
const quickAddBtn = document.getElementById('quickAddBtn'); |
|
|
const closeModalBtn = document.getElementById('closeModalBtn'); |
|
|
const cancelTaskBtn = document.getElementById('cancelTaskBtn'); |
|
|
const saveTaskBtn = document.getElementById('saveTaskBtn'); |
|
|
const subjectFilters = document.querySelectorAll('.subject-filter'); |
|
|
const statusFilters = document.querySelectorAll('.status-filter'); |
|
|
const sortDateBtn = document.getElementById('sortDateBtn'); |
|
|
const sortPriorityBtn = document.getElementById('sortPriorityBtn'); |
|
|
const totalTasksEl = document.getElementById('totalTasks'); |
|
|
const completedTasksEl = document.getElementById('completedTasks'); |
|
|
const pendingTasksEl = document.getElementById('pendingTasks'); |
|
|
const overdueTasksEl = document.getElementById('overdueTasks'); |
|
|
const progressPercentage = document.getElementById('progressPercentage'); |
|
|
const progressFill = document.getElementById('progressFill'); |
|
|
const menuToggle = document.getElementById('menuToggle'); |
|
|
const sidebar = document.getElementById('sidebar'); |
|
|
const aiAssistBtn = document.getElementById('aiAssistBtn'); |
|
|
const askAIBtn = document.getElementById('askAIBtn'); |
|
|
const aiResponse = document.getElementById('aiResponse'); |
|
|
const aiResponseContent = document.getElementById('aiResponseContent'); |
|
|
const copyResponseBtn = document.getElementById('copyResponseBtn'); |
|
|
const runCodeBtn = document.getElementById('runCodeBtn'); |
|
|
const debugCodeBtn = document.getElementById('debugCodeBtn'); |
|
|
const codeHelpBtn = document.getElementById('codeHelpBtn'); |
|
|
const codeOutput = document.getElementById('codeOutput'); |
|
|
const outputContent = document.getElementById('outputContent'); |
|
|
const clearOutputBtn = document.getElementById('clearOutputBtn'); |
|
|
const codeEditor = document.getElementById('codeEditor'); |
|
|
const codeLanguage = document.getElementById('codeLanguage'); |
|
|
const fileNameDisplay = document.getElementById('fileNameDisplay'); |
|
|
|
|
|
|
|
|
let currentFilter = { subject: 'all', status: 'all' }; |
|
|
let currentSort = 'date'; |
|
|
|
|
|
|
|
|
function init() { |
|
|
renderTasks(); |
|
|
updateStats(); |
|
|
updateProgress(); |
|
|
setupEventListeners(); |
|
|
} |
|
|
|
|
|
|
|
|
function setupEventListeners() { |
|
|
|
|
|
newTaskBtn.addEventListener('click', openTaskModal); |
|
|
quickAddBtn.addEventListener('click', openTaskModal); |
|
|
closeModalBtn.addEventListener('click', closeTaskModal); |
|
|
cancelTaskBtn.addEventListener('click', closeTaskModal); |
|
|
saveTaskBtn.addEventListener('click', saveTask); |
|
|
|
|
|
|
|
|
subjectFilters.forEach(filter => { |
|
|
filter.addEventListener('click', (e) => { |
|
|
e.preventDefault(); |
|
|
currentFilter.subject = filter.dataset.subject; |
|
|
updateActiveFilters(); |
|
|
renderTasks(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
statusFilters.forEach(filter => { |
|
|
filter.addEventListener('click', (e) => { |
|
|
e.preventDefault(); |
|
|
currentFilter.status = filter.dataset.status; |
|
|
updateActiveFilters(); |
|
|
renderTasks(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
sortDateBtn.addEventListener('click', () => { |
|
|
currentSort = 'date'; |
|
|
updateActiveSort(); |
|
|
renderTasks(); |
|
|
}); |
|
|
|
|
|
sortPriorityBtn.addEventListener('click', () => { |
|
|
currentSort = 'priority'; |
|
|
updateActiveSort(); |
|
|
renderTasks(); |
|
|
}); |
|
|
|
|
|
|
|
|
menuToggle.addEventListener('click', toggleSidebar); |
|
|
|
|
|
|
|
|
aiAssistBtn.addEventListener('click', scrollToAI); |
|
|
askAIBtn.addEventListener('click', askAIQuestion); |
|
|
copyResponseBtn.addEventListener('click', copyAIResponse); |
|
|
|
|
|
|
|
|
runCodeBtn.addEventListener('click', runCode); |
|
|
debugCodeBtn.addEventListener('click', debugCode); |
|
|
codeHelpBtn.addEventListener('click', getCodeHelp); |
|
|
clearOutputBtn.addEventListener('click', clearOutput); |
|
|
codeLanguage.addEventListener('change', updateFileName); |
|
|
|
|
|
|
|
|
updateFileName(); |
|
|
} |
|
|
|
|
|
|
|
|
function renderTasks() { |
|
|
|
|
|
let filteredTasks = tasks.filter(task => { |
|
|
let subjectMatch = currentFilter.subject === 'all' || task.subject === currentFilter.subject; |
|
|
let statusMatch = currentFilter.status === 'all' || task.status === currentFilter.status; |
|
|
return subjectMatch && statusMatch; |
|
|
}); |
|
|
|
|
|
|
|
|
if (currentSort === 'date') { |
|
|
filteredTasks.sort((a, b) => new Date(a.dueDate) - new Date(b.dueDate)); |
|
|
} else { |
|
|
const priorityOrder = { high: 3, medium: 2, low: 1 }; |
|
|
filteredTasks.sort((a, b) => priorityOrder[b.priority] - priorityOrder[a.priority]); |
|
|
} |
|
|
|
|
|
|
|
|
taskList.innerHTML = ''; |
|
|
|
|
|
|
|
|
if (filteredTasks.length === 0) { |
|
|
taskList.innerHTML = ` |
|
|
<div class="p-8 text-center text-gray-500"> |
|
|
<i class="fas fa-tasks text-4xl mb-2"></i> |
|
|
<p>No tasks found matching your criteria</p> |
|
|
</div> |
|
|
`; |
|
|
return; |
|
|
} |
|
|
|
|
|
filteredTasks.forEach(task => { |
|
|
const taskElement = createTaskElement(task); |
|
|
taskList.appendChild(taskElement); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function createTaskElement(task) { |
|
|
const taskElement = document.createElement('div'); |
|
|
taskElement.className = `task-item p-4 hover:bg-gray-50 transition cursor-pointer task-priority-${task.priority}`; |
|
|
taskElement.dataset.id = task.id; |
|
|
|
|
|
|
|
|
let statusColor = ''; |
|
|
if (task.status === 'completed') { |
|
|
statusColor = 'bg-green-100 text-green-800'; |
|
|
} else if (task.status === 'overdue') { |
|
|
statusColor = 'bg-red-100 text-red-800'; |
|
|
} else { |
|
|
statusColor = 'bg-yellow-100 text-yellow-800'; |
|
|
} |
|
|
|
|
|
|
|
|
let priorityIcon = ''; |
|
|
if (task.priority === 'high') { |
|
|
priorityIcon = '<i class="fas fa-flag text-red-500 mr-1"></i>'; |
|
|
} else if (task.priority === 'medium') { |
|
|
priorityIcon = '<i class="fas fa-flag text-yellow-500 mr-1"></i>'; |
|
|
} else { |
|
|
priorityIcon = '<i class="fas fa-flag text-gray-500 mr-1"></i>'; |
|
|
} |
|
|
|
|
|
|
|
|
let subjectIcon = ''; |
|
|
switch(task.subject) { |
|
|
case 'math': |
|
|
subjectIcon = '<i class="fas fa-square-root-alt text-purple-600"></i>'; |
|
|
break; |
|
|
case 'science': |
|
|
subjectIcon = '<i class="fas fa-flask text-blue-600"></i>'; |
|
|
break; |
|
|
case 'history': |
|
|
subjectIcon = '<i class="fas fa-landmark text-amber-600"></i>'; |
|
|
break; |
|
|
case 'english': |
|
|
subjectIcon = '<i class="fas fa-book text-green-600"></i>'; |
|
|
break; |
|
|
case 'coding': |
|
|
subjectIcon = '<i class="fas fa-code text-indigo-600"></i>'; |
|
|
break; |
|
|
default: |
|
|
subjectIcon = '<i class="fas fa-ellipsis-h text-gray-600"></i>'; |
|
|
} |
|
|
|
|
|
|
|
|
const dueDate = new Date(task.dueDate); |
|
|
const today = new Date(); |
|
|
today.setHours(0, 0, 0, 0); |
|
|
const tomorrow = new Date(today); |
|
|
tomorrow.setDate(tomorrow.getDate() + 1); |
|
|
|
|
|
let dateDisplay = ''; |
|
|
if (dueDate.toDateString() === today.toDateString()) { |
|
|
dateDisplay = 'Today'; |
|
|
} else if (dueDate.toDateString() === tomorrow.toDateString()) { |
|
|
dateDisplay = 'Tomorrow'; |
|
|
} else { |
|
|
dateDisplay = dueDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }); |
|
|
} |
|
|
|
|
|
|
|
|
const isOverdue = task.status !== 'completed' && dueDate < today; |
|
|
|
|
|
taskElement.innerHTML = ` |
|
|
<div class="flex justify-between items-start"> |
|
|
<div class="flex items-start"> |
|
|
<div class="mr-3 mt-1"> |
|
|
<button class="complete-btn w-6 h-6 rounded-full border-2 ${task.status === 'completed' ? 'bg-green-500 border-green-500' : 'border-gray-300'} flex items-center justify-center"> |
|
|
${task.status === 'completed' ? '<i class="fas fa-check text-white text-xs"></i>' : ''} |
|
|
</button> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium ${task.status === 'completed' ? 'line-through text-gray-500' : ''}">${priorityIcon} ${task.title}</h3> |
|
|
<p class="text-sm text-gray-600 mt-1">${task.description}</p> |
|
|
<div class="flex items-center mt-2 space-x-3"> |
|
|
<span class="text-xs px-2 py-1 rounded-full ${statusColor}">${task.status}</span> |
|
|
<span class="text-xs text-gray-500 flex items-center">${subjectIcon} <span class="ml-1">${task.subject.charAt(0).toUpperCase() + task.subject.slice(1)}</span></span> |
|
|
<span class="text-xs text-gray-500">Due: ${dateDisplay} ${isOverdue ? '⚠️' : ''}</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="edit-btn p-1 text-gray-500 hover:text-purple-600"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
<button class="delete-btn p-1 text-gray-500 hover:text-red-600"> |
|
|
<i class="fas fa-trash-alt"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
|
|
|
const completeBtn = taskElement.querySelector('.complete-btn'); |
|
|
const editBtn = taskElement.querySelector('.edit-btn'); |
|
|
const deleteBtn = taskElement.querySelector('.delete-btn'); |
|
|
|
|
|
completeBtn.addEventListener('click', (e) => { |
|
|
e.stopPropagation(); |
|
|
toggleTaskComplete(task.id); |
|
|
}); |
|
|
|
|
|
editBtn.addEventListener('click', (e) => { |
|
|
e.stopPropagation(); |
|
|
editTask(task.id); |
|
|
}); |
|
|
|
|
|
deleteBtn.addEventListener('click', (e) => { |
|
|
e.stopPropagation(); |
|
|
deleteTask(task.id); |
|
|
}); |
|
|
|
|
|
taskElement.addEventListener('click', () => { |
|
|
viewTaskDetails(task.id); |
|
|
}); |
|
|
|
|
|
return taskElement; |
|
|
} |
|
|
|
|
|
|
|
|
function updateStats() { |
|
|
totalTasksEl.textContent = tasks.length; |
|
|
completedTasksEl.textContent = tasks.filter(task => task.status === 'completed').length; |
|
|
pendingTasksEl.textContent = tasks.filter(task => task.status === 'pending').length; |
|
|
|
|
|
|
|
|
const today = new Date(); |
|
|
today.setHours(0, 0, 0, 0); |
|
|
overdueTasksEl.textContent = tasks.filter(task => { |
|
|
return task.status !== 'completed' && new Date(task.dueDate) < today; |
|
|
}).length; |
|
|
} |
|
|
|
|
|
|
|
|
function updateProgress() { |
|
|
const totalTasks = tasks.length; |
|
|
const completedTasks = tasks.filter(task => task.status === 'completed').length; |
|
|
const percentage = totalTasks > 0 ? Math.round((completedTasks / totalTasks) * 100) : 0; |
|
|
|
|
|
progressPercentage.textContent = `${percentage}%`; |
|
|
progressFill.style.width = `${percentage}%`; |
|
|
} |
|
|
|
|
|
|
|
|
function updateActiveFilters() { |
|
|
|
|
|
subjectFilters.forEach(filter => { |
|
|
if (filter.dataset.subject === currentFilter.subject) { |
|
|
filter.classList.add('bg-purple-800'); |
|
|
} else { |
|
|
filter.classList.remove('bg-purple-800'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
statusFilters.forEach(filter => { |
|
|
if (filter.dataset.status === currentFilter.status) { |
|
|
filter.classList.add('bg-purple-800'); |
|
|
} else { |
|
|
filter.classList.remove('bg-purple-800'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function updateActiveSort() { |
|
|
if (currentSort === 'date') { |
|
|
sortDateBtn.classList.add('bg-purple-100', 'text-purple-800'); |
|
|
sortPriorityBtn.classList.remove('bg-purple-100', 'text-purple-800'); |
|
|
} else { |
|
|
sortPriorityBtn.classList.add('bg-purple-100', 'text-purple-800'); |
|
|
sortDateBtn.classList.remove('bg-purple-100', 'text-purple-800'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function openTaskModal() { |
|
|
document.getElementById('modalTitle').textContent = 'Add New Task'; |
|
|
document.getElementById('taskTitle').value = ''; |
|
|
document.getElementById('taskSubject').value = 'math'; |
|
|
|
|
|
|
|
|
const tomorrow = new Date(); |
|
|
tomorrow.setDate(tomorrow.getDate() + 1); |
|
|
const tomorrowStr = tomorrow.toISOString().split('T')[0]; |
|
|
document.getElementById('taskDueDate').value = tomorrowStr; |
|
|
|
|
|
document.getElementById('taskPriority').value = 'medium'; |
|
|
document.getElementById('taskDescription').value = ''; |
|
|
document.getElementById('saveTaskBtn').dataset.mode = 'add'; |
|
|
taskModal.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function closeTaskModal() { |
|
|
taskModal.classList.add('hidden'); |
|
|
} |
|
|
|
|
|
function saveTask() { |
|
|
const title = document.getElementById('taskTitle').value.trim(); |
|
|
const subject = document.getElementById('taskSubject').value; |
|
|
const dueDate = document.getElementById('taskDueDate').value; |
|
|
const priority = document.getElementById('taskPriority').value; |
|
|
const description = document.getElementById('taskDescription').value.trim(); |
|
|
const mode = document.getElementById('saveTaskBtn').dataset.mode; |
|
|
|
|
|
|
|
|
if (!title) { |
|
|
alert('Please enter a task title'); |
|
|
return; |
|
|
} |
|
|
|
|
|
if (!dueDate) { |
|
|
alert('Please select a due date'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
if (mode === 'add') { |
|
|
const newTask = { |
|
|
id: tasks.length > 0 ? Math.max(...tasks.map(t => t.id)) + 1 : 1, |
|
|
title, |
|
|
subject, |
|
|
dueDate, |
|
|
priority, |
|
|
description, |
|
|
status: 'pending', |
|
|
createdAt: new Date() |
|
|
}; |
|
|
tasks.push(newTask); |
|
|
} else { |
|
|
const taskId = parseInt(document.getElementById('saveTaskBtn').dataset.taskId); |
|
|
const taskIndex = tasks.findIndex(t => t.id === taskId); |
|
|
if (taskIndex !== -1) { |
|
|
tasks[taskIndex] = { |
|
|
...tasks[taskIndex], |
|
|
title, |
|
|
subject, |
|
|
dueDate, |
|
|
priority, |
|
|
description |
|
|
}; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
renderTasks(); |
|
|
updateStats(); |
|
|
updateProgress(); |
|
|
closeTaskModal(); |
|
|
} |
|
|
|
|
|
|
|
|
function toggleTaskComplete(taskId) { |
|
|
const taskIndex = tasks.findIndex(t => t.id === taskId); |
|
|
if (taskIndex !== -1) { |
|
|
tasks[taskIndex].status = tasks[taskIndex].status === 'completed' ? 'pending' : 'completed'; |
|
|
renderTasks(); |
|
|
updateStats(); |
|
|
updateProgress(); |
|
|
} |
|
|
} |
|
|
|
|
|
function editTask(taskId) { |
|
|
const task = tasks.find(t => t.id === taskId); |
|
|
if (task) { |
|
|
document.getElementById('modalTitle').textContent = 'Edit Task'; |
|
|
document.getElementById('taskTitle').value = task.title; |
|
|
document.getElementById('taskSubject').value = task.subject; |
|
|
document.getElementById('taskDueDate').value = task.dueDate; |
|
|
document.getElementById('taskPriority').value = task.priority; |
|
|
document.getElementById('taskDescription').value = task.description; |
|
|
document.getElementById('saveTaskBtn').dataset.mode = 'edit'; |
|
|
document.getElementById('saveTaskBtn').dataset.taskId = taskId; |
|
|
taskModal.classList.remove('hidden'); |
|
|
} |
|
|
} |
|
|
|
|
|
function deleteTask(taskId) { |
|
|
if (confirm('Are you sure you want to delete this task?')) { |
|
|
tasks = tasks.filter(t => t.id !== taskId); |
|
|
renderTasks(); |
|
|
updateStats(); |
|
|
updateProgress(); |
|
|
} |
|
|
} |
|
|
|
|
|
function viewTaskDetails(taskId) { |
|
|
const task = tasks.find(t => t.id === taskId); |
|
|
if (task) { |
|
|
|
|
|
alert(`Task Details:\n\nTitle: ${task.title}\nSubject: ${task.subject}\nDue Date: ${task.dueDate}\nPriority: ${task.priority}\nStatus: ${task.status}\nDescription: ${task.description}`); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function toggleSidebar() { |
|
|
sidebar.classList.toggle('open'); |
|
|
} |
|
|
|
|
|
|
|
|
function scrollToAI() { |
|
|
document.querySelector('.gradient-bg').scrollIntoView({ behavior: 'smooth' }); |
|
|
} |
|
|
|
|
|
function askAIQuestion() { |
|
|
const subject = document.getElementById('aiSubject').value; |
|
|
const topic = document.getElementById('aiTopic').value.trim(); |
|
|
const question = document.getElementById('aiQuestion').value.trim(); |
|
|
|
|
|
if (!question) { |
|
|
alert('Please enter your question'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
askAIBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Thinking...'; |
|
|
askAIBtn.disabled = true; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
let response = generateAIResponse(subject, topic, question); |
|
|
|
|
|
|
|
|
aiResponseContent.innerHTML = response; |
|
|
aiResponse.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
askAIBtn.innerHTML = '<i class="fas fa-paper-plane mr-2"></i> Ask DeepSeek'; |
|
|
askAIBtn.disabled = false; |
|
|
|
|
|
|
|
|
aiResponse.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); |
|
|
}, 1500); |
|
|
} |
|
|
|
|
|
function generateAIResponse(subject, topic, question) { |
|
|
const today = new Date(); |
|
|
const dateStr = today.toLocaleDateString(); |
|
|
|
|
|
|
|
|
let response = ` |
|
|
<h2>DeepSeek AI Response</h2> |
|
|
<p><strong>Subject:</strong> ${subject.charAt(0).toUpperCase() + subject.slice(1)}</p> |
|
|
${topic ? `<p><strong>Topic:</strong> ${topic}</p>` : ''} |
|
|
<p><strong>Date:</strong> ${dateStr}</p> |
|
|
<hr class="my-2 border-gray-300"> |
|
|
`; |
|
|
|
|
|
|
|
|
switch(subject) { |
|
|
case 'math': |
|
|
response += ` |
|
|
<p>Based on your question about "${question}", here's a mathematical explanation:</p> |
|
|
<p>Let's consider the problem step by step:</p> |
|
|
<ol class="list-decimal pl-5"> |
|
|
<li>Identify the variables and constants</li> |
|
|
<li>Apply the appropriate mathematical principles</li> |
|
|
<li>Solve the equation systematically</li> |
|
|
<li>Verify your solution</li> |
|
|
</ol> |
|
|
<p>For example, if you're working with algebra:</p> |
|
|
<pre>Let x be the unknown value\n\nGiven equation: 2x + 5 = 15\n\nStep 1: Subtract 5 from both sides\n2x = 10\n\nStep 2: Divide both sides by 2\nx = 5</pre> |
|
|
<p>Would you like me to elaborate on any specific part?</p> |
|
|
`; |
|
|
break; |
|
|
|
|
|
case 'science': |
|
|
response += ` |
|
|
<p>Your science question about "${question}" is interesting. Here's a scientific perspective:</p> |
|
|
<p>The scientific method would approach this as follows:</p> |
|
|
<ul class="list-disc pl-5"> |
|
|
<li>Observation: Identify the phenomenon</li> |
|
|
<li>Hypothesis: Formulate a testable explanation</li> |
|
|
<li>Experiment: Design a way to test the hypothesis</li> |
|
|
<li>Analysis: Interpret the results</li> |
|
|
<li>Conclusion: Determine if the hypothesis is supported</li> |
|
|
</ul> |
|
|
<p>For example, in a biology context:</p> |
|
|
<p>If you're studying plant growth, you might hypothesize that plants grow taller with more sunlight. You could test this by growing identical plants with different amounts of light and measuring their growth over time.</p> |
|
|
`; |
|
|
break; |
|
|
|
|
|
case 'history': |
|
|
response += ` |
|
|
<p>Regarding your history question about "${question}", here's some historical context:</p> |
|
|
<p>Historical analysis involves:</p> |
|
|
<ul class="list-disc pl-5"> |
|
|
<li>Examining primary sources (documents, artifacts from the time)</li> |
|
|
<li>Considering secondary sources (historians' interpretations)</li> |
|
|
<li>Understanding the historical context</li> |
|
|
<li>Recognizing different perspectives</li> |
|
|
</ul> |
|
|
<p>For example, when studying World War II:</p> |
|
|
<p>You might analyze the Treaty of Versailles as a contributing factor to the war, examining both the terms of the treaty and how different nations reacted to it. The economic pressures on Germany after WWI created conditions that Hitler was able to exploit.</p> |
|
|
`; |
|
|
break; |
|
|
|
|
|
case 'english': |
|
|
response += ` |
|
|
<p>For your English question about "${question}", here's a literary analysis approach:</p> |
|
|
<p>When analyzing literature, consider:</p> |
|
|
<ul class="list-disc pl-5"> |
|
|
<li>Theme: The central ideas or messages</li> |
|
|
<li>Characterization: How characters are developed</li> |
|
|
<li>Plot structure: The organization of events</li> |
|
|
<li>Literary devices: Metaphors, symbolism, etc.</li> |
|
|
<li>Historical/cultural context</li> |
|
|
</ul> |
|
|
<p>For example, in "To Kill a Mockingbird":</p> |
|
|
<p>The theme of racial injustice is explored through the trial of Tom Robinson. Scout's coming-of-age story parallels the moral development of the community. The mockingbird symbolizes innocence, as seen in characters like Tom Robinson and Boo Radley.</p> |
|
|
`; |
|
|
break; |
|
|
|
|
|
case 'coding': |
|
|
response += ` |
|
|
<p>Your coding question about "${question}" is a great opportunity to learn. Here's a technical approach:</p> |
|
|
<p>When solving coding problems:</p> |
|
|
<ol class="list-decimal pl-5"> |
|
|
<li>Understand the problem requirements</li> |
|
|
<li>Break it down into smaller steps</li> |
|
|
<li>Write pseudocode to plan your solution</li> |
|
|
<li>Implement the solution in code</li> |
|
|
<li>Test with different inputs</li> |
|
|
<li>Debug and refine</li> |
|
|
</ol> |
|
|
<p>For example, if you're working with JavaScript functions:</p> |
|
|
<pre>// Problem: Write a function that reverses a string\n\nfunction reverseString(str) {\n // Step 1: Split into array of characters\n const chars = str.split('');\n \n // Step 2: Reverse the array\n const reversedChars = chars.reverse();\n \n // Step 3: Join back into string\n return reversedChars.join('');\n}\n\n// Test cases\nconsole.log(reverseString('hello')); // 'olleh'\nconsole.log(reverseString('DeepSeek')); // 'keeSpeed'</pre> |
|
|
<p>Would you like me to explain any part in more detail?</p> |
|
|
`; |
|
|
break; |
|
|
|
|
|
default: |
|
|
response += ` |
|
|
<p>Thank you for your question: "${question}". Here's how I can help:</p> |
|
|
<p>1. Clarify the key concepts involved</p> |
|
|
<p>2. Provide relevant examples</p> |
|
|
<p>3. Suggest resources for further learning</p> |
|
|
<p>4. Help break down complex ideas</p> |
|
|
<p>Could you provide more details about what specifically you'd like to know?</p> |
|
|
`; |
|
|
} |
|
|
|
|
|
return response; |
|
|
} |
|
|
|
|
|
function copyAIResponse() { |
|
|
const range = document.createRange(); |
|
|
range.selectNode(aiResponseContent); |
|
|
window.getSelection().removeAllRanges(); |
|
|
window.getSelection().addRange(range); |
|
|
document.execCommand('copy'); |
|
|
window.getSelection().removeAllRanges(); |
|
|
|
|
|
|
|
|
const originalText = copyResponseBtn.innerHTML; |
|
|
copyResponseBtn.innerHTML = '<i class="fas fa-check"></i>'; |
|
|
setTimeout(() => { |
|
|
copyResponseBtn.innerHTML = originalText; |
|
|
}, 2000); |
|
|
} |
|
|
|
|
|
|
|
|
function runCode() { |
|
|
const code = codeEditor.value; |
|
|
const language = codeLanguage.value; |
|
|
|
|
|
|
|
|
runCodeBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Running...'; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
let output = ''; |
|
|
|
|
|
if (language === 'javascript') { |
|
|
try { |
|
|
|
|
|
output = '// Mock JavaScript output\nHello, DeepSeek User!\nundefined'; |
|
|
} catch (e) { |
|
|
output = `Error: ${e.message}`; |
|
|
} |
|
|
} else if (language === 'python') { |
|
|
output = '# Mock Python output\nHello, DeepSeek User!'; |
|
|
} else if (language === 'java') { |
|
|
output = '// Mock Java output\nHello, DeepSeek User!'; |
|
|
} else { |
|
|
output = `// ${language} code executed\n(Simulated output - actual execution would require a ${language} environment)`; |
|
|
} |
|
|
|
|
|
outputContent.textContent = output; |
|
|
codeOutput.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
runCodeBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Run Code'; |
|
|
|
|
|
|
|
|
codeOutput.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); |
|
|
}, 1000); |
|
|
} |
|
|
|
|
|
function debugCode() { |
|
|
const code = codeEditor.value; |
|
|
const language = codeLanguage.value; |
|
|
|
|
|
|
|
|
debugCodeBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Analyzing...'; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
let output = `DeepSeek Debugger - ${language} code analysis:\n\n`; |
|
|
|
|
|
|
|
|
if (code.includes('console.log') || code.includes('print') || code.includes('System.out.println')) { |
|
|
output += '✅ Found debug statements - good for troubleshooting\n'; |
|
|
} else { |
|
|
output += '⚠️ No debug statements found - consider adding some for troubleshooting\n'; |
|
|
} |
|
|
|
|
|
if (code.includes('for') || code.includes('while')) { |
|
|
output += '✅ Found loops - check for proper termination conditions\n'; |
|
|
} |
|
|
|
|
|
if (code.includes('if') || code.includes('else')) { |
|
|
output += '✅ Found conditional logic - check all branches\n'; |
|
|
} |
|
|
|
|
|
if (code.includes('function') || code.includes('def') || code.includes('void')) { |
|
|
output += '✅ Found functions/methods - check parameters and return values\n'; |
|
|
} |
|
|
|
|
|
output += '\nPotential issues to check:\n'; |
|
|
output += '1. Variable naming consistency\n'; |
|
|
output += '2. Proper indentation\n'; |
|
|
output += '3. Edge case handling\n'; |
|
|
output += '4. Error handling\n'; |
|
|
|
|
|
outputContent.textContent = output; |
|
|
codeOutput.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
debugCodeBtn.innerHTML = '<i class="fas fa-bug mr-2"></i> Debug'; |
|
|
|
|
|
|
|
|
codeOutput.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); |
|
|
}, 1500); |
|
|
} |
|
|
|
|
|
function getCodeHelp() { |
|
|
const code = codeEditor.value; |
|
|
const language = codeLanguage.value; |
|
|
|
|
|
|
|
|
codeHelpBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Thinking...'; |
|
|
codeHelpBtn.disabled = true; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
let response = `# DeepSeek Code Assistant - ${language} Help\n\n`; |
|
|
|
|
|
response += 'Here are some suggestions for your code:\n\n'; |
|
|
|
|
|
|
|
|
if (code.length < 50) { |
|
|
response += '⚠️ Your code seems quite short. Are you working on a specific problem? I can help you break it down.\n\n'; |
|
|
} else { |
|
|
response += '✅ Your code has good length - let me analyze the structure.\n\n'; |
|
|
} |
|
|
|
|
|
|
|
|
if (language === 'javascript') { |
|
|
response += 'JavaScript Tips:\n'; |
|
|
response += '- Consider using modern ES6 features like arrow functions and template literals\n'; |
|
|
response += '- Remember to handle asynchronous operations properly with async/await\n'; |
|
|
response += '- Use console.log() for debugging but remove it in production code\n\n'; |
|
|
|
|
|
response += 'Example improvement:\n'; |
|
|
response += '```javascript\n'; |
|
|
response += '// Instead of:\n'; |
|
|
response += 'function greet(name) {\n'; |
|
|
response += ' return "Hello, " + name + "!";\n'; |
|
|
response += '}\n\n'; |
|
|
response += '// Consider:\n'; |
|
|
response += 'const greet = name => `Hello, ${name}!`;\n'; |
|
|
response += '```\n'; |
|
|
} else if (language === 'python') { |
|
|
response += 'Python Tips:\n'; |
|
|
response += '- Follow PEP 8 style guidelines for consistent formatting\n'; |
|
|
response += '- Use list comprehensions for concise iterations\n'; |
|
|
response += '- Consider type hints for better code documentation\n\n'; |
|
|
|
|
|
response += 'Example improvement:\n'; |
|
|
response += '```python\n'; |
|
|
response += '# Instead of:\n'; |
|
|
response += 'result = []\n'; |
|
|
response += 'for x in range(10):\n'; |
|
|
response += ' result.append(x*2)\n\n'; |
|
|
response += '# Consider:\n'; |
|
|
response += 'result = [x*2 for x in range(10)]\n'; |
|
|
response += '```\n'; |
|
|
} |
|
|
|
|
|
response += '\nWould you like me to explain any specific part in more detail?'; |
|
|
|
|
|
aiResponseContent.innerHTML = response; |
|
|
aiResponse.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
codeHelpBtn.innerHTML = '<i class="fas fa-robot mr-2"></i> Get AI Help'; |
|
|
codeHelpBtn.disabled = false; |
|
|
|
|
|
|
|
|
aiResponse.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); |
|
|
}, 2000); |
|
|
} |
|
|
|
|
|
function clearOutput() { |
|
|
outputContent.textContent = ''; |
|
|
codeOutput.classList.add('hidden'); |
|
|
} |
|
|
|
|
|
function updateFileName() { |
|
|
const language = codeLanguage.value; |
|
|
let extension = ''; |
|
|
|
|
|
switch(language) { |
|
|
case 'javascript': extension = 'js'; break; |
|
|
case 'python': extension = 'py'; break; |
|
|
case 'java': extension = 'java'; break; |
|
|
case 'csharp': extension = 'cs'; break; |
|
|
case 'cpp': extension = 'cpp'; break; |
|
|
case 'html': extension = 'html'; break; |
|
|
case 'css': extension = 'css'; break; |
|
|
default: extension = 'txt'; |
|
|
} |
|
|
|
|
|
fileNameDisplay.textContent = `script.${extension}`; |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', init); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=JazerAI/like-him" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
