Skip to content

V
vue_chat
Commit f96e4964 by Hứa Minh Thành
Options

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

Feature/php/thanhhm/contruct source

See merge request !2
parents 5969fd15 9ed10cad
Pipeline #1139 canceled with stages
in 0 seconds
Showing with 1206 additions and 175 deletions
.editorconfig
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
root = true root = true
[*] [*]
indent_size = 2 indent_size = 4
indent_style = space indent_style = space
end_of_line = lf end_of_line = lf
charset = utf-8 charset = utf-8
......
.vscode/settings.json 0 → 100644
{
"vue3snippets.enable-compile-vue-file-on-did-save-code": false
}
\ No newline at end of file
assets/css/bootstrap.min.css 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
assets/images/login.svg 0 → 100644
<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 0 → 100644
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 0 → 100644
/* 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 0 → 100644
.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 0 → 100644
.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 deleted 100644 → 0
<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 0 → 100644
<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> <template>
<div> <div>
<nuxt/> <app-head></app-head>
<nuxt />
</div> </div>
</template> </template>
<style> <script>
html { import Head from "~/components/elements/menu.vue";
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;
}
*, *:before, *:after { export default {
box-sizing: border-box; components: {
margin: 0; appHead: Head
} }
};
.button--green { </script>
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>
<style></style>
package-lock.json
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
...@@ -16,10 +16,17 @@ ...@@ -16,10 +16,17 @@
"nuxt": "^2.0.0" "nuxt": "^2.0.0"
}, },
"devDependencies": { "devDependencies": {
"@nuxtjs/style-resources": "^1.0.0",
"babel-eslint": "^10.0.1", "babel-eslint": "^10.0.1",
"eslint": "^4.19.1", "eslint": "^4.19.1",
"eslint-friendly-formatter": "^4.0.1", "eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.1.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 0 → 100644
<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 0 → 100644
<template>
<div>
dect detail {{ $route.params.id}}
</div>
</template>
\ No newline at end of file
pages/dect/index.vue 0 → 100644
<template>
<div>
Dect list
<nuxt-link to="/dect/1">Detail</nuxt-link>
</div>
</template>
\ No newline at end of file
pages/index.vue
<template> <template>
<section class="container"> <section class="container">
<div> <div class="wrapper">
<app-logo/> <div class="background">
<h1 class="title"> <!-- <h2>
vue_chat We're glad <br />
</h1> you are here!
<h2 class="subtitle"> </h2>
Nuxt.js project <h3>ThanhHM</h3> -->
</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>
</div> </div>
</div> </div>
<nuxt-child />
</section> </section>
</template> </template>
<script> <script>
import AppLogo from '~/components/AppLogo.vue' export default {};
export default {
components: {
AppLogo
}
}
</script> </script>
<style> <style scoped>
.container { @import url("https://fonts.googleapis.com/css?family=Parisienne&display=swap");
min-height: 100vh; html * {
display: flex; margin: 0;
padding: 0;
}
.wrapper {
justify-content: center; justify-content: center;
align-items: 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');
text-align: center;
} }
.background {
.title { overflow: hidden;
font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */ background-image: url(https://i.etsystatic.com/13541689/r/il/b6bab0/1846155349/il_570xN.1846155349_e0pg.jpg);
display: block; min-width: 300px;
font-weight: 300; min-height: 600px;
font-size: 100px; background-repeat: no-repeat;
color: #35495e; background-position: center;
letter-spacing: 1px; 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 { -webkit-animation-name: happyHolidays; /* Safari 4.0 - 8.0 */
font-weight: 300; -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
font-size: 42px; animation-name: happyHolidays;
color: #526488; animation-duration: 4s;
word-spacing: 5px; }
padding-bottom: 15px; /* 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 { font-family: "Parisienne", cursive;
padding-top: 15px; 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> </style>
pages/login/index.vue 0 → 100644
<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 0 → 100644
<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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment