ClarityLens/test-page.html at main · ShadowInCache/ClarityLens · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ClarityLens Test Page</title>
  <style>
    body {
      font-family: system-ui, -apple-system, sans-serif;
      line-height: 1.6;
      max-width: 900px;
      margin: 0 auto;
      padding: 40px 20px;
      color: #1f2937;
      background: #f9fafb;
    }
    article {
      background: white;
      padding: 40px;
      border-radius: 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    h1 { font-size: 32px; margin-bottom: 8px; color: #111827; }
    h2 { font-size: 24px; margin-top: 32px; color: #374151; }
    p { margin-bottom: 16px; }
    img { max-width: 100%; height: auto; margin: 24px 0; border-radius: 8px; }
    form { margin: 32px 0; padding: 24px; background: #f3f4f6; border-radius: 8px; }
    label { display: block; margin-bottom: 8px; font-weight: 500; }
    textarea { width: 100%; padding: 12px; border: 1px solid #d1d5db; border-radius: 6px; font-family: inherit; font-size: 14px; }
    .test-section { margin: 40px 0; padding: 24px; border-left: 4px solid #3b82f6; background: #eff6ff; }
    .test-section h3 { margin-top: 0; color: #1e40af; }
  </style>
</head>
<body>
  <article>
    <h1>ClarityLens Test Page</h1>
    <p><em>This page is designed to test all features of the ClarityLens extension.</em></p>

    <!-- Test: Simplify / Summarize -->
    <div class="test-section">
      <h3>📝 Test: Simplify & Summarize</h3>
      <p><strong>Instructions:</strong> Click "Add TLDRs to Page" in the extension popup. TLDR summaries should appear above each paragraph below.</p>
    </div>

    <h2>The Impact of Artificial Intelligence on Modern Technology</h2>

    <p>Artificial intelligence has emerged as one of the most transformative technologies of the 21st century, fundamentally reshaping how we interact with computers, process information, and solve complex problems. From autonomous vehicles navigating city streets to recommendation systems predicting our preferences, AI systems have become deeply integrated into our daily lives, often operating invisibly in the background of the services and devices we rely upon.</p>

    <p>Machine learning, a subset of artificial intelligence, enables computers to learn from data without being explicitly programmed for every scenario. Neural networks, inspired by the structure of the human brain, process information through interconnected layers of nodes, identifying patterns and making predictions with increasing accuracy as they're exposed to more training data. Deep learning techniques have achieved remarkable breakthroughs in image recognition, natural language processing, and game-playing, surpassing human-level performance in many specialized tasks.</p>

    <p>The ethical implications of AI development have sparked important debates among technologists, policymakers, and society at large. Questions about algorithmic bias, privacy concerns, job displacement, and the concentration of AI capabilities in the hands of a few large corporations require thoughtful consideration and proactive governance. As AI systems become more powerful and autonomous, ensuring they remain aligned with human values and operate transparently becomes increasingly critical.</p>

    <!-- Test: Explain Images -->
    <div class="test-section">
      <h3>🖼️ Test: Explain Images</h3>
      <p><strong>Instructions:</strong> Right-click the chart below and select "Explain this image" from the context menu. An AI-generated description should appear.</p>
    </div>

    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400'%3E%3Crect width='600' height='400' fill='%23f9fafb'/%3E%3Ctext x='300' y='30' text-anchor='middle' font-family='Arial' font-size='20' fill='%23111827'%3EGlobal AI Investment (2019-2024)%3C/text%3E%3Cline x1='50' y1='350' x2='550' y2='350' stroke='%23374151' stroke-width='2'/%3E%3Cline x1='50' y1='50' x2='50' y2='350' stroke='%23374151' stroke-width='2'/%3E%3Cpolyline points='100,300 200,250 300,180 400,120 500,80' fill='none' stroke='%232563eb' stroke-width='3'/%3E%3Ccircle cx='100' cy='300' r='5' fill='%232563eb'/%3E%3Ccircle cx='200' cy='250' r='5' fill='%232563eb'/%3E%3Ccircle cx='300' cy='180' r='5' fill='%232563eb'/%3E%3Ccircle cx='400' cy='120' r='5' fill='%232563eb'/%3E%3Ccircle cx='500' cy='80' r='5' fill='%232563eb'/%3E%3Ctext x='100' y='370' text-anchor='middle' font-size='12'%3E2019%3C/text%3E%3Ctext x='200' y='370' text-anchor='middle' font-size='12'%3E2020%3C/text%3E%3Ctext x='300' y='370' text-anchor='middle' font-size='12'%3E2021%3C/text%3E%3Ctext x='400' y='370' text-anchor='middle' font-size='12'%3E2022%3C/text%3E%3Ctext x='500' y='370' text-anchor='middle' font-size='12'%3E2023%3C/text%3E%3C/svg%3E" alt="">

    <!-- Test: Proofread Forms -->
    <div class="test-section">
      <h3>✏️ Test: Proofread Forms</h3>
      <p><strong>Instructions:</strong> Type text with intentional errors in the textarea below. Proofreading suggestions should appear automatically.</p>
    </div>

    <form>
      <label for="testTextarea">Try typing with spelling or grammar errors:</label>
      <textarea id="testTextarea" rows="6" placeholder="Example: 'I has been working on this projekt for too weeks and its almost finish.'"></textarea>
    </form>

    <!-- Test: Translation -->
    <div class="test-section">
      <h3>🌐 Test: Translation</h3>
      <p><strong>Instructions:</strong> Select a target language (e.g., Spanish, Hindi, or Kannada) in the extension popup and click "Translate Page". All text should translate in place while preserving layout.</p>
    </div>

    <h2>Future Directions</h2>

    <p>Looking ahead, the field of artificial intelligence continues to evolve rapidly. Researchers are exploring novel architectures, more efficient training methods, and ways to make AI systems more interpretable and trustworthy. Multimodal AI systems that can seamlessly work with text, images, audio, and video are opening new possibilities for human-computer interaction. As these technologies mature, their potential to address global challenges in healthcare, climate change, education, and scientific discovery becomes increasingly tangible.</p>

    <!-- Test: Accessibility -->
    <div class="test-section">
      <h3>♿ Test: Accessibility</h3>
      <p><strong>Instructions:</strong> Navigate this page using only your keyboard (Tab, Enter, Space). All extension controls should be reachable and clearly focused.</p>
      <ul>
        <li>Tab through all interactive elements</li>
        <li>Check for visible focus indicators (blue outline)</li>
        <li>Use a screen reader to verify announcements</li>
        <li>Enable "Reduce motion" in OS settings and verify smooth animations</li>
      </ul>
    </div>

    <!-- Test: Tech Overlay -->
    <div class="test-section">
      <h3>📊 Test: Tech Overlay</h3>
      <p><strong>Instructions:</strong> Enable "Show Tech Overlay" in the extension popup. A panel showing API status, on-device indicators, and latency should appear in the top-right corner.</p>
      <p>Use the keyboard shortcut <kbd>Ctrl+Shift+T</kbd> (or <kbd>Cmd+Shift+T</kbd> on Mac) to toggle the overlay.</p>
    </div>
  </article>

  <footer style="text-align: center; margin-top: 40px; padding: 20px; color: #6b7280;">
    <p>ClarityLens Test Page • <a href="https://github.com/stealthwhizz/ClarityLens" style="color: #2563eb;">View on GitHub</a></p>
  </footer>
</body>
</html>