maitrungduc1410/ChatItem.vue

## chat.blade.php
<!DOCTYPE html>
<html>
<head>
	<title>Chat App</title>
	<meta name="csrf-token" content="{{ csrf_token() }}">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
	<style type="text/css">
		*,
		*::before,
		*::after {
		  box-sizing: border-box;
		}
		html,
		body {
		  height: 100%;
		}
		body {
		  background: linear-gradient(135deg, #044f48, #2a7561);
		  background-size: cover;
		  font-family: 'Open Sans', sans-serif;
		  font-size: 14px;
		  line-height: 1.3;
		  overflow: hidden;
		}
	</style>
	@vite(['resources/sass/app.scss', 'resources/js/app.js'])
</head>
<body>
	<div id="app">
		<chat-layout></chat-layout>
	</div>
</body>
</html>

## ChatItem.vue
<template>
	<div class="message">
		<div class="message-item user-name">
			MTD
		</div>
		<div class="message-item timestamp">
			| 11:21:32:
		</div>
		<div class="message-item text-message">
			Hello how are you
		</div>
	</div>
</template>

<script>
	export default {

	}
</script>

<style lang="scss" scoped>
	.message {
		display: flex;
		color: #00b8ff;
		.message-item:not(:last-child) {
			margin-right: 5px;
		}
	}
	.message:not(:last-child) {
		padding-bottom: 20px;
	}
	.is-current-user {
		color: #a900ff;
	}
</style>

## ChatLayout.vue
<template>
	<div>
        <div class="chat">
            <div class="chat-title">
                <h1>Chatroom</h1>
            </div>
            <div class="messages">
                <div class="messages-content">
                    <ChatItem v-for="n in 30" :key="n"></ChatItem>
                </div>
            </div>
            <div class="message-box">
                <textarea type="text" class="message-input" placeholder="Type message..."></textarea>
                <button type="submit" class="message-submit">Send</button>
            </div>
        </div>
        <div class="bg"></div>
    </div>
</template>

<script>
    import ChatItem from './ChatItem.vue'
    export default {
        components: {
            ChatItem
        }
    }
</script>

<style lang="scss" scoped>
.messages {
    height: 80%;
    overflow-y: scroll;
    padding: 0 20px;
}
/*--------------------
Body
--------------------*/

.bg {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	background: url('https://images.unsplash.com/photo-1451186859696-371d9477be93?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925') no-repeat 0 0;
	filter: blur(80px);
	transform: scale(1.2);
}


/*--------------------
Chat
--------------------*/
.chat {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 80vh;
    max-height: 700px;
    z-index: 2;
    overflow: hidden;
    box-shadow: 0 5px 30px rgba(0, 0, 0, .2);
    background: rgba(0, 0, 0, .5);
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}


/*--------------------
Chat Title
--------------------*/
.chat-title {
    flex: 0 1 45px;
    position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    text-transform: uppercase;
    text-align: left;
    padding: 10px 10px 10px 50px;

    h1, h2 {
        font-weight: normal;
        font-size: 16px;
        margin: 0;
        padding: 0;
    }

    h2 {
        color: rgba(255, 255, 255, .5);
        font-size: 8px;
        letter-spacing: 1px;
    }

    .avatar {
        position: absolute;
        z-index: 1;
        top: 8px;
        left: 9px;
        border-radius: 30px;
        width: 30px;
        height: 30px;
        overflow: hidden;
        margin: 0;
        padding: 0;
        border: 2px solid rgba(255, 255, 255, 0.24);

        img {
            width: 100%;
            height: auto;
        }
    }
}

/*--------------------
Message Box
--------------------*/
.message-box {
    flex: 0 1 40px;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    padding: 10px;
    position: relative;

    & .message-input {
        background: none;
        border: none;
        outline: none!important;
        resize: none;
        color: rgba(255, 255, 255, .7);
        font-size: 11px;
        height: 17px;
        margin: 0;
        padding-right: 20px;
        width: 265px;
    }

    textarea:focus:-webkit-placeholder{
        color: transparent;
    }

    & .message-submit {
        position: absolute;
        z-index: 1;
        top: 9px;
        right: 10px;
        color: #fff;
        border: none;
        background: #248A52;
        font-size: 10px;
        text-transform: uppercase;
        line-height: 1;
        padding: 6px 10px;
        border-radius: 10px;
        outline: none!important;
        transition: background .2s ease;

        &:hover {
            background: #1D7745;
        }
    }
}
</style>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Chat App</title>
	<meta name="csrf-token" content="{{ csrf_token() }}">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
	<style type="text/css">
	*,
	*::before,
	*::after {
	box-sizing: border-box;
	}
	html,
	body {
	height: 100%;
	}
	body {
	background: linear-gradient(135deg, #044f48, #2a7561);
	background-size: cover;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	line-height: 1.3;
	overflow: hidden;
	}
	</style>
	@vite(['resources/sass/app.scss', 'resources/js/app.js'])
	</head>
	<body>
	<div id="app">
	<chat-layout></chat-layout>
	</div>
	</body>
	</html>
	<template>
	<div class="message">
	<div class="message-item user-name">
	MTD
	</div>
	<div class="message-item timestamp">
	\| 11:21:32:
	</div>
	<div class="message-item text-message">
	Hello how are you
	</div>
	</div>
	</template>

	<script>
	export default {

	}
	</script>

	<style lang="scss" scoped>
	.message {
	display: flex;
	color: #00b8ff;
	.message-item:not(:last-child) {
	margin-right: 5px;
	}
	}
	.message:not(:last-child) {
	padding-bottom: 20px;
	}
	.is-current-user {
	color: #a900ff;
	}
	</style>
	<template>
	<div>
	<div class="chat">
	<div class="chat-title">
	<h1>Chatroom</h1>
	</div>
	<div class="messages">
	<div class="messages-content">
	<ChatItem v-for="n in 30" :key="n"></ChatItem>
	</div>
	</div>
	<div class="message-box">
	<textarea type="text" class="message-input" placeholder="Type message..."></textarea>
	<button type="submit" class="message-submit">Send</button>
	</div>
	</div>
	<div class="bg"></div>
	</div>
	</template>

	<script>
	import ChatItem from './ChatItem.vue'
	export default {
	components: {
	ChatItem
	}
	}
	</script>

	<style lang="scss" scoped>
	.messages {
	height: 80%;
	overflow-y: scroll;
	padding: 0 20px;
	}
	/*--------------------
	Body
	--------------------*/

	.bg {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	background: url('https://images.unsplash.com/photo-1451186859696-371d9477be93?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925') no-repeat 0 0;
	filter: blur(80px);
	transform: scale(1.2);
	}


	/*--------------------
	Chat
	--------------------*/
	.chat {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 500px;
	height: 80vh;
	max-height: 700px;
	z-index: 2;
	overflow: hidden;
	box-shadow: 0 5px 30px rgba(0, 0, 0, .2);
	background: rgba(0, 0, 0, .5);
	border-radius: 20px;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	}


	/*--------------------
	Chat Title
	--------------------*/
	.chat-title {
	flex: 0 1 45px;
	position: relative;
	z-index: 2;
	background: rgba(0, 0, 0, 0.2);
	color: #fff;
	text-transform: uppercase;
	text-align: left;
	padding: 10px 10px 10px 50px;

	h1, h2 {
	font-weight: normal;
	font-size: 16px;
	margin: 0;
	padding: 0;
	}

	h2 {
	color: rgba(255, 255, 255, .5);
	font-size: 8px;
	letter-spacing: 1px;
	}

	.avatar {
	position: absolute;
	z-index: 1;
	top: 8px;
	left: 9px;
	border-radius: 30px;
	width: 30px;
	height: 30px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, 0.24);

	img {
	width: 100%;
	height: auto;
	}
	}
	}

	/*--------------------
	Message Box
	--------------------*/
	.message-box {
	flex: 0 1 40px;
	width: 100%;
	background: rgba(0, 0, 0, 0.3);
	padding: 10px;
	position: relative;

	& .message-input {
	background: none;
	border: none;
	outline: none!important;
	resize: none;
	color: rgba(255, 255, 255, .7);
	font-size: 11px;
	height: 17px;
	margin: 0;
	padding-right: 20px;
	width: 265px;
	}

	textarea:focus:-webkit-placeholder{
	color: transparent;
	}

	& .message-submit {
	position: absolute;
	z-index: 1;
	top: 9px;
	right: 10px;
	color: #fff;
	border: none;
	background: #248A52;
	font-size: 10px;
	text-transform: uppercase;
	line-height: 1;
	padding: 6px 10px;
	border-radius: 10px;
	outline: none!important;
	transition: background .2s ease;

	&:hover {
	background: #1D7745;
	}
	}
	}
	</style>