JScrewIt.html

﻿<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<base target='_top'>
<link rel='apple-touch-icon' href='html/screw.svg'>
<link rel='author' href='https://github.com/fasttime'>
<link rel='icon' href='html/favicon.ico'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='description' content='Write any JavaScript with six characters: ! ( ) + [ ]'>
<meta name='viewport' content='width=device-width'>
<script src='lib/jscrewit.min.js'></script>
<script src='html/ui.js'></script>
<style>

* { box-sizing: border-box; }

.actions { display: block; margin: .25em 0 0; position: relative; }

.frame
{
    background: #e0e0e0;
    border-radius: .4em;
    display: block;
    margin: .75em 0;
    padding: .4em;
}

.frame>*:first-child
{
    cursor: default; /* Otherwise Internet Explorer would show an I-beam. */
    display: inline-block;
    font-weight: bold;
    margin-bottom: .25em;
}

#compMenu { width: 15em; }

#controls>*:not(:last-child) { margin-right: 1em; }

#main { margin: 0 auto; max-width: 720px; text-align: justify; }

#main>div { display: none; }

#main header { height: 100px; position: relative; width: 100%; }

#main h1 { font-size: 2em; font-weight: normal; left: 115px; position: absolute; top: 40px; }

#main img { background: blue; }

#main textarea { display: block; font: 12pt monospace; resize: vertical; width: 100%; }

#outputArea { white-space: pre; word-break: break-all; }

:focus.focusable, :focus>.focusable { box-shadow: 0 0 2px 2px rgba(0, 127, 255, .75); }

@-moz-document url-prefix() { #outputArea { white-space: pre-wrap; } } /* Hack for Firefox */

/* Hack for Chrome and Opera */
@media screen and (min-resolution: 1e-323dpcm) { #outputArea { white-space: normal; } }

[tabindex] { outline: none; }

body { background: white; color: black; font-family: Arial, sans-serif; }

body, select { font-size: 13.5pt; }

</style>
<title>JScrewIt – Write any JavaScript with six characters: ! ( ) + [ ]</title>

<body>
<div id='main'>
    <header>
        <h1>JScrewIt</h1>
        <img alt src='html/screw.svg' width='100' height='100'>
    </header>

    <p>JScrewIt converts plain JavaScript into JSFuck code, which consists of only six different
    characters: <code>!</code> <code>(</code> <code>)</code> <code>+</code> <code>[</code>
    <code>]</code>

    <div>
        <p>Use the form below to encode your script. To encode a number or plain string, type it in
        as you would in JavaScript, e.g. <kbd>6.67408e-11</kbd> or <kbd>"Hello, World!"</kbd>.

        <div>
            <label class='frame'>
                <span>Input</span>
                <textarea id='inputArea' rows='3' spellcheck='false'>alert(1)</textarea>
            </label>

            <div>
                <div id='controls'>
                    <label>Compatibility:
                        <select id='compMenu'>
                            <option value='DEFAULT'>All supported environments (maximum
                            compatibility)
                            <option value='BROWSER'>All supported browsers
                            <option value='COMPACT'>All new browsers (Chrome, Edge, Firefox, Safari
                            and Opera)
                            <option value='AUTO'>Only this browser
                            <option value=''>Custom…
                        </select>
                    </label>
                </div>
            </div>

            <label class='frame'>
                <span>Output</span>
                <textarea id='outputArea' rows='10' spellcheck='false'></textarea>
                <span class='actions'>
                    <span id='stats'>…</span>
                </span>
            </label>
        </div>
    </div>

    <noscript>
        <p>You must enable JavaScript to use JScrewIt.
    </noscript>
</div>