dynamic-online-platform/help.html at main · rupeshca007/dynamic-online-platform · 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
111
112
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Help - Bangalore Explore - Connect with Bangalore's Communities</title>
    <link rel="stylesheet" href="styles.css">

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Toggle FAQ answers
            document.querySelectorAll('.faq-item h3').forEach(question => {
                question.addEventListener('click', function () {
                    const answer = this.nextElementSibling;
                    answer.style.display = answer.style.display === 'block' ? 'none' : 'block';
                });
            });

            // Character count for issue description
            const issueField = document.getElementById('issue');
            const charCount = document.getElementById('charCount');

            issueField.addEventListener('input', function () {
                charCount.textContent = `${this.value.length} / 500 characters`;
                if (this.value.length > 500) {
                    charCount.style.color = 'red';
                } else {
                    charCount.style.color = '#666';
                }
            });

            // Form submission with enhanced validation
            document.querySelector('form').addEventListener('submit', function (event) {
                event.preventDefault();

                const issueDescription = issueField.value.trim();
                const userEmail = document.getElementById('email').value.trim();
                const emailPattern = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;

                if (!emailPattern.test(userEmail)) {
                    alert('Please enter a valid email address.');
                    return;
                }

                if (issueDescription.length > 500) {
                    alert('Issue description is too long. Please limit it to 500 characters.');
                    return;
                }

                alert(`Thank you for your submission! Please send an email to hcthakur2004@gmail.com for further assistance.\n\nYour Issue: ${issueDescription}\nEmail: ${userEmail}`);

                this.reset();
                charCount.textContent = "0 / 500 characters";
            });
        });
    </script>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="blogs.html">Blogs</a></li>
                <li><a href="communities.html">Communities</a></li>
                <li><a href="explore.html">Explore</a></li>
                <li><a href="library.html">Library</a></li>
                <li><a href="help.html" class="active">Help</a></li>
                <li><a href="login.html">Login</a></li>
                <li><a href="contact.html">Contact Us</a></li>
            </ul>
        </nav>
    </header>

    <section id="help">
        <h1>How Can We Assist You?</h1>

        <h2>Frequently Asked Questions (FAQ)</h2>
        <div class="faq">
            <div class="faq-item">
                <h3>How do I join a community?</h3>
                <p>Go to the Communities page and click on the "Join Now" button under the community you want to join.</p>
            </div>
            <div class="faq-item">
                <h3>How can I submit a blog post?</h3>
                <p>Once logged in, navigate to the Blogs page, and you'll find an option to submit your post.</p>
            </div>
            <div class="faq-item">
                <h3>How do I reset my password?</h3>
                <p>If you forgot your password, click on the "Forgot Password" link on the login page to reset it.</p>
            </div>
        </div>

        <h2>Contact Support</h2>
        <form action="#" method="post">
            <div class="form-group">
                <label for="issue">Describe your issue:</label>
                <textarea id="issue" name="issue" maxlength="500" required></textarea>
                <div class="char-count" id="charCount">0 / 500 characters</div>
            </div>
            <div class="form-group">
                <label for="email">Your Email:</label>
                <input type="email" id="email" name="email" required>
            </div>
            <button type="submit" class="btn">Submit</button>
        </form>
    </section>

    <footer>
        <p>&copy; 2024 Bangalore Explore. All rights reserved.</p>
    </footer>
</body>
</html>