/
VoRoN
/
HTML
Обзор
Документация
Войти
/
VoRoN
/
HTML
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
editor.html
181 строка
45 KB
Александр Владимирович
update editor.html
22 окт 2024, 12:47
22 окт 2024, 12:47
654f5e6
Код
Авторство
О чём код?
<html> <title>Редактор HTML</title> <head> <style> body { margin: 0px; } #main { width: 100%; height: calc(100% - 36px); display: flex; flex-direction: row; } #splitter { cursor: col-resize; background-color: #aaa; width: 10px; height: 100%; /* Prevent the browser's built-in drag from interfering */ -moz-user-select: none; -ms-user-select: none; user-select: none; } #editor { width: 40%; height: 100%; min-width: 10px; } #viewer { width: 60%; height: 100%; min-width: 10px; } #viewer iframe{ width: 100%; height: 100%; border: none; } #menu a.selected {background-color:#a3f3a3;} #menu {width:auto;display:block;text-align:left;line-height:1.2;height:34px;} #menu ul {display:block;margin:0;padding:0;position:relative;width:auto;font-size:0;text-align:left;color:#EEE;stroke:#EEE;fill:#EEE;background-color:#333;border:transparent;list-style:none;z-index:999999990;border-radius: 3px;} #menu li {display:inline-block;position:relative;font-size:0;margin:0;padding:0;} #menu >ul>li>span, #menu >ul>li>a {font-size:12px;color:inherit;text-decoration:none;padding:10px 15px;font-weight:400;text-transform:uppercase;letter-spacing:2px;display:flex;position:relative;transition:all 0.3s;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;align-items: center;} #menu li:hover > span, #menu li:hover > a {color:#333;stroke:#333;fill:#333;background-color:#F3F3F3;} #menu .smenu {text-align:left;left:0;color: #333;fill:#333;stroke:#333;background-color:#F3F3F3;border:none;position:absolute;box-shadow: 0 4px 8px rgba(0,0,0,0.3);display:none;opacity:0;cursor:default;} #menu .smenu li {display: block;} #menu >ul>li>span.icon,#menu .smenu li > span.icon{ padding:6px } #menu .smenu li > span, #menu .smenu li > a {font-size:14px;font-weight:400;font-family:inherit;margin:0;padding:8px 20px; display:flex;color:inherit;text-decoration:none;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;align-items: center;} #menu .smenu li:hover > span, #menu .smenu li:hover > a{color:#333;background-color:#DDD;} #menu .smenu li > .smenu.right0 {left:auto;right:100%;} #menu li:hover > .smenu {display:block;opacity:1;z-index:1;} #menu .smenu li > .smenu {left:100%; right:auto;top:0;} #menu ul.smenu {min-width:240px;} #menu div.smenu {text-align:center;} #menu .arrow {color:inherit;border-style:solid; border-width:2px 2px 0 0; padding:4px; transform:rotate(135deg);margin-top:-8.5px;margin-left:4px;position:relative;display: inline-block;width: 0;height: 0;vertical-align:middle;overflow:hidden;} #menu .smenu .arrow {transform:rotate(45deg);top:50%;margin-top:-6px;position:absolute;left:auto;right:20px;} @keyframes topItemAnimation {from {opacity: 0; transform:translate3d(0, -60px, 0);} to {opacity: 1; transform:translate3d(0, 0, 0);}} #menu li a {animation:none;} #menu.active li a { animation: topItemAnimation 0.5s cubic-bezier(.16,.84,.44,1) 0.083s backwards;} #menu.active li:nth-of-type(1) a { animation: topItemAnimation 0.5s cubic-bezier(.16,.84,.44,1) 0.5s backwards;} #menu.active li:nth-of-type(2) a { animation: topItemAnimation 0.5s cubic-bezier(.16,.84,.44,1) 0.41s backwards;} #menu.active li:nth-of-type(3) a { animation: topItemAnimation 0.5s cubic-bezier(.16,.84,.44,1) 0.33s backwards;} #menu.active li:nth-of-type(4) a { animation: topItemAnimation 0.5s cubic-bezier(.16,.84,.44,1) 0.25s backwards;} #menu.active li:nth-of-type(5) a { animation: topItemAnimation 0.5s cubic-bezier(.16,.84,.44,1) 0.16s backwards;}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { #menu.active li a{animation:none!important;}} #menu li .switch label {top: -7px;} #data {position:absolute;bottom: 0px;left:0px;width: 100vw;height: 260px;} input.switch[type=checkbox]{height:0;width:0;visibility:hidden;} label.switch{cursor: pointer;text-indent: -9999px;width: 40px;height:20px;background:grey;display:block;border-radius:20px;position:relative;} label.switch:after {content:'';position:absolute;top:1px;left:1px;width:18px;height:18px;background:#fff;border-radius:18px;transition: 0.3s;} input.switch:checked + label {background: #bada55;} input.switch:checked + label:after {left: calc(100% - 1px);transform: translateX(-100%);} label.switch:active:after {width: 26px;} div .switch input[type=checkbox]{height:0;width:0;visibility:hidden;} div .switch label{cursor: pointer;text-indent: -9999px;width: 40px;height:20px;background:grey;display:block;border-radius:20px;position:relative;} div .switch label:after {content:'';position:absolute;top:1px;left:1px;width:18px;height:18px;background:#fff;border-radius:18px;transition: 0.3s;} div .switch input:checked + label {background: #bada55;} div .switch input:checked + label:after {left: calc(100% - 1px);transform: translateX(-100%);} div .switch label:active:after {width: 26px;} </style> <style> .iblize-light{color:#5c7a8a;background-color:#fff} .iblize-light .iblize_linenumber,.iblize-light .iblize_textarea,.iblize-light .iblize_pre {padding: 10px 15px} .iblize-light .iblize_linenumber {border-right: 1px solid rgba(92,122,138,.2)} .iblize-light .iblize_linenumber_child {opacity: .7} .iblize-light .iblize_textarea {caret-color: #228ec3} .iblize-light .iblize_textarea::selection {background-color: rgba(34,142,195,.2)} .iblize-light .token.punctuation,.iblize-light .token.attr-equals,.iblize-light .token.property {color: #5c7a8a} .iblize-light .token.comment,.iblize-light .token.prolog,.iblize-light .token.doctype,.iblize-light .token.cdata,.iblize-light .token.namespace {color:#5c7a8a;opacity: .5} .iblize-light .token.keyword {color: #ce3bce} .iblize-light .token.tag,.iblize-light .token.parameter,.iblize-light .token.interpolation,.iblize-light .token.selector,.iblize-light .token.deleted {color:#d5445c} .iblize-light .token.function,.iblize-light .token.operator,.iblize-light .token.entity,.iblize-light .token.url,.iblize-light .token.regex,.iblize-light .token.atrule,.iblize-light .token.class-name {color: #228ec3} .iblize-light .token.string,.iblize-light .token.char,.iblize-light .token.inserted,.iblize-light .token.builtin,.iblize-light .token.attr-value {color: #3c9f41} .iblize-light .token.attr-name,.iblize-light .token.number,.iblize-light .token.boolean,.iblize-light .token.important,.iblize-light .token.symbol,.iblize-light .token.constant {color: #c98218} .iblize-light .token.bold {font-weight: bold} .iblize-light .token.italic {font-style: italic} .iblize-light .token.entity {cursor: help} .iblize-light .language-css {color: #c98218} .iblize-dark {color: #a3b8c2;background-color: #222639} .iblize-dark .iblize_linenumber,.iblize-dark .iblize_textarea,.iblize-dark .iblize_pre {padding: 10px 15px} .iblize-dark .iblize_linenumber {border-right: 1px solid #363c59} .iblize-dark .iblize_linenumber_child {opacity: .5} .iblize-dark .iblize_textarea {caret-color: #52b1e0} .iblize-dark .iblize_textarea::selection {background-color: rgba(82,177,224,.2)} .iblize-dark .token.punctuation,.iblize-dark .token.attr-equals,.iblize-dark .token.property {color: #a3b8c2} .iblize-dark .token.comment,.iblize-dark .token.prolog,.iblize-dark .token.doctype,.iblize-dark .token.cdata,.iblize-dark .token.namespace {color: #a3b8c2;opacity: .5} .iblize-dark .token.keyword {color: #c6c} .iblize-dark .token.tag,.iblize-dark .token.parameter,.iblize-dark .token.interpolation,.iblize-dark .token.selector,.iblize-dark .token.deleted {color: #e05269} .iblize-dark .token.function,.iblize-dark .token.operator,.iblize-dark .token.entity,.iblize-dark .token.url,.iblize-dark .token.regex,.iblize-dark .token.atrule,.iblize-dark .token.class-name {color: #52b1e0} .iblize-dark .token.string,.iblize-dark .token.char,.iblize-dark .token.inserted,.iblize-dark .token.builtin,.iblize-dark .token.attr-value {color: #7ab87d} .iblize-dark .token.attr-name,.iblize-dark .token.number,.iblize-dark .token.boolean,.iblize-dark .token.important,.iblize-dark .token.symbol,.iblize-dark .token.constant {color: #e0a752} .iblize-dark .token.bold {font-weight: bold} .iblize-dark .token.italic {font-style: italic} .iblize-dark .token.entity {cursor: help} .iblize-dark .language-css {color: #e0a752} </style> <script> var autoset=true,doc; function dragElement(element,first,second){var md;function onMouseDown(e){md={e,offsetLeft:element.offsetLeft,offsetTop:element.offsetTop,firstWidth:first.offsetWidth,secondWidth: second.offsetWidth};document.onmousemove=onMouseMove;document.onmouseup=()=>{document.onmousemove=document.onmouseup=null;}}function onMouseMove(e){var delta = {x:e.clientX-md.e.clientX,y:e.clientY-md.e.clientY};delta.x=Math.min(Math.max(delta.x,-md.firstWidth),md.secondWidth);element.style.left=(md.offsetLeft+delta.x)+"px";first.style.width=(md.firstWidth+delta.x)+"px";second.style.width=(md.secondWidth-delta.x)+"px";}element.onmousedown=onMouseDown;} function main(){ doc = new Iblize("#editor",{language:"html",tabSize:4,theme:"iblize-light"}); doc.onUpdate((value) => {localStorage.setItem("document",value);if(autoset)setDoc(value);}); dragElement(document.getElementById("splitter"),document.getElementById("editor"),document.getElementById("viewer")); let data = localStorage.getItem("document")??""; setDoc(data); doc.setValue(data); } function setDoc(value){ let frame = document.querySelector("#viewer iframe"); URL.revokeObjectURL(frame.src); frame.src=URL.createObjectURL(new Blob([value],{type:"text/html"})); } function Load(){ let inp=document.createElement("input"),fileReader=new FileReader();inp.type="file";inp.onchange=function(){fileReader.readAsText(inp.files[0], "UTF-8");};fileReader.onload = function(fileLoadedEvent){doc.setValue(fileLoadedEvent.target.result);if(autoset)setDoc(fileLoadedEvent.target.result)};inp.click(); } function Save(){ let a = document.createElement("a");a.href=URL.createObjectURL(new Blob([doc.getValue()],{type:"text/html"}));a.download="document.html";a.click();URL.revokeObjectURL(a.href); } </script> </head> <body onload="main()"> <div id="menu"> <ul> <li><span>файл</span> <ul class="smenu"> <li><a href="javascript:Load()">Открыть</a></li> <li><a href="javascript:Save()">Сохранить</a></li> <li><a href="javascript:setDoc(doc.getValue())">Обновить</a></li> <li><span><label for="debug">Автообновление</label><input class="switch" id="debug" type="checkbox" checked onchange="autoset=this.checked"/><label class="switch" for="debug">Toggle</label></span></li> </ul> </li> <li><span>Настройка</span> <ul id="parser" class="smenu"> <li><a>Язык<i class="arrow"></i></a> <ul class="smenu" style="min-width: 80px;"> <li><a href="javascript:doc.setOptions({language:'html'})">HTML</a></li> <li><a href="javascript:doc.setOptions({language:'javascript'})">JavaScript</a></li> </ul> </li> <li><a>Таб<i class="arrow"></i></a> <ul class="smenu" style="min-width: 40px;"> <li><a href="javascript:doc.setOptions({tabSize:4})">4</a></li> <li><a href="javascript:doc.setOptions({tabSize:2})">2</a></li> </ul> </li> </ul> </li> </ul> </div> <div id="main"> <div id="editor"></div> <div id="splitter"></div> <div id="viewer"><iframe></iframe></div ></div> <script> !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Iblize=t()}(this,(function(){"use strict";function e(t){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(t)}function t(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function n(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function a(e,t,a){return t&&n(e.prototype,t),a&&n(e,a),e}function r(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var a,r,i=[],s=!0,l=!1;try{for(n=n.call(e);!(s=(a=n.next()).done)&&(i.push(a.value),!t||i.length!==t);s=!0);}catch(e){l=!0,r=e}finally{try{s||null==n.return||n.return()}finally{if(l)throw r}}return i}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return i(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return i(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,a=new Array(t);n<t;n++)a[n]=e[n];return a}var s="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},l={exports:{}};!function(e){var t=function(e){var t=/\blang(?:uage)?-([\w-]+)\b/i,n=0,a={},r={manual:e.Prism&&e.Prism.manual,disableWorkerMessageHandler:e.Prism&&e.Prism.disableWorkerMessageHandler,util:{encode:function e(t){return t instanceof i?new i(t.type,e(t.content),t.alias):Array.isArray(t)?t.map(e):t.replace(/&/g,"&").replace(/</g,"<").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++n}),e.__id},clone:function e(t,n){var a,i;switch(n=n||{},r.util.type(t)){case"Object":if(i=r.util.objId(t),n[i])return n[i];for(var s in a={},n[i]=a,t)t.hasOwnProperty(s)&&(a[s]=e(t[s],n));return a;case"Array":return i=r.util.objId(t),n[i]?n[i]:(a=[],n[i]=a,t.forEach((function(t,r){a[r]=e(t,n)})),a);default:return t}},getLanguage:function(e){for(;e&&!t.test(e.className);)e=e.parentElement;return e?(e.className.match(t)||[,"none"])[1].toLowerCase():"none"},currentScript:function(){if("undefined"==typeof document)return null;if("currentScript"in document)return document.currentScript;try{throw new Error}catch(a){var e=(/at [^(\r\n]*\((.*):[^:]+:[^:]+\)$/i.exec(a.stack)||[])[1];if(e){var t=document.getElementsByTagName("script");for(var n in t)if(t[n].src==e)return t[n]}return null}},isActive:function(e,t,n){for(var a="no-"+t;e;){var r=e.classList;if(r.contains(t))return!0;if(r.contains(a))return!1;e=e.parentElement}return!!n}},languages:{plain:a,plaintext:a,text:a,txt:a,extend:function(e,t){var n=r.util.clone(r.languages[e]);for(var a in t)n[a]=t[a];return n},insertBefore:function(e,t,n,a){var i=(a=a||r.languages)[e],s={};for(var l in i)if(i.hasOwnProperty(l)){if(l==t)for(var o in n)n.hasOwnProperty(o)&&(s[o]=n[o]);n.hasOwnProperty(l)||(s[l]=i[l])}var u=a[e];return a[e]=s,r.languages.DFS(r.languages,(function(t,n){n===u&&t!=e&&(this[t]=s)})),s},DFS:function e(t,n,a,i){i=i||{};var s=r.util.objId;for(var l in t)if(t.hasOwnProperty(l)){n.call(t,l,t[l],a||l);var o=t[l],u=r.util.type(o);"Object"!==u||i[s(o)]?"Array"!==u||i[s(o)]||(i[s(o)]=!0,e(o,n,l,i)):(i[s(o)]=!0,e(o,n,null,i))}}},plugins:{},highlightAll:function(e,t){r.highlightAllUnder(document,e,t)},highlightAllUnder:function(e,t,n){var a={callback:n,container:e,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};r.hooks.run("before-highlightall",a),a.elements=Array.prototype.slice.apply(a.container.querySelectorAll(a.selector)),r.hooks.run("before-all-elements-highlight",a);for(var i,s=0;i=a.elements[s++];)r.highlightElement(i,!0===t,a.callback)},highlightElement:function(n,a,i){var s=r.util.getLanguage(n),l=r.languages[s];n.className=n.className.replace(t,"").replace(/\s+/g," ")+" language-"+s;var o=n.parentElement;o&&"pre"===o.nodeName.toLowerCase()&&(o.className=o.className.replace(t,"").replace(/\s+/g," ")+" language-"+s);var u={element:n,language:s,grammar:l,code:n.textContent};function c(e){u.highlightedCode=e,r.hooks.run("before-insert",u),u.element.innerHTML=u.highlightedCode,r.hooks.run("after-highlight",u),r.hooks.run("complete",u),i&&i.call(u.element)}if(r.hooks.run("before-sanity-check",u),(o=u.element.parentElement)&&"pre"===o.nodeName.toLowerCase()&&!o.hasAttribute("tabindex")&&o.setAttribute("tabindex","0"),!u.code)return r.hooks.run("complete",u),void(i&&i.call(u.element));if(r.hooks.run("before-highlight",u),u.grammar)if(a&&e.Worker){var p=new Worker(r.filename);p.onmessage=function(e){c(e.data)},p.postMessage(JSON.stringify({language:u.language,code:u.code,immediateClose:!0}))}else c(r.highlight(u.code,u.grammar,u.language));else c(r.util.encode(u.code))},highlight:function(e,t,n){var a={code:e,grammar:t,language:n};return r.hooks.run("before-tokenize",a),a.tokens=r.tokenize(a.code,a.grammar),r.hooks.run("after-tokenize",a),i.stringify(r.util.encode(a.tokens),a.language)},tokenize:function(e,t){var n=t.rest;if(n){for(var a in n)t[a]=n[a];delete t.rest}var r=new o;return u(r,r.head,e),l(e,r,t,r.head,0),function(e){var t=[],n=e.head.next;for(;n!==e.tail;)t.push(n.value),n=n.next;return t}(r)},hooks:{all:{},add:function(e,t){var n=r.hooks.all;n[e]=n[e]||[],n[e].push(t)},run:function(e,t){var n=r.hooks.all[e];if(n&&n.length)for(var a,i=0;a=n[i++];)a(t)}},Token:i};function i(e,t,n,a){this.type=e,this.content=t,this.alias=n,this.length=0|(a||"").length}function s(e,t,n,a){e.lastIndex=t;var r=e.exec(n);if(r&&a&&r[1]){var i=r[1].length;r.index+=i,r[0]=r[0].slice(i)}return r}function l(e,t,n,a,o,p){for(var h in n)if(n.hasOwnProperty(h)&&n[h]){var d=n[h];d=Array.isArray(d)?d:[d];for(var g=0;g<d.length;++g){if(p&&p.cause==h+","+g)return;var f=d[g],m=f.inside,v=!!f.lookbehind,b=!!f.greedy,y=f.alias;if(b&&!f.pattern.global){var k=f.pattern.toString().match(/[imsuy]*$/)[0];f.pattern=RegExp(f.pattern.source,k+"g")}for(var x=f.pattern||f,w=a.next,A=o;w!==t.tail&&!(p&&A>=p.reach);A+=w.value.length,w=w.next){var F=w.value;if(t.length>e.length)return;if(!(F instanceof i)){var j,S=1;if(b){if(!(j=s(x,A,e,v)))break;var E=j.index,T=j.index+j[0].length,C=A;for(C+=w.value.length;E>=C;)C+=(w=w.next).value.length;if(A=C-=w.value.length,w.value instanceof i)continue;for(var z=w;z!==t.tail&&(C<T||"string"==typeof z.value);z=z.next)S++,C+=z.value.length;S--,F=e.slice(A,C),j.index-=A}else if(!(j=s(x,0,F,v)))continue;E=j.index;var L=j[0],$=F.slice(0,E),_=F.slice(E+L.length),O=A+F.length;p&&O>p.reach&&(p.reach=O);var N=w.prev;if($&&(N=u(t,N,$),A+=$.length),c(t,N,S),w=u(t,N,new i(h,m?r.tokenize(L,m):L,y,L)),_&&u(t,w,_),S>1){var P={cause:h+","+g,reach:O};l(e,t,n,w.prev,A,P),p&&P.reach>p.reach&&(p.reach=P.reach)}}}}}}function o(){var e={value:null,prev:null,next:null},t={value:null,prev:e,next:null};e.next=t,this.head=e,this.tail=t,this.length=0}function u(e,t,n){var a=t.next,r={value:n,prev:t,next:a};return t.next=r,a.prev=r,e.length++,r}function c(e,t,n){for(var a=t.next,r=0;r<n&&a!==e.tail;r++)a=a.next;t.next=a,a.prev=t,e.length-=r}if(e.Prism=r,i.stringify=function e(t,n){if("string"==typeof t)return t;if(Array.isArray(t)){var a="";return t.forEach((function(t){a+=e(t,n)})),a}var i={type:t.type,content:e(t.content,n),tag:"span",classes:["token",t.type],attributes:{},language:n},s=t.alias;s&&(Array.isArray(s)?Array.prototype.push.apply(i.classes,s):i.classes.push(s)),r.hooks.run("wrap",i);var l="";for(var o in i.attributes)l+=" "+o+'="'+(i.attributes[o]||"").replace(/"/g,""")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+l+">"+i.content+"</"+i.tag+">"},!e.document)return e.addEventListener?(r.disableWorkerMessageHandler||e.addEventListener("message",(function(t){var n=JSON.parse(t.data),a=n.language,i=n.code,s=n.immediateClose;e.postMessage(r.highlight(i,r.languages[a],a)),s&&e.close()}),!1),r):r;var p=r.util.currentScript();function h(){r.manual||r.highlightAll()}if(p&&(r.filename=p.src,p.hasAttribute("data-manual")&&(r.manual=!0)),!r.manual){var d=document.readyState;"loading"===d||"interactive"===d&&p&&p.defer?document.addEventListener("DOMContentLoaded",h):window.requestAnimationFrame?window.requestAnimationFrame(h):window.setTimeout(h,16)}return r}("undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{}); e.exports&&(e.exports=t),void 0!==s&&(s.Prism=t),t.languages.markup={comment:{pattern:/<!--(?:(?!<!--)[\s\S])*?-->/,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/<!DOCTYPE(? … [Строка слишком длинная. Вы можете скачать файл] </script> </body> </html>