{% extends "base.html" %}

{% block content %}
<!-- Features Hero -->
<section class="features-hero bg-gradient-primary text-white py-5">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center">
                <h1 class="display-4 fw-bold mb-4">
                    <i class="fas fa-universal-access" aria-hidden="true"></i>
                    Accessibility Features
                </h1>
                <p class="lead">
                    PrismaOS provides comprehensive accessibility features designed specifically for users 
                    with disabilities, ensuring everyone can enjoy a full smartphone experience.
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Interactive Feature Demos -->
<section class="feature-demos py-5">
    <div class="container">
        <div class="row">
            <div class="col-12 mb-5">
                <h2 class="text-center mb-4">Interactive Feature Demonstrations</h2>
                <p class="text-center text-muted">
                    Experience how PrismaOS accessibility features work through these interactive demos.
                </p>
            </div>
        </div>

        <!-- Text-to-Speech Demo -->
        <div class="row mb-5">
            <div class="col-lg-6">
                <div class="demo-card p-4 border rounded-3 h-100">
                    <h3 class="h4 fw-bold mb-3">
                        <i class="fas fa-volume-up text-primary" aria-hidden="true"></i>
                        Text-to-Speech Engine
                    </h3>
                    <p class="text-muted mb-4">
                        Experience our advanced text-to-speech system that provides natural-sounding voice synthesis 
                        for all screen content with customizable voices and speeds.
                    </p>
                    <div class="demo-controls">
                        <div class="mb-3">
                            <label for="tts-text" class="form-label">Enter text to hear:</label>
                            <textarea id="tts-text" class="form-control" rows="3" 
                                    aria-describedby="tts-help">Welcome to PrismaOS, where accessibility meets innovation. Our text-to-speech engine provides clear, natural-sounding narration for all your mobile content.</textarea>
                            <div id="tts-help" class="form-text">This text will be read aloud when you press the play button.</div>
                        </div>
                        <div class="demo-buttons">
                            <button type="button" class="btn btn-primary me-2" id="play-tts" aria-describedby="play-help">
                                <i class="fas fa-play" aria-hidden="true"></i>
                                Play Text
                            </button>
                            <button type="button" class="btn btn-secondary" id="stop-tts">
                                <i class="fas fa-stop" aria-hidden="true"></i>
                                Stop
                            </button>
                            <div id="play-help" class="form-text mt-2">Click to hear the text read aloud using your browser's speech synthesis.</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="demo-card p-4 border rounded-3 h-100">
                    <h3 class="h4 fw-bold mb-3">
                        <i class="fas fa-adjust text-primary" aria-hidden="true"></i>
                        High Contrast Mode
                    </h3>
                    <p class="text-muted mb-4">
                        Toggle high contrast mode to improve visibility for users with low vision or 
                        visual processing difficulties.
                    </p>
                    <div class="demo-controls">
                        <div class="contrast-preview p-3 border rounded mb-3" id="contrast-preview">
                            <h5>Sample Content</h5>
                            <p>This is how text appears in different contrast modes. Notice how the colors change to improve readability.</p>
                            <button class="btn btn-outline-primary btn-sm">Sample Button</button>
                        </div>
                        <div class="demo-buttons">
                            <button type="button" class="btn btn-primary" id="toggle-contrast-demo">
                                <i class="fas fa-adjust" aria-hidden="true"></i>
                                Toggle High Contrast
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Voice Commands Demo -->
        <div class="row mb-5">
            <div class="col-lg-6">
                <div class="demo-card p-4 border rounded-3 h-100">
                    <h3 class="h4 fw-bold mb-3">
                        <i class="fas fa-microphone text-primary" aria-hidden="true"></i>
                        Voice Commands
                    </h3>
                    <p class="text-muted mb-4">
                        Control your device hands-free with comprehensive voice recognition. 
                        Try saying commands like "Open Settings" or "Read notifications".
                    </p>
                    <div class="demo-controls">
                        <div class="voice-status mb-3 p-3 bg-light rounded" id="voice-status">
                            <div class="d-flex align-items-center">
                                <div class="voice-indicator me-3" id="voice-indicator">
                                    <i class="fas fa-microphone-slash text-muted" aria-hidden="true"></i>
                                </div>
                                <div>
                                    <div class="fw-bold">Voice Recognition: <span id="voice-state">Not Active</span></div>
                                    <div class="text-muted small" id="voice-command">Click "Start Listening" to begin</div>
                                </div>
                            </div>
                        </div>
                        <div class="demo-buttons">
                            <button type="button" class="btn btn-primary" id="start-voice">
                                <i class="fas fa-microphone" aria-hidden="true"></i>
                                Start Listening
                            </button>
                            <button type="button" class="btn btn-secondary" id="stop-voice" disabled>
                                <i class="fas fa-microphone-slash" aria-hidden="true"></i>
                                Stop Listening
                            </button>
                        </div>
                        <div class="mt-3">
                            <small class="text-muted">
                                <strong>Try commands:</strong> "Hello", "What time is it?", "Help me navigate"
                            </small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="demo-card p-4 border rounded-3 h-100">
                    <h3 class="h4 fw-bold mb-3">
                        <i class="fas fa-hand-paper text-primary" aria-hidden="true"></i>
                        Gesture Controls
                    </h3>
                    <p class="text-muted mb-4">
                        Navigate using simplified touch gestures optimized for non-visual use. 
                        Each gesture provides haptic and audio feedback.
                    </p>
                    <div class="demo-controls">
                        <div class="gesture-area mb-3 p-4 border-2 border-dashed rounded text-center" 
                             id="gesture-area" 
                             tabindex="0"
                             role="application"
                             aria-label="Gesture practice area. Use touch gestures here to practice navigation."
                             style="min-height: 150px; cursor: pointer;">
                            <div class="gesture-instructions">
                                <i class="fas fa-hand-pointer fa-2x text-muted mb-2" aria-hidden="true"></i>
                                <p class="text-muted mb-0">Touch and gesture in this area</p>
                                <small class="text-muted">Single tap, double tap, swipe left/right</small>
                            </div>
                            <div class="gesture-feedback d-none" id="gesture-feedback">
                                <div class="fw-bold" id="gesture-type">Gesture Detected</div>
                                <div class="text-muted" id="gesture-description">Description will appear here</div>
                            </div>
                        </div>
                        <div class="gesture-legend">
                            <small class="text-muted">
                                <strong>Gestures:</strong> Single tap (select), Double tap (activate), 
                                Swipe right (next), Swipe left (previous)
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Detailed Feature Categories -->
<section class="feature-categories bg-light py-5">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center mb-5">
                <h2 class="display-5 fw-bold">Comprehensive Accessibility Support</h2>
                <p class="lead text-muted">PrismaOS provides specialized features for different accessibility needs</p>
            </div>
        </div>

        <!-- For Deaf Users -->
        <div class="row mb-5">
            <div class="col-12">
                <div class="feature-category-card border rounded-3 overflow-hidden">
                    <div class="row g-0">
                        <div class="col-md-4 bg-primary text-white d-flex align-items-center justify-content-center p-4">
                            <div class="text-center">
                                <i class="fas fa-deaf fa-4x mb-3" aria-hidden="true"></i>
                                <h3 class="h4 fw-bold">For Deaf Users</h3>
                            </div>
                        </div>
                        <div class="col-md-8 p-4">
                            <div class="row g-3">
                                <div class="col-sm-6">
                                    <div class="feature-item">
                                        <h4 class="h6 fw-bold text-primary mb-2">
                                            <i class="fas fa-closed-captioning" aria-hidden="true"></i>
                                            Advanced Closed Captioning
                                        </h4>
                                        <p class="text-muted mb-0">Real-time transcription for all audio content with customizable styling and positioning.</p>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="feature-item">
                                        <h4 class="h6 fw-bold text-primary mb-2">
                                            <i class="fas fa-eye" aria-hidden="true"></i>
                                            Visual Notifications
                                        </h4>
                                        <p class="text-muted mb-0">Enhanced visual alerts for calls, messages, and system events with color coding.</p>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="feature-item">
                                        <h4 class="h6 fw-bold text-primary mb-2">
                                            <i class="fas fa-hands" aria-hidden="true"></i>
                                            Sign Language Recognition
                                        </h4>
                                        <p class="text-muted mb-0">Camera-based sign language interpretation and translation capabilities.</p>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="feature-item">
                                        <h4 class="h6 fw-bold text-primary mb-2">
                                            <i class="fas fa-mobile-alt" aria-hidden="true"></i>
                                            Haptic Feedback
                                        </h4>
                                        <p class="text-muted mb-0">Customizable vibration patterns for different notifications and interactions.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- For Blind Users -->
        <div class="row mb-5">
            <div class="col-12">
                <div class="feature-category-card border rounded-3 overflow-hidden">
                    <div class="row g-0">
                        <div class="col-md-4 bg-success text-white d-flex align-items-center justify-content-center p-4">
                            <div class="text-center">
                                <i class="fas fa-blind fa-4x mb-3" aria-hidden="true"></i>
                                <h3 class="h4 fw-bold">For Blind Users</h3>
                            </div>
                        </div>
                        <div class="col-md-8 p-4">
                            <div class="row g-3">
                                <div class="col-sm-6">
                                    <div class="feature-item">
                                        <h4 class="h6 fw-bold text-success mb-2">
                                            <i class="fas fa-volume-up" aria-hidden="true"></i>
                                            Advanced Text-to-Speech
                                        </h4>
                                        <p class="text-muted mb-0">Natural-sounding voice synthesis with multiple languages and customizable speech rates.</p>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="feature-item">
                                        <h4 class="h6 fw-bold text-success mb-2">
                                            <i class="fas fa-microphone" aria-hidden="true"></i>
                                            Voice Commands
                                        </h4>
                                        <p class="text-muted mb-0">Comprehensive speech recognition for hands-free operation and navigation.</p>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="feature-item">
                                        <h4 class="h6 fw-bold text-success mb-2">
                                            <i class="fas fa-audio-description" aria-hidden="true"></i>
                                            Audio Descriptions
                                        </h4>
                                        <p class="text-muted mb-0">Automatic generation of descriptions for visual content and interface elements.</p>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="feature-item">
                                        <h4 class="h6 fw-bold text-success mb-2">
                                            <i class="fas fa-hand-paper" aria-hidden="true"></i>
                                            Gesture Controls
                                        </h4>
                                        <p class="text-muted mb-0">Simplified touch gestures optimized for non-visual use with audio feedback.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Universal Design Features -->
        <div class="row">
            <div class="col-12">
                <div class="feature-category-card border rounded-3 overflow-hidden">
                    <div class="row g-0">
                        <div class="col-md-4 bg-warning text-dark d-flex align-items-center justify-content-center p-4">
                            <div class="text-center">
                                <i class="fas fa-universal-access fa-4x mb-3" aria-hidden="true"></i>
                                <h3 class="h4 fw-bold">Universal Design</h3>
                            </div>
                        </div>
                        <div class="col-md-8 p-4">
                            <div class="row g-3">
                                <div class="col-sm-6">
                                    <div class="feature-item">
                                        <h4 class="h6 fw-bold text-warning mb-2">
                                            <i class="fas fa-cogs" aria-hidden="true"></i>
                                            Adaptive Interfaces
                                        </h4>
                                        <p class="text-muted mb-0">UI elements that automatically adjust based on individual user needs and preferences.</p>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="feature-item">
                                        <h4 class="h6 fw-bold text-warning mb-2">
                                            <i class="fas fa-user-cog" aria-hidden="true"></i>
                                            Accessibility Profiles
                                        </h4>
                                        <p class="text-muted mb-0">Quick-switching between different accessibility configurations for various situations.</p>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="feature-item">
                                        <h4 class="h6 fw-bold text-warning mb-2">
                                            <i class="fas fa-exchange-alt" aria-hidden="true"></i>
                                            Sensory Substitution
                                        </h4>
                                        <p class="text-muted mb-0">Converting information between different sensory modalities (visual, auditory, tactile).</p>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="feature-item">
                                        <h4 class="h6 fw-bold text-warning mb-2">
                                            <i class="fas fa-robot" aria-hidden="true"></i>
                                            AI-Powered Assistance
                                        </h4>
                                        <p class="text-muted mb-0">Contextual help and navigation assistance powered by machine learning.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Accessibility Standards -->
<section class="standards-section py-5">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center mb-5">
                <h2 class="display-5 fw-bold">Accessibility Standards Compliance</h2>
                <p class="lead text-muted">PrismaOS exceeds international accessibility standards and guidelines</p>
            </div>
        </div>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="standards-card text-center p-4 border rounded-3 h-100">
                    <div class="standards-icon mb-3">
                        <i class="fas fa-certificate fa-3x text-primary" aria-hidden="true"></i>
                    </div>
                    <h3 class="h5 fw-bold">WCAG 2.1 AAA</h3>
                    <p class="text-muted">Exceeds Web Content Accessibility Guidelines Level AAA compliance for comprehensive accessibility.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="standards-card text-center p-4 border rounded-3 h-100">
                    <div class="standards-icon mb-3">
                        <i class="fas fa-balance-scale fa-3x text-success" aria-hidden="true"></i>
                    </div>
                    <h3 class="h5 fw-bold">ADA Compliance</h3>
                    <p class="text-muted">Meets Americans with Disabilities Act requirements for digital accessibility and equal access.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="standards-card text-center p-4 border rounded-3 h-100">
                    <div class="standards-icon mb-3">
                        <i class="fas fa-globe fa-3x text-info" aria-hidden="true"></i>
                    </div>
                    <h3 class="h5 fw-bold">International Standards</h3>
                    <p class="text-muted">Complies with ISO/IEC 40500 and EN 301 549 for global accessibility standards.</p>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}