<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Parse Code</title>
<meta content='width=device-width, initial-scale=1' name='viewport'>
<link href='https://fonts.googleapis.com/css?family=Roboto:100,200,300,400italic,400,500,500italic,700,700italic,900' rel='stylesheet' type='text/css'/>
<style>
body {
background-color:white;
margin:0;
padding:0;
color:#212121;font-family:Roboto,Arial,sans-serif;
}
a{text-decoration:none;color:#e8554e;font-weight:700}
::selection{background:#e8554e;color:#fff}
.checkbox{font:11px Tahoma,Verdana,Arial,Sans-Serif;line-height:1.6em;color:#eee;display:none}
#codes{border:1px solid #ddd;width:100%;height:150px;display:block;background-color:#efefef;border-radius:3px;font:400 12px 'Courier New',Monospace;margin:0 0 10px;padding:5px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
#codes:active,#codes:focus{background-color:#fff;color:#000;border:1px solid #ccc;outline:0}
.button-group{float:left;text-align:left;margin:-3px auto 0}
button{cursor:pointer}
.button-group span{font-family:Roboto,Arial,sans-serif;font-size:12px;vertical-align:2px;line-height:1;vertical-align:-1px;color:#555;display:inline;}
#opt1,#opt2,#opt3,#opt4,#opt5,#opt6{display:inline-block;vertical-align:middle;border:none;outline:0;margin:0 10px 0 0}
.btn,.btn:active{background-image:none}
.btn,.parser{font-weight:400;padding:6px 12px;margin-bottom:5px;font-size:14px;line-height:1.42857143;text-align:center;white-space:nowrap;-ms-touch-action:manipulation;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;border-radius:4px}
.btn:active:focus,.btn:focus,.parser:active:focus,.parser:focus{outline:0}
.btn:focus,.btn:hover,.parser:focus,.parser:hover{color:#333;text-decoration:none;outline:0}
.btn:active,.parser:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
.btn-primary,.parser{color:#fff!important;background-color:#337ab7;border-color:#2e6da4}
.btn-primary:focus,.button-group button:disabled,.parser:focus{color:#fff;background-color:#286090;border-color:#122b40}
.btn-primary:active,.btn-primary:hover,.parser:active,.parser:hover{color:#fff;background-color:#286090;border-color:#204d74}
.btn-danger{color:#fff!important;background-color:#d9534f;border-color:#d43f3a}
.btn-danger:focus{color:#fff;background-color:#c9302c;border-color:#761c19}
.btn-danger:active,.btn-danger:hover{color:#fff;background-color:#c9302c;border-color:#ac2925}
.btn-info{color:#fff!important;background-color:#5bc0de;border-color:#46b8da}
.btn-info:focus{color:#fff;background-color:#31b0d5;border-color:#1b6d85}
.btn-info:active,.btn-info:hover{color:#fff;background-color:#31b0d5;border-color:#269abc}
.btn-xs{font-size:12px;line-height:1.5;border-radius:3px;padding:1px 5px}
.clear{clear:both;display:block}
.collapse{display:none}
#parser{position:relative;display:none;-webkit-animation:slide-down .3s ease-out;-moz-animation:slide-down .3s ease-out;}
.alert-success{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}
.alert{padding:15px;border:1px solid transparent;border-radius:4px;position:absolute;top:10px;right:10px;min-width:230px}
button.close{padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;line-height:1}
.close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}
button.close:focus{outline:0}
.close:hover{opacity:1!important}
#btnInfo h4{margin:0}
#button-link,.parsebox #hide-parse{display:none}
.parsebox{margin:50px 30%}
.parse-box{overflow:hidden;}
.parsebox #show-parse,.parsebox #hide-parse{cursor:pointer}
.parsebox #show-parse{display:inline-block}
@-webkit-keyframes slide-down{0%{opacity:0;-webkit-transform:translateY(-100%)}
100%{opacity:1;-webkit-transform:translateY(0)}
}
@-moz-keyframes slide-down{0%{opacity:0;-moz-transform:translateY(-100%)}
100%{opacity:1;-moz-transform:translateY(0)}
}
</style>
</head>
<body>
<div class='parsebox'>
<span class='btn btn-primary btn-xs' id='show-parse' onclick='showParser();'>Show Parse Tool</span>
<span class='btn btn-primary btn-xs' id='hide-parse' onclick='hideParser();'>Hide Parse Tool</span>
<div class='parse-box'>
<div id='parser'>
<textarea id='codes' placeholder='Tulis/paste kode di sini lalu klik tombol Convert Codes.
Tulis/paste URL image di sini lalu klik tombol Convert Image.' spellcheck='false'></textarea>
<div class='alert alert-success margin-bottom-20 collapse' id='btnInfo' role='alert'>
<button class='close close-copy' onclick='document.getElementById("btnInfo").style.display = "none";cdClear();' type='button'><span aria-hidden='true'>×</span></button>
<h4>Codes copied to clipboard!</h4>
</div>
<span class='button-group'>
<button class='btn btn-primary btn-xs' id='cvrt1' onclick='cdConvert();this.disabled = true;'>Convert Codes</button>
<button class='btn btn-primary btn-xs' id='cvrt2' onclick='imgConvert();this.disabled = true;'>Convert Image</button><br/>
<button class='btn button-link btn-xs btn-info' id='button-link' data-clipboard-action='copy' data-clipboard-target='#codes' type='submit'>Copy codes to clipboard!</button> <button class='btn btn-danger btn-xs' onclick='cdClear();'>Bersihkan</button>
</span>
<span class='checkbox'>
<input checked='' id='opt1' type='checkbox'/>
<input id='opt2' type='checkbox'/>
<input id='opt3' type='checkbox'/>
<input checked='' id='opt4' type='checkbox'/>
<input checked='' id='opt5' type='checkbox'/>
<input checked='' id='opt6' type='checkbox'/>
</span>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
</div>
<script>
//<![CDATA[
function cdClear() {
var wtarea = document.getElementById('codes');
wtarea.value = '';
wtarea.focus();
var clears = document.querySelectorAll('#cvrt1, #cvrt2')
for (var i = 0; i < clears.length; i++)
{
clears[i].disabled = false,document.getElementById("btnInfo")
.style.display = "none",document.getElementById("button-link")
.style.display = "none"
}
}
function cdConvert() {
var ctarea = document.getElementById('codes'),
cv = ctarea.value,
opt1 = document.getElementById('opt1'),
opt2 = document.getElementById('opt2'),
opt3 = document.getElementById('opt3'),
opt4 = document.getElementById('opt4'),
opt5 = document.getElementById('opt5');
cv = cv.replace(/\t/g, " ");
if (opt1.checked) cv = cv.replace(/&/g, "&");
if (opt2.checked) cv = cv.replace(/'/g, "'");
if (opt3.checked) cv = cv.replace(/"/g, """);
if (opt4.checked) cv = cv.replace(/</g, "<");
if (opt5.checked) cv = cv.replace(/>/g, ">");
if (cv.lastIndexOf('\n') != -1 || cv.length > 40) {
cv = cv.replace(/^/, "<i rel=\"pre\">");
} else {
cv = cv.replace(/^/, "<i rel=\"code\">");
}
cv = cv.replace(/$/, "</i>");
ctarea.value = cv;
ctarea.focus();
document.getElementById("button-link")
.style.display = "inline-block";
};
function imgConvert() {
var ctarea = document.getElementById('codes'),
cv = ctarea.value,
opt6 = document.getElementById('opt6');
cv = cv.replace(/\t/g, " ");
if (opt6.checked){ cv = cv.replace(/^/, "<i rel=\"image\">");
cv = cv.replace(/$/, "</i>");
}
ctarea.value = cv;
ctarea.focus();
document.getElementById("button-link").style.display = "inline-block";
};
function showParser(){
document.getElementById("parser").style.display = "block";
document.getElementById("show-parse").style.display = "none";
document.getElementById("hide-parse").style.display = "inline-block";
}
function hideParser(){
document.getElementById("parser").style.display = "none";
document.getElementById("show-parse").style.display = "inline-block";
document.getElementById("hide-parse").style.display = "none";
}
function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.rawgit.com/KompiAjaib/kompi-js/eee82c58/clipboardjs_threadedcomments.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
</body>
</html>