diff --git a/README.md b/README.md index 12a14bf..8b91555 100644 --- a/README.md +++ b/README.md @@ -1 +1,7 @@ -# Study-Note \ No newline at end of file +# 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. diff --git a/index.html b/index.html new file mode 100644 index 0000000..46a033c --- /dev/null +++ b/index.html @@ -0,0 +1,170 @@ + + + + + + Study Note | Your AI Learning Companion + + + + + + +
+
+ +
+
+

AI that learns with you

+

Personalized study sessions powered by an AI mentor.

+

+ Study Note adapts to your pace, keeps your notes organized, and + asks the right questions to help knowledge stick. +

+
+ + +
+
+
+ 95% + report higher test scores +
+
+ 40k+ + active learners weekly +
+
+
+
+
+
+ Live Session + ● Online +
+
+
+

Hi! I'm Study Note. What topic are we focusing on today?

+
+
+
+ + +
+
+
+
+
+ +
+
+

Everything you need to stay curious

+
+
+

Dynamic Explanations

+

+ Every answer combines visual analogies, step-by-step breakdowns, + and quick quizzes so you can revisit concepts from multiple angles. +

+
+
+

Smart Notebook

+

+ Save key takeaways automatically. Highlight something and Study + Note turns it into flashcards, summaries, and practice prompts. +

+
+
+

Guided Practice

+

+ Real-time feedback keeps you on track. As you answer questions, + the AI adapts difficulty and explains mistakes in plain language. +

+
+
+
+ +
+
+

+ “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.” +

+
+ Jordan +
+

Jordan Harper

+

Pre-med student, UC Berkeley

+
+
+
+
+

+ “I use Study Note to prep for every client workshop. The mock Q&A + and outline builder keep me sharp and confident.” +

+
+ Priya +
+

Priya Iyer

+

Learning designer

+
+
+
+
+ +
+
+

Ready to make consistent progress?

+

+ Join thousands of learners using Study Note to master exams, + presentations, and new skills with confidence. +

+
+ + +
+
+
+
+ + +
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..7037d6c --- /dev/null +++ b/script.js @@ -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); + + 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); + }); +} diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..e925aee --- /dev/null +++ b/styles.css @@ -0,0 +1,446 @@ +:root { + color-scheme: light dark; + --bg: #05010f; + --surface: rgba(19, 18, 36, 0.65); + --surface-strong: rgba(26, 24, 44, 0.85); + --accent: #7c4dff; + --accent-soft: rgba(124, 77, 255, 0.15); + --text: #f8f9ff; + --text-muted: rgba(248, 249, 255, 0.7); + --border: rgba(248, 249, 255, 0.1); + --gradient: linear-gradient(135deg, #7c4dff, #00d4ff); + font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', + sans-serif; +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + background: radial-gradient(circle at top left, rgba(124, 77, 255, 0.4), transparent 45%), + radial-gradient(circle at bottom right, rgba(0, 212, 255, 0.35), transparent 50%), + var(--bg); + color: var(--text); + min-height: 100vh; + display: flex; + justify-content: center; + padding: 3rem 1.5rem 4rem; +} + +.app-shell { + width: min(1100px, 100%); + display: flex; + flex-direction: column; + gap: 4rem; +} + +.nav-bar { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 2.5rem; +} + +.brand { + display: flex; + align-items: center; + gap: 0.75rem; + font-weight: 600; + letter-spacing: 0.04em; +} + +.logo { + display: inline-flex; + align-items: center; + justify-content: center; + width: 42px; + height: 42px; + border-radius: 12px; + background: var(--gradient); + color: #0a0620; + font-weight: 700; + font-size: 1.1rem; +} + +.name { + font-size: 1.1rem; +} + +.nav-actions { + display: flex; + gap: 1rem; +} + +.hero { + border-radius: 28px; + padding: 3rem; + background: linear-gradient(135deg, rgba(23, 22, 41, 0.95), rgba(9, 8, 20, 0.95)); + border: 1px solid var(--border); + box-shadow: 0 30px 80px rgba(5, 1, 15, 0.45); +} + +.hero-content { + display: grid; + gap: 2.5rem; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + align-items: center; +} + +.hero-text h1 { + font-size: clamp(2.5rem, 6vw, 3.6rem); + line-height: 1.05; + margin-bottom: 1rem; +} + +.hero-text .eyebrow { + letter-spacing: 0.4em; + font-size: 0.75rem; + text-transform: uppercase; + color: var(--text-muted); + margin-bottom: 1.5rem; +} + +.hero-text .subtitle { + color: var(--text-muted); + margin-bottom: 2rem; + font-size: 1.05rem; +} + +.hero-cta { + display: flex; + gap: 1rem; + flex-wrap: wrap; +} + +button { + font: inherit; + border: none; + border-radius: 999px; + padding: 0.85rem 1.6rem; + cursor: pointer; + transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; +} + +button.primary { + background: var(--gradient); + color: #0a0620; + font-weight: 600; + box-shadow: 0 20px 40px rgba(124, 77, 255, 0.25); +} + +button.primary:hover { + transform: translateY(-3px); + box-shadow: 0 24px 45px rgba(124, 77, 255, 0.35); +} + +button.ghost { + background: rgba(248, 249, 255, 0.08); + color: var(--text); + border: 1px solid var(--border); +} + +button.ghost:hover { + background: rgba(248, 249, 255, 0.12); + transform: translateY(-3px); +} + +.stats { + display: flex; + gap: 2.5rem; + margin-top: 2.5rem; +} + +.stat-value { + display: block; + font-size: 2rem; + font-weight: 700; +} + +.stat-label { + color: var(--text-muted); + font-size: 0.85rem; + letter-spacing: 0.04em; +} + +.hero-preview { + display: flex; + justify-content: flex-end; +} + +.chat-card { + background: var(--surface); + border-radius: 22px; + padding: 1.5rem; + display: flex; + flex-direction: column; + gap: 1.25rem; + border: 1px solid var(--border); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), + 0 25px 45px rgba(5, 1, 15, 0.45); + width: min(360px, 100%); +} + +.chat-header { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 0.95rem; + color: var(--text-muted); +} + +.status.online { + color: #4ade80; + font-size: 0.85rem; +} + +.chat-window { + display: flex; + flex-direction: column; + gap: 1rem; + max-height: 340px; + overflow-y: auto; + padding-right: 0.5rem; +} + +.message { + padding: 1rem 1.25rem; + border-radius: 16px; + font-size: 0.95rem; + line-height: 1.5; + display: inline-flex; + flex-direction: column; + gap: 0.5rem; + box-shadow: 0 10px 30px rgba(5, 1, 15, 0.35); +} + +.message.assistant { + background: rgba(124, 77, 255, 0.15); + border: 1px solid rgba(124, 77, 255, 0.25); + align-self: flex-start; +} + +.message.user { + background: rgba(248, 249, 255, 0.12); + border: 1px solid rgba(248, 249, 255, 0.18); + align-self: flex-end; +} + +.message .label { + font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.18em; + color: var(--text-muted); +} + +.chat-input { + display: flex; + gap: 0.75rem; +} + +.chat-input input { + flex: 1; + background: rgba(248, 249, 255, 0.08); + border: 1px solid rgba(248, 249, 255, 0.16); + border-radius: 999px; + color: var(--text); + padding: 0 1.1rem; + font: inherit; + height: 52px; +} + +.chat-input input::placeholder { + color: rgba(248, 249, 255, 0.45); +} + +main { + display: flex; + flex-direction: column; + gap: 4rem; +} + +.features { + text-align: center; + display: flex; + flex-direction: column; + gap: 2.5rem; +} + +.features h2 { + font-size: clamp(2rem, 4vw, 2.6rem); +} + +.feature-grid { + display: grid; + gap: 1.5rem; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); +} + +.feature-card { + padding: 2rem; + background: var(--surface); + border-radius: 20px; + text-align: left; + border: 1px solid var(--border); + min-height: 220px; + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.feature-card h3 { + font-size: 1.3rem; +} + +.feature-card p { + color: var(--text-muted); + line-height: 1.6; +} + +.testimonials { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 1.5rem; +} + +.testimonial-card { + padding: 2.5rem; + background: var(--surface-strong); + border-radius: 24px; + border: 1px solid var(--border); + display: flex; + flex-direction: column; + gap: 2rem; + position: relative; + overflow: hidden; +} + +.testimonial-card::before { + content: ''; + position: absolute; + inset: 0; + background: radial-gradient(circle at top right, rgba(124, 77, 255, 0.35), transparent 60%); + opacity: 0.6; + pointer-events: none; +} + +.quote { + font-size: 1.1rem; + line-height: 1.8; + position: relative; +} + +.author { + display: flex; + align-items: center; + gap: 1rem; +} + +.author img { + width: 52px; + height: 52px; + border-radius: 50%; + border: 2px solid rgba(248, 249, 255, 0.3); +} + +.author .name { + font-weight: 600; +} + +.author .role { + color: var(--text-muted); + font-size: 0.9rem; +} + +.cta { + display: flex; + justify-content: center; +} + +.cta-card { + max-width: 720px; + text-align: center; + padding: 3rem; + border-radius: 26px; + background: var(--surface-strong); + border: 1px solid var(--border); + display: flex; + flex-direction: column; + gap: 1.5rem; + align-items: center; +} + +footer { + border-top: 1px solid rgba(248, 249, 255, 0.08); + padding-top: 2.5rem; +} + +.footer-grid { + display: flex; + flex-wrap: wrap; + gap: 1.5rem; + justify-content: space-between; + align-items: center; + color: var(--text-muted); +} + +.footer-grid .links { + display: flex; + gap: 1.5rem; +} + +.footer-grid a { + color: inherit; + text-decoration: none; + font-size: 0.95rem; +} + +.footer-grid a:hover { + color: var(--text); +} + +@media (max-width: 768px) { + body { + padding: 2rem 1rem 3rem; + } + + .hero { + padding: 2.5rem; + } + + .nav-actions { + display: none; + } + + .stats { + flex-direction: column; + gap: 1.25rem; + align-items: flex-start; + } + + .chat-card { + margin: 0 auto; + } +} + +@media (max-width: 520px) { + .hero { + padding: 2rem 1.5rem; + } + + .hero-cta { + width: 100%; + flex-direction: column; + } + + .chat-input { + flex-direction: column; + } + + .chat-input button { + width: 100%; + height: 48px; + } +}