immunization-tracker-UI/index.html at master · immunization-tracker/immunization-tracker-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
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>

<head>
    <meta charset="utf-8">
    <title>Immunization Tracker</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./CSS/index.css" />
    <link type="text/css" href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
    <link type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap" rel="stylesheet">
    <script type="text/javascript" src="https://kit.fontawesome.com/b81a3bdaea.js" async></script>
    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
    <script type="text/javascript" src="./Translate/translate.js" async></script>
    <script type="text/javascript" src="./Carousel/carousel.js" async></script>
    <script type="text/javascript" src="./Tabs/tabs.js" async></script>
    <script type="text/javascript" src="./Header/header.js" async></script>
</head>

<header>
    <div class="header-left">
        <i class="fas fa-bars fa-3x button-mobile"></i>
        <img class='logo' src="../Images/Logo/caduceus-white.svg">
    </div>

    <div class="header-right">
        <nav>
            <a class='page-links' href="index.html" >HOME</a>
            <i class="inav"></i>
            <a class='page-links' href="teammates.html">TEAM</a>
            <i class="inav"></i>
            <a class='page-links' href="contact.html">CONTACT</a>
            <i class="inav"></i>
            <a class='page-links' href="help.html">HELP</a>
            <i class="inav last-inav"></i>
            <div class='dropdown'>
                <div class="dropdown-button">
                    <a>LOGIN</a>
                </div>
                <div class="dropdown-links dropdown-hidden">
                    <a class='login-links' href="https://app-immunization-tracker.netlify.com/">PROVIDER</a>
                    <i class="inav"></i>
                    <a class='login-links' href="https://app-immunization-tracker.netlify.com/">PATIENT</a>
                </div>
            </div>
        </nav>
        <!-- Allow the website to be translated into other languages via Google-->
        <div id="google_translate_element"></div>
    </div>
</header>

<body class='container'>

    <div class='cta'>
        <div class='carousel'>
            <img class='cta-img img-reveal' src="../Images/CTA/fam.jpg" alt="full family smiling">
            <img class='cta-img' src="../Images/CTA/familytickle.jpg" alt="parents playing with children">
            <img class='cta-img' src="../Images/CTA/grandparentschildren.jpg" alt="grandparents with grandchildren">
        </div>

        <h2>Immunization History<br class='cta-break'><span class='cta-space'> </span>In Your Pocket</h2>
    </div>

    <div class="main-content">
        <div class="main-intro">
            <h2>- YOU ARE A -</h2>
        </div>

        <!-- Tabs Section -->
        <div class="section">
            <div class="tabs">
                <!-- Tab Links -->
                <div class="tabs-links">
                    <div class="tabs-link tabs-link-selected" data-tab="1">PARENT</div>
                    <div class="tabs-link" data-tab="2">PATIENT</div>
                    <div class="tabs-link" data-tab="3">PROVIDER</div>
                </div>
            </div>
            <!-- Tab Items -->
            <div class="tabs-items">

                <!-- tab 1 -->
                <div class="tabs-item tabs-item-selected" id="parent" data-tab="1">
                    <div class='tabs-text'>
                        <p class="tabs-item-title">AS A PARENT</p>
                        <p class="tabs-item-description">You will be able to view all of your children's immunization records all on one page. Keep track of any and all missing vaccinations that your child may need in the future! Grant access to your child's physician to update the history and be able to see the details in an uploaded document.</p>
                    </div>
                    <div class="btn-wrap">
                        <button class="regBtn parent" onclick="window.location.href='https://app-immunization-tracker.netlify.com/';">REGISTER TODAY!</button>
                    </div>
                </div>

                <!-- tab 2 -->
                <div class="tabs-item" id="patient" data-tab="2">
                    <div class='tabs-text'>
                        <p class="tabs-item-title">AS A PATIENT</p>
                        <p class="tabs-item-description">You will be able to view your immunization history all on one page. Give your doctor the permission to upload new records into your account when you get a new vaccine. Going on vacation? Check out a list of recommended vaccinations you will want before you go overseas!</p>
                    </div>
                    <div class="btn-wrap">
                        <button class="regBtn pt" onclick="window.location.href='https://app-immunization-tracker.netlify.com/';">REGISTER TODAY!</button>
                    </div>
                </div>

                <!-- tab 3 -->
                <div class="tabs-item" id="provider" data-tab="3">
                    <div class='tabs-text'>
                        <p class="tabs-item-title">AS A PROVIDER</p>
                        <p class="tabs-item-description">You will have the ability to view the immunization histories of all of your patients. Keep track of any missing immunizations and be able to administer those shots during your patient's next appointment. Create and upload new records into your patient's account for them to view later.</p>
                    </div>
                    <div class="btn-wrap">
                        <button class="regBtn provider" onclick="window.location.href='https://app-immunization-tracker.netlify.com/';">REGISTER TO UPLOAD AND TRACK IMMUNIZATIONS</button>
                    </div>
                </div>

                <!-- rotating img based on tab selection  -->
                <img class="selection-img" src="../Images/Tabs/hands.jpg" alt="childrens hands outreached and joining in a circle">
            </div>
        </div> <!-- end tabs section -->
    </div>

    <footer>
        <p>Copyright 2019 Immunization Tracker. All rights reserved.</p>
    </footer>

</body>
</html>