Spaces:

shamamanaeem03
/

Notes-Simplifier

Configuration error

App Files Files Community

shamamanaeem03 commited on 4 days ago

Commit

366209f

verified ·

1 Parent(s): 24a0780

Upload notes-simplifier.html

Browse files

Files changed (1) hide show

notes-simplifier.html +461 -0

notes-simplifier.html ADDED Viewed

	@@ -0,0 +1,461 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>NoteSimplify — Clear Thinking, Simple Notes</title>
+<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --ink: #1a1a2e;
+    --paper: #f5f0e8;
+    --accent: #e8533a;
+    --soft: #d4cfc4;
+    --light: #faf7f2;
+    --green: #2d6a4f;
+    --bullet: #e8533a;
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    font-family: 'DM Sans', sans-serif;
+    background: var(--paper);
+    color: var(--ink);
+    min-height: 100vh;
+    background-image:
+      repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(0,0,0,0.04) 28px);
+  }
+  header {
+    background: var(--ink);
+    color: var(--paper);
+    padding: 20px 40px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+  }
+  header .logo {
+    font-family: 'Playfair Display', serif;
+    font-size: 1.6rem;
+    letter-spacing: -0.5px;
+  }
+  header .logo span { color: var(--accent); }
+  header p {
+    font-size: 0.8rem;
+    opacity: 0.5;
+    font-weight: 300;
+    border-left: 1px solid rgba(255,255,255,0.2);
+    padding-left: 16px;
+  }
+  .container {
+    max-width: 1100px;
+    margin: 0 auto;
+    padding: 40px 24px;
+  }
+  .layout {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 28px;
+    align-items: start;
+  }
+  @media (max-width: 768px) {
+    .layout { grid-template-columns: 1fr; }
+    header { padding: 16px 20px; }
+  }
+  .card {
+    background: var(--light);
+    border-radius: 4px;
+    border: 1px solid var(--soft);
+    overflow: hidden;
+    box-shadow: 4px 4px 0 var(--soft);
+  }
+  .card-header {
+    background: var(--ink);
+    color: var(--paper);
+    padding: 12px 20px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 0.8rem;
+    font-weight: 500;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+  }
+  .card-header .dot {
+    width: 8px; height: 8px; border-radius: 50%;
+    background: var(--accent);
+  }
+  textarea {
+    width: 100%;
+    min-height: 320px;
+    padding: 24px;
+    font-family: 'DM Sans', sans-serif;
+    font-size: 0.95rem;
+    line-height: 1.8;
+    background: transparent;
+    border: none;
+    outline: none;
+    resize: vertical;
+    color: var(--ink);
+    font-weight: 300;
+  }
+  textarea::placeholder { color: #aaa; font-style: italic; }
+  .btn-row {
+    padding: 16px 24px;
+    background: rgba(0,0,0,0.03);
+    border-top: 1px solid var(--soft);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
+  }
+  button.simplify {
+    background: var(--accent);
+    color: white;
+    border: none;
+    padding: 12px 28px;
+    font-family: 'DM Sans', sans-serif;
+    font-size: 0.9rem;
+    font-weight: 500;
+    cursor: pointer;
+    border-radius: 2px;
+    letter-spacing: 0.5px;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  button.simplify:hover { background: #c73f28; transform: translateY(-1px); }
+  button.simplify:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
+  button.clear-btn {
+    background: transparent;
+    border: 1px solid var(--soft);
+    color: #888;
+    padding: 11px 20px;
+    font-family: 'DM Sans', sans-serif;
+    font-size: 0.85rem;
+    cursor: pointer;
+    border-radius: 2px;
+    transition: all 0.2s;
+  }
+  button.clear-btn:hover { border-color: #aaa; color: var(--ink); }
+  .char-count { margin-left: auto; font-size: 0.78rem; color: #aaa; }
+  /* Output area */
+  .output-area {
+    padding: 24px;
+    min-height: 320px;
+  }
+  .placeholder-msg {
+    color: #bbb;
+    font-style: italic;
+    font-size: 0.9rem;
+    line-height: 1.6;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 260px;
+    gap: 12px;
+    text-align: center;
+  }
+  .placeholder-msg .icon { font-size: 2.5rem; opacity: 0.3; }
+  /* Bullet points styling */
+  .result-content { animation: fadeUp 0.4s ease; }
+  @keyframes fadeUp {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  .result-content ul {
+    list-style: none;
+    padding: 0;
+  }
+  .result-content ul li {
+    padding: 10px 0 10px 24px;
+    position: relative;
+    line-height: 1.7;
+    font-size: 0.95rem;
+    border-bottom: 1px dashed var(--soft);
+    font-weight: 400;
+  }
+  .result-content ul li:last-child { border-bottom: none; }
+  .result-content ul li::before {
+    content: '→';
+    position: absolute;
+    left: 0;
+    color: var(--accent);
+    font-weight: 700;
+  }
+  .result-content p {
+    line-height: 1.8;
+    font-size: 0.95rem;
+    margin-bottom: 12px;
+  }
+  .result-content strong { color: var(--green); font-weight: 500; }
+  /* Copy button */
+  .copy-btn {
+    background: var(--green);
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    font-family: 'DM Sans', sans-serif;
+    font-size: 0.82rem;
+    cursor: pointer;
+    border-radius: 2px;
+    transition: all 0.2s;
+    margin-left: auto;
+  }
+  .copy-btn:hover { background: #1e4d39; }
+  /* Loading */
+  .loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 260px;
+    gap: 16px;
+    color: #aaa;
+    font-size: 0.88rem;
+  }
+  .spinner {
+    width: 36px; height: 36px;
+    border: 3px solid var(--soft);
+    border-top-color: var(--accent);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+  @keyframes spin { to { transform: rotate(360deg); } }
+  .tips {
+    background: var(--ink);
+    color: var(--paper);
+    border-radius: 4px;
+    padding: 20px 24px;
+    margin-top: 28px;
+    display: flex;
+    gap: 28px;
+    flex-wrap: wrap;
+  }
+  .tips h3 {
+    font-family: 'Playfair Display', serif;
+    font-size: 1rem;
+    margin-bottom: 8px;
+    color: var(--accent);
+  }
+  .tip-item { flex: 1; min-width: 180px; }
+  .tip-item p { font-size: 0.8rem; opacity: 0.6; line-height: 1.6; font-weight: 300; }
+  .badge {
+    display: inline-block;
+    background: rgba(232,83,58,0.15);
+    color: var(--accent);
+    font-size: 0.7rem;
+    padding: 2px 8px;
+    border-radius: 20px;
+    font-weight: 500;
+    letter-spacing: 0.5px;
+    margin-left: 8px;
+  }
+</style>
+</head>
+<body>
+<header>
+  <div class="logo">Note<span>Simplify</span></div>
+  <p>Paste complex notes → Get simple bullet points instantly</p>
+</header>
+<div class="container">
+  <div class="layout">
+    <!-- INPUT -->
+    <div class="card">
+      <div class="card-header">
+        <div class="dot"></div>
+        Your Original Notes
+      </div>
+      <textarea id="inputText" placeholder="Paste your complex notes, article, or text here...&#10;&#10;Can be lecture notes, textbook paragraphs, research papers, or anything you want simplified."></textarea>
+      <div class="btn-row">
+        <button class="simplify" onclick="simplifyNotes()" id="simplifyBtn">
+          ✦ Simplify Notes
+        </button>
+        <button class="clear-btn" onclick="clearAll()">Clear</button>
+        <span class="char-count" id="charCount">0 characters</span>
+      </div>
+    </div>
+    <!-- OUTPUT -->
+    <div class="card">
+      <div class="card-header">
+        <div class="dot"></div>
+        Simplified Summary
+        <span class="badge" id="outputBadge" style="display:none;">Ready</span>
+      </div>
+      <div class="output-area" id="outputArea">
+        <div class="placeholder-msg">
+          <div class="icon">📋</div>
+          <div>Your simplified notes will appear here<br>as clean bullet points.</div>
+        </div>
+      </div>
+      <div class="btn-row" id="copyRow" style="display:none;">
+        <span style="font-size:0.8rem;color:#888;">✓ Simplified successfully</span>
+        <button class="copy-btn" onclick="copyResult()">Copy All</button>
+      </div>
+    </div>
+  </div>
+  <div class="tips">
+    <div class="tip-item">
+      <h3>Simple English</h3>
+      <p>Hard words replaced with everyday language anyone can understand.</p>
+    </div>
+    <div class="tip-item">
+      <h3>Bullet Points</h3>
+      <p>Long paragraphs broken into short, scannable bullet points.</p>
+    </div>
+    <div class="tip-item">
+      <h3>Key Info Only</h3>
+      <p>Filler removed. Only the important facts and ideas are kept.</p>
+    </div>
+    <div class="tip-item">
+      <h3>Rewritten Fresh</h3>
+      <p>Original sentences rewritten in new words — not just copy-pasted.</p>
+    </div>
+  </div>
+</div>
+<script>
+  const textarea = document.getElementById('inputText');
+  const charCount = document.getElementById('charCount');
+  textarea.addEventListener('input', () => {
+    charCount.textContent = textarea.value.length + ' characters';
+  });
+  async function simplifyNotes() {
+    const text = textarea.value.trim();
+    if (!text) { alert('Please paste some notes first!'); return; }
+    const btn = document.getElementById('simplifyBtn');
+    const outputArea = document.getElementById('outputArea');
+    const copyRow = document.getElementById('copyRow');
+    const badge = document.getElementById('outputBadge');
+    btn.disabled = true;
+    btn.textContent = '⏳ Simplifying...';
+    copyRow.style.display = 'none';
+    badge.style.display = 'none';
+    outputArea.innerHTML = `
+      <div class="loading">
+        <div class="spinner"></div>
+        <span>Simplifying your notes...</span>
+      </div>`;
+    try {
+      const response = await fetch("https://api.anthropic.com/v1/messages", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          model: "claude-sonnet-4-20250514",
+          max_tokens: 1000,
+          system: `You are a notes simplifier. When given text, you must:
+1. Convert everything into simple, easy English (like explaining to a 12-year-old)
+2. Use short bullet points — each point max 1-2 sentences
+3. Keep ONLY the important information — remove filler, examples, repetition
+4. Remove all difficult or technical words — replace with simple ones
+5. NEVER copy original sentences — always rewrite in your own words
+6. Format output as a clean bullet list using • symbol
+7. Start directly with the bullet points, no intro text
+Be concise. Aim for 5-12 bullet points depending on content length.`,
+          messages: [{ role: "user", content: `Simplify these notes:\n\n${text}` }]
+        })
+      });
+      const data = await response.json();
+      const result = data.content?.[0]?.text || "Sorry, could not simplify. Try again.";
+      // Render bullet points nicely
+      const lines = result.split('\n').filter(l => l.trim());
+      let html = '<div class="result-content"><ul>';
+      for (const line of lines) {
+        const cleaned = line.replace(/^[•\-\*]\s*/, '').trim();
+        if (cleaned) html += `<li>${cleaned}</li>`;
+      }
+      html += '</ul></div>';
+      outputArea.innerHTML = html;
+      copyRow.style.display = 'flex';
+      badge.style.display = 'inline-block';
+    } catch (err) {
+      outputArea.innerHTML = `<div class="placeholder-msg"><div class="icon">⚠️</div><div>Something went wrong.<br>Please try again.</div></div>`;
+    }
+    btn.disabled = false;
+    btn.innerHTML = '✦ Simplify Notes';
+  }
+  function clearAll() {
+    textarea.value = '';
+    charCount.textContent = '0 characters';
+    document.getElementById('outputArea').innerHTML = `
+      <div class="placeholder-msg">
+        <div class="icon">📋</div>
+        <div>Your simplified notes will appear here<br>as clean bullet points.</div>
+      </div>`;
+    document.getElementById('copyRow').style.display = 'none';
+    document.getElementById('outputBadge').style.display = 'none';
+  }
+  function copyResult() {
+    const items = document.querySelectorAll('.result-content li');
+    const text = Array.from(items).map(li => '• ' + li.textContent).join('\n');
+    navigator.clipboard.writeText(text).then(() => {
+      const btn = document.querySelector('.copy-btn');
+      btn.textContent = '✓ Copied!';
+      setTimeout(() => btn.textContent = 'Copy All', 2000);
+    });
+  }
+</script>
+</body>
+</html>