Notes card

index.html

<div class="notes-wrapper">
	<div class="saver-wrap" contenteditable="false">
		<div class="notes-dot" contenteditable="false"></div>
		<div class="rest" contenteditable="false"></div>
	</div>
	<div class="title" contenteditable="true" onpaste="OnPaste_StripFormatting(this, event);">
		note title
	</div>
	<div class="content" contenteditable="true" onpaste="OnPaste_StripFormatting(this, event);">
	Start typing...
	</div>
	<div class="line"></div>
	<div class="comment"></div>
	<input type="file" onchange="previewFile()" id="selectedFile" style="display: none;" />
	<div class="getImg" onclick="document.getElementById('selectedFile').click();">
		<i class="material-icons">insert_photo</i>
	</div>
</div>

Notes card.markdown

Notes card

Forked from Irem Lopsum's Pen Notes card.

A Pen by Grace on CodePen.

License.

script.js

var typingTimer;
var doneTypingInterval = 10;
var finaldoneTypingInterval = 2000;

function checkTime(i) {
	if (i < 10) {
		i = "0" + i;
	}
	return i;
};

var today = new Date();
var m = today.getMonth();
var d = today.getDate();

m = checkTime(m);
d = checkTime(d);

$('.content, .title').keydown(function() {
  	clearTimeout(typingTimer);
  	if ($('.content, .title').val) {
    	typingTimer = setTimeout(function() {
      	$(".rest").removeClass('active');
	 		$(".notes-dot").removeClass('saved');
    	}, doneTypingInterval);
  	}
});

$('.content, .title').keyup(function() {
  	clearTimeout(typingTimer);
  	typingTimer = setTimeout(function() {
    	$('.rest').addClass('active');
	 	$('.notes-dot').addClass('saved');
		$('.comment').html('Last updated by you on ' + d + '/' + m +'')
  	}, finaldoneTypingInterval);
});

function previewFile() {
	var file = document.querySelector('input[type=file]').files[0];
  	var reader  = new FileReader();

  	reader.onloadend = function () {
    	reader.result;
	 	console.log(reader.result)
	 	$('.content').append('<img src="' + reader.result + '" />');
  	}

  	if (file) {
    	reader.readAsDataURL(file);
		clearTimeout(typingTimer);
		typingTimer = setTimeout(function() {
			$('.rest').addClass('active');
			$('.notes-dot').addClass('saved');
			$('.comment').html('Last updated by you on ' + d + '/' + m +'')
		}, finaldoneTypingInterval);
  	} else {
  	}
}

document.onpaste = function(event){
  	var items = (event.clipboardData || event.originalEvent.clipboardData).items;
  	console.log(JSON.stringify(items)); // will give you the mime types
  	for (index in items) {
    	var item = items[index];
    	if (item.kind === 'file') {
      	var blob = item.getAsFile();
      	var reader = new FileReader();
      	reader.onload = function(event){
        		console.log(event.target.result); // data url!
				$('.content').append('<img src="' + event.target.result + '" />');
				$('.comment').html('Last updated by you on ' + d + '/' + m +'')
			};
      	reader.readAsDataURL(blob);
    	}
  	}
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

$bg: #eee;

$deepBlue-20: #CCCED5;
$deepBlue-40: #999EAC;
$deepBlue-60: #666D82;
$deepBlue-80: #333D59;
$deepBlue-100: #000C2F;
$deepBlue-120: #000923;

$blue-20: #D8F5FF;
$blue-40: #B2EBFE;
$blue-60: #8BE1FE;
$blue-80: #65D7FD;
$blue-100: #3ECDFD;
$blue-120: #2F9ABE;

$studioGray-20: #F4F4F5;
$studioGray-40: #E8E9EB;
$studioGray-60: #DDDEE0;
$studioGray-80: #D1D3D6;
$studioGray-100: #C6C8CC;
$studioGray-120: #959699;

$green: #66cc8f;

%flex {
	display: flex;
	align-items: center;
	justify-content: center;
}

*,*:before,*:after, h2, p {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	border: none;
	background-color: transparent;
	
	&:focus {
		outline: none;
	}
}

html, body {
	width: 100%;
	height: 100%;
	padding: 50px 0;
	margin: 0;
	background-color: $bg;
	font-family: 'Source Sans Pro';
	padding-bottom: 50px;
}

.notes-wrapper {
	max-width: 400px;
	width: 90%;
	margin: 0 auto;
	height: auto;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	position: relative;
	z-index: 999;
	
	.saver-wrap {
		width: 60px;
		height: 60px;
		position: absolute;
		right: 0;
		top: 0;
			
		@extend %flex;
			
		.notes-dot {
			width: 10px;
			height: 10px;
			background-color: $studioGray-80;
			border-radius: 50px;
			transition: .1s ease-in-out;
			
			&.saved {
				background-color: $green;
				transition: .1s ease-in-out;
				transition-delay: 2.10s;
			}
		}
			
		.rest {
			transform: scale(0);
			clip: rect(0, 30px, 30px, 15px); 
			height: 30px;
			width: 30px;
			position: absolute;
			left: calc(50% - 15px);
			top: calc(50% - 15px);
				
			&.active {
				animation: animate 1.05s linear 2;
					
				&:after {
					animation: animate2 1.05s linear 2;
				}
			}
	
			&:after {
				transform: scale(0);
				clip: rect(0, 30px, 30px, 15px);
				content:'';
				border-radius: 50%; 
				height: 30px;
				width: 30px;
				position: absolute; 
			}
		}
	}
	
	.title {
		padding: 25px 30px;
		padding-right: 60px;
		font-weight: 600;
		color: $deepBlue-100;
		font-size: 13px;
		text-transform: uppercase;
		position: relative;
	}
	
	.content {
		padding: 10px 30px;
		padding-bottom: 15px;
		font-weight: 400;
		color: $deepBlue-60;
		line-height: 1.4;
		font-size: 14px;
		
		span.bold {
			font-weight: 700;
		}
		
		img {
			width: 90%;
			border-radius: 5px;
			margin: 15px 5%;
		}
	}
	
	.line {
		width: 95%;
		margin: 0 auto;
		height: 1px;
		background-color: $deepBlue-20;
	}
	
	.comment {
		height: 60px;
		line-height: 60px;
		text-align: center;
		font-size: 13px;
		color: $deepBlue-40;
		position: relative;
	}
	
	.getImg {
			width: 60px;
			height: 60px;
			position: absolute;
			bottom: 0;
			right: -15px;
			cursor: pointer;
			
			.material-icons {
				line-height: 60px;
				color: $deepBlue-40;
			}
		}
}

@keyframes animate {
  	0% {
		transform: scale(1); 
    	transform: rotate(0deg)
  	}
  	100% { 
	  	transform: scale(1);
   	 	transform: rotate(220deg)
  	}
}

@keyframes animate2 {
  	0% {
    	box-shadow: inset $studioGray-80 0 0 0 2px;
    	transform: rotate(-140deg);
  	}
  	100% {
    	box-shadow: inset $studioGray-80 0 0 0 2px;
    	transform: rotate(140deg);
  	}
}