first html css js assets commit

css/bootstrap-datepicker.css

@@ -0,0 +1,477 @@
+/*!
+ * Datepicker for Bootstrap v1.9.0 (https://github.com/uxsolutions/bootstrap-datepicker)
+ *
+ * Licensed under the Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0)
+ */
+
+.datepicker {
+  padding: 4px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  direction: ltr;
+}
+.datepicker-inline {
+  width: 220px;
+}
+.datepicker-rtl {
+  direction: rtl;
+}
+.datepicker-rtl.dropdown-menu {
+  left: auto;
+}
+.datepicker-rtl table tr td span {
+  float: right;
+}
+.datepicker-dropdown {
+  top: 0;
+  left: 0;
+}
+.datepicker-dropdown:before {
+  content: '';
+  display: inline-block;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  border-bottom: 7px solid #999;
+  border-top: 0;
+  border-bottom-color: rgba(0, 0, 0, 0.2);
+  position: absolute;
+}
+.datepicker-dropdown:after {
+  content: '';
+  display: inline-block;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #fff;
+  border-top: 0;
+  position: absolute;
+}
+.datepicker-dropdown.datepicker-orient-left:before {
+  left: 6px;
+}
+.datepicker-dropdown.datepicker-orient-left:after {
+  left: 7px;
+}
+.datepicker-dropdown.datepicker-orient-right:before {
+  right: 6px;
+}
+.datepicker-dropdown.datepicker-orient-right:after {
+  right: 7px;
+}
+.datepicker-dropdown.datepicker-orient-bottom:before {
+  top: -7px;
+}
+.datepicker-dropdown.datepicker-orient-bottom:after {
+  top: -6px;
+}
+.datepicker-dropdown.datepicker-orient-top:before {
+  bottom: -7px;
+  border-bottom: 0;
+  border-top: 7px solid #999;
+}
+.datepicker-dropdown.datepicker-orient-top:after {
+  bottom: -6px;
+  border-bottom: 0;
+  border-top: 6px solid #fff;
+}
+.datepicker table {
+  margin: 0;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.datepicker td,
+.datepicker th {
+  text-align: center;
+  width: 20px;
+  height: 20px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  border: none;
+}
+.table-striped .datepicker table tr td,
+.table-striped .datepicker table tr th {
+  background-color: transparent;
+}
+.datepicker table tr td.day:hover,
+.datepicker table tr td.day.focused {
+  background: #eee;
+  cursor: pointer;
+}
+.datepicker table tr td.old,
+.datepicker table tr td.new {
+  color: #999;
+}
+.datepicker table tr td.disabled,
+.datepicker table tr td.disabled:hover {
+  background: none;
+  color: #999;
+  cursor: default;
+}
+.datepicker table tr td.highlighted {
+  background: #d9edf7;
+  border-radius: 0;
+}
+.datepicker table tr td.today,
+.datepicker table tr td.today:hover,
+.datepicker table tr td.today.disabled,
+.datepicker table tr td.today.disabled:hover {
+  background-color: #fde19a;
+  background-image: -moz-linear-gradient(to bottom, #fdd49a, #fdf59a);
+  background-image: -ms-linear-gradient(to bottom, #fdd49a, #fdf59a);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
+  background-image: -webkit-linear-gradient(to bottom, #fdd49a, #fdf59a);
+  background-image: -o-linear-gradient(to bottom, #fdd49a, #fdf59a);
+  background-image: linear-gradient(to bottom, #fdd49a, #fdf59a);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
+  border-color: #fdf59a #fdf59a #fbed50;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  color: #000;
+}
+.datepicker table tr td.today:hover,
+.datepicker table tr td.today:hover:hover,
+.datepicker table tr td.today.disabled:hover,
+.datepicker table tr td.today.disabled:hover:hover,
+.datepicker table tr td.today:active,
+.datepicker table tr td.today:hover:active,
+.datepicker table tr td.today.disabled:active,
+.datepicker table tr td.today.disabled:hover:active,
+.datepicker table tr td.today.active,
+.datepicker table tr td.today:hover.active,
+.datepicker table tr td.today.disabled.active,
+.datepicker table tr td.today.disabled:hover.active,
+.datepicker table tr td.today.disabled,
+.datepicker table tr td.today:hover.disabled,
+.datepicker table tr td.today.disabled.disabled,
+.datepicker table tr td.today.disabled:hover.disabled,
+.datepicker table tr td.today[disabled],
+.datepicker table tr td.today:hover[disabled],
+.datepicker table tr td.today.disabled[disabled],
+.datepicker table tr td.today.disabled:hover[disabled] {
+  background-color: #fdf59a;
+}
+.datepicker table tr td.today:active,
+.datepicker table tr td.today:hover:active,
+.datepicker table tr td.today.disabled:active,
+.datepicker table tr td.today.disabled:hover:active,
+.datepicker table tr td.today.active,
+.datepicker table tr td.today:hover.active,
+.datepicker table tr td.today.disabled.active,
+.datepicker table tr td.today.disabled:hover.active {
+  background-color: #fbf069 \9;
+}
+.datepicker table tr td.today:hover:hover {
+  color: #000;
+}
+.datepicker table tr td.today.active:hover {
+  color: #fff;
+}
+.datepicker table tr td.range,
+.datepicker table tr td.range:hover,
+.datepicker table tr td.range.disabled,
+.datepicker table tr td.range.disabled:hover {
+  background: #eee;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  border-radius: 0;
+}
+.datepicker table tr td.range.today,
+.datepicker table tr td.range.today:hover,
+.datepicker table tr td.range.today.disabled,
+.datepicker table tr td.range.today.disabled:hover {
+  background-color: #f3d17a;
+  background-image: -moz-linear-gradient(to bottom, #f3c17a, #f3e97a);
+  background-image: -ms-linear-gradient(to bottom, #f3c17a, #f3e97a);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f3c17a), to(#f3e97a));
+  background-image: -webkit-linear-gradient(to bottom, #f3c17a, #f3e97a);
+  background-image: -o-linear-gradient(to bottom, #f3c17a, #f3e97a);
+  background-image: linear-gradient(to bottom, #f3c17a, #f3e97a);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3c17a', endColorstr='#f3e97a', GradientType=0);
+  border-color: #f3e97a #f3e97a #edde34;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  border-radius: 0;
+}
+.datepicker table tr td.range.today:hover,
+.datepicker table tr td.range.today:hover:hover,
+.datepicker table tr td.range.today.disabled:hover,
+.datepicker table tr td.range.today.disabled:hover:hover,
+.datepicker table tr td.range.today:active,
+.datepicker table tr td.range.today:hover:active,
+.datepicker table tr td.range.today.disabled:active,
+.datepicker table tr td.range.today.disabled:hover:active,
+.datepicker table tr td.range.today.active,
+.datepicker table tr td.range.today:hover.active,
+.datepicker table tr td.range.today.disabled.active,
+.datepicker table tr td.range.today.disabled:hover.active,
+.datepicker table tr td.range.today.disabled,
+.datepicker table tr td.range.today:hover.disabled,
+.datepicker table tr td.range.today.disabled.disabled,
+.datepicker table tr td.range.today.disabled:hover.disabled,
+.datepicker table tr td.range.today[disabled],
+.datepicker table tr td.range.today:hover[disabled],
+.datepicker table tr td.range.today.disabled[disabled],
+.datepicker table tr td.range.today.disabled:hover[disabled] {
+  background-color: #f3e97a;
+}
+.datepicker table tr td.range.today:active,
+.datepicker table tr td.range.today:hover:active,
+.datepicker table tr td.range.today.disabled:active,
+.datepicker table tr td.range.today.disabled:hover:active,
+.datepicker table tr td.range.today.active,
+.datepicker table tr td.range.today:hover.active,
+.datepicker table tr td.range.today.disabled.active,
+.datepicker table tr td.range.today.disabled:hover.active {
+  background-color: #efe24b \9;
+}
+.datepicker table tr td.selected,
+.datepicker table tr td.selected:hover,
+.datepicker table tr td.selected.disabled,
+.datepicker table tr td.selected.disabled:hover {
+  background-color: #9e9e9e;
+  background-image: -moz-linear-gradient(to bottom, #b3b3b3, #808080);
+  background-image: -ms-linear-gradient(to bottom, #b3b3b3, #808080);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b3b3b3), to(#808080));
+  background-image: -webkit-linear-gradient(to bottom, #b3b3b3, #808080);
+  background-image: -o-linear-gradient(to bottom, #b3b3b3, #808080);
+  background-image: linear-gradient(to bottom, #b3b3b3, #808080);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#808080', GradientType=0);
+  border-color: #808080 #808080 #595959;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+.datepicker table tr td.selected:hover,
+.datepicker table tr td.selected:hover:hover,
+.datepicker table tr td.selected.disabled:hover,
+.datepicker table tr td.selected.disabled:hover:hover,
+.datepicker table tr td.selected:active,
+.datepicker table tr td.selected:hover:active,
+.datepicker table tr td.selected.disabled:active,
+.datepicker table tr td.selected.disabled:hover:active,
+.datepicker table tr td.selected.active,
+.datepicker table tr td.selected:hover.active,
+.datepicker table tr td.selected.disabled.active,
+.datepicker table tr td.selected.disabled:hover.active,
+.datepicker table tr td.selected.disabled,
+.datepicker table tr td.selected:hover.disabled,
+.datepicker table tr td.selected.disabled.disabled,
+.datepicker table tr td.selected.disabled:hover.disabled,
+.datepicker table tr td.selected[disabled],
+.datepicker table tr td.selected:hover[disabled],
+.datepicker table tr td.selected.disabled[disabled],
+.datepicker table tr td.selected.disabled:hover[disabled] {
+  background-color: #808080;
+}
+.datepicker table tr td.selected:active,
+.datepicker table tr td.selected:hover:active,
+.datepicker table tr td.selected.disabled:active,
+.datepicker table tr td.selected.disabled:hover:active,
+.datepicker table tr td.selected.active,
+.datepicker table tr td.selected:hover.active,
+.datepicker table tr td.selected.disabled.active,
+.datepicker table tr td.selected.disabled:hover.active {
+  background-color: #666666 \9;
+}
+.datepicker table tr td.active,
+.datepicker table tr td.active:hover,
+.datepicker table tr td.active.disabled,
+.datepicker table tr td.active.disabled:hover {
+  background-color: #006dcc;
+  background-image: -moz-linear-gradient(to bottom, #08c, #0044cc);
+  background-image: -ms-linear-gradient(to bottom, #08c, #0044cc);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#0044cc));
+  background-image: -webkit-linear-gradient(to bottom, #08c, #0044cc);
+  background-image: -o-linear-gradient(to bottom, #08c, #0044cc);
+  background-image: linear-gradient(to bottom, #08c, #0044cc);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#08c', endColorstr='#0044cc', GradientType=0);
+  border-color: #0044cc #0044cc #002a80;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+.datepicker table tr td.active:hover,
+.datepicker table tr td.active:hover:hover,
+.datepicker table tr td.active.disabled:hover,
+.datepicker table tr td.active.disabled:hover:hover,
+.datepicker table tr td.active:active,
+.datepicker table tr td.active:hover:active,
+.datepicker table tr td.active.disabled:active,
+.datepicker table tr td.active.disabled:hover:active,
+.datepicker table tr td.active.active,
+.datepicker table tr td.active:hover.active,
+.datepicker table tr td.active.disabled.active,
+.datepicker table tr td.active.disabled:hover.active,
+.datepicker table tr td.active.disabled,
+.datepicker table tr td.active:hover.disabled,
+.datepicker table tr td.active.disabled.disabled,
+.datepicker table tr td.active.disabled:hover.disabled,
+.datepicker table tr td.active[disabled],
+.datepicker table tr td.active:hover[disabled],
+.datepicker table tr td.active.disabled[disabled],
+.datepicker table tr td.active.disabled:hover[disabled] {
+  background-color: #0044cc;
+}
+.datepicker table tr td.active:active,
+.datepicker table tr td.active:hover:active,
+.datepicker table tr td.active.disabled:active,
+.datepicker table tr td.active.disabled:hover:active,
+.datepicker table tr td.active.active,
+.datepicker table tr td.active:hover.active,
+.datepicker table tr td.active.disabled.active,
+.datepicker table tr td.active.disabled:hover.active {
+  background-color: #003399 \9;
+}
+.datepicker table tr td span {
+  display: block;
+  width: 23%;
+  height: 54px;
+  line-height: 54px;
+  float: left;
+  margin: 1%;
+  cursor: pointer;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+.datepicker table tr td span:hover,
+.datepicker table tr td span.focused {
+  background: #eee;
+}
+.datepicker table tr td span.disabled,
+.datepicker table tr td span.disabled:hover {
+  background: none;
+  color: #999;
+  cursor: default;
+}
+.datepicker table tr td span.active,
+.datepicker table tr td span.active:hover,
+.datepicker table tr td span.active.disabled,
+.datepicker table tr td span.active.disabled:hover {
+  background-color: #006dcc;
+  background-image: -moz-linear-gradient(to bottom, #08c, #0044cc);
+  background-image: -ms-linear-gradient(to bottom, #08c, #0044cc);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#0044cc));
+  background-image: -webkit-linear-gradient(to bottom, #08c, #0044cc);
+  background-image: -o-linear-gradient(to bottom, #08c, #0044cc);
+  background-image: linear-gradient(to bottom, #08c, #0044cc);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#08c', endColorstr='#0044cc', GradientType=0);
+  border-color: #0044cc #0044cc #002a80;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+.datepicker table tr td span.active:hover,
+.datepicker table tr td span.active:hover:hover,
+.datepicker table tr td span.active.disabled:hover,
+.datepicker table tr td span.active.disabled:hover:hover,
+.datepicker table tr td span.active:active,
+.datepicker table tr td span.active:hover:active,
+.datepicker table tr td span.active.disabled:active,
+.datepicker table tr td span.active.disabled:hover:active,
+.datepicker table tr td span.active.active,
+.datepicker table tr td span.active:hover.active,
+.datepicker table tr td span.active.disabled.active,
+.datepicker table tr td span.active.disabled:hover.active,
+.datepicker table tr td span.active.disabled,
+.datepicker table tr td span.active:hover.disabled,
+.datepicker table tr td span.active.disabled.disabled,
+.datepicker table tr td span.active.disabled:hover.disabled,
+.datepicker table tr td span.active[disabled],
+.datepicker table tr td span.active:hover[disabled],
+.datepicker table tr td span.active.disabled[disabled],
+.datepicker table tr td span.active.disabled:hover[disabled] {
+  background-color: #0044cc;
+}
+.datepicker table tr td span.active:active,
+.datepicker table tr td span.active:hover:active,
+.datepicker table tr td span.active.disabled:active,
+.datepicker table tr td span.active.disabled:hover:active,
+.datepicker table tr td span.active.active,
+.datepicker table tr td span.active:hover.active,
+.datepicker table tr td span.active.disabled.active,
+.datepicker table tr td span.active.disabled:hover.active {
+  background-color: #003399 \9;
+}
+.datepicker table tr td span.old,
+.datepicker table tr td span.new {
+  color: #999;
+}
+.datepicker .datepicker-switch {
+  width: 145px;
+}
+.datepicker .datepicker-switch,
+.datepicker .prev,
+.datepicker .next,
+.datepicker tfoot tr th {
+  cursor: pointer;
+}
+.datepicker .datepicker-switch:hover,
+.datepicker .prev:hover,
+.datepicker .next:hover,
+.datepicker tfoot tr th:hover {
+  background: #eee;
+}
+.datepicker .prev.disabled,
+.datepicker .next.disabled {
+  visibility: hidden;
+}
+.datepicker .cw {
+  font-size: 10px;
+  width: 12px;
+  padding: 0 2px 0 5px;
+  vertical-align: middle;
+}
+.input-append.date .add-on,
+.input-prepend.date .add-on {
+  cursor: pointer;
+}
+.input-append.date .add-on i,
+.input-prepend.date .add-on i {
+  margin-top: 3px;
+}
+.input-daterange input {
+  text-align: center;
+}
+.input-daterange input:first-child {
+  -webkit-border-radius: 3px 0 0 3px;
+  -moz-border-radius: 3px 0 0 3px;
+  border-radius: 3px 0 0 3px;
+}
+.input-daterange input:last-child {
+  -webkit-border-radius: 0 3px 3px 0;
+  -moz-border-radius: 0 3px 3px 0;
+  border-radius: 0 3px 3px 0;
+}
+.input-daterange .add-on {
+  display: inline-block;
+  width: auto;
+  min-width: 16px;
+  height: 18px;
+  padding: 4px 5px;
+  font-weight: normal;
+  line-height: 18px;
+  text-align: center;
+  text-shadow: 0 1px 0 #fff;
+  vertical-align: middle;
+  background-color: #eee;
+  border: 1px solid #ccc;
+  margin-left: -5px;
+  margin-right: -5px;
+}
+/*# sourceMappingURL=bootstrap-datepicker.css.map */

css/bootstrap-timepicker.css

@@ -0,0 +1,146 @@
+/*!
+ * Timepicker Component for Twitter Bootstrap
+ *
+ * Copyright 2013 Joris de Wit
+ *
+ * Contributors https://github.com/jdewit/bootstrap-timepicker/graphs/contributors
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+.bootstrap-timepicker {
+  position: relative;
+}
+.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu {
+  left: auto;
+  right: 0;
+}
+.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu:before {
+  left: auto;
+  right: 12px;
+}
+.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu:after {
+  left: auto;
+  right: 13px;
+}
+.bootstrap-timepicker .input-group-addon {
+  cursor: pointer;
+}
+.bootstrap-timepicker .input-group-addon i {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+}
+.bootstrap-timepicker-widget.dropdown-menu {
+  padding: 4px;
+}
+.bootstrap-timepicker-widget.dropdown-menu.open {
+  display: inline-block;
+}
+.bootstrap-timepicker-widget.dropdown-menu:before {
+  border-bottom: 7px solid rgba(0, 0, 0, 0.2);
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
+  display: inline-block;
+  position: absolute;
+}
+.bootstrap-timepicker-widget.dropdown-menu:after {
+  border-bottom: 6px solid #FFFFFF;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  content: "";
+  display: inline-block;
+  position: absolute;
+}
+.bootstrap-timepicker-widget.timepicker-orient-left:before {
+  left: 6px;
+}
+.bootstrap-timepicker-widget.timepicker-orient-left:after {
+  left: 7px;
+}
+.bootstrap-timepicker-widget.timepicker-orient-right:before {
+  right: 6px;
+}
+.bootstrap-timepicker-widget.timepicker-orient-right:after {
+  right: 7px;
+}
+.bootstrap-timepicker-widget.timepicker-orient-top:before {
+  top: -7px;
+}
+.bootstrap-timepicker-widget.timepicker-orient-top:after {
+  top: -6px;
+}
+.bootstrap-timepicker-widget.timepicker-orient-bottom:before {
+  bottom: -7px;
+  border-bottom: 0;
+  border-top: 7px solid #999;
+}
+.bootstrap-timepicker-widget.timepicker-orient-bottom:after {
+  bottom: -6px;
+  border-bottom: 0;
+  border-top: 6px solid #ffffff;
+}
+.bootstrap-timepicker-widget a.btn,
+.bootstrap-timepicker-widget input {
+  border-radius: 4px;
+}
+.bootstrap-timepicker-widget table {
+  width: 100%;
+  margin: 0;
+}
+.bootstrap-timepicker-widget table td {
+  text-align: center;
+  height: 30px;
+  margin: 0;
+  padding: 2px;
+}
+.bootstrap-timepicker-widget table td:not(.separator) {
+  min-width: 30px;
+}
+.bootstrap-timepicker-widget table td span {
+  width: 100%;
+}
+.bootstrap-timepicker-widget table td a {
+  border: 1px transparent solid;
+  width: 100%;
+  display: inline-block;
+  margin: 0;
+  padding: 8px 0;
+  outline: 0;
+  color: #333;
+}
+.bootstrap-timepicker-widget table td a:hover {
+  text-decoration: none;
+  background-color: #eee;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  border-color: #ddd;
+}
+.bootstrap-timepicker-widget table td a i {
+  margin-top: 2px;
+  font-size: 18px;
+}
+.bootstrap-timepicker-widget table td input {
+  width: 25px;
+  margin: 0;
+  text-align: center;
+}
+.bootstrap-timepicker-widget .modal-content {
+  padding: 4px;
+}
+@media (min-width: 767px) {
+  .bootstrap-timepicker-widget.modal {
+    width: 200px;
+    margin-left: -100px;
+  }
+}
+@media (max-width: 767px) {
+  .bootstrap-timepicker {
+    width: 100%;
+  }
+  .bootstrap-timepicker .dropdown-menu {
+    width: 100%;
+  }
+}

css/main-css.css

@@ -0,0 +1,227 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap');
+
+html, body{
+    margin: 0;
+    padding:0;
+    height:100%;
+    width:100%;
+}
+
+body{
+    background-image: url("assets/img/background-blue");
+    /* background-repeat: no-repeat; */
+    background-position: bottom;
+    background-attachment: fixed;
+}
+
+#logo {
+    background: #fff;
+    min-width: 100%;
+    min-height: 50vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#login-form {
+    background: #65CEFE;
+    border-radius: 20px 20px 0px 0px;
+    color: #fff;
+    min-width: 100%;
+    min-height: 50vh;
+}
+
+#login-box {
+    box-shadow: 0px 6px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 10px;
+}
+
+#login-welcome {
+    position: absolute;
+    width: 221px;
+    height: 98px;
+    top: 25px;
+    margin-left: auto;
+    margin-right: auto;
+    left: 0;
+    right: 0;
+    text-align: center;
+    background: #80D1D9;
+    box-shadow: 0px 6px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 20px 20px 0px 0px;
+}
+
+#nav-bar {
+    min-width: 100%;
+    min-height: 15vh;
+    background: #65CEFE !important;
+    border-radius: 0px 0px 10px 10px !important;
+}
+
+.navbar-css-force {
+    min-width: 100% !important;
+    min-height: 100% !important;
+}
+
+#welcome {
+    color: #fff;
+    font-size: 18px;
+    font-weight: 600;
+    font-family: 'Montserrat', sans-serif;
+    line-height: 5px;
+}
+
+#span-welcome {
+    color: #fff;
+    font-size: 22px;
+    font-wight: 300;
+    font-family: 'Montserrat', sans-serif;
+}
+
+#dashboard {
+    margin-top: 100px;
+    min-width: 100%;
+    min-height: 50vh;
+}
+
+#reservation {
+    margin-top: 50px;
+    min-width: 100%;
+    min-height: 50vh;
+}
+
+#dashboard-words {
+    margin: 0px auto 100px;
+    font-size: 24px;
+    font-weight: 700;
+    font-family: 'Montserrat', sans-serif;
+    text-align: center;
+}
+
+#reservation-words {
+    margin: 0px auto 30px;
+    text-align: left;
+    font-size: 24px;
+    font-weight: 700;
+    font-family: 'Montserrat', sans-serif;
+    margin-left: 10%;
+}
+
+#card {
+    width: 80%;
+    min-height: 80vh;
+    margin: 0px auto;
+}
+
+#card-full {
+    width: 80%;
+    margin: 0px auto;
+}
+
+
+.card-custom {
+    margin: 20px 0;
+    border-radius: 4px;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
+}
+
+.card-horizontal {
+  display: flex;
+  flex: 1 1 auto;
+}
+
+.arrow {
+    display: inline-block;
+}
+
+h4.card-title {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 0.3;
+}
+
+p.card-text {
+    font-size: 14px;
+}
+
+.callout {
+     padding: 20px;
+     margin: 20px 0;
+     /* border: 1px solid #eee; */
+     border-left-width: 5px;
+     border-radius: 4px;
+     box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
+}
+ .callout h4 {
+     margin-top: 0;
+     margin-bottom: 5px;
+}
+ .callout p:last-child {
+     margin-bottom: 0;
+}
+ .callout code {
+     border-radius: 3px;
+}
+ .callout + .bs-callout {
+     margin-top: -5px;
+}
+ .callout-default {
+     border-left-color: #777;
+}
+ .callout-default h4 {
+     color: #777;
+}
+ .callout-primary {
+     border-left-color: #428bca;
+}
+ .callout-primary h4 {
+     color: #428bca;
+}
+ .callout-success {
+     border-left-color: #5cb85c;
+}
+ .callout-success h4 {
+     color: #5cb85c;
+}
+ .callout-danger {
+     border-left-color: #d9534f;
+}
+ .callout-danger h4 {
+     color: #d9534f;
+}
+ .callout-warning {
+     border-left-color: #f0ad4e;
+}
+ .callout-warning h4 {
+     color: #f0ad4e;
+}
+ .callout-info {
+     border-left-color: #5bc0de;
+}
+ .callout-info h4 {
+     color: #5bc0de;
+}
+ .callout-bdc {
+     border-left-color: #29527a;
+}
+ .callout-bdc h4 {
+     color: #29527a;
+}
+
+/* Custom Color */
+
+/* Button */
+.btn-blue-soft-light {
+    background: #65CEFE !important;
+    border-radius: 5px !important;
+    color: #fff !important;
+}
+
+.forgot-password {
+    text-align: bottom;
+}
+
+.text-white-force {
+    color: #fff !important;
+}

dashboard.html

@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>D'Care - Dashboard</title>
+	<!-- Main CSS -->
+	<link rel="stylesheet" href="css/main-css.css">
+	<!-- Bootstrap CSS -->
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+	<!-- Font Awesome CSS -->
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
+	<!-- Font Material Icon CSS -->
+	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+	<!-- Meterial IO CSS -->
+	<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
+	<!-- Main Js -->
+	<script src="js/main-js.js" type="text/javascript"></script>
+	<!-- JS Material IO -->
+	<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
+</head>
+<body>
+	<div class="container-fluid">
+		<div class="row">
+			<section id="nav-bar">
+		    	<nav class="navbar navbar-expand-lg navbar-dark navbar-css-force justify-content-between">
+		    		<div class="container">
+						<a class="navbar-brand" href="#">
+							<i class="far fa-2x fa-user-circle"></i>
+						</a>
+						<div class="text-left" style="padding-top: 5px;">
+							<div id="welcome">Welcome</div>
+							<span id="span-welcome">Hello Mrs. Ani</span>
+						</div>
+						<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
+				            <span class="navbar-toggler-icon"></span>
+				        </button>
+				        <div class="collapse navbar-collapse" id="navbarNav">
+				            <ul class="navbar-nav mr-auto">
+				            </ul>
+				            <ul class="navbar-nav">
+				                <li class="nav-item mr-5">
+				                    <a class="nav-link text-white" href="#"><i class="fas fa-th"></i></a>
+				                </li>
+				                <li class="nav-item mr-5">
+				                    <a class="nav-link text-white" href="#"><i class="fas fa-bell"></i></a>
+				                </li>
+				                <li class="nav-item mr-5">
+				                    <a class="nav-link text-white" href="index.html"><i class="fas fa-sign-out-alt"></i> LOG OUT</a>
+				                </li>
+				            </ul>
+				        </div>
+			        </div>
+				</nav>
+		    </section>
+		</div>
+	    
+	    <div class="row">
+	    	<section id="reservation">
+	    		<div class="container">
+	    			<div id="dashboard-words">
+	    				What Do You Need?
+	    			</div>
+	    			<div id="card">
+	    				<div class="container">
+		    				<div class="row">
+			    				<div class="col-md-6 col-sm-12">
+						            <div class="card card-custom">
+						                <div class="card-horizontal">
+						                    <div class="img-square-wrapper">
+						                        <img class="p-3" src="assets/img/reservation.png" alt="Reservation" style="width: 112px !important; height: 112px !important;">
+						                    </div>
+						                    <div class="card-body pl-0 mt-4">
+						                        <h4 class="card-title">Reservation</h4>
+						                        <p class="card-text">See More</p>
+						                    </div>
+						                    <div class="arrow">
+						                    	<i class="fas fa-2x fa-angle-right" style="padding: 2.5rem 1.5rem !important;"></i>
+						                    </div>
+						                </div>
+						            </div>
+			    				</div>
+			    				<div class="col-md-6 col-sm-12">
+						            <div class="card card-custom">
+						                <div class="card-horizontal">
+						                    <div class="img-square-wrapper">
+						                        <img class="p-3" src="assets/img/users.png" alt="Users" style="width: 112px !important; height: 112px !important;">
+						                    </div>
+						                    <div class="card-body pl-0 mt-4">
+						                        <h4 class="card-title">Users</h4>
+						                        <p class="card-text">See More</p>
+						                    </div>
+						                    <div class="arrow">
+						                    	<i class="fas fa-2x fa-angle-right" style="padding: 2.5rem 1.5rem !important;"></i>
+						                    </div>
+						                </div>
+						            </div>
+			    				</div>
+			    			</div>
+			    			<div class="row">
+			    				<div class="col-md-6 col-sm-12">
+						            <div class="card card-custom">
+						                <div class="card-horizontal">
+						                    <div class="img-square-wrapper">
+						                        <img class="p-3" src="assets/img/time_event.png" alt="Time Event" style="width: 112px !important; height: 112px !important;">
+						                    </div>
+						                    <div class="card-body pl-0 mt-4">
+						                        <h4 class="card-title">Time Event</h4>
+						                        <p class="card-text">See More</p>
+						                    </div>
+						                    <div class="arrow">
+						                    	<i class="fas fa-2x fa-angle-right" style="padding: 2.5rem 1.5rem !important;"></i>
+						                    </div>
+						                </div>
+						            </div>
+			    				</div>
+			    				<div class="col-md-6 col-sm-12">
+						            <div class="card card-custom">
+						                <div class="card-horizontal">
+						                    <div class="img-square-wrapper">
+						                        <img class="p-3" src="assets/img/parenting.png" alt="Parenting" style="width: 112px !important; height: 112px !important;">
+						                    </div>
+						                    <div class="card-body pl-0 mt-4">
+						                        <h4 class="card-title">Parenting</h4>
+						                        <p class="card-text">See More</p>
+						                    </div>
+						                    <div class="arrow">
+						                    	<i class="fas fa-2x fa-angle-right" style="padding: 2.5rem 1.5rem !important;"></i>
+						                    </div>
+						                </div>
+						            </div>
+			    				</div>
+			    			</div>
+			    			<div class="row">
+			    				<div class="col-md-6 col-sm-12">
+						            <div class="card card-custom">
+						                <div class="card-horizontal">
+						                    <div class="img-square-wrapper">
+						                        <img class="p-3" src="assets/img/health.png" alt="My Health & Development" style="width: 112px !important; height: 112px !important;">
+						                    </div>
+						                    <div class="card-body pl-0 mt-4">
+						                        <h4 class="card-title">My Health & Development</h4>
+						                        <p class="card-text">See More</p>
+						                    </div>
+						                    <div class="arrow">
+						                    	<i class="fas fa-2x fa-angle-right" style="padding: 2.5rem 1.5rem !important;"></i>
+						                    </div>
+						                </div>
+						            </div>
+			    				</div>
+			    				<div class="col-md-6 col-sm-12">
+						            <div class="card card-custom">
+						                <div class="card-horizontal">
+						                    <div class="img-square-wrapper">
+						                        <img class="p-3" src="assets/img/about.png" alt="About us" style="width: 112px !important; height: 112px !important;">
+						                    </div>
+						                    <div class="card-body pl-0 mt-4">
+						                        <h4 class="card-title">About Us</h4>
+						                        <p class="card-text">See More</p>
+						                    </div>
+						                    <div class="arrow">
+						                    	<i class="fas fa-2x fa-angle-right" style="padding: 2.5rem 1.5rem !important;"></i>
+						                    </div>
+						                </div>
+						            </div>
+			    				</div>
+			    			</div>
+			    		</div>
+	    			</div>
+	    		</div>
+		    </section>
+	    </div>  
+	</div>
+	<!-- JS Bootstrap -->
+	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
+
+
+</body>
+</html>

debug.log

@@ -0,0 +1 @@
+[0107/211839.886:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)

index.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>D'Care - Login</title>
+	<!-- Main CSS -->
+	<link rel="stylesheet" href="css/main-css.css">
+	<!-- Bootstrap CSS -->
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+	<!-- Font Awesome CSS -->
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
+	<!-- Font Material Icon CSS -->
+	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+	<!-- Meterial IO CSS -->
+	<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
+	<!-- Main Js -->
+	<script src="js/main-js.js" type="text/javascript"></script>
+	<!-- JS Material IO -->
+	<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
+</head>
+<body>
+	<div class="container-fluid">
+		<div class="row">
+			<section id="logo">
+		    	<img src="assets/img/logo-dcare.png" class="rounded mx-auto d-block" alt="daycare" width="338px" height="182px">
+		    </section>
+		</div>
+	    
+	    <div class="row">
+	    	<section id="login-form">
+	    		<div class="col-md-4 col-sm-12 p-5 mx-auto" style="padding-top: 100px !important;">
+	    			<div class="mx-auto" id="login-welcome">
+	    				<h1>Welcome</h1>
+	    				<span>Please Login First</span>
+	    			</div>
+	    			<div class="bg-white p-5" id="login-box">
+		    			<form>
+							<div class="form-group">
+								<!-- <label for="validationCustomUsername">Username</label> -->
+								<div class="input-group">
+									<div class="input-group-prepend">
+										<span class="input-group-text" id="inputGroupPrepend"><i class="fas fa-user"></i></span>
+									</div>
+									<input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
+									<div class="invalid-feedback">
+										Please choose a username.
+									</div>
+								</div>
+							</div>
+							<div class="form-group">
+								<div class="input-group">
+									<div class="input-group-prepend">
+										<span class="input-group-text" id="inputGroupPrepend"><i class="fas fa-lock"></i></i></span>
+									</div>
+									<input type="password" class="form-control" id="validationCustomPassword" placeholder="Password" aria-describedby="inputGroupPrepend" required>
+									<div class="invalid-feedback">
+										Please choose a password.
+									</div>
+								</div>
+							</div>
+							<div class="form-group">
+								<div class="row">
+									<div class="col-sm-7 text-left">
+										<a href="#" class="p-0 m-0 forgot-password">forgot password?</a>
+									</div>
+									<div class="col-sm-5 text-right">
+										<a href="dashboard.html" class="btn btn-blue-soft-light">Log in</a>
+										<!-- <button type="submit" class="btn btn-blue-soft-light">Log in</button> -->
+									</div>
+								</div>
+							</div>
+						</form>
+					</div>
+	    		</div>
+		    </section>
+	    </div>  
+	</div>
+	<!-- JS Bootstrap -->
+	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
+
+
+</body>
+</html>

my_health.html

@@ -0,0 +1,211 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>D'Care - Dashboard</title>
+	<!-- Main CSS -->
+	<link rel="stylesheet" href="css/main-css.css">
+	<link rel="stylesheet" href="css/bootstrap-datepicker.css">
+	<!-- Bootstrap CSS -->
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+	<!-- Font Awesome CSS -->
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
+	<!-- Font Material Icon CSS -->
+	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+	<!-- Meterial IO CSS -->
+	<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
+	<!-- Main Js -->
+	<script src="js/main-js.js" type="text/javascript"></script>
+	<!-- JS Material IO -->
+	<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
+	
+</head>
+<body>
+	<div class="container-fluid">
+		<div class="row">
+			<section id="nav-bar">
+		    	<nav class="navbar navbar-expand-lg navbar-dark navbar-css-force justify-content-between">
+		    		<div class="container">
+						<a class="navbar-brand" href="#">
+							<i class="far fa-2x fa-user-circle"></i>
+						</a>
+						<div class="text-left" style="padding-top: 5px;">
+							<div id="welcome">Welcome</div>
+							<span id="span-welcome">Hello Mrs. Ani</span>
+						</div>
+						<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
+				            <span class="navbar-toggler-icon"></span>
+				        </button>
+				        <div class="collapse navbar-collapse" id="navbarNav">
+				            <ul class="navbar-nav mr-auto">
+				            </ul>
+				            <ul class="navbar-nav">
+				                <li class="nav-item mr-5">
+				                    <a class="nav-link text-white" href="#"><i class="fas fa-th"></i></a>
+				                </li>
+				                <li class="nav-item mr-5">
+				                    <a class="nav-link text-white" href="#"><i class="fas fa-bell"></i></a>
+				                </li>
+				                <li class="nav-item mr-5">
+				                    <a class="nav-link text-white" href="index.html"><i class="fas fa-sign-out-alt"></i> LOG OUT</a>
+				                </li>
+				            </ul>
+				        </div>
+			        </div>
+				</nav>
+		    </section>
+		</div>
+	    
+	    <div class="row">
+	    	<section id="reservation">
+	    		<div class="container">
+	    			<div id="reservation-words">
+	    				<i class="fas fa-1x fa-angle-left"></i>	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;My Health
+	    			</div>	
+	    			<div id="card">
+	    				<div class="container">
+	    					<div style="position: absolute; width: 100%; left: 0; background-color: #F6F7FA;">
+		    					<div class="row">
+		    						<div class="container">
+		    							<div id="card-full">
+			    							<div class="row">
+			    								<div class="col-6 text-center">
+						    						Kurva Pertumbuhan Anak
+							    				</div>
+							    				<div class="col-6 text-center">
+							    					Buku Panduan Pertumbuhan Anak
+							    				</div>
+				    						</div>
+			    						</div>
+		    						</div>
+			    				</div>
+		    				</div>
+		    				<div class="row">
+			    				<div class="col-md-6 col-sm-12 mt-5">
+			    					<div class="row">
+			    						<div class="col-12">
+			    							<div class="dropdown" style="width: 40%">
+												<button class="form-control dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+													Januari 2020
+												</button>
+												<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+													<a class="dropdown-item" href="#">Januari 2020</a>
+													<a class="dropdown-item" href="#">Februari 2020</a>
+													<a class="dropdown-item" href="#">Maret 2020</a>
+													<a class="dropdown-item" href="#">April 2020</a>
+													<a class="dropdown-item" href="#">Mei 2020</a>
+													<a class="dropdown-item" href="#">Juni 2020</a>
+													<a class="dropdown-item" href="#">Juli 2020</a>
+													<a class="dropdown-item" href="#">Agusuts 2020</a>
+													<a class="dropdown-item" href="#">September 2020</a>
+													<a class="dropdown-item" href="#">Oktober 2020</a>
+													<a class="dropdown-item" href="#">November 2020</a>
+													<a class="dropdown-item" href="#">Desember 2020</a>
+												</div>
+											</div>
+											<br />
+											<img src="assets/img/kurva.png" alt="">
+			    						</div>
+			    					</div>
+			    				</div>
+			    				<div class="col-md-6 col-sm-12" style="margin-top: 115px;">
+			    					<div class="mx-auto text-center">
+							        	<img src="assets/img/buku.png" alt="" width="80%">
+									</div>
+			    				</div>
+			    			</div>
+			    		<!-- 	<div class="row">
+			    				<div class="col-md-6 col-sm-12">
+						            <div class="card card-custom">
+						                <div class="card-horizontal">
+						                    <div class="img-square-wrapper">
+						                        <img class="p-3" src="assets/img/time_event.png" alt="Time Event" style="width: 112px !important; height: 112px !important;">
+						                    </div>
+						                    <div class="card-body pl-0 mt-4">
+						                        <h4 class="card-title">Time Event</h4>
+						                        <p class="card-text">See More</p>
+						                    </div>
+						                    <div class="arrow">
+						                    	<i class="fas fa-2x fa-angle-right" style="padding: 2.5rem 1.5rem !important;"></i>
+						                    </div>
+						                </div>
+						            </div>
+			    				</div>
+			    				<div class="col-md-6 col-sm-12">
+						            <div class="card card-custom">
+						                <div class="card-horizontal">
+						                    <div class="img-square-wrapper">
+						                        <img class="p-3" src="assets/img/parenting.png" alt="Parenting" style="width: 112px !important; height: 112px !important;">
+						                    </div>
+						                    <div class="card-body pl-0 mt-4">
+						                        <h4 class="card-title">Parenting</h4>
+						                        <p class="card-text">See More</p>
+						                    </div>
+						                    <div class="arrow">
+						                    	<i class="fas fa-2x fa-angle-right" style="padding: 2.5rem 1.5rem !important;"></i>
+						                    </div>
+						                </div>
+						            </div>
+			    				</div>
+			    			</div>
+			    			<div class="row">
+			    				<div class="col-md-6 col-sm-12">
+						            <div class="card card-custom">
+						                <div class="card-horizontal">
+						                    <div class="img-square-wrapper">
+						                        <img class="p-3" src="assets/img/health.png" alt="My Health & Development" style="width: 112px !important; height: 112px !important;">
+						                    </div>
+						                    <div class="card-body pl-0 mt-4">
+						                        <h4 class="card-title">My Health & Development</h4>
+						                        <p class="card-text">See More</p>
+						                    </div>
+						                    <div class="arrow">
+						                    	<i class="fas fa-2x fa-angle-right" style="padding: 2.5rem 1.5rem !important;"></i>
+						                    </div>
+						                </div>
+						            </div>
+			    				</div>
+			    				<div class="col-md-6 col-sm-12">
+						            <div class="card card-custom">
+						                <div class="card-horizontal">
+						                    <div class="img-square-wrapper">
+						                        <img class="p-3" src="assets/img/about.png" alt="About us" style="width: 112px !important; height: 112px !important;">
+						                    </div>
+						                    <div class="card-body pl-0 mt-4">
+						                        <h4 class="card-title">About Us</h4>
+						                        <p class="card-text">See More</p>
+						                    </div>
+						                    <div class="arrow">
+						                    	<i class="fas fa-2x fa-angle-right" style="padding: 2.5rem 1.5rem !important;"></i>
+						                    </div>
+						                </div>
+						            </div>
+			    				</div>
+			    			</div> -->
+			    		</div>
+	    			</div>
+	    		</div>
+		    </section>
+	    </div>  
+	</div>
+	<!-- JS Bootstrap -->
+	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
+	<!-- Datetime Picker -->
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
+	<!-- datetime picker -->
+	<script>
+		$(document).ready(function(){
+			$('#datepicker').datepicker();
+			$('#datepicker').on('changeDate', function() {
+			    $('#my_hidden_input').val(
+			        $('#datepicker').datepicker('getFormattedDate')
+			    );
+			});
+		});
+	</script>
+
+</body>
+</html>

reservation.html

@@ -0,0 +1,207 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>D'Care - Dashboard</title>
+	<!-- Main CSS -->
+	<link rel="stylesheet" href="css/main-css.css">
+	<link rel="stylesheet" href="css/bootstrap-datepicker.css">
+	<!-- Bootstrap CSS -->
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+	<!-- Font Awesome CSS -->
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
+	<!-- Font Material Icon CSS -->
+	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+	<!-- Meterial IO CSS -->
+	<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
+	<!-- Main Js -->
+	<script src="js/main-js.js" type="text/javascript"></script>
+	<!-- JS Material IO -->
+	<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
+	
+</head>
+<body>
+	<div class="container-fluid">
+		<div class="row">
+			<section id="nav-bar">
+		    	<nav class="navbar navbar-expand-lg navbar-dark navbar-css-force justify-content-between">
+		    		<div class="container">
+						<a class="navbar-brand" href="#">
+							<i class="far fa-2x fa-user-circle"></i>
+						</a>
+						<div class="text-left" style="padding-top: 5px;">
+							<div id="welcome">Welcome</div>
+							<span id="span-welcome">Hello Mrs. Ani</span>
+						</div>
+						<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
+				            <span class="navbar-toggler-icon"></span>
+				        </button>
+				        <div class="collapse navbar-collapse" id="navbarNav">
+				            <ul class="navbar-nav mr-auto">
+				            </ul>
+				            <ul class="navbar-nav">
+				                <li class="nav-item mr-5">
+				                    <a class="nav-link text-white" href="#"><i class="fas fa-th"></i></a>
+				                </li>
+				                <li class="nav-item mr-5">
+				                    <a class="nav-link text-white" href="#"><i class="fas fa-bell"></i></a>
+				                </li>
+				                <li class="nav-item mr-5">
+				                    <a class="nav-link text-white" href="index.html"><i class="fas fa-sign-out-alt"></i> LOG OUT</a>
+				                </li>
+				            </ul>
+				        </div>
+			        </div>
+				</nav>
+		    </section>
+		</div>
+	    
+	    <div class="row">
+	    	<section id="reservation">
+	    		<div class="container">
+	    			<div id="reservation-words">
+	    				<i class="fas fa-1x fa-angle-left"></i>	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Reservation
+	    			</div>	
+	    			<div id="card">
+	    				<div class="container">
+	    					<div style="position: absolute; width: 100%; left: 0; background-color: #F6F7FA;">
+		    					<div class="row">
+		    						<div class="container">
+		    							<div id="card-full">
+			    							<div class="row">
+			    								<div class="col-6 text-center">
+						    						Categories
+							    				</div>
+							    				<div class="col-6 text-center">
+							    					Tanggal Reservasi
+							    				</div>
+				    						</div>
+			    						</div>
+		    						</div>
+			    				</div>
+		    				</div>
+		    				<div class="row">
+			    				<div class="col-md-6 col-sm-12 mt-5">
+			    					<div class="row">
+			    						<div class="col-2"></div>
+			    						<div class="col-md-4">
+			    							<div class="card">
+												<img class="card-img-top mx-auto" src="assets/img/reservation.png" alt="Card image cap" style="width: 100%;">
+												<div class="card-body">
+													<p class="card-text text-center font-weight-bold">< 1 Th</p>
+												</div>
+											</div>
+			    						</div>
+			    						<div class="col-md-4">
+			    							<div class="card">
+												<img class="card-img-top mx-auto" src="assets/img/reservation.png" alt="Card image cap" style="width: 100%;">
+												<div class="card-body">
+													<p class="card-text text-center font-weight-bold">> 1 Th</p>
+												</div>
+											</div>
+			    						</div>
+			    						<div class="col-2"></div>
+			    					</div>
+			    				</div>
+			    				<div class="col-md-6 col-sm-12 mt-5">
+			    					<div class="mx-auto" style="widows: 80%;">
+							        	<div class="text-center mx-auto" id="datepicker" data-date="12/03/2012" style="width: 45%;"></div>
+										<input type="hidden" id="my_hidden_input">
+									</div>
+			    				</div>
+			    			</div>
+			    		<!-- 	<div class="row">
+			    				<div class="col-md-6 col-sm-12">
+						            <div class="card card-custom">
+						                <div class="card-horizontal">
+						                    <div class="img-square-wrapper">
+						                        <img class="p-3" src="assets/img/time_event.png" alt="Time Event" style="width: 112px !important; height: 112px !important;">
+						                    </div>
+						                    <div class="card-body pl-0 mt-4">
+						                        <h4 class="card-title">Time Event</h4>
+						                        <p class="card-text">See More</p>
+						                    </div>
+						                    <div class="arrow">
+						                    	<i class="fas fa-2x fa-angle-right" style="padding: 2.5rem 1.5rem !important;"></i>
+						                    </div>
+						                </div>
+						            </div>
+			    				</div>
+			    				<div class="col-md-6 col-sm-12">
+						            <div class="card card-custom">
+						                <div class="card-horizontal">
+						                    <div class="img-square-wrapper">
+						                        <img class="p-3" src="assets/img/parenting.png" alt="Parenting" style="width: 112px !important; height: 112px !important;">
+						                    </div>
+						                    <div class="card-body pl-0 mt-4">
+						                        <h4 class="card-title">Parenting</h4>
+						                        <p class="card-text">See More</p>
+						                    </div>
+						                    <div class="arrow">
+						                    	<i class="fas fa-2x fa-angle-right" style="padding: 2.5rem 1.5rem !important;"></i>
+						                    </div>
+						                </div>
+						            </div>
+			    				</div>
+			    			</div>
+			    			<div class="row">
+			    				<div class="col-md-6 col-sm-12">
+						            <div class="card card-custom">
+						                <div class="card-horizontal">
+						                    <div class="img-square-wrapper">
+						                        <img class="p-3" src="assets/img/health.png" alt="My Health & Development" style="width: 112px !important; height: 112px !important;">
+						                    </div>
+						                    <div class="card-body pl-0 mt-4">
+						                        <h4 class="card-title">My Health & Development</h4>
+						                        <p class="card-text">See More</p>
+						                    </div>
+						                    <div class="arrow">
+						                    	<i class="fas fa-2x fa-angle-right" style="padding: 2.5rem 1.5rem !important;"></i>
+						                    </div>
+						                </div>
+						            </div>
+			    				</div>
+			    				<div class="col-md-6 col-sm-12">
+						            <div class="card card-custom">
+						                <div class="card-horizontal">
+						                    <div class="img-square-wrapper">
+						                        <img class="p-3" src="assets/img/about.png" alt="About us" style="width: 112px !important; height: 112px !important;">
+						                    </div>
+						                    <div class="card-body pl-0 mt-4">
+						                        <h4 class="card-title">About Us</h4>
+						                        <p class="card-text">See More</p>
+						                    </div>
+						                    <div class="arrow">
+						                    	<i class="fas fa-2x fa-angle-right" style="padding: 2.5rem 1.5rem !important;"></i>
+						                    </div>
+						                </div>
+						            </div>
+			    				</div>
+			    			</div> -->
+			    		</div>
+	    			</div>
+	    		</div>
+		    </section>
+	    </div>  
+	</div>
+	<!-- JS Bootstrap -->
+	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
+	<!-- Datetime Picker -->
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
+	<!-- datetime picker -->
+	<script>
+		$(document).ready(function(){
+			$('#datepicker').datepicker();
+			$('#datepicker').on('changeDate', function() {
+			    $('#my_hidden_input').val(
+			        $('#datepicker').datepicker('getFormattedDate')
+			    );
+			});
+		});
+	</script>
+
+</body>
+</html>

time_event.html

@@ -0,0 +1,188 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>D'Care - Dashboard</title>
+	<!-- Main CSS -->
+	<link rel="stylesheet" href="css/main-css.css">
+	<!-- Datepicker -->
+	<link rel="stylesheet" href="css/bootstrap-datepicker.css">
+	<!-- Timepicker -->
+	<link rel="stylesheet" href="css/bootstrap-timepicker.css">
+	<!-- Bootstrap CSS -->
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+	<!-- Data Table -->
+	<link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">
+	<!-- Font Awesome CSS -->
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
+	<!-- Font Material Icon CSS -->
+	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+	<!-- Meterial IO CSS -->
+	<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
+	<!-- Main Js -->
+	<script src="js/main-js.js" type="text/javascript"></script>
+	<!-- JS Material IO -->
+	<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
+	
+</head>
+<body>
+	<div class="container-fluid">
+		<div class="row">
+			<section id="nav-bar">
+		    	<nav class="navbar navbar-expand-lg navbar-dark navbar-css-force justify-content-between">
+		    		<div class="container">
+						<a class="navbar-brand" href="#">
+							<i class="far fa-2x fa-user-circle"></i>
+						</a>
+						<div class="text-left" style="padding-top: 5px;">
+							<div id="welcome">Welcome</div>
+							<span id="span-welcome">Hello Mrs. Ani</span>
+						</div>
+						<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
+				            <span class="navbar-toggler-icon"></span>
+				        </button>
+				        <div class="collapse navbar-collapse" id="navbarNav">
+				            <ul class="navbar-nav mr-auto">
+				            </ul>
+				            <ul class="navbar-nav">
+				                <li class="nav-item mr-5">
+				                    <a class="nav-link text-white" href="#"><i class="fas fa-th"></i></a>
+				                </li>
+				                <li class="nav-item mr-5">
+				                    <a class="nav-link text-white" href="#"><i class="fas fa-bell"></i></a>
+				                </li>
+				                <li class="nav-item mr-5">
+				                    <a class="nav-link text-white" href="index.html"><i class="fas fa-sign-out-alt"></i> LOG OUT</a>
+				                </li>
+				            </ul>
+				        </div>
+			        </div>
+				</nav>
+		    </section>
+		</div>
+	    
+	    <div class="row">
+	    	<section id="reservation">
+	    		<div class="container">
+	    			<div id="reservation-words">
+	    				<i class="fas fa-1x fa-angle-left"></i>	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Time Event
+	    			</div>	
+	    			<div id="card">
+	    				<div class="container">
+	    					<div style="position: absolute; width: 100%; left: 0; background-color: #F6F7FA;">
+		    					<div class="row">
+		    						<div class="container">
+		    							<div id="card-full">
+			    							<div class="row">
+			    								<div class="col-6 text-center">
+						    						Today Check In
+							    				</div>
+							    				<div class="col-6 text-center">
+							    					Daily Activity
+							    				</div>
+				    						</div>
+			    						</div>
+		    						</div>
+			    				</div>
+		    				</div>
+		    				<div class="row">
+			    				<div class="col-md-6 col-sm-12 mt-5">
+			    					<div class="row">
+			    						<div class="col-2"></div>
+			    						<div class="col-md-4">
+			    							<div class="card">
+												<div class="card-header text-center text-white bg-danger">
+													Clock In
+												</div>
+												<div class="card-body">
+													<input class="form-control timepicker text-center" type="text" />
+												</div>
+											</div>
+			    						</div>
+			    						<div class="col-md-4">
+			    							<div class="card">
+												<div class="card-header text-center text-white bg-info">
+													Clock Out
+												</div>
+												<div class="card-body">
+													<input class="form-control timepicker text-center" type="text" />
+												</div>
+											</div>
+			    						</div>
+			    						<div class="col-2"></div>
+			    						<div class="col-12 mt-5 mb-5">
+			    							<table id="example" class="table table-striped table-bordered">
+										        <thead>
+										            <tr>
+										                <th>Tanggal</th>
+										                <th>Clock In</th>
+										                <th>Clock Out</th>
+										            </tr>
+										        </thead>
+										        <tbody>
+										            <tr>
+										                <td>10 Nov</td>
+										                <td>07.15</td>
+										                <td>16.00</td>
+										            </tr>
+										            <tr>
+										                <td>15 Nov</td>
+										                <td>07.15</td>
+										                <td>16.00</td>
+										            </tr>
+										            <tr>
+										                <td>20 Nov</td>
+										                <td>07.15</td>
+										                <td>16.00</td>
+										            </tr>
+										            <tr>
+										                <td>25 Nov</td>
+										                <td>07.15</td>
+										                <td>16.00</td>
+										            </tr>
+										            <tr>
+										                <td>30 Nov</td>
+										                <td>07.15</td>
+										                <td>16.00</td>
+										            </tr>
+										        </tbody>
+										    </table>
+			    						</div>
+			    					</div>
+			    				</div>
+			    				<div class="col-md-6 col-sm-12 mt-5">
+			    					<div class="mx-auto" style="widows: 80%;">
+							        	<div class="text-center mx-auto" id="datepicker" data-date="12/03/2012" style="width: 45%;"></div>
+										<input type="hidden" id="my_hidden_input">
+									</div>
+			    				</div>
+			    			</div>
+			    		</div>
+	    			</div>
+	    		</div>
+		    </section>
+	    </div>  
+	</div>
+	<!-- JS Bootstrap -->
+	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+	<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
+	<script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
+	<!-- Date Picker -->
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
+	<!-- Time Picker -->
+	<script src="js/bootstrap-timepicker.js"></script>
+	<script>
+		$(document).ready(function(){
+			$('.timepicker').timepicker({
+			 showMeridian: false
+			})
+
+    		$('#example').DataTable();
+		});
+	</script>
+
+</body>
+</html>