Initializing
Liveweave
Web
expand_more
home
Home
data_object
CSS Explorer
arrow_outward
Palette
Color Explorer
arrow_outward
Polyline
Graphics Editor
arrow_outward
outbox_alt
Generative AI
arrow_outward
frame_source
Python Playground
New
arrow_outward
build
Tools
expand_more
restart_alt
Load "Hello Weaver!"
post_add
Generate Lorem ipsum...
code
Format HTML
code_blocks
Format CSS
data_object
Format JavaScript
library_add
Library
expand_more
A
Algolia JS
Animate CSS
Apex Charts JS
B
Bulma CSS
Bootstrap
C
Chart JS
Chartist
Create JS
D
D3
Dojo
F
Foundation
Fullpage JS
G
Granim JS
Google Charts
H
Halfmoon
J
jQuery
M
Materialize
Moment JS
Masonry JS
Milligram CSS
P
Pure CSS
Primer CSS
Popper JS
Pattern CSS
Picnic CSS
R
React JS
Raphael JS
Raisin CSS
S
Semantic UI
Skeleton CSS
Spectre CSS
Tachyons CSS
T
Tailwind
Three JS
U
UI Kit
Vis JS
W
Water CSS
download
Download
expand_more
developer_mode
Download as HTML
folder_zip
Download as .ZIP
cloud_upload
Save
account_circle
Login
settings
Settings
expand_more
14
px
Live mode
Night mode
Line number
Mini map
Word wrap
sync_alt
Reset Settings
smart_display
Run
<!DOCTYPE html> <html> <head> <title>Starter Template for Web Design App</title> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0"> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="http://threedubmedia.com/inc/js/jquery.event.drag-2.2.js"></script> <script type="text/javascript" src="http://threedubmedia.com/inc/js/jquery.event.drag.live-2.2.js"></script> </head> <body> <div id="design-area"> <div id="canvas"></div> </div> <div id="draw-wrapper"> <div id="tools"> <a id="new-doc" href="javascript:void(0)">New</a> <a id="select-tool" href="javascript:void(0)">Select</a> <a id="draw-tool" href="javascript:void(0)">Draw</a> </div> <div id="start-props"> <header> starter </header> <div class="drop-section" align="center"> Basic starter template for web design applications. <p> Designed & Built by.<br /> <a id="author" href="http://michaelsdelivery.tk/" target="_blank">Michael Schwartz</a> </p> </div> </div> <div id="style-props"> <header> styles </header> <div class="drop-section" align="center"> <input class="grab-classname" placeholder="class name" type="text"> <div class="styleinputs"> <span class="main-inputs"> <input class="grab-color" placeholder="color: ?;" type="text"> <input class="grab-background" placeholder="background: ?;" type="text"> </span> <p> <font size="2"> Press [Del] to remove a selected element. </font> </p> </div> </div> </div> <div id="edit-props"> <header> heading </header> <div class="drop-section" align="center"> <div id="edit-heading" class="horizontal-bar"> <a class="grab-p" href="javascript:void(0)">p</a> <a class="grab-h1" href="javascript:void(0)">h1</a> <a class="grab-h2" href="javascript:void(0)">h2</a> <a class="grab-h3" href="javascript:void(0)">h3</a> <a class="grab-h4" href="javascript:void(0)">h4</a> <a class="grab-h5" href="javascript:void(0)">h5</a> <a class="grab-h6" href="javascript:void(0)">h6</a> <a class="grab-pre" href="javascript:void(0)">pre</a> <a class="grab-blockquote" href="javascript:void(0)">blockquote</a> </div> </div> <header> typography </header> <div class="drop-section" align="center"> <div id="edit-font" class="horizontal-bar"> <a style="font-family: andale mono;" class="grab-andale-mono" href="javascript:void(0)">andale mono</a> <a style="font-family: arial;" class="grab-arial" href="javascript:void(0)">arial</a> <a style="font-family: arial black;" class="grab-arial-black" href="javascript:void(0)">arial black</a> <a style="font-family: courier;" class="grab-courier" href="javascript:void(0)">courier</a> <a style="font-family: comic sans ms;" class="grab-comic-sans-ms" href="javascript:void(0)">comic sans ms</a> <a style="font-family: garamond;" class="grab-garamond" href="javascript:void(0)">garamond</a> <a style="font-family: helvetica;" class="grab-helvetica" href="javascript:void(0)">helvetica</a> <a style="font-family: impact;" class="grab-impact" href="javascript:void(0)">impact</a> <a style="font-family: palatino;" class="grab-palatino" href="javascript:void(0)">palatino</a> <a style="font-family: papyrus;" class="grab-papyrus" href="javascript:void(0)">papyrus</a> <a style="font-family: serif;" class="grab-serif" href="javascript:void(0)">serif</a> <a style="font-family: sans;" class="grab-sans" href="javascript:void(0)">sans</a> <a style="font-family: tahoma;" class="grab-tahoma" href="javascript:void(0)">tahoma</a> <a style="font-family: times new roman;" class="grab-times-new-roman" href="javascript:void(0)">times new roman </a> <a style="font-family: verdana;" class="grab-verdana" href="javascript:void(0)">verdana</a> </div> <p> <a href="javascript:void(0)" title="justifyLeft"><span class="fa fa-align-left"></span></a> <a href="javascript:void(0)" title="justifyCenter"><span class="fa fa-align-center"></span></a> <a href="javascript:void(0)" title="justifyRight"><span class="fa fa-align-right"></span></a> </p> <p> <a title="Bold" href="javascript:void(0)" onclick="document.execCommand("bold", false, null);"><span class="fa fa-bold"></span></a> <a title="Italic" href="javascript:void(0)" onclick="document.execCommand("italic", false, null);"><span class="fa fa-italic"></span></a> <a title="Underline" href="javascript:void(0)" onclick="document.execCommand("underline", false, null);"><span class="fa fa-underline"></span></a> <a title="Strikethrough" href="javascript:void(0)" onclick="document.execCommand("strikeThrough", false, null);"><span class="fa fa-strikethrough"></span></a> <a title="SubScript" href="javascript:void(0)" onclick="document.execCommand("subscript", false, null);"><span class="fa fa-subscript"></span></a> <a title="SuperScript" href="javascript:void(0)" onclick="document.execCommand("superscript", false, null);"><span class="fa fa-superscript"></span></a> </p> <table> <tr> <td> <input id="edit-font-size" value="3" min="1" max="10" step="1" onchange="fsize.value=value" type="range"> </td> <td> <output id="fsize">3</output> </td> </tr> </table> </div> <header> heading </header> <div class="drop-section" align="center"> <div id="edit-extras" class="horizontal-bar"> <a title="Indent" href="javascript:void(0)" onclick="document.execCommand("indent", false, null);"><span class="fa fa-indent"></span></a> <a title="Outdent" href="javascript:void(0)" onclick="document.execCommand("outdent", false, null);"><span class="fa fa-outdent"></span></a> <a title="Unordered List" href="javascript:void(0)" onclick="document.execCommand("insertUnorderedList", false, null);"><span class="fa fa-list-ul"></span></a> <a title="Ordered List" href="javascript:void(0)" onclick="document.execCommand("insertOrderedList", false, null);"><span class="fa fa-list-ol"></span></a> <a title="Horizontal Rule" href="javascript:void(0)" onclick="document.execCommand('insertHorizontalRule',false,null);"><span class="fa fa-minus-square-o"></span></a> <a title="Link" href="javascript:void(0)" onclick="var linkURL = prompt("Enter the URL for this link:", "http://"); document.execCommand("CreateLink", false, linkURL);"><span class="fa fa-link"></span></a> <a title="Unlink" href="javascript:void(0)" onclick="document.execCommand("Unlink", false, null);"><span class="fa fa-unlink"></span></a> <a title="Image" href="javascript:void(0)" onclick="var imgSrc = prompt('Enter image location', ''); if(imgSrc != null) {document.execCommand('insertimage', false, imgSrc);}"><span class="fa fa-picture-o"></span></a> </div> </div> </div> <div id="draw-props"> <header> elements </header> <div class="drop-section"> <form class="draw-elements" name='draw-elements'> <input type="radio" value="div" id="div" name="elms" checked="true"> <label for="div"> Div</label><br /> <input type="radio" value="span" id="span" name="elms"> <label for="span"> Span</label><br /> <input type="radio" value="a" id="a" name="elms"> <label for="a"> Anchor</label><br /> <input type="radio" value="button" id="button" name="elms"> <label for="button"> Button</label><br /> </form> </div> <header title=" options"> options<br> </header> <div class="drop-section draw-opt-props" align="center"> <div id="div-opts"> <input id="center-align-div" type="checkbox" checked="true" /> <label for="center-align-div"> Align inner elements to center?</label> </div> <div id="span-opts"> <input id="center-align-span" type="checkbox" /> <label for="center-align-span"> Align inner elements to center?</label> </div> <div id="anchor-opts"> <input id="apply-href" type="text" placeholder="Url to website?" /><br /> <input id="apply-name" type="text" placeholder="name?" /><br /> <span id="apply-target"> <input id="apply-targetblank" type="checkbox" checked="true" /> <label for="apply-targetblank">target="_blank"?</label> </span> </div> <div id="button-opts"> Sorry this element has no options </div> </div> </div> <textarea id="code" style="display:none;"></textarea> </div> </body> </html>
*:active, *:focus { outline: 0; } html, body { height: 100%; } body { margin: 0; font: 14px arial; color: #000; background: #333; } /* Right Panel */ #draw-wrapper { cursor: default; position: absolute; top: 0; right: 0; width: 300px; height: 100%; color: #ccc; background: #333; overflow: auto; } /* Toolbox */ #tools { padding-top: .5em; text-align: center; } #tools a { text-decoration: none; color: #09a; margin: 0 .5em; padding: 0 .5em; font: 16px arial; } #tools a:hover { color: #3bf; } #tools .activetool { border-bottom: 1px solid #3df; } /* Property Containers */ #author { text-decoration: none; padding: 1em 2em; background: #69f; color: #edf; border-radius: 1em; position: relative; top: 1.5em; } #author:hover { color: #fff; background: #6af; } #author:active { background: #66f; } #draw-wrapper header { cursor: pointer; padding: 0 5px; border-top: 1px solid #151515; border-bottom: 1px solid #151515; background: #252525; color: #999; font: 14px times; text-transform: uppercase; } #draw-wrapper .activedrop { color: #666; } .drop-section { padding: 5px; font: 14px arial; } .styleinputs input[type=text], .styleinputs input[type=number] { width: 45%; background: #444; border-radius: 0; border-style: solid; border-width: 1px; border-color: #1a1a1a #272729 #272729 #272729; font: 15px arial; -webkit-font-smoothing: antialiased; color: #ced; } #draw-props input[type=text] { width: 90%; background: #444; border-radius: 0; border-style: solid; border-width: 1px; border-color: #1a1a1a #272729 #272729 #272729; font: 15px arial; -webkit-font-smoothing: antialiased; color: #ced; } .styleinputs ::-webkit-input-placeholder, #anchor-opts ::-webkit-input-placeholder { /* WebKit browsers */ color: #888; } .styleinputs :-moz-placeholder, #anchor-opts :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #888; } .styleinputs ::-moz-placeholder, #anchor-opts ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #888; } .styleinputs :-ms-input-placeholder, #anchor-opts :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #888; } .grab-classname { width: 70%; color: #fff; font: 16px arial; background-color: #09a; border: 0; margin: 1em; padding: 1em 2em; margin: .25em 0 1em 0; border-radius: 1em; } /* Edit Properties */ #edit-props a { padding: 5px 10px; margin: 0px 2px; border-style: none; border-width: 0px; font-family: sans; color: #ccc; background: #444; text-decoration: none; font-size: 12px; font-weight: normal; } #edit-props a:hover { color: #fff; } #edit-props .horizontal-bar { display: inline-block; padding: 1em 0; margin: 0; width: 90%; overflow-x: auto; overflow-y: hidden; white-space: nowrap; } /* Drawing Area */ #design-area { position: absolute; top: 0; left: 0; right: 300px; bottom: 0; overflow: hidden; } #canvas { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #fff; overflow: auto; } /* Resize Constructs */ .drag { position: absolute; border: 1px solid #89B; background: #BCE; width: 58px; height: 58px; top: 120px; cursor: move; } .handle { position: absolute; width: 10px; height: 10px; border: 1px solid #89B; background: #9AC; } .NW, .NN, .NE { top: -4px; } .NE, .EE, .SE { right: -4px; } .SW, .SS, .SE { bottom: -4px; } .NW, .WW, .SW { left: -4px; } .SE, .NW { cursor: nw-resize; } .SW, .NE { cursor: ne-resize; } .NN, .SS { cursor: n-resize; left: 50%; margin-left: -4px; } .EE, .WW { cursor: e-resize; top: 50%; margin-top: -4px; } .selected { background-color: #ECB; border-color: #B98; } .selected .handle { background-color: #CA9; border-color: #B98; }
$(document).ready(function() { // Setup our variables var counter = 1, elmstyle = false, drawable = false, drawing = false, mS = {}, dBox, editableElm; // Global Function Callbacks function CheckDrawOptions() { if ($("#div").is(":checked")) { $(".draw-opt-props div").hide(); $("#div-opts").show(); } else if ($("#span").is(":checked")) { $(".draw-opt-props div").hide(); $("#span-opts").show(); } else if ($("#a").is(":checked")) { $(".draw-opt-props div").hide(); $("#anchor-opts").show(); } else if ($("#button").is(":checked")) { $(".draw-opt-props div").hide(); $("#button-opts").show(); } } var BoxOptions = function() { if ($("#div").is(":checked")) { if ($("#center-align-div").is(":checked")) { dBox = $("<" + $('.draw-elements input[type=radio]:checked').val() + " class='box"+ counter++ +"' align='center' />") .html("<h1>GISEMENT</h1>\nJe ne sais pas quoi mettre ici, donc je suppose que je vais mettre ce texte ici."); } else { dBox = $("<" + $('.draw-elements input[type=radio]:checked').val() + " class='box"+ counter++ +"' />") .html("<h1>GISEMENT</h1>\nJe ne sais pas quoi mettre ici, donc je suppose que je vais mettre ce texte ici."); } } if ($("#span").is(":checked")) { if ($("#center-align-span").is(":checked")) { dBox = $("<" + $('.draw-elements input[type=radio]:checked').val() + " class='box' align='center' />") .html("Certains textes"); } else { dBox = $("<" + $('.draw-elements input[type=radio]:checked').val() + " class='box"+ counter++ +"' />") .html("Certains textes"); } } if ($("#a").is(":checked")) { if (($("#apply-href").val() === "") && ($("#apply-name").val() === "")) { dBox = $("<" + $('.draw-elements input[type=radio]:checked').val() + " class='box"+ counter++ +"' />") .html("Je suis un lien"); } else if ($("#apply-href").val() === "") { dBox = $("<" + $('.draw-elements input[type=radio]:checked').val() + " class='box"+ counter++ +"' name='" + $("#apply-name").val() + "' />") .html("Je suis un lien"); } else if ($("#apply-targetblank").is(":checked")) { if ($("#apply-name").val() === "") { dBox = $("<" + $('.draw-elements input[type=radio]:checked').val() + " class='box' href='" + $("#apply-href").val() + "' target='_blank' />") .html("Je suis un lien"); } else { dBox = $("<" + $('.draw-elements input[type=radio]:checked').val() + " class='box' href='" + $("#apply-href").val() + "' name='" + $("#apply-name").val() + "' target='_blank' />") .html("Je suis un lien"); } } else if ($("#apply-name").val() === "") { dBox = $("<" + $('.draw-elements input[type=radio]:checked').val() + " class='box"+ counter++ +"' href='" + $("#apply-href").val() + "' />") .html("Je suis un lien"); } else { dBox = $("<" + $('.draw-elements input[type=radio]:checked').val() + " class='box"+ counter++ +"' href='" + $("#apply-href").val() + "' name='" + $("#apply-name").val() + "' />") .html("Je suis un lien"); } } if ($("#button").is(":checked")) { if ($(".draw-elements #button").is(":checked")) { dBox = $("<" + $('.draw-elements input[type=radio]:checked').val() + " class='box"+ counter++ +"' />") .html("Certains textes"); } } }; var HandleSelectedElement = function() { if ($("#select-tool.activetool").is(":visible")) { // Selects Element $('#canvas').children().on('mousedown touchstart', function(e) { if(elmstyle) { // Remove previously added handles $('.handle').remove(); // Grab selected elements class $(".grab-classname").val($(this).attr('class')); // Remove all ids from previously selected elements $("#canvas *").removeAttr('id'); // Make element styleable $(this).attr('id', 'stylethis').append('<div class="handle NE"></div><div class="handle NN"></div><div class="handle NW"></div><div class="handle WW"></div><div class="handle EE"></div><div class="handle SW"></div><div class="handle SS"></div><div class="handle SE"></div>'); // Remove style values and focus $(".main-inputs input").val("").blur(); } }) .drag("start",function( ev, dd ){ dd.attrc = $( ev.target ).prop("className"); dd.attrd = $( ev.target ).prop("id"); dd.width = $( this ).width(); dd.height = $( this ).height(); }).drag(function( ev, dd ){ var props = {}; if ( dd.attrc.indexOf("E") > -1 ){ props.width = Math.max( 32, dd.width + dd.deltaX ); } if ( dd.attrc.indexOf("S") > -1 ){ props.height = Math.max( 32, dd.height + dd.deltaY ); } if ( dd.attrc.indexOf("W") > -1 ){ props.width = Math.max( 32, dd.width - dd.deltaX ); props.left = dd.originalX + dd.width - props.width; } if ( dd.attrc.indexOf("N") > -1 ){ props.height = Math.max( 32, dd.height - dd.deltaY ); props.top = dd.originalY + dd.height - props.height; } if ( dd.attrd.indexOf("stylethis") > -1 ){ props.top = dd.offsetY; props.left = dd.offsetX; } $('#stylethis').css( props ); }, {relative:true}) .on('dblclick', function() { EditableStylez(); return false; }) .filter("a").on('click mousedown touchstart', function() { return false; }).on('mouseup touchend', function() { return true; }); } }; var EditableStylez = function() { $("#canvas *").prop('contenteditable', true); window.getSelection().removeAllRanges(); $("#style-props").hide(); $("#edit-props").show(); // Deactivates interactive design and right click menu when tool is active $("div.handle").remove(); $("#code").val($("#canvas").html()); $("#canvas").html($("#code").val()); $('[contenteditable]').on('focus',function(){ editableElm = this; }); $("#canvas").find("#stylethis").trigger('focus'); $("#canvas *").removeAttr("id"); }; // Toggle Property Dropdown $("#draw-wrapper header").on('click', function() { $(this).toggleClass("activedrop").next().toggle(); }); // Handles Select Tool $("#select-tool").on('click', function() { $("#draw-tool").removeClass("activetool"); $(this).toggleClass("activetool"); $("#code").val($("#canvas").html()); $("#canvas").html($("#code").val()); if ($("#select-tool.activetool").is(":visible")) { $("#draw-props, #start-props").hide(); $("#style-props").show(); drawable = false; elmstyle = 1; // Prevent anchor leave if ($("#canvas").find("a").prop("target") === "_blank") { $("#canvas").find("a").prop("target", "_self"); } window.onbeforeunload = function() { return false; }; if(elmstyle) { HandleSelectedElement(); $(".grab-classname").on("keyup", function() { $("#stylethis").attr('class', $(this).val()); }); $(".grab-color").on("keyup", function() { $("."+ $(".grab-classname").val()).css({ "color": $(this).val() }); }); $(".grab-background").on("keyup", function() { $("."+ $(".grab-classname").val()).css({ "background": $(this).val() }); }); // Press Del to remove selected element $(document).keydown(function(e) { // See if element is visible first if ($("#stylethis").is(":visible")) { // If element is visible remove if (e.which === 46) { if ($(".main-inputs input").is(":focus")) { // Do nothing if an input is focused } else { $("#stylethis").remove(); } } } }); } } else { elmstyle = false; // Remove all ids from previously selected elements $("#canvas *").removeAttr('id'); $(".handle").remove(); // Remove style values $(".main-inputs input").val(""); $("#style-props, #edit-props").hide(); if (($("#style-props").is(":hidden")) && ($("#draw-props").is(":hidden"))) { $("#start-props").show(); if ($("#canvas").find("a").prop("target") === "_self") { $("#canvas").find("a").prop("target", "_blank"); } } } }); // Handles Draw Tool $("#draw-tool").on('click', function() { $("#select-tool").removeClass("activetool"); $(this).toggleClass("activetool"); $("#code").val($("#canvas").html()); $("#canvas").html($("#code").val()); if ($("#draw-tool.activetool").is(":visible")) { elmstyle = false; drawable = 1; $("#draw-props").show(); $("#style-props, #edit-props, #start-props").hide(); // Prevent anchor leave if ($("#canvas").find("a").prop("target") === "_blank") { $("#canvas").find("a").prop("target", "_self"); } window.onbeforeunload = function() { return false; }; // Remove all ids from previously selected elements $("#canvas *").removeAttr('id'); $(".handle").remove(); $("#apply-href").on('keyup', function() { if ($(this).val() === "") { $("#apply-target").hide(); } else { $("#apply-target").show(); } }); // Handles Draw Options $(".draw-elements input[type=radio]").on('change', function() { CheckDrawOptions(); }); $(".draw-opt-props > div input").on('change', function() { BoxOptions(); }); } else { drawable = false; $("#draw-props").hide(); if (($("#style-props").is(":hidden")) && ($("#draw-props").is(":hidden"))) { $("#start-props").show(); if ($("#canvas").find("a").prop("target") === "_self") { $("#canvas").find("a").prop("target", "_blank"); } } } }); // Handles Drawable Elements $("#canvas").on('mousedown touchstart', function(e) { if(drawable) { drawing = true; mS.x = e.pageX; mS.y = e.pageY; BoxOptions(); $(this).append(dBox); // Do not select text when drawing return false; } }); $(document).on('mousemove touchmove', function(e) { if(drawing && drawable){ var mPos = {x:e.pageX, y:e.pageY}; var css = {}; css.position = 'absolute'; css.left = (mPos.x > mS.x) ? mS.x : mPos.x; css.top = (mPos.y > mS.y) ? mS.y : mPos.y; css.width = Math.abs(mPos.x - mS.x); css.height = Math.abs(mPos.y - mS.y); css.border = '1px dotted rgb(0, 34, 102)'; dBox.css(css); // Do not select text when drawing return false; } }).on('mouseup touchend', function(e) { drawing = false; if ($("#select-tool.activetool").is(":visible")) { // Prevent anchor leave if ($("#canvas").find("a").prop("target") === "_blank") { $("#canvas").find("a").prop("target", "_self"); } window.onbeforeunload = function() { return false; }; } else if ($("#draw-tool.activetool").is(":visible")) { // Prevent anchor leave if ($("#canvas").find("a").prop("target") === "_blank") { $("#canvas").find("a").prop("target", "_self"); } window.onbeforeunload = function() { return false; }; } }); // New Document $("#new-doc").on('click', function() { var x = window.confirm("Did you save your changes?"); if (x) { $("#canvas").html(""); $("#code").val(""); if ($("#select-tool.activetool").is(":visible")) { $("#select-tool").trigger("click"); } if ($("#edit-tool.activetool").is(":visible")) { $("#edit-tool").trigger("click"); } } else { // The user decided not to create a new doc. Therefore do nothing } }); CheckDrawOptions(); // Remove style values $(".main-inputs input").val(""); // Hide style properties onload $("#style-props, #edit-props, #draw-props").hide(); if ($("#apply-href").val() === "") { $("#apply-target").hide(); } else { $("#apply-target").show(); } });