feat(analytics): add writing analytics with readability scores and vocabulary analysis

Amit Haridas
This commit is contained in:
2026-04-06 11:42:22 +05:30
parent 50d0638c5c
commit 72a7a854d0
4 changed files with 273 additions and 0 deletions
+26
View File
@@ -2346,3 +2346,29 @@ body[class*="dark"] .breadcrumb-bar {
font-size: 14px;
cursor: pointer;
}
/* Writing Analytics Modal */
.analytics-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:10000; animation:analyticsFadeIn 0.2s ease; }
.analytics-modal { background:var(--bg-primary,#fff); border-radius:12px; width:520px; max-height:80vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.3); animation:analyticsSlideUp 0.3s ease; }
.analytics-header { display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid var(--border-color,#e5e7eb); }
.analytics-header h2 { margin:0; font-size:18px; font-weight:600; color:var(--text-primary); }
.analytics-close { background:none; border:none; font-size:24px; cursor:pointer; color:var(--text-muted); padding:4px 8px; border-radius:4px; }
.analytics-close:hover { background:var(--bg-tertiary); color:var(--text-primary); }
.analytics-body { padding:16px 24px 24px; }
.analytics-section { margin-bottom:20px; }
.analytics-section h3 { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted,#9ca3af); margin:0 0 10px; }
.analytics-row { display:flex; justify-content:space-between; align-items:baseline; padding:6px 0; font-size:14px; }
.analytics-label { color:var(--text-secondary,#6b7280); }
.analytics-value { font-weight:500; color:var(--text-primary); }
.analytics-value small { color:var(--text-muted); font-weight:400; margin-left:6px; }
.readability-meter { height:4px; background:var(--bg-tertiary,#f3f4f6); border-radius:2px; margin-top:8px; overflow:hidden; }
.readability-fill { height:100%; background:linear-gradient(90deg,#ef4444,#f59e0b,#10b981); border-radius:2px; transition:width 0.5s ease; }
.word-cloud { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.word-tag { background:var(--bg-tertiary,#f3f4f6); padding:4px 10px; border-radius:12px; font-size:13px; color:var(--text-secondary); }
.word-tag small { opacity:0.5; font-size:10px; margin-left:2px; }
.analytics-longest { flex-direction:column; gap:4px; }
.analytics-sentence-preview { font-style:italic; font-size:13px; color:var(--text-secondary); font-weight:400; }
@keyframes analyticsFadeIn { from{opacity:0} to{opacity:1} }
@keyframes analyticsSlideUp { from{transform:translateY(16px);opacity:0} to{transform:translateY(0);opacity:1} }
body[class*="dark"] .analytics-modal { background:var(--gray-800,#1f2937); }
body[class*="dark"] .word-tag { background:var(--gray-700,#374151); }