Scribd
Upload
1 views9 pages

Study App

The document is an HTML template for an IGCSE Study Helper application, featuring a user interface that includes a header, a sidebar for notes, and a main content area for adding notes and studying with flashcards. It utilizes CSS for styling and JavaScript for interactivity, allowing users to add notes, view study statistics, and engage in study sessions with flashcards. The layout is responsive, adjusting for different screen sizes.

Uploaded by

mohammadshath912
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
1 views9 pages

Study App

The document is an HTML template for an IGCSE Study Helper application, featuring a user interface that includes a header, a sidebar for notes, and a main content area for adding notes and studying with flashcards. It utilizes CSS for styling and JavaScript for interactivity, allowing users to add notes, view study statistics, and engage in study sessions with flashcards. The layout is responsive, adjusting for different screen sizes.

Uploaded by

mohammadshath912
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

```html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IGCSE Study Helper</title>
<style>
:root {
--primary: #4361ee;
--secondary: #3f37c9;
--success: #4cc9f0;
--light: #f8f9fa;
--dark: #212529;
--gray: #6c757d;
--light-gray: #e9ecef;
--border: #dee2e6;
--card-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
background-color: #f5f7fb;
color: var(--dark);
line-height: 1.6;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

header {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
padding: 20px 0;
box-shadow: var(--card-shadow);
margin-bottom: 30px;
}

.header-content {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}

h1 {
font-size: 1.8rem;
font-weight: 600;
}
.app-container {
display: grid;
grid-template-columns: 300px 1fr;
gap: 20px;
}

.sidebar {
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: var(--card-shadow);
height: fit-content;
}

.main-content {
display: grid;
grid-template-rows: auto 1fr;
gap: 20px;
}

.card {
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: var(--card-shadow);
}

.section-title {
font-size: 1.3rem;
margin-bottom: 15px;
color: var(--secondary);
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
}

.input-group {
margin-bottom: 15px;
}

label {
display: block;
margin-bottom: 5px;
font-weight: 500;
}

input, textarea, select {


width: 100%;
padding: 10px;
border: 1px solid var(--border);
border-radius: 5px;
font-size: 1rem;
}

textarea {
min-height: 150px;
resize: vertical;
}

button {
background-color: var(--primary);
color: white;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
font-weight: 500;
transition: background-color 0.3s;
}

button:hover {
background-color: var(--secondary);
}

.btn-secondary {
background-color: var(--gray);
}

.btn-secondary:hover {
background-color: #5a6268;
}

.btn-success {
background-color: #28a745;
}

.btn-success:hover {
background-color: #218838;
}

.btn-danger {
background-color: #dc3545;
}

.btn-danger:hover {
background-color: #c82333;
}

.note-list {
list-style: none;
}

.note-item {
padding: 10px;
border-bottom: 1px solid var(--border);
cursor: pointer;
}

.note-item:hover {
background-color: var(--light-gray);
}

.note-item.active {
background-color: #e6f0ff;
border-left: 3px solid var(--primary);
}

.tag {
display: inline-block;
background-color: #e0e7ff;
color: var(--secondary);
padding: 3px 8px;
border-radius: 20px;
font-size: 0.8rem;
margin-right: 5px;
}

.flashcard {
background: linear-gradient(135deg, #4361ee, #3a0ca3);
color: white;
border-radius: 10px;
padding: 30px;
text-align: center;
min-height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: var(--card-shadow);
}

.flashcard-content {
font-size: 1.4rem;
margin-bottom: 20px;
}

.flashcard-back {
display: none;
}

.flashcard.show-back .flashcard-back {
display: block;
}

.flashcard.show-back .flashcard-front {
display: none;
}

.review-controls {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 20px;
}

.progress-container {
margin-top: 20px;
}

.progress-bar {
height: 10px;
background-color: var(--light-gray);
border-radius: 5px;
overflow: hidden;
}

.progress {
height: 100%;
background-color: var(--success);
width: 0%;
transition: width 0.3s;
}

.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-top: 20px;
}

.stat-card {
background: white;
border-radius: 8px;
padding: 15px;
text-align: center;
box-shadow: var(--card-shadow);
}

.stat-value {
font-size: 1.8rem;
font-weight: bold;
color: var(--primary);
}

.stat-label {
font-size: 0.9rem;
color: var(--gray);
}

.mode-selector {
display: flex;
gap: 10px;
margin-bottom: 20px;
}

.mode-btn {
flex: 1;
text-align: center;
padding: 12px;
background-color: var(--light-gray);
border-radius: 5px;
cursor: pointer;
}

.mode-btn.active {
background-color: var(--primary);
color: white;
}

.hidden {
display: none;
}

@media (max-width: 768px) {


.app-container {
grid-template-columns: 1fr;
}
.header-content {
flex-direction: column;
gap: 10px;
text-align: center;
}
}
</style>
</head>
<body>
<header>
<div class="header-content">
<h1>IGCSE Study Helper</h1>
<div>Daily Goal: 15/20 cards</div>
</div>
</header>

<div class="container">
<div class="app-container">
<div class="sidebar">
<h2 class="section-title">My Notes</h2>
<button id="add-note-btn" class="btn-secondary" style="width: 100%;
margin-bottom: 20px;">+ Add New Note</button>

<ul class="note-list" id="notes-list">


<li class="note-item active">
<strong>Biology - Cell Structure</strong>
<div class="tags">
<span class="tag">Biology</span>
<span class="tag">Cells</span>
</div>
</li>
<li class="note-item">
<strong>Chemistry - Periodic Table</strong>
<div class="tags">
<span class="tag">Chemistry</span>
<span class="tag">Elements</span>
</div>
</li>
<li class="note-item">
<strong>Physics - Forces</strong>
<div class="tags">
<span class="tag">Physics</span>
<span class="tag">Mechanics</span>
</div>
</li>
</ul>

<h2 class="section-title" style="margin-top: 30px;">Study


Stats</h2>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-value">42</div>
<div class="stat-label">Cards</div>
</div>
<div class="stat-card">
<div class="stat-value">87%</div>
<div class="stat-label">Accuracy</div>
</div>
<div class="stat-card">
<div class="stat-value">7</div>
<div class="stat-label">Day Streak</div>
</div>
</div>
</div>

<div class="main-content">
<div class="card">
<h2 class="section-title">Add New Notes</h2>
<div class="input-group">
<label for="note-title">Note Title</label>
<input type="text" id="note-title" placeholder="e.g.,
Biology - Cell Structure">
</div>

<div class="input-group">
<label for="note-tags">Tags (comma separated)</label>
<input type="text" id="note-tags" placeholder="e.g.,
Biology, Cells, Structure">
</div>

<div class="input-group">
<label for="note-content">Paste Your Notes</label>
<textarea id="note-content" placeholder="Paste your study
notes here..."></textarea>
</div>

<button id="save-notes-btn">Save Notes</button>


</div>

<div class="card">
<h2 class="section-title">Study Session</h2>

<div class="mode-selector">
<div class="mode-btn active">Review</div>
<div class="mode-btn">Flashcards</div>
<div class="mode-btn">Quiz</div>
<div class="mode-btn">Test</div>
</div>

<div class="flashcard" id="flashcard">


<div class="flashcard-front">
<div class="flashcard-content">
What is the function of mitochondria?
</div>
<button id="show-answer-btn">Show Answer</button>
</div>
<div class="flashcard-back">
<div class="flashcard-content">
Mitochondria are the powerhouse of the cell,
responsible for producing ATP through cellular respiration.
</div>
<div class="source">Source: Biology - Cell Structure
(Paragraph 3)</div>
<div class="review-controls">
<button class="btn-danger">Again</button>
<button class="btn-secondary">Hard</button>
<button class="btn-success">Good</button>
<button class="btn-success">Easy</button>
</div>
</div>
</div>

<div class="progress-container">
<div>Session Progress</div>
<div class="progress-bar">
<div class="progress" style="width: 45%;"></div>
</div>
<div>9/20 cards reviewed</div>
</div>
</div>
</div>
</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
// DOM Elements
const flashcard = document.getElementById('flashcard');
const showAnswerBtn = document.getElementById('show-answer-btn');
const notesList = document.querySelector('.note-list');

// Show answer functionality


showAnswerBtn.addEventListener('click', function() {
flashcard.classList.add('show-back');
});

// Note selection
document.querySelectorAll('.note-item').forEach(item => {
item.addEventListener('click', function() {
document.querySelectorAll('.note-item').forEach(i =>
i.classList.remove('active'));
this.classList.add('active');
});
});

// Mode selection
document.querySelectorAll('.mode-btn').forEach(btn => {
btn.addEventListener('click', function() {
document.querySelectorAll('.mode-btn').forEach(b =>
b.classList.remove('active'));
this.classList.add('active');
});
});

// Save notes functionality


document.getElementById('save-notes-btn').addEventListener('click',
function() {
const title = document.getElementById('note-title').value;
const content = document.getElementById('note-content').value;
const tags = document.getElementById('note-tags').value;

if (title && content) {


// In a real app, this would save to local storage or a
database
alert(`Notes saved: ${title}`);
document.getElementById('note-title').value = '';
document.getElementById('note-content').value = '';
document.getElementById('note-tags').value = '';

// Add to notes list


const noteItem = document.createElement('li');
noteItem.className = 'note-item';
noteItem.innerHTML = `
<strong>${title}</strong>
<div class="tags">
${tags.split(',').map(tag => `<span class="tag">$
{tag.trim()}</span>`).join('')}
</div>
`;

noteItem.addEventListener('click', function() {
document.querySelectorAll('.note-item').forEach(i =>
i.classList.remove('active'));
this.classList.add('active');
});

notesList.prepend(noteItem);
} else {
alert('Please fill in title and content');
}
});

// Add note button


document.getElementById('add-note-btn').addEventListener('click',
function() {
document.querySelector('.main-content').scrollIntoView({ behavior:
'smooth' });
});
});
</script>
</body>
</html>
```

You might also like