Hackathon3/index.html at main · Prospect-Programming-Club/Hackathon3 · 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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
  <link rel="icon" href="Covid_Buddy.png">
	<meta name="viewport" content="width=device-width">
	<title>Covid Buddy</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <img src="Covid_Buddy.png" alt="CovidBuddiesLogo" id="Logo">
	<h1 class="title-header">Covid Buddy</h1>
	<div>
		<section>
			<!-- navigation bar? -->
			<div id="nav-container">
				<!--the hastags will be replaced with div names later -->
				<a href="#Corona-section" id="nav-links">Get COVID-19 Info | | </a></button>
				<a href="#" id="nav-links">Get COVID-19 Advice | | </a></button>
				<a href="https://www.cdc.gov" target="_blank" id="nav-links">CDC Resources</a></button>
		</section>

		<section class="introduction">
			<div class="welcome-container">
				<p class="welcome-text">
					Welcome to the COVID-19 advice center! <br>
        ⠀⠀Here you can provide quick details like your current symptoms, and your age to find your risk, and information on what you should do during this worldwide COVID-19 pandemic. All of the information that we have is written briefly from the CDC, so you know you are getting trustable tips. Feel free to look at extended Coronavirus information above at the CDC website. <br>
        ⠀⠀Your information is solely used to create a simple suggestion based on which symptoms you have combined with your age, because there are a different ways going about protecting yourself and others against the COVID-19 virus. We have also included some quick statistics you can scan over below. All at your convenience.
      </p>
    </section>

  <h2 style="color:white;">Find Your Risk for Contracting COVID-19</h2>
  <br>
    <section class="formOne">
      <!-- one of the inputs? -->
      <form action="" method="GET">
        <!--Checklist-->
        <table>
          <th><td colspan="3"><p style="color:white;"><strong> Please Select Your Symptoms: </strong></p><br></td></th>
          <tr>
            <td>
              <center><input type="checkbox" id="cb1" name="sympton" value="Headache"/>
              <label for="cb1" style="text-align:top">
                <img src="https://www.health.harvard.edu/media/content/images/cr/bf58db0e-a495-4738-bbe6-cdb6cfb167a6.jpg" />
                </label>
                Headache</center>
            </td>
            <td>
              <center><input type="checkbox" id="cb2" name="sympton" value="Fatigue"/>
              <label for="cb2"><img src="fatigued.png" /></label>
              Fatigue</center>
            </td>
            <td>
              <center><input type="checkbox" id="cb3" name="sympton" value="Cough"/>
            <label for="cb3">
              <img src="https://lh3.googleusercontent.com/proxy/8-t5cdWoWEibLd6uHnkMpDr7Qb59KxKetaE1NT3rPHpX87PODmgAnoq0dJIZ3R3ol2TdzGAJHrvOWfe3eeqMb9bDuQ" /></label>
              Cough</center>
              </td>
          </tr>
          <tr>
            <td>
              <center><input type="checkbox" id="cb4" name="sympton" value="Fever and/or Chills"/>
              <label for="cb4"><img src="https://lh3.googleusercontent.com/proxy/2Dco7hdYCprdfzT0GHPZbUmuckMCTiAbJ0aFlyZyMV8fLPXkjB2ziVL-gteTxfo5YNo2cn9RWRVXCUY9V5gGsqZsyw" />
                </label>
                Fever / Chills</center>
            </td>
            <td>
              <center><input type="checkbox" id="cb5" name="sympton" value="Sore Throat"/>
              <label for="cb5"><img src="https://www.drseemabshaikh.com/wp-content/uploads/2019/12/throat-infection.jpeg" /></label>
              Sore Throat</center>
            </td>
            <td>
              <center><input type="checkbox" id="cb6" name="sympton" value="Running Nose / Congestion"/>
              <label for="cb6"><img src="https://bornrealist.com/wp-content/uploads/2018/10/get-rid-of-runny-nose.png" /></label>
              Runny Nose/Congestion</center>
            </td>
          </tr>
          <tr>
            <td>
              <center><input type="checkbox" id="cb7" name="sympton" value="Shortness of Breath"/>
              <label for="cb7"><img src="https://khealth.ai/wp-content/uploads/2020/01/health-guide-pneumonia.png" /></label>
              Shortness of Breath</center>
          </td>
            <td>
              <center><input type="checkbox" id="cb8" name="sympton" value="Muscle / Body Aches"/>
               <label for="cb8"><img src="https://lh3.googleusercontent.com/proxy/prcuSIzF8jBhdjg9YCM0zbhL_keSyADPmohVQtMtJ0kfR9g2krdLjQrIWaNSIzW_o5xhm_yRekuFuukbgqPRgFjZ"/>
               </label>
               Muscle / Body Aches</center>
            </td>
            <td>
              <center><input type="checkbox" id="cb9" name="sympton" value="Loss of Smell / Taste"/>
              <label for="cb9"><img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/smell2-1585934417.jpg" />
              </label>
              New Loss of Taste / Smell</center>
            </td>
          </tr>
        </table>
        <!--End of Checklist-->

        <br>

        <div class="slidecontainer">
          <p>Select Your Age:</p>
          <div>
            <div>
              <input type="range" min="1" max="100" value="18" class="slider"      id="user_age_input" onchange="showAge()">
            </div>
            <label name="age" id="age_shower">Your Age: </label>
          </div>
        </div>
        <input type="submit" value="Submit" onclick="onSubmit()" class="submitButton"/>
      </form>
    </section>

    <section class="infoCenter">
      <h1 style="color:white; text-align:left;"><br>Covid Info Center</h1>

    <!--Drop Down Menu-->
      <div class="dropdown">
        <button onclick="myFunction()" class="dropbtn">Info</button>
        <div id="myDropdown" class="dropdown-content">
          <input type="text" placeholder="Search..." id="myInput" onkeyup="filterFunction()">
            <a href="#first">What to do when you get Covid-19</a>
            <a href="#second">Quarantine protocols</a>
            <a href="#third">Covid-19 testing</a>
            <a href="#fourth">Vaccination Information</a>
            <a href="#fifth">Virus information</a>
            <a href="#sixth">Symptoms</a>
            <a href="#seventh">Live Trackers</a>
        </div>
      </div>
    </section>

    <img src="https://www.apha.org/-/media/Images/Topics/COVID/COVID_Page_Header.ashx?h=160&w=720&hash=8095095D86FFFAF1A74A82F0B363FAE0" class="imgunderdropdown">

  <div id="Corona-section">
    <section class="covid-info" id="first">
      <h2> What to do when you get COVID-19? </h2>
      <p> Stay home as much as possible, and away from other people. If you live with other people, stay in a specific room and wear a mask around others. Get rest, make sure to stay hydrated. Monitor your symptoms and get help from a healthcare professional if your symptoms get worse. If you have any medical appointments, let your medical professional know you have COVID-19. </p>
    </section>

    <section class="covid-info" id="second">
      <h2>Quarantine Protocols:</h2>
      <p> When you have came into contact with a person that has COVID-19, make sure to stay home and distance yourself from other people for at least 14 days and watch for possible symptoms. Make sure to wear a mask, and take care of your health by getting enough rest and drinking enough water.
    </section>

    <section class="covid-info" id="third">
      <h2>COVID-19 Testing:</h2>
      <p> Coronavirus testing helps determine if a person has the virus. There are a many COVID-19 testing sites available for free. Contact your health care provider or visit your state health department's website to find the latest details and locations to get a test.</p>

      <br>

    </section>

    <section class="covid-info" id="fourth">
      <h2>Vaccination Information:</h2>
      <p> The Coronavirus can be prevented with a vaccine. Vaccines teach the immune system to recognize and fight COVID-19. Sometimes a person may experience symptoms after getting their shot, but this is completely normal and is a sign that the body is building protection against the virus. Vaccines have been professionally developed and are required to meet many safety requirements before they are distributed for public use. They are safe, and cannot infect people with the virus. There are also many vaccination centers available, visit your state health department's website to find more information. </p>
    </section>

    <section class="covid-info" id="fifth">
      <h2>Virus Information:</h2>
      <p> The Coronavirus, also known as COVID-19 is an infectious disease that originated in China. This virus spreads through respiratory droplets of saliva or discharge from the nose and mouth when a person sneezes or coughs. People who are older ages or have underlying medical conditions are more likely to contract COVID-19. Most people with the virus experience mild symptoms and can recover without medical treatment.</p>
    </section>

    <section class="covid-info" id="sixth">
      <h2>Symptoms May Include:</h2>
      <ul>
        <li> Fever or Chills</li>
        <li> Shortness of Breath</li>
        <li> Nausea or Vomiting</li>
        <li> Headache</li>
        <li> Body Aches</li>
        <li> Cough</li>
        <li> Sore Throat</li>
        <li> Runny Nose or Congestion</li>
        <li> Loss of Smell or Taste</li>
      </ul>

      <img src="covid19-molecule.png" class="covidMolecule">

    </section>

    <section class="LiveInformation" id="seventh">
          <h2 class="covid-info">Live Trackers: </h2>
        <iframe src="https://public.domo.com/cards/aKg4r" width="60%" height="600" marginheight="0" marginwidth="0" frameborder="0"></iframe>
        <iframe id="casetracker"
          title="Search Cases"
          src="https://sccgov.maps.arcgis.com/apps/webappviewer/index.html?id=b90dc6181a9f481a956aef9218b84d0a">
        </iframe>
    </section>
  </div>

    <footer class="foot">
      © Copyright 2021 - Amrik | Marko | Wendy
    </footer>
    <script src="script.js"></script>
  </body>
</html>