C240_AI_FA_Project/index.html at main · 23008421/C240_AI_FA_Project · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WaveSign Home</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body style="margin:0; padding:0; text-align:center; font-family: 'Segoe UI', Arial, sans-serif;">
    <header style="display: flex; align-items: flex-end; padding: 20px 40px 20px 40px; background: linear-gradient(90deg, #77ceb7 0%, #0ba2bc 100%); box-shadow: 0 2px 8px rgba(0,0,0,0.04); margin-bottom: 0; gap: 32px;">
        <div style="display: flex; flex-direction: column; align-items: flex-start;">
            <h1 style="font-size: 2.2em; margin: 0; color: #fff; letter-spacing: 2px; text-shadow: 0 2px 8px rgba(11,162,188,0.15);">WaveSign</h1>
            <div style="font-size: 1.1em; color: #eafaf7; margin-top: 4px; margin-bottom: 0; font-weight: 500; letter-spacing: 1px;">Teachable Machine Image Model</div>
        </div>
        <a href="mainFunction.html" style="text-decoration: none; align-self: flex-end; margin-left: 24px;">
            <button type="button" style="font-size: 1.1em; padding: 10px 22px; background: rgba(255,255,255,0.15); color: #fff; border: 2px solid #fff; border-radius: 6px; cursor: pointer; font-weight: 600; transition: background 0.2s;">Visual Translate</button>
        </a>
        <a href="aslData.html" style="text-decoration: none, align-self: flex-end; margin-left: 12px;">
            <button type="button" style="font-size: 1.1em; padding: 10px 22px; background: rgba(255,255,255,0.15); color: #fff; border: 2px solid #fff; border-radius: 6px; cursor: pointer; font-weight: 600; transition: background 0.2s;">View ASL Images</button>
        </a>
        <a href="about.html" style="text-decoration: none; align-self: flex-end; margin-left: 12px;">
            <button type="button" style="font-size: 1.1em; padding: 10px 22px; background: rgba(255,255,255,0.15); color: #fff; border: 2px solid #fff; border-radius: 6px; cursor: pointer; font-weight: 600; transition: background 0.2s;">About Us</button>
        </a>
        <a href="#" id="feedbackBtn" style="text-decoration: none; align-self: flex-end; margin-left: 12px;">
            <button type="button" style="font-size: 1.1em; padding: 10px 22px; background: rgba(255,255,255,0.15); color: #fff; border: 2px solid #fff; border-radius: 6px; cursor: pointer; font-weight: 600; transition: background 0.2s;">Feedback</button>
        </a>
    </header>
    <main id="mainContent" style="max-width: 700px; margin: 48px auto 0 auto; background: #f7faf9; border-radius: 12px; box-shadow: 0 2px 8px rgba(11,162,188,0.07); padding: 32px 28px; font-size: 1.2em; color: #1a3a3a;">
        <h2 style="color: #0ba2bc; font-size: 1.4em; letter-spacing: 1px;">Welcome to WaveSign</h2>
        <img src="bg gif.gif" alt="WaveSign Background Animation" style="width: 100%; max-width: 500px; border-radius: 10px; margin: 24px 0 16px 0; box-shadow: 0 2px 8px rgba(11,162,188,0.10);">
        <p>WaveSign is a website that translates sign language in real-time using your phone’s camera or uploaded images. It also teaches signs through an interactive hand sign gallery. This makes communication with the hearing-impaired easier and more accessible.</p>
    </main>
    <main id="feedbackContent" style="max-width: 700px; margin: 48px auto 0 auto; background: #f7faf9; border-radius: 12px; box-shadow: 0 2px 8px rgba(11,162,188,0.07); padding: 32px 28px; font-size: 1.2em; color: #1a3a3a; display: none;">
        <h3 style="color: #0ba2bc; font-size: 1.2em;">Feedback Bot</h3>
        <p>This is a feedback bot. If you have anything you would like to share, let us know. We are happy to hear from you!</p>
        <a href="https://cdn.botpress.cloud/webchat/v3.0/shareable.html?configUrl=https://files.bpcontent.cloud/2025/07/10/11/20250710114140-JR0E9W49.json" target="_blank" style="font-size: 1.1em; color: #0ba2bc; text-decoration: underline;">Open Feedback Bot</a>
        <div style="text-align: center; margin-top: 40px;">
            <a href="index.html" style="text-decoration: none;">
                <button type="button" style="font-size: 1.1em; padding: 10px 22px; background: rgba(255,255,255,0.15); color: #0ba2bc; border: 2px solid #0ba2bc; border-radius: 6px; cursor: pointer; font-weight: 600; transition: background 0.2s;">Back to Home</button>
            </a>
        </div>
    </main>
    <script src="https://cdn.botpress.cloud/webchat/v3.1/inject.js" defer></script>
    <script src="https://files.bpcontent.cloud/2025/07/09/17/20250709171224-FMCTOBNP.js" defer></script>
    <script>
        document.getElementById('feedbackBtn').addEventListener('click', function(e) {
            e.preventDefault();
            document.getElementById('mainContent').style.display = 'none';
            document.getElementById('feedbackContent').style.display = 'block';
        });
    </script>
</body>
</html>