Merge branch 'feature/php/thanhhm/contruct_source' into 'develop'

Feature/php/thanhhm/contruct source

See merge request !2

.editorconfig

@@ -2,7 +2,7 @@
 root = true
 
 [*]
-indent_size = 2
+indent_size = 4
 indent_style = space
 end_of_line = lf
 charset = utf-8

.vscode/settings.json

+{
+    "vue3snippets.enable-compile-vue-file-on-did-save-code": false
+}
\ No newline at end of file

assets/images/login.svg

+<svg height="492pt" viewBox="-43 0 492 492.00001" width="492pt" xmlns="http://www.w3.org/2000/svg"><path d="m321.910156 258.570312c6.5625 9.289063 21.363282 29.519532 35.0625 43.230469 13.308594 13.308594 31.347656 26.167969 40.078125 32.109375 1.328125.902344 2.21875 2.316406 2.46875 3.902344.246094 1.585938-.171875 3.203125-1.15625 4.46875l-51.351562 66.007812c-1.933594 2.484376-5.492188 2.980469-8.03125 1.121094-12.882813-9.472656-25.234375-19.648437-37-30.480468l-43.527344 43.519531-20.269531 20.269531 2.597656 15.832031-18.089844-.339843 1.359375 17.070312-16.628906-1.792969-12.519531 12.511719-20.941406-4.191406-4.179688-20.9375 107.070312-107.070313c-3.800781-4.128906-7.519531-8.332031-11.160156-12.601562-6.730468-7.890625-13.167968-16.027344-19.320312-24.410157-1.867188-2.535156-1.375-6.09375 1.109375-8.027343l66.121093-51.421875c1.253907-.972656 2.847657-1.390625 4.417969-1.160156 1.570313.234374 2.976563 1.097656 3.890625 2.390624zm29.632813 99.269532 11.71875-15.070313-12.640625-11.058593c-9.425782-8.257813-18.296875-17.128907-26.550782-26.5625l-11.058593-12.636719-15.078125 11.726562 18.429687 35.183594zm0 0" fill="#f8ec7d"/><path d="m115.863281 107.648438c56.390625 50.25 140.480469 47.023437 140.480469 47.023437v-.222656c7.980469.671875 14.636719 6.382812 16.519531 14.171875 1.625 6.644531.425781 13.667968-3.3125 19.398437s-9.679687 9.660157-16.417969 10.851563v.148437l-5.101562 17.53125c-8.148438 43.347657-46.003906 74.753907-90.113281 74.753907s-81.96875-31.40625-90.117188-74.753907l-5.097656-17.53125v-.148437c-6.738281-1.191406-12.683594-5.117188-16.421875-10.851563-3.738281-5.730469-4.9375-12.753906-3.308594-19.398437 1.886719-7.808594 8.566406-13.523438 16.570313-14.179688v.578125c2.015625 1.207031 4.320312 1.84375 6.667969 1.851563 7.066406 0 12.882812-5.554688 13.199218-12.609375l1.632813-35.722657c11.613281.386719 23.238281.089844 34.820312-.890624zm0 0" fill="#ffc9a4"/><path d="m168.710938 98.789062c-17.304688 4.574219-34.996094 7.539063-52.847657 8.859376-11.582031.980468-23.207031 1.277343-34.820312.890624l-1.632813 35.722657c-.316406 7.054687-6.132812 12.609375-13.199218 12.609375-2.347657-.007813-4.652344-.644532-6.667969-1.851563v-50.621093c0-54.34375 44.054687-98.398438 98.398437-98.398438s98.402344 44.054688 98.402344 98.398438v33.953124c-59.890625-3.863281-87.632812-39.5625-87.632812-39.5625zm0 0" fill="#e48e66"/><path d="m201.792969 319.890625 63.898437 21.308594c3.640625 4.28125 7.359375 8.480469 11.160156 12.601562l-86.898437 86.898438h-183.949219v-49.398438c-.035156-3.714843.359375-7.425781 1.167969-11.050781.160156-.648438.320313-1.300781.5-1.941406 4.570313-16.636719 17.609375-29.636719 34.019531-34.957032l72.351563-23.460937c27.375 14.800781 60.371093 14.800781 87.75 0zm0 0" fill="#6fe3ff"/><path d="m114.152344 280.191406c27.296875 14.8125 60.234375 14.8125 87.53125 0v39.660156l.109375.039063c-27.378907 14.800781-60.375 14.800781-87.75 0l.109375-.039063zm0 0" fill="#efbd9c"/><path d="m168.710938 98.789062s27.742187 35.699219 87.632812 39.5625v16.320313s-84.089844 3.226563-140.480469-47.023437c17.851563-1.320313 35.542969-4.285157 52.847657-8.859376zm0 0" fill="#cc7350"/><g fill="#63316d"><path d="m400.425781 328.949219c-7.359375-5.007813-25.910156-18.089844-39.210937-31.390625-13.625-13.632813-28.597656-34.230469-34.40625-42.453125-1.863282-2.632813-4.71875-4.386719-7.910156-4.859375-3.1875-.472656-6.433594.378906-8.980469 2.359375l-66.125 51.417969c-5.078125 3.914062-6.085938 11.171874-2.261719 16.316406 2.136719 2.914062 4.332031 5.800781 6.546875 8.664062l-40.398437-13.476562v-31.851563c24.140624-14.234375 40.976562-38.1875 46.1875-65.726562l4.101562-14.089844c15.507812-4.828125 24.585938-20.886719 20.722656-36.664063-1.988281-8.320312-8.191406-14.992187-16.347656-17.582031v-45.214843c0-57.65625-46.742188-104.398438-104.398438-104.398438-57.660156 0-104.402343 46.742188-104.402343 104.398438v45.195312c-8.183594 2.574219-14.410157 9.261719-16.402344 17.605469-.582031 2.398437-.878906 4.855469-.878906 7.320312-.023438 13.460938 8.738281 25.367188 21.601562 29.34375l4.097657 14.085938c5.234374 27.523437 22.0625 51.460937 46.191406 65.699219v31.835937l-68.308594 22.152344c-18.714844 6.066406-32.902344 20.675781-37.945312 39.042969-.203126.703124-.375 1.417968-.570313 2.207031-.917969 4.074219-1.3632812 8.238281-1.32421875 12.414062v49.398438c0 3.316406 2.68359375 6 5.99999975 6h169.464844l-9.929688 9.929687c-1.417968 1.417969-2.035156 3.449219-1.640624 5.417969l4.179687 20.9375c.472656 2.375 2.332031 4.234375 4.707031 4.707031l20.941406 4.191406c1.964844.394532 3.996094-.222656 5.417969-1.640624l10.488281-10.480469 13.777344 1.484375c1.777344.191406 3.542969-.417969 4.824219-1.664063 1.28125-1.246093 1.941406-2.996093 1.796875-4.777343l-.832031-10.472657 11.46875.21875c1.78125.03125 3.484375-.726562 4.652343-2.074219 1.164063-1.347656 1.671876-3.140624 1.382813-4.898437l-2.101563-12.792969 57.578126-57.566406c10.632812 9.535156 21.800781 18.609375 33.257812 27.035156 5.152344 3.804688 12.402344 2.792969 16.3125-2.28125l51.351562-66.011718c2.003907-2.574219 2.851563-5.863282 2.34375-9.082032-.503906-3.222656-2.320312-6.09375-5.015624-7.929687zm-280.273437-39.25c24.15625 10.132812 51.371094 10.132812 75.53125 0v26.574219c-23.828125 11.65625-51.703125 11.65625-75.53125 0zm46.480468-184.164063c8.171876 8.800782 35.136719 33.542969 83.710938 38.34375v4.789063c-18.0625-.378907-74.890625-4.238281-119.324219-36.515625 12-1.441406 23.894531-3.652344 35.613281-6.617188zm-101.089843-1.136718c0-51.03125 41.367187-92.398438 92.398437-92.398438s92.402344 41.367188 92.402344 92.398438v27.402343c-36.816406-3.980469-59.988281-20.628906-70.421875-30.082031 18.433594-5.929688 34.097656-13.773438 46.640625-23.402344 1.75-1.285156 2.671875-3.417968 2.402344-5.574218-.269532-2.15625-1.679688-4-3.695313-4.816407-2.011719-.820312-4.308593-.484375-6.007812.871094-13.425781 10.300781-30.949219 18.433594-52.089844 24.191406l-.027344.007813h-.007812c-16.941407 4.492187-34.265625 7.394531-51.746094 8.667968-11.320313.949219-22.6875 1.242188-34.042969.878907-1.59375-.082031-3.15625.476562-4.339844 1.550781-1.183593 1.074219-1.886718 2.574219-1.960937 4.167969l-1.628906 35.71875c-.09375 1.96875-.988281 3.816406-2.476563 5.109375-1.488281 1.292968-3.4375 1.921875-5.398437 1.746094zm8.15625 111.042968c-.035157-.191406-.082031-.378906-.136719-.566406l-4.941406-16.984375c-.414063-2.515625-2.375-4.492187-4.886719-4.929687-8.957031-1.5625-15.492187-9.347657-15.472656-18.441407 0-1.507812.183593-3.011719.539062-4.476562 1.03125-4.492188 4.480469-8.035157 8.945313-9.179688 5.804687 2.890625 12.679687 2.644531 18.265625-.652343 5.585937-3.296876 9.121093-9.199219 9.394531-15.679688l1.363281-29.839844c5.75.070313 15.257813-.023437 27.035157-.871094 29.808593 25.667969 66.507812 37.042969 92.296874 42.074219 28.429688 5.542969 49.585938 4.804688 50.472657 4.769531.164062-.003906.328125-.023437.488281-.042968 4.921875.859375 8.851562 4.582031 9.980469 9.445312.359375 1.457032.535156 2.953125.53125 4.453125-.011719 9.082031-6.527344 16.847657-15.46875 18.441407-2.511719.433593-4.472657 2.414062-4.890625 4.929687l-4.941406 16.984375c-.054688.1875-.097657.375-.136719.566406-5.0625 26.917969-22.691407 49.796875-47.429688 61.554688-24.738281 11.761718-53.605469 10.992187-77.679687-2.074219-22.648438-12.308594-38.554688-34.148437-43.324219-59.480469zm-61.695313 219.257813v-43.398438c-.035156-3.234375.300782-6.460937 1-9.617187.144532-.585938.285156-1.171875.457032-1.785156 3.980468-14.5 15.226562-26.023438 30.085937-30.839844l69.960937-22.6875c27.890626 14.21875 60.90625 14.222656 88.804688.015625l59.917969 19.980469c2.046875 2.390624 4.160156 4.800781 6.339843 7.234374l-81.101562 81.101563zm330.382813-30.234375c-12.652344-9.3125-24.785157-19.308594-36.339844-29.949219-2.367187-2.179687-6.03125-2.101563-8.308594.171875l-63.796875 63.789062c-1.367187 1.367188-1.992187 3.308594-1.679687 5.214844l1.433593 8.722656-10.890624-.199218c-1.691407-.03125-3.320313.65625-4.480469 1.886718-1.160157 1.234376-1.746094 2.902344-1.613281 4.589844l.785156 9.855469-9.429688-1.019531c-1.804687-.191406-3.597656.441406-4.882812 1.722656l-10.25 10.242188-13.871094-2.777344-2.769531-13.871094 104.800781-104.800781c2.269531-2.273438 2.34375-5.933594.171875-8.300781-3.847656-4.175782-7.546875-8.359376-11-12.421876l-.007813-.007812c-6.546874-7.679688-12.917968-15.722656-18.941406-23.925781l65.8125-51.1875c6.066406 8.582031 21.414063 29.648437 35.601563 43.84375 13.4375 13.441406 31.246093 26.222656 40.773437 32.710937zm0 0"/><path d="m328.59375 301.199219-11.0625-12.640625c-2.09375-2.390625-5.6875-2.738282-8.199219-.785156l-15.082031 11.726562c-2.292969 1.78125-2.980469 4.949219-1.632812 7.519531l18.429687 35.179688c.566406 1.082031 1.449219 1.964843 2.53125 2.53125l35.179687 18.421875c2.574219 1.34375 5.738282.65625 7.519532-1.632813l11.722656-15.070312c1.949219-2.511719 1.605469-6.105469-.785156-8.199219l-12.640625-11.050781c-9.222657-8.082031-17.902344-16.769531-25.980469-26zm26.460938 42.359375-5.167969 6.640625-29.074219-15.222657-15.238281-29.078124 6.652343-5.171876 7.328126 8.378907c8.433593 9.628906 17.488281 18.691406 27.117187 27.125zm0 0"/></g></svg>
\ No newline at end of file

assets/scss/chat.scss

+body {
+  font-family: 'Raleway', sans-serif;
+  background : #E9ECE9;
+}
+
+.send-message {
+  position : fixed;
+  bottom   : 0%;
+  width    : 35%;
+  max-width: inherit;
+}
+
+.form-chat {
+  height  : 700px;
+  position: relative;
+}
+
+.list-message {
+  position : absolute;
+  bottom   : 0%;
+  min-width: -webkit-fill-available;
+}
+
+.comments-main {
+  background: #FFF;
+
+  ul {
+    li {
+      list-style: none;
+    }
+  }
+}
+
+.comment time,
+.comment:hover time,
+.icon-rocknroll,
+.like-count {
+  -webkit-transition: .25s opacity linear;
+  transition        : .25s opacity linear;
+}
+
+@mixin commentStyle {
+  font-size: .75rem;
+  opacity  : 0;
+}
+
+@mixin opacity {
+  opacity: 1;
+}
+
+.comments {
+  .comment {
+    padding   : 5px 10px;
+    background: #00AF90;
+
+    &:hover {
+      time {
+        @include opacity;
+      }
+    }
+
+    h4 {
+      display  : inline-block;
+      font-size: 16px;
+
+      a {
+        color          : #404040;
+        text-decoration: none;
+      }
+    }
+
+    .icon-rocknroll {
+      color    : #545454;
+      font-size: .85rem;
+
+      &:hover {
+        opacity: .5;
+      }
+    }
+
+    $weight: 300;
+
+    time {
+      @include commentStyle();
+      font-weight: #{$weight};
+    }
+
+    .like-count {
+      @include commentStyle();
+      font-weight: #{$weight};
+    }
+
+    .icon-rocknroll {
+      @include commentStyle;
+    }
+
+    p {
+      font-size: 13px;
+
+      .reply {
+        color : #BFBFA8;
+        cursor: pointer;
+      }
+    }
+
+    .active {
+      @include opacity;
+    }
+
+    &:hover {
+      .icon-rocknroll {
+        @include opacity;
+      }
+
+      .like-count {
+        @include opacity;
+      }
+    }
+  }
+
+  $size: 50px;
+
+  .user-img {
+    img {
+      width : #{$size};
+      height: #{$size};
+    }
+  }
+}
+
+.icon-rocknroll {
+  background: none;
+  outline   : none;
+  cursor    : pointer;
+  margin    : 0 .125rem 0 0;
+}
+
+.comment-box-main {
+  background: #CA1D5F;
+}
+
+@media (min-width: 320px) and (max-width: 480px) {
+  .comments {
+    .comment {
+      h4 {
+        font-size: 12px;
+      }
+
+      p {
+        font-size: 11px;
+      }
+    }
+  }
+
+  .comment-box-main .send-btn button {
+    margin-left: 5px;
+  }
+}
\ No newline at end of file

assets/scss/login.scss

+/* OTHERS */
+*:focus {
+  outline: none;
+}
+
+#icon {
+  width: 60%;
+}
+
+/* BASIC */
+
+html {
+  background-color: #56baed;
+}
+
+body {
+  font-family: "Poppins", sans-serif;
+  height     : 100vh;
+}
+
+a {
+  color          : #92badd;
+  display        : inline-block;
+  text-decoration: none;
+  font-weight    : 400;
+}
+
+h2 {
+  text-align    : center;
+  font-size     : 16px;
+  font-weight   : 600;
+  text-transform: uppercase;
+  display       : inline-block;
+  margin        : 40px 8px 10px 8px;
+  color         : #cccccc;
+}
+
+/* STRUCTURE */
+
+.wrapper {
+  display        : flex;
+  align-items    : center;
+  flex-direction : column;
+  justify-content: center;
+  width          : 100%;
+  min-height     : 100%;
+  padding        : 20px;
+}
+
+#formContent {
+  -webkit-border-radius: 10px 10px 10px 10px;
+  border-radius        : 10px 10px 10px 10px;
+  background           : #fff;
+  padding              : 30px;
+  width                : 90%;
+  max-width            : 450px;
+  position             : relative;
+  padding              : 0px;
+  -webkit-box-shadow   : 0 30px 60px 0 rgba(0, 0, 0, 0.3);
+  box-shadow           : 0 30px 60px 0 rgba(0, 0, 0, 0.3);
+  text-align           : center;
+}
+
+#formFooter {
+  background-color     : #f6f6f6;
+  border-top           : 1px solid #dce8f1;
+  padding              : 25px;
+  text-align           : center;
+  -webkit-border-radius: 0 0 10px 10px;
+  border-radius        : 0 0 10px 10px;
+}
+
+h2 {
+  &.inactive {
+    color: #cccccc;
+  }
+
+  &.active {
+    color        : #0d0d0d;
+    border-bottom: 2px solid #5fbae9;
+  }
+}
+
+@mixin inputStyle {
+  background-color: #56baed;
+  border          : none;
+  color           : white;
+  padding         : 15px 80px;
+
+  text {
+    align     : center;
+    decoration: none;
+    transform : uppercase
+  }
+
+  display              : inline-block;
+  font-size            : 13px;
+  -webkit-box-shadow   : 0 10px 30px 0 rgba(95, 186, 233, 0.4);
+  box-shadow           : 0 10px 30px 0 rgba(95, 186, 233, 0.4);
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius        : 5px 5px 5px 5px;
+  margin               : 5px 20px 40px 20px;
+  -webkit-transition   : all 0.3s ease-in-out;
+  -moz-transition      : all 0.3s ease-in-out;
+  -ms-transition       : all 0.3s ease-in-out;
+  -o-transition        : all 0.3s ease-in-out;
+  transition           : all 0.3s ease-in-out;
+}
+
+@mixin inputActive {
+  -moz-transform   : scale(0.95);
+  -webkit-transform: scale(0.95);
+  -o-transform     : scale(0.95);
+  -ms-transform    : scale(0.95);
+  transform        : scale(0.95);
+}
+
+input {
+  &[type="button"] {
+    @include inputStyle;
+
+    &:hover {
+      background-color: #39ace7;
+    }
+
+    &:active {
+      @include inputActive;
+    }
+  }
+
+  &[type="submit"] {
+    @include inputStyle;
+
+    &:hover {
+      background-color: #39ace7;
+    }
+
+    &:active {
+      @include inputActive;
+    }
+  }
+
+  &[type="reset"] {
+    @include inputStyle;
+
+    &:hover {
+      background-color: #39ace7;
+    }
+
+    &:active {
+      @include inputActive;
+    }
+  }
+
+  &[type="text"] {
+    background-color: #f6f6f6;
+    border          : none;
+    color           : #0d0d0d;
+    padding         : 15px 32px;
+
+    text: {
+      align     : center;
+      decoration: none;
+    }
+
+    display              : inline-block;
+    font-size            : 16px;
+    margin               : 5px;
+    width                : 85%;
+    border               : 2px solid #f6f6f6;
+    -webkit-transition   : all 0.5s ease-in-out;
+    -moz-transition      : all 0.5s ease-in-out;
+    -ms-transition       : all 0.5s ease-in-out;
+    -o-transition        : all 0.5s ease-in-out;
+    transition           : all 0.5s ease-in-out;
+    -webkit-border-radius: 5px 5px 5px 5px;
+    border-radius        : 5px 5px 5px 5px;
+
+    &:focus {
+      background-color: #fff;
+      border-bottom   : 2px solid #5fbae9;
+    }
+
+    &:placeholder {
+      color: #cccccc;
+    }
+  }
+}
+
+.fadeInDown {
+  -webkit-animation-name     : fadeInDown;
+  animation-name             : fadeInDown;
+  -webkit-animation-duration : 1s;
+  animation-duration         : 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode        : both;
+}
+
+@mixin fadeDown0 {
+  opacity          : 0;
+  -webkit-transform: translate3d(0, -100%, 0);
+  transform        : translate3d(0, -100%, 0);
+}
+
+@mixin fadeDown100 {
+  opacity          : 1;
+  -webkit-transform: none;
+  transform        : none;
+}
+
+@mixin fadeIn0 {
+  opacity: 0;
+}
+
+@mixin fadeIn100 {
+  opacity: 1;
+}
+
+@-webkit-keyframes fadeInDown {
+  0% {
+    @include fadeDown0;
+  }
+
+  100% {
+    @include fadeDown100;
+  }
+}
+
+@keyframes fadeInDown {
+  0% {
+    @include fadeDown0;
+  }
+
+  100% {
+    @include fadeDown100;
+  }
+}
+
+/* Simple CSS3 Fade-in Animation */
+@-webkit-keyframes fadeIn {
+  from {
+    @include fadeIn0;
+  }
+
+  to {
+    @include fadeIn100;
+  }
+}
+
+@-moz-keyframes fadeIn {
+  from {
+    @include fadeIn0;
+  }
+
+  to {
+    @include fadeIn100;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    @include fadeIn0;
+  }
+
+  to {
+    @include fadeIn100;
+  }
+}
+
+.fadeIn {
+  opacity          : 0;
+  -webkit-animation: fadeIn ease-in 1;
+  -moz-animation   : fadeIn ease-in 1;
+  animation        : fadeIn ease-in 1;
+
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-fill-mode   : forwards;
+  animation-fill-mode        : forwards;
+
+  -webkit-animation-duration: 1s;
+  -moz-animation-duration   : 1s;
+  animation-duration        : 1s;
+
+  &.first {
+    -webkit-animation-delay: 0.4s;
+    -moz-animation-delay   : 0.4s;
+    animation-delay        : 0.4s;
+  }
+
+  &.second {
+    -webkit-animation-delay: 0.6s;
+    -moz-animation-delay   : 0.6s;
+    animation-delay        : 0.6s;
+  }
+
+  &.third {
+    -webkit-animation-delay: 0.8s;
+    -moz-animation-delay   : 0.8s;
+    animation-delay        : 0.8s;
+  }
+
+  &.fourth {
+    -webkit-animation-delay: 1s;
+    -moz-animation-delay   : 1s;
+    animation-delay        : 1s;
+  }
+}
+
+/* Simple CSS3 Fade-in Animation */
+.underlineHover {
+  &:after {
+    display         : block;
+    left            : 0;
+    bottom          : -10px;
+    width           : 0;
+    height          : 2px;
+    background-color: #56baed;
+    content         : "";
+    transition      : width 0.2s;
+  }
+
+  &:hover {
+    color: #0d0d0d;
+
+    &:after {
+      width: 100%;
+    }
+  }
+}
\ No newline at end of file

assets/scss/menu.scss

+.nav-menu {
+  text-align: center;
+
+  body {
+    background: #ccc;
+
+    font: {
+      family: helvetica, arial, serif;
+      size  : 13px;
+    }
+
+    text: {
+      transform: uppercase;
+      align    : center;
+    }
+  }
+
+  .wrap {
+    display           : inline-block;
+    -webkit-box-shadow: 0 0 70px #fff;
+    -moz-box-shadow   : 0 0 70px #fff;
+    box-shadow        : 0 0 70px #fff;
+  }
+
+  /* a little "umph" */
+  .decor {
+    background     : #6eaf8d;
+    background     : -webkit-linear-gradient(left, #cdebdb 50%, #6eaf8d 50%);
+    background     : -moz-linear-gradient(left, #cdebdb 50%, #6eaf8d 50%);
+    background     : -o-linear-gradient(left, #cdebdb 50%, #6eaf8d 50%);
+    background     : linear-gradient(left, white 50%, #6eaf8d 50%);
+    background-size: 50px 25%;
+    padding        : 2px;
+    display        : block;
+  }
+
+  a {
+    text-decoration: none;
+    color          : #fff;
+    display        : block;
+  }
+
+  ul {
+    list-style: none;
+    position  : relative;
+    text-align: left;
+
+    &:after {
+      clear: both;
+    };
+
+    &:before,
+    &:after {
+      content: " ";
+      display: table;
+    }
+
+    &.primary {
+      li {
+        a {
+          display     : block;
+          padding     : 20px 30px;
+          border-right: 1px solid #3d3d3d;
+
+          &:hover {
+            color: #000;
+          }
+        }
+
+        &:last-child a {
+          border-right: none;
+        }
+
+        &:hover {
+          /* sub display*/
+          ul {
+            display   : block;
+            background: #fff;
+          }
+
+          a {
+            background : #fff;
+            color      : #666;
+            text-shadow: none;
+          }
+        }
+
+        &:hover>a {
+          color: #000;
+        }
+      }
+    }
+
+    /* subs */
+    &.sub {
+      position  : absolute;
+      z-index   : 200;
+      box-shadow: 2px 2px 0 #bebebe;
+      width     : 35%;
+      display   : none;
+
+      li {
+        float : none;
+        margin: 0;
+
+        a {
+          border-bottom: 1px dotted #ccc;
+          border-right : none;
+          color        : #000;
+          padding      : 15px 30px;
+
+          &:hover {
+            color     : #000;
+            background: #eeeeee;
+          }
+        }
+
+        &:last-child {
+          a {
+            border-bottom: none;
+          }
+        }
+      }
+    }
+  }
+
+  li {
+    float: left;
+  }
+
+  nav {
+    position                  : relative;
+    background                : #2b2b2b;
+    background-image          : -webkit-linear-gradient(bottom, #2b2b2b 7%, #333333 100%);
+    background-image          : -moz-linear-gradient(bottom, #2b2b2b 7%, #333333 100%);
+    background-image          : -o-linear-gradient(bottom, #2b2b2b 7%, #333333 100%);
+    background-image          : linear-gradient(bottom, #2b2b2b 7%, #333333 100%);
+    text-align                : center;
+    letter-spacing            : 1px;
+    text-shadow               : 1px 1px 1px #0e0e0e;
+    -webkit-box-shadow        : 2px 2px 3px #888;
+    -moz-box-shadow           : 2px 2px 3px #888;
+    box-shadow                : 2px 2px 3px #888;
+    border-bottom-right-radius: 8px;
+    border-bottom-left-radius : 8px;
+  }
+
+  @media only screen and (max-width: 600px) {
+    .decor {
+      padding: 3px;
+    }
+
+    .wrap {
+      width     : 100%;
+      margin-top: 0px;
+    }
+
+    li {
+      float: none;
+    }
+
+    ul {
+      &.sub {
+        display   : block;
+        position  : static;
+        box-shadow: none;
+        width     : 100%;
+
+        li {
+          a {
+            &:hover {
+              color     : #ccc;
+              background: none;
+            }
+          }
+        }
+      }
+
+      &.primary {
+        li {
+          &:hover {
+            a {
+              background : none;
+              color      : #8b8b8b;
+              text-shadow: 1px 1px #000;
+            }
+
+            ul {
+              display   : block;
+              background: #272727;
+              color     : #fff;
+            }
+          }
+        }
+      }
+
+      li {
+        a {
+          background: #272727;
+          border    : none;
+          color     : #8b8b8b;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

assets/scss/regirst.scss

+.border-md {
+  border-width: 2px;
+}
+
+@mixin bgColor($color) {
+  background: $color;
+}
+
+.btn-facebook {
+  background: #405d9d;
+  border    : none;
+
+  &:hover {
+    @include bgColor(#314879);
+  }
+
+  &:focus {
+    @include bgColor(#314879);
+  }
+}
+
+.btn-twitter {
+  @include bgColor(#42aeec);
+  border: none;
+
+  &:hover {
+    @include bgColor(#1799e4);
+  }
+
+  &:focus {
+    @include bgColor(#1799e4);
+  }
+}
+
+body {
+  min-height: 100vh;
+}
+
+.form-control {
+  &:not(select) {
+    padding: 1.5rem 0.5rem;
+  }
+
+  &::placeholder {
+    color: #ccc;
+
+    font : {
+      weight: bold;
+      size  : 0.9rem;
+    }
+  }
+
+  &:focus {
+    box-shadow: none;
+  }
+}
+
+select.form-control {
+  height      : 52px;
+  padding-left: 0.5rem;
+}
\ No newline at end of file

components/AppLogo.vue

-<template>
-  <div class="VueToNuxtLogo">
-    <div class="Triangle Triangle--two"/>
-    <div class="Triangle Triangle--one"/>
-    <div class="Triangle Triangle--three"/>
-    <div class="Triangle Triangle--four"/>
-  </div>
-</template>
-
-<style>
-.VueToNuxtLogo {
-  display: inline-block;
-  animation: turn 2s linear forwards 1s;
-  transform: rotateX(180deg);
-  position: relative;
-  overflow: hidden;
-  height: 180px;
-  width: 245px;
-}
-
-.Triangle {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 0;
-}
-
-.Triangle--one {
-  border-left: 105px solid transparent;
-  border-right: 105px solid transparent;
-  border-bottom: 180px solid #41B883;
-}
-
-.Triangle--two {
-  top: 30px;
-  left: 35px;
-  animation: goright 0.5s linear forwards 3.5s;
-  border-left: 87.5px solid transparent;
-  border-right: 87.5px solid transparent;
-  border-bottom: 150px solid #3B8070;
-}
-
-.Triangle--three {
-  top: 60px;
-  left: 35px;
-  animation: goright 0.5s linear forwards 3.5s;
-  border-left: 70px solid transparent;
-  border-right: 70px solid transparent;
-  border-bottom: 120px solid #35495E;
-}
-
-.Triangle--four {
-  top: 120px;
-  left: 70px;
-  animation: godown 0.5s linear forwards 3s;
-  border-left: 35px solid transparent;
-  border-right: 35px solid transparent;
-  border-bottom: 60px solid #fff;
-}
-
-@keyframes turn {
-  100% {
-    transform: rotateX(0deg);
-  }
-}
-
-@keyframes godown {
-  100% {
-    top: 180px;
-  }
-}
-
-@keyframes goright {
-  100% {
-    left: 70px;
-  }
-}
-</style>
-

components/elements/menu.vue

+<template>
+  <div class="nav-menu">
+    <div class="wrap">
+      <span class="decor"></span>
+      <nav>
+        <ul class="primary">
+          <li>
+            <nuxt-link to="/" tag="a">Home</nuxt-link>
+          </li>
+          <li>
+            <nuxt-link to="/regirst" tag="a">Regirst</nuxt-link>
+          </li>
+          <li>
+            <nuxt-link to="/login" tag="a">Login</nuxt-link>
+          </li>
+          <li>
+            <a href="" style="pointer-events: none; display: inline-block">Users</a>
+            <ul class="sub">
+              <nuxt-link to="/chat" tag="a">Cheesy</nuxt-link>
+              <nuxt-link to="/chat" tag="a">Cheesy</nuxt-link>
+              <nuxt-link to="/chat" tag="a">Cheesy</nuxt-link>
+              <nuxt-link to="/chat" tag="a">Cheesy</nuxt-link>
+            </ul>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+  @import '~/assets/scss/menu.scss';
+</style>

layouts/default.vue

 <template>
   <div>
-    <nuxt/>
+    <app-head></app-head>
+    <nuxt />
   </div>
 </template>
 
-<style>
-html {
-  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  font-size: 16px;
-  word-spacing: 1px;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  box-sizing: border-box;
-}
+<script>
+import Head from "~/components/elements/menu.vue";
 
-*, *:before, *:after {
-  box-sizing: border-box;
-  margin: 0;
-}
-
-.button--green {
-  display: inline-block;
-  border-radius: 4px;
-  border: 1px solid #3b8070;
-  color: #3b8070;
-  text-decoration: none;
-  padding: 10px 30px;
-}
-
-.button--green:hover {
-  color: #fff;
-  background-color: #3b8070;
-}
-
-.button--grey {
-  display: inline-block;
-  border-radius: 4px;
-  border: 1px solid #35495e;
-  color: #35495e;
-  text-decoration: none;
-  padding: 10px 30px;
-  margin-left: 15px;
-}
-
-.button--grey:hover {
-  color: #fff;
-  background-color: #35495e;
-}
-</style>
+export default {
+  components: {
+    appHead: Head
+  }
+};
+</script>
 
+<style></style>

package.json

@@ -16,10 +16,17 @@
     "nuxt": "^2.0.0"
   },
   "devDependencies": {
+    "@nuxtjs/style-resources": "^1.0.0",
     "babel-eslint": "^10.0.1",
     "eslint": "^4.19.1",
     "eslint-friendly-formatter": "^4.0.1",
     "eslint-loader": "^2.1.1",
-    "eslint-plugin-vue": "^4.0.0"
+    "eslint-plugin-vue": "^4.0.0",
+    "fibers": "^5.0.0",
+    "node-sass": "^5.0.0",
+    "pug": "^3.0.0",
+    "pug-plain-loader": "^1.1.0",
+    "sass": "^1.30.0",
+    "sass-loader": "^10.1.0"
   }
 }

pages/chat/index.vue

+<template>
+    <div class="container">
+		<div class="row">
+			<div class="col-md-6 offset-md-3 col-sm-6 offset-sm-3 col-12 comments-main pt-4 rounded">
+				<div class="form-chat">
+                    <ul class="p-0 list-message">
+					<li>
+						<div class="row comments mb-2">
+							<div class="col-md-2 col-sm-2 col-3 text-center user-img">
+						    	<img id="profile-photo" src="http://nicesnippets.com/demo/man01.png" class="rounded-circle" />
+							</div>
+							<div class="col-md-9 col-sm-9 col-9 comment rounded mb-2">
+								<h4 class="m-0"><a href="#">Jacks David</a></h4>
+							    <time class="text-white ml-3">1 hours ago</time>
+							    
+							    <p class="mb-0 text-white">Thank you for visiting all the way from New York.</p>
+							</div>
+						</div>
+					</li>
+					<ul class="p-0">
+						<li>
+							<div class="row comments mb-2">
+								<div class="col-md-2 offset-md-2 col-sm-2 offset-sm-2 col-3 offset-1 text-center user-img">
+							    	<img id="profile-photo" src="http://nicesnippets.com/demo/man02.png" class="rounded-circle" />
+								</div>
+								<div class="col-md-7 col-sm-7 col-8 comment rounded mb-2">
+									<h4 class="m-0"><a href="#">Steve Alex</a></h4>
+								    <time class="text-white ml-3">1 week ago</time>
+								   
+								    <p class="mb-0 text-white">Thank you for visiting all the way from NYC.</p>
+								</div>
+							</div>
+						</li>
+					</ul>
+				</ul>
+                </div>
+				<div class="row comment-box-main p-3 rounded-bottom send-message">
+			  		<div class="col-md-9 col-sm-9 col-9 pr-0 comment-box">
+					  <input type="text" class="form-control" placeholder="comment ...." />
+			  		</div>
+			  		<div class="col-md-3 col-sm-2 col-2 pl-0 text-center send-btn">
+			  			<button class="btn btn-info">Send</button>
+			  		</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style lang="scss" scoped>
+    @import '~/assets/css/bootstrap.min.css';
+    @import '~/assets/scss/chat.scss';
+</style>
\ No newline at end of file

pages/dect/_id/index.vue

+<template>
+    <div>
+        dect detail {{ $route.params.id}}
+    </div>
+</template>
\ No newline at end of file

pages/dect/index.vue

+<template>
+    <div>
+        Dect list
+        <nuxt-link to="/dect/1">Detail</nuxt-link>
+    </div>
+</template>
\ No newline at end of file

pages/index.vue

 <template>
   <section class="container">
-    <div>
-      <app-logo/>
-      <h1 class="title">
-        vue_chat
-      </h1>
-      <h2 class="subtitle">
-        Nuxt.js project
+    <div class="wrapper">
+      <div class="background">
+        <!-- <h2>
+          We're glad <br />
+          you are here!
         </h2>
-      <div class="links">
-        <a
-          href="https://nuxtjs.org/"
-          target="_blank"
-          class="button--green">Documentation</a>
-        <a
-          href="https://github.com/nuxt/nuxt.js"
-          target="_blank"
-          class="button--grey">GitHub</a>
+        <h3>ThanhHM</h3> -->
       </div>
     </div>
+    <nuxt-child />
   </section>
 </template>
 
 <script>
-import AppLogo from '~/components/AppLogo.vue'
-
-export default {
-  components: {
-    AppLogo
-  }
-}
+export default {};
 </script>
 
-<style>
-.container {
-  min-height: 100vh;
-  display: flex;
+<style scoped>
+@import url("https://fonts.googleapis.com/css?family=Parisienne&display=swap");
+html * {
+  margin: 0;
+  padding: 0;
+}
+.wrapper {
   justify-content: center;
-  align-items: center;
-  text-align: center;
+  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="36" height="72" viewBox="0 0 36 72"%3E%3Cg fill-rule="evenodd"%3E%3Cg fill="white" fill-opacity="0.5" %3E%3Cpath d="M2 6h12L8 18 2 6zm18 36h12l-6 12-6-12z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
 }
-
-.title {
-  font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
-  display: block;
-  font-weight: 300;
-  font-size: 100px;
-  color: #35495e;
-  letter-spacing: 1px;
+.background {
+  overflow: hidden;
+  background-image: url(https://i.etsystatic.com/13541689/r/il/b6bab0/1846155349/il_570xN.1846155349_e0pg.jpg);
+  min-width: 300px;
+  min-height: 600px;
+  background-repeat: no-repeat;
+  background-position: center;
+  border: solid 25px white;
+  display: grid;
+  align-content: center;
+  background-size: cover;
+  box-shadow: 4px 4px 8px black;
 }
+/*Animation*/
+h1 {
+  text-align: center;
+  position: relative;
+  text-shadow: 2px 2px black;
+  font-size: 12vw;
+  color: red;
+  -ms-transform: rotate(0deg);
+  /* IE 9 */
+  -webkit-transform: rotate(0deg);
+  /* Safari */
+  transform: rotate(0deg);
 
-.subtitle {
-  font-weight: 300;
-  font-size: 42px;
-  color: #526488;
-  word-spacing: 5px;
-  padding-bottom: 15px;
+  -webkit-animation-name: happyHolidays; /* Safari 4.0 - 8.0 */
+  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
+  animation-name: happyHolidays;
+  animation-duration: 4s;
+}
+/* Safari 4.0 - 8.0 */
+@-webkit-keyframes happyHolidays {
+  from {
+    transform: rotate(180deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+}
+/* Standard syntax */
+@keyframes happyHolidays {
+  from {
+    transform: rotate(180deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+}
+/*second animation*/
+h2 {
+  font-family: "Parisienne", cursive;
+  text-align: center;
+  text-shadow: 2px 2px black;
+  font-size: 8vw;
+  color: green;
+  position: relative;
+  -webkit-animation-name: family; /* Safari 4.0 - 8.0 */
+  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
+  animation-name: family;
+  animation-duration: 4s;
+  animation-timing-function: ease-in;
+}
+/* Safari 4.0 - 8.0 */
+@-webkit-keyframes family {
+  from {
+    left: -800px;
+  }
+  to {
+    left: 0px;
+  }
 }
+/* Standard syntax */
+@keyframes family {
+  from {
+    left: -800px;
+  }
+  to {
+    left: 0px;
+  }
+}
+h3 {
+  color: black;
+  text-align: center;
 
-.links {
-  padding-top: 15px;
+  font-family: "Parisienne", cursive;
+  font-size: 6vw;
+  margin-top: 1%;
+  margin-left: 15%;
+  position: relative;
+  -webkit-animation-name: misty; /* Safari 4.0 - 8.0 */
+  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
+  animation-name: misty;
+  animation-duration: 4s;
+  animation-timing-function: ease-in;
+}
+/* Safari 4.0 - 8.0 */
+@-webkit-keyframes misty {
+  from {
+    bottom: -800px;
+  }
+  to {
+    bottom: 0px;
+  }
+}
+/* Standard syntax */
+@keyframes misty {
+  from {
+    bottom: -800px;
+  }
+  to {
+    bottom: 0px;
+  }
+}
+/*desktop Screen size*/
+@media only screen and (min-width: 600px) {
+  .background {
+    min-width: 50vw;
+    min-height: 100vh;
+    background-size: cover;
+    background-position: left;
+  }
+  h1 {
+    font-size: 6vw;
+  }
+  h2 {
+    font-size: 3vw;
+  }
+  h3 {
+    font-size: 2vw;
+  }
 }
 </style>
-

pages/login/index.vue

+<template>
+  <div class="wrapper fadeInDown">
+    <div id="formContent">
+      <!-- Tabs Titles -->
+
+      <!-- Icon -->
+      <div class="fadeIn first">
+        <img src="~/assets/images/login.svg" id="icon" alt="User Icon" />
+      </div>
+
+      <!-- Login Form -->
+      <form>
+        <input
+          type="text"
+          id="login"
+          class="fadeIn second"
+          name="login"
+          placeholder="login"
+        />
+        <input
+          type="text"
+          id="password"
+          class="fadeIn third"
+          name="login"
+          placeholder="password"
+        />
+        <input type="submit" class="fadeIn fourth" value="Log In" />
+      </form>
+
+      <!-- Remind Passowrd -->
+      <div id="formFooter">
+        <a class="underlineHover" href="#">Forgot Password?</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+    @import '~/assets/scss/login.scss';
+</style>

pages/regirst/index.vue

+<template>
+  <div class="container">
+    <div class="row py-5 mt-4 align-items-center">
+      <!-- For Demo Purpose -->
+      <div class="col-md-5 pr-lg-5 mb-5 mb-md-0">
+        <img
+          src="https://res.cloudinary.com/mhmd/image/upload/v1569543678/form_d9sh6m.svg"
+          alt=""
+          class="img-fluid mb-3 d-none d-md-block"
+        />
+        <h1>Create an Account</h1>
+      </div>
+
+      <!-- Registeration Form -->
+      <div class="col-md-7 col-lg-6 ml-auto">
+        <form action="#">
+          <div class="row">
+            <!-- First Name -->
+            <div class="input-group col-lg-6 mb-4">
+              <div class="input-group-prepend">
+                <span class="input-group-text bg-white px-4 border-md border-right-0">
+                  <i class="fa fa-user text-muted"></i>
+                </span>
+              </div>
+              <input
+                id="firstName"
+                type="text"
+                name="firstname"
+                placeholder="First Name"
+                class="form-control bg-white border-left-0 border-md"
+              />
+            </div>
+
+            <!-- Last Name -->
+            <div class="input-group col-lg-6 mb-4">
+              <div class="input-group-prepend">
+                <span class="input-group-text bg-white px-4 border-md border-right-0">
+                  <i class="fa fa-user text-muted"></i>
+                </span>
+              </div>
+              <input
+                id="lastName"
+                type="text"
+                name="lastname"
+                placeholder="Last Name"
+                class="form-control bg-white border-left-0 border-md"
+              />
+            </div>
+
+            <!-- Phone Number -->
+            <div class="input-group col-lg-12 mb-4">
+              <div class="input-group-prepend">
+                <span class="input-group-text bg-white px-4 border-md border-right-0">
+                  <i class="fa fa-phone-square text-muted"></i>
+                </span>
+              </div>
+              <select
+                id="countryCode"
+                name="countryCode"
+                style="max-width: 80px"
+                class="custom-select form-control bg-white border-left-0 border-md h-100 font-weight-bold text-muted"
+              >
+                <option value="">+12</option>
+                <option value="">+10</option>
+                <option value="">+15</option>
+                <option value="">+18</option>
+              </select>
+              <input
+                id="phoneNumber"
+                type="tel"
+                name="phone"
+                placeholder="Phone Number"
+                class="form-control bg-white border-md border-left-0 pl-3"
+              />
+            </div>
+
+            <!-- Password -->
+            <div class="input-group col-lg-6 mb-4">
+              <div class="input-group-prepend">
+                <span class="input-group-text bg-white px-4 border-md border-right-0">
+                  <i class="fa fa-lock text-muted"></i>
+                </span>
+              </div>
+              <input
+                id="password"
+                type="password"
+                name="password"
+                placeholder="Password"
+                class="form-control bg-white border-left-0 border-md"
+              />
+            </div>
+
+            <!-- Password Confirmation -->
+            <div class="input-group col-lg-6 mb-4">
+              <div class="input-group-prepend">
+                <span class="input-group-text bg-white px-4 border-md border-right-0">
+                  <i class="fa fa-lock text-muted"></i>
+                </span>
+              </div>
+              <input
+                id="passwordConfirmation"
+                type="text"
+                name="passwordConfirmation"
+                placeholder="Confirm Password"
+                class="form-control bg-white border-left-0 border-md"
+              />
+            </div>
+
+            <!-- Submit Button -->
+            <div class="form-group col-lg-12 mx-auto mb-0">
+              <a href="#" class="btn btn-primary btn-block py-2">
+                <span class="font-weight-bold">Create your account</span>
+              </a>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang='scss' scoped>
+  @import '~/assets/css/bootstrap.min.css';
+  @import '~/assets/scss/regirst.scss';
+</style>