Close window by hitting red button

3 files changed, 301 insertions, 296 deletions

diff --git a/static/css/window.css b/static/css/window.css
index 3f3b7f56..5ca34d1e 100644
--- a/static/css/window.css
+++ b/static/css/window.css
@@ -1,262 +1,262 @@
-        .window {
-            -webkit-border-radius: 4px;
-            -moz-border-radius: 4px;
-            border-radius: 4px;
-            -moz-box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
-            -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
-            box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
-            width: 800px;
-            margin: auto;
-            margin-top: 20px;
-            border: 1px solid #C1C2C2;
-            height: 500px;
-            padding-bottom: 20px;
-        }
-
-        .inside {
-            background: black;
-            padding-right: 20px;
-            height: 100%;
-        }
-
-        .inside .blok {
-            width: 100%;
-            background: black;
-        }
-
-        .top {
-            padding: 7px 0;
-            position: relative;
-            background: #f1f1f1;
-            background: -moz-linear-gradient(top, #E9E9E9 3%, #d8d8d8 100%);
-            background: -webkit-gradient(left top, left bottom, color-stop(3%, #E9E9E9), color-stop(100%, #d8d8d8));
-            background: -webkit-linear-gradient(top, #E9E9E9 3%, #d8d8d8 100%);
-            background: -o-linear-gradient(top, #E9E9E9 3%, #d8d8d8 100%);
-            background: -ms-linear-gradient(top, #E9E9E9 3%, #d8d8d8 100%);
-            background: linear-gradient(to bottom, #E9E9E9 3%, #d8d8d8 100%);
-            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1', endColorstr='#d8d8d8', GradientType=0);
-
-            -webkit-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.76);
-            -moz-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.76);
-            box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.76);
-
-            overflow: hidden;
-            border-bottom: 2px solid #BDBCC1;
-        }
-
-        .top > div {
-            float: left;
-        }
-
-        .panel {
-            padding-left: 9px;
-            padding-top: 2px;
-        }
-
-        .panel > span {
-            display: inline-block;
-            float: left;
-            width: 12px;
-            height: 12px;
-            margin-right: 7px;
-            -webkit-border-radius: 6px;
-            -moz-border-radius: 6px;
-            border-radius: 6px;
-            cursor: pointer;
-
-        }
-
-        .panel span.first {
-            background: #FF5F4F;
-        }
-
-        .panel span.second {
-            background: #F9C206;
-        }
-
-        .panel span.third {
-            background: #19CC32;
-        }
-
-        .nav {
-            overflow: hidden;
-        }
-
-        .nav > span {
-            display: inline-block;
-            float: left;
-            background: #FBFBFB;
-            -webkit-border-radius: 4px;
-            -moz-border-radius: 4px;
-            border-radius: 4px;
-            height: 23px;
-            padding: 0 8px;
-            cursor: pointer;
-            color: #B4B4B4;
-            border-bottom: 1px solid #CECECE;
-        }
-
-        .nav > span:hover {
-            background: #f2f2f2;
-            color: #666;
-        }
-
-        .nav > span i.fa {
-            font-size: 23px;
-        }
-
-        .nav span.active {
-            color: #707070;
-        }
-
-        .nav span.prev {
-            margin-right: 1px;
-            margin-left: 7px;
-        }
-
-        .nav span.next {
-            margin-right: 7px;
-        }
-
-        .nav span.set i {
-            font-size: 14px;
-            position: relative;
-            top: 3px;
-        }
-
-        .nav span.address {
-            width: 400px;
-            margin-left: 75px;
-            display: inline-block;
-            background: #fff;
-            line-height: 23px;
-            padding: 0;
-            text-align: center;
-            position: relative;
-        }
-
-        .nav span.address > input {
-            font-size: 12px;
-            color: #505050;
-            border: none;
-            background: none;
-            text-align: center;
-            position: relative;
-            width: 300px;
-        }
-
-        .nav span.address > input:focus {
-            outline: none;
-        }
-
-        .nav span.address > input.class {
-            text-align: left;
-        }
-
-        .nav span.address > i.fa {
-            position: absolute;
-            right: 5px;
-            top: 7px;
-            font-size: 11px;
-            color: #010101;
-        }
-
-        .nav.right {
-            float: right !important;
-            margin-right: 35px;
-        }
-
-        .nav span.share {
-            margin-right: 7px;
-        }
-
-        .nav span.share > i.fa {
-            font-size: 11px;
-            position: relative;
-            top: 2px;
-        }
-
-        .nav span.tabs {
-            position: relative;
-            width: 26px;
-            padding: 0;
-        }
-
-        .nav span.tabs span {
-            height: 7px;
-            width: 7px;
-            border: 1px solid #B4B4B4;
-            display: inline-block;
-            position: absolute;
-            background: #FBFBFB;
-        }
-
-        .nav span.tabs span.front {
-            top: 8px;
-            left: 6px;
-            z-index: 6;
-        }
-
-        .nav span.tabs span.behind {
-            top: 6px;
-            left: 8px;
-            z-index: 5;
-        }
-
-        .nav span.tabs:hover span {
-            border: 1px solid #666;
-        }
-
-        span.new {
-            cursor: pointer;
-            position: absolute;
-            right: 0;
-            bottom: 0;
-            background: #CACACA;
-            width: 23px;
-            height: 23px;
-            text-align: center;
-            line-height: 23px;
-            border-top: 1px solid #C1C2C2;
-            border-left: 1px solid #C1C2C2;
-        }
-
-        span.new:hover {
-            -webkit-box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
-            -moz-box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
-            box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
-        }
-
-        span.new .plus {
-            position: absolute;
-            background: #b0b0b0;
-            display: inline-block;
-        }
-
-        span.new .plus.x {
-            height: 1px;
-            width: 14px;
-            top: 12px;
-            right: 0;
-            left: 0;
-            margin: auto;
-        }
-
-        span.new .plus.y {
-            height: 14px;
-            width: 1px;
-            bottom: 0;
-            top: 0;
-            margin: auto;
-
-        }
-
-        #terminal {
-            height: 100%;
-            width: 100%;
-        }
-
-        pre {
-            border: 0;
-            border-radius: 3px;
-        }
\ No newline at end of file
+.window {
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    -moz-box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
+    -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
+    width: 800px;
+    margin: auto;
+    margin-top: 20px;
+    border: 1px solid #C1C2C2;
+    height: 500px;
+    padding-bottom: 20px;
+}
+
+.inside {
+    background: black;
+    padding-right: 20px;
+    height: 100%;
+}
+
+.inside .blok {
+    width: 100%;
+    background: black;
+}
+
+.top {
+    padding: 7px 0;
+    position: relative;
+    background: #f1f1f1;
+    background: -moz-linear-gradient(top, #E9E9E9 3%, #d8d8d8 100%);
+    background: -webkit-gradient(left top, left bottom, color-stop(3%, #E9E9E9), color-stop(100%, #d8d8d8));
+    background: -webkit-linear-gradient(top, #E9E9E9 3%, #d8d8d8 100%);
+    background: -o-linear-gradient(top, #E9E9E9 3%, #d8d8d8 100%);
+    background: -ms-linear-gradient(top, #E9E9E9 3%, #d8d8d8 100%);
+    background: linear-gradient(to bottom, #E9E9E9 3%, #d8d8d8 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1', endColorstr='#d8d8d8', GradientType=0);
+
+    -webkit-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.76);
+    -moz-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.76);
+    box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.76);
+
+    overflow: hidden;
+    border-bottom: 2px solid #BDBCC1;
+}
+
+.top > div {
+    float: left;
+}
+
+.panel {
+    padding-left: 9px;
+    padding-top: 2px;
+}
+
+.panel > span {
+    display: inline-block;
+    float: left;
+    width: 12px;
+    height: 12px;
+    margin-right: 7px;
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+    border-radius: 6px;
+    cursor: pointer;
+
+}
+
+.panel span.first {
+    background: #FF5F4F;
+}
+
+.panel span.second {
+    background: #F9C206;
+}
+
+.panel span.third {
+    background: #19CC32;
+}
+
+.nav {
+    overflow: hidden;
+}
+
+.nav > span {
+    display: inline-block;
+    float: left;
+    background: #FBFBFB;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    height: 23px;
+    padding: 0 8px;
+    cursor: pointer;
+    color: #B4B4B4;
+    border-bottom: 1px solid #CECECE;
+}
+
+.nav > span:hover {
+    background: #f2f2f2;
+    color: #666;
+}
+
+.nav > span i.fa {
+    font-size: 23px;
+}
+
+.nav span.active {
+    color: #707070;
+}
+
+.nav span.prev {
+    margin-right: 1px;
+    margin-left: 7px;
+}
+
+.nav span.next {
+    margin-right: 7px;
+}
+
+.nav span.set i {
+    font-size: 14px;
+    position: relative;
+    top: 3px;
+}
+
+.nav span.address {
+    width: 400px;
+    margin-left: 75px;
+    display: inline-block;
+    background: #fff;
+    line-height: 23px;
+    padding: 0;
+    text-align: center;
+    position: relative;
+}
+
+.nav span.address > input {
+    font-size: 12px;
+    color: #505050;
+    border: none;
+    background: none;
+    text-align: center;
+    position: relative;
+    width: 300px;
+}
+
+.nav span.address > input:focus {
+    outline: none;
+}
+
+.nav span.address > input.class {
+    text-align: left;
+}
+
+.nav span.address > i.fa {
+    position: absolute;
+    right: 5px;
+    top: 7px;
+    font-size: 11px;
+    color: #010101;
+}
+
+.nav.right {
+    float: right !important;
+    margin-right: 35px;
+}
+
+.nav span.share {
+    margin-right: 7px;
+}
+
+.nav span.share > i.fa {
+    font-size: 11px;
+    position: relative;
+    top: 2px;
+}
+
+.nav span.tabs {
+    position: relative;
+    width: 26px;
+    padding: 0;
+}
+
+.nav span.tabs span {
+    height: 7px;
+    width: 7px;
+    border: 1px solid #B4B4B4;
+    display: inline-block;
+    position: absolute;
+    background: #FBFBFB;
+}
+
+.nav span.tabs span.front {
+    top: 8px;
+    left: 6px;
+    z-index: 6;
+}
+
+.nav span.tabs span.behind {
+    top: 6px;
+    left: 8px;
+    z-index: 5;
+}
+
+.nav span.tabs:hover span {
+    border: 1px solid #666;
+}
+
+span.new {
+    cursor: pointer;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    background: #CACACA;
+    width: 23px;
+    height: 23px;
+    text-align: center;
+    line-height: 23px;
+    border-top: 1px solid #C1C2C2;
+    border-left: 1px solid #C1C2C2;
+}
+
+span.new:hover {
+    -webkit-box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
+    -moz-box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
+    box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
+}
+
+span.new .plus {
+    position: absolute;
+    background: #b0b0b0;
+    display: inline-block;
+}
+
+span.new .plus.x {
+    height: 1px;
+    width: 14px;
+    top: 12px;
+    right: 0;
+    left: 0;
+    margin: auto;
+}
+
+span.new .plus.y {
+    height: 14px;
+    width: 1px;
+    bottom: 0;
+    top: 0;
+    margin: auto;
+
+}
+
+#terminal {
+    height: 100%;
+    width: 100%;
+}
+
+pre {
+    border: 0;
+    border-radius: 3px;
+}
\ No newline at end of file
diff --git a/static/js/500.js b/static/js/500.js
index 2b1c461e..f8407da1 100644
--- a/static/js/500.js
+++ b/static/js/500.js
@@ -1,36 +1,41 @@
-        var app = document.getElementById('error');
+var app = document.getElementById('error');
 
-        var typewriter = new Typewriter(app, {
-            loop: false,
-            deleteSpeed: 40,
-            typingSpeed: "natural",
-            devMode: false
-        });
+var typewriter = new Typewriter(app, {
+    loop: false,
+    deleteSpeed: 40,
+    typingSpeed: "natural",
+    devMode: false
+});
 
 
+typewriter.appendText('Python 3.6.4 (default, Jan  5 2018, 02:35:40)\n')
+    .appendText('[GCC 7.2.1 20171224] on linux\n')
+    .appendText('Type "help", "copyright", "credits" or "license" for more information.\n')
+    .appendText('>>> ')
+    .pauseFor(1000)
+    .typeString("impor requests")
+    .deleteChars(9)
+    .typeString("t requests\n")
+    .appendText(">>> ")
+    .pauseFor(750)
+    .changeSettings({typingSpeed: "natural"})
+    .typeString("response = requests." + window._RequestMethod + "('https://pythim")
+    .deleteChars(2)
+    .typeString("ondiscord.con/")
+    .deleteChars(2)
+    .typeString("m" + window._Path + "')\n")
+    .pauseFor(1000)
+    .appendText("<Response [" + window._Code + "]>\n>>> ")
+    .typeString("# hmmmm")
+    .pauseFor(1000)
+    .deleteChars(7)
+    .pauseFor(1000)
+    .typeString("response.text\n")
+    .appendText("'" + window._ErrorMsg + "'\n>>> ")
+    .start();
 
-        typewriter.appendText('Python 3.6.4 (default, Jan  5 2018, 02:35:40)\n')
-            .appendText('[GCC 7.2.1 20171224] on linux\n')
-            .appendText('Type "help", "copyright", "credits" or "license" for more information.\n')
-            .appendText('>>> ')
-            .pauseFor(1000)
-            .typeString("impor requests")
-            .deleteChars(9)
-            .typeString("t requests\n")
-            .appendText(">>> ")
-            .pauseFor(750)
-            .changeSettings({typingSpeed: "natural"})
-            .typeString("response = requests."+window._RequestMethod+"('https://pythim")
-            .deleteChars(2)
-            .typeString("ondiscord.con/")
-            .deleteChars(2)
-            .typeString("m"+window._Path+"')\n")
-            .pauseFor(1000)
-            .appendText("<Response ["+window._Code+"]>\n>>> ")
-            .typeString("# hmmmm")
-            .pauseFor(1000)
-            .deleteChars(7)
-            .pauseFor(1000)
-            .typeString("response.text\n")
-            .appendText("'"+window._ErrorMsg+"'\n>>> ")
-            .start();
+function closeWindow(){
+    var app = document.getElementById("win");
+    var current_class = app.getAttribute("class");
+    app.setAttribute("class", current_class + " uk-animation-scale-up uk-animation-reverse")
+}
\ No newline at end of file
diff --git a/templates/errors/error.html b/templates/errors/error.html
index 834f4e62..d9a805df 100644
--- a/templates/errors/error.html
+++ b/templates/errors/error.html
@@ -16,10 +16,10 @@
     <script src="/static/js/typewriter.js"></script>
     <link href="/static/css/window.css" rel="stylesheet" type="text/css"/>
     <div class="uk-container uk-section">
-        <div class="window">
+        <div class="window" id="win">
             <div class="top">
                 <div class="panel">
-                    <span class="first"></span>
+                    <span class="first" onclick="closeWindow()"></span>
                     <span class="second"></span>
                     <span class="third"></span>
                 </div>