{% extends "base.html" %}

{% block content %}
<!-- Technical Hero -->
<section class="technical-hero bg-dark 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-cogs" aria-hidden="true"></i>
                    Technical Documentation
                </h1>
                <p class="lead">
                    Comprehensive technical specifications and implementation details for PrismaOS
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Architecture Overview -->
<section class="architecture-overview py-5">
    <div class="container">
        <div class="row">
            <div class="col-12 mb-5">
                <h2 class="display-5 fw-bold text-center mb-4">System Architecture</h2>
                <p class="lead text-center text-muted">
                    PrismaOS is built on a layered architecture that prioritizes accessibility at every level
                </p>
            </div>
        </div>
        
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <div class="architecture-diagram mb-5">
                    <svg width="100%" height="500" viewBox="0 0 600 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="detailed-architecture-title">
                        <title id="detailed-architecture-title">Detailed PrismaOS System Architecture</title>
                        
                        <!-- Application Layer -->
                        <rect x="50" y="40" width="500" height="60" rx="8" fill="#e3f2fd" stroke="#1976d2" stroke-width="2"/>
                        <text x="300" y="75" text-anchor="middle" font-size="16" font-weight="bold" fill="#1976d2">Application Layer</text>
                        
                        <!-- Accessibility Framework -->
                        <rect x="50" y="120" width="500" height="80" rx="8" fill="#fff3e0" stroke="#f57c00" stroke-width="2"/>
                        <text x="300" y="145" text-anchor="middle" font-size="16" font-weight="bold" fill="#f57c00">Accessibility Framework</text>
                        <text x="150" y="170" text-anchor="middle" font-size="12" fill="#666">Screen Reader</text>
                        <text x="300" y="170" text-anchor="middle" font-size="12" fill="#666">Voice Recognition</text>
                        <text x="450" y="170" text-anchor="middle" font-size="12" fill="#666">Gesture Control</text>
                        <text x="150" y="185" text-anchor="middle" font-size="12" fill="#666">TTS Engine</text>
                        <text x="300" y="185" text-anchor="middle" font-size="12" fill="#666">Visual Alerts</text>
                        <text x="450" y="185" text-anchor="middle" font-size="12" fill="#666">Haptic Feedback</text>
                        
                        <!-- Mobile UI Framework -->
                        <rect x="50" y="220" width="500" height="60" rx="8" fill="#e8f5e8" stroke="#388e3c" stroke-width="2"/>
                        <text x="300" y="255" text-anchor="middle" font-size="16" font-weight="bold" fill="#388e3c">Mobile UI Framework</text>
                        
                        <!-- Hardware Abstraction Layer -->
                        <rect x="50" y="300" width="500" height="60" rx="8" fill="#fce4ec" stroke="#c2185b" stroke-width="2"/>
                        <text x="300" y="335" text-anchor="middle" font-size="16" font-weight="bold" fill="#c2185b">Hardware Abstraction Layer</text>
                        
                        <!-- Red Hat Linux Kernel -->
                        <rect x="50" y="380" width="500" height="60" rx="8" fill="#ffebee" stroke="#d32f2f" stroke-width="2"/>
                        <text x="300" y="415" text-anchor="middle" font-size="16" font-weight="bold" fill="#d32f2f">Red Hat Linux Kernel (Modified)</text>
                        
                        <!-- Hardware -->
                        <rect x="50" y="460" width="500" height="30" rx="8" fill="#f5f5f5" stroke="#757575" stroke-width="2"/>
                        <text x="300" y="480" text-anchor="middle" font-size="14" font-weight="bold" fill="#424242">Mobile Hardware</text>
                        
                        <!-- Connection arrows -->
                        <defs>
                            <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
                                <polygon points="0 0, 10 3.5, 0 7" fill="#666"/>
                            </marker>
                        </defs>
                        
                        <line x1="300" y1="100" x2="300" y2="120" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)"/>
                        <line x1="300" y1="200" x2="300" y2="220" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)"/>
                        <line x1="300" y1="280" x2="300" y2="300" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)"/>
                        <line x1="300" y1="360" x2="300" y2="380" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)"/>
                        <line x1="300" y1="440" x2="300" y2="460" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)"/>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Technical Implementation -->
<section class="technical-implementation bg-light py-5">
    <div class="container">
        <div class="row">
            <div class="col-12 mb-5">
                <h2 class="display-5 fw-bold text-center">Technical Implementation</h2>
            </div>
        </div>
        
        <div class="row g-4">
            <!-- Kernel Modifications -->
            <div class="col-lg-6">
                <div class="tech-card h-100 p-4 bg-white border rounded-3">
                    <h3 class="h4 fw-bold mb-3">
                        <i class="fas fa-microchip text-danger" aria-hidden="true"></i>
                        Kernel Modifications
                    </h3>
                    <p class="text-muted mb-3">
                        Adapting the Red Hat Linux kernel for mobile hardware and real-time accessibility processing.
                    </p>
                    <ul class="list-unstyled">
                        <li class="mb-2">
                            <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                            Real-time scheduling for accessibility services
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                            Low-latency audio processing for TTS
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                            Enhanced power management for accessibility features
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                            Custom drivers for accessibility hardware
                        </li>
                    </ul>
                </div>
            </div>
            
            <!-- Accessibility Framework -->
            <div class="col-lg-6">
                <div class="tech-card h-100 p-4 bg-white border rounded-3">
                    <h3 class="h4 fw-bold mb-3">
                        <i class="fas fa-universal-access text-warning" aria-hidden="true"></i>
                        Accessibility Framework
                    </h3>
                    <p class="text-muted mb-3">
                        Core accessibility services providing comprehensive support for assistive technologies.
                    </p>
                    <ul class="list-unstyled">
                        <li class="mb-2">
                            <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                            Multi-modal input/output processing
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                            Accessibility API for third-party apps
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                            Machine learning accessibility assistance
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                            Cross-platform accessibility standards
                        </li>
                    </ul>
                </div>
            </div>
            
            <!-- Performance Optimization -->
            <div class="col-lg-6">
                <div class="tech-card h-100 p-4 bg-white border rounded-3">
                    <h3 class="h4 fw-bold mb-3">
                        <i class="fas fa-tachometer-alt text-info" aria-hidden="true"></i>
                        Performance Optimization
                    </h3>
                    <p class="text-muted mb-3">
                        Ensuring efficient battery usage while maintaining responsive accessibility features.
                    </p>
                    <ul class="list-unstyled">
                        <li class="mb-2">
                            <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                            Adaptive CPU scaling for accessibility workloads
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                            GPU acceleration for visual processing
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                            Memory optimization for continuous services
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                            Network efficiency for cloud-based AI
                        </li>
                    </ul>
                </div>
            </div>
            
            <!-- Security Framework -->
            <div class="col-lg-6">
                <div class="tech-card h-100 p-4 bg-white border rounded-3">
                    <h3 class="h4 fw-bold mb-3">
                        <i class="fas fa-shield-alt text-primary" aria-hidden="true"></i>
                        Security Framework
                    </h3>
                    <p class="text-muted mb-3">
                        Enterprise-grade security inherited from Red Hat with accessibility-specific protections.
                    </p>
                    <ul class="list-unstyled">
                        <li class="mb-2">
                            <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                            SELinux mandatory access control
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                            Encrypted accessibility data storage
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                            Secure voice recognition processing
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                            Privacy-focused AI assistance
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- System Requirements -->
<section class="system-requirements py-5">
    <div class="container">
        <div class="row">
            <div class="col-12 mb-5">
                <h2 class="display-5 fw-bold text-center">System Requirements</h2>
                <p class="lead text-center text-muted">
                    Hardware and software requirements for running PrismaOS
                </p>
            </div>
        </div>
        
        <div class="row g-4">
            <div class="col-md-6">
                <div class="requirements-card p-4 border rounded-3 h-100">
                    <h3 class="h5 fw-bold mb-3">
                        <i class="fas fa-mobile-alt text-primary" aria-hidden="true"></i>
                        Minimum Requirements
                    </h3>
                    <table class="table table-borderless">
                        <tbody>
                            <tr>
                                <td class="fw-bold">Processor:</td>
                                <td>ARM64 or x86_64, 1.5GHz+</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Memory:</td>
                                <td>3GB RAM</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Storage:</td>
                                <td>32GB internal storage</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Display:</td>
                                <td>5.0" 1080x1920 (minimum)</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Audio:</td>
                                <td>Speakers and microphone required</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Sensors:</td>
                                <td>Accelerometer, proximity sensor</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="requirements-card p-4 border rounded-3 h-100">
                    <h3 class="h5 fw-bold mb-3">
                        <i class="fas fa-star text-warning" aria-hidden="true"></i>
                        Recommended Requirements
                    </h3>
                    <table class="table table-borderless">
                        <tbody>
                            <tr>
                                <td class="fw-bold">Processor:</td>
                                <td>ARM64 or x86_64, 2.0GHz+ (8 cores)</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Memory:</td>
                                <td>6GB+ RAM</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Storage:</td>
                                <td>128GB+ internal storage</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Display:</td>
                                <td>6.0"+ 1440x2560 (OLED preferred)</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Audio:</td>
                                <td>Stereo speakers, noise-canceling mic</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Additional:</td>
                                <td>Camera, vibration motor, NFC</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- API Documentation -->
<section class="api-documentation bg-light py-5">
    <div class="container">
        <div class="row">
            <div class="col-12 mb-5">
                <h2 class="display-5 fw-bold text-center">Accessibility API</h2>
                <p class="lead text-center text-muted">
                    Core APIs for developers to integrate accessibility features
                </p>
            </div>
        </div>
        
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <div class="api-sections">
                    <!-- Text-to-Speech API -->
                    <div class="api-section mb-4 p-4 bg-white border rounded-3">
                        <h3 class="h5 fw-bold mb-3">
                            <i class="fas fa-volume-up text-primary" aria-hidden="true"></i>
                            Text-to-Speech API
                        </h3>
                        <p class="text-muted mb-3">Provide speech output for your application content</p>
                        
                        <div class="code-example">
                            <pre class="bg-dark text-light p-3 rounded"><code>// Initialize TTS service
const tts = new PrismaOS.TTS({
    language: 'en-US',
    voice: 'natural-female',
    rate: 1.0,
    pitch: 1.0
});

// Speak text with callback
tts.speak('Hello, welcome to PrismaOS', {
    onStart: () => console.log('Speaking started'),
    onEnd: () => console.log('Speaking finished'),
    onError: (error) => console.error('TTS Error:', error)
});

// Configure accessibility announcements
tts.announceAccessibilityChange('New notification received');</code></pre>
                        </div>
                    </div>
                    
                    <!-- Voice Recognition API -->
                    <div class="api-section mb-4 p-4 bg-white border rounded-3">
                        <h3 class="h5 fw-bold mb-3">
                            <i class="fas fa-microphone text-success" aria-hidden="true"></i>
                            Voice Recognition API
                        </h3>
                        <p class="text-muted mb-3">Enable voice control in your applications</p>
                        
                        <div class="code-example">
                            <pre class="bg-dark text-light p-3 rounded"><code>// Initialize voice recognition
const voiceRecognition = new PrismaOS.VoiceRecognition({
    language: 'en-US',
    continuous: true,
    interimResults: true
});

// Define voice commands
voiceRecognition.addCommand('open settings', () => {
    PrismaOS.Navigation.openSettings();
});

voiceRecognition.addCommand('read notifications', () => {
    PrismaOS.Notifications.readAll();
});

// Start listening
voiceRecognition.start();</code></pre>
                        </div>
                    </div>
                    
                    <!-- Accessibility Events API -->
                    <div class="api-section p-4 bg-white border rounded-3">
                        <h3 class="h5 fw-bold mb-3">
                            <i class="fas fa-broadcast-tower text-warning" aria-hidden="true"></i>
                            Accessibility Events API
                        </h3>
                        <p class="text-muted mb-3">Listen for and respond to accessibility events</p>
                        
                        <div class="code-example">
                            <pre class="bg-dark text-light p-3 rounded"><code>// Listen for accessibility events
PrismaOS.Accessibility.addEventListener('focusChanged', (event) => {
    console.log('Focus moved to:', event.element);
    // Announce focus change to screen reader
    PrismaOS.TTS.announce(event.element.accessibilityLabel);
});

// Trigger accessibility events
PrismaOS.Accessibility.triggerEvent('contentChanged', {
    element: document.getElementById('main-content'),
    description: 'Page content has been updated'
});

// Register as accessibility service
PrismaOS.Accessibility.registerService({
    name: 'MyAccessibilityService',
    capabilities: ['screen-reader', 'voice-commands'],
    onEnable: () => console.log('Service enabled'),
    onDisable: () => console.log('Service disabled')
});</code></pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Development Tools -->
<section class="development-tools py-5">
    <div class="container">
        <div class="row">
            <div class="col-12 mb-5">
                <h2 class="display-5 fw-bold text-center">Development Tools</h2>
                <p class="lead text-center text-muted">
                    Tools and utilities for PrismaOS development and testing
                </p>
            </div>
        </div>
        
        <div class="row g-4">
            <div class="col-md-6 col-lg-3">
                <div class="tool-card h-100 text-center p-4 border rounded-3">
                    <div class="tool-icon mb-3">
                        <i class="fas fa-code fa-3x text-primary" aria-hidden="true"></i>
                    </div>
                    <h3 class="h6 fw-bold">PrismaOS SDK</h3>
                    <p class="text-muted small">Complete development kit with APIs, tools, and documentation</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="tool-card h-100 text-center p-4 border rounded-3">
                    <div class="tool-icon mb-3">
                        <i class="fas fa-mobile-alt fa-3x text-success" aria-hidden="true"></i>
                    </div>
                    <h3 class="h6 fw-bold">Emulator</h3>
                    <p class="text-muted small">Test your applications with accessibility features enabled</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="tool-card h-100 text-center p-4 border rounded-3">
                    <div class="tool-icon mb-3">
                        <i class="fas fa-bug fa-3x text-warning" aria-hidden="true"></i>
                    </div>
                    <h3 class="h6 fw-bold">Accessibility Debugger</h3>
                    <p class="text-muted small">Debug and test accessibility features in real-time</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="tool-card h-100 text-center p-4 border rounded-3">
                    <div class="tool-icon mb-3">
                        <i class="fas fa-check-circle fa-3x text-info" aria-hidden="true"></i>
                    </div>
                    <h3 class="h6 fw-bold">Compliance Checker</h3>
                    <p class="text-muted small">Validate accessibility compliance automatically</p>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}
