ReadEasy/faq.html at Main · BeritCheema/ReadEasy · 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
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FAQ</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            position: relative;
        }

        .container {
            width: 80%;
            margin: auto;
            overflow: hidden;
        }

        h1 {
            margin-top: 50px;
            text-align: center;
            color: #3E5F8A;
        }

        .faq-section {
            margin-top: 40px;
            background: #fff;
            padding: 20px;
        }

        .faq-section h2 {
            text-align: center;
            color: #3E5F8A;
        }

        .faq {
            margin-bottom: 20px;
        }

        .faq h3 {
            margin: 0;
            color: #3E5F8A;
        }

        .faq p {
            margin: 5px 0 0;
            color: #666;
        }

        .button {
            display: inline-block;
            padding: 10px 15px;
            background-color: #3E5F8A;
            color: white;
            text-decoration: none;
            border: none;
            text-align: center;
            cursor: pointer;
            border-radius: 5px;
            font-size: 16px;
        }

        .button:hover {
            background-color: #2B3F5C;
        }

        .top-right-button {
            position: absolute;
            margin-right: 50px;
            margin-top: 30px;
            top: 10px;
            right: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>FAQ</h1>

        <!-- FAQ Section -->
        <section class="faq-section">
            <h2>FAQ for AI-Powered Accessibility Add-on</h2>
            <!-- Your existing FAQs -->
            <div class="faq">
                <h3>Is the add-on compatible with all Google Docs?</h3>
                <p>Yes, the add-on works with all Google Docs. It seamlessly integrates with the Google Docs interface, allowing you to apply dyslexia-friendly settings to any document.</p>
            </div>
            <div class="faq">
                <h3>Is there a cost associated with using this add-on?</h3>
                <p>The add-on is completely free to use and we are a non-profit committed to helping people with dyslexia and other visual impairments.</p>
            </div>
            <div class="faq">
                <h3>How does the add-on benefit users with dyslexia?</h3>
                <p>The add-on provides custom settings like dyslexia-friendly fonts, adjusts text size and spacing, and color overlays to reduce visual stress and improve readability for users with dyslexia. We also harnesses the power of AI to make texts simpler and easier to read.</p>
            </div>
            <div class="faq">
                <h3>Where can I find support or report issues with the add-on?</h3>
                <p>If you need assistance or wish to report an issue, please contact our support team through our website and send us an email. We are committed to providing prompt and helpful support.</p>
            </div>
        </section>
    </div>

    <!-- Button linking to the Contact Us page -->
    <a href="contact.html" class="button top-right-button">Contact Us</a>
</body>
</html>