cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              %body.container
	.login-container
		.login-box
			.login-cover
				%span Welcome
				.login-pp-container
					%img.login-pp.ls-image{'src': 'https://semantic-ui.com/images/avatar2/large/matthew.png'}
			.login-form
				.line
					%label Name
					%input.signin-username.ls-username{'type': 'text'}
				.line
					%img.pp-select.button{'data-imageid': '1', 'src': 'https://semantic-ui.com/images/avatar2/large/matthew.png'}
					%img.pp-select.button{'data-imageid': '2', 'src': 'https://semantic-ui.com/images/avatar2/large/elyse.png'}
					%img.pp-select.button{'data-imageid': '3', 'src': 'https://semantic-ui.com/images/avatar2/large/kristy.png'}
					%img.pp-select.button{'data-imageid': '4', 'src': 'https://semantic-ui.com/images/avatar2/large/rachel.png'}
					%img.pp-select.button{'data-imageid': '5', 'src': 'https://semantic-ui.com/images/avatar2/large/mark.png'}
					%img.pp-select.button{'data-imageid': '6', 'src': 'https://semantic-ui.com/images/avatar2/large/lena.png'}
					%img.pp-select.button{'data-imageid': '7', 'src': 'https://semantic-ui.com/images/avatar2/large/eve.png'}
				.line.centered
					%button.waves-effect.waves-classic.waves-light.waves-button.waves-float.signin-confirm
						Sign in
						%i.zmdi.zmdi-sign-in
	%nav.os.taskbar.hidden
		.left
			%button.square.drawer.waves-effect.waves-classic.waves-light.waves-button.waves-float
				%i.zmdi.zmdi-apps
			%button.square.switch.waves-effect.waves-classic.waves-light.waves-button.waves-float
				%i.zmdi.zmdi-collection-item
			.vertical.divider
			%button.icon.hangouts.waves-effect.waves-classic.waves-light.waves-button.waves-float
		.right
			.right-container
				.time
					10:49 PM
				.wifi.button.waves-effect.waves-circle.waves-light.waves-classic
					%i.zmdi.zmdi-wifi-alt
				.volume.button.waves-effect.waves-circle.waves-light.waves-classic
					%i.zmdi.zmdi-volume-up
				.battery.button.waves-effect.waves-circle.waves-light.waves-classic
					%i.zmdi.zmdi-battery-flash
				.user.button.relogin
					%img.ls-image{'src': 'https://semantic-ui.com/images/avatar2/large/matthew.png'}
	%section.hangouts-container.hidden
		.ripple.window
		.hangouts-global-contents
			%nav.hangouts-sidebar
				.sidebar-image-container.button.waves-effect.waves-classic.waves-light
					.sidebar-user-image-container
						.sidebar-user-image
					.sidebar-image-text
						.left
							.sidebar-image-text-username
								%span.ls-username Guillaume Schlipak
							.sidebar-image-text-email
								user@example.com
						%i.zmdi.zmdi-caret-down
				.sidebar-content-container
					.sidebar-content
						.item.waves-effect.waves-classic
							%i.zmdi.zmdi-notifications-off
							%span Snooze notifications
						.horizontal.divider
						.item.waves-effect.waves-classic
							%i.zmdi.zmdi-email-opened
							%span Invites
						.item.waves-effect.waves-classic
							%i.zmdi.zmdi-archive
							%span Archived
						.item.waves-effect.waves-classic
							%i.zmdi.zmdi-alert-octagon
							%span Blocked people
						.horizontal.divider
						.item.waves-effect.waves-classic
							%i.zmdi.zmdi-settings
							%span Settings
						.item.waves-effect.waves-classic
							%i.zmdi.zmdi-help
							%span Help & feedback
			.window-control
				.window-title
					%h4 Hangouts
				.window-buttons
					%i.zmdi.zmdi-window-minimize.button
					%i.zmdi.zmdi-window-maximize.button
					%i.zmdi.zmdi-close.button
			%nav.hangouts-top-nav
				%i.zmdi.zmdi-menu.button
				%h4.ls-username Guillaume Schlipak
			.hangouts-content-wrapper
				.conversation-view.floating
					.conversation-view-container
						.conversation-view-messages
							.message.in
								.dummy.img
								.bubble
									%span.text Hi!
									%span.time 7 mins
							.message.out
								.bubble
									%span.text Hey there John, how are you?
									%span.time 3 mins
								%img.ls-image{'src': 'https://semantic-ui.com/images/avatar2/large/matthew.png'}
							.message.in
								.dummy.img
								.bubble
									%span.text Fine, thx! Wanna hang out this weekend?
									%span.time 1 min
					.conversation-view-input
						%i.zmdi.zmdi-mood.button
						%input#compose{'placeholder': 'Send Hangouts message'}
						.icons-sending
							%i.zmdi.zmdi-mail-sending.button
							%i.zmdi.zmdi-image.button
				.hangouts-content-container
					.hangouts-content#conversations
						- (1..10).each do |i|
							.conversation.waves-effect.waves-classic{id: "msg_#{i}"}
								.container
									.left
										.conversation-icon
											%i.user
										.conversation-content
											.username
												John Doe
											.last-message
												Fine, thx! Wanna hang out this weekend?
									.conversation-time
										1 min
				%nav.hangouts-bottom-nav
					.icon-container.waves-effect.waves-classic.waves-green{'data-color': '#1EA260'}
						%i.zmdi.zmdi-accounts
					.icon-container.waves-effect.waves-classic.waves-green.active{'data-color': '#1EA260'}
						%i.zmdi.zmdi-comment-text
					.icon-container.waves-effect.waves-classic.waves-green{'data-color': '#1EA260'}
						%i.zmdi.zmdi-phone
				%button.hangouts-fab.waves-effect.waves-classic.waves-light.waves-button.waves-float
					%i.zmdi.zmdi-plus
            
          
!
            
              @import 'nib'
@import 'jeet'

/* VARS */
$base-font-size = 14px
$hangouts-primary = #1EA260
$sidebar-image-height = 130px

$spritesheet = "https://i.imgur.com/0pA4Loz.png"
$papyros-wallpaper = "https://lh3.googleusercontent.com/-l_i87I3euS4/VW5p75ncu8I/AAAAAAAAAuk/3zB9hzHv9QM/w2048-h1280/Papyros%2BWallpaper.png"
$space-flat = "https://lh5.googleusercontent.com/-k5LefkvFKkI/VPhNE22dhZI/AAAAAAAALoo/MhyQky-wW24/w800-h800/Landscape%2BDesktop.jpg"
$str-round = 'https://semantic-ui.com/images/avatar2/large/matthew.png'

$shadow-z1 = 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
$shadow-z2 = 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)
$shadow-z3 = 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)
$shadow-z4 = 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)
$shadow-z5 = 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)

/* FUNCTIONS */
transl(x, y)
	-moz-transform translateX(x) translateY(y)
	-webkit-transform translateX(x) translateY(y)
	-o-transform translateX(x) translateY(y)
	-ms-transform translateX(x) translateY(y)
	transform translateX(x) translateY(y)
	
trans(prop, t)
	-webkit-transition prop t ease
	-moz-transition prop t ease
	-ms-transition prop t ease
	-o-transition prop t ease
	transition prop t ease
	
transm()
	-webkit-transition arguments
	-moz-transition arguments
	-ms-transition arguments
	-o-transition arguments
	transition arguments
	
/* BEGIN CSS RULES */
html, body
	width 100%
	height 100%
	margin 0
	padding 0
	overflow hidden
	font-family 'Roboto', sans-serif
	font-size $base-font-size
	
*
	box-sizing border-box
	
body.container
	display block
	background-image url($papyros-wallpaper)
	background-size cover
	
.login-container
	display flex
	justify-content center
	align-items center
	position absolute
	width 100%
	height 100%
	top 0
	left 0
	background-color rgba(0,0,0,0.5)
	z-index 999
	&.hidden
		visibility hidden
		pointer-events none
	&>.login-box
		display block
		position relative
		background-color white
		width 400px
		border-radius 3px
		overflow hidden
		box-shadow $shadow-z3
		transl(0,0)
		opacity 1
		trans(all, 0.6s)
		&.dismissing
			transl(50%, 0)
			opacity 0
		&>.login-cover
			display flex
			position relative
			align-items center
			justify-content center
			position relative
			width 100%
			background-color #455A64
			&>span
				font-size 1.3em
				font-weight bold
				color white
				margin 2em 0 4em 0
			&>.login-pp-container
				display flex
				justify-content center
				position absolute
				width 100%
				left 0
				bottom 0
				transl(0, 50%)
				&>img.login-pp
					position relative
					width 100px
					height 100px
					border-radius 50%
					border 2px solid #F5F5F5
					box-shadow $shadow-z2
		&>.login-form
			padding 70px 20px 20px
			&>.line
				display flex
				justify-content space-between
				align-items center
				position relative
				width 100%
				font-size 1.1em
				padding 1em 0
				color #212121
				&.centered
					justify-content center
				&>input
					font-size 1.1em
					padding 0.5em 0.8em
					width 80%
					border none
					border-bottom 2px solid #727272
					outline none
					trans(border-bottom, 0.4s)
					&:focus
						border-bottom 2px solid #3F51B5
					&:hover, :focus, :active
						outline none
				&>img.pp-select
					width 40px
					height 40px
					border 1px solid #F5F5F5
					border-radius 50%
					box-shadow $shadow-z1
				&>button
					display flex
					justify-content center
					align-items center
					position relative
					width 150px
					height 50px
					padding 0 !important
					background-color #607D8B
					color white
					border none
					border-radius 3px
					outline none
					&>i
						display inline
						font-size 1.4em
						margin-left 0.5em
			
.os
	position absolute
	display flex
	width 100%
	&.taskbar
		justify-content space-between
		bottom 0
		left 0
		padding 0.6em 0.3em
		transl(0, 0)
		trans(transform, 0.6s)
		&.hidden
			transl(0, 100%)
	
.os.taskbar > div
	display flex
	justify-content space-between
	
.os.taskbar > div > *
	margin 0em 0.4em
	
.os.taskbar > .left > button:after
	content ''
	display block
	position absolute
	width calc(100% + 0.8em)
	height 2px
	bottom calc(-0.6em - 2px)
	left -0.4em
	background-color rgba(255,255,255,.7)
	trans(bottom, 0.4s)
	z-index 900
	
.os.taskbar > .left > button.opened:after
	bottom -0.6em
	
.vertical.divider
	display block
	width 1px
	height 40px
	margin 0em 10px !important
	background-color rgba(255,255,255,.5)
	
button
	position relative
	width 40px
	height 40px
	padding 0
	outline none
	cursor pointer
	&:active
		padding 0
	&.square
		color white
		background-color #212121
		border none
		border-radius 0.2em
		font-size 1.3rem
		margin 0em 0.2em !important
		padding 0
		&:hover
			color white
			background-color #212121
			font-size 1.3em
			line-height normal
			padding 0
		&:active	
			background-color #121212
	&.icon.hangouts
		border-radius 50%
		border none
		background-color $hangouts-primary
		background-image url($spritesheet)
		background-position 0px 40px
	
.right-container
	display flex
	justify-content space-around
	align-items center
	height 40px
	font-size 1.2em
	padding 0 0.3em
	border none
	border-radius 0.2em
	color white
	background-color #212121
	box-shadow $shadow-z2
	&>*
		margin 0 0.4em
	&>*.waves-circle
		margin 0 0.1em
	&>.time
		font-size 1.1rem
		text-align center
	&>.user
		height 25px
		width 25px
		&>img
			height 25px
			width 25px
			border-radius 50%
	
.button
	cursor pointer

section.hangouts-container
	display block
	position absolute
	width 350px
	top 50%
	left 50%
	background-color transparent
	border none
	border-radius 3px
	box-shadow none
	overflow hidden
	-webkit-transition box-shadow 0.4s ease, opacity 0.4s ease
	-moz-transition box-shadow 0.4s ease, opacity 0.4s ease
	-ms-transition box-shadow 0.4s ease, opacity 0.4s ease
	-o-transition box-shadow 0.4s ease, opacity 0.4s ease
	transition box-shadow 0.4s ease, opacity 0.4s ease
	&.visible
		box-shadow $shadow-z3
	&.hidden
		visibility hidden
	
.ripple.window
	display block
	position absolute
	bottom 0
	left 0
	transl(-50%, 50%)
	width 0
	height 0
	padding-top 0
	border-radius 50%
	background-color white
	opacity 0
	z-index 900
	&.active
		opacity 0
		animation-name window-ripple
		animation-duration 1s
	
.hangouts-global-contents
	position relative
	trans(opacity, 0.4s)
	opacity 0
	&.visible
		opacity 1
	
.window-control
	display flex
	position absolute
	justify-content space-between
	align-items center
	width 100%
	height 30px
	padding 0em 0.5em
	font-size 0.9rem
	color white
	background-color rgba(0, 0, 0, .13)
	z-index 200
	
.window-title h4
	font-weight normal !important
	margin 0
	
.window-control i
	margin 0 0.4em
	trans(color, 0.2s)
	&.zmdi-close:hover
		color #ff5252
	
nav.hangouts-top-nav
	display flex
	justify-content flex-start
	align-items center
	position relative
	width 100%
	padding calc(30px + 0.6em) 1em 0.6em
	background-color $hangouts-primary
	color white
	font-size 1.5em
	
nav.hangouts-top-nav h4
	font-size 0.7em
	margin 0em 1em
	font-weight normal !important
	
.hangouts-content-container
	display block
	position relative
	width 100%
	height 350px
	background-color white
	overflow-x hidden
	overflow-y auto
	
nav.hangouts-sidebar
	display block
	position absolute
	width 70%
	max-width 300px
	height 100%
	top 0
	left 0
	background-color white
	box-shadow $shadow-z3
	trans(transform, 0.4s)
	transl(-105%, 0)
	z-index 200
	&.open
		transl(0, 0)
	
.hangouts-sidebar-overlay
	content ''
	display block
	position absolute
	height 100%
	width 1000%
	top 0
	right 0
	transl(100%, 0)
	trans(opacity, 0.4s)
	background-color black
	opacity 0
	&.open
		opacity 0.5
		animation-name overlay-appear
		animation-duration 0.4s
		
.sidebar-image-container
	display flex
	position relative
	align-items flex-end
	align-content flex-end
	flex-wrap wrap
	width 100%
	height $sidebar-image-height
	padding 0.5em
	background linear-gradient(top, rgba(0,0,0,.35), rgba(0,0,0,.35)), url($space-flat)
	background-size cover
	
.sidebar-user-image-container
	display block
	position relative
	width 100%
	margin 0
	padding 0.6em 0
	
.sidebar-user-image
	display block
	position relative
	width 45px
	height 45px
	background-image url($str-round)
	background-size cover
	border-radius 50%
	&:after
		content 'SMS'
		display block
		position absolute
		font-size 0.45em
		font-weight bold
		color #212121
		padding 0.2em 0.4em
		bottom 0
		right 0
		background-color white
		border-radius 2px
		
.sidebar-image-text
	display flex
	justify-content space-between
	align-items center
	width 100%
	&>.left
		display block
		position relative
		font-size 0.85em
		color white
		&>.sidebar-image-text-email
			font-size 0.9em
			color rgba(255,255,255,.8)
	&>i.zmdi.zmdi-caret-down
		color white
		margin-right 0.8em
	
.sidebar-content-container
	display block
	position relative
	width 100%
	height calc(100% - $sidebar-image-height)
	overflow-x hidden
	overflow-y auto
	&>.sidebar-content
		display block
		position relative
		width 100%
		&>.item
			display block
			font-size 1em
			color #616161
			width 100%
			padding 0.7em 1.2em
			&>span
				padding-left 1em

.horizontal.divider
	display block
	position relative
	width 100%
	height 1px
	margin 0
	padding 0
	background-color rgba(0,0,0,.15)
	
/* 
 * Alias of .zmdi-email-open because CodePen
 * blacklists it for some obscure reason <3
 */
i.zmdi.zmdi-email-opened:before
	content '\f159'
/* Same shit <3 */
i.zmdi.zmdi-mail-sending:before
	content '\f194'
	
.hangouts-content-wrapper
	position relative
	
.conversation-view.floating
	display flex
	flex-wrap wrap
	align-content stretch
	align-items flex-start
	justify-content flex-start
	position absolute
	width 100%
	height 100%
	background-color #eaeaea
	z-index 700
	transl(0, 20%)
	opacity 0
	trans(all, 0.4s)
	pointer-events none
	&.open
		opacity 1
		transl(0,0)
		pointer-events auto
	&>.conversation-view-container
		display block
		position relative
		height calc(100% - 50px)
		width 100%
		overflow-x hidden
		overflow-y auto
		&>.conversation-view-messages
			display block
			position relative
			width 100%
			min-height 100%
			&>.message
				display flex
				position relative
				width 100%
				padding 1em
				&>img
					width 35px
					height 35px
					margin 5px
					display inline-block
					border-radius 50%
				&>.dummy.img
					width 40px
					height 40px
					display inline-block
					background-image url($spritesheet)
					background-position 0 0
					background-repeat no-repeat
				&>.bubble
					display inline-block
					position relative
					text-align left
					max-width 80%
					font-size 0.85em
					padding 0.5em
					border-radius 2px
					background-color white
					box-shadow $shadow-z1
					word-wrap break-word
					-webkit-hyphens auto
					-moz-hyphens auto
					-ms-hyphens auto
					-o-hyphens auto
					hyphens auto
					&>span
						display block
						color #212121
						&.text
							margin 0.5em 0
						&.time
							font-size 0.9em
							color #616161
				&.in
					justify-content flex-start
					align-items flex-start
					&>.bubble:after
						content ''
						display block
						position absolute
						width 0
						height 0
						border-style solid
						border-width 0px 10px 10px 0
						border-color transparent #ffffff transparent transparent
						left -10px
						top 0
				&.out
					justify-content flex-end
					align-items flex-end
					trans(all, 0.4s)
					&.hidden
						transl(20%, 0)
						opacity 0
					&>.bubble
						background-color #c8e6c9
						&:after
							content ''
							display block
							position absolute
							width 0
							height 0
							right -10px
							bottom 0
							box-shadow 0 4px 2px -2px rgba(0,0,0,0.24)
							border-style solid
							border-width 10px 0 0px 10px
							border-color transparent transparent transparent #c8e6c9
					&>img
						float right
	&>.conversation-view-input
		display flex
		align-items center
		justify-content space-between
		position relative
		width 100%
		height 50px
		background-color white
		box-shadow $shadow-z1
		overflow hidden
		&>input
			height 100%
			width 100%
			border-radius 0
			border none
			outline none
			&:hover, :focus, :active
				border none
				outline none
		&>.icons-sending
			width 50px
			height 50px
			color #616161
			float right
			transl(0,-50px)
			trans(transform, 0.4s)
			&.sending
				transl(0,0)
			&>i
				display block
				position relative
				width 100%
				height 50px
				font-size 1.6em
				line-height 50px
				text-align center
		&>.zmdi.zmdi-mood
			display block
			position relative
			width 50px
			height 50px
			font-size 1.6em
			line-height 50px
			color #616161
			text-align center
		
.hangouts-content
	display block
	position relative
	width 100%
	min-height 100%
	background-color white
	
.conversation
	display block
	position relative
	top 0
	left 0
	width 100%
	&>.container
		display flex
		position relative
		justify-content space-between
		align-items center
		width 100%
		font-size 1em
		padding 0.7em 1em
		cursor pointer
		background-color white
		trans(background-color, 0.4s)
		&:hover
			background-color #eaeaea
		&>.left
			display flex
			justify-content space-between
			align-items center
	
.conversation-icon
	display block
	position relative
	width 40px
	height 40px
	margin-right 0.5em
	background-image url($spritesheet)
	background-position 0px 0px

.conversation-content
	display block
	position relative
	color #727272
	overflow hidden
	white-space nowrap
	-o-text-overflow ellipsis
  text-overflow ellipsis
	
.conversation-content > .username
	font-size 0.95em
	
.conversation-content > .last-message
	font-size 0.85em
	
.conversation-content > *
	margin 0.2em 0em
	
.conversation-time
	font-size 0.8em
	color #212121
	
nav.hangouts-bottom-nav
	display block
	position relative
	width 100%
	font-size 1.6em
	color #727272
	padding 0
	overflow hidden
	
nav.hangouts-bottom-nav .icon-container
	display flex
	position relative
	justify-content center
	align-items center
	cursor pointer
	span(1/3)
	height 50px
	trans(all, 0.2s)
	background-color white
	&:after
		content ''
		display block
		position absolute
		width 100%
		height 4px
		left 0
		bottom -4px
		background-color $hangouts-primary
		trans(bottom, 0.2s)	
	
nav.hangouts-bottom-nav .icon-container.active
	color $hangouts-primary
	&:after
		bottom 0
		
button.hangouts-fab
	position absolute
	display block
	width 50px
	height 50px
	border-radius 50%
	border none
	background-color $hangouts-primary
	color white
	font-size 1.5em
	outline none
	right 1em
	bottom 3em
	padding 0
	box-shadow $shadow-z3
	&:hover
		color white
		background-color $hangouts-primary
		font-size 1.5em
		line-height normal
	&:active
		box-shadow $shadow-z4
		
.waves-effect.waves-classic.waves-green .waves-ripple
	background rgba(30, 162, 96, 0.4)
	
.waves-button, .waves-button:hover, .waves-button:visited, .waves-button-input
	line-height normal !important
	
.waves-circle
	width 1.6em
	height 1.6em
	line-height 1.6em
	
.ui-resizable-handle
	z-index 999 !important
	opacity 0
	
/* DEBUG
*, *:before, *:after
	outline 1px solid red
*/
 
/* ANIMATIONS */
@keyframes window-ripple
	0%
		width 0
		padding-top 0
		opacity 0
	70%
		width 500%
		padding-top 500%
		opacity 1
	100%
		width 500%
		padding-top 500%
		opacity 0
			
@keyframes md-ripple
	from
		width 0%
		height 0
		padding-top 0
		opacity 1
	to
		width 200%
		height 0
		padding-top 200%
		opacity 0
			
@keyframes overlay-appear
	from
		opacity 0
	to
		opacity 0.5
            
          
!
            
              $(document).ready(function() {
		var acceptInput = true;

		/* CLASSES */
		var Images = new function() {
				var urls = {
						1: 'https://semantic-ui.com/images/avatar2/large/matthew.png',
						2: 'https://semantic-ui.com/images/avatar2/large/elyse.png',
						3: 'https://semantic-ui.com/images/avatar2/large/kristy.png',
						4: 'https://semantic-ui.com/images/avatar2/large/rachel.png',
						5: 'https://semantic-ui.com/images/avatar2/large/mark.png',
						6: 'https://semantic-ui.com/images/avatar2/large/lena.png',
						7: 'https://semantic-ui.com/images/avatar2/large/eve.png'
				};

				this.get = function(i) {
						return urls[i];
				}
		};

		var Storage = new function() {
				this.put = function(key, value) {
						if (typeof Storage !== "undefined") {
								localStorage.setItem(key, value);
						} else {
								console.warn('localStorage is not supported on your browser!');
								return false;
						}
				}

				this.get = function(key) {
						if (typeof Storage !== "undefined") {
								if (localStorage[key]) {
										return localStorage[key];
								} else {
										console.warn('The requested key "' + key + '" doesn\'t exist in localStorage!');
										return false;
								}
						} else {
								console.warn('localStorage is not supported on your browser!');
								return false;
						}
				}
		};

		var User = new function() {
				this.username = 'Schlipak';
				this.image = 1;
				this.imageURL = Images.get(this.image);

				this.setUsername = function(n) {
						this.username = n;
				}

				this.setImage = function(i) {
						this.image = i;
				}

				this.refreshFromStorage = function() {
						this.username = Storage.get('devwars2_username');
						if (!this.username || this.username == 'false') {
								this.username = '';
						}
						this.image = Storage.get('devwars2_image');
						this.imageURL = Images.get(this.image);
				}

				this.update = function() {
						$('.ls-image').attr('src', this.imageURL);
						$('.sidebar-user-image').css({
								backgroundImage: 'url(' + this.imageURL + ')'
						});

						$('.ls-username').val(this.username).html(this.username);
				}
		};

		var Login = new function() {
				this.container = $('.login-container');
				this.box = $('.login-box');
				this.imageSelector = $('.pp-select');
				this.signIn = $('.signin-confirm');
				this.usernameInput = $('.signin-username');

				this.getInputUsername = function() {
						return this.usernameInput.val();
				}

				this.onImageSelect = function(callback) {
						this.imageSelector.click(callback);
				}

				this.onSignIn = function(callback) {
						this.signIn.click(callback);
				}

				this.setUsernameError = function(b) {
						if (b) {
								this.usernameInput.css({
										borderBottom: ''
								});
						} else {
								this.usernameInput.css({
										borderBottom: '2px solid #F44336'
								});
						}
				}

				this.display = function(t) {
						this.box
								.removeClass('dismissing')
								.parent()
								.animate({
										opacity: 1
								}, t);
				}

				this.dismiss = function(t) {
						this.box
								.addClass('dismissing')
								.parent()
								.animate({
										opacity: 0
								}, t);
				}

				this.hide = function() {
						this.container.addClass('hidden');
				}

				this.show = function() {
						this.container.removeClass('hidden');
				}
		};

		var OS = new function() {
				this.taskbar = $('.os.taskbar');
				this.userLogin = $('.relogin');
				this.hangoutsIcon = $('.icon.hangouts');

				this.hideTaskbar = function() {
						this.taskbar.addClass('hidden');
				}

				this.showTaskbar = function() {
						this.taskbar.removeClass('hidden');
				}

				this.onUserLogin = function(callback) {
						this.userLogin.click(callback);
				}

				this.setHangoutsState = function(b) {
						if (b) {
								this.hangoutsIcon.addClass('opened');
						} else {
								this.hangoutsIcon.removeClass('opened');
						}
				}

				this.toggleHangoutsState = function() {
						this.setHangoutsState(!this.getHangoutsState());
				}

				this.getHangoutsState = function() {
						return this.hangoutsIcon.hasClass('opened');
				}
		};

		var Hangouts = new function() {
				this.acceptInput = true;

				this.container = $('section.hangouts-container');
				this.contents = $('.hangouts-global-contents');
				this.ripple = $('.ripple.window');

				this.hideContainer = function() {
						this.container.addClass('hidden');
				}

				this.showContainer = function() {
						this.container.removeClass('hidden');
				}

				this.setContainerVisible = function() {
						this.container.addClass('visible');
				}

				this.setContainerInvisible = function() {
						this.container.removeClass('visible');
				}

				this.showContents = function() {
						this.contents.addClass('visible');
				}

				this.hideContents = function() {
						this.contents.removeClass('visible');
				}

				this.activateRipple = function() {
						this.ripple.addClass('active');
				}

				this.deactivateRipple = function() {
						this.ripple.removeClass('active');
				}

				this.toggle = function() {
						if (!this.acceptInput) return;

						this.acceptInput = false;
						OS.toggleHangoutsState();

						if (OS.getHangoutsState()) {
								this.showContainer();
								this.activateRipple();

								setTimeout(function() {
										Hangouts.setContainerVisible();
										Hangouts.showContents();

										Hangouts.acceptInput = true;
								}, 400);
						} else {
								this.deactivateRipple();
								this.setContainerInvisible();
								this.hideContents();

								setTimeout(function() {
										Hangouts.hideContainer();
										Hangouts.acceptInput = true;
								}, 400);
						}

				}

				this.close = function() {
						OS.setHangoutsState(false);
						this.deactivateRipple();
						this.setContainerInvisible();
						this.hideContents();

						setTimeout(function() {
								Hangouts.hideContainer();
						}, 400);
				}
		};

		/* SCRIPT */

		(function() {
				User.refreshFromStorage();
				User.update();
		})();

		Login.onImageSelect(function() {
				var imgid = $(this).attr('data-imageid');
				var imgurl = Images.get(imgid);
				Storage.put('devwars2_image', imgid);

				User.refreshFromStorage();
				User.update();
		});

		Login.onSignIn(function() {
				var username = Login.getInputUsername();
				Login.setUsernameError(username.length != 0);

				if (username.length != 0) {
						Storage.put('devwars2_username', username);
						User.refreshFromStorage();
						User.update();

						Login.dismiss(600);

						OS.showTaskbar();

						setTimeout(function() {
								Login.hide();
						}, 600);
				}
		});

		OS.onUserLogin(function() {
				Login.show();
				Login.display(600);

				Hangouts.close();

				OS.hideTaskbar();
		});

		$('.icon.hangouts').click(function() {
				Hangouts.toggle();
		});

		$('.zmdi.zmdi-close.button').click(function() {
				Hangouts.toggle();
		});

		$('.icon-container').click(function(e) {
				$('.icon-container').removeClass('active');
				$(this).addClass('active');
		});

		$('.hangouts-top-nav>i').click(function(e) {
				if ($(this).hasClass('zmdi-menu')) {
						$('.hangouts-sidebar').toggleClass('open');
						if ($('.hangouts-sidebar').hasClass('open')) {
								$('.hangouts-sidebar')
										.append('<div class="hangouts-sidebar-overlay open"></div>')
										.children('.hangouts-sidebar-overlay')
										.click(function(e) {
												$('.hangouts-sidebar').removeClass('open');
												$(e.target).removeClass('open');
												setTimeout(function() {
														$(e.target).remove();
												}, 400);
										});
						}
				} else {
						$('.conversation-view.floating').removeClass('open');
						$('.hangouts-top-nav>i')
								.removeClass('zmdi-arrow-left')
								.addClass('zmdi-menu');

						Waves.attach('.hangouts-top-nav', 'waves-effect waves-classic waves-light');
						Waves.ripple('.hangouts-top-nav');

						var username = Storage.get('devwars2_username');
						if (username) {
								username = 'Schlipak';
						}

						$('.hangouts-top-nav').find('h4').html(username);

						setTimeout(function() {
								$('.hangouts-top-nav')
										.removeClass('waves-effect waves-classic waves-light')
						}, 700);
				}
		});

		function evalWindowPosition() {
				return {
						left: $('.icon.hangouts').offset().left + $('.icon.hangouts').width() + 20,
						top: $('.icon.hangouts').offset().top - $('section.hangouts-container').height() - $('.os.taskbar').height() - 40
				};
		}

		$('section.hangouts-container').draggable({
				handle: '.window-control',
				opacity: 0.5,
				scroll: false
		}).resizable({
				aspectRatio: false,
				autoHide: false,
				containment: "document",
				handles: "n, s, e, w, ne, nw, se, sw",
				alsoResize: '.hangouts-content-container',
				minHeight: 350,
				minWidth: 350
		});

		$('.window-control').mousedown(function() {
				$(this).css({
						'cursor': 'grabbing'
				});
		}).mouseup(function() {
				$(this).css({
						'cursor': 'default'
				});
		});

		$('.conversation[id^=msg_]').click(function() {
				var el = $(this);
				var id = el.attr('id').split('_')[1];
				$('.conversation-view.floating').addClass('open');
				$('.hangouts-top-nav>i')
						.removeClass('zmdi-menu')
						.addClass('zmdi-arrow-left');

				Waves.attach('.hangouts-top-nav', 'waves-effect waves-classic waves-light');
				Waves.ripple('.hangouts-top-nav');
				$('.hangouts-top-nav')
						.find('h4')
						.html($(this).find('.username').html());

				setTimeout(function() {
						$('.hangouts-top-nav')
								.removeClass('waves-effect waves-classic waves-light')
				}, 700);
		});

		$('#compose').keyup(function() {
				var txt = $(this).val();
				if (txt.length > 0) {
						$('.icons-sending').addClass('sending');
				} else {
						$('.icons-sending').removeClass('sending');
				}
		}).keydown(function(e) {
				if ((e.keyCode == 10 || e.keyCode == 13) && e.ctrlKey) {
						sendMessage();
				}
		});

		function sendMessage() {
				var compose = $('#compose');
				var last = $('.conversation-view-messages')
						.find('.message')
						.last();
				var txt = compose.val();

				if (last.hasClass('out')) {
						var msg = $('<span></span>')
								.addClass('text')
								.html(txt);

						last.find('.bubble .text')
								.last()
								.after(msg);
				} else {
						var msg = $('<div></div>');
						msg.addClass('message out hidden')
								.append('<div></div>')
								.children('div')
								.addClass('bubble')
								.append('<span></span>')
								.children('span')
								.addClass('text')
								.html(txt)
								.end()
								.append('<span></span>')
								.children('span')
								.eq(1)
								.addClass('time')
								.html('Now')
								.end()
								.end()
								.end()
								.append('<img>')
								.children('img')
								.addClass('ls-image')
								.attr('src', Images.get(1));

						var imgid = Storage.get('devwars2_image');
						if (imgid) {
								var imgurl = Images.get(imgid);
								msg.children('img').attr('src', imgurl);
						}

						$('.conversation-view-messages').append(msg);

						setTimeout(function() {
								$('.conversation-view-messages')
										.children('.message.out')
										.last()
										.removeClass('hidden');
						}, 10);
				}

				var msgh = $('.conversation-view-messages').height();
				var containerh = $('.conversation-view-container').height();
				if (msgh > containerh) {
						$('.conversation-view-container').stop().animate({
								scrollTop: (msgh - containerh)
						}, 400);
				}

				compose.val('').trigger('keyup');
		}

		$('.icons-sending .zmdi-mail-sending').click(function() {
				sendMessage();
		});

		(function($) {
				var pos = evalWindowPosition();
				$('section.hangouts-container').css({
						top: pos.top,
						left: pos.left
				});
		})(jQuery);

		Waves.init({
				duration: 600,
				delay: 0
		});
		Waves.attach(
				'.waves-effect'
		);
});
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console