A Pen by Steven Pastrana on CodePen.
Created
December 3, 2016 00:21
-
-
Save anonymous/7f156f1cc5a14fd83cb09a4004072c03 to your computer and use it in GitHub Desktop.
chat-window-template
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container" id="container"> | |
| <div class="left-screen"> | |
| <div class="border hidden" id="border"> | |
| <div class="left-side"> | |
| <div class="avatar"> | |
| <img src="http://lorempixel.com/100/100/people/" id="avatar"> | |
| </div> | |
| <div class="avatar-name"> | |
| <h2>Anne Smith</h2> | |
| </div> | |
| </div> | |
| <!--Right side starts --> | |
| <div class="right-section" id="right-section"> | |
| <div class="right-side"> | |
| <div class="convo-area" id="convo-area"> | |
| <p class="convo-text"><strong>Anne: </strong>Lorem ipsum dolor sit amet, consectetur </p> | |
| <p class="convo-text"><strong>Bill: </strong>Lorem ipsum dolor sit amet, consectetur </p> | |
| </div> | |
| </div> | |
| <div class="buttons"> | |
| <input class="response" id="response"> | |
| <button class="button" id="button"> | |
| Send | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="right-screen"> | |
| <div class="show-buttons"> | |
| <button class="button" id="show-button">Show | |
| </button> | |
| </div> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var container=document.getElementById('container'); | |
| var border=document.getElementById('border') | |
| var avatar=document.getElementById('avatar'); | |
| var button=document.getElementById('button'); | |
| var rightSection=document.getElementById('right-section'); | |
| var convoArea=document.getElementById('convo-area'); | |
| var showButton=document.getElementById('show-button'); | |
| border.addEventListener('mouseover', function(){ | |
| avatar.id = 'avatarHover'; | |
| }); | |
| border.addEventListener('mouseout', function(){ | |
| avatar.id = 'avatar'; | |
| }) | |
| button.addEventListener('mouseover', function(){ | |
| }) | |
| button.addEventListener('mouseout', function(){ | |
| }) | |
| container.addEventListener('mouseenter', function(){ | |
| }) | |
| container.addEventListener('mouseout', function(){ | |
| }) | |
| var state = true; | |
| showButton.addEventListener('click', function(){ | |
| if (state){ | |
| border.className = "border animated bounceInLeft"; | |
| document.getElementById('show-button').innerText = "Hide"; | |
| state = false; | |
| }else{ | |
| border.className = "border animated bounceOutLeft"; | |
| document.getElementById('show-button').innerText = "Show"; | |
| state = true; | |
| } | |
| }) | |
| var textBox=document.getElementById('response'); | |
| var sendBtn=document.getElementById('button'); | |
| sendBtn.addEventListener('click', function(){ | |
| console.log("pressed send"); | |
| textBox.value = ""; | |
| }) | |
| //////////////////////////////////// | |
| // POPULATE THE CHAT FIELD // | |
| //////////////////////////////////// | |
| ////////// | |
| //JQUERY// | |
| ////////// | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| font-family: 'Poiret One', cursive; | |
| color: #696a6d; | |
| } | |
| .container{ | |
| display: flex; | |
| alignContents: center; | |
| padding: 5em; | |
| flex-direction: vertical | |
| } | |
| .border { | |
| background: rgba(235,233,249,1); | |
| background: -moz-linear-gradient(45deg, rgba(235,233,249,1) 0%, rgba(234,232,248,1) 3%, rgba(221,215,242,1) 39%, rgba(219,212,240,1) 46%, rgba(216,208,239,1) 54%, rgba(206,199,236,1) 64%, rgba(193,191,234,1) 97%); | |
| background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(235,233,249,1)), color-stop(3%, rgba(234,232,248,1)), color-stop(39%, rgba(221,215,242,1)), color-stop(46%, rgba(219,212,240,1)), color-stop(54%, rgba(216,208,239,1)), color-stop(64%, rgba(206,199,236,1)), color-stop(97%, rgba(193,191,234,1))); | |
| background: -webkit-linear-gradient(45deg, rgba(235,233,249,1) 0%, rgba(234,232,248,1) 3%, rgba(221,215,242,1) 39%, rgba(219,212,240,1) 46%, rgba(216,208,239,1) 54%, rgba(206,199,236,1) 64%, rgba(193,191,234,1) 97%); | |
| background: -o-linear-gradient(45deg, rgba(235,233,249,1) 0%, rgba(234,232,248,1) 3%, rgba(221,215,242,1) 39%, rgba(219,212,240,1) 46%, rgba(216,208,239,1) 54%, rgba(206,199,236,1) 64%, rgba(193,191,234,1) 97%); | |
| background: -ms-linear-gradient(45deg, rgba(235,233,249,1) 0%, rgba(234,232,248,1) 3%, rgba(221,215,242,1) 39%, rgba(219,212,240,1) 46%, rgba(216,208,239,1) 54%, rgba(206,199,236,1) 64%, rgba(193,191,234,1) 97%); | |
| background: linear-gradient(45deg, rgba(235,233,249,1) 0%, rgba(234,232,248,1) 3%, rgba(221,215,242,1) 39%, rgba(219,212,240,1) 46%, rgba(216,208,239,1) 54%, rgba(206,199,236,1) 64%, rgba(193,191,234,1) 97%); | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebe9f9', endColorstr='#c1bfea', GradientType=1 ); | |
| padding-left: 2em; | |
| padding-top: .5em; | |
| -webkit-box-shadow: 4px 4px 17px 0px rgba(77,74,77,1); | |
| -moz-box-shadow: 4px 4px 17px 0px rgba(77,74,77,1); | |
| box-shadow: 4px 4px 17px 0px rgba(77,74,77,1); | |
| width: 360px; | |
| height: 200px; | |
| border-top-left-radius: 35px; | |
| border-top-right-radius: 35px; | |
| border-bottom-left-radius: 35px; | |
| } | |
| .border:hover { | |
| color: red; | |
| flex-direction: horizontal; | |
| -webkit-box-shadow: 4px 4px 17px 2px rgba(77,74,77,1); | |
| -moz-box-shadow: 4px 4px 17px 2px rgba(77,74,77,1); | |
| box-shadow: 4px 4px 17px 2px rgba(77,74,77,1); | |
| color: #7f8494; | |
| } | |
| .avatar { | |
| margin-top: 16%; | |
| margin-bottom: -1%; | |
| } | |
| #avatar { | |
| border-radius: 20px 20px 20px 20px; | |
| -moz-border-radius: 20px 20px 20px 20px; | |
| -webkit-border-radius: 20px 20px 20px 20px; | |
| border: 0px solid #000000; | |
| -webkit-box-shadow: 8px 8px 20px -2px rgba(0,0,0,0.75); | |
| -moz-box-shadow: 8px 8px 20px -2px rgba(0,0,0,0.75); | |
| box-shadow: 8px 8px 20px -2px rgba(0,0,0,0.75); | |
| } | |
| #avatarHover { | |
| border-radius: 20px 20px 20px 20px; | |
| -moz-border-radius: 20px 20px 20px 20px; | |
| -webkit-border-radius: 20px 20px 20px 20px; | |
| border: 0px solid #000000; | |
| -webkit-box-shadow: 8px 8px 19px -5px rgba(0,0,0,0.75); | |
| -moz-box-shadow: 8px 8px 19px -5px rgba(0,0,0,0.75); | |
| box-shadow: 8px 8px 19px -5px rgba(0,0,0,0.75); | |
| } | |
| .avatar-name{ | |
| } | |
| .left-side{ | |
| float: left; | |
| } | |
| .right-side{ | |
| float: right; | |
| } | |
| .right-side { | |
| -webkit-box-shadow: inset 7px 15px 44px -9px rgba(0,0,0,0.75); | |
| -moz-box-shadow: inset 7px 15px 44px -9px rgba(0,0,0,0.75); | |
| box-shadow: inset 7px 15px 44px -9px rgba(0,0,0,0.75); | |
| border-style: inset; | |
| height: 110px; | |
| width: 190px; | |
| margin-top: 5%; | |
| margin-right: 2em; | |
| } | |
| .buttons { | |
| float: right; | |
| margin-right: 2em; | |
| margin-bottom: 5em; | |
| } | |
| .button { | |
| outline: none; | |
| font-family: 'Poiret One', cursive; | |
| height: 2.5em; | |
| float: right; | |
| width: 5em; | |
| color: #efe; | |
| font-weight: bold; | |
| background-color: #5fa0f1; | |
| border-radius: 0px 0px 0px 11px; | |
| -moz-border-radius: 0px 0px 0px 11px; | |
| -webkit-border-radius: 0px 0px 0px 11px; | |
| border: 0px solid #000000; | |
| text-align: center; | |
| text-decoration: none; | |
| } | |
| .button:hover { | |
| -webkit-box-shadow: 7px 7px 10px -7px rgba(0,0,0,0.75); | |
| -moz-box-shadow: 7px 7px 10px -7px rgba(0,0,0,0.75); | |
| box-shadow: 7px 7px 10px -7px rgba(0,0,0,0.75); | |
| } | |
| .button:active { | |
| -webkit-box-shadow: inset 7px 7px 10px -7px rgba(0,0,0,0.75); | |
| -moz-box-shadow: inset 7px 7px 10px -7px rgba(0,0,0,0.75); | |
| box-shadow: inset 7px 7px 10px -7px rgba(0,0,0,0.75); | |
| } | |
| .hidden { | |
| visibility: hidden; | |
| } | |
| .convo-text { | |
| color: #1b1c1d; | |
| } | |
| #show-button { | |
| width: 60px; | |
| height: 60px; | |
| text-align: center; | |
| padding: 6px 0; | |
| font-size: 12px; | |
| line-height: 1.428571429; | |
| border-radius: 60px; | |
| -webkit-box-shadow: 6px 7px 35px -7px rgba(0,0,0,0.75); | |
| -moz-box-shadow: 6px 7px 35px -7px rgba(0,0,0,0.75); | |
| box-shadow: 6px 7px 35px -7px rgba(0,0,0,0.75); | |
| } | |
| .show-buttons{ | |
| margin-top: 30%; | |
| margin-right: 80%; | |
| padding-right: ; | |
| z-index: 999; | |
| } | |
| #show-button:hover { | |
| -webkit-box-shadow: 10px 10px 35px -5px rgba(0,0,0,0.75); | |
| -moz-box-shadow: 10px 10px 35px -5px rgba(0,0,0,0.75); | |
| box-shadow: 10px 10px 35px -5px rgba(0,0,0,0.75); | |
| } | |
| #show-button:active { | |
| -webkit-box-shadow: inset 6px 7px 35px -3px rgba(0,0,0,0.75); | |
| -moz-box-shadow: inset 6px 7px 35px -3px rgba(0,0,0,0.75); | |
| box-shadow: inset 6px 7px 35px -3px rgba(0,0,0,0.75); | |
| } | |
| .right-screen { | |
| flex: 1; | |
| flex-direction: vertical; | |
| } | |
| .response { | |
| width: 70%; | |
| height: 1.5em; | |
| margin-left: 30%; | |
| border-radius: 0px 0px 0px 10px; | |
| -moz-border-radius: 0px 0px 0px 10px; | |
| -webkit-border-radius: 0px 0px 0px 10px; | |
| border: 0px solid #000000; | |
| outline: none; | |
| font-family: 'Poiret One', cursive; | |
| color: #433; | |
| font-weight: bold; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment