Spaces:

shamamanaeem03
/

simplifier-summarizer

Sleeping

App Files Files Community

shamamanaeem03 commited on Mar 1

Commit

e613104

verified ·

1 Parent(s): d7b4aae

Upload note-simplifier.html

Browse files

Files changed (1) hide show

note-simplifier.html +517 -0

note-simplifier.html ADDED Viewed

	@@ -0,0 +1,517 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>NoteSimplify — Plain & Clear</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@300;400;500&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --ink: #1a1a18;
+    --paper: #f5f0e8;
+    --cream: #ede7d5;
+    --amber: #d4870a;
+    --amber-light: #f5a623;
+    --sage: #5a7a5c;
+    --rust: #b5451b;
+    --muted: #7a7468;
+    --card: #faf7f2;
+    --border: #d8d0be;
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    background: var(--paper);
+    color: var(--ink);
+    font-family: 'DM Sans', sans-serif;
+    min-height: 100vh;
+    background-image:
+      radial-gradient(ellipse at 20% 50%, rgba(212,135,10,0.06) 0%, transparent 60%),
+      radial-gradient(ellipse at 80% 20%, rgba(90,122,92,0.06) 0%, transparent 60%);
+  }
+  header {
+    padding: 2.5rem 3rem 1.5rem;
+    border-bottom: 1.5px solid var(--border);
+    display: flex;
+    align-items: baseline;
+    gap: 1rem;
+  }
+  .logo {
+    font-family: 'DM Serif Display', serif;
+    font-size: 2rem;
+    color: var(--ink);
+    letter-spacing: -0.02em;
+  }
+  .logo span { color: var(--amber); }
+  .tagline {
+    font-size: 0.8rem;
+    color: var(--muted);
+    font-family: 'DM Mono', monospace;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+  }
+  main {
+    max-width: 1100px;
+    margin: 0 auto;
+    padding: 3rem 3rem;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+    align-items: start;
+  }
+  .panel {
+    background: var(--card);
+    border: 1.5px solid var(--border);
+    border-radius: 12px;
+    overflow: hidden;
+  }
+  .panel-header {
+    padding: 1rem 1.5rem;
+    border-bottom: 1.5px solid var(--border);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: var(--cream);
+  }
+  .panel-title {
+    font-family: 'DM Mono', monospace;
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--muted);
+  }
+  .char-count {
+    font-family: 'DM Mono', monospace;
+    font-size: 0.7rem;
+    color: var(--muted);
+  }
+  textarea {
+    width: 100%;
+    min-height: 320px;
+    padding: 1.5rem;
+    background: transparent;
+    border: none;
+    outline: none;
+    font-family: 'DM Sans', sans-serif;
+    font-size: 0.95rem;
+    line-height: 1.7;
+    color: var(--ink);
+    resize: vertical;
+  }
+  textarea::placeholder { color: #b5ad9f; }
+  .controls {
+    padding: 1rem 1.5rem;
+    border-top: 1.5px solid var(--border);
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .btn-primary {
+    background: var(--ink);
+    color: var(--paper);
+    border: none;
+    padding: 0.65rem 1.75rem;
+    border-radius: 6px;
+    font-family: 'DM Sans', sans-serif;
+    font-size: 0.875rem;
+    font-weight: 600;
+    cursor: pointer;
+    letter-spacing: 0.01em;
+    transition: background 0.15s, transform 0.1s;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .btn-primary:hover { background: var(--amber); }
+  .btn-primary:active { transform: scale(0.98); }
+  .btn-primary:disabled { background: var(--muted); cursor: not-allowed; }
+  .btn-ghost {
+    background: transparent;
+    color: var(--muted);
+    border: 1.5px solid var(--border);
+    padding: 0.6rem 1rem;
+    border-radius: 6px;
+    font-family: 'DM Sans', sans-serif;
+    font-size: 0.8rem;
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+  .btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
+  /* Output panel */
+  .output-body {
+    padding: 1.5rem;
+    min-height: 320px;
+  }
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 280px;
+    gap: 0.75rem;
+    color: var(--muted);
+  }
+  .empty-icon {
+    font-size: 2.5rem;
+    opacity: 0.3;
+  }
+  .empty-text {
+    font-family: 'DM Mono', monospace;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+  /* Result sections */
+  .section {
+    margin-bottom: 1.75rem;
+    animation: fadeUp 0.4s ease forwards;
+    opacity: 0;
+  }
+  .section:nth-child(1) { animation-delay: 0.05s; }
+  .section:nth-child(2) { animation-delay: 0.15s; }
+  .section:nth-child(3) { animation-delay: 0.25s; }
+  .section:nth-child(4) { animation-delay: 0.35s; }
+  @keyframes fadeUp {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  .section-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    font-family: 'DM Mono', monospace;
+    font-size: 0.65rem;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    padding: 0.2rem 0.6rem;
+    border-radius: 4px;
+    margin-bottom: 0.75rem;
+    font-weight: 500;
+  }
+  .label-simple { background: rgba(90,122,92,0.12); color: var(--sage); }
+  .label-bullets { background: rgba(212,135,10,0.12); color: var(--amber); }
+  .label-key { background: rgba(181,69,27,0.12); color: var(--rust); }
+  .section-text {
+    font-size: 0.95rem;
+    line-height: 1.7;
+    color: var(--ink);
+  }
+  .bullet-list {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .bullet-list li {
+    display: flex;
+    gap: 0.75rem;
+    align-items: flex-start;
+    font-size: 0.9rem;
+    line-height: 1.6;
+  }
+  .bullet-list li::before {
+    content: '→';
+    color: var(--amber);
+    font-family: 'DM Mono', monospace;
+    flex-shrink: 0;
+    margin-top: 0.05em;
+  }
+  .key-info-box {
+    background: linear-gradient(135deg, rgba(181,69,27,0.06), rgba(212,135,10,0.06));
+    border: 1.5px solid rgba(181,69,27,0.2);
+    border-left: 3px solid var(--rust);
+    border-radius: 8px;
+    padding: 0.9rem 1.1rem;
+    font-size: 0.9rem;
+    line-height: 1.65;
+    font-style: italic;
+    color: var(--ink);
+  }
+  .divider {
+    height: 1px;
+    background: var(--border);
+    margin: 1.25rem 0;
+  }
+  /* Loading */
+  .loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 280px;
+    gap: 1rem;
+    flex-direction: column;
+    color: var(--muted);
+  }
+  .spinner {
+    width: 28px;
+    height: 28px;
+    border: 2px solid var(--border);
+    border-top-color: var(--amber);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+  @keyframes spin { to { transform: rotate(360deg); } }
+  .loading-text {
+    font-family: 'DM Mono', monospace;
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    animation: pulse 1.5s ease-in-out infinite;
+  }
+  @keyframes pulse { 0%,100%{opacity:0.4} 50%{opacity:1} }
+  /* Copy button */
+  .copy-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    background: transparent;
+    border: 1px solid var(--border);
+    color: var(--muted);
+    padding: 0.35rem 0.75rem;
+    border-radius: 5px;
+    font-size: 0.72rem;
+    font-family: 'DM Mono', monospace;
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+  .copy-btn:hover { border-color: var(--sage); color: var(--sage); }
+  .error-msg {
+    background: rgba(181,69,27,0.08);
+    border: 1px solid rgba(181,69,27,0.3);
+    border-radius: 8px;
+    padding: 1rem 1.25rem;
+    font-size: 0.875rem;
+    color: var(--rust);
+    margin: 1rem 0;
+  }
+  @media (max-width: 750px) {
+    main { grid-template-columns: 1fr; padding: 1.5rem 1rem; }
+    header { padding: 1.5rem 1rem; flex-wrap: wrap; }
+  }
+</style>
+</head>
+<body>
+<header>
+  <div class="logo">Note<span>Simplify</span></div>
+  <div class="tagline">// Plain language. Clear ideas. Zero fluff.</div>
+</header>
+<main>
+  <!-- Input Panel -->
+  <div class="panel">
+    <div class="panel-header">
+      <span class="panel-title">📄 Paste your notes</span>
+      <span class="char-count" id="charCount">0 chars</span>
+    </div>
+    <textarea id="inputText" placeholder="Paste any text here — lecture notes, articles, research papers, emails, textbook chapters... anything you want simplified."></textarea>
+    <div class="controls">
+      <button class="btn-primary" id="simplifyBtn" onclick="simplify()">
+        ✦ Simplify
+      </button>
+      <button class="btn-ghost" onclick="clearAll()">Clear</button>
+      <button class="btn-ghost" onclick="loadExample()">Try example</button>
+    </div>
+  </div>
+  <!-- Output Panel -->
+  <div class="panel">
+    <div class="panel-header">
+      <span class="panel-title">✦ Simplified output</span>
+      <button class="copy-btn" id="copyBtn" onclick="copyOutput()" style="display:none">⎘ Copy all</button>
+    </div>
+    <div class="output-body" id="outputBody">
+      <div class="empty-state">
+        <div class="empty-icon">✦</div>
+        <div class="empty-text">Your simplified notes appear here</div>
+      </div>
+    </div>
+  </div>
+</main>
+<script>
+  const textarea = document.getElementById('inputText');
+  const charCount = document.getElementById('charCount');
+  let outputData = null;
+  textarea.addEventListener('input', () => {
+    const len = textarea.value.length;
+    charCount.textContent = len + ' chars';
+  });
+  function clearAll() {
+    textarea.value = '';
+    charCount.textContent = '0 chars';
+    outputData = null;
+    document.getElementById('copyBtn').style.display = 'none';
+    document.getElementById('outputBody').innerHTML = `
+      <div class="empty-state">
+        <div class="empty-icon">✦</div>
+        <div class="empty-text">Your simplified notes appear here</div>
+      </div>`;
+  }
+  function loadExample() {
+    textarea.value = `The mitochondria are membrane-bound organelles found in the cytoplasm of eukaryotic cells. They are often referred to as the "powerhouse of the cell" because they generate most of the cell's supply of adenosine triphosphate (ATP), used as a source of chemical energy. Mitochondria contain their own DNA and are believed to have originated from ancient bacterial endosymbiosis events. The inner membrane of the mitochondria is folded into cristae which dramatically increases surface area, facilitating greater ATP production via oxidative phosphorylation. Dysfunction in mitochondrial activity is associated with numerous pathological conditions including neurodegeneration, metabolic disorders, and aging.`;
+    charCount.textContent = textarea.value.length + ' chars';
+  }
+  async function simplify() {
+    const text = textarea.value.trim();
+    if (!text) {
+      textarea.focus();
+      return;
+    }
+    const btn = document.getElementById('simplifyBtn');
+    btn.disabled = true;
+    btn.textContent = '⏳ Simplifying...';
+    document.getElementById('copyBtn').style.display = 'none';
+    document.getElementById('outputBody').innerHTML = `
+      <div class="loading">
+        <div class="spinner"></div>
+        <div class="loading-text">Simplifying your notes...</div>
+      </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 note simplifier. When given any text, you MUST respond with ONLY valid JSON (no markdown, no backticks, no extra text).
+The JSON structure must be exactly:
+{
+  "simple": "Rewrite the full content in simple, everyday English. Use short sentences. Never copy original sentences - always rewrite in your own words. Replace all difficult/technical words with simple ones.",
+  "bullets": ["bullet point 1", "bullet point 2", "bullet point 3", "bullet point 4", "bullet point 5"],
+  "keyInfo": "The single most important takeaway from the text, in one clear sentence."
+}
+Rules:
+- "simple": 2-4 short sentences, plain language, your own words
+- "bullets": 4-6 points, each under 15 words, no jargon
+- "keyInfo": exactly 1 sentence, the #1 thing to remember
+- NEVER quote or copy phrases from the original text
+- NEVER use technical or difficult vocabulary
+- Output ONLY the JSON object, nothing else`,
+          messages: [{ role: 'user', content: text }]
+        })
+      });
+      const data = await response.json();
+      if (data.error) throw new Error(data.error.message);
+      const rawText = data.content[0].text;
+      let parsed;
+      try {
+        const clean = rawText.replace(/```json|```/g, '').trim();
+        parsed = JSON.parse(clean);
+      } catch(e) {
+        throw new Error('Could not parse the response. Please try again.');
+      }
+      outputData = parsed;
+      renderOutput(parsed);
+      document.getElementById('copyBtn').style.display = 'flex';
+    } catch(err) {
+      document.getElementById('outputBody').innerHTML = `
+        <div class="error-msg">⚠ ${err.message || 'Something went wrong. Please try again.'}</div>`;
+    } finally {
+      btn.disabled = false;
+      btn.innerHTML = '✦ Simplify';
+    }
+  }
+  function renderOutput(data) {
+    const bullets = Array.isArray(data.bullets)
+      ? data.bullets.map(b => `<li>${b}</li>`).join('')
+      : '<li>No bullets available</li>';
+    document.getElementById('outputBody').innerHTML = `
+      <div class="section">
+        <div class="section-label label-simple">✎ Simple English</div>
+        <div class="section-text">${data.simple || '—'}</div>
+      </div>
+      <div class="divider"></div>
+      <div class="section">
+        <div class="section-label label-bullets">≡ Quick Bullets</div>
+        <ul class="bullet-list">${bullets}</ul>
+      </div>
+      <div class="divider"></div>
+      <div class="section">
+        <div class="section-label label-key">★ Key Info</div>
+        <div class="key-info-box">${data.keyInfo || '—'}</div>
+      </div>
+    `;
+  }
+  function copyOutput() {
+    if (!outputData) return;
+    const text = [
+      '=== SIMPLE ENGLISH ===',
+      outputData.simple,
+      '',
+      '=== QUICK BULLETS ===',
+      (outputData.bullets || []).map(b => '→ ' + b).join('\n'),
+      '',
+      '=== KEY INFO ===',
+      outputData.keyInfo
+    ].join('\n');
+    navigator.clipboard.writeText(text).then(() => {
+      const btn = document.getElementById('copyBtn');
+      btn.textContent = '✓ Copied!';
+      setTimeout(() => btn.innerHTML = '⎘ Copy all', 1800);
+    });
+  }
+</script>
+</body>
+</html>