rexinsrexinsrex, Client Side

Language: Layout:

<!DOCTYPE html>

<html>
    <head>
        <style>
            *:not(#run):not(#lang):not(#code) {color:white;}
            
            #code {
                width: 90%;
                height: 200px;
                resize: vertical;
            }
            
            #phrase {
                font-size: 30px;
            }
            
            #lang {
                width: 80%;
            }
            
            #input {
                width: 85%;
                height: 18px;
            }
            
            #codephrase {
                text-align:center;
                margin-bottom:0px;
                width: 100%;
            }
            
            *:not(#code) {font-family: Comic Sans MS;}
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
        function run() {
                var to_compile = {
                    "LanguageChoice": $("#lang").val() + 1,
                    "Program": $("#code").val(),
                    "Input": "",
                    "CompilerArgs" : ""
                };
            
                $.ajax ({
			        url: "https://rextester.com/rundotnet/api",
			        type: "POST",
			        data: to_compile
			    }).done(function(data) {
                    alert(JSON.stringify(data));
			    }).fail(function(data, err) {
		        });
            }
        </script>
    </head>
    
    <body style="background-color:grey;">
        <div align="center"> 
            <div style="width:400px;">
            <span id="phrase">Rextester inside Rextester</span>
            <div align="right">with Comic Sans</div></div>
 
            <textarea id="code"></textarea>
            <textarea id="input"></textarea>
            <select id="lang">
                <option value="0">Choose a language</option>
            </select>
            
            <script>
                function addlangs() {
                    output = "";
                    // language list
                    names = [
                                "C#", "VB.NET", "F#", "Java", "Python (version 2)", "C (compiled with GCC)",
                                "C++ (compiled with GCC)", "PHP", "Pascal", "Objective-C",
                                "Haskell", "Ruby", "Perl", "Lua", "Assembly (assembled with NASM)",
                                "SQL Server", "Javascript", "List", "Prolog", "Go", "Scala",
                                "Scheme", "Node.JS", "Python (version 3)", "Octave", "C (compiled with Clang)",
                                "C++ (compiled with Clang)", "C++ (compiled with VC++)",
                                "C (compiled with VC)]", "D", "R", "TCL", "MySQL", "PostgreSQL",
                                "Oracle", "", "Swift", "Bash", "Ada", "Erlang", "Elixir", "Ocaml",
                                "Kotlin", "Brainfuck", "Fortran", "Rust", "Clojure"
                                 ]
                    for (i = 0; i < names.length; i++) {
                        if(names[i] != "") {
                            output += '<option value="' + (i + 1) + '">' + names[i] + "</option>"
                        }
                    }
                    console.log(output)
                    document.getElementById("lang").innerHTML = output
                }
                addlangs()
            </script>
            
            <button id="run" onclick="run()">
                Run
            </button>
        </div>
        <hr>
        <h2 id="codephrase">
            Output
        </h2>
        <hr>
        <div class="out
                    "></div>
        <h2 id="codephrase">
            Warnings
        </h2>
        <hr>
        <div class="warns
                    "></div>
        <h2 id="codephrase">
            Errors
        </h2>
        <hr>
        <div class="errors
                    "></div>
        <h2 id="codephrase">
            Stats
        </h2>
        <hr>
        <div class="info
                    "></div>
    </body>
</html>