"paint"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/morkett/pen/MvgWdL?limit=all&page=14&q=sketch" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'> <style class="cp-pen-styles">a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:after, blockquote:before, q:after, q:before { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } * { box-sizing: border-box; -webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(41, 41, 41, 0.004); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } body, html { margin: 0; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; -ms-flex-align: center; -webkit-box-align: center; align-items: center; } body { min-height: 100vh; min-width: 100vw; background: #626262; font-family: Helvetica; } .brushPanel, .imgNav, .sprayPanel { height: 180px; width: 266.6px; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; -ms-flex-align: center; -webkit-box-align: center; align-items: center; background: #535353; top: 15px; right: 15px; position: absolute; border-top-right-radius: 5px; border-top-left-radius: 5px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); z-index: 999; } .brushPanel, .sprayPanel { left: 15px; right: auto; height: 100px; width: 266.6px; border-top-right-radius: 0; border-top-left-radius: 0; } img { width: 250px; height: 133.33px; display: block; border-radius: 5px; } #canvasImg { z-index: 200; } #canvasBgImg { background: #fff; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/390561/canvasBg.png) 50%; background-size: 15px; background-position: -1.5px top; position: absolute; top: 33.2px; top: calc(50% + 10px); left: 50%; -webkit-transform: translatex(-50%) translatey(-50%); transform: translatex(-50%) translatey(-50%); } #draw { cursor: crosshair !important; z-index: 200; } #canvasBg { top: 50%; left: 50%; -webkit-transform: translatex(-50%) translatey(-50%); transform: translatex(-50%) translatey(-50%); background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/390561/canvasBg.png) 50%; background-size: 50px; position: absolute; z-index: -1; } .toolbar { position: absolute; left: 200px; top: 200px; height: auto; width: 50px; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -ms-flex-align: start; -webkit-box-align: start; align-items: flex-start; background: #535353; border-top-right-radius: 5px; border-top-left-radius: 5px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); z-index: 999; } .imgNavTitle, .toolbar, .toolTitle { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-pack: start; -webkit-box-pack: start; justify-content: flex-start; } .imgNavTitle, .toolTitle { background: #434343; height: 20px; width: 100%; border-radius: inherit; color: #dcdcdc; -ms-flex-align: center; -webkit-box-align: center; align-items: center; padding-left: 5px; font-size: 10px; } .toolTitle { -webkit-transform: translateX(-1px); transform: translateX(-1px); width: 52px; } .imgNavTitle, .panelTitle, .sprayPaneTitle { -webkit-transform: translateY(-15px); transform: translateY(-15px); } .panelTitle, .sprayPaneTitle { -webkit-transform: translateY(-8px); transform: translateY(-8px); width: calc(100% + 100px); z-index: 500; margin-left: 100px; border-top-right-radius: 5px; border-top-left-radius: 5px; height: 20px; } .sprayPaneTitle { width: 100%; margin-left: 0; } .tool { height: 45px; width: 50px; border: 1px solid transparent; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; -ms-flex-align: center; -webkit-box-align: center; align-items: center; cursor: pointer; background: #535353; color: #dcdcdc; border-radius: 5px; -webkit-transition: all 0s ease; transition: all 0s ease; position: relative; } .tool:hover { border-radius: 5px !important; background-color: #383838; border-color: #636363; -webkit-transition: all .2s linear; transition: all .2s linear; } .tool:after { content: attr(data-tool-tip); width: 10px; min-height: 20px; background: #383838; top: 0; left: 100%; margin-left: 10px; padding: 5px; position: absolute; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; -ms-flex-align: center; -webkit-box-align: center; align-items: center; text-align: center; font-size: 10px; font-weight: 700; -webkit-transform: translateY(25%) translateX(-210%); transform: translateY(25%) translateX(-210%); display: -ms-flexbox; display: -webkit-box; display: flex; opacity: 0; z-index: -1; border-radius: 5px; } .tool:hover:after { margin-left: 5px; opacity: 1; min-width: 150px; -webkit-transform: translateY(25%) translateX(0); transform: translateY(25%) translateX(0); -webkit-transition: width 1.5s linear 0s, opacity .5s linear 1.5s, -webkit-transform 0s linear 1.5s; transition: width 1.5s linear 0s, opacity .5s linear 1.5s, -webkit-transform 0s linear 1.5s; transition: transform 0s linear 1.5s, width 1.5s linear 0s, opacity .5s linear 1.5s; transition: transform 0s linear 1.5s, width 1.5s linear 0s, opacity .5s linear 1.5s, -webkit-transform 0s linear 1.5s; } #download, .bg, .brush, .clear, .eraser, .nav, .rainbow, .save, .spray { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/390561/paintBrush.svg); background-position: 50%; background-repeat: no-repeat; } .eraser { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/390561/eraser.svg); } .bg { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/390561/paintBucket.svg); } .clear { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/390561/clear.svg); } .save { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/390561/save.svg); } .rainbow { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/390561/rainbow.svg); } .nav { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/390561/nav.svg); } .spray { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/390561/spraycan.svg); } #download { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/390561/download.svg); } a#download, a#download:active, a#download:hover, a#download:visited { height: 100%; width: 100%; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; -ms-flex-align: center; -webkit-box-align: center; align-items: center; color: #dcdcdc; text-decoration: none; } label { color: #dcdcdc; font-size: 11px; font-weight: 700; } .sizeLabel { margin-top: 5px; } input[type=color] { -webkit-appearance: none; background: transparent; border-radius: 5px; outline: none; } input[type=color]::-webkit-color-swatch-wrapper { padding: 2px 1px; height: 26px; width: 26px; } input[type=color]::-webkit-color-swatch { border: none; border-radius: 5px; border: 2px solid #383838; } input[type=range] { width: 200px; } .brushSizePreview { width: 10px; height: 10px; border-radius: 50%; background: #e53935; display: block; } .brushSizePreviewCont { position: absolute; top: 0; right: 0; -webkit-transform: translateX(100px); transform: translateX(100px); background: inherit; width: 100px; height: 100%; bottom: 0; border-top-right-radius: 0; border-top-left-radius: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; -ms-flex-align: center; -webkit-box-align: center; align-items: center; padding-top: 10px; } .active { background-color: #383838; border-color: #636363; } .hide { display: none; } .cross { cursor: pointer; background: none; } .drag { cursor: move; } .preview { height: 10px; width: 10px; display: block; position: absolute; top: 0; left: 0; background: red; z-index: 999; border-radius: 10px; cursor: crosshair; } </style></head><body> <body ondragover="dragOver(event)" ondrop="drop(event)"> <canvas id="draw" width="800" height="450"></canvas> <canvas id="canvasBg" width="800" height="450"></canvas> <div class="imgNav drag" draggable="true" ondragstart="dragStart(event)" id="imgNav"> <div class="imgNavTitle"><span class="cross" id="imgNavCross">✕</span></div> <img id="canvasImg" draggable="false" /> <img id="canvasBgImg" draggable="false" /> </div> <div class="brushPanel hide" id="brushPanel"> <div class="toolTitle panelTitle"><span class="cross" id="panelCross">✕</span></div> <label for="brushSize" class="sizeLabel"> Size</label> <div class="brushSizePreviewCont"> <label for="brushSize" class="brushSizePreview"></label> </div> <input type="range" class="brushSize" id="brushSize" value="10" min="1" max="80"> <label for="brushOpacity">Opacity</label> <input type="range" class="brushOpacity" value="1" min="0.1" max="1" step=".1" id="brushOpacity"> </div> <div class="sprayPanel hide" id="sprayPanel"> <div class="toolTitle sprayPaneTitle"><span class="cross" id="sprayPanelCross">✕</span></div> <label for="sprayDensity" class="sizeLabel"> Density</label> <input type="range" class="sprayDensity" id="sprayDensity" value="50" min="5" max="300"> <label for="sprayRadius">Radius</label> <input type="range" class="sprayRadius" value="20" min="20" max="80" step="1" id="sprayRadius"> </div> <div class="toolbar drag" id="drag-tool" draggable="true" ondragstart="dragStart(event)"> <div class="toolTitle">✕</div> <div class="tool brush" data-tool-tip="Brush Size & Opacity"></div> <div class="tool rainbow" data-tool-tip="Rainbow Brush Tool"></div> <div class="tool spray" data-tool-tip="Spray Can Tool"></div> <div class="tool bg" data-tool-tip="Change Background Colour"></div> <div class="tool eraser" id="eraserTool" data-tool-tip="Eraser Tool"></div> <div class="tool nav active" data-tool-tip="Navigator Hide/Show"></div> <div class="tool save" data-tool-tip="Save Canvas"></div> <div class="tool clear" data-tool-tip="Clear Canvas"></div> <div class="tool dl" data-tool-tip="Download As PNG"> <a id="download"></a> </div> <input type="color" class="tool colorSelector" value="#e53935" data-tool-tip="Select Colour"> </div> </body> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >"use strict"; function loadCanvas() { var e = localStorage.getItem("canvas"), a = new Image(); (a.src = e), (a.onload = function() { ctx.drawImage(a, 0, 0); }), (document.getElementById("canvasImg").src = e || error); } function loadCanvasBg() { var e = localStorage.getItem("canvasBg"), a = new Image(); (a.src = e), (a.onload = function() { ctxBg.drawImage(a, 0, 0); }), (document.getElementById("canvasBgImg").src = e || error); } function draw(e) { if (!isDrawing) return changeBrushSize(), void changeBrushOpacity(); if (canSpray) for (var a = density; a--; ) {if (window.CP.shouldStopExecution(1)){break;} (ctx.strokeStyle = "transparent"), (ctx.fillStyle = colorPicker.value); var t = getRandomInt(-radius, radius), s = getRandomInt(-radius, radius); ctx.fillRect(lastX + t, lastY + s, 1, 1); } window.CP.exitedLoop(1); (ctx.lineWidth = brushSize.value), ctx.beginPath(), ctx.moveTo( lastX, lastY ), ctx.lineTo(e.offsetX, e.offsetY), ctx.stroke(); var r = [e.offsetX, e.offsetY]; if ( ( (lastX = r[0]), (lastY = r[1]), changeBrushSize(), changeBrushOpacity(), !0 === changeHue ) ) (ctx.strokeStyle = "hsla(" + hue + ", 100%, 50%, " + brushOpacity.value + ")"), ++hue >= 360 && (hue = 0); else { var o = colorPicker.value.replace("#", ""), n = rgbToHsl(o); ctx.strokeStyle = "hsla(" + n[0] + "," + n[1] + "%," + n[2] + "%," + brushOpacity.value + ")"; } var c = canvas.toDataURL("image/png"), l = canvasBg.toDataURL("image/png"); (document.getElementById("canvasImg").src = c), (document.getElementById( "canvasBgImg" ).src = l); } function activeTool(e, a) { a ? e.classList.add("active") : e.classList.remove("active"); } function erase() { (canErase = !canErase), activeTool(eraser, canErase), canErase ? ( (canSpray = !1), activeTool(sprayTool, canSpray), sprayPanel.classList.add("hide"), brushPanel.classList.remove("hide"), (ctx.globalCompositeOperation = "destination-out") ) : (ctx.globalCompositeOperation = "source-over"); } function rain() { (canRain = !canRain), activeTool(rainbow, canRain), canRain ? ((canSpray = !1), activeTool(sprayTool, canSpray), (changeHue = !0)) : (changeHue = !1); } function showBrush() { (showBrushPanel = !showBrushPanel), activeTool( brushTool, showBrushPanel ), activeTool(panelCross, showBrushPanel), showBrushPanel ? ( (canSpray = !1), activeTool(sprayTool, canSpray), sprayPanel.classList.add("hide"), brushPanel.classList.remove("hide") ) : brushPanel.classList.add("hide"); } function showNav() { (showNavPanel = !showNavPanel), activeTool( navTool, showNavPanel ), showNavPanel ? navPanel.classList.remove("hide") : navPanel.classList.add("hide"); } function selectColor() { (canRain = !1), activeTool(rainbow, canRain), (changeHue = !1); } function changeBrushSize() { (brushSizePreview.style.width = brushSize.value + "px"), (brushSizePreview.style.height = brushSize.value + "px"); var e = colorPicker.value.replace("#", ""), a = rgbToHsl(e); (ctx.strokeStyle = "hsla(" + a[0] + "," + a[1] + "%," + a[2] + "%," + brushOpacity.value + ")"), (brushSizePreview.style.background = ctx.strokeStyle); } function changeBrushOpacity() { var e = colorPicker.value.replace("#", ""), a = rgbToHsl(e); (ctx.strokeStyle = "hsla(" + a[0] + "," + a[1] + "%," + a[2] + "%," + brushOpacity.value + ")"), changeBrushSize(); } function bgToolOn() { if ((isBgTool = !isBgTool)) { bgTool.classList.add("active"), ctxBg.rect( 0, 0, canvas.width, canvas.height ), (ctxBg.fillStyle = colorPicker.value), ctxBg.fill(); var e = canvasBg.toDataURL("image/png"); (document.getElementById("canvasBgImg").src = e), setTimeout(function() { bgTool.classList.remove("active"); }, 250); } } function sprayOn() { (canSpray = !canSpray), activeTool(sprayTool, canSpray), canSpray ? ( (showBrushPanel = !1), brushPanel.classList.add("hide"), activeTool(brushTool, showBrushPanel), sprayPanel.classList.remove("hide") ) : sprayPanel.classList.add("hide"); } function changeSpray() { (radius = sprayRadius.value), (density = sprayDensity.value); } function clearCanvas() { (isClearTool = !isClearTool), isClearTool && ( clearTool.classList.add("active"), setTimeout(function() { clearTool.classList.remove("active"); }, 250) ), ctx.clearRect(0, 0, canvas.width, canvas.height), ctxBg.clearRect( 0, 0, canvas.width, canvas.height ); var e = canvas.toDataURL("image/png"), a = canvasBg.toDataURL("image/png"); (document.getElementById("canvasImg").src = e), (document.getElementById( "canvasBgImg" ).src = a); } function saveCanvas() { localStorage.setItem("canvas", canvas.toDataURL()), localStorage.setItem( "canvasBg", canvasBg.toDataURL() ), (isSaveTool = !isSaveTool) && ( saveTool.classList.add("active"), setTimeout(function() { saveTool.classList.remove("active"); }, 250) ); } function downloadCanvas(e, a, t) { (e.href = document.getElementById(a).toDataURL()), (e.download = t); } function rgbToHsl(e) { var a = parseInt(e, 16), t = (a >> 16) & 255, s = (a >> 8) & 255, r = 255 & a; (t /= 255), (s /= 255), (r /= 255); var o = Math.max(t, s, r), n = Math.min(t, s, r), c = void 0, l = void 0, i = (o + n) / 2; if (o === n) c = l = 0; else { var u = o - n; switch (((l = i > 0.5 ? u / (2 - o - n) : u / (o + n)), o)) { case t: c = (s - r) / u + (s < r ? 6 : 0); break; case s: c = (r - t) / u + 2; break; case r: c = (t - s) / u + 4; } c /= 6; } return [Math.floor(360 * c), Math.floor(100 * l), Math.floor(100 * i)]; } function getRandomInt(e, a) { return Math.floor(Math.random() * (a - e + 1)) + e; } function dragStart(e) { var a = window.getComputedStyle(e.target, null), t = parseInt(a.getPropertyValue("left")) - e.clientX + "," + (parseInt(a.getPropertyValue("top")) - e.clientY) + "," + e.target.id; e.dataTransfer.setData("Text", t); } function drop(e) { var a = e.dataTransfer.getData("Text").split(","), t = document.getElementById(a[2]); return (t.style.left = e.clientX + parseInt(a[0], 10) + "px"), (t.style.top = e.clientY + parseInt(a[1], 10) + "px"), e.preventDefault(), !1; } function dragOver(e) { return e.preventDefault(), !1; } var canvas = document.querySelector("#draw"), canvasBg = document.querySelector("#canvasBg"), ctx = canvas.getContext("2d"), ctxBg = canvasBg.getContext("2d"), colorPicker = document.querySelector(".colorSelector"), brushSize = document.querySelector(".brushSize"), brushSizePreview = document.querySelector(".brushSizePreview"), brushOpacity = document.querySelector(".brushOpacity"), brushTool = document.querySelector(".brush"), brushPanel = document.querySelector(".brushPanel"), navPanel = document.querySelector(".imgNav"), panelCross = document.querySelector("#panelCross"), navCross = document.querySelector("#imgNavCross"), sprayCross = document.querySelector("#sprayPanelCross"), bgTool = document.querySelector(".bg"), navTool = document.querySelector(".nav"), clearTool = document.querySelector(".clear"), saveTool = document.querySelector(".save"), sprayTool = document.querySelector(".spray"), sprayDensity = document.querySelector(".sprayDensity"), sprayRadius = document.querySelector(".sprayRadius"), sprayPanel = document.querySelector(".sprayPanel"), dlToolLink = document.querySelector("#download"), error = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/390561/error.png"; loadCanvasBg(), loadCanvas(), (canvas.width = 800), (canvas.height = 450), (ctx.strokeStyle = "#BADA55"), (ctx.lineJoin = "round"), (ctx.lineCap = "round"), (ctx.lineWidth = brushSize.value); var isBgTool = !1, isDrawing = !1, lastX = 0, lastY = 0, hue = 0, changeHue = !1, density = sprayDensity.value, radius = sprayRadius.value; canvas.addEventListener("mousedown", function(e) { isDrawing = !0; var a = [e.offsetX, e.offsetY]; (lastX = a[0]), (lastY = a[1]); }), canvas.addEventListener("mousemove", draw), canvas.addEventListener( "mousedown", draw ), canvas.addEventListener("mouseup", function() { return (isDrawing = !1); }), canvas.addEventListener("mouseout", function() { return (isDrawing = !1); }); var eraser = document.querySelector(".eraser"); eraser.addEventListener("click", erase); var canErase = !1, rainbow = document.querySelector(".rainbow"), canRain = !1; rainbow.addEventListener("click", rain); var showBrushPanel = !1; brushTool.addEventListener("click", showBrush), panelCross.addEventListener( "click", showBrush ), navCross.addEventListener("click", showNav), navTool.addEventListener( "click", showNav ); var showNavPanel = !0; colorPicker.addEventListener( "click", selectColor ), colorPicker.addEventListener( "mousemove", selectColor ), brushSize.addEventListener( "mousemove", changeBrushSize ), brushSize.addEventListener( "click", changeBrushSize ), brushOpacity.addEventListener( "mousemove", changeBrushOpacity ), brushOpacity.addEventListener( "click", changeBrushOpacity ), bgTool.addEventListener("click", bgToolOn), sprayTool.addEventListener( "click", sprayOn ), sprayCross.addEventListener("click", sprayOn); var canSpray = !1; sprayRadius.addEventListener( "mousemove", changeSpray ), sprayRadius.addEventListener( "click", changeSpray ), sprayDensity.addEventListener( "mousemove", changeSpray ), sprayDensity.addEventListener("click", changeSpray); var isClearTool = !1; clearTool.addEventListener("click", clearCanvas); var isSaveTool = !1; saveTool.addEventListener("click", saveCanvas); var isDlTool = !1, dlTool = document.querySelector(".dl"); dlToolLink.addEventListener( "click", function() { (isDlTool = !isDlTool), isDlTool && ( dlTool.classList.add("active"), setTimeout(function() { dlTool.classList.remove("active"); }, 250) ), downloadCanvas(this, "draw", "test.png"); }, !1 ); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: