covid19-estimator-ui/index.html at master · lebogangolifant/covid19-estimator-ui · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>COVID-19 Estimator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body >
    <div class="container" >
        <!-- header section -->
        <header class="header">
            <h1> <span>[ COVID-19</span> ESTIMATOR ]</h1>
            <p>Attempt helping society and leaders prepare for the real rig problem
                of COVID-19,<br> which is its impact on lives, health systems, supply chains, and the economy.</p>
        </header>

        <!-- estimator section -->
        <section class="wrapper">
            <form class="form-inline">
                <!-- population -->
                <label for="population">Population:</label>
                <input type="text" id="population" name="population" value="enter by country" data-population>

                <!-- timeToElapse -->
                <label for="timeToElapse">Time To Elapse:</label>
                <input type="text" id="timeToElapse" name="timeToElapse" value="enter duration" data-time-to-elapse>

                <!-- reportedCases -->
                <label for="reportedCases">reported Cases:</label>
                <input type="text" id="reportedCases" name="timeToElapse" value="enter number of cases" data-reported-cases>

                <!-- totalHospitalBeds -->
                <label  for="totalHospitalBeds">total Hospital Beds:</label>
                <input type="text" id="totalHospitalBeds" name="totalHospitalBeds" value="enter number of beds" data-total-hospital-beds>

              </form>

              <form class="form-period">
                <!-- periodType -->
                <label for="periodType">period Type:</label>
                 <select id="periodType" name="periodType" form="periodType">
                    <option value="days">days</option>
                    <option value="weeks">weeks</option>
                    <option value="months">months</option>
                  </select>
                <input type="text" id="periodType" name="periodType" value="" data-period-type>
              </form>

               <!-- submitButton -->
               <form class="submit-wrapper">
                    <label  for="submitData"></label>
                    <input class="btn" type="submit" value="estimate" data-goestimate>
                </form>
        </section>
        <!-- footer section -->
        <footer>
            COVID-19 estimator. #BuildforSDG
        </footer>
        <!-- end of container -->
    </div>
    <script src=""></script>
</body>
</html>