Spaces:

DropTheHQ
/

facilguide-readability-checker

Running

App Files Files Community

DropTheHQ commited on 7 days ago

Commit

7fc8302

verified ·

1 Parent(s): 1c9cb67

Upload index.html with huggingface_hub

Browse files

Files changed (1) hide show

index.html +222 -19

index.html CHANGED Viewed

@@ -1,19 +1,222 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Readability Checker - Facil.guide</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f5f0; color: #2d2d2d; min-height: 100vh; }
+  .header { background: #fff; border-bottom: 2px solid #069494; padding: 20px 32px; display: flex; align-items: center; justify-content: space-between; }
+  .header h1 { font-size: 22px; font-weight: 700; color: #2d2d2d; }
+  .header h1 span { color: #069494; }
+  .header a { color: #069494; text-decoration: none; font-size: 14px; font-weight: 600; }
+  .container { max-width: 800px; margin: 0 auto; padding: 32px 20px; }
+  .lang-row { display: flex; gap: 8px; margin-bottom: 20px; }
+  .lang-btn { padding: 8px 16px; border-radius: 8px; border: 2px solid #ddd; background: #fff; color: #666; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.2s; }
+  .lang-btn:hover, .lang-btn.active { border-color: #069494; color: #069494; background: #e8f5f5; }
+  textarea { width: 100%; height: 220px; padding: 20px; border-radius: 12px; border: 2px solid #ddd; background: #fff; color: #2d2d2d; font-size: 16px; line-height: 1.8; outline: none; resize: vertical; margin-bottom: 20px; }
+  textarea:focus { border-color: #069494; }
+  textarea::placeholder { color: #aaa; }
+  .btn-analyze { display: inline-block; padding: 14px 32px; border-radius: 10px; border: none; background: #069494; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
+  .btn-analyze:hover { background: #057878; }
+  .results { margin-top: 28px; display: none; }
+  .results.visible { display: block; }
+  .score-hero { background: #fff; border: 2px solid #ddd; border-radius: 16px; padding: 32px; text-align: center; margin-bottom: 20px; }
+  .score-hero .big-score { font-size: 72px; font-weight: 800; }
+  .score-hero .score-label { font-size: 18px; color: #666; margin-top: 4px; }
+  .score-hero .verdict { font-size: 20px; font-weight: 700; margin-top: 12px; padding: 8px 24px; border-radius: 8px; display: inline-block; }
+  .scores-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
+  .score-card { background: #fff; border: 2px solid #ddd; border-radius: 12px; padding: 24px; text-align: center; }
+  .score-card .sc-val { font-size: 36px; font-weight: 700; color: #069494; }
+  .score-card .sc-name { font-size: 13px; color: #888; margin-top: 4px; font-weight: 600; }
+  .score-card .sc-desc { font-size: 12px; color: #aaa; margin-top: 8px; line-height: 1.5; }
+  .text-stats { background: #fff; border: 2px solid #ddd; border-radius: 12px; padding: 24px; }
+  .text-stats h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: #888; margin-bottom: 16px; }
+  .stats-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
+  .stats-row:last-child { border-bottom: none; }
+  .stats-row .sr-label { color: #666; font-size: 14px; }
+  .stats-row .sr-value { color: #2d2d2d; font-weight: 600; font-size: 14px; }
+  .footer { text-align: center; padding: 40px 20px; color: #999; font-size: 13px; }
+  .footer a { color: #069494; text-decoration: none; font-weight: 600; }
+  .tips { background: #e8f5f5; border: 2px solid #b2dfdb; border-radius: 12px; padding: 24px; margin-top: 20px; }
+  .tips h3 { color: #069494; font-size: 15px; margin-bottom: 12px; }
+  .tips ul { list-style: none; padding: 0; }
+  .tips li { padding: 6px 0; font-size: 14px; color: #555; line-height: 1.6; }
+  .tips li::before { content: "\2713"; color: #069494; font-weight: 700; margin-right: 8px; }
+</style>
+</head>
+<body>
+<div class="header">
+  <h1><span>facil</span>.guide Readability Checker</h1>
+  <a href="https://facil.guide" target="_blank">facil.guide</a>
+</div>
+<div class="container">
+  <div class="lang-row">
+    <div class="lang-btn active" data-lang="en">English</div>
+    <div class="lang-btn" data-lang="es">Espanol</div>
+    <div class="lang-btn" data-lang="fr">Francais</div>
+    <div class="lang-btn" data-lang="pt">Portugues</div>
+    <div class="lang-btn" data-lang="it">Italiano</div>
+  </div>
+  <textarea id="input" placeholder="Paste your text here to check its readability...&#10;&#10;For best results, paste at least 100 words. The tool will analyze sentence structure, word complexity, and syllable patterns to estimate how accessible your writing is."></textarea>
+  <button class="btn-analyze" id="analyze">Analyze Readability</button>
+  <div class="results" id="results">
+    <div class="score-hero">
+      <div class="big-score" id="flesch-score">--</div>
+      <div class="score-label">Flesch Reading Ease</div>
+      <div class="verdict" id="verdict">Paste text above</div>
+    </div>
+    <div class="scores-grid">
+      <div class="score-card">
+        <div class="sc-val" id="fk-grade">--</div>
+        <div class="sc-name">Flesch-Kincaid Grade</div>
+        <div class="sc-desc">US grade level needed to understand this text</div>
+      </div>
+      <div class="score-card">
+        <div class="sc-val" id="fog-index">--</div>
+        <div class="sc-name">Gunning Fog Index</div>
+        <div class="sc-desc">Years of education needed (lower = easier)</div>
+      </div>
+      <div class="score-card">
+        <div class="sc-val" id="cl-index">--</div>
+        <div class="sc-name">Coleman-Liau Index</div>
+        <div class="sc-desc">Grade level based on character count</div>
+      </div>
+      <div class="score-card">
+        <div class="sc-val" id="senior-score">--</div>
+        <div class="sc-name">Senior-Friendly Score</div>
+        <div class="sc-desc">Custom score: target 70+ for senior audiences</div>
+      </div>
+    </div>
+    <div class="text-stats">
+      <h3>Text Statistics</h3>
+      <div class="stats-row"><span class="sr-label">Words</span><span class="sr-value" id="st-words">0</span></div>
+      <div class="stats-row"><span class="sr-label">Sentences</span><span class="sr-value" id="st-sentences">0</span></div>
+      <div class="stats-row"><span class="sr-label">Syllables</span><span class="sr-value" id="st-syllables">0</span></div>
+      <div class="stats-row"><span class="sr-label">Avg Words/Sentence</span><span class="sr-value" id="st-avgwords">0</span></div>
+      <div class="stats-row"><span class="sr-label">Avg Syllables/Word</span><span class="sr-value" id="st-avgsyl">0</span></div>
+      <div class="stats-row"><span class="sr-label">Complex Words (3+ syllables)</span><span class="sr-value" id="st-complex">0</span></div>
+    </div>
+    <div class="tips">
+      <h3>Tips for Senior-Friendly Writing</h3>
+      <ul>
+        <li>Keep sentences under 20 words when possible</li>
+        <li>Use common, everyday vocabulary</li>
+        <li>Define technical terms when first used</li>
+        <li>Use active voice instead of passive</li>
+        <li>Break long paragraphs into shorter ones</li>
+        <li>Include step numbers for instructions</li>
+      </ul>
+    </div>
+  </div>
+</div>
+<div class="footer">
+  Built by <a href="https://facil.guide">Facil.guide</a> &mdash; Making technology accessible for everyone.<br>
+  Senior-friendly tech guides in 5 languages at <a href="https://facil.guide">facil.guide</a>
+</div>
+<script>
+function countSyllables(word) {
+  word = word.toLowerCase().replace(/[^a-z]/g, '');
+  if (word.length <= 2) return 1;
+  word = word.replace(/(?:[^laeiouy]es|ed|[^laeiouy]e)$/, '');
+  word = word.replace(/^y/, '');
+  const m = word.match(/[aeiouy]{1,2}/g);
+  return m ? Math.max(1, m.length) : 1;
+}
+function analyze() {
+  const text = document.getElementById('input').value.trim();
+  if (!text) return;
+  const sentences = text.split(/[.!?]+/).filter(s => s.trim().length > 0);
+  const words = text.split(/\s+/).filter(w => w.replace(/[^a-zA-Z]/g, '').length > 0);
+  const numSentences = Math.max(1, sentences.length);
+  const numWords = words.length;
+  if (numWords < 5) return;
+  let totalSyllables = 0;
+  let complexWords = 0;
+  const totalChars = words.reduce((s, w) => s + w.replace(/[^a-zA-Z]/g, '').length, 0);
+  words.forEach(w => {
+    const s = countSyllables(w);
+    totalSyllables += s;
+    if (s >= 3) complexWords++;
+  });
+  const avgWordsPerSentence = numWords / numSentences;
+  const avgSylPerWord = totalSyllables / numWords;
+  // Flesch Reading Ease
+  const flesch = Math.round(206.835 - (1.015 * avgWordsPerSentence) - (84.6 * avgSylPerWord));
+  const fleschClamped = Math.max(0, Math.min(100, flesch));
+  // Flesch-Kincaid Grade
+  const fkGrade = ((0.39 * avgWordsPerSentence) + (11.8 * avgSylPerWord) - 15.59).toFixed(1);
+  // Gunning Fog
+  const fog = (0.4 * (avgWordsPerSentence + 100 * (complexWords / numWords))).toFixed(1);
+  // Coleman-Liau
+  const L = (totalChars / numWords) * 100;
+  const S = (numSentences / numWords) * 100;
+  const cl = ((0.0588 * L) - (0.296 * S) - 15.8).toFixed(1);
+  // Senior-Friendly (custom: weighted average favoring simplicity)
+  const senior = Math.round(fleschClamped * 0.6 + Math.max(0, 100 - parseFloat(fkGrade) * 8) * 0.4);
+  // Color + verdict
+  let color, verdict;
+  if (fleschClamped >= 80) { color = '#069494'; verdict = 'Very Easy - Great for seniors'; }
+  else if (fleschClamped >= 60) { color = '#4CAF50'; verdict = 'Standard - Accessible to most'; }
+  else if (fleschClamped >= 40) { color = '#FF9800'; verdict = 'Fairly Difficult'; }
+  else { color = '#f44336'; verdict = 'Difficult - Consider simplifying'; }
+  document.getElementById('results').classList.add('visible');
+  document.getElementById('flesch-score').textContent = fleschClamped;
+  document.getElementById('flesch-score').style.color = color;
+  const verdictEl = document.getElementById('verdict');
+  verdictEl.textContent = verdict;
+  verdictEl.style.background = color + '18';
+  verdictEl.style.color = color;
+  document.getElementById('fk-grade').textContent = fkGrade;
+  document.getElementById('fog-index').textContent = fog;
+  document.getElementById('cl-index').textContent = cl;
+  document.getElementById('senior-score').textContent = senior;
+  document.getElementById('st-words').textContent = numWords;
+  document.getElementById('st-sentences').textContent = numSentences;
+  document.getElementById('st-syllables').textContent = totalSyllables;
+  document.getElementById('st-avgwords').textContent = avgWordsPerSentence.toFixed(1);
+  document.getElementById('st-avgsyl').textContent = avgSylPerWord.toFixed(2);
+  document.getElementById('st-complex').textContent = complexWords + ' (' + ((complexWords/numWords)*100).toFixed(1) + '%)';
+}
+document.querySelectorAll('.lang-btn').forEach(b => {
+  b.addEventListener('click', () => {
+    document.querySelectorAll('.lang-btn').forEach(x => x.classList.remove('active'));
+    b.classList.add('active');
+  });
+});
+document.getElementById('analyze').addEventListener('click', analyze);
+document.getElementById('input').addEventListener('keydown', (e) => {
+  if (e.key === 'Enter' && e.ctrlKey) analyze();
+});
+</script>
+</body>
+</html>