Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<title>Živá ukázka</title> <link rel="shortcut icon" href="http://kod.djpw.cz/favicon.ico"> <link rel='stylesheet' href='http://kod.djpw.cz/cache/style.css'><script src='http://kod.djpw.cz/cache/script.js'></script> <body class="dark"> <form action="?" method="post" id='form' onsubmit="top.alert('Nic nebude. Tohle je jen ukázka nástroje na živé ukázky.'); return false"> <div class="header"> <a class='button ico cm-editor' href="./?editor=off">Vypnout barvení</a> <a class='button ico new' href="./" onclick="resetItems(this, '')">Nová ukázka</a> <a class='button ico reset' title='Při editování již vytvořené nebo nové ukázky se HTML, CSS a JS obsah ukládá do localStorage, kliknutím jej vymažete a vrátíte se k originální versi dané ukázky.' href="./" onclick='resetItems(this, ""); return false'>Resetovat</a> <button type="submit" title="Uloží ukázku a zobrazí na ni trvalý odkaz." class="ico save">Uložit a získat odkaz</button> <label style="display: none">Nevyplňujte <input type="text" name="url"></label> <label id="nejsem">Napiště „nejsem robot“ <input type="text" name="text"></label> <script> var nejsem = document.getElementById("nejsem"); nejsem.getElementsByTagName("input")[0].value = "nejsem robot"; nejsem.style.display = "none"; </script> </div> <div class="container"> <div class="item html"> <div> <div class='info'> <div class="headline" onclick="prohodit(this.parentNode.parentNode, 'show')" title="Zobrazit/skrýt možnosti">HTML <span class="ico down"></span></div> <div class="options"> <label for="doctype"><span class="help" title='Vloží <!doctype html> pro standardní, jinak nic'>Standardní režim</span><input type="checkbox" name="doctype" id="doctype" value="1" onchange='updatePreview()' checked></label> <label for="viewport"><span class="help" title='Vloží <meta name="viewport" content="width=device-width">'>Mobilní zobrazení</span><input type="checkbox" name="viewport" id="viewport" value="1" onchange='updatePreview()'></label> </div> </div> </div> <textarea tabindex="1" name="html" id="html" class='html' id="html" cols="30" rows="10"></textarea> </div> <div class="item css"> <div> <div class='info'> <div class="headline" onclick="prohodit(this.parentNode.parentNode, 'show')" title="Zobrazit/skrýt možnosti">CSS <span class="ico down"></span></div> <div class="options"> <label for="reset"><span class="help" title="* {margin: 0; padding: 0; border: 0; zoom: 1}">CSS reset</span><input type="checkbox" name="reset" id="reset" value="1" onchange='updatePreview()'></label> </div> </div> </div> <textarea tabindex="1" name="css" id="css" class='css' id="css" cols="30" rows="10"></textarea> </div> <div class="item js"> <div> <div class='info'> <div class="headline" onclick="prohodit(this.parentNode.parentNode, 'show')" title="Zobrazit/skrýt možnosti">J<span class="hide">ava</span>S<span class="hide">cript</span> <span class="ico down-black"></span></div> <div class="options"> <label for="jquery" title='Připojí jQuery 1.10.2' class=help>jQuery<input type="checkbox" name="jquery" id="jquery" value="1" onchange='updatePreview()'></label><br> <label for="script" class=help title='Kam se má vložit JS kód do stránky.'>Umístění JS <select name="script" id="script" onchange='updatePreview()'> <option value="onload">window.onload</option> <option value="head"></head></option> <option value="body" selected></body></option> </select> </label> </div> </div> </div> <textarea tabindex="1" name="js" id="js" class='js' id="js" cols="30" rows="10"></textarea> </div> <div class="item output" id="output"><div class='info'>Výsledek</div> <iframe id='preview' frameborder=0 ></iframe> </div> <div class='border horizontal'></div> <div class='border horizontal down'></div> <div class='border vertical'></div> <span id="js-error" class="hide" style="cursor: pointer" title="Zavřít" onclick='this.innerHTML = ""'></span> </div> </form>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
html {height: 100%; font: medium/200% "Open Sans", "Lucida Grande", "Segoe UI", "Arial", serif; overflow: hidden;} body {margin: 0; padding: 0; height: 100%; position: relative; overflow: hidden;} form {height: 100%; width: 100%} button {line-height: 100%; padding: .3%; margin: .1em; display: inline;} button, .button {padding: .5em; margin: 0; background: #11A815; border: 1px solid #0D7B10; color: #fff; font-weight: normal; cursor: pointer; line-height: 100%; display: inline-block; text-decoration: none;} .button, button, input {font-size: 100%; font-family: "Open Sans", "Lucida Grande", "Segoe UI", "Arial", serif} button:hover, .button:hover {background-color: #0D7B10} button:active, .button:active, button:focus {background-color: #0A5A0C; border-style: inset;} button:focus, .button:focus {border-style: outset} .ico {padding-left: 28px; min-height: 16px; background-position: 6px center; background-repeat: no-repeat;} .save {background-image: url(ico/save.png)} .new {background-image: url(ico/doc_empty.png)} .reset {background-image: url(ico/undo.png)} .down {background-image: url(ico/br_down.png)} .down-black {background-image: url(ico/br_down-black.png)} .back {background-image: url(ico/br_prev.png)} .header {width: 100%; min-height: 4%; background: #efefef; overflow: hidden;} .header label {margin: 0 1em} .header input {padding: .2em; margin: 0 .5em} .header a {color: #fff;} .container {position: relative; height: 96%; width: 100%; background: #efefef;} iframe, textarea {border: 0; display: block; padding: 0; width: 99%; height: 99%; padding: .5%; font-size: 120%; display: table;} .nojs .container .info {display: none;} .item {position: absolute; height: 50%; width: 50%; background: #fff; overflow: hidden;} .html {top: 0; left: 0;} .css {top: 0; right: 0;} .js {bottom: 0; left: 0;} .output {bottom: 0; right: 0;} .border {position: absolute; background: #efefef; z-index: 10} .horizontal {width: 100%; height: 5px; top: 50%; margin-top: -5px} /*.vertical {height: 100%; width: 5px; left: 50%; margin-left: -5px}*/ .down {top: auto; bottom: 0;} .dark .header, .dark .container, .dark .border, .dark textarea {background: #3B3B38; color: #fff;} .dark textarea {background: #272822} textarea {margin-left: 1.75em;} textarea, .CodeMirror, .CodeMirror * {font-size: 100%; line-height: 120%; font-family: Consolas, Courier, monospace;} .CodeMirror-linenumber {color: #fff;} .html .CodeMirror-linenumbers, .html .info, .html, .html .info .headline {background: #E44D27} .css .CodeMirror-linenumbers, .css .info, .css, .css .info .headline {background: #0D6AB7} .js .CodeMirror-linenumbers, .js .info, .js, .js .info .headline {background: #FEDA3F} .output .info {background: #000} .js .CodeMirror-linenumber, .js .info {color: #000;} .info {position: absolute; top: 0; left: 0; z-index: 20; opacity: 1; transition: all .2s; padding: .1em 1em; width: 5em; text-align: center; height: 1.5em; overflow: hidden; line-height: 1.6em; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -webkit-transform-origin: 3.6em 3.6em; -moz-transform-origin: 3.6em 3.6em; -ms-transform-origin: 3.6em 3.6em; -o-transform-origin: 3.6em 3.6em; transform-origin: 3.6em 3.6em; } .show .info { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; width: 10em; height: auto; line-height: 2em} :root .info {filter: none;} .show .info span.hide {display: inline} .show .down {background-image: url(ico/br_prev.png)} .show .down-black {background-image: url(ico/br_prev-black.png)} span.ico {display: inline-block;} .info .headline {transition: background-color 1s; cursor: pointer;} .html .info:hover .headline, .html .show .headline {background-color: #8C2911} .css .info:hover .headline, .css .show .headline {background-color: #074170} .js .info:hover .headline, .js .show .headline {background-color: #DCB001} .info span {display: nones} .output .info {display: none} .error {background: red; color: #fff; font-weight: bold} .help {border-bottom: 1px dotted #ccc; cursor: help} .header {position: relative;} .hide {display: none} #js-error {background: #FEDA3F; color: #000; position: absolute; top: 50%; padding: 0 1em; left: 8em; margin-top: -2em; line-height: 2em} .CodeMirror {height: 99%; margin: 0; cursor: text} .cm-editor {position: absolute; right: 0; padding-left: .5em; background: #616354; border-color: #6B6F5E} @media screen and (max-width: 680px) { .cm-editor {position: static;} }
CSS
Autoformát
CSS reset
Až na konci
var codeId = ""; var codeType = ["html", "css", "js"]; // Ctrl + S document.documentElement.onkeydown = function(e) { var event = window.event || e; if (event.keyCode == 83 && (navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey)) { document.getElementById("form").submit(); return false; } } // localStorage if (!window.localStorage && document.documentElement.addBehavior) window.localStorage = (function (name) { var prefix = "storage-"; var link = document.createElement("link"); link.addBehavior("#default#userData"); document.documentElement.firstChild.appendChild(link); return { setItem: function (key, value) { link.setAttribute(prefix + key, value); link.save(name); }, getItem: function (key) { try { link.load(name); } catch (exc) {} return link.getAttribute(prefix + key); }, removeItem: function (key) { link.removeAttribute(prefix + key); link.save(name); } }; })("localStorage"); // Obnovení if (window.localStorage) { for (var i = 0; i < codeType.length; i++) { zeZalohy(codeId + "-" + codeType[i], document.getElementById(codeType[i])); } } function zeZalohy(klic, el) { if (localStorage.getItem("test" + klic) === null) { } else { el.innerHTML = localStorage.getItem("test" + klic); } } function zaloha(klic, hodnota) { if (!window.localStorage) return; localStorage.removeItem("test" + klic); localStorage.setItem("test" + klic, hodnota); } function resetItems(el, klic) { if (!window.localStorage) return; for (var i = 0; i < codeType.length; i++) { localStorage.removeItem("test" + klic + "-" + codeType[i]); } window.location = el.href; return false; } var delay; var jsError = document.getElementById("js-error"); // nastavení editoru function config(type) { return { mode: 'text/' + type, lineNumbers: true, theme: "monokai", lineWrapping: true, autoCloseBrackets: true, autoCloseTags: true }; } var html = CodeMirror.fromTextArea(document.getElementById("html"), config("html")); var css = CodeMirror.fromTextArea(document.getElementById('css'), config("css")); CodeMirror.commands.autocomplete = function (cm) { CodeMirror.showHint(cm, CodeMirror.javascriptHint); } var js = CodeMirror.fromTextArea(document.getElementById("js"), { lineNumbers: true, extraKeys: { "Ctrl-Space": "autocomplete" }, mode: 'text/javascript', lineNumbers: true, theme: "monokai", lineWrapping: true, autoCloseBrackets: true }); html.on("change", function () { clearTimeout(delay); delay = setTimeout(updatePreview, 300); zaloha(codeId + "-html", html.getValue()); }); css.on("change", function () { clearTimeout(delay); delay = setTimeout(updatePreview, 300); zaloha(codeId + "-css", css.getValue()); }); js.on("change", function () { try { eval("if(0){\n" + js.getValue() + "}"); jsError.className = "hide"; } catch (error) { jsError.innerHTML = error; jsError.className = ""; return false; } clearTimeout(delay); delay = setTimeout(updatePreview, 300); zaloha(codeId + "-js", js.getValue()); }); function vlastniAlert(message) { jsError.innerHTML += "<b>alert</b>(" + message + "); "; jsError.className = ""; } function updatePreview() { jsError.innerHTML = ""; var previewFrame = document.getElementById('preview'); var preview = previewFrame.contentDocument || previewFrame.contentWindow.document; preview.open(); var doctype = document.getElementById("doctype").checked ? "<!doctype html>\n" : ""; var viewport = document.getElementById("viewport").checked ? "<meta name=\"viewport\" content=\"width=device-width\">\n" : ""; var scriptType = document.getElementById("script").value; var bodyEnd = "", headEnd = ""; /* přepsání alertu */ var atrapaAlertu = "<script>window.alert = function (message) {window.top.window.vlastniAlert(message)}<\/script>"; var jsKod = js.getValue(); if (scriptType == "body") { bodyEnd = "<script>\n" + js.getValue() + "\n<\/script>"; } else { headEnd = scriptType == "onload" ? "<script>window.onload = function (){\n" + jsKod + "\n}<\/script>" : "<script>" + jsKod + "\n<\/script>"; } var reset = document.getElementById("reset").checked ? "*{margin:0;padding:0;border:0; zoom: 1}" : ""; var jquery = document.getElementById("jquery").checked ? "<script src='./js/jquery-1.10.2.min.js'><\/script>" : ""; preview.write(doctype + viewport + jquery + atrapaAlertu + "<style>" + reset + css.getValue() + "</style>" + headEnd + html.getValue() + bodyEnd); preview.close(); } updatePreview(); function prohodit(element, prvniTrida) { element.className = element.className == prvniTrida ? "" : prvniTrida; }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>