<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Website Designer Experiment</title>
<meta name="viewport" content="initial-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="editor.js"></script>
<style>
#canvas {
	width: 100%;
	height: 100%;
	position: relative;
	user-select:none;
}

.rect {
    -webkit-user-select: none;  /* Chrome, Safari, Opera */
    -moz-user-select: none; /* Firefox all */
    -ms-user-select: none; /* IE 10+ */
    user-select: none;  
}
</style>
</head>
<body>
	<table id="main" border="1">
		<tr>
			<td valign="top"><div id="canvas"></div></td>
			<td valign="top">
				<form id='toolscontainer' name='toolscontainer'>
					<center>
						<select id='tools' name='tools'>
						  <option value='div' selected='selected'>DIV</option>
						  <option value='text'>Text</option>
						  <option value='remove'>Remove</option>
						</select>
					</center>
				</form>
				
				<div id="divoptions">
					Border Width <select id="divborder">
						  <option value="0px">0px</option>
						  <option value="1px">1px</option>
						  <option value="2px">2px</option>
						  <option value="3px" selected="selected">3px</option>
						  <option value="5px">5px</option>
						  <option value="7px">7px</option>
						  <option value="8px">8px</option>
						  <option value="9px">9px</option>
						  <option value="10px">10px</option>
					</select><br>
					
					Border Style <select id="divborderstyle">
						  <option value="dotted">dotted</option>
						  <option value="dashed">dashed</option>
						  <option value="solid" selected="selected">solid</option>
						  <option value="double">double</option>
						  <option value="groove">groove</option>
						  <option value="ridge">ridge</option>
						  <option value="inset">inset</option>
						  <option value="outset">outset</option>
					</select><br>

Border Color 
					<input id="bcolor" type="text" name="bcolor" value="#f00" /><br>

BG Color
					<input id="bgcolor" type="text" name="bgcolor" value="#000" />
					<input type="button" id="nobg" value="none">
				</div>
				
				<div id="spanoptions">
					<center><textarea id="spantext">Text</textarea></center>
					
					Font <select id="spanfont">
						  <option value="arial" selected="selected">arial</option>
						  <option value="sans-serif">sans-serif</option>
						  <option value="times new roman">times new roman</option>
						  <option value="verdana">verdana</option>
						  <option value="georgia">georgia</option>
					</select><br>
					
					Font size <select id="spansize">
						  <option value="1em" selected="selected">1em</option>
						  <option value="1.5em">1.5em</option>
						  <option value="2em">2em</option>
						  <option value="2.5em">2.5em</option>
						  <option value="3em">3em</option>
						  <option value="3.5em">3.5em</option>
						  <option value="4em">4em</option>
						  <option value="4.5em">4.5em</option>
						  <option value="5em">5em</option>
					</select><br>
					
					Font Color 
					<input id="spancolor" type="text" name="spancolor" value="#000" /><br>
					
					Border Width <select id="spanborder">
						  <option value="0px" selected="selected">0px</option>
						  <option value="1px">1px</option>
						  <option value="2px">2px</option>
						  <option value="3px">3px</option>
						  <option value="5px">5px</option>
						  <option value="7px">7px</option>
						  <option value="8px">8px</option>
						  <option value="9px">9px</option>
						  <option value="10px">10px</option>
					</select><br>
					
					Border Style <select id="spanborderstyle">
						  <option value="dotted">dotted</option>
						  <option value="dashed">dashed</option>
						  <option value="solid" selected="selected">solid</option>
						  <option value="double">double</option>
						  <option value="groove">groove</option>
						  <option value="ridge">ridge</option>
						  <option value="inset">inset</option>
						  <option value="outset">outset</option>
					</select><br>

Border Color 
					<input id="spanbcolor" type="text" name="spanbcolor" value="#f00" /><br>

BG Color
					<input id="spanbgcolor" type="text" name="spanbgcolor" value="none" />
					<input type="button" id="nospanbg" value="none"><br><br>
					
					<input type="button" id="addspantext" value="Add Text">
				</div><br>
								
				<textarea id='code' placeholder="The #canvas acts as page body"></textarea>
			</td>
		</tr>
	</table>
</body>
</html>

$(window).load(function() {
var enabled = true;

var mouse = {
			x: 0,
			y: 0,
			startX: 0,
			startY: 0
		};
		var element = null;

canvas.onmousemove = function(e) {
			setMousePosition();
			if (element !== null) {
				var bcolor = $('input[name=bcolor]').val(),
					bgcolor = $('input[name=bgcolor]').val(),
					divborderstyle = $('#divborderstyle').val(),
					divborder = $('#divborder').val();
				
				element.style.position = 'absolute';
				element.style.top = (mouse.y - mouse.startY < 0) ? mouse.y + 'px' : mouse.startY + 'px';
				element.style.left = (mouse.x - mouse.startX < 0) ? mouse.x + 'px' : mouse.startX + 'px';
				element.style.width = Math.abs(mouse.x - mouse.startX) + '%';
				element.style.height = Math.abs(mouse.y - mouse.startY) + '%';
				element.style.border = divborder + ' ' + divborderstyle + ' ' + bcolor;
				element.style.background = bgcolor;
				element.style.overflow = 'auto';
			}
		};

canvas.onmousedown = function(e) {
			if (element !== null) {
				element = null;
				canvas.style.cursor = "default";
				console.log("finsihed.");
			} else {
				console.log("begun.");
				mouse.startY = mouse.y;
				mouse.startX = mouse.x;
				element = document.createElement('div');
				element.className = 'rect';
				element.style.top = mouse.y + '%';
				element.style.left = mouse.x + '%';
				canvas.appendChild(element);
				canvas.style.cursor = "crosshair";
			}
		};
		
		
		canvas.onmouseup = function(e) {
			element = null;
			canvas.style.cursor = "default";
			console.log("finsihed.");
			code.val(preview.html());
		};
	}
	else {
		enabled = false;
	}
};
	
	var code = $('#code'),
		preview = $("#canvas");
		
	$('#divoptions, #spanoptions').hide();

// Live Keyup wrapper
	code.val(preview.html());
	$('#main #sitename').text($('#main #inputsitename').val());
	code.keyup(function(e) {preview.html(code.val());});

// Using the <TAB>
	code.keydown(function(e) {
		if(e.keyCode == 9) {
			var start = $(this).get(0).selectionStart;
			$(this).val($(this).val().substring(0, start) + '	' + $(this).val().substring($(this).get(0).selectionEnd));
			$(this).get(0).selectionStart = $(this).get(0).selectionEnd = start + 1;
			return false;
		}
	});
	
	function wrappertools(e) {
		
		// Tools
		$("select#tools").each(function() {
			
			// DIV Tool
			if ($(this).val() === 'div') {
				$('#divoptions').show();
				$('#spanoptions').hide();
				
				// No Background Option
				$('#nobg').click(function() {
					$('input[name=bgcolor]').val('none');
				});
				
				enabled = true;
				IntDraw();
				code.val(preview.html());
			}
			
			// Text Tool
			if ($(this).val() === 'text'){
				$('#spanoptions').show();
				$('#divoptions').hide();
				
				// No Background Option
				$('#nospanbg').click(function() {
					$('input[name=spanbgcolor]').val('none');
				});
				
				$('#addspantext').on('click', function() {
					var spanbcolor = $('input[name=spanbcolor]').val(),
						spanbgcolor = $('input[name=spanbgcolor]').val(),
						spanborderstyle = $('#spanborderstyle').val(),
						spanborder = $('#spanborder').val(),
						spanfont = $('#spanfont').val(),
						spancolor = $('#spancolor').val(),
						spansize = $('#spansize').val(),
						spantext = $('#spantext').val(),
						placespan = $('<span style="position: relative; font-family: ' + spanfont + '; font-size: ' + spansize + '; font-color: ' + spancolor + '; border: ' + spanborder + ' ' + spanborderstyle + ' ' + spanbcolor + '; background: '+ spanbgcolor +';">' + spantext + '</span>');
						
					placespan.css({
						top: e.pageY + 'px',
						left: e.pageX + 'px'
					});
					
					$('#canvas').append(placespan);
					code.val(preview.html());
				});
				
				enabled = false;
				return false;
			}
			
			// Remove Tool
			if ($(this).val() === 'remove') {
				$('#divoptions').hide();
				$('#spanoptions').hide();
				$('#canvas div, #canvas span').on('click', function() {
					$(this).remove();
					code.val(preview.html());
				});
				
				enabled = false;
				return false;
			}
		});
	}
	
	$(document).ready(function(e) { 
		wrappertools(e);
	});
	
	$(document).change(function(e) { 
		wrappertools(e);
	});
});

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground