AcuTech/index.html at master · Nkethaeus/AcuTech · 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
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <meta http-equiv = "X-UA-Compatible" content = "IE = edge">
        <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
        <title> AcuTech Home Page </title>

        <!-- Logo -->
        <link rel="icon" href="images/ACS-logo.png" type="image/icon type">

        <!-- Font Awesome link  -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

        <!-- Custom CSS link -->
        <link rel="stylesheet" href="css/index.css">
    </head>

    <body>
        <!-- Header Section -->
        <header class = "header">
            <section class = "flex">
                <a href = "#home" class = "logo"> <img src = "images/stethos.jpg" alt = ""> </a>
                <div id = "menu-btn" class = "fas fa-bars"> </div>
            </section>
        </header>

        <!-- Home Section -->
        <div class = "home-bg">
            <section class = "home" id = "home">
                <div class = "content">
                    <h3> AcuTech </h3>
                    <p> Do you have a cough and don't want to go to the clinic to be checked? Want a simple way to find out what you have without leaving the comfort of your home? </p>
                    <p> Well, look no further! Because here at AcuTech, we have developed just the right piece of technology for you! </p>

                    <a href = "#about" class = "btn"> Introducing ACS! </a>
                </div>
        </div>

        <!-- About Section  -->
        <section class = "about" id = "about">
            <div class = "image">
                <img src = "images/stethos_vector.png" alt = "">
            </div>

            <div class = "content">
                <h3> What is ACS? </h3>
                <p> ACS is a classification model that aims to classify various types of acute coughs with convinience in mind! </p>
                <p> When visiting hospitals, you often wait in line before you get an audience with a doctor. With ACS, you can get the results in just a matter of seconds! </p>
                <p> It's far from perfect, but we plan to improve it more! </p>
                <p> Currently, the software only classifies four types of acute coughs, these are: </p>
                    <h1> <li> Bronchitis </li> </h1>
                    <h1> <li> The Common Cold </li> </h1>
                    <h1> <li> Pertussis or Whooping Cough </li> </h1>
                    <h1> <li> Pneumonia </li> </h1>
                <p> It also knows when you are healthy and just trying to cough! </p>
        </section>

        <section class = "about" id = "about">
            <div class = "content">

                <h3 align = "right"> How it works </h3>
                <p align = "right"> Just follow these simple steps: </p>
                <h2 align = "right"> <i class = "fa-solid fa-head-side-cough"> Cough </i> </h2>
                <h2 align = "right"> <i class = "fa-solid fa-microphone-lines">  Record </i> </h2>
                <h2 align = "right"> <i class = "fa-solid fa-file-waveform">  Upload </i> </h2>
                <h2 align = "right"> <i class = "fa-solid fa-clipboard-check">  Wait for the result </i> </h2>
                <h2 align = "right"> <i class = "fa-solid fa-thumbs-up"> It's that easy! </i> </h2>
                <a style="float: right;" href = "https://p47ett2nfjlaqqih.anvil.app/3ZRA6CFT35X2P4QOFJI3DGAV" class = "btn"> Try it now! </a>
            </div>

            <div class = "image">
                <img src = "images/cough-img.jpg" alt = "">
            </div>
        </section>

        <!-- Mel-Spectrogram -->
        <section class = "recording" id = "recording">
            <div class = "heading">
                <h3> Spectrogram Images </h3>
            </div>

            <div class = "box-container">
                <div class = "box">
                    <img src = "images/mel-1.png" alt = "">
                </div>

                <div class = "box">
                    <img src = "images/mel-2.png" alt = "">
                </div>

                <div class = "box">
                    <img src = "images/mel-3.png" alt = "">
                </div>

                <div class = "box">
                    <img src = "images/mel-4.png" alt = "">
                </div>

                <div class = "box">
                    <img src = "images/mel-5.png" alt = "">
                </div>

                <div class = "box">
                    <img src = "images/mel-6.png" alt = "">
                </div>
            </div>
        </section>

        <!-- Gallery Section  -->
        <section class = "gallery" id = "gallery">

            <div class = "heading">

            </div>

            <div class = "box-container">
                <img src = "images/allergy.jpg" alt = "">
            </div>
        </section>

        <!-- Custome js file link  -->
        <script src = "js/script.js"></script>
    </body>
</html>