pavelefimen95
/
homework


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
							<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
		<meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>eval</title>
        <link href="index.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="normalize.min.css">
        
	<style>
		input {
			width: 100%;
			height: 30px;
			font-size: 20px;
			border-radius: 20px;
			border: 1px solid #ccc;
			margin-bottom: 10px;
		}
		input[type="text"] {
			/*color: #dbdbdb;*/
			padding: 5px;
			font-size: 15px;
		}
		input[type="button"] {
			background-color: #5a5491;
			color: #fff;
		}
		body {
			font-size: 20px;
			font-family: arial, sans-serif;
			background-color: #6962A8;
			margin: 0;
			padding: 0;
			color: #2d2d2d;
		}
		body * {
			-webkit-box-sizing: border-box;
			        box-sizing: border-box;
			outline: none;
		}
		#result img {
			border-radius: 20px;
		}
		.container {
			position: fixed;
			width: 60%;
			background-color: #fff;
			bottom: 0px;
			z-index: 10;
			font-size: 25px;
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;
			padding: 15px;
			padding-bottom: 5px;
		}

		.container input#input2 {
			margin-bottom: 5px;
		}

		#result {
			background-color: #DFE0E2;
			padding: 15px;
			margin-bottom: 155px;
			border-radius: 15px;
			padding-bottom: 30px;
			-webkit-box-shadow: inset 0px 0px 11px #474747;
			        box-shadow: inset 0px 0px 11px #474747; 
			min-height: 700px;
		}
		#result div {
			background-color: #F9F9F9;
			border-radius: 20px;
			margin-bottom: 20px;
			padding: 10px;
			width: 70%;
		}
		main {
			width: 60%;
			margin: 0 auto;
			border-radius: 20px;
		}
		span {
			color: #6962A8;
			display: block;
			
		}

		.draw {
			display: inline-block;
		}
		.draw img{
			width: 20px;
			height: 20px;
			position: relative;
			left: 5px;
			bottom: 4px;
			
		}
		.canvas {
			position: fixed;
			visibility: hidden;
			border-radius: 20px;
			background-color: #fff;
			width: 38%;
			font-size: 15px;
			padding: 10px;
			-webkit-box-shadow: inset 1px 1px 1px;
			        box-shadow: inset 1px 1px 1px
		}

		.canvas select {
			border-right: 15px;
			font-size: 15px;
		}
		#emoji-block {
			display: inline-block;
			
		}
		
	</style>
</head>
<body>
<div class="canvas">
		<canvas id='canvas' width=500 height=400></canvas> 
        <!--<br/>-->
        <!--<button id='+'>+</button>-->
         <input type="button" value="undo" id="undo">
         <input type="button" value="delete" id="delete">
         <input type="button" value="Send Image" id="to-data-url">
        <input type='color' id='color'>

        <select id='tool'>
            <option value='circle'>Circle</option>
            <option value='line' >Line</option>
            <option value='rectangle' >Rectangle</option>
        </select>
        <label for="size">Size(px): </label>
        <input type="number" id="size">
        <script src="index.js"></script>
	</div>
	<main>
		<div class="container">
			<!-- <label for="input1">nick:</label><br> -->
			<input type="text" id="input1" placeholder="Type a name..."><br>
			<!-- <label for="input2">message:</label><br> -->
			
			<input type="text" id="input2" placeholder="Type a message..."><br>
			<div id="emoji-block">
				<div id="emoji-button" style="display: inline-block;">
					<img src="https://cdn.iconscout.com/public/images/icon/free/png-512/emoji-sad-unhappy-3a93cdaae83e3bb7-512x512.png" alt="" 	width="30px" height="30px">
				</div>
				<div id="emoji" style="display: none">
					<img class = "emoji-item" src="http://www.kolobok.us/smiles/light_skin/aggressive.gif" alt="img">
					<img class = "emoji-item" src="http://www.kolobok.us/smiles/light_skin/dash3.gif" alt="img">
					<img class = "emoji-item" src="http://www.kolobok.us/smiles/light_skin/crazy.gif" alt="img">
					<img class = "emoji-item" src="http://www.kolobok.us/smiles/light_skin/curtsey.gif" alt="img">
					<img class = "emoji-item" src="http://www.kolobok.us/smiles/light_skin/diablo.gif" alt="img">
					<img class = "emoji-item" src="http://www.kolobok.us/smiles/light_skin/focus.gif" alt="img">
					<img class = "emoji-item" src="http://www.kolobok.us/smiles/light_skin/girl_in_love.gif" alt="img">
					<img class = "emoji-item" src="http://www.kolobok.us/smiles/light_skin/hunter.gif" alt="img">
				</div>
			</div>
			<div class="draw">
				<img src="https://cdn.iconscout.com/public/images/icon/premium/png-512/canvas-drawing-painting-color-paint-31e01478fb2fcadd-512x512.png" alt="canvas">
			</div>
			<input type="button" id="button" value="send">
			
		</div>
<!--//////////////////////////////////////////////////-->
	
	
<!--//////////////////////////////////////////////////-->
	<div id="result"></div>
	</main>
	
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.3/papaparse.min.js"></script>
    <script src="http://gitlab.a-level.com.ua/gitgod/nanobind/raw/master/static/nb.js"></script>
	<script src="main.js"></script>
	<script src="emoji.js"></script>
	<script src="canvas/index.js"></script>
</body>
</html>