관리-도구
편집 파일: 4.htmls
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>LiteDB Web Shell</title> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.min.css" /> <style> body { background-color: #2D2D30; } h1, h1 a { text-align: center; color: #FF9D10; font-family: monospace; } .shell { background-color: #2A211C; padding: 20px; color: white; border: 1px solid #3E3E42; border-top-width: 4px; font-family: monospace; font-size: 14px; height: 450px; width: 800px; overflow-y: auto; overflow-x: auto; position: absolute; top: 50%; left: 50%; margin: -250px 0 0 -400px; } .prompt { position: relative; padding-left: 15px; } .prompt:before { position: absolute; top: 0px; left: 0px; content: '>'; color: white; } .cursor { position: absolute; } .textbox { width: 100%; border: 0px; background-color: transparent; color: white; outline: none; font-family: monospace; font-size: 14px; } pre { margin: 5px 0px;} .welcome { color: #F6F080; } .result { color: cyan; } .error { color: #FF7D60; } .shell::-webkit-scrollbar { width: 8px; height: 8px; } .shell::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #686868; } .download { font-size: 12px; position: relative; top: -4px; text-decoration: none; } .download:hover { text-decoration: underline; } </style> </head> <body> <div class="github-fork-ribbon-wrapper right"> <div class="github-fork-ribbon"> <a href="https://github.com/mbdavid/litedb">Fork me on GitHub</a> </div> </div> <h1>LiteDB Web Shell <a class="download" href="https://github.com/mbdavid/LiteDB/releases" onclick="ga('send', 'event', 'download', 'clicked');">(Download offline version)</a> </h1> <div class="shell"> <div class="welcome"> Welcome to LiteDB Web Shell - Version 0.8<br /><br /> Getting started with `help`<br /><br /> </div> <div class="prompt"> <input type="textbox" class="textbox" autofocus spellcheck="false" /> </div> </div> <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script> var db = localStorage.getItem('db'); if (!db) { db = 'db_' + (new Date()).getTime(); localStorage.setItem('db', db); } var hist = []; var idx = 0; $('.shell').on('click', function () { $('.textbox').focus(); }); $('.textbox').on('keyup', function (e) { var $el = $(this); var $prompt = $el.parent(); var text = $el.val().trim(); if (e.keyCode == 13 && text.length > 0) { $prompt.before('<div class="prompt">' + text + '</div>'); $el.val('') $prompt.hide(); hist.push(text); idx = hist.length; $.post('api.ashx', { db: db, cmd: text }).done(function (result) { var css = /^ERROR:\s/.test(result) ? 'error' : 'result'; $prompt.before('<pre class="' + css + '">' + $('<div/>').text(result).html() + '</pre>'); $prompt.show(); $el.focus(); setTimeout(function () { var div = $('.shell').get(0); div.scrollTop = div.scrollHeight; }, 100); }); } else if (e.keyCode == 38) { idx = Math.max(0, idx - 1); $el.val(hist[idx]); } else if (e.keyCode == 40) { idx = Math.min(hist.length - 1, idx + 1); $el.val(hist[idx]); } }); </script> <script> (function (i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); ga('create', 'UA-54329029-2', 'auto'); ga('send', 'pageview'); </script> </body> </html>