Magic-Mirror/js-beautify
1
0
Fork 0
mirror of https://github.com/beautifier/js-beautify.git synced 2024-11-23 12:49:40 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Redesigned the front facing beautifier.io website to be much cleaner looking with responsive design that can now work on mobile devices

Browse Source
This commit is contained in:
Hammad 2022-04-11 23:45:50 -02:30
parent ed2e08d452
commit f2ab338b05
2 changed files with 301 additions and 266 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
index.html
View File

@ -34,7 +34,6 @@
<!-- if you feel an urge to move this to bootstrap or something, you're most welcome -->
<title>Online JavaScript beautifier</title>
<link rel="icon" href="web/favicon.png" type="image/png">
<link rel="stylesheet" href="web/common-style.css">
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default&flags=gated"></script>
@ -63,12 +62,15 @@
<script src="js/lib/unpackers/p_a_c_k_e_r_unpacker.js"></script>
<script src="js/lib/unpackers/myobfuscate_unpacker.js"></script>
<script src="web/common-function.js"></script>
<link rel="stylesheet" href="web/common-style.css">
</head>
<body>
<h1><img alt="js-beautify" src="web/banner-light.svg" height="54px" /> <span id="version-number"></span></h1>
<div>
<div class="col-6">
<body class="container">
<div class="title">
<h1 class="logo"><img alt="js-beautify" src="web/banner-light.svg" height="54px" /> <span id="version-number"></span></h1>
<div class="sub-title">
<p>
<a class="self" href="./">Beautify, unpack or deobfuscate JavaScript and HTML, make JSON/JSONP readable, etc.</a>
</p>
@ -76,18 +78,22 @@
All of the source code is completely free and open, available on <a href="https://github.com/beautify-web/js-beautify">GitHub</a> under MIT licence,
<br>and we have a command-line version, <a href="https://pypi.org/project/jsbeautifier/">python library</a> and a <a href="https://npmjs.org/package/js-beautify">node package</a> as well.
</p>
<p>
</div>
</div>
<div class="options">
<h1>Options</h1>
<select name="language" id="language">
<option value="css">Beautify CSS</option>
<option value="html">Beautify HTML</option>
<option value="js">Beautify JavaScript</option>
</select>
</p>
</div>
<div class="col-6">
<table id="options">
<tr>
<td>
<h2>Config Options</h2>
<div class="config-options">
<div id="options">
<div class="options-select">
<select name="tabsize" id="tabsize">
<option value="1">Indent with a tab character</option>
<option value="2">Indent with 2 spaces</option>
@ -95,8 +101,6 @@
<option value="4">Indent with 4 spaces</option>
<option value="8">Indent with 8 spaces</option>
</select>
<br>
<select name="max-preserve-newlines" id="max-preserve-newlines">
<option value="-1">Remove all extra newlines</option>
<option value="1">Allow 1 newline between tokens</option>
@ -105,8 +109,6 @@
<option value="10">Allow 10 newlines between tokens</option>
<option value="0">Allow unlimited newlines between tokens</option>
</select>
<br>
<select name="wrap-line-length" id="wrap-line-length">
<option value="0">Do not wrap lines</option>
<option value="40">Wrap lines near 40 characters</option>
@ -116,29 +118,23 @@
<option value="120">Wrap lines near 120 characters</option>
<option value="160">Wrap lines near 160 characters</option>
</select>
<br>
<select id="brace-style">
<option value="collapse">Braces with control statement</option>
<option value="expand">Braces on own line</option>
<option value="end-expand">End braces on own line</option>
<option value="none">Attempt to keep braces where they are</option>
</select>
<div>
<p style="margin:6px 0 0 0">HTML &lt;style&gt;, &lt;script&gt; formatting:</p>
<select id="indent-scripts">
<option value="keep">Keep indent level of the tag</option>
<option value="normal">Add one indent level</option>
<option value="separate">Separate indentation</option>
</select>
</div>
</div>
<p style="margin:6px 0 0 0">Additional Settings (JSON):</p>
<textarea id="additional-options" rows="5" cols="32">{}</textarea>
<p id="additional-options-error" hidden style="margin:6px 0 0 0; color:red ">Could Not Parse JSON!</p>
</td>
<td>
<div class="options-checkboxes">
<input class="checkbox" type="checkbox" id="end-with-newline">
<label for="end-with-newline">End script and style with newline?</label>
<br>
@ -175,37 +171,48 @@
<input class="checkbox" type="checkbox" id="indent-empty-lines">
<label for="indent-empty-lines">Keep indentation on empty lines?</label>
<br><a href="?without-codemirror" class="turn-off-codemirror">Use a simple textarea for code input?</a>
</td>
</tr>
</table>
</div>
</div>
<div>
<div style="text-align: center;">
<button class="submit"><strong>Beautify Code</strong> <em>(ctrl-enter)</em></button>
<input type="file" onchange="changeToFileContent(this)">
<button class="control" type="button" onclick="copyText()"><strong>Copy to Clipboard</strong></button>
<button class="control" type="button" onclick="selectAll()"><strong>Select All</strong></button>
<button class="control" type="button" onclick="clearAll()"><strong>Clear</strong></button>
<p style="margin:6px 0 0 0">Additional Settings (JSON):</p>
<textarea id="additional-options" rows="5" style="width: 100%">{}</textarea>
</div>
<textarea id="source" rows="30" cols="160"></textarea>
<div style="text-align: center;">
<button class="submit"><strong>Beautify Code</strong> <em>(ctrl-enter)</em></button>
<input type="file" onchange="changeToFileContent(this)">
<button class="control" type="button" onclick="copyText()"><strong>Copy to Clipboard</strong></button>
<button class="control" type="button" onclick="selectAll()"><strong>Select All</strong></button>
<button class="control" type="button" onclick="clearAll()"><strong>Clear</strong></button>
</div>
</div>
<p id="additional-options-error" hidden style="margin:6px 0 0 0; color:red ">Could Not Parse JSON!</p>
<p style="margin:6px 0 0 0">Your Selected Options (JSON):</p>
<div>
<textarea readonly id="options-selected" rows="10" cols="40"></textarea>
<textarea readonly id="options-selected" rows="5" style="width: 100%"></textarea>
</div>
</div>
</div>
<div class="buttons-box">
<button class="control" type="button" onclick="copyText()"><strong>Copy to Clipboard</strong></button>
<button class="control" type="button" onclick="selectAll()"><strong>Select All</strong></button>
<button class="control" type="button" onclick="clearAll()"><strong>Clear</strong></button>
<input type="file" onchange="changeToFileContent(this)">
<button class="submit"><strong>Beautify Code</strong> <em>(ctrl-enter)</em></button>
</div>
<div class="contributions">
<p class="contributor-sep">Written by <a href="https://github.com/einars">Einar Lielmanis</a>, maintained and evolved by <a href="https://github.com/bitwiseman/">Liam Newman</a>.</p>
<p>We use the wonderful <a href="http://codemirror.net">CodeMirror</a> syntax highlighting editor, written by Marijn Haverbeke.</p>
<p class="contributors">Made with a great help of Jason&nbsp;Diamond, Patrick&nbsp;Hof, Nochum&nbsp;Sossonko, Andreas&nbsp;Schneider,
<br>Dave&nbsp;Vasilevsky,
<a href="https://moikrug.ru/vital">Vital&nbsp;Batmanov</a>, Ron&nbsp;Baldwin, Gabriel&nbsp;Harrison,
<a href="http://shullian.com">Chris J. Shull</a>,
<a href="http://mathiasbynens.be/">Mathias Bynens</a>,
<br>
<a href="https://www.vittgam.net/">Vittorio Gambaletta</a>,
<a href="https://github.com/esseks">Stefano Sanfilippo</a> and
<a href="https://github.com/evocateur">Daniel Stockman</a>.
</p>
</div>
</div>
<div class="editor">
<textarea id="source"></textarea>
</div>
<div class="hide">
<p id="open-issue" hidden>Not pretty enough for you?
<button type="button" onclick="submitIssue()" name="issue-button">Report a problem with this input</button>
@ -278,30 +285,14 @@
</div>
<p>Doing anything interesting? Write us to <b>team@beautifier.io</b> so we can add your project to the list.</p>
<p class="contributor-sep">Written by <a href="https://github.com/einars">Einar Lielmanis</a>, maintained and evolved by <a href="https://github.com/bitwiseman/">Liam Newman</a>.</p>
<p>We use the wonderful <a href="http://codemirror.net">CodeMirror</a> syntax highlighting editor, written by Marijn Haverbeke.
</p>
<p class="contributors">Made with a great help of Jason&nbsp;Diamond, Patrick&nbsp;Hof, Nochum&nbsp;Sossonko, Andreas&nbsp;Schneider,
<br>Dave&nbsp;Vasilevsky,
<a href="https://moikrug.ru/vital">Vital&nbsp;Batmanov</a>, Ron&nbsp;Baldwin, Gabriel&nbsp;Harrison,
<a href="http://shullian.com">Chris J. Shull</a>,
<a href="http://mathiasbynens.be/">Mathias Bynens</a>,
<br>
<a href="https://www.vittgam.net/">Vittorio Gambaletta</a>,
<a href="https://github.com/esseks">Stefano Sanfilippo</a> and
<a href="https://github.com/evocateur">Daniel Stockman</a>.
</p>
<p style="text-align:right">
<a href="#" style="color: #ccc; border-bottom: 1px dashed #ccc; text-decoration: none;" onclick="run_tests(); return false;">Run the tests</a>
</p>
</div>
<div id="testresults"></div>
<script src="web/onload.js">
</script>
<script src="web/google-analytics.js">
</script>
</div>
</div>
<script src="web/onload.js"></script>
<script src="web/google-analytics.js"></script>
</body>
</html>

172
web/common-style.css
View File

@ -1,10 +1,8 @@
body {
background: #eee;
color: #333;
}
img {
border: 0;
height: 95vh;
font: 13px/1.231 arial, sans-serif;
}
a.self {
@ -14,59 +12,40 @@ a.self {
border-bottom: 1px solid #aaa
}
h1 {
h1.logo {
display: flex;
margin-bottom: 0;
line-height: 1em;
margin: 0;
}
h1 img {
font-family: montserrat, nexa, gotham, sans-serif;
font-weight: 600;
margin-left: 40px;
}
p, select, label, .blurb, a.turn-off-codemirror {
font: 13px/1.231 arial, sans-serif;
font-size: small;
}
.sub-title {
margin-bottom: 30px;
}
.title {
margin-left: 40px;
}
textarea#source {
width: 100%;
height: 100%;
}
a.turn-off-codemirror {
margin-left: 25px;
}
button.submit {
input[type="checkbox"], select, button {
cursor: pointer;
margin: 0;
}
button.submit em {
font-size: 11px;
font-style: normal;
color: #999;
}
button.control {
cursor: pointer;
margin: 0;
}
label {
cursor: pointer;
}
select {
width: 220px;
}
table#options td {
vertical-align: top;
padding-left: 10px;
}
.col-6 {
width: 50%;
float: left;
}
#version-number {
@ -76,15 +55,6 @@ table#options td {
margin-left: 10px;
}
.uses li {
padding-top: 3px;
line-height: 150%;
}
.uses li.sep {
margin-top: 8px;
}
#testresults {
display: none;
font-family: monaco, consolas, "lucida console", "courier new", monospace;
@ -92,32 +62,106 @@ table#options td {
.CodeMirror {
border: 1px solid #ccc;
height: 450px;
height: 100%;
font-size: 90%;
margin-bottom: 6px;
background: white;
}
p {
margin-left: 40px;
margin-right: 40px;
.hide {
display: none;
}
a {
white-space: nowrap;
color: #36d;
.container {
display: grid;
grid-template-columns: 1.6fr 0.9fr;
grid-template-rows: 0.2fr 1.8fr;
gap: 0 14px;
grid-auto-flow: row;
grid-template-areas:
"title options"
"editor options";
}
.contributor-sep {
clear: left;
border-top: 1px solid #ccc;
padding-top: 8px;
.title {
grid-area: title;
}
h2 {
margin-top: 32px;
margin-left: 40px;
margin-bottom: 0;
.editor {
grid-area: editor;
}
.options {
grid-area: options;
}
select, .buttons-box button {
background-color: white;
border: 1px solid #ccc;
border-radius: 4px;
line-height: 1.5em;
padding: 0.5em;
margin: 0 0 5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
select {
display: block;
}
.options-checkboxes, .options-select {
display: inline-table;
}
#language {
font-size: 20px;
font-weight: normal;
width: 100%;
padding-left: 16px;
font-weight: 800;
margin-bottom: 10px;
}
.buttons-box {
margin-top: 20px;
}
.buttons-box .submit {
margin-top: 10px;
margin-bottom: 10px;
display: block;
font-size: 1.5em;
width: 100%;
background-color: #7cffcb;
background-image: linear-gradient(315deg, #7cffcb 0%, #74f2ce 74%);
}
.buttons-box .control {
background-color: #2e3138;
color: white;
display: inline-flex;
}
@media only screen and (max-width: 600px) {
.container {
grid-template-areas:
"title"
"editor"
"options";
grid-template-rows: 0.1fr 1.8fr 0.1fr;
width: 100vw;
}
.title {
margin-left: 10px;
}
.editor, .title, .options {
width: 95vw;
}
.CodeMirror {
height: 50vh;
}
}