client/index.html at master · Parent-Pals/client · 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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>Little Helpers</title>
  </head>
  <body>
    <nav class="navbar nav-fixed navbar-toggleable-md navbar-light bg-faded white shadow">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#">
        <img src="media/logo.png" width="225" height="60" class="d-inline-block align-top" alt="">
      </a>
      <div class="collapse navbar-collapse align-right" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="#" data-toggle="modal" data-target="#createAccountModal">Register</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#tasks">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="mailto:baker.marlena@gmail.com">Contact</a>
          </li>
          <li class="nav-item">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#loginModal">
              LOGIN
            </button>
          </li>
        </ul>
      </div>
    </nav>
    <div class="jumbotron jumbotron-fluid">
      <div class="container">
      </div>
    </div>
    <main class="container-fluid">
      <div class="row align-items-center">
        <div class="tall-div blue col-lg-12 col-sm-12 shadow" id="tasks">
          <div class="text-center container col-lg-6">
            <img src="media/fbroom.png" class="icon">
            <h3 class="white-text">TASKS</h3>
            <p class="white-text">
              Parents can set the tasks for their children, as well as the point value for those tasks, as well as marking whether or not the tasks were completed, which will bank those points for the individual child.  A child, in similar fashion, can see what tasks need to be completed and their point values, but cannot set tasks for themselves.
          </div>
        </div>
        <div class="tall-div col-lg-12" id="points">
          <div class="text-center container col-lg-6">
            <img src="media/fpoints.png" class="icon">
            <h3 class="blue-text">POINTS</h3>
            <p>
                Parents can see how many points their children have accrued, as well as see a brief history of each child’s completed tasks.  Children, meanwhile, will see their own personal point “bank”, as well as their own task history.
            </p>
          </div>
        </div>
        <div class="tall-div green col-lg-12 shadow" id="rewards">
          <div class="text-center container col-lg-6">
            <img src="media/ftrophy.png" class="icon">
            <h3 class="white-text">REWARDS</h3>
            <p class="white-text">
                Parents can set rewards and their point values for each child on this page.  Similarly, a child can make a request for a particular reward (pending parental approval), as well as the remaining points towards each reward.  Also, a parent will be able to redeem points for their child if they meet the needed points for a particular reward.</p>
          </div>
        </div>
        <div class="pink col-lg-12" id="footer">
          <div class="text-center container col-lg-6">
            <h3 class="white-text">CONTACT US</h3>
          </div>
        </div>
      </div>
      <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <a class="navbar-brand" href="#">
                <img src="media/logo.png" width="250" height="70" class="d-inline-block align-top" alt="">
              </a>
            </div>
            <div class="modal-body">
              <form>
                <div class="form-group">
                  <input type="email" class="form-control" aria-describedby="emailHelp" placeholder="Email" id="loginEmail">
                </div>
                <div class="form-group">
                  <input type="password" class="form-control" placeholder="Password" id="loginPassword">
                </div>
                <button type="button" class="btn btn-primary btn-block col-12" id="loginButton">Login</button>
              </form>
            </div>
          </div>
        </div>
      </div>
      <div class="modal fade" id="createAccountModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <a class="navbar-brand" href="#">
                <img src="media/logo.png" width="250" height="70" class="d-inline-block align-top" alt="">
              </a>
            </div>
            <div class="modal-body">
              <form>
                <div class="form-group">
                  <input type="input" class="form-control" aria-describedby="emailHelp" placeholder="Name" id="name">
                </div>
                <div class="form-group">
                  <input type="email" class="form-control" aria-describedby="emailHelp" placeholder="Email" id="email">
                </div>
                <div class="form-group">
                  <input type="password" class="form-control" placeholder="Password" id="password">
                </div>
                <div class="form-group">
                  <input type="password" class="form-control" placeholder="Re-type Password" id="passwordConfirmation">
                </div>
                <button type="submit" class="btn btn-secondary btn-block col-12" id="createAccountButton">Create Account</button>
                <p class="passwordError text-center">Your passwords do not match!</p>
              </form>
            </div>
          </div>
        </div>
      </div>
    </main>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" charset="utf-8"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <script src="index.js" charset="utf-8"></script>
  </body>
</html>