Pixel-Art-Maker-Xmas Edition

Tutorials of (Pixel-art-maker-xmas edition) by Gabriel moraru

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Pixel-Art-Maker-Xmas Edition</title>
  		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/FileSaver.js" target="_blank""></script>
		<script src="jscolor.js"></script>
		<link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css">
		<link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css">
		<link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css">
		<link href="https://fonts.googleapis.com/css?family=Lobster|Mountains+of+Christmas" rel="stylesheet">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="styles.css">
  
  <link rel='stylesheet prefetch' href='https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!--
Created by Gabriel Moraru
Email: [email protected]
 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>Pixel Art Maker!</title>
	</head>
	<body>
		<body>
		<h1>Lab: Pixel Art Maker</h1>
		<h2>Christmas Edition</h2>
		<div class="centerArea">
		<div class="vertical-menu-left">
			<a class="title">
				<h3>Dynamic Grid<span class="tips">Useful info<span class="tipstext">
				<p>1. All the sliders can be fine tuned using the keyboard arrows after selecting them </p>
				<p>2. Double left click = 1 horizontal line of the selected color</p>
				<p>3. Right click = replace box with white (can hold down too)</p>
				<p>4. Middle click will remove the selected row from the table even if it was painted</p>
				<p>The rest I will let you find out on your own :)</p></span></span>
				</h3>
			</a>
				<a>
				<form id="sizePicker" >
					<p>Grid Height: </p>
					<input type="range" id="input_height" name="height" step="1" value="1" min="1" max="40" onchange="showHeight(this.value)"><span id="heightValue">0</span>
					<p>Grid Width:</p>
					<input type="range" id="input_width" name="width" step="1" value="1" min="1" max="40" onchange="showWidth(this.value)"><span id="widthValue">0</span>
				</form>
			</a>
			<a>
				<p>Opacity</p>
				<input type="range" name="canvas_opacity" id="canvas_opacity"  min="0" step="0.05" value="1" max="1" onchange="showOpacity(this.value)"><span id="opacityValue">1</span>
			</a>
			<a>
				<p>Border size</p>
				<input type="range" name="canvas_border_size" id="canvas_border_size" min="0" step="0.5" value="1" max="30" onchange="showSize(this.value)"><span id="borderSizeValue">3</span>
			</a>
			<a>
				<button type="button" id="canvas_shadow_left" name="canvas_shadow_left">Shadow Left</button>
			</a>
			<a>
				<button type="button" id="canvas_shadow_right" name="canvas_shadow_right">Shadow Right</button>
			</a>
			<a>
				<button type="button" name="canvas_remove_lines" id="canvas_remove_lines">Remove/Add Lines</button>
			</a>
		</div>
		<table id="pixel_canvas" oncontextmenu="return false;" style="background-color: #ffffff"></table>
		<div class="vertical-menu-right">
			<a class="title">
				<h3>Color Pickers</h3>
			</a>
			<a>
				<p> Border</p>
				<input class="jscolor" name="canvas_border_color" id="canvas_border_color" value="af4462">
			</a>
			<a>
				<p> Inner</p>
				<input class="jscolor" name="canvas_inner_color" id="canvas_inner_color" value="beaa2f">
			</a>
			<a>
				<button name="colorSelector" id="colorSelector" class="jscolor {valueElement:null,value:'#87cefa'}">Paint Brush</button>
			</a>
			<a class="title"><h3>Extras</h3></a>
			<a>
				<button type="button" name="save_to_html" id="save_to_html">Save to HTML(Beta)</button>
			</a>
			<a>
				<button type="button" name="grinch_edition" class="grinch_edition">End Christmas</button>
			</a>
		</div>
	</div>
	<footer id="footer">
	<p>Created by: Gabriel C. Moraru, available on &nbsp;<a href="https://github.com/gabrielcmoraru/pixel-art" target="_blank" title="GitHub" ><i class="devicon-github-plain-wordmark colored" ></i></a>
	&nbsp;&nbsp;&nbsp;&nbsp;
	<a href="https://codepen.io/gabrielcmoraru/pen/ypOgGe" target="_blank" title="Code Pen" ><i class="fa fa-codepen" ></a></i>
	&nbsp;&nbsp;designed and fully tested on &nbsp;&nbsp;
	<a href="https://www.google.com/chrome/index.html" target="_blank" title="Download Chrome"><i class="devicon-chrome-plain-wordmark colored" ></i></a></p>
	<p>Follow me on &nbsp;&nbsp;
	<a href="https://twitter.com/GabrielCMoraru" target="_blank" title="Twitter"><i class="devicon-twitter-plain colored" ></i></a>
	&nbsp;&nbsp;or just pop an
	<a href="mailto:[email protected]" title="Email">Email</a></p>
</footer>
<script src="designs.js"></script>
</body>
</html>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>
/* Downloaded from https://www.codeseek.co/ */
/*
Created by Gabriel Moraru
Email: [email protected]
 */

body {
	background-image: url("https://images.unsplash.com/photo-1480412904173-931fd2ecfccb?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=81e94ab7938d77b70e751afc57a4d4a7");
	background-size: cover;
	position:  relative;
	background-repeat: no-repeat;
	background-position: center;
	text-align: center;
}

h1 {
	font-family: 'Mountains of Christmas', cursive;
	font-size: 70px ;
	margin: 0.2em;
	color: white;
}

h2 {
	font-family: 'Mountains of Christmas', cursive;
	font-size: 30px ;
	margin: 0.2em;
	color: white;
}

h3{
	margin-top: 3px;
	margin-bottom: 3px;
	color: white;
}

table,
tr,
td {
	border: 1px solid black;
}

table {
	border-collapse: collapse;
	margin: auto;
}

tr {
	height: 20px;
}

td {
	width: 20px;
}

span {
	box-decoration-break: clone;
	margin: 2px;
	padding: 5px;
	border: 1px solid black;
}

p {
	font-family: 'comic Sans', cursive;
}

a{
	text-decoration: none;
}

button {
	font-family: 'comic Sans', cursive;
	border-radius: 5px;
	border: 1px solid black;
}

i {
	font-size: 45px;
}

i.fa-codepen {
	font-size: 45px;
}

i.devicon-twitter-plain {
	font-size: 25px;
}

button.jscolor{
	border:1px solid black;
	border-radius: 10px;
	width: 175px;
	margin-top: 5px;
	margin-bottom: 5px;
}

table.pixel_canvas{
	flex-direction: column;
}

input.jscolor{
	width:100px;
	height:40px;
	text-align: center;
	margin: 0px;
	padding: 5px;
}

button.grinch_edition{
	color: black;
	background-color: yellowgreen;
	font-size:20px;
}

#footer {
	background-color: #efefef;
	padding: 5px;
	opacity: 0.80;
}

.tips {
	margin: 10px;
	padding: 10px;
	border: 2px solid red;
	color: blue;
	background-color: yellow;
	position: absolute;
	z-index: 1;
	opacity: 0.9;
}

.tips .tipstext {
	visibility: hidden;
	width: 270px;
	background-color: yellow;
	color: black;
	text-align: center;
	border-radius: 10px;
	padding: 5px 0;
	position: absolute;
	z-index: 1;
	top: 125%;
	left: 175%;
	margin-left: -60px;
	opacity: 0;
	transition: opacity 1s;
}

.tips:hover .tipstext {
	visibility: visible;
	opacity: 1;
}

.centerArea{
	display: flex;
	flex: 1 0 auto;
	flex-wrap: wrap;
	align-items: flex-start;
	flex-direction: row;
	justify-content: center;
	margin-bottom: 20px;
}

.vertical-menu-left {
	width: 200px;
	border: 1px solid black;
	font-family: 'comic Sans', cursive;
}

.vertical-menu-left a {
	background-color:lightseagreen ;
	color: black;
	display: block;
	padding: 10px;
	text-decoration: none;
/* lightcoral */
/* lightseagreen */
/* lightskyblue */
/* lemonchiffon */
}

.vertical-menu-left a:hover {
	background-color: #ff9800;
}

.vertical-menu-left a.title {
	background-color: #673ab7;
}

.vertical-menu-right {
	width: 200px;
	border: 1px solid black;
	font-family: 'comic Sans', cursive;
}

.vertical-menu-right a {
	background-color: lightseagreen;
	color: black;
	display: block;
	padding: 10px;
	text-decoration: none;
}

.vertical-menu-right a:hover {
	background-color: #ff9800;
}

.vertical-menu-right a.title {
	background-color: #673ab7;
	color: black;
}
/* Downloaded from https://www.codeseek.co/ */
// Created by Gabriel Moraru
// Email: [email protected]


// Get range value for size input so it can be dispalyed in real time
function showHeight(newValue)
	{
	document.getElementById('heightValue').innerHTML=newValue;
	}

function showWidth(newValue)
	{
	document.getElementById('widthValue').innerHTML=newValue;
	}

function showOpacity(newValue)
	{
	document.getElementById('opacityValue').innerHTML=newValue;
	}

function showSize(newValue)
	{
	document.getElementById('borderSizeValue').innerHTML=newValue;
	}


//Grid
// --------------------------------------------------
function makeGrid() {

	//Gets height and width
	const trow = $('#input_height').val();
	const tcell = $('#input_width').val();

	//Resets canvas
	$('#pixel_canvas').children().remove();

	//Creates table tr and td
	for (var x = 0; x < trow; x++) {
	 $('#pixel_canvas').append("<tr></tr>");
		for (var y = 0; y < tcell; y++) {
			$('#pixel_canvas').children().last().append("<td></td>");
		}
	}

//Adds the selected color on the whole table row
$('#pixel_canvas').on('dblclick', 'tr', function(event) {
	event.preventDefault();
		const colorGenerator = $('#colorSelector').css('background-color');
	$(this).css('background-color', colorGenerator);
});

//Swaps the mouse cursor for a pointer when mouse is over Canvas
$('#pixel_canvas').mouseover(function(event) {
	$(this).css('cursor', 'pointer');
});

//Adds the selected color on the selected table cell
$('td').mousedown(function(firstClk) {
	if(firstClk.which === 1){
	event.preventDefault();
	const colorGenerator = $('#colorSelector').css('background-color');
		$(this).css('background-color', colorGenerator);
	}
});

//Adds the selected color on the selected table cells
//while holding down first click
$('td').mousemove(function(paint) {
	if (paint.which === 1) {
	event.preventDefault();
	const colorGenerator = $('#colorSelector').css('background-color');
		$(this).css('background-color', colorGenerator);
	}
});

//Adds the color white(erases colors) on selected cell
$('td').mousedown(function(secondClk) {
	if(secondClk.which === 3){
	event.preventDefault();
	const colorGenerator = $('#colorSelector').css('background-color');
		$(this).css('background-color', '#FFFFFF');
	}
});

//Adds the color white(erases colors) on selected cell
//while holding down second click
$('td').mousemove(function(paint) {
	if (paint.which === 3) {
	event.preventDefault();
	const colorGenerator = $('#colorSelector').css('background-color');
		$(this).css('background-color', '#FFFFFF');
	}
});

//Removes a whole line(tr) from the table
$('tr').mousedown(function(middleClk) {
	if(middleClk.which === 2){
	event.preventDefault();
		$(this).remove();
	}
});
}

//Update the Grid Size when change is detected
//Clears all cells
$("#sizePicker").change(function(event) {
	event.preventDefault();
	makeGrid();
});

// Canvas beautify
// ----------------------------------------------------

//Update the canvas border color
$('#canvas_border_color').on('change', function(event) {
	const borderColor = $("option:selected", $(this));
	const borderColorValue = '#' +this.value;
	 $('#pixel_canvas').css('border-color', borderColorValue);
});

//Update the canvas inner color
$('#canvas_inner_color').on('change', function(event) {
	const innerColor = $("option:selected", $(this));
	const innerColorValue = '#' +this.value;
	 $('#pixel_canvas').css('background-color', innerColorValue);
});

//Update the canvas opacity
$('#canvas_opacity').on('change', function(event){
	event.preventDefault();
	const opacityCanvas = $('#canvas_opacity').val();
		$('#pixel_canvas').css('opacity', opacityCanvas);
});

//Update the canvas border sieze
$('#canvas_border_size').on('change', function(event){
	event.preventDefault();
	const borderSize = $('#canvas_border_size').val();
		$('#pixel_canvas').css('border-width', borderSize);
});

//Remove the canvas inner lines
$('#canvas_remove_lines').click(function(event) {
	event.preventDefault();
	const buttonPressed = $(this);
	$(this).toggleClass('off');
	 if (buttonPressed.is('.off')){
			$('#pixel_canvas td, tr').css('border', '0px');
		} else{
			$('#pixel_canvas td, tr').css('border', '1px solid black');
	 }
});

//Add shadow left to canvas
$('#canvas_shadow_left').click(function(event) {
	$('#pixel_canvas').css({
				'-webkit-box-shadow': '-24px -18px 15px 0px rgba(0,0,0,0.61)',
				'-moz-box-shadow': '-24px -18px 15px 0px rgba(0,0,0,0.61)',
				'box-shadow': '-24px -18px 15px 0px rgba(0,0,0,0.61)'
			});
});

//Add shadow right to canvas
$('#canvas_shadow_right').click(function(event) {
	$('#pixel_canvas').css({
				'-webkit-box-shadow': '24px -18px 15px 0px rgba(0,0,0,0.61)',
				'-moz-box-shadow': '24px -18px 15px 0px rgba(0,0,0,0.61)',
				'box-shadow': '24px -18px 15px 0px rgba(0,0,0,0.61)'
			});
});

//Extra
// ----------------------------------------------------

//Save canvas to HTML(BETA VERSION..)
$("#save_to_html").click( function(save) {
	var picToFrame = $("#pixel_canvas").prop('outerHTML');
	var filename = $("#input-fileName").val();
	var blob = new Blob([picToFrame], {type: "charset=utf-8"});
	saveAs(blob, filename+".html");
});

//Revert to a basic theme (aka Grinch Edition)
$('.grinch_edition').click(function(grinch) {
	$('body').css('background-image', 'url()');
	$('h1').css({
		'color': '#99B2B7',
		'font-family': 'Lobster'
	});
	$('h2').css({
		'color': '#99B2B7',
		'font-family': 'Lobster'
	});
	$('h2').html('Not very Christmassy now...is it?');
	$('.vertical-menu-left a').css('background-color', '#6D9DA6');
	$('.vertical-menu-left a.title').css('background-color', '#746767');
	$('.vertical-menu-right a').css('background-color', '#6D9DA6');
	$('.vertical-menu-right a.title').css('background-color', '#746767');
	$('.vertical-menu-right').children('a').last().remove();
});

This awesome code ( Pixel-Art-Maker-Xmas Edition ) is write by gabriel moraru, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © gabriel moraru