Skip to content

Improve index.html #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Yug-the-pirate-king wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Improve index.html #11

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
314 changes: 141 additions & 173 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,10 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Semester 3 Study Planner">
<meta name="referrer" content="strict-origin-when-cross-origin">
<title>Semester 3 Study Planner</title>
<link rel="stylesheet" href="style.css">

</head>
<body>
<div class="container">
Expand All @@ -14,42 +15,17 @@ <h1>Semester 3 Study Planner</h1>
<p class="subtitle">Made By Yug Shah 🦋 with love</p>
</header>

<nav class="nav-tabs">
<button class="nav-tab active" data-tab="study-plan">Study Plan Generator</button>
<button class="nav-tab" data-tab="folder-manager">Folder Manager</button>
<button class="nav-tab" data-tab="cgpa-calculator">CGPA Calculator</button>
<button class="nav-tab" data-tab="performance-modes">Performance Modes</button>
</nav>
<nav class="nav-tabs" id="navTabs"></nav>

<!-- Section 1: Study Plan Generator -->
<section id="study-plan" class="tab-content active">
<div class="card">
<div class="card__header">
<h2>Smart Study Plan Generator</h2>
<p>Generate personalized study schedules based on your preferred intensity</p>
</div>
<div class="card__body">
<div class="form-row">
<div class="form-group">
<label class="form-label">Study Mode</label>
<select id="studyMode" class="form-control">
<option value="easy">Easy Mode (1 chapter/day)</option>
<option value="normal" selected>Normal Mode (2 chapters/day)</option>
<option value="intense">Intense Mode (7-day crash)</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Semester Start Date</label>
<input type="date" id="startDate" class="form-control">
</div>
<div class="form-group">
<label class="form-label">End Semester Exam Date</label>
<input type="date" id="examDate" class="form-control">
</div>
</div>

<button id="generatePlan" class="btn btn--primary">Generate Study Plan</button>

<div class="form-row" id="studyPlanFormRow"></div>
<button id="generatePlan" class="btn btn--primary" type="button">Generate Study Plan</button>
<div id="studyPlanOutput" class="study-plan-output hidden">
<h3>Your Study Schedule</h3>
<div class="progress-summary">
Expand All @@ -64,7 +40,6 @@ <h3>Your Study Schedule</h3>
</div>
</section>

<!-- Section 2: Folder Manager -->
<section id="folder-manager" class="tab-content">
<div class="card">
<div class="card__header">
Expand All @@ -74,18 +49,14 @@ <h2>Study Material Organizer</h2>
</div>
<div class="card__body">
<div class="folder-controls">
<input type="text" id="searchMaterials" class="form-control" placeholder="Search materials...">
<button id="addMaterial" class="btn btn--secondary">Add Material</button>
</div>

<div class="folder-structure" id="folderStructure">
<!-- Folder tree will be generated by JavaScript -->
<input type="text" id="searchMaterials" class="form-control" placeholder="Search materials..." maxlength="120" autocomplete="off">
<button id="addMaterial" class="btn btn--secondary" type="button">Add Material</button>
</div>
<div class="folder-structure" id="folderStructure"></div>
</div>
</div>
</section>

<!-- Section 3: CGPA Calculator -->
<section id="cgpa-calculator" class="tab-content">
<div class="card">
<div class="card__header">
Expand All @@ -94,37 +65,11 @@ <h2>CGPA Target Calculator</h2>
</div>
<div class="card__body">
<div class="subject-selector">
<label class="form-label">Select Subject</label>
<select id="subjectSelect" class="form-control">
<!-- Options will be populated by JavaScript -->
</select>
<label class="form-label" for="subjectSelect">Select Subject</label>
<select id="subjectSelect" class="form-control" autocomplete="off"></select>
</div>

<div class="marks-input-grid">
<div class="form-group">
<label class="form-label">Class Test 1 (10 marks)</label>
<input type="number" id="ct1" class="form-control" max="10" min="0">
</div>
<div class="form-group">
<label class="form-label">Class Test 2 (10 marks)</label>
<input type="number" id="ct2" class="form-control" max="10" min="0">
</div>
<div class="form-group">
<label class="form-label">Assignment (10 marks)</label>
<input type="number" id="assignment" class="form-control" max="10" min="0">
</div>
<div class="form-group">
<label class="form-label">Mid Semester (20 marks)</label>
<input type="number" id="midSem" class="form-control" max="20" min="0">
</div>
<div class="form-group">
<label class="form-label">End Semester (60 marks)</label>
<input type="number" id="endSem" class="form-control" max="60" min="0">
</div>
</div>

<button id="calculateCGPA" class="btn btn--primary">Calculate CGPA</button>

<div class="marks-input-grid" id="marksInputGrid"></div>
<button id="calculateCGPA" class="btn btn--primary" type="button">Calculate CGPA</button>
<div id="cgpaResults" class="cgpa-results hidden">
<div class="results-grid">
<div class="result-card">
Expand All @@ -149,76 +94,14 @@ <h4>Overall CGPA</h4>
</div>
</section>

<!-- Section 4: Performance Modes -->
<section id="performance-modes" class="tab-content">
<div class="card">
<div class="card__header">
<h2>Performance Modes Comparison</h2>
<p>Compare different study approaches and select your preferred method</p>
</div>
<div class="card__body">
<div class="modes-grid">
<div class="mode-card" data-mode="easy">
<h3>Easy Mode</h3>
<div class="mode-stats">
<div class="stat">
<span class="stat-label">Chapters per day:</span>
<span class="stat-value">1</span>
</div>
<div class="stat">
<span class="stat-label">Study duration:</span>
<span class="stat-value" id="easyDuration">- days</span>
</div>
<div class="stat">
<span class="stat-label">Daily workload:</span>
<span class="stat-value">Light</span>
</div>
</div>
<p class="mode-description">Relaxed pace with plenty of time for revision</p>
<button class="btn btn--outline mode-select" data-mode="easy">Select Easy Mode</button>
</div>

<div class="mode-card" data-mode="normal">
<h3>Normal Mode</h3>
<div class="mode-stats">
<div class="stat">
<span class="stat-label">Chapters per day:</span>
<span class="stat-value">2</span>
</div>
<div class="stat">
<span class="stat-label">Study duration:</span>
<span class="stat-value" id="normalDuration">- days</span>
</div>
<div class="stat">
<span class="stat-label">Daily workload:</span>
<span class="stat-value">Moderate</span>
</div>
</div>
<p class="mode-description">Balanced approach with steady progress</p>
<button class="btn btn--outline mode-select" data-mode="normal">Select Normal Mode</button>
</div>

<div class="mode-card" data-mode="intense">
<h3>Intense Mode</h3>
<div class="mode-stats">
<div class="stat">
<span class="stat-label">Chapters per day:</span>
<span class="stat-value" id="intenseChapters">4+</span>
</div>
<div class="stat">
<span class="stat-label">Study duration:</span>
<span class="stat-value">7 days</span>
</div>
<div class="stat">
<span class="stat-label">Daily workload:</span>
<span class="stat-value">Heavy</span>
</div>
</div>
<p class="mode-description">Last-minute preparation with high intensity</p>
<button class="btn btn--outline mode-select" data-mode="intense">Select Intense Mode</button>
</div>
</div>

<div class="modes-grid" id="modesGrid"></div>
<div id="selectedModeDetails" class="selected-mode-details hidden">
<h3>Selected Mode Details</h3>
<div id="modeBreakdown" class="mode-breakdown"></div>
Expand All @@ -228,48 +111,133 @@ <h3>Selected Mode Details</h3>
</section>
</div>

<!-- Add Material Modal -->
<!-- <div id="addMaterialModal" class="modal hidden">
<div class="modal-content">
<div class="modal-header">
<h3>Add Study Material</h3>
<button class="modal-close">&times;</button>
</div>
<div class="modal-body">
<div class="form-group">
<label class="form-label">Subject</label>
<select id="materialSubject" class="form-control">
<!-- Options populated by JS -->
</select>
</div>
<div class="form-group">
<label class="form-label">Chapter</label>
<select id="materialChapter" class="form-control">
<!-- Options populated by JS -->
</select>
</div>
<div class="form-group">
<label class="form-label">Material Name</label>
<input type="text" id="materialName" class="form-control" placeholder="e.g., Lecture Notes, Textbook PDF">
</div>
<div class="form-group">
<label class="form-label">Material Type</label>
<select id="materialType" class="form-control">
<option value="pdf">PDF Document</option>
<option value="ppt">PowerPoint Presentation</option>
<option value="notes">Handwritten Notes</option>
<option value="video">Video Lecture</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="modal-footer">
<button class="btn btn--secondary" id="cancelMaterial">Cancel</button>
<button class="btn btn--primary" id="saveMaterial">Add Material</button>
</div>
</div>
</div>
-->
<script>
(function() {
function el(tag, className, attrs) {
var node = document.createElement(tag);
if (className) node.className = className;
if (attrs) {
Object.keys(attrs).forEach(function(key) {
node.setAttribute(key, attrs[key]);
});
}
return node;
}

function textNode(tag, value, className) {
var node = el(tag, className);
node.textContent = value;
return node;
}

function append(parent, children) {
children.forEach(function(child) {
parent.appendChild(child);
});
return parent;
}

function createFormGroup(labelText, control) {
var group = el('div', 'form-group');
var label = el('label', 'form-label');
label.htmlFor = control.id;
label.textContent = labelText;
return append(group, [label, control]);
}

function createSelect(id, options, attrs) {
var select = el('select', 'form-control', Object.assign({id: id, autocomplete: 'off'}, attrs || {}));
options.forEach(function(opt) {
var option = el('option');
option.value = opt.value;
option.textContent = opt.label;
if (opt.selected) option.selected = true;
select.appendChild(option);
});
return select;
}

function createInput(id, type, attrs) {
return el('input', 'form-control', Object.assign({id: id, type: type, autocomplete: 'off'}, attrs || {}));
}

var tabs = [
{tab: 'study-plan', label: 'Study Plan Generator', active: true},
{tab: 'folder-manager', label: 'Folder Manager'},
{tab: 'cgpa-calculator', label: 'CGPA Calculator'},
{tab: 'performance-modes', label: 'Performance Modes'}
];
var navContainer = document.getElementById('navTabs');
tabs.forEach(function(item) {
var btn = el('button', 'nav-tab' + (item.active ? ' active' : ''), {type: 'button', 'data-tab': item.tab});
btn.textContent = item.label;
navContainer.appendChild(btn);
});

var studyRow = document.getElementById('studyPlanFormRow');
var modeSelect = createSelect('studyMode', [
{value: 'easy', label: 'Easy Mode (1 chapter/day)'},
{value: 'normal', label: 'Normal Mode (2 chapters/day)', selected: true},
{value: 'intense', label: 'Intense Mode (7-day crash)'}
]);
var startDate = createInput('startDate', 'date', {required: true});
var examDate = createInput('examDate', 'date', {required: true});
append(studyRow, [
createFormGroup('Study Mode', modeSelect),
createFormGroup('Semester Start Date', startDate),
createFormGroup('End Semester Exam Date', examDate)
]);

var marksGrid = document.getElementById('marksInputGrid');
var marks = [
{id: 'ct1', label: 'Class Test 1 (10 marks)', max: 10, min: 0},
{id: 'ct2', label: 'Class Test 2 (10 marks)', max: 10, min: 0},
{id: 'assignment', label: 'Assignment (10 marks)', max: 10, min: 0},
{id: 'midSem', label: 'Mid Semester (20 marks)', max: 20, min: 0},
{id: 'endSem', label: 'End Semester (60 marks)', max: 60, min: 0}
];
marks.forEach(function(item) {
var input = createInput(item.id, 'number', {min: item.min, max: item.max, required: true});
marksGrid.appendChild(createFormGroup(item.label, input));
});

var modesGrid = document.getElementById('modesGrid');
var modes = [
{mode: 'easy', title: 'Easy Mode', chapters: '1', durationId: 'easyDuration', durationText: '- days', workload: 'Light', description: 'Relaxed pace with plenty of time for revision', button: 'Select Easy Mode'},
{mode: 'normal', title: 'Normal Mode', chapters: '2', durationId: 'normalDuration', durationText: '- days', workload: 'Moderate', description: 'Balanced approach with steady progress', button: 'Select Normal Mode'},
{mode: 'intense', title: 'Intense Mode', chapters: '4+', durationId: 'intenseChapters', durationText: '7 days', workload: 'Heavy', description: 'Last-minute preparation with high intensity', button: 'Select Intense Mode'}
];
modes.forEach(function(mode) {
var card = el('div', 'mode-card', {'data-mode': mode.mode});

var title = el('h3');
title.textContent = mode.title;

var stats = el('div', 'mode-stats');
var statRows = [
{label: 'Chapters per day:', value: mode.chapters, valueId: mode.mode === 'intense' ? 'intenseChapters' : null},
{label: 'Study duration:', value: mode.durationText, valueId: mode.mode !== 'intense' ? mode.durationId : null},
{label: 'Daily workload:', value: mode.workload}
];
statRows.forEach(function(row) {
var stat = el('div', 'stat');
var labelSpan = textNode('span', row.label, 'stat-label');
var valueSpan = textNode('span', row.value, 'stat-value');
if (row.valueId) valueSpan.id = row.valueId;
stat.appendChild(labelSpan);
stat.appendChild(valueSpan);
stats.appendChild(stat);
});

var desc = textNode('p', mode.description, 'mode-description');
var btn = el('button', 'btn btn--outline mode-select', {type: 'button', 'data-mode': mode.mode});
btn.textContent = mode.button;

append(card, [title, stats, desc, btn]);
modesGrid.appendChild(card);
});
})();
</script>
<script src="app.js"></script>
</body>
</html>
</html>