HTML
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet">
<div class = "panel " id ="can-scale">
<div class="time-panel">
<span>10:30</span>
<span>Thursday, 20 October</span>
</div>
<div class="imagebg"></div>
<div class="imagebg" id="toblur"></div>
<!--messages-->
<div class="message-panel" id="mesP" >
<div class="mes-icon"></div>
<div class="mes">
<div></div>
</div>
</div>
<div class="keyboard" id ="keyb">
<div class="input-field">
<button class="send"></button>
</div>
<div class="keys">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="keys">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="keys">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="keys">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
SCSS
@import "compass/css3";
$bg : #ffdbdb;
/**note:: image on BG is not mine. **/
body{
background-color: $bg;
height:100%;
width:100%;
font-family:open sans;
}
.panel {
width:310px;
height:495px;
background-color:#000;
// transform:translate(-50%,-50%);
position:absolute;
// left:50%; top:50%;
overflow:hidden;
left:0; right:0;top:0;bottom:0;
margin:auto;
box-shadow:0px 15px 15px 5px rgba(0,0,0,.3);
}
.time-panel{
width:100%;
position:absolute;
z-index:1;
& span{
color:#fff;
font-size:70px;
text-align:center;
position:absolute;
width:100%;
top:55px;
font-weight:300
}
& span:nth-child(2){
font-size:15px;
top:140px
}
}
.imagebg {
background-image: url("https://s-media-cache-ak0.pinimg.com/736x/33/32/ff/3332ff523400d1adc68b6984cdc03c29.jpg");
height:100%;
width:100%;
position:absolute;
filter: opacity(.8);
background-position: 450px 0px;
background-size: 150% 100%;
}
.message-panel {
width:92%;
height:85px;
background-color:#fff;
position:absolute;
left:0;
right:0;
top:35%;
margin-left:auto;
margin-right:auto;
@include border-radius(10px);
@include transition(all 0.3s ease);
&:before {
height:8px;
width:80px;
background:rgba(0,0,0,.2);
position:absolute;
content:"";
left:30px;
top:8px;
@include border-radius(4px);
}
&:after {
height:8px;
width:20px;
background:rgba(0,0,0,.2);
position:absolute;
content:"";
left:254px;
top:8px;
@include border-radius(4px);
}
.mes {
position:absolute;
bottom:0;
height:70%;
background:#eaeaea;
width:100%;
@include border-radius(0px 0px 10px 10px);
&:before {
background:rgba(0,0,0,.1);
height:10px;
width:190px;
position:absolute;
content: "";
left:10px;
top:15px;
@include border-radius(10px);
}
&:after {
background:rgba(0,0,0,.1);
height:10px;
width:140px;
position:absolute;
content: "";
left:10px;
top:35px;
@include border-radius(10px);
}
}
.mes-icon{
position:absolute;
left:5px;
top:5px;
height:15px;
width:16px;
background:#42b365;
@include border-radius(5px);
&:before {
height:9px;
width:9px;
background:#fff;
content:"";
position:absolute;
@include border-radius(100%);
left:4px;
top:3px;
}
}
}
.message-popup {
@extend .message-panel;
height:400px;
top: 10%;
z-index:2;
@include transition(all 0.5s ease);
&:after {
width:10px;
height:10px;
left:260px;
top:5px;
}
& .mes {
height:93%;
border-top:1px solid rgba(0,0,0,.1);
background:#fff;
&:before {
position:absolute;
content:"";
height:22px;
width:22px;
background:#ccc;
top:43px;
left:12px;
@include border-radius(50px);
}
&:after {
position:absolute;
content:"";
height:30px;
width:22px;
background:#fff;
top:38px;
@include border-radius(40px);
left:2px;
}
& div {
background:#ccc;
height:40px;
width:140px;
position:absolute;
z-index:2;
left:22px;
top:20px;
@include border-radius(50px);
}
}
}
.blur-filter {
filter:blur(8px);
}
.message-popup2 {
height:230px;
top:4%;
& .mes {
height:90%;
@include transition(none);
}
}
.keyboard {
position:absolute;
height:0;
background:#dcdfe1;
width:100%;
bottom:0;
@include transition(all .5s ease);
.input-field {
position:absolute;
width:100%;
height:35px;
background:#f2f2f2;
top:0;
&:after {
content:"";
position:absolute;
width:80%;
left:15%;
height:24px;
@include border-radius(12px);
border:1px solid rgba(0,0,0,0.2);
background:#fff;
top:4px;
}
&:before {
content:"";
position:absolute;
width:23px;
height:20px;
@include border-radius(5px);
background:#b2b6b9;
left:10px;
top:8px;
}
button {
height:20px;
width:20px;
background:#b2b6b9;
@include border-radius(100px);
position:absolute;
right: 18px;
z-index:2;
border:0;
box-shadow:0;
top:7px
}
}
.keys {
position:absolute;
z-index:2;
width:100%;
height:80%;
bottom:0;
$leftPos : 0;
span {
height:25px;
width:24px;
background:#fff;
position:absolute;
@include border-radius(5px);
box-shadow:0px 2px 0px 0px rgba(0,0,0,0.3);
}
@for $x from 1 through 10 {
$leftPos : ($x*30)-22;
span:nth-child(#{$x}) {
left :$leftPos+px;
top:5px
}
}
}
.keys:nth-child(3) {
top:75px;
@for $x from 1 through 10 {
$leftPos : ($x*30)-10;
span:nth-child(#{$x}) {
left :$leftPos+px;
top:5px
}
}
}
.keys:nth-child(4) {
top:112px;
@for $x from 1 through 10 {
$leftPos : ($x*30)-10;
@if($x == 9) {
$leftPos : ($x*30)-5;
}
span:nth-child(#{$x}) {
left :$leftPos+px;
top:5px
}
span:nth-child(1) {
left:10px;
width:30px;
}
span:nth-child(9) {
width:35px;
background:#a3a7a9
}
}
}
.keys:nth-child(5) {
top:150px;
@for $x from 1 through 5 {
$leftPos : ($x*30)-20;
span:nth-child(1) {
width:30px;
}
span:nth-child(2) {
width:30px;
left:45px;
}
span:nth-child(3) {
width:26px;
left: 82px;
}
span:nth-child(4) {
width:110px;
left: 118px;
}
span:nth-child(5) {
width:62px;
left: 238px;
background:#a3a7a9
}
}
}
}
JAVASCRIPT
var target = document.getElementById("mesP");
var pdown = 0;
var toblur = document.getElementById("toblur");
var message_panel = document.getElementById("mesP");
var keyb = document.getElementById("keyb");
target.addEventListener("mousedown", function(){
target.addEventListener("mousemove", function(){
pdown++;
if(pdown == 6) {
message_panel.classList.add("message-popup");
toblur.classList.add("blur-filter");
setTimeout(function() {
message_panel.classList.add("message-popup2");
keyb.style.height = "190px";
},500);
}
});
});
toblur.addEventListener("click",function(){
toblur.classList.remove("blur-filter");
keyb.style.height = "0";
message_panel.classList.remove("message-popup2");
setTimeout(function() {
message_panel.classList.remove("message-popup");
},500)
setTimeout(function() {
message_panel.style.transform = "scale(0)";
},700)
});
var scalable = document.getElementById("can-scale");
var width = window.innerWidth;
var height = 500;
var scale = 0;
scale = window.innerHeight/600;
scalable.style.transform = "scale("+scale+")";
window.addEventListener("resize", function() {
scale = window.innerHeight/600;
scalable.style.transform = "scale("+scale+")";
})
