shamamanaeem03 commited on
Commit
acbd438
·
verified ·
1 Parent(s): 366209f

Delete notes-simplifier.html

Browse files
Files changed (1) hide show
  1. notes-simplifier.html +0 -461
notes-simplifier.html DELETED
@@ -1,461 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>NoteSimplify — Clear Thinking, Simple Notes</title>
7
- <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
8
- <style>
9
- :root {
10
- --ink: #1a1a2e;
11
- --paper: #f5f0e8;
12
- --accent: #e8533a;
13
- --soft: #d4cfc4;
14
- --light: #faf7f2;
15
- --green: #2d6a4f;
16
- --bullet: #e8533a;
17
- }
18
-
19
- * { margin: 0; padding: 0; box-sizing: border-box; }
20
-
21
- body {
22
- font-family: 'DM Sans', sans-serif;
23
- background: var(--paper);
24
- color: var(--ink);
25
- min-height: 100vh;
26
- background-image:
27
- repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(0,0,0,0.04) 28px);
28
- }
29
-
30
- header {
31
- background: var(--ink);
32
- color: var(--paper);
33
- padding: 20px 40px;
34
- display: flex;
35
- align-items: center;
36
- gap: 16px;
37
- position: sticky;
38
- top: 0;
39
- z-index: 10;
40
- }
41
-
42
- header .logo {
43
- font-family: 'Playfair Display', serif;
44
- font-size: 1.6rem;
45
- letter-spacing: -0.5px;
46
- }
47
-
48
- header .logo span { color: var(--accent); }
49
-
50
- header p {
51
- font-size: 0.8rem;
52
- opacity: 0.5;
53
- font-weight: 300;
54
- border-left: 1px solid rgba(255,255,255,0.2);
55
- padding-left: 16px;
56
- }
57
-
58
- .container {
59
- max-width: 1100px;
60
- margin: 0 auto;
61
- padding: 40px 24px;
62
- }
63
-
64
- .layout {
65
- display: grid;
66
- grid-template-columns: 1fr 1fr;
67
- gap: 28px;
68
- align-items: start;
69
- }
70
-
71
- @media (max-width: 768px) {
72
- .layout { grid-template-columns: 1fr; }
73
- header { padding: 16px 20px; }
74
- }
75
-
76
- .card {
77
- background: var(--light);
78
- border-radius: 4px;
79
- border: 1px solid var(--soft);
80
- overflow: hidden;
81
- box-shadow: 4px 4px 0 var(--soft);
82
- }
83
-
84
- .card-header {
85
- background: var(--ink);
86
- color: var(--paper);
87
- padding: 12px 20px;
88
- display: flex;
89
- align-items: center;
90
- gap: 10px;
91
- font-size: 0.8rem;
92
- font-weight: 500;
93
- letter-spacing: 1px;
94
- text-transform: uppercase;
95
- }
96
-
97
- .card-header .dot {
98
- width: 8px; height: 8px; border-radius: 50%;
99
- background: var(--accent);
100
- }
101
-
102
- textarea {
103
- width: 100%;
104
- min-height: 320px;
105
- padding: 24px;
106
- font-family: 'DM Sans', sans-serif;
107
- font-size: 0.95rem;
108
- line-height: 1.8;
109
- background: transparent;
110
- border: none;
111
- outline: none;
112
- resize: vertical;
113
- color: var(--ink);
114
- font-weight: 300;
115
- }
116
-
117
- textarea::placeholder { color: #aaa; font-style: italic; }
118
-
119
- .btn-row {
120
- padding: 16px 24px;
121
- background: rgba(0,0,0,0.03);
122
- border-top: 1px solid var(--soft);
123
- display: flex;
124
- align-items: center;
125
- gap: 12px;
126
- flex-wrap: wrap;
127
- }
128
-
129
- button.simplify {
130
- background: var(--accent);
131
- color: white;
132
- border: none;
133
- padding: 12px 28px;
134
- font-family: 'DM Sans', sans-serif;
135
- font-size: 0.9rem;
136
- font-weight: 500;
137
- cursor: pointer;
138
- border-radius: 2px;
139
- letter-spacing: 0.5px;
140
- transition: all 0.2s;
141
- display: flex;
142
- align-items: center;
143
- gap: 8px;
144
- }
145
-
146
- button.simplify:hover { background: #c73f28; transform: translateY(-1px); }
147
- button.simplify:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
148
-
149
- button.clear-btn {
150
- background: transparent;
151
- border: 1px solid var(--soft);
152
- color: #888;
153
- padding: 11px 20px;
154
- font-family: 'DM Sans', sans-serif;
155
- font-size: 0.85rem;
156
- cursor: pointer;
157
- border-radius: 2px;
158
- transition: all 0.2s;
159
- }
160
-
161
- button.clear-btn:hover { border-color: #aaa; color: var(--ink); }
162
-
163
- .char-count { margin-left: auto; font-size: 0.78rem; color: #aaa; }
164
-
165
- /* Output area */
166
- .output-area {
167
- padding: 24px;
168
- min-height: 320px;
169
- }
170
-
171
- .placeholder-msg {
172
- color: #bbb;
173
- font-style: italic;
174
- font-size: 0.9rem;
175
- line-height: 1.6;
176
- display: flex;
177
- flex-direction: column;
178
- align-items: center;
179
- justify-content: center;
180
- height: 260px;
181
- gap: 12px;
182
- text-align: center;
183
- }
184
-
185
- .placeholder-msg .icon { font-size: 2.5rem; opacity: 0.3; }
186
-
187
- /* Bullet points styling */
188
- .result-content { animation: fadeUp 0.4s ease; }
189
-
190
- @keyframes fadeUp {
191
- from { opacity: 0; transform: translateY(8px); }
192
- to { opacity: 1; transform: translateY(0); }
193
- }
194
-
195
- .result-content ul {
196
- list-style: none;
197
- padding: 0;
198
- }
199
-
200
- .result-content ul li {
201
- padding: 10px 0 10px 24px;
202
- position: relative;
203
- line-height: 1.7;
204
- font-size: 0.95rem;
205
- border-bottom: 1px dashed var(--soft);
206
- font-weight: 400;
207
- }
208
-
209
- .result-content ul li:last-child { border-bottom: none; }
210
-
211
- .result-content ul li::before {
212
- content: '→';
213
- position: absolute;
214
- left: 0;
215
- color: var(--accent);
216
- font-weight: 700;
217
- }
218
-
219
- .result-content p {
220
- line-height: 1.8;
221
- font-size: 0.95rem;
222
- margin-bottom: 12px;
223
- }
224
-
225
- .result-content strong { color: var(--green); font-weight: 500; }
226
-
227
- /* Copy button */
228
- .copy-btn {
229
- background: var(--green);
230
- color: white;
231
- border: none;
232
- padding: 10px 20px;
233
- font-family: 'DM Sans', sans-serif;
234
- font-size: 0.82rem;
235
- cursor: pointer;
236
- border-radius: 2px;
237
- transition: all 0.2s;
238
- margin-left: auto;
239
- }
240
- .copy-btn:hover { background: #1e4d39; }
241
-
242
- /* Loading */
243
- .loading {
244
- display: flex;
245
- flex-direction: column;
246
- align-items: center;
247
- justify-content: center;
248
- height: 260px;
249
- gap: 16px;
250
- color: #aaa;
251
- font-size: 0.88rem;
252
- }
253
-
254
- .spinner {
255
- width: 36px; height: 36px;
256
- border: 3px solid var(--soft);
257
- border-top-color: var(--accent);
258
- border-radius: 50%;
259
- animation: spin 0.8s linear infinite;
260
- }
261
-
262
- @keyframes spin { to { transform: rotate(360deg); } }
263
-
264
- .tips {
265
- background: var(--ink);
266
- color: var(--paper);
267
- border-radius: 4px;
268
- padding: 20px 24px;
269
- margin-top: 28px;
270
- display: flex;
271
- gap: 28px;
272
- flex-wrap: wrap;
273
- }
274
-
275
- .tips h3 {
276
- font-family: 'Playfair Display', serif;
277
- font-size: 1rem;
278
- margin-bottom: 8px;
279
- color: var(--accent);
280
- }
281
-
282
- .tip-item { flex: 1; min-width: 180px; }
283
- .tip-item p { font-size: 0.8rem; opacity: 0.6; line-height: 1.6; font-weight: 300; }
284
-
285
- .badge {
286
- display: inline-block;
287
- background: rgba(232,83,58,0.15);
288
- color: var(--accent);
289
- font-size: 0.7rem;
290
- padding: 2px 8px;
291
- border-radius: 20px;
292
- font-weight: 500;
293
- letter-spacing: 0.5px;
294
- margin-left: 8px;
295
- }
296
- </style>
297
- </head>
298
- <body>
299
-
300
- <header>
301
- <div class="logo">Note<span>Simplify</span></div>
302
- <p>Paste complex notes → Get simple bullet points instantly</p>
303
- </header>
304
-
305
- <div class="container">
306
- <div class="layout">
307
-
308
- <!-- INPUT -->
309
- <div class="card">
310
- <div class="card-header">
311
- <div class="dot"></div>
312
- Your Original Notes
313
- </div>
314
- <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>
315
- <div class="btn-row">
316
- <button class="simplify" onclick="simplifyNotes()" id="simplifyBtn">
317
- ✦ Simplify Notes
318
- </button>
319
- <button class="clear-btn" onclick="clearAll()">Clear</button>
320
- <span class="char-count" id="charCount">0 characters</span>
321
- </div>
322
- </div>
323
-
324
- <!-- OUTPUT -->
325
- <div class="card">
326
- <div class="card-header">
327
- <div class="dot"></div>
328
- Simplified Summary
329
- <span class="badge" id="outputBadge" style="display:none;">Ready</span>
330
- </div>
331
- <div class="output-area" id="outputArea">
332
- <div class="placeholder-msg">
333
- <div class="icon">📋</div>
334
- <div>Your simplified notes will appear here<br>as clean bullet points.</div>
335
- </div>
336
- </div>
337
- <div class="btn-row" id="copyRow" style="display:none;">
338
- <span style="font-size:0.8rem;color:#888;">✓ Simplified successfully</span>
339
- <button class="copy-btn" onclick="copyResult()">Copy All</button>
340
- </div>
341
- </div>
342
-
343
- </div>
344
-
345
- <div class="tips">
346
- <div class="tip-item">
347
- <h3>Simple English</h3>
348
- <p>Hard words replaced with everyday language anyone can understand.</p>
349
- </div>
350
- <div class="tip-item">
351
- <h3>Bullet Points</h3>
352
- <p>Long paragraphs broken into short, scannable bullet points.</p>
353
- </div>
354
- <div class="tip-item">
355
- <h3>Key Info Only</h3>
356
- <p>Filler removed. Only the important facts and ideas are kept.</p>
357
- </div>
358
- <div class="tip-item">
359
- <h3>Rewritten Fresh</h3>
360
- <p>Original sentences rewritten in new words — not just copy-pasted.</p>
361
- </div>
362
- </div>
363
- </div>
364
-
365
- <script>
366
- const textarea = document.getElementById('inputText');
367
- const charCount = document.getElementById('charCount');
368
-
369
- textarea.addEventListener('input', () => {
370
- charCount.textContent = textarea.value.length + ' characters';
371
- });
372
-
373
- async function simplifyNotes() {
374
- const text = textarea.value.trim();
375
- if (!text) { alert('Please paste some notes first!'); return; }
376
-
377
- const btn = document.getElementById('simplifyBtn');
378
- const outputArea = document.getElementById('outputArea');
379
- const copyRow = document.getElementById('copyRow');
380
- const badge = document.getElementById('outputBadge');
381
-
382
- btn.disabled = true;
383
- btn.textContent = '⏳ Simplifying...';
384
- copyRow.style.display = 'none';
385
- badge.style.display = 'none';
386
-
387
- outputArea.innerHTML = `
388
- <div class="loading">
389
- <div class="spinner"></div>
390
- <span>Simplifying your notes...</span>
391
- </div>`;
392
-
393
- try {
394
- const response = await fetch("https://api.anthropic.com/v1/messages", {
395
- method: "POST",
396
- headers: { "Content-Type": "application/json" },
397
- body: JSON.stringify({
398
- model: "claude-sonnet-4-20250514",
399
- max_tokens: 1000,
400
- system: `You are a notes simplifier. When given text, you must:
401
- 1. Convert everything into simple, easy English (like explaining to a 12-year-old)
402
- 2. Use short bullet points — each point max 1-2 sentences
403
- 3. Keep ONLY the important information — remove filler, examples, repetition
404
- 4. Remove all difficult or technical words — replace with simple ones
405
- 5. NEVER copy original sentences — always rewrite in your own words
406
- 6. Format output as a clean bullet list using • symbol
407
- 7. Start directly with the bullet points, no intro text
408
-
409
- Be concise. Aim for 5-12 bullet points depending on content length.`,
410
- messages: [{ role: "user", content: `Simplify these notes:\n\n${text}` }]
411
- })
412
- });
413
-
414
- const data = await response.json();
415
- const result = data.content?.[0]?.text || "Sorry, could not simplify. Try again.";
416
-
417
- // Render bullet points nicely
418
- const lines = result.split('\n').filter(l => l.trim());
419
- let html = '<div class="result-content"><ul>';
420
- for (const line of lines) {
421
- const cleaned = line.replace(/^[•\-\*]\s*/, '').trim();
422
- if (cleaned) html += `<li>${cleaned}</li>`;
423
- }
424
- html += '</ul></div>';
425
-
426
- outputArea.innerHTML = html;
427
- copyRow.style.display = 'flex';
428
- badge.style.display = 'inline-block';
429
-
430
- } catch (err) {
431
- outputArea.innerHTML = `<div class="placeholder-msg"><div class="icon">⚠️</div><div>Something went wrong.<br>Please try again.</div></div>`;
432
- }
433
-
434
- btn.disabled = false;
435
- btn.innerHTML = '✦ Simplify Notes';
436
- }
437
-
438
- function clearAll() {
439
- textarea.value = '';
440
- charCount.textContent = '0 characters';
441
- document.getElementById('outputArea').innerHTML = `
442
- <div class="placeholder-msg">
443
- <div class="icon">📋</div>
444
- <div>Your simplified notes will appear here<br>as clean bullet points.</div>
445
- </div>`;
446
- document.getElementById('copyRow').style.display = 'none';
447
- document.getElementById('outputBadge').style.display = 'none';
448
- }
449
-
450
- function copyResult() {
451
- const items = document.querySelectorAll('.result-content li');
452
- const text = Array.from(items).map(li => '• ' + li.textContent).join('\n');
453
- navigator.clipboard.writeText(text).then(() => {
454
- const btn = document.querySelector('.copy-btn');
455
- btn.textContent = '✓ Copied!';
456
- setTimeout(() => btn.textContent = 'Copy All', 2000);
457
- });
458
- }
459
- </script>
460
- </body>
461
- </html>