augen/help.html at main · IgnacioLD/augen · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Help - Augen AI Vision Assistant</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body id="app-body">
    <script>
        // Apply saved theme immediately to prevent flash
        const savedTheme = localStorage.getItem('theme') || 'standard';
        const savedFontSize = localStorage.getItem('font-size') || 'standard';
        const savedLanguage = localStorage.getItem('user-language') || 'auto';
        let className = `theme-${savedTheme} font-size-${savedFontSize}`;
        if (savedLanguage === 'ar') className += ' rtl';
        document.body.className = className;
    </script>
    <a href="#main-content" class="skip-link">Skip to main content</a>

    <div class="header-settings">
        <button class="settings-button" id="settings-button" aria-label="Open accessibility settings">
            <span class="material-symbols-rounded">settings</span>
        </button>
    </div>

    <nav role="navigation" aria-label="Main navigation">
        <a href="index.html" class="nav-home">← Back to Augen</a>
    </nav>

    <main class="container page-content" role="main" id="main-content">
        <h1>Help & Instructions</h1>

        <section aria-labelledby="getting-started">
            <h2 id="getting-started">Getting Started</h2>
            <ol>
                <li><strong>Take pictures</strong> - Press the big DESCRIBE button or use Alt+D</li>
                <li><strong>Listen</strong> - Augen will speak the description out loud</li>
                <li><strong>That's it!</strong> - No setup required, just start using</li>
            </ol>
        </section>


        <section aria-labelledby="best-practices">
            <h2 id="best-practices">Best Practices</h2>
            <ul>
                <li><strong>Good lighting</strong> - Take pictures in well-lit areas when possible</li>
                <li><strong>Steady hands</strong> - Keep the camera as still as possible</li>
                <li><strong>Close for text</strong> - Move closer to read menus, signs, or documents</li>
                <li><strong>Be patient</strong> - Processing can take a few seconds</li>
            </ul>
        </section>

        <section aria-labelledby="troubleshooting">
            <h2 id="troubleshooting">Troubleshooting</h2>

            <h3>Camera not working?</h3>
            <ul>
                <li>Make sure you allowed camera permissions</li>
                <li>Try refreshing the page</li>
                <li>Check if other apps can use your camera</li>
            </ul>

            <h3>No sound?</h3>
            <ul>
                <li>Check your device volume</li>
                <li>Make sure audio is not muted</li>
                <li>Try using headphones</li>
            </ul>

            <h3>Service issues?</h3>
            <ul>
                <li>Try refreshing the page</li>
                <li>Check your internet connection</li>
                <li>Wait a moment and try again</li>
            </ul>
        </section>

        <section aria-labelledby="browser-support">
            <h2 id="browser-support">Browser Support</h2>
            <p>Augen works best on:</p>
            <ul>
                <li><strong>Mobile</strong> - Chrome, Safari, Firefox on iOS/Android</li>
                <li><strong>Desktop</strong> - Chrome, Firefox, Edge, Safari</li>
            </ul>
        </section>

        <div class="action-buttons">
            <a href="index.html" class="button-link">
                📷 Start Using Augen
            </a>
        </div>
    </main>

    <footer role="contentinfo">
        <nav aria-label="Footer navigation">
            <p><a href="about.html">About</a> • <a href="help.html" aria-current="page">Help</a> • <a href="contact.html">Contact</a></p>
        </nav>
        <p>AI-powered vision assistant for accessibility</p>
    </footer>

    <script src="assets/js/script.js"></script>
</body>
</html>