Skip to content

Instantly share code, notes, and snippets.

@ptb

ptb/messages.html

Last active October 25, 2023 05:36
Show Gist options
  • Save ptb/9692359 to your computer and use it in GitHub Desktop.
Save ptb/9692359 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
messages.html
<!DOCTYPE html>
<html class='no-js' lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta charset='UTF-8' />
<title>Messages</title>
<meta content='initial-scale=1, width=device-width' name='viewport' />
<style type='text/css'>
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
margin: 0;
}
.messages-content {
background: white;
}
.messages {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
.messages-date {
text-align: center;
font-weight: 500;
font-size: 11px;
line-height: 1;
margin: 10px 15px;
color: #8e8e93;
}
.messages-date span {
font-weight: 400;
}
.message {
font-size: 17px;
line-height: 1.2;
margin: 1px 10px 0;
padding: 6px 16px 9px;
min-width: 48px;
min-height: 35px;
max-width: 60%;
}
.message-sent {
padding-right: 22px;
-ms-flex-item-align: end;
-webkit-align-self: flex-end;
align-self: flex-end;
background-color: #00d449;
color: white;
-webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 49.5% 55.75% 49.5% 43.25%;
}
.message-sent.message-last {
margin-bottom: 8px;
-webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m96 70c-6-2-12-10-12-19v-16l-14 27s8 8 26 8z'/></svg>") 49.5% 55.75% 49.5% 43.25%;
}
.message-received {
padding-left: 22px;
-ms-flex-item-align: start;
-webkit-align-self: flex-start;
align-self: flex-start;
background-color: #e5e5ea;
color: black;
-webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 49.5% 43.25% 49.5% 55.75%;
}
.message-received.message-last {
margin-bottom: 8px;
-webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m0 70c6-2 12-10 12-19v-16l14 27s-8 8-26 8z'/></svg>") 49.5% 43.25% 49.5% 55.75%;
}
.message.message-pic {
padding: 0;
}
.message.message-pic img {
display: block;
height: auto;
max-width: 100%;
}
.message-appear {
-webkit-animation: messageAppear 400ms;
animation: messageAppear 400ms;
}
@-webkit-keyframes messageAppear {
from {
-webkit-transform: translate3d(0, 100%, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
}
}
@keyframes messageAppear {
from {
transform: translate3d(0, 100%, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
</style>
</head>
<body>
<div class='messages-content page-content'>
<div class='messages'>
<div class='messages-date'>
Sun, Feb 9, <span>12:58 PM</span>
</div>
<div class='message message-sent'>
Hello
</div>
<div class='message message-sent message-last'>
How are you?
</div>
<div class='message message-received'>
Hi
</div>
<div class='message message-received message-last'>
I am fine, thanks! And how are you?
</div>
<div class='message message-sent'>
I am great!
</div>
<div class='message message-sent message-last'>
What do you think about my new logo?
</div>
<div class='messages-date'>
Wed, Feb 12, <span>7:33 PM</span>
</div>
<div class='message message-sent message-last'>
Hey? Any thoughts about my new logo?
</div>
<div class='messages-date'>
Thu, Feb 13, <span>11:20 AM</span>
</div>
<div class='message message-sent'>
Alo...
</div>
<div class='message message-sent message-last'>
Are you there?
</div>
<div class='message message-received'>
Hi, I am here
</div>
<div class='message message-received'>
Your logo is great
</div>
<div class='message message-received message-last'>
Leave me alone!
</div>
<div class='messages-date'>
Yesterday <span>8:37 AM</span>
</div>
<div class='message message-sent message-last'>
:(
</div>
<div class='message message-received message-last message-pic'>
<img alt='kitten' src='http://placekitten.com/600/800' />
</div>
<div class='message message-sent message-last message-pic'>
<img alt='kitten' src='http://placekitten.com/g/600/800' />
</div>
</div>
</div>
</body>
</html>
Raw
messages.html.slim
doctype 5
html.no-js(lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml')
head
meta(charset='UTF-8')
title Messages
meta(content='initial-scale=1, width=device-width' name='viewport')
sass:
*, *:before, *:after
-webkit-box-sizing: border-box
-moz-box-sizing: border-box
box-sizing: border-box
body
font-family: Helvetica Neue, Helvetica, Arial, sans-serif
margin: 0
// mixins
=animation($a)
-webkit-animation: $a
animation: $a
=flexbox
display: -webkit-box
display: -moz-box
display: -ms-flexbox
display: -webkit-flex
display: flex
=keyframes-message-appear($name)
@-webkit-keyframes #{$name}
from
-webkit-transform: translate3d(0,100%,0)
to
-webkit-transform: translate3d(0,0,0)
@keyframes #{$name}
from
transform: translate3d(0,100%,0)
to
transform: translate3d(0,0,0)
// variables
$message-sent-imsg-bgcolor: #007aff
$message-sent-sms-bgcolor: #00d449
$message-sent-bgcolor: $message-sent-sms-bgcolor
$message-rcvd-bgcolor: #e5e5ea
$message-appear-animation-name: messageAppear
// http://www.w3.org/TR/css-masking-1/
// http://caniuse.com/#feat=css-masks
$message-sent-mask-box: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 49.5% 55.75% 49.5% 43.25%
$message-sent-last-mask-box: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m96 70c-6-2-12-10-12-19v-16l-14 27s8 8 26 8z'/></svg>") 49.5% 55.75% 49.5% 43.25%
$message-rcvd-mask-box: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 49.5% 43.25% 49.5% 55.75%
$message-rcvd-last-mask-box: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m0 70c6-2 12-10 12-19v-16l14 27s-8 8-26 8z'/></svg>") 49.5% 43.25% 49.5% 55.75%
// @extend-only placeholder selectors
%messages-page
background: #fff
%messages-container
+flexbox
-webkit-box-orient: vertical
-moz-box-orient: vertical
-ms-flex-direction: column
-webkit-flex-direction: column
flex-direction: column
%messages-date
text-align: center
font-weight: 500
font-size: 11px
line-height: 1
margin: 10px 15px
color: #8e8e93
%messages-date-bold
font-weight: 700
%messages-time
font-weight: 400
%messages-time-bold
font-weight: 500
%message
font-size: 17px
line-height: 1.2
margin: 1px 10px 0
padding: 6px 16px 9px
min-width: 48px
min-height: 35px
max-width: 60%
%message-bold
font-weight: 500
%message-sent
padding-right: 22px
-ms-flex-item-align: end
-webkit-align-self: flex-end
align-self: flex-end
background-color: $message-sent-bgcolor
color: #fff
-webkit-mask-box-image: $message-sent-mask-box
// mask-box: $message-sent-mask-box
%message-sent-last
margin-bottom: 8px
-webkit-mask-box-image: $message-sent-last-mask-box
// mask-box: $message-sent-last-mask-box
%message-rcvd
padding-left: 22px
-ms-flex-item-align: start
-webkit-align-self: flex-start
align-self: flex-start
background-color: $message-rcvd-bgcolor
color: #000
-webkit-mask-box-image: $message-rcvd-mask-box
// mask-box: $message-rcvd-mask-box
%message-rcvd-last
margin-bottom: 8px
-webkit-mask-box-image: $message-rcvd-last-mask-box
// mask-box: $message-rcvd-last-mask-box
%message-has-img
padding: 0
& img
display: block
height: auto
max-width: 100%
%message-animation
+animation($message-appear-animation-name 400ms)
// @extend class/elements directives
.messages-content
@extend %messages-page
.messages
@extend %messages-container
.messages-date
@extend %messages-date
& span
@extend %messages-time
.message
@extend %message
&.message-pic
@extend %message-has-img
.message-sent
@extend %message-sent
&.message-last
@extend %message-sent-last
.message-received
@extend %message-rcvd
&.message-last
@extend %message-rcvd-last
.message-appear
@extend %message-animation
+keyframes-message-appear($message-appear-animation-name)
body
div.messages-content.page-content
div.messages
div.messages-date
' Sun, Feb 9,
span 12:58 PM
div.message.message-sent Hello
div.message.message-sent.message-last How are you?
div.message.message-received Hi
div.message.message-received.message-last I am fine, thanks! And how are you?
div.message.message-sent I am great!
div.message.message-sent.message-last What do you think about my new logo?
div.messages-date
' Wed, Feb 12,
span 7:33 PM
div.message.message-sent.message-last Hey? Any thoughts about my new logo?
div.messages-date
' Thu, Feb 13,
span 11:20 AM
div.message.message-sent Alo...
div.message.message-sent.message-last Are you there?
div.message.message-received Hi, I am here
div.message.message-received Your logo is great
div.message.message-received.message-last Leave me alone!
div.message.message-sent.message-last
|:(
div.message.message-received.message-last.message-pic
img(alt='kitten' src='http://placekitten.com/600/800')
div.message.message-sent.message-last.message-pic
img(alt='kitten' src='http://placekitten.com/g/600/800')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment