Project refactored to use NPM package manager, jquery and created new features

.gitignore

@@ -0,0 +1 @@
+node_modules

dist/fonts/dos437.txt

@@ -0,0 +1,72 @@
+ /
+/(_____________            ____
+\              /______)\  |    |        
+:\      |     /         \:|    |:::::::::: : .. . : ..  . .  :.    .
+  \_____|    /      |    \|    |______  
+___ /               ________          \...     .     .      .
+\______________     \       |  |      /.. . .   .   .             .
+               \            |__|     /
+--x--x-----x----\______     |-/_____/-x--x-xx--x-- - -x -- - -   --  - - - 
+. . . . . . . . . . . .\____|. . . . . .
+-------------------------------------------------------------------------------
+>> perfect dos vga 437 - general information  >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+-------------------------------------------------------------------------------
+
+ "Perfect DOS VGA 437" and "Perfect DOS VGA 437 Win" are truetype fonts
+ designed to emulate the MS-DOS/Text mode standard font, used on VGA monitors,
+ with the 437 Codepage (standard US/International). This is a "bitmap" font,
+ meaning it emulates a bitmap font and can only be used at a given size (8 or
+ multiples of it like 16, 24, 32, etc). It's optimized for Flash too, so it
+ won't produce antialias if used at round positions.
+ 
+ There are two fonts available. "Perfect DOS VGA 437" uses the original DOS
+ codepage 437. It should be used, for example, if you're opening DOS ASCII
+ files on notepad or another windows-based editor. Since it's faithful to the
+ original DOS codes, it won't accent correctly in windows ("é" would produce
+ something different, not an "e" with an acute).
+ 
+ There's also "Perfect DOS VGA 437 Win" which is the exactly same font adapted
+ to a windows codepage. This should use accented characters correctly but won't
+ work if you're opening a DOS-based text file.
+ 
+ UPDATE: this is a new version, updated in august/2008. It has fixed leading
+ metrics for Mac systems.
+
+-------------------------------------------------------------------------------
+>> perfect dos vga 437 - creation process >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+-------------------------------------------------------------------------------
+ 
+ This font was created to be used on a Flash-based ANSi viewer I'm working. To
+ create it, I created a small Quick Basic program to write all characters on
+ screen,
+ 
+  CLS
+  FOR l = 0 TO 255
+    charWrite 1 + (l MOD 20), 1 + (l \ 20) * 6 + (l MOD 2), LTRIM$(RTRIM$(STR$(l))) + CHR$(l)
+  NEXT
+  SUB charWrite (lin, col, char$)
+    DEF SEG = &HB800
+    FOR i = 1 TO LEN(char$)
+      POKE ((lin - 1) * 160) + ((col - 2 + i) * 2), ASC(MID$(char$, i, 1))
+      IF (i = LEN(char$)) THEN POKE ((lin - 1) * 160) + ((col - 2 + i) * 2) + 1, 113
+    NEXT
+  END SUB
+  
+ Then captured the text screen using SCREEN THIEF (a very, very old screen
+ capture TSR program which converts text screens to images accurately). I then
+ recreated the font polygon by polygon on Fontlab, while looking at the image
+ on Photoshop. No conversion took place.
+
+-------------------------------------------------------------------------------
+>> author >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+-------------------------------------------------------------------------------
+
+ zeh fernando remembers the old days. SMASH DAH FUCKING ENTAH.
+
+ http://www.fatorcaos.com.br
+
+ rorshack ^ maiden brazil
+
+-------------------------------------------------------------------------------
+^zehPULLSdahTRICK^kudosOUTtoWHOkeepsITreal^smashDAHfuckingENTAH!!!^lowres4ever^
+-------------------------------------------------------------------------------

dist/tuicss.js

@@ -0,0 +1,61 @@
+/**
+ * Init
+ */
+$(document).ready(function() {
+    tabsController();
+    dateController();
+    sidenavController();
+});
+
+/**
+ * TuiTabs controller
+ */
+function tabsController() {
+    $(".tui-tab").click(function(event) {
+        $(".tui-tab-content").hide();
+        let tabContentid = $(this).attr('data-tab-content');
+        $(`#${tabContentid}`).show();
+        $(".tui-tab").removeClass("active");
+        $(this).addClass("active");
+    });
+    $('.tui-tab.active').click();
+}
+
+function dateController() {
+    let interval = setInterval(function () {
+        let today = new Date();
+        let clock = $(".tui-date");
+        if(!clock.length) {
+            clearInterval(interval);
+            return;
+        }
+        let format = clock.attr("data-format");
+
+        let month = (today.getMonth() + "").length == 2 ? today.getMonth() + 1 : "0" + (today.getMonth() + 1);
+        let day = (today.getDay() + "").length == 2 ? today.getDay() + 1 : "0" + (today.getDay() + 1);
+        let year = today.getFullYear();
+        let hour = (today.getHours() + "").length == 2 ? today.getHours() : "0" + today.getHours();
+        let minute = (today.getMinutes() + "").length == 2 ? today.getMinutes() : "0" + today.getMinutes();
+        let second = (today.getSeconds() + "").length == 2 ? today.getSeconds() : "0" + today.getSeconds();
+
+        format = format.replace("M", month);
+        format = format.replace("d", day);
+        format = format.replace("y", year);
+        format = format.replace("h", hour);
+        format = format.replace("m", minute);
+        format = format.replace("s", second);
+
+        clock.html(format);
+    });
+}
+
+function sidenavController() {
+    $(".tui-sidenav-button").click(function() {
+        let sidenav = $(".tui-sidenav");
+        if(sidenav.hasClass("active")) {
+            $(".tui-sidenav").removeClass("active");
+        } else {
+            $(".tui-sidenav").addClass("active");
+        }
+    });
+}

dist/tuicss.min.js

@@ -0,0 +1 @@
+function tabsController(){$(".tui-tab").click(function(t){$(".tui-tab-content").hide();let e=$(this).attr("data-tab-content");$(`#${e}`).show(),$(".tui-tab").removeClass("active"),$(this).addClass("active")}),$(".tui-tab.active").click()}function dateController(){let t=setInterval(function(){let e=new Date,a=$(".tui-date");if(!a.length)return void clearInterval(t);let n=a.attr("data-format"),l=2==(e.getMonth()+"").length?e.getMonth()+1:"0"+(e.getMonth()+1),i=2==(e.getDay()+"").length?e.getDay()+1:"0"+(e.getDay()+1),o=e.getFullYear(),r=2==(e.getHours()+"").length?e.getHours():"0"+e.getHours(),s=2==(e.getMinutes()+"").length?e.getMinutes():"0"+e.getMinutes(),c=2==(e.getSeconds()+"").length?e.getSeconds():"0"+e.getSeconds();n=(n=(n=(n=(n=(n=n.replace("M",l)).replace("d",i)).replace("y",o)).replace("h",r)).replace("m",s)).replace("s",c),a.html(n)})}function sidenavController(){$(".tui-sidenav-button").click(function(){$(".tui-sidenav").hasClass("active")?$(".tui-sidenav").removeClass("active"):$(".tui-sidenav").addClass("active")})}$(document).ready(function(){tabsController(),dateController(),sidenavController()});

examples/bios.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>BIOS Example</title>
+    <script src="plugins/jquery-3.4.1.min.js"></script>
+    <script src="../dist/tuicss.min.js"></script>
+    <link rel="stylesheet" href="../dist/tuicss.min.css">
+</head>
+
+<body>
+    <div class="tui-screen-800-600 bordered white-168">
+        <div class="tui-panel cyan-168 full-width black-255-text tui-no-shadow center">
+            BIOS
+        </div>
+        <div class="tui-tabs">
+            <ul>
+                <li><a class="tui-tab active" data-tab-content="tab-1-content">Main</a></li>
+                <li><a class="tui-tab" data-tab-content="tab-2-content">Exit</a></li>
+            </ul>
+        </div>
+        <div class="tui-tab-content tui-content" id="tab-1-content">
+            <table class="tui-table-grid">
+                <tbody>
+                    <tr>
+                        <td rowspan="2" width="60%" class="blue-168-text">
+                            <br>System Time.........:<input type="text" class="tui-input white-168 black-text" value="[09:21:30]" style="width: 135px" />
+                            <br>System Date.........:<input type="text" class="tui-input white-168 black-text" value="[15/09/1994]" style="width: 135px" />
+                            <br>
+                            <br>Legacy Diskette A...:<input type="text" class="tui-input white-168 black-text" value="[1.44/1.25 MB]" style="width: 135px" />]
+                            <br>Legacy Diskette B...:<input type="text" class="tui-input white-168 black-text" value="[disabeld]" style="width: 135px" />
+                            <br>
+                            <br>Primary Master......:<input type="text" class="tui-input white-168 black-text" value="[None]" style="width: 135px" />
+                            <br>Primary Slave.......:<input type="text" class="tui-input white-168 black-text" value="[None]" style="width: 135px" />
+                            <br>Secondary Master....:<input type="text" class="tui-input white-168 black-text" value="[CD-ROM]" style="width: 135px" />
+                            <br>Secondary Slave.....:<input type="text" class="tui-input white-168 black-text" value="[None]" style="width: 135px" />
+                            <br>
+                            <br>Keyboard Features...:<input type="text" class="tui-input white-168 black-text" value="[Enter]" style="width: 135px" />
+                            <br>
+                            <br>System Memory.......:<input type="text" class="tui-input white-168 black-text" value="[640 KB]" style="width: 135px" />
+                            <br>Extended Memory.....:<input type="text" class="tui-input white-168 black-text" value="[3568410 KB]" style="width: 135px" />
+                            <br>Boot-time Diagnostic:<input type="text" class="tui-input white-168 black-text" value="[Enabled]" style="width: 135px" />
+                        </td>
+                        <td width="40%" class="center">Item Specified Help</td>
+                    </tr>
+                    <tr>
+                        <td width="25" height="448px">
+                            <br>&#60;Tab&#62;, &#60;Shift-Tab&#62; or &#60;Enter&#62; selects field.
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <div class="tui-statusbar absolute cyan-168">
+            <ul>
+                <li><a href="#!"><span class="white-255-text">F1</span> Help</a></li>
+                <li><a href="#!"><span class="white-255-text">↑↓</span> Select Item</a></li>
+                <li><a href="#!"><span class="white-255-text">-/+</span> Change Values</a></li>
+                <li><a href="#!"><span class="white-255-text">F9</span> Setup Defaults</a></li>
+                <br>
+                <li><a href="#!"><span class="white-255-text">Esc</span> Exit</a></li>
+                <li><a href="#!"><span class="white-255-text">←→</span> Select Menu</a></li>
+                <li><a href="#!"><span class="white-255-text">Enter</span> Select Sub-Menu</a></li>
+                <li><a href="#!"><span class="white-255-text">F10</span> Save and Exit</a></li>
+            </ul>
+        </div>
+    </div>
+</body>
+</html>

examples/general.html

@@ -6,7 +6,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>TUI</title>
-    <link rel="stylesheet" href="TuiCss/tuicss.css">
+    <script src="plugins/jquery-3.4.1.min.js"></script>
+    <script src="../dist/tuicss.min.js"></script>
+    <link rel="stylesheet" href="../dist/tuicss.min.css">
 </head>
 
 <body>
@@ -66,31 +68,9 @@
 
     <!-- NAV -->
     <nav class="tui-nav tui-nav-fixed">
-        <span class="tui-clock" id="clock"></span>
+        <span class="tui-date" data-format="M/d/y h:m:s"></span>
         <ul>
-            <li class="tui-dropdown">
+            <li class="tui-sidenav-button"><a class="red-168-text">≡</a></li>
-                <span class="red-168-text">≡</span>
-                <div class="tui-dropdown-content">
-                    <ul>
-                        <li>
-                            <a href="#!">
-                                <span class="red-168-text">R</span>epaint desktop
-                            </a>
-                        </li>
-                        <div class="tui-black-divider"></div>
-                        <li>
-                            <a href="#!">
-                                R<span class="red-168-text">e</span>load
-                            </a>
-                        </li>
-                        <li>
-                            <a href="#!">
-                                Re<span class="red-168-text">s</span>tore
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-            </li>
             <li class="tui-dropdown">
                 <span class="red-168-text">F</span>ile
                 <div class="tui-dropdown-content">
@@ -125,7 +105,8 @@
                         <div class="tui-black-divider"></div>
 
                         <!-- SUBMENU EXAMPLE -->
-                        <li class="tui-dropdown">
+                        
+                        <li class="tui-dropdown block">
                             <span class="right">►</span>
                             <span class="red-168-text">M</span>ore
                             <div class="tui-dropdown-content">
@@ -386,15 +367,35 @@
 
         <!-- PANEL EXAMPLE 1 -->
         <div class="tui-panel">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Vestibulum a posuere sapien, nec placerat
+            <div class="tui-panel-content">
-            lorem.<br> Aliquam urna lorem, placerat et varius et, aliquam ac libero.
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Vestibulum a posuere sapien, nec placerat
+                lorem.<br> Aliquam urna lorem, placerat et varius et, aliquam ac libero.
+            </div>
         </div><br><br>
 
         <!-- PANEL EXAMPLE 2 -->
         <div class="tui-panel yellow-168 black-255-text">
-            NOTE: Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Vestibulum a posuere sapien, nec
+            <div class="tui-panel-content">
-            placerat
+                NOTE: Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Vestibulum a posuere sapien, nec
-            lorem.<br> Aliquam urna lorem, placerat et varius et, aliquam ac libero.
+                placerat
+                lorem.<br> Aliquam urna lorem, placerat et varius et, aliquam ac libero.
+            </div>
+        </div><br><br>
+
+        <div class="tui-panel white-168 black-255-text">
+            <div class="tui-panel-header">
+                About
+            </div>
+            <div class="tui-panel-content">
+                NOTE: Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Vestibulum a posuere sapien, nec
+                placerat
+                lorem.<br> Aliquam urna lorem, placerat et varius et, aliquam ac libero.
+                <br><br>
+                <div class="center">
+                    <button class="tui-button white-255" style="width: 80px">OK</button>
+                </div>
+                
+            </div>
         </div><br><br>
 
         <!-- INPUTS -->
@@ -475,6 +476,14 @@
                 <div class="tui-progress">
                     <span style="width: 75%"></span>
                 </div>
+                75% Texturized
+                <div class="tui-progress texturized">
+                    <span style="width: 75%"></span>
+                </div>
+                75% Text. black
+                <div class="tui-progress texturized-black">
+                    <span style="width: 75%"></span>
+                </div>
                 100%
                 <div class="tui-progress">
                     <span style="width: 100%"></span>
@@ -780,17 +789,5 @@ int main()
     <br><br>
 
 </body>
-<script>
-    window.onload = function () {
-        setInterval(function () {
-            var today = new Date();
-            var clock = document.getElementById("clock");
-            var hour = (today.getHours() + "").length == 2 ? today.getHours() : "0" + today.getHours();
-            var minute = (today.getMinutes() + "").length == 2 ? today.getMinutes() : "0" + today.getMinutes();
-            var second = (today.getSeconds() + "").length == 2 ? today.getSeconds() : "0" + today.getSeconds();
-            clock.innerHTML = hour + ":" + minute + ":" + second;
-        });
-    };
-</script>
 
 </html>

examples/pc-startup.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>PC Startup</title>
+    <script src="plugins/jquery-3.4.1.min.js"></script>
+    <script src="../dist/tuicss.min.js"></script>
+    <link rel="stylesheet" href="../dist/tuicss.min.css">
+</head>
+
+<body>
+    <div class="tui-screen-800-600 black white-text" style="padding: 2px">
+        <img src="./resources/pcstartup1.png" width="40px" height="40px" style="float: left" />
+        <img src="./resources/pcstartup2.png" width="200px" height="150px" style="float: right" />
+        <div style="margin-top: 4px"></div>
+        Award Medallion BIOS v6.0, An Energy Star Ally<br>
+        Copyright (C) 1984-2001, Award Software, Inc.<br><br>
+        ASUS P4T533-C ACPI BIOS Revision 1007 Beta 001<br><br>
+        Intel(R) Pentium(R) 4 2800 MHz Processor<br>
+        Memory Test : &nbsp;&nbsp; 262144K OK<br><br>
+        <div id="session-1" style="display: none">
+            Award Plug and Play BIOS Extension v1.0A<br>
+            Initialize Plug and Play Cards...<br>
+            PNP init Completed<br><br>
+        </div>
+        <div id="session-2" style="display: none">
+            Detecting Primary Master .....: MAXTOR 6L040J2<br>
+        </div>
+        <div id="session-3" style="display: none">
+            Detecting Primary Slave ......: ASUS CD-S520/A<br>
+        </div>
+        <div id="session-4" style="display: none">
+            Detecting Secondary Master ...: Skip<br>
+            Detecting Secondaty Slave ....: None
+        </div>
+        <div class="tui-statusbar absolute black white-text">
+            <ul>
+                <li style="margin-left: 0px">Press <b>DEL</b> to enter SETUP, <b>Alt+F2</b> to enter EZ flash utility
+                </li>
+            </ul>
+            <ul>
+                <li style="margin-left: 0px">08/20/2002-1850E/ICH2/W627-P4T533-C</li>
+            </ul>
+        </div>
+    </div>
+</body>
+<script>
+    $(document).ready(function() {
+        setTimeout(function() { $("#session-1").show(); }, 300);
+        setTimeout(function() { $("#session-2").show(); }, 400);
+        setTimeout(function() { $("#session-3").show(); }, 450);
+        setTimeout(function() { $("#session-4").show(); }, 870);
+    });
+</script>
+</html>

gulpfile.js

@@ -0,0 +1,61 @@
+
+const { series, src, dest } = require('gulp');
+const sass = require('gulp-sass');
+const gulpClean = require('gulp-clean');
+const gulpMinify = require('gulp-minify');
+const cleanCss = require('gulp-clean-css');
+const gulpRename = require("gulp-rename");
+const distPath = "./dist";
+
+// Clear dist folder
+function clean() {
+  return src(distPath + "/*", {read: false})
+        .pipe(gulpClean());
+}
+
+// Compile scss
+function sassCompile() {
+    return src('src/tuicss.scss')
+        .pipe(sass())
+        .pipe(dest(distPath));
+}
+
+function minifyCss() {
+    return src(distPath + '/tuicss.css')
+        .pipe(cleanCss())
+        .pipe(gulpRename({
+            suffix: ".min"
+        }))
+        .pipe(dest(distPath));
+}
+
+function copyScript() {
+    return src('src/js/tuicss.js')
+        .pipe(dest(distPath));
+}
+
+function minifyJs() {
+    return src(distPath + '/tuicss.js')
+        .pipe(gulpMinify({
+            ext:{
+                min:'.min.js'
+            }
+        }))
+        .pipe(dest(distPath));
+}
+
+function copyImages() {
+    return src('src/images/*')
+        .pipe(dest(distPath + "/images"));
+}
+
+function copyFonts() {
+    return src('src/fonts/*')
+        .pipe(dest(distPath + "/fonts"));
+}
+
+exports.default = series(clean, sassCompile, minifyCss, copyScript, minifyJs, copyImages, copyFonts);
+
+
+
+

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "tuicss",
+  "version": "1.0.0",
+  "description": "Text-based user interface CSS framework",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vinibiavatti1/TuiCss.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/vinibiavatti1/TuiCss/issues"
+  },
+  "homepage": "https://github.com/vinibiavatti1/TuiCss#readme",
+  "devDependencies": {
+    "gulp": "^4.0.2",
+    "gulp-clean": "^0.4.0",
+    "gulp-clean-css": "^4.2.0",
+    "gulp-copy": "^4.0.1",
+    "gulp-minify": "^3.1.0",
+    "gulp-rename": "^1.4.0",
+    "gulp-sass": "^4.0.2"
+  }
+}

src/components/button.scss

@@ -0,0 +1,22 @@
+@import '../mixins.scss';
+
+.tui-button {
+	display: inline-block;
+    outline:0;
+    padding: 1px 10px;
+    background-color: rgb(0, 168, 0);
+    color: black;
+    border: none;
+    cursor: pointer;
+    text-align: center;
+    box-shadow: 10px 10px black;
+    @include disable-select;
+}
+.tui-button:active {
+    background-color: rgb(0, 168, 168)!important;
+    color: black!important;
+    box-shadow: none!important;
+}
+.tui-button:focus {
+    color: rgb(0, 255, 255)!important;
+}

src/components/checkbox.scss

@@ -0,0 +1,33 @@
+@import '../variables.scss';
+@import '../mixins.scss';
+
+.tui-checkbox {
+    display: block;
+    position: relative;
+    cursor: pointer;
+    color: white;
+    padding-left: 30px;
+    @include disable-select;
+}
+.tui-checkbox input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    top: 0px;
+    left: 0px;
+}
+.tui-checkbox span {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    cursor: pointer;
+    top: 0px;
+    left: 0px;
+}
+.tui-checkbox input:checked ~ span::after {
+    content: $checkbox-on;
+    color: rgb(0, 255, 255);
+}
+.tui-checkbox input:not(checked) ~ span::after {
+    content: $checkbox-off;
+}

src/components/date.scss

@@ -0,0 +1,5 @@
+.tui-date {
+    padding: 1px 0px 1px 0px;
+    margin-right: 10px;
+    float:right;
+}

src/components/divider.scss

@@ -0,0 +1,8 @@
+.tui-divider {
+    border-bottom: 2px solid rgb(255, 255, 255);
+    display: block;
+}
+.tui-black-divider {
+    border-bottom: 2px solid rgb(0, 0, 0);
+    display: block;
+}

src/components/dropdown.scss

@@ -0,0 +1,26 @@
+@import '../mixins.scss';
+
+.tui-dropdown {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+    @include disable-select;
+}
+.tui-dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: rgb(168, 168, 168);
+    min-width: 200px;
+    padding: 6px;
+    z-index: 9;
+}
+.tui-dropdown-content ul {
+    border: 2px black solid;
+}
+.tui-dropdown-content ul li {
+    display: block!important;
+    margin: 6px;
+}
+.tui-dropdown:hover > .tui-dropdown-content:first-of-type {
+    display: block;
+}

src/components/fieldset.scss

@@ -0,0 +1,65 @@
+.tui-window-fieldset {
+    border: 6px white double;
+    padding: 10px;
+    background-color: inherit;
+    margin-bottom: 6px;
+}
+.tui-window-fieldset-no-legend {
+    margin-top: 6px;
+}
+.tui-input-fieldset {
+    border-top: 6px white double;
+    border-bottom: 6px white double;
+    border-left: 2px white solid;
+    border-right: 2px white solid;
+    padding: 5px;
+    background-color: inherit;
+}
+.tui-input-fieldset:hover {
+    border-color: yellow!important;
+}
+.tui-input-fieldset:hover legend {
+    color: yellow!important;
+}
+.tui-border-solid {
+    border: 2px white solid;
+}
+.tui-fieldset-button {
+    position: absolute;
+    top: 0px;
+    right: 16px;
+    color: white;
+    background-color: inherit;
+    z-index: 2;
+    border: none;
+    cursor: pointer;
+    outline:0;
+    padding: 2px;
+}
+.tui-fieldset-statusbar {
+    position: absolute;
+    bottom: 0px;
+    left: 16px;
+    color: white;
+    background-color: inherit;
+    z-index: 2;
+    padding: 2px;
+
+    &.right {
+        left: initial;
+        right: 16px;
+    }
+}
+.tui-fieldset-button-left {
+    left: 16px!important;
+    right: initial;
+}
+.tui-fieldset-button::before {
+    content: "[";
+}
+.tui-fieldset-button::after {
+    content: "]";
+}
+.tui-fieldset-button:active {
+    color: rgb(0, 255, 255)!important;
+}

src/components/grid.scss

@@ -0,0 +1,158 @@
+@import '../variables.scss';
+
+.container {
+  margin: 0 auto;
+  max-width: 1280px;
+  width: 90%;
+}
+@media #{$medium-and-up} {
+  .container {
+    width: 85%;
+  }
+}
+@media #{$large-and-up} {
+  .container {
+    width: 70%;
+  }
+}
+.col .row {
+  margin-left: (-1 * $gutter-width / 2);
+  margin-right: (-1 * $gutter-width / 2);
+}
+
+.section {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+
+  &.no-pad {
+    padding: 0;
+  }
+  &.no-pad-bot {
+    padding-bottom: 0;
+  }
+  &.no-pad-top {
+    padding-top: 0;
+  }
+}
+
+
+// Mixins to eliminate code repitition
+@mixin reset-offset {
+  margin-left: auto;
+  left: auto;
+  right: auto;
+}
+@mixin grid-classes($size, $i, $perc) {
+  &.offset-#{$size}#{$i} {
+    margin-left: $perc;
+  }
+  &.pull-#{$size}#{$i} {
+    right: $perc;
+  }
+  &.push-#{$size}#{$i} {
+    left: $perc;
+  }
+}
+
+
+.row {
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 20px;
+
+  // Clear floating children
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+  .col {
+    float: left;
+    box-sizing: border-box;
+    padding: 0 $gutter-width / 2;
+    min-height: 1px;
+
+    &[class*="push-"],
+    &[class*="pull-"] {
+      position: relative;
+    }
+
+    $i: 1;
+    @while $i <= $num-cols {
+      $perc: unquote((100 / ($num-cols / $i)) + "%");
+      &.s#{$i} {
+        width: $perc;
+        @include reset-offset;
+      }
+      $i: $i + 1;
+    }
+
+    $i: 1;
+    @while $i <= $num-cols {
+      $perc: unquote((100 / ($num-cols / $i)) + "%");
+      @include grid-classes("s", $i, $perc);
+      $i: $i + 1;
+    }
+
+    @media #{$medium-and-up} {
+
+      $i: 1;
+      @while $i <= $num-cols {
+        $perc: unquote((100 / ($num-cols / $i)) + "%");
+        &.m#{$i} {
+          width: $perc;
+          @include reset-offset;
+        }
+        $i: $i + 1
+      }
+
+      $i: 1;
+      @while $i <= $num-cols {
+        $perc: unquote((100 / ($num-cols / $i)) + "%");
+        @include grid-classes("m", $i, $perc);
+        $i: $i + 1;
+      }
+    }
+
+    @media #{$large-and-up} {
+
+      $i: 1;
+      @while $i <= $num-cols {
+        $perc: unquote((100 / ($num-cols / $i)) + "%");
+        &.l#{$i} {
+          width: $perc;
+          @include reset-offset;
+        }
+        $i: $i + 1;
+      }
+
+      $i: 1;
+      @while $i <= $num-cols {
+        $perc: unquote((100 / ($num-cols / $i)) + "%");
+        @include grid-classes("l", $i, $perc);
+        $i: $i + 1;
+      }
+    }
+
+    @media #{$extra-large-and-up} {
+
+      $i: 1;
+      @while $i <= $num-cols {
+        $perc: unquote((100 / ($num-cols / $i)) + "%");
+        &.xl#{$i} {
+          width: $perc;
+          @include reset-offset;
+        }
+        $i: $i + 1;
+      }
+
+      $i: 1;
+      @while $i <= $num-cols {
+        $perc: unquote((100 / ($num-cols / $i)) + "%");
+        @include grid-classes("xl", $i, $perc);
+        $i: $i + 1;
+      }
+    }
+  }
+}

src/components/input.scss

@@ -0,0 +1,11 @@
+.tui-input {
+    background-color: rgb(0, 0, 0);
+    color: white;
+    outline:0;
+    border: none;
+    padding: 1px;
+}
+.tui-input:focus {
+    background-color: rgb(255, 255, 0)!important;
+    color: black!important;
+}

src/components/navbar.scss

@@ -0,0 +1,24 @@
+@import '../mixins.scss';
+
+.tui-nav {
+    width: 100%;
+    background-color: rgb(168, 168, 168);
+    padding: 0px 2px;
+    z-index: 9;
+    display: block;
+}
+.tui-nav-fixed {
+    position: fixed;
+}
+.tui-nav ul li {
+    display: inline-block;
+    margin-left: 10px;
+    padding: 1px 3px;
+}
+.tui-nav ul li a {
+    display: block;
+    @include disable-select;
+}
+.tui-nav ul li:hover {
+    background-color: rgb(0, 168, 0);
+}

src/components/panel.scss

@@ -0,0 +1,17 @@
+.tui-panel {
+    background-color: rgb(0, 0, 168);
+    display: inline-block;
+    color: white;
+    box-shadow: 10px 10px black;
+}
+
+.tui-panel-content {
+    padding: 12px;
+}
+
+.tui-panel-header {
+    padding-top: 2px;
+    display: block;
+    background: white;
+    text-align: center;
+}

src/components/progressbar.scss

@@ -0,0 +1,30 @@
+.tui-progress {
+    display: block;
+    position: relative;
+    height: 16px;
+    width: 200px;
+    background-color: rgb(0, 168, 168);
+    overflow: hidden;
+}
+.tui-progress span {
+    position: absolute;
+    left: 0px;
+    background-color: rgb(0, 255, 255);
+    height: 16px;
+    display: inline-block;
+}
+.tui-progress .tui-indeterminate {
+    position: absolute;
+    left: 0px;
+    background-color: rgb(0, 255, 255);
+    height: 16px;
+    width: 16px;
+    display: inline-block;
+    animation: indeterminate 1s backwards;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+@keyframes indeterminate {
+    from {margin-left: -10%; }
+    to {margin-left: 100%}
+}

src/components/radio.scss

@@ -0,0 +1,33 @@
+@import '../variables.scss';
+@import '../mixins.scss';
+
+.tui-radio {
+    display: block;
+    position: relative;
+    cursor: pointer;
+    color: white;
+    padding-left: 30px;
+    @include disable-select;
+}
+.tui-radio input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    top: 0px;
+    left: 0px;
+}
+.tui-radio span {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    cursor: pointer;
+    top: 0px;
+    left: 0px;
+}
+.tui-radio input:checked ~ span:after {
+    content: $radio-on;
+    color: rgb(0, 255, 255)!important;
+}
+.tui-radio input:not(checked) ~ span:after {
+    content: $radio-off;
+}

src/components/screen.scss

@@ -0,0 +1,21 @@
+.tui-screen-640-360 {
+    width: 640px;
+    height: 360px;
+}
+.tui-screen-800-600 {
+    width: 800px;
+    height: 600px;
+}
+.tui-screen-1024-768 {
+    width: 1024px;
+    height: 768px;
+}
+
+.tui-screen-640-360,
+.tui-screen-800-600,
+.tui-screen-1024-768 {
+    position: relative;
+    &.bordered{
+        border: 2px solid black;
+    }
+}

src/components/scrollbar.scss

@@ -0,0 +1,13 @@
+::-webkit-scrollbar {
+    width: 10px;
+}
+::-webkit-scrollbar-track {
+    background-image: url("images/scroll.png");
+    background-repeat: repeat;
+}
+::-webkit-scrollbar-thumb {
+    background-color: rgb(0, 168, 168);
+}
+::-webkit-scrollbar-thumb:hover {
+    background-color: rgb(0, 168, 168);
+}

src/components/sidenav.scss

@@ -0,0 +1,41 @@
+@import '../mixins.scss';
+
+.tui-sidenav {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    background-color: rgb(0, 168, 168);
+    min-width: 200px;
+    box-shadow: 10px 10px black!important;
+    padding: 6px;
+    z-index: 10;
+    height: 100%;
+    z-index: 8;
+    display: none;
+    &.right {
+        left: initial;
+        right: 0px;
+    }
+    &.active {
+        display: block !important;
+    }
+}
+.tui-sidenav ul {
+    margin-top: 20px;
+    border: 2px black solid;
+}
+.tui-sidenav ul li {
+    display: block;
+    margin: 6px;
+}
+.tui-sidenav ul li a {
+    display: block;
+    @include disable-select;
+}
+.tui-sidenav ul li:hover {
+    background-color: rgb(255, 255, 0);
+}
+.tui-sidenav-button {
+    cursor: pointer;
+    @include disable-select;
+}

src/components/statusbar.scss

@@ -0,0 +1,28 @@
+@import '../mixins.scss';
+
+.tui-statusbar {
+    width: 100%;
+    background-color: rgb(168, 168, 168);
+    padding: 0px 1px;
+    left: 0px;
+    bottom: 0px;
+    z-index: 9;
+    position: fixed;
+}
+.tui-statusbar ul li {
+    display: inline-block;
+    margin-left: 10px;
+    padding: 2px 3px;
+}
+.tui-statusbar ul li:active {
+    background-color: rgb(0, 0, 168);
+    color: white;
+}
+.tui-statusbar ul li a {
+    @include disable-select;
+}
+.tui-statusbar-divider {
+    border-right: 2px black solid;
+    display: inline;
+    margin: 0px 3px;
+} 

src/components/table.scss

@@ -0,0 +1,22 @@
+.tui-table {
+    border: 2px solid rgb(168, 168, 168);
+    padding: 5px;
+    border-collapse: collapse;
+}
+.tui-table-hover tbody tr:hover {
+    background-color: rgb(0, 255, 255);
+    color: black;
+}
+.tui-table tbody {
+    background-color: inherit;
+    color: white;
+}
+.tui-table tbody tr td {
+    border-right: 2px solid rgb(168, 168, 168);
+    padding: 0px 2px;
+}
+.tui-table thead {
+    background-color: inherit;
+    color: rgb(255, 255, 0);
+    text-align: center;
+}

src/components/tablegrid.scss

@@ -0,0 +1,13 @@
+.tui-table-grid {
+    border-collapse: collapse;
+    width: 100%;
+}
+
+.tui-table-grid thead tr td,
+.tui-table-grid tbody tr td,
+.tui-table-grid thead tr th,
+.tui-table-grid tbody tr th {
+    border: 2px solid black;
+    padding: 10px;
+    vertical-align: top;
+}

src/components/tabs.scss

@@ -0,0 +1,26 @@
+@import '../mixins.scss';
+
+.tui-tabs {
+    background-color: rgb(0, 0, 168);
+    width: 100%;
+    padding: 0px 10px 0px 10px;
+}
+.tui-tabs ul li {
+    display: inline-block;
+}
+.tui-tabs ul li a {
+    display: block;
+    @include disable-select;
+}
+.tui-tab {
+    padding: 2px 10px 0px 10px;
+    color: rgb(168, 168, 168);
+    cursor: pointer;
+    &.active {
+        background-color: rgb(168, 168, 168);
+        color: rgb(0, 0, 168);
+    }
+}
+.tui-tab-content {
+    display: none;
+}

src/components/textarea.scss

@@ -0,0 +1,7 @@
+.tui-textarea {
+    background-color: inherit;
+    border: none;
+    padding: 0px;
+    color: rgb(255, 255, 0);
+    outline: none;
+}

src/components/window.scss

@@ -0,0 +1,8 @@
+.tui-window {
+    background-color: rgb(0, 0, 168);
+    padding: 1px;
+    display: inline-block;
+    position: relative;
+    box-shadow: 10px 10px black;
+    color: white;
+}

src/fonts/dos437.txt

@@ -0,0 +1,72 @@
+ /
+/(_____________            ____
+\              /______)\  |    |        
+:\      |     /         \:|    |:::::::::: : .. . : ..  . .  :.    .
+  \_____|    /      |    \|    |______  
+___ /               ________          \...     .     .      .
+\______________     \       |  |      /.. . .   .   .             .
+               \            |__|     /
+--x--x-----x----\______     |-/_____/-x--x-xx--x-- - -x -- - -   --  - - - 
+. . . . . . . . . . . .\____|. . . . . .
+-------------------------------------------------------------------------------
+>> perfect dos vga 437 - general information  >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+-------------------------------------------------------------------------------
+
+ "Perfect DOS VGA 437" and "Perfect DOS VGA 437 Win" are truetype fonts
+ designed to emulate the MS-DOS/Text mode standard font, used on VGA monitors,
+ with the 437 Codepage (standard US/International). This is a "bitmap" font,
+ meaning it emulates a bitmap font and can only be used at a given size (8 or
+ multiples of it like 16, 24, 32, etc). It's optimized for Flash too, so it
+ won't produce antialias if used at round positions.
+ 
+ There are two fonts available. "Perfect DOS VGA 437" uses the original DOS
+ codepage 437. It should be used, for example, if you're opening DOS ASCII
+ files on notepad or another windows-based editor. Since it's faithful to the
+ original DOS codes, it won't accent correctly in windows ("é" would produce
+ something different, not an "e" with an acute).
+ 
+ There's also "Perfect DOS VGA 437 Win" which is the exactly same font adapted
+ to a windows codepage. This should use accented characters correctly but won't
+ work if you're opening a DOS-based text file.
+ 
+ UPDATE: this is a new version, updated in august/2008. It has fixed leading
+ metrics for Mac systems.
+
+-------------------------------------------------------------------------------
+>> perfect dos vga 437 - creation process >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+-------------------------------------------------------------------------------
+ 
+ This font was created to be used on a Flash-based ANSi viewer I'm working. To
+ create it, I created a small Quick Basic program to write all characters on
+ screen,
+ 
+  CLS
+  FOR l = 0 TO 255
+    charWrite 1 + (l MOD 20), 1 + (l \ 20) * 6 + (l MOD 2), LTRIM$(RTRIM$(STR$(l))) + CHR$(l)
+  NEXT
+  SUB charWrite (lin, col, char$)
+    DEF SEG = &HB800
+    FOR i = 1 TO LEN(char$)
+      POKE ((lin - 1) * 160) + ((col - 2 + i) * 2), ASC(MID$(char$, i, 1))
+      IF (i = LEN(char$)) THEN POKE ((lin - 1) * 160) + ((col - 2 + i) * 2) + 1, 113
+    NEXT
+  END SUB
+  
+ Then captured the text screen using SCREEN THIEF (a very, very old screen
+ capture TSR program which converts text screens to images accurately). I then
+ recreated the font polygon by polygon on Fontlab, while looking at the image
+ on Photoshop. No conversion took place.
+
+-------------------------------------------------------------------------------
+>> author >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+-------------------------------------------------------------------------------
+
+ zeh fernando remembers the old days. SMASH DAH FUCKING ENTAH.
+
+ http://www.fatorcaos.com.br
+
+ rorshack ^ maiden brazil
+
+-------------------------------------------------------------------------------
+^zehPULLSdahTRICK^kudosOUTtoWHOkeepsITreal^smashDAHfuckingENTAH!!!^lowres4ever^
+-------------------------------------------------------------------------------

src/js/tuicss.js

@@ -0,0 +1,61 @@
+/**
+ * Init
+ */
+$(document).ready(function() {
+    tabsController();
+    dateController();
+    sidenavController();
+});
+
+/**
+ * TuiTabs controller
+ */
+function tabsController() {
+    $(".tui-tab").click(function(event) {
+        $(".tui-tab-content").hide();
+        let tabContentid = $(this).attr('data-tab-content');
+        $(`#${tabContentid}`).show();
+        $(".tui-tab").removeClass("active");
+        $(this).addClass("active");
+    });
+    $('.tui-tab.active').click();
+}
+
+function dateController() {
+    let interval = setInterval(function () {
+        let today = new Date();
+        let clock = $(".tui-date");
+        if(!clock.length) {
+            clearInterval(interval);
+            return;
+        }
+        let format = clock.attr("data-format");
+
+        let month = (today.getMonth() + "").length == 2 ? today.getMonth() + 1 : "0" + (today.getMonth() + 1);
+        let day = (today.getDay() + "").length == 2 ? today.getDay() + 1 : "0" + (today.getDay() + 1);
+        let year = today.getFullYear();
+        let hour = (today.getHours() + "").length == 2 ? today.getHours() : "0" + today.getHours();
+        let minute = (today.getMinutes() + "").length == 2 ? today.getMinutes() : "0" + today.getMinutes();
+        let second = (today.getSeconds() + "").length == 2 ? today.getSeconds() : "0" + today.getSeconds();
+
+        format = format.replace("M", month);
+        format = format.replace("d", day);
+        format = format.replace("y", year);
+        format = format.replace("h", hour);
+        format = format.replace("m", minute);
+        format = format.replace("s", second);
+
+        clock.html(format);
+    });
+}
+
+function sidenavController() {
+    $(".tui-sidenav-button").click(function() {
+        let sidenav = $(".tui-sidenav");
+        if(sidenav.hasClass("active")) {
+            $(".tui-sidenav").removeClass("active");
+        } else {
+            $(".tui-sidenav").addClass("active");
+        }
+    });
+}

src/mixins.scss

@@ -0,0 +1,7 @@
+@mixin disable-select {
+    user-select: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}

src/plugins/normalizer.scss

@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}

src/styles/colors.scss

@@ -0,0 +1,169 @@
+@import '../variables.scss';
+
+/* Theme */
+.primary                        { background-color: $primary }
+.primary-text                   { color: $primary }
+.primary-border                 { border-color: $primary }
+.primary-hover:hover            { background-color: $primary }
+.primary-text-hover:hover       { color: $primary }
+.primary-border-hover:hover     { border-color: $primary }
+
+.secondary                      { background-color: $secondary }
+.secondary-text                 { color: $secondary }
+.secondary-border               { border-color: $secondary }
+.secondary-hover:hover          { background-color: $secondary }
+.secondary-text-hover:hover     { color: $secondary }
+.secondary-border-hover:hover   { border-color: $secondary }
+
+.success                        { background-color: $success }
+.success-text                   { color: $success }
+.success-border                 { border-color: $success }
+.success-hover:hover            { background-color: $success }
+.success-text-hover:hover       { color: $success }
+.success-border-hover:hover     { border-color: $success }
+
+.danger                         { background-color: $danger }
+.danger-text                    { color: $danger }
+.danger-border                  { border-color: $danger }
+.danger-hover:hover             { background-color: $danger }
+.danger-text-hover:hover        { color: $danger }
+.danger-border-hover:hover      { border-color: $danger }
+
+.warning                        { background-color: $warning }
+.warning-text                   { color: $warning }
+.warning-border                 { border-color: $warning }
+.warning-hover:hover            { background-color: $warning }
+.warning-text-hover:hover       { color: $warning }
+.warning-border-hover:hover     { border-color: $warning }
+
+.info                           { background-color: $info }
+.info-text                      { color: $info }
+.info-border                    { border-color: $info }
+.info-hover:hover               { background-color: $info }
+.info-text-hover:hover          { color: $info }
+.info-border-hover:hover        { border-color: $info }
+
+/* 168 */
+.black-168                      {background-color: rgb(0, 0, 0)!important}
+.blue-168                       {background-color: rgb(0, 0, 168)!important}
+.green-168                      {background-color: rgb(0, 168, 0)!important}
+.cyan-168                       {background-color: rgb(0, 168, 168)!important}
+.red-168                        {background-color: rgb(168, 0, 0)!important}
+.purple-168                     {background-color: rgb(168, 0, 168)!important}
+.yellow-168                     {background-color: rgb(168, 168, 0)!important}
+.white-168                      {background-color: rgb(168, 168, 168)!important}
+
+.black-168-text                 {color: rgb(0, 0, 0)!important}
+.blue-168-text                  {color: rgb(0, 0, 168)!important}
+.green-168-text                 {color: rgb(0, 168, 0)!important}
+.cyan-168-text                  {color: rgb(0, 168, 168)!important}
+.red-168-text                   {color: rgb(168, 0, 0)!important}
+.purple-168-text                {color: rgb(168, 0, 168)!important}
+.yellow-168-text                {color: rgb(168, 168, 0)!important}
+.white-168-text                 {color: rgb(168, 168, 168)!important}
+
+.black-168-border               {border-color: rgb(0, 0, 0)!important}
+.blue-168-border                {border-color: rgb(0, 0, 168)!important}
+.green-168-border               {border-color: rgb(0, 168, 0)!important}
+.cyan-168-border                {border-color: rgb(0, 168, 168)!important}
+.red-168-border                 {border-color: rgb(168, 0, 0)!important}
+.purple-168-border              {border-color: rgb(168, 0, 168)!important}
+.yellow-168-border              {border-color: rgb(168, 168, 0)!important}
+.white-168-border               {border-color: rgb(168, 168, 168)!important}
+
+.black-168-hover:hover          {background-color: rgb(0, 0, 0)!important}
+.blue-168-hover:hover           {background-color: rgb(0, 0, 168)!important}
+.green-168-hover:hover          {background-color: rgb(0, 168, 0)!important}
+.cyan-168-hover:hover           {background-color: rgb(0, 168, 168)!important}
+.red-168-hover:hover            {background-color: rgb(168, 0, 0)!important}
+.purple-168-hover:hover         {background-color: rgb(168, 0, 168)!important}
+.yellow-168-hover:hover         {background-color: rgb(168, 168, 0)!important}
+.white-168-hover:hover          {background-color: rgb(168, 168, 168)!important}
+
+.black-168-text-hover:hover     {color: rgb(0, 0, 0)!important}
+.blue-168-text-hover:hover      {color: rgb(0, 0, 168)!important}
+.green-168-text-hover:hover     {color: rgb(0, 168, 0)!important}
+.cyan-168-text-hover:hover      {color: rgb(0, 168, 168)!important}
+.red-168-text-hover:hover       {color: rgb(168, 0, 0)!important}
+.purple-text-168-hover:hover    {color: rgb(168, 0, 168)!important}
+.yellow-text-168-hover:hover    {color: rgb(168, 168, 0)!important}
+.white-text-168-hover:hover     {color: rgb(168, 168, 168)!important}
+
+.black-168-border-hover:hover   {border-color: rgb(0, 0, 0)!important}
+.blue-168-border-hover:hover    {border-color: rgb(0, 0, 168)!important}
+.green-168-border-hover:hover   {border-color: rgb(0, 168, 0)!important}
+.cyan-168-border-hover:hover    {border-color: rgb(0, 168, 168)!important}
+.red-168-border-hover:hover     {border-color: rgb(168, 0, 0)!important}
+.purple-168-border-hover:hover  {border-color: rgb(168, 0, 168)!important}
+.yellow-168-border-hover:hover  {border-color: rgb(168, 168, 0)!important}
+.white-168-border-hover:hover   {border-color: rgb(168, 168, 168)!important}
+
+/* 255 */
+.black-255                      {background-color: rgb(0, 0, 0)!important}
+.blue-255                       {background-color: rgb(0, 0, 255)!important}
+.green-255                      {background-color: rgb(0, 255, 0)!important}
+.cyan-255                       {background-color: rgb(0, 255, 255)!important}
+.red-255                        {background-color: rgb(255, 0, 0)!important}
+.purple-255                     {background-color: rgb(255, 0, 255)!important}
+.yellow-255                     {background-color: rgb(255, 255, 0)!important}
+.white-255                      {background-color: rgb(255, 255, 255)!important}
+
+.black-255-text                 {color: rgb(0, 0, 0)!important}
+.blue-255-text                  {color: rgb(0, 0, 255)!important}
+.green-255-text                 {color: rgb(0, 255, 0)!important}
+.cyan-255-text                  {color: rgb(0, 255, 255)!important}
+.red-255-text                   {color: rgb(255, 0, 0)!important}
+.purple-255-text                {color: rgb(255, 0, 255)!important}
+.yellow-255-text                {color: rgb(255, 255, 0)!important}
+.white-255-text                 {color: rgb(255, 255, 255)!important}
+
+.black-255-border               {border-color: rgb(0, 0, 0)!important}
+.blue-255-border                {border-color: rgb(0, 0, 255)!important}
+.green-255-border               {border-color: rgb(0, 255, 0)!important}
+.cyan-255-border                {border-color: rgb(0, 255, 255)!important}
+.red-255-border                 {border-color: rgb(255, 0, 0)!important}
+.purple-255-border              {border-color: rgb(255, 0, 255)!important}
+.yellow-255-border              {border-color: rgb(255, 255, 0)!important}
+.white-255-border               {border-color: rgb(255, 255, 255)!important}
+
+.black-255-hover:hover          {background-color: rgb(0, 0, 0)!important}
+.blue-255-hover:hover           {background-color: rgb(0, 0, 255)!important}
+.green-255-hover:hover          {background-color: rgb(0, 255, 0)!important}
+.cyan-255-hover:hover           {background-color: rgb(0, 255, 255)!important}
+.red-255-hover:hover            {background-color: rgb(255, 0, 0)!important}
+.purple-255-hover:hover         {background-color: rgb(255, 0, 255)!important}
+.yellow-255-hover:hover         {background-color: rgb(255, 255, 0)!important}
+.white-255-hover:hover          {background-color: rgb(255, 255, 255)!important}
+
+.black-255-text-hover:hover     {color: rgb(0, 0, 0)!important}
+.blue-255-text-hover:hover      {color: rgb(0, 0, 255)!important}
+.green-255-text-hover:hover     {color: rgb(0, 255, 0)!important}
+.cyan-255-text-hover:hover      {color: rgb(0, 255, 255)!important}
+.red-255-text-hover:hover       {color: rgb(255, 0, 0)!important}
+.purple-text-255-hover:hover    {color: rgb(255, 0, 255)!important}
+.yellow-text-255-hover:hover    {color: rgb(255, 255, 0)!important}
+.white-text-255-hover:hover     {color: rgb(255, 255, 255)!important}
+
+.black-255-border-hover:hover   {border-color: rgb(0, 0, 0)!important}
+.blue-255-border-hover:hover    {border-color: rgb(0, 0, 255)!important}
+.green-255-border-hover:hover   {border-color: rgb(0, 255, 0)!important}
+.cyan-255-border-hover:hover    {border-color: rgb(0, 255, 255)!important}
+.red-255-border-hover:hover     {border-color: rgb(255, 0, 0)!important}
+.purple-255-border-hover:hover  {border-color: rgb(255, 0, 255)!important}
+.yellow-255-border-hover:hover  {border-color: rgb(255, 255, 0)!important}
+.white-255-border-hover:hover   {border-color: rgb(255, 255, 255)!important}
+
+/* Misc */
+.black                      { background-color: black; }
+.black-text                 { color: black }
+.black-border               { border-color: black; }
+.black-hover:hover          { background-color: black; }
+.black-text-hover:hover     { color: black }
+.black-border-hover:hover   { border-color: black; }
+
+.white                      { background-color: white; }
+.white-text                 { color: white }
+.white-border               { border-color: white; }
+.white-hover:hover          { background-color: white; }
+.white-text-hover:hover     { color: white }
+.white-border-hover:hover   { border-color: white; }

src/styles/global.scss

@@ -0,0 +1,54 @@
+@import '../variables.scss';
+@font-face {
+  font-family: 'DOS';
+  src: url('./fonts/Perfect DOS VGA 437 Win.ttf');
+}
+
+/* Global Definitions */
+html {
+    font-family: $font, 'monospace';
+    font-size: $font-size;
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0px;
+}
+
+*, *:before, *:after {
+    font-family: inherit;
+    font-size: inherit;
+    box-sizing: inherit;
+}
+
+ul {
+    margin: 0px;
+    padding: 0px;
+    list-style-type: none;
+}
+
+ul li {
+    list-style-type: none;
+}
+
+ul li a {
+    display: block;
+}
+
+a {
+    color: inherit;
+    text-decoration: none;
+}
+
+span {
+    margin: 0px;
+}
+
+hr {
+    border: none;
+    border-bottom: 2px solid rgb(255, 255, 255);
+}
+
+input, select, textarea {
+    width: 200px;
+}

src/styles/media.scss

@@ -0,0 +1,62 @@
+@import '../variables.scss';
+
+.hide-on-small-only, .hide-on-small-and-down {
+  @media #{$small-and-down} {
+    display: none !important;
+  }
+}
+.hide-on-med-and-down {
+  @media #{$medium-and-down} {
+    display: none !important;
+  }
+}
+.hide-on-med-and-up {
+  @media #{$medium-and-up} {
+    display: none !important;
+  }
+}
+.hide-on-med-only {
+  @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
+    display: none !important;
+  }
+}
+.hide-on-large-only {
+  @media #{$large-and-up} {
+    display: none !important;
+  }
+}
+.hide-on-extra-large-only {
+  @media #{$extra-large-and-up} {
+    display: none !important;
+  }
+}
+.show-on-extra-large {
+  @media #{$extra-large-and-up} {
+    display: block !important;
+  }
+}
+.show-on-large {
+  @media #{$large-and-up} {
+    display: block !important;
+  }
+}
+.show-on-medium {
+  @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
+    display: block !important;
+  }
+}
+.show-on-small {
+  @media #{$small-and-down} {
+    display: block !important;
+  }
+}
+.show-on-medium-and-up {
+  @media #{$medium-and-up} {
+    display: block !important;
+  }
+}
+.show-on-medium-and-down {
+  @media #{$medium-and-down} {
+    display: block !important;
+  }
+}

src/styles/shadow.scss

@@ -0,0 +1,23 @@
+.tui-shadow, .tui-shadow-1 {
+    box-shadow: 10px 10px black!important;
+}
+
+.tui-shadow-2 {
+    box-shadow: 15px 15px black;
+}
+
+.tui-shadow-3 {
+    box-shadow: 20px 20px black;
+}
+
+.tui-shadow-4 {
+    box-shadow: 25px 25px black;
+}
+
+.tui-shadow-5 {
+    box-shadow: 30px 30px black;
+}
+
+.tui-no-shadow {
+    box-shadow: none!important;
+}

src/styles/textures.scss

@@ -0,0 +1,8 @@
+.tui-white-bg {
+    background-image: url("images/bg.png");
+    background-repeat: repeat;
+}
+.tui-blue-bg {
+    background-image: url("images/bg-black.png");
+    background-repeat: repeat;
+}

src/styles/utils.scss

@@ -0,0 +1,68 @@
+@import '../mixins.scss';
+
+.tui-no-padding {
+    padding: 0px!important;
+}
+
+.left {
+    float: left!important;
+}
+.right {
+    float: right!important;
+}
+.center {
+    text-align: center;
+}
+.left-align {
+    text-align: left;
+}
+.right-align {
+    text-align: right;
+}
+.center-align {
+    text-align: center;
+}
+
+.full-width {
+    width: 100%!important;
+}
+.full-height {
+    height: 100%!important;
+}
+
+.inline {
+    display: inline!important;
+}
+.block {
+    display: block!important;
+}
+
+.fixed {
+    position: fixed!important;
+}
+.absolute {
+    position: absolute!important;
+}
+.relative {
+    position: relative!important;
+}
+.static {
+    position: static!important;
+}
+
+.tui-shortcut {
+    float: right;
+}
+.tui-content {
+    padding: 12px;
+}
+.tui-disable-select {
+    @include disable-select;
+}
+
+.texturized {
+    background-image: url('./images/bg.png');
+    }
+.texturized-black {
+    background-image: url('./images/bg-black.png');
+}

src/tuicss.scss

@@ -0,0 +1,28 @@
+/* Components */
+@import './components/button.scss';
+@import './components/checkbox.scss';
+@import './components/divider.scss';
+@import './components/dropdown.scss';
+@import './components/fieldset.scss';
+@import './components/input.scss';
+@import './components/navbar.scss';
+@import './components/panel.scss';
+@import './components/progressbar.scss';
+@import './components/radio.scss';
+@import './components/scrollbar.scss';
+@import './components/sidenav.scss';
+@import './components/statusbar.scss';
+@import './components/table.scss';
+@import './components/tablegrid.scss';
+@import './components/tabs.scss';
+@import './components/textarea.scss';
+@import './components/window.scss';
+@import './components/screen.scss';
+@import './components/date.scss';
+
+/* Styles */
+@import './styles/colors.scss';
+@import './styles/global.scss';
+@import './styles/shadow.scss';
+@import './styles/textures.scss';
+@import './styles/utils.scss';

src/variables.scss

@@ -0,0 +1,31 @@
+/* Font (Options: 'Lucida Console' or 'DOS') */
+$font: 'Lucida Console';
+$font-size: 18px;
+
+/* Characters */
+$checkbox-on: '[√]';
+$checkbox-off: '[\00a0]';
+$radio-on: '(•)';
+$radio-off: '(\00a0)';
+
+/* Theme */
+$primary: rgb(255, 255, 255);
+$secondary: rgb(0, 0, 168);
+$success: rgb(0, 168, 0);
+$danger: rgb(168, 0, 0);
+$warning: rgb(168, 168, 0);
+$info: rgb(0, 168, 168);
+
+/* Responsive */
+$small-screen-up: 601px;
+$medium-screen-up: 993px;
+$large-screen-up: 1201px;
+$small-screen: 600px;
+$medium-screen: 992px;
+$large-screen: 1200px;
+$medium-and-up: "only screen and (min-width : #{$small-screen-up})";
+$large-and-up: "only screen and (min-width : #{$medium-screen-up})";
+$extra-large-and-up: "only screen and (min-width : #{$large-screen-up})";
+$small-and-down: "only screen and (max-width : #{$small-screen})";
+$medium-and-down: "only screen and (max-width : #{$medium-screen})";
+$medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})";