diff --git a/TABLET-TEST-DEPLOYMENT.md b/TABLET-TEST-DEPLOYMENT.md new file mode 100644 index 0000000..da817d7 --- /dev/null +++ b/TABLET-TEST-DEPLOYMENT.md @@ -0,0 +1,115 @@ +# ๐Ÿ“ฑ Tablet Handwriting Recognition Test Deployment + +## ๐Ÿš€ Quick Deploy + +### Pull and Run the Test Image: +```bash +# Pull the test image +docker pull ghcr.io/nmemmert/spelling:test + +# Run the container +docker run -d -p 80:3000 --name spelling-tablet-test ghcr.io/nmemmert/spelling:test +``` + +### Alternative with Docker Compose: +```yaml +version: '3.8' +services: + spelling-test: + image: ghcr.io/nmemmert/spelling:test + ports: + - "80:3000" + restart: unless-stopped + labels: + - "test-version=1.2.0-tablet" + - "features=handwriting-recognition" +``` + +## ๐Ÿ–Š๏ธ What's Included in This Test Build: + +### โœ… Native Tablet Support: +- **Web Handwriting API** integration (Edge/Chrome experimental) +- **Windows Ink Platform** compatibility +- **Pointer Events API** with pressure sensitivity +- **Touch Events API** optimization +- **Force Touch** support (3D Touch devices) + +### ๐ŸŽฏ Enhanced Recognition Features: +- **Multi-algorithm recognition** chain +- **Contextual word matching** for spelling practice +- **Pressure-sensitive** stroke analysis +- **Timing-based** pattern recognition +- **Dictionary-based** post-processing + +### ๐Ÿ“ Tablet-Optimized UI: +- **Touch-friendly** interface elements +- **Stylus-optimized** canvas +- **Responsive** tablet layouts +- **Visual feedback** for recognition status +- **Auto-detection** of native capabilities + +## ๐Ÿงช Testing Instructions: + +### 1. **Access the Application:** +- Open your tablet browser +- Navigate to your server (e.g., `http://your-server/`) +- Look for "๐Ÿ“ฑ Native Tablet Recognition" status + +### 2. **Enable Browser Features (if needed):** +- **Edge:** `edge://flags/` โ†’ Enable "Experimental Web Platform features" +- **Chrome:** `chrome://flags/` โ†’ Enable "Experimental Web Platform features" +- **Safari:** Enable experimental features in settings + +### 3. **Test Handwriting Recognition:** +- Switch to "โœ๏ธ Write" mode +- Draw letters/words on the canvas with stylus or finger +- Click "๐Ÿ” Recognize" button +- Test words: "Love", "Boy", "Cat", "Make", "Time" + +### 4. **Check Native Features:** +- Look for pressure sensitivity (if using stylus) +- Test different drawing speeds +- Try both print and cursive writing +- Check recognition accuracy vs. desktop + +## ๐Ÿ“Š Expected Results: + +### **On Modern Tablets:** +- โœ… Pointer Events API should work +- โœ… Touch Events should be detected +- ๐Ÿ”ง Web Handwriting API (needs experimental flags) +- โœ… Much better recognition accuracy than desktop + +### **Performance Indicators:** +- **Recognition Status:** Should show "Native" or "Enhanced" +- **Pressure Data:** Available with compatible stylus +- **Touch Optimization:** Smooth drawing experience +- **Word Accuracy:** Significantly improved for spelling words + +## ๐Ÿ› Troubleshooting: + +### If Recognition is Poor: +1. Enable experimental browser features +2. Use a compatible stylus (Surface Pen, Apple Pencil, S-Pen) +3. Write more slowly and clearly +4. Try print letters instead of cursive + +### If No Native Support: +- Check browser compatibility +- Enable experimental flags +- Update to latest browser version +- Test on different tablet models + +## ๐Ÿ”— Image Details: +- **Image:** `ghcr.io/nmemmert/spelling:test` +- **Version:** `1.2.0-tablet` +- **Features:** Native handwriting + Enhanced fallback +- **Build Date:** October 2, 2025 + +## ๐Ÿ“ž Feedback: +Test the handwriting recognition and report: +- Which device/browser combination +- Native API detection results +- Recognition accuracy for different words +- Any pressure sensitivity detected +- Overall user experience improvements \ No newline at end of file diff --git a/TABLET_HANDWRITING_README.md b/TABLET_HANDWRITING_README.md new file mode 100644 index 0000000..02adfbd --- /dev/null +++ b/TABLET_HANDWRITING_README.md @@ -0,0 +1,263 @@ +# Tablet UI and Handwriting Recognition Features + +This document outlines the new tablet-optimized UI and handwriting recognition features added to the Spelling Practice App. + +## ๐ŸŽจ Tablet UI Overhaul + +### Features Added + +1. **Tablet-Optimized CSS** (`public/tablet.css`) + - Enhanced touch targets (minimum 48px) + - Improved typography for tablet viewing + - Better spacing and padding for tablet use + - Responsive grid layouts + - Landscape and portrait orientation support + +2. **Enhanced Student Dashboard** + - Card-based activity options with large touch targets + - Visual icons and descriptions for each activity + - Improved button layouts with better spacing + - Better visual hierarchy + +3. **Tablet Utilities** (`public/js/tablet-utils.js`) + - Automatic tablet detection + - Touch feedback and animations + - Swipe gesture support + - Orientation change handling + - Haptic feedback (where supported) + - Enhanced button interactions + +### Tablet-Specific Optimizations + +- **Touch Targets**: All interactive elements are at least 48px in size +- **Font Sizes**: Optimized for tablet viewing distances +- **Spacing**: Increased padding and margins for better touch interaction +- **Visual Feedback**: Touch ripples and scale animations +- **Keyboard Optimization**: Prevents zoom on input focus, auto-scroll to inputs + +## โœ๏ธ Handwriting Recognition + +### Features Added + +1. **Handwriting Canvas** (`public/js/handwriting.js`) + - HTML5 Canvas for drawing + - Multi-touch support + - Smooth drawing with configurable pen settings + - Stroke recording and playback + +2. **Drawing Controls** + - Clear canvas button + - Undo last stroke + - Adjustable pen size (1-10px) + - Color selection + - Auto-recognition toggle + +3. **Recognition Engine** + - Multiple recognition method support + - Basic pattern recognition (fallback) + - Integration with Google Vision API (configurable) + - MyScript API support (configurable) + +### Input Mode Toggle + +Students can switch between: +- **Typing Mode** (โŒจ๏ธ): Traditional keyboard input +- **Handwriting Mode** (โœ๏ธ): Canvas-based writing recognition + +### Handwriting CSS Styles (`public/handwriting.css`) + +- Canvas styling with proper focus indicators +- Control buttons with touch-friendly sizing +- Recognition status display +- Tablet-optimized layouts +- Mobile responsive design + +## ๐Ÿ› ๏ธ Implementation Details + +### File Structure + +``` +public/ +โ”œโ”€โ”€ tablet.css # Tablet-optimized styles +โ”œโ”€โ”€ handwriting.css # Handwriting recognition styles +โ””โ”€โ”€ js/ + โ”œโ”€โ”€ handwriting.js # Handwriting recognition logic + โ””โ”€โ”€ tablet-utils.js # Tablet optimization utilities +``` + +### Key Functions + +#### Tablet Utilities +- `detectTablet()`: Automatic device detection +- `optimizeButtons()`: Enhanced button interactions +- `handleOrientationChange()`: Responsive orientation handling +- `addSwipeGestures()`: Navigation gestures + +#### Handwriting Recognition +- `startDrawing()`: Begin stroke recording +- `draw()`: Track drawing movements +- `recognizeText()`: Convert drawing to text +- `clearCanvas()`: Reset drawing area +- `toggleInputMode()`: Switch between typing/writing + +### Integration Points + +1. **Game Integration**: + - `submitAnswer()` function updated to handle both input types + - `showWord()` function resets both input methods + - Recognition results auto-fill the game input + +2. **UI Enhancement**: + - Activity cards with improved touch targets + - Input mode toggle in game section + - Canvas controls with tablet-friendly sizing + +## ๐Ÿ“ฑ Device Support + +### Tablet Compatibility +- iPad (all generations) +- Android tablets +- Windows tablets +- Chrome OS tablets + +### Browser Support +- Safari (iOS) +- Chrome (Android/Desktop) +- Firefox +- Edge + +### Touch Features +- Multi-touch drawing +- Gesture navigation +- Haptic feedback (where available) +- Orientation detection + +## ๐Ÿš€ Usage Instructions + +### For Students + +1. **Starting the App**: + - Login and access the student dashboard + - Choose from improved activity cards + +2. **Spelling Game with Handwriting**: + - Start a spelling game + - Use the toggle to switch between typing and handwriting + - Draw letters on the canvas for recognition + - Submit answers using either input method + +3. **Drawing Tips**: + - Write clearly with consistent letter sizes + - Use print letters rather than cursive + - Allow space between letters + - Press firmly but write smoothly + +### For Administrators + +The tablet optimizations and handwriting features work seamlessly with existing admin functions: +- User management remains unchanged +- Word list management improved with better touch targets +- Analytics display optimized for tablet viewing + +## ๐Ÿ”ง Configuration + +### Handwriting Recognition + +To enable advanced recognition services, configure in `handwriting.js`: + +```javascript +// Google Vision API (requires API key) +async recognizeWithGoogleVision(imageData) { + // Add your Google Vision API implementation +} + +// MyScript API (requires API credentials) +async recognizeWithMyScript() { + // Add your MyScript API implementation +} +``` + +### Tablet Detection + +Tablet detection can be customized in `tablet-utils.js`: + +```javascript +detectTablet() { + // Customize detection logic based on your requirements + const isTouch = 'ontouchstart' in window; + const isTabletSize = window.innerWidth >= 768 && window.innerWidth <= 1024; + return isTouch && isTabletSize; +} +``` + +## ๐ŸŽฏ Performance Considerations + +### Optimization Features +- Efficient canvas rendering +- Minimal DOM manipulation +- Event delegation for better performance +- Throttled recognition requests +- Optimized CSS animations + +### Memory Management +- Canvas cleanup on navigation +- Event listener removal +- Stroke data management +- Automatic cleanup of drawing history + +## ๐Ÿ”„ Future Enhancements + +### Planned Features +1. **Advanced Recognition**: ML-based handwriting models +2. **Multi-language Support**: Recognition for different languages +3. **Gesture Shortcuts**: Drawing gestures for common actions +4. **Offline Recognition**: Client-side recognition capabilities +5. **Collaborative Features**: Shared drawing sessions + +### Accessibility +- Voice commands integration +- High contrast mode support +- Screen reader compatibility +- Keyboard navigation fallbacks + +## ๐Ÿ› Troubleshooting + +### Common Issues + +1. **Canvas Not Responding**: + - Check if touch events are properly bound + - Verify canvas dimensions are set correctly + - Ensure no CSS is blocking pointer events + +2. **Recognition Not Working**: + - Verify canvas has drawing data + - Check console for recognition errors + - Ensure fallback recognition is enabled + +3. **Tablet Detection Issues**: + - Test on actual tablet devices + - Verify user agent detection + - Check window dimensions + +### Debug Mode + +Enable debug logging by adding to console: +```javascript +localStorage.setItem('debugHandwriting', 'true'); +localStorage.setItem('debugTablet', 'true'); +``` + +## ๐Ÿ“Š Analytics Integration + +The new features integrate with existing analytics: +- Track handwriting vs typing usage +- Monitor recognition accuracy +- Tablet interaction patterns +- Performance metrics + +## ๐Ÿ”’ Privacy and Security + +- Canvas drawings are processed locally when possible +- No drawing data is permanently stored +- Recognition requests can be configured for privacy compliance +- All touch interactions respect user privacy settings \ No newline at end of file diff --git a/TROUBLESHOOTING.md b/TROUBLESHOOTING.md new file mode 100644 index 0000000..e9ee243 --- /dev/null +++ b/TROUBLESHOOTING.md @@ -0,0 +1,97 @@ +# Tablet UI and Handwriting Issues - Troubleshooting Guide + +## Current Status + +### โœ… What's Been Implemented: + +1. **Tablet-Optimized CSS** + - `tablet.css` - Comprehensive tablet styles + - `handwriting.css` - Canvas and handwriting-specific styles + - Enhanced button sizes (min 50px height, larger fonts) + - Touch-friendly spacing and padding + - Responsive design for tablet viewports + +2. **Handwriting Recognition System** + - `handwriting.js` - Full canvas drawing implementation + - Touch and mouse event handling + - Basic pattern recognition (extendable) + - Canvas controls (clear, undo, recognize) + +3. **Enhanced HTML Structure** + - Input mode toggle (Type โŒจ๏ธ / Write โœ๏ธ) + - Canvas element with proper sizing + - Tablet-friendly activity cards + - Improved button layouts + +### โŒ Current Issues Identified: + +1. **Tablet CSS Not Fully Applied** + - Media query might be too restrictive + - Some styles being overridden by existing CSS + - Need better tablet detection + +2. **Handwriting Interface Not Visible** + - Canvas might not be properly initialized + - Toggle function might not be working + - CSS display properties conflicting + +## Quick Fixes Needed: + +### Fix 1: Improve Tablet CSS Application +```css +/* Change media query to be more inclusive */ +@media screen and (min-width: 600px), (pointer: coarse) { + /* Tablet styles */ +} +``` + +### Fix 2: Force Tablet Styles in Main CSS +Add `!important` declarations to critical tablet styles in `styles.css` + +### Fix 3: Debug Canvas Initialization +Add console logging to track canvas setup process + +### Fix 4: Simplify Toggle Function +Make input mode switching more reliable with explicit show/hide + +## Immediate Action Plan: + +1. **Test the separate tablet-test.html page** - This shows how it should work +2. **Fix CSS conflicts** in the main app +3. **Improve canvas initialization** with better error handling +4. **Add debug logging** to track what's happening +5. **Ensure student login works** to access handwriting features + +## Files to Check: + +- `public/index.html` - HTML structure +- `public/styles.css` - Main styles (may need tablet overrides) +- `public/tablet.css` - Tablet-specific styles +- `public/handwriting.css` - Canvas styles +- `public/js/handwriting.js` - Canvas functionality +- `public/js/tablet-utils.js` - Tablet optimizations + +## Testing Steps: + +1. Open `tablet-test.html` to see working example +2. Login as student (nate/nate123 or student1/123456) +3. Start spelling game +4. Check browser console for errors +5. Try toggling between type/write modes +6. Test canvas drawing if handwriting mode works + +## Browser Console Commands for Testing: + +```javascript +// Check if handwriting is initialized +console.log(window.handwritingRecognition); + +// Check canvas element +console.log(document.getElementById('handwritingCanvas')); + +// Test toggle function +window.toggleInputMode('handwriting'); + +// Check CSS loading +console.log(document.querySelector('link[href*="tablet.css"]')); +``` \ No newline at end of file diff --git a/build-tablet-test.ps1 b/build-tablet-test.ps1 new file mode 100644 index 0000000..629a35c --- /dev/null +++ b/build-tablet-test.ps1 @@ -0,0 +1,116 @@ +# PowerShell script to build and push Docker image with "test" tag for tablet testing + +# Set variables +$IMAGE_NAME = "ghcr.io/nmemmert/spelling" +$TEST_TAG = "test" +$VERSION = (Get-Content -Path "version.json" | ConvertFrom-Json).version + +Write-Host "๐Ÿ–Š๏ธ Building Docker image for TABLET HANDWRITING TESTING..." -ForegroundColor Magenta +Write-Host "๐Ÿ“ฆ Image: ${IMAGE_NAME}:${TEST_TAG}" -ForegroundColor Cyan +Write-Host "๐Ÿ”– Base Version: ${VERSION}" -ForegroundColor Cyan + +# Add test-specific metadata to the build +$BUILD_DATE = Get-Date -Format "yyyy-MM-ddTHH:mm:ssZ" +$GIT_COMMIT = git rev-parse --short HEAD 2>$null +if (-not $GIT_COMMIT) { $GIT_COMMIT = "unknown" } + +Write-Host "๐Ÿ“ Git Commit: $GIT_COMMIT" -ForegroundColor Yellow +Write-Host "๐Ÿ“… Build Date: $BUILD_DATE" -ForegroundColor Yellow + +# Build the image with test tag and labels +Write-Host "๐Ÿ”จ Building Docker image..." -ForegroundColor Cyan +docker build ` + --label "version=${VERSION}-test" ` + --label "build-date=${BUILD_DATE}" ` + --label "git-commit=${GIT_COMMIT}" ` + --label "tablet-features=enabled" ` + --label "handwriting-recognition=native+enhanced" ` + -t ${IMAGE_NAME}:${TEST_TAG} ` + -t ${IMAGE_NAME}:${VERSION}-test ` + . + +if ($LASTEXITCODE -ne 0) { + Write-Host "โŒ Docker build failed!" -ForegroundColor Red + exit 1 +} + +Write-Host "โœ… Build completed." -ForegroundColor Green +Write-Host "๐Ÿงช Testing the image..." -ForegroundColor Cyan + +# Run container for testing +docker run --name spelling-test-tablet -d -p 3002:3000 ${IMAGE_NAME}:${TEST_TAG} + +# Wait for container to start +Write-Host "โฑ๏ธ Waiting for container to start..." -ForegroundColor Yellow +Start-Sleep -Seconds 8 + +# Test health endpoint +try { + $response = Invoke-WebRequest -Uri "http://localhost:3002/health" -UseBasicParsing -TimeoutSec 10 + if ($response.StatusCode -eq 200) { + Write-Host "โœ… Health check passed!" -ForegroundColor Green + + # Test main page + $mainResponse = Invoke-WebRequest -Uri "http://localhost:3002/" -UseBasicParsing -TimeoutSec 10 + if ($mainResponse.StatusCode -eq 200) { + Write-Host "โœ… Main page accessible!" -ForegroundColor Green + + # Check for handwriting features in the HTML + if ($mainResponse.Content -like "*native-handwriting.js*") { + Write-Host "๐Ÿ–Š๏ธ Native handwriting support detected!" -ForegroundColor Green + } + if ($mainResponse.Content -like "*handwriting-canvas*") { + Write-Host "๐ŸŽจ Handwriting canvas found!" -ForegroundColor Green + } + } + } else { + Write-Host "โŒ Health check failed with status $($response.StatusCode)" -ForegroundColor Red + docker logs spelling-test-tablet + docker stop spelling-test-tablet + docker rm spelling-test-tablet + exit 1 + } +} catch { + Write-Host "โŒ Health check failed: $_" -ForegroundColor Red + Write-Host "๐Ÿ“‹ Container logs:" -ForegroundColor Yellow + docker logs spelling-test-tablet + docker stop spelling-test-tablet + docker rm spelling-test-tablet + exit 1 +} + +# Stop and remove test container +docker stop spelling-test-tablet +docker rm spelling-test-tablet + +Write-Host "๐Ÿ“ค Pushing image to GitHub Container Registry..." -ForegroundColor Cyan +Write-Host "๐Ÿท๏ธ Pushing tags: ${TEST_TAG} and ${VERSION}-test" -ForegroundColor Yellow + +docker push ${IMAGE_NAME}:${TEST_TAG} +docker push ${IMAGE_NAME}:${VERSION}-test + +if ($LASTEXITCODE -eq 0) { + Write-Host "" -ForegroundColor Green + Write-Host "๐Ÿš€ Successfully built and pushed TABLET TEST image!" -ForegroundColor Green + Write-Host "" -ForegroundColor White + Write-Host "๐Ÿ“ฑ TABLET TESTING INSTRUCTIONS:" -ForegroundColor Magenta + Write-Host "=================================" -ForegroundColor Magenta + Write-Host "1. Deploy using: docker pull ${IMAGE_NAME}:${TEST_TAG}" -ForegroundColor White + Write-Host "2. Run on tablet-accessible server" -ForegroundColor White + Write-Host "3. Test handwriting recognition with stylus/touch" -ForegroundColor White + Write-Host "4. Features included:" -ForegroundColor White + Write-Host " โ€ข Native tablet handwriting APIs" -ForegroundColor Cyan + Write-Host " โ€ข Pressure-sensitive stylus support" -ForegroundColor Cyan + Write-Host " โ€ข Enhanced pattern recognition" -ForegroundColor Cyan + Write-Host " โ€ข Touch event optimization" -ForegroundColor Cyan + Write-Host " โ€ข Pointer Events API integration" -ForegroundColor Cyan + Write-Host "" -ForegroundColor White + Write-Host "๐Ÿ”— Image: ${IMAGE_NAME}:${TEST_TAG}" -ForegroundColor Yellow + Write-Host "" -ForegroundColor White +} else { + Write-Host "โŒ Push failed!" -ForegroundColor Red + exit 1 +} + +Write-Host "Press any key to exit..." +$null = $Host.UI.RawUI.ReadKey("NoEcho,IncludeKeyDown") \ No newline at end of file diff --git a/public/handwriting.css b/public/handwriting.css new file mode 100644 index 0000000..95ae7ad --- /dev/null +++ b/public/handwriting.css @@ -0,0 +1,421 @@ +/* Handwriting Recognition Styles */ + +/* Canvas container */ +.handwriting-container { + background: var(--bg-primary); + border-radius: 16px; + padding: 1.5rem; + margin: 1.5rem auto; + box-shadow: var(--shadow-lg); + border: 2px solid var(--border); + max-width: 600px; + text-align: center; +} + +.handwriting-container.active { + border-color: var(--primary); + box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); +} + +/* Canvas element */ +#handwritingCanvas { + border: 2px solid var(--border); + border-radius: 12px; + background: white; + cursor: crosshair; + display: block; + margin: 1rem auto; + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); + touch-action: none; /* Prevent scrolling on touch devices */ +} + +#handwritingCanvas:focus { + outline: none; + border-color: var(--primary); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(59, 130, 246, 0.1); +} + +/* Canvas controls */ +.canvas-controls { + display: flex; + justify-content: center; + align-items: center; + gap: 1rem; + margin: 1rem 0; + flex-wrap: wrap; +} + +.canvas-controls button { + padding: 0.75rem 1.5rem; + border: none; + border-radius: 8px; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: all 0.2s ease; + min-height: 44px; + min-width: 44px; +} + +.canvas-controls .clear-btn { + background-color: var(--error); + color: white; +} + +.canvas-controls .clear-btn:hover { + background-color: #dc2626; + transform: translateY(-1px); +} + +.canvas-controls .recognize-btn { + background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); + color: white; +} + +.canvas-controls .recognize-btn:hover { + transform: translateY(-1px); + box-shadow: var(--shadow-lg); +} + +.canvas-controls .recognize-btn:disabled { + background: var(--text-secondary); + cursor: not-allowed; + transform: none; +} + +.canvas-controls .undo-btn { + background-color: var(--warning); + color: white; +} + +.canvas-controls .undo-btn:hover { + background-color: #d97706; + transform: translateY(-1px); +} + +/* Input mode toggle */ +.input-mode-toggle { + display: flex; + background: var(--secondary); + border-radius: 12px; + padding: 0.25rem; + margin: 1.5rem auto; + max-width: 300px; + position: relative; +} + +.input-mode-toggle button { + flex: 1; + padding: 0.75rem 1.5rem; + border: none; + background: transparent; + color: var(--text-secondary); + font-weight: 600; + border-radius: 8px; + cursor: pointer; + transition: all 0.2s ease; + position: relative; + z-index: 2; +} + +.input-mode-toggle button.active { + background: var(--bg-primary); + color: var(--primary); + box-shadow: var(--shadow); +} + +.input-mode-toggle button:not(.active):hover { + color: var(--text-primary); +} + +/* Recognition status */ +.recognition-status { + margin: 1rem 0; + padding: 0.75rem 1rem; + border-radius: 8px; + font-weight: 600; + text-align: center; + min-height: 20px; +} + +.recognition-status.processing { + background-color: #fef3c7; + color: #92400e; + border: 1px solid #fcd34d; +} + +.recognition-status.success { + background-color: #f0fdf4; + color: var(--success); + border: 1px solid var(--success); +} + +.recognition-status.error { + background-color: #fef2f2; + color: var(--error); + border: 1px solid var(--error); +} + +.recognition-status.empty { + background: transparent; + border: none; +} + +/* Recognized text display */ +.recognized-text { + background: var(--secondary); + border-radius: 8px; + padding: 1rem; + margin: 1rem 0; + font-size: 1.25rem; + font-weight: 600; + min-height: 50px; + display: flex; + align-items: center; + justify-content: center; + color: var(--text-primary); + border: 2px solid var(--border); +} + +.recognized-text.has-content { + background: var(--bg-primary); + border-color: var(--primary); + color: var(--primary); +} + +/* Handwriting hints */ +.handwriting-hints { + background: var(--secondary); + border-radius: 8px; + padding: 1rem; + margin: 1rem 0; + font-size: 0.875rem; + color: var(--text-secondary); + text-align: left; +} + +.handwriting-hints h4 { + color: var(--text-primary); + margin-bottom: 0.5rem; + font-size: 1rem; +} + +.handwriting-hints ul { + margin: 0; + padding-left: 1.5rem; +} + +.handwriting-hints li { + margin-bottom: 0.25rem; +} + +/* Stroke width selector */ +.stroke-controls { + display: flex; + align-items: center; + gap: 1rem; + margin: 0.5rem 0; +} + +.stroke-controls label { + font-size: 0.875rem; + color: var(--text-secondary); + font-weight: 600; +} + +.stroke-width-slider { + width: 100px; + height: 6px; + border-radius: 3px; + background: var(--border); + outline: none; + -webkit-appearance: none; + appearance: none; +} + +.stroke-width-slider::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 20px; + height: 20px; + border-radius: 50%; + background: var(--primary); + cursor: pointer; + box-shadow: var(--shadow); +} + +.stroke-width-slider::-moz-range-thumb { + width: 20px; + height: 20px; + border-radius: 50%; + background: var(--primary); + cursor: pointer; + border: none; + box-shadow: var(--shadow); +} + +/* Color picker */ +.color-controls { + display: flex; + align-items: center; + gap: 1rem; + margin: 0.5rem 0; +} + +.color-picker { + width: 40px; + height: 40px; + border: 2px solid var(--border); + border-radius: 8px; + background: none; + cursor: pointer; + padding: 0; +} + +.color-picker:hover { + border-color: var(--primary); +} + +/* Tablet-specific handwriting styles */ +@media screen and (min-width: 768px) and (max-width: 1024px) { + .handwriting-container { + padding: 2rem; + margin: 2rem auto; + max-width: 700px; + } + + #handwritingCanvas { + width: 100%; + max-width: 600px; + height: 300px; + } + + .canvas-controls { + gap: 1.5rem; + margin: 1.5rem 0; + } + + .canvas-controls button { + padding: 1rem 2rem; + font-size: 1.125rem; + min-height: 50px; + min-width: 100px; + } + + .input-mode-toggle { + max-width: 400px; + margin: 2rem auto; + } + + .input-mode-toggle button { + padding: 1rem 2rem; + font-size: 1.125rem; + } + + .recognized-text { + font-size: 1.5rem; + padding: 1.5rem; + min-height: 60px; + } + + .handwriting-hints { + padding: 1.5rem; + font-size: 1rem; + } + + .handwriting-hints h4 { + font-size: 1.125rem; + } +} + +/* Mobile handwriting adjustments */ +@media screen and (max-width: 767px) { + .handwriting-container { + margin: 1rem; + padding: 1rem; + } + + #handwritingCanvas { + width: 100%; + height: 250px; + } + + .canvas-controls { + flex-direction: column; + gap: 0.5rem; + } + + .canvas-controls button { + width: 100%; + max-width: 200px; + } + + .input-mode-toggle { + max-width: 280px; + } + + .stroke-controls, + .color-controls { + justify-content: center; + flex-wrap: wrap; + } +} + +/* Animation for canvas drawing */ +@keyframes drawStroke { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +.drawing-animation { + animation: drawStroke 0.1s ease-out; +} + +/* Loading spinner for recognition */ +.recognition-spinner { + width: 20px; + height: 20px; + border: 2px solid var(--border); + border-top-color: var(--primary); + border-radius: 50%; + animation: spin 1s linear infinite; + display: inline-block; + margin-right: 0.5rem; +} + +@keyframes spin { + to { + transform: rotate(360deg); + } +} + +/* Accessibility improvements */ +.handwriting-container:focus-within { + outline: 2px solid var(--primary); + outline-offset: 2px; +} + +.canvas-controls button:focus { + outline: 2px solid var(--primary); + outline-offset: 2px; +} + +/* High contrast mode support */ +@media (prefers-contrast: high) { + #handwritingCanvas { + border-width: 3px; + border-color: #000; + } + + .canvas-controls button { + border: 2px solid currentColor; + } + + .recognition-status { + border-width: 2px; + } +} \ No newline at end of file diff --git a/public/index.html b/public/index.html index e547655..9bf57c4 100644 --- a/public/index.html +++ b/public/index.html @@ -2,17 +2,27 @@ - + + + + โœจ Modern Spelling Practice + + + + + - + + + + + + + + @@ -70,50 +85,233 @@

- +