swadhin / opengrammar public

feat(core): Update test-grammar.html (Commit #30)

Swadhin Biswas committed 7 months ago
1b16bee
1 parent 271690d
commit 1b16bee
1 file changed
+168 -0
Showing 1 changed file+168-0
test-grammar.html
▼test-grammar.html
+168-0
@@ -0,0 +1,168 @@
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>OpenGrammar Test Page</title>
7
+ <style>
8
+ body {
9
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
10
+ max-width: 800px;
11
+ margin: 40px auto;
12
+ padding: 20px;
13
+ background: #f5f5f5;
14
+ }
15
+ .test-section {
16
+ background: white;
17
+ padding: 24px;
18
+ border-radius: 8px;
19
+ margin-bottom: 24px;
20
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
21
+ }
22
+ h1 {
23
+ color: #1a1a1a;
24
+ margin-bottom: 8px;
25
+ }
26
+ h2 {
27
+ color: #666;
28
+ font-size: 18px;
29
+ margin-bottom: 16px;
30
+ }
31
+ label {
32
+ display: block;
33
+ font-weight: 600;
34
+ margin-bottom: 8px;
35
+ color: #333;
36
+ }
37
+ input[type="text"],
38
+ textarea {
39
+ width: 100%;
40
+ padding: 12px;
41
+ border: 2px solid #e0e0e0;
42
+ border-radius: 6px;
43
+ font-size: 16px;
44
+ font-family: inherit;
45
+ box-sizing: border-box;
46
+ transition: border-color 0.2s;
47
+ }
48
+ input[type="text"]:focus,
49
+ textarea:focus {
50
+ outline: none;
51
+ border-color: #2563eb;
52
+ }
53
+ textarea {
54
+ min-height: 150px;
55
+ resize: vertical;
56
+ }
57
+ .editable {
58
+ min-height: 150px;
59
+ border: 2px solid #e0e0e0;
60
+ border-radius: 6px;
61
+ padding: 12px;
62
+ font-size: 16px;
63
+ font-family: inherit;
64
+ outline: none;
65
+ transition: border-color 0.2s;
66
+ }
67
+ .editable:focus {
68
+ border-color: #2563eb;
69
+ }
70
+ .instructions {
71
+ background: #e7f3ff;
72
+ border-left: 4px solid #2563eb;
73
+ padding: 16px;
74
+ margin-bottom: 24px;
75
+ border-radius: 0 6px 6px 0;
76
+ }
77
+ .instructions h3 {
78
+ margin: 0 0 8px 0;
79
+ color: #2563eb;
80
+ }
81
+ .instructions ul {
82
+ margin: 0;
83
+ padding-left: 20px;
84
+ }
85
+ .instructions li {
86
+ margin-bottom: 4px;
87
+ }
88
+ .status {
89
+ display: inline-block;
90
+ padding: 4px 12px;
91
+ border-radius: 12px;
92
+ font-size: 12px;
93
+ font-weight: 600;
94
+ margin-left: 12px;
95
+ }
96
+ .status.ok {
97
+ background: #dcfce7;
98
+ color: #16a34a;
99
+ }
100
+ .status.error {
101
+ background: #fef2f2;
102
+ color: #dc2626;
103
+ }
104
+ .test-text {
105
+ color: #666;
106
+ font-size: 14px;
107
+ margin-top: 8px;
108
+ }
109
+ </style>
110
+</head>
111
+<body>
112
+ <h1>🪶 OpenGrammar Test Page</h1>
113
+
114
+ <div class="instructions">
115
+ <h3>How to Test</h3>
116
+ <ul>
117
+ <li>Type in any of the text areas below</li>
118
+ <li>The extension should detect grammar and spelling errors</li>
119
+ <li>Look for <strong>wavy underlines</strong> (red for grammar/spelling, amber for clarity, blue for style)</li>
120
+ <li>Click on underlined text to see suggestions</li>
121
+ <li>Try the test sentences provided below each input</li>
122
+ </ul>
123
+ </div>
124
+
125
+ <div class="test-section">
126
+ <h2>Test 1: Simple Input Field</h2>
127
+ <label for="test-input">Type here:</label>
128
+ <input type="text" id="test-input" placeholder="Start typing...">
129
+ <p class="test-text">Try: "teh quick brown fox jump over the lazy dog" (should show spelling errors)</p>
130
+ </div>
131
+
132
+ <div class="test-section">
133
+ <h2>Test 2: Textarea</h2>
134
+ <label for="test-textarea">Type here:</label>
135
+ <textarea id="test-textarea" placeholder="Start typing..."></textarea>
136
+ <p class="test-text">Try: "Me and him went to the store. We utilize big words very good."</p>
137
+ </div>
138
+
139
+ <div class="test-section">
140
+ <h2>Test 3: Content Editable (Rich Text)</h2>
141
+ <label for="test-editable">Type here:</label>
142
+ <div id="test-editable" class="editable" contenteditable="true" placeholder="Start typing..."></div>
143
+ <p class="test-text">Try: "Their going to love this. Its a amazing tool which helps writers."</p>
144
+ </div>
145
+
146
+ <div class="test-section">
147
+ <h2>Test 4: All Grammar Rules</h2>
148
+ <label for="test-all">Comprehensive test:</label>
149
+ <textarea id="test-all" placeholder="Start typing..."></textarea>
150
+ <p class="test-text">Try: "Teh cat runned away. Me and her dont care. It's been raining alot. We should of went. Their are less people now. Your welcome. I wanna go. Alot of things. The book was wrote by him. Mistakes were made."</p>
151
+ </div>
152
+
153
+ <script>
154
+ // Log when content changes for debugging
155
+ document.querySelectorAll('input, textarea, [contenteditable]').forEach(el => {
156
+ el.addEventListener('input', (e) => {
157
+ console.log('[Test Page] Input event:', e.target.tagName, e.target.value?.substring(0, 50));
158
+ });
159
+
160
+ el.addEventListener('focus', (e) => {
161
+ console.log('[Test Page] Focus event:', e.target.tagName);
162
+ });
163
+ });
164
+
165
+ console.log('[Test Page] Loaded. OpenGrammar extension should activate on these fields.');
166
+ </script>
167
+</body>
168
+</html>
0
169