Animal-Tracking-Website/index.html at main · beth-hedge-code/Animal-Tracking-Website · 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
<!--LightHouse Accessibility Score: 91-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canyon Crest Animal Tracker</title>
    <link rel="icon" type="image/x-icon" href="imgs/cow.png">
    <link rel="stylesheet" href="CSS/Bootstrap.css">
    <link rel="stylesheet" href="CSS/stylesheetindex.css">
</head>

<body class="bg">
    <div class="container d-flex justify-content-center align-items-center vh-100">

        <!-- WELCOME CARD BEGINS-->
        <div class="card shadow w-100" style="max-width: 650px;" id="WelcomeCard">
            <div class="card-body bg-danger rounded">
                <div class="bg-dark rounded p-4">
                    <h1 style="font-size: 4vw;"  class="text-center text-white">Welcome To Canyon Crest Animal Tracker</h1>
                    <!--This button displays the login card-->
                    <div class=" d-flex justify-content-center">
                        <button id="btnLoginSignup" type="button" class="btn btn-primary"  aria-label="Goes to the Login page">Login/Sign Up</button>
                    </div>
                </div>
            </div>
        </div>


        <!-- LOGIN CARD BEGINS -->
        <div class="card shadow w-100 d-none" style="max-width: 650px;" id="LoginCard">
            <div class="card-body bg-danger rounded">
                <div class="bg-dark rounded p-4 text-center text-white">

                    <h2 class="mb-4">Login</h2>

                    <form id="loginForm" action="/login" method="post"> <!--login.js refrences this form-->
                        <!--Email Login-->
                        <div class="mb-3 text-start">
                            <label class="form-label" for="txtLoginEmail">Email</label>
                            <input class="form-control" id="txtLoginEmail" name="txtLoginEmail" type="email" >
                            <div id="emailHelpBlock" class="form-text text-white">
                                Your username must be a valid email address.
                            </div>
                        </div>

                        <!--Password Login-->
                        <div class="mb-3 text-start">
                            <label class="form-label" for="txtLoginPassword">Password</label>
                            <input class="form-control" id="txtLoginPassword" name="txtLoginPassword" type="password">
                            <div id="passwordHelpBlock" class="form-text text-white">
                                Your password must be at least 6 characters long and have a symbol.
                            </div>
                        </div>

                        <button id="btnLogin" type="submit" class="btn btn-light w-100 mb-3"  aria-label="Logs in the user">Login</button>
                    </form>

                    <!--Displays SignUp Card-->
                    <button id="btnSignUpRef" type="button" class="btn btn-link text-white"  aria-label="Goes to the Register page">New? Register Here!</button>
                </div>
            </div>
        </div>


        <!--SIGNUP CARD BEGINS-->
        <div class="card shadow w-100 d-none" style="max-width: 650px;" id="SignUpCard">
            <div class="card-body bg-danger rounded" style="max-height: 80vh; overflow-y: auto;">
                <div class="bg-dark rounded p-4 text-center text-white">
                    <h2 class="text-center">Sign Up</h2>

                    <form id="signUpForm"  action="/signup" method="post"> <!--Signin.js refrences this form-->
                        <!--LOGIN CREDENTIALS-->
                        <label class="form-label" for="txtSignUpEmail">Email</label>
                        <input class="form-control" id="txtSignUpEmail" name="txtSignUpEmail" type="email">
                        <label class="form-label" for="txtSignUpPassword">Password</label>
                        <input class="form-control" id="txtSignUpPassword" name="txtSignUpPassword" type="password">

                        <!--NAME AND PHONE-->
                        <label class="form-label" for="txtFirstName">First Name</label>
                        <input class="form-control" id="txtFirstName" name="txtFirstName" type="text">
                        <label class="form-label" for="txtLastName">Last Name</label>
                        <input class="form-control" id="txtLastName" name="txtLastName" type="text">
                        <label class="form-label" for="txtRole">Role</label>
                        <input class="form-control" id="txtRole" name="txtRole" type="text">
                        <label class="form-label" for="txtTelephone">Phone Number</label>
                        <input class="form-control" id="txtTelephone" name="txtTelephone" type="tel">
                        <div id="phoneHelpBlock" class="form-text">
                            Your phone number should be in the format of: (931) 123-4567.
                        </div>

                        <!-- PHYSICAL ADDRESS-->
                        <label class="form-label" for="txtAddress">Address</label>
                        <input class="form-control" id="txtAddress" name="txtAddress" type="text">
                        <label class="form-label" for="txtCity">City</label>
                        <input class="form-control" id="txtCity" name="txtCity" type="text">
                        <label class="form-label" for="txtState">State</label>
                        <input class="form-control" id="txtState" name="txtState" type="text">
                        <label class="form-label" for="txtZip">Zip</label>
                        <input class="form-control" id="txtZip" name="txtZip" type="text">
                        <br>

                        <!--EMPLOYED AT?-->
                        <select class="form-select" name="locationID" aria-label="Default select example">
                            <option selected>Employed at?</option>
                            <option value="Lone Oak Ranch">Lone Oak Ranch</option>
                            <option value="Silver Spur Animal Range">Silver Spur Animal Range</option>
                            <option value="Golden Horseshoe Ranch">Golden Horseshoe Ranch</option>
                        </select>
                        <br>

                        <button id="btnSignUp" type="submit" class="btn btn-light"  aria-label="Signs Up the user">SignUp</button>
                    </form>

                    <!--Displays Login Card-->
                    <button id="btnLoginRef" type="button" class="btn btn-link"  aria-label="Goes back to the Login Page">Go back to Login!</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="javascript/app.js"></script>
    <script src="Routes/login.js"></script>
    <script src="Routes/signin.js"></script>
</body>
</html>