Skip to content

Create Study Note landing page with interactive chat preview #1

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
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Create Study Note landing page with interactive chat preview #1

Show file tree
Hide file tree
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
8 changes: 7 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,7 @@
# Study-Note
# Study Note

Study Note is a concept interface for an AI learning companion. The landing page introduces the product vision and offers an interactive chat preview that simulates a session with the Study Note mentor.

## Getting started

Open `index.html` in a browser to explore the experience. No build step is required.
170 changes: 170 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,170 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Study Note | Your AI Learning Companion</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="app-shell">
<header class="hero">
<nav class="nav-bar">
<div class="brand">
<span class="logo">SN</span>
<span class="name">Study Note</span>
</div>
<div class="nav-actions">
<button class="ghost">Download Guide</button>
<button class="primary">Launch App</button>
</div>
</nav>
<div class="hero-content">
<div class="hero-text">
<p class="eyebrow">AI that learns with you</p>
<h1>Personalized study sessions powered by an AI mentor.</h1>
<p class="subtitle">
Study Note adapts to your pace, keeps your notes organized, and
asks the right questions to help knowledge stick.
</p>
<div class="hero-cta">
<button class="primary">Start Free Session</button>
<button class="ghost">Explore Curriculum</button>
</div>
<div class="stats">
<div>
<span class="stat-value">95%</span>
<span class="stat-label">report higher test scores</span>
</div>
<div>
<span class="stat-value">40k+</span>
<span class="stat-label">active learners weekly</span>
</div>
</div>
</div>
<div class="hero-preview">
<div class="chat-card">
<div class="chat-header">
<span class="chat-title">Live Session</span>
<span class="status online">● Online</span>
</div>
<div class="chat-window" id="chat-window">
<div class="message assistant">
<p>Hi! I'm Study Note. What topic are we focusing on today?</p>
</div>
</div>
<form class="chat-input" id="chat-form">
<input
id="chat-message"
type="text"
placeholder="Ask Study Note anything..."
autocomplete="off"
required
/>
<button type="submit" class="primary">Send</button>
</form>
</div>
</div>
</div>
</header>

<main>
<section class="features">
<h2>Everything you need to stay curious</h2>
<div class="feature-grid">
<article class="feature-card">
<h3>Dynamic Explanations</h3>
<p>
Every answer combines visual analogies, step-by-step breakdowns,
and quick quizzes so you can revisit concepts from multiple angles.
</p>
</article>
<article class="feature-card">
<h3>Smart Notebook</h3>
<p>
Save key takeaways automatically. Highlight something and Study
Note turns it into flashcards, summaries, and practice prompts.
</p>
</article>
<article class="feature-card">
<h3>Guided Practice</h3>
<p>
Real-time feedback keeps you on track. As you answer questions,
the AI adapts difficulty and explains mistakes in plain language.
</p>
</article>
</div>
</section>

<section class="testimonials">
<div class="testimonial-card">
<p class="quote">
“Study Note is the first AI tutor that feels like a thoughtful
study partner. It helps me map out what I don't know yet.”
</p>
<div class="author">
<img src="https://i.pravatar.cc/80?img=15" alt="Jordan" />
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

For improved accessibility, alt text should be more descriptive. Instead of just the person's name, describe the image, for example, 'Headshot of...'. This provides better context for users of screen readers.

Suggested change
<img src="https://i.pravatar.cc/80?img=15" alt="Jordan" />
<img src="https://i.pravatar.cc/80?img=15" alt="Headshot of Jordan Harper" />

<div>
<p class="name">Jordan Harper</p>
<p class="role">Pre-med student, UC Berkeley</p>
</div>
</div>
</div>
<div class="testimonial-card">
<p class="quote">
“I use Study Note to prep for every client workshop. The mock Q&A
and outline builder keep me sharp and confident.”
</p>
<div class="author">
<img src="https://i.pravatar.cc/80?img=30" alt="Priya" />
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

For improved accessibility, alt text should be more descriptive. Instead of just the person's name, describe the image, for example, 'Headshot of...'. This provides better context for users of screen readers.

Suggested change
<img src="https://i.pravatar.cc/80?img=30" alt="Priya" />
<img src="https://i.pravatar.cc/80?img=30" alt="Headshot of Priya Iyer" />

<div>
<p class="name">Priya Iyer</p>
<p class="role">Learning designer</p>
</div>
</div>
</div>
</section>

<section class="cta">
<div class="cta-card">
<h2>Ready to make consistent progress?</h2>
<p>
Join thousands of learners using Study Note to master exams,
presentations, and new skills with confidence.
</p>
<div class="hero-cta">
<button class="primary">Create Free Account</button>
<button class="ghost">Talk to Sales</button>
</div>
</div>
</section>
</main>

<footer>
<div class="footer-grid">
<div class="brand">
<span class="logo">SN</span>
<span class="name">Study Note</span>
</div>
<div class="links">
<a href="#">Product</a>
<a href="#">Pricing</a>
<a href="#">Research</a>
<a href="#">Support</a>
</div>
<p class="copyright">
© <span id="year"></span> Study Note. Crafted for curious minds.
</p>
</div>
</footer>
</div>

<script src="script.js"></script>
</body>
</html>
83 changes: 83 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
const chatForm = document.getElementById('chat-form');
const chatWindow = document.getElementById('chat-window');
const chatMessage = document.getElementById('chat-message');
const year = document.getElementById('year');

if (year) {
year.textContent = new Date().getFullYear();
}

const knowledgeBase = [
{
keywords: ['math', 'algebra', 'equation', 'geometry'],
reply:
"Let's break that down visually. Start by identifying what the question is asking, then note the given information. I can craft a guided example or generate a quick quiz if you like."
},
{
keywords: ['history', 'war', 'revolution', 'ancient'],
reply:
'To study history effectively, organize the timeline first. I can summarize causes, key figures, and impact using a note card layout for you.'
},
{
keywords: ['science', 'biology', 'physics', 'chemistry'],
reply:
'Science clicks when we connect principles to experiments. Want a simulation idea, a concept map, or a set of flashcards?'
},
{
keywords: ['language', 'essay', 'write', 'writing'],
reply:
'Let me suggest a structure: thesis, supporting insights, and reflective conclusion. I can also quiz you on vocabulary or grammar using spaced repetition.'
}
];

function createMessageElement(text, author) {
const wrapper = document.createElement('div');
wrapper.className = `message ${author}`;

const label = document.createElement('span');
label.className = 'label';
label.textContent = author === 'assistant' ? 'Study Note' : 'You';

const content = document.createElement('p');
content.textContent = text;

wrapper.appendChild(label);
wrapper.appendChild(content);
Comment on lines +37 to +45
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The variable name label can be a bit confusing as <label> is a specific HTML element with its own semantics. Renaming it to something like authorLabel would improve code clarity and avoid potential confusion for future maintainers.

Suggested change
const label = document.createElement('span');
label.className = 'label';
label.textContent = author === 'assistant' ? 'Study Note' : 'You';
const content = document.createElement('p');
content.textContent = text;
wrapper.appendChild(label);
wrapper.appendChild(content);
const authorLabel = document.createElement('span');
authorLabel.className = 'label';
authorLabel.textContent = author === 'assistant' ? 'Study Note' : 'You';
const content = document.createElement('p');
content.textContent = text;
wrapper.appendChild(authorLabel);
wrapper.appendChild(content);


return wrapper;
}

function findResponse(message) {
const lower = message.toLowerCase();

for (const entry of knowledgeBase) {
if (entry.keywords.some((word) => lower.includes(word))) {
return entry.reply;
}
}

return "I hear you! Let's outline what you know, note what feels tricky, and build a micro-study plan together.";
}

function appendMessage(text, author) {
const messageElement = createMessageElement(text, author);
chatWindow.appendChild(messageElement);
chatWindow.scrollTo({ top: chatWindow.scrollHeight, behavior: 'smooth' });
}

if (chatForm) {
chatForm.addEventListener('submit', (event) => {
event.preventDefault();
const message = chatMessage.value.trim();

if (!message) return;

appendMessage(message, 'user');
chatMessage.value = '';

setTimeout(() => {
const reply = findResponse(message);
appendMessage(reply, 'assistant');
}, 450);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The hardcoded timeout value of 450 is a 'magic number'. It's a good practice to extract it into a named constant at the top of the file (e.g., const ASSISTANT_REPLY_DELAY = 450;). This improves readability and makes it easier to change the value in the future.

});
}
Loading