diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b512c09 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules \ No newline at end of file diff --git a/dist/fonts/Perfect DOS VGA 437 Win.ttf b/dist/fonts/Perfect DOS VGA 437 Win.ttf new file mode 100644 index 0000000..d03b1c5 Binary files /dev/null and b/dist/fonts/Perfect DOS VGA 437 Win.ttf differ diff --git a/dist/fonts/Perfect DOS VGA 437.ttf b/dist/fonts/Perfect DOS VGA 437.ttf new file mode 100644 index 0000000..f5cbfc0 Binary files /dev/null and b/dist/fonts/Perfect DOS VGA 437.ttf differ diff --git a/dist/fonts/dos437.txt b/dist/fonts/dos437.txt new file mode 100644 index 0000000..d4860e2 --- /dev/null +++ b/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^ +------------------------------------------------------------------------------- diff --git a/TuiCss/images/bg-black.png b/dist/images/bg-black.png similarity index 100% rename from TuiCss/images/bg-black.png rename to dist/images/bg-black.png diff --git a/TuiCss/images/bg.png b/dist/images/bg.png similarity index 100% rename from TuiCss/images/bg.png rename to dist/images/bg.png diff --git a/TuiCss/images/scroll.png b/dist/images/scroll.png similarity index 100% rename from TuiCss/images/scroll.png rename to dist/images/scroll.png diff --git a/dist/tuicss.css b/dist/tuicss.css new file mode 100644 index 0000000..b1a65c5 --- /dev/null +++ b/dist/tuicss.css @@ -0,0 +1,1052 @@ +@charset "UTF-8"; +/* Components */ +.tui-button { + display: inline-block; + outline: 0; + padding: 1px 10px; + background-color: #00a800; + color: black; + border: none; + cursor: pointer; + text-align: center; + box-shadow: 10px 10px black; + user-select: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; } + +.tui-button:active { + background-color: #00a8a8 !important; + color: black !important; + box-shadow: none !important; } + +.tui-button:focus { + color: cyan !important; } + +/* Font (Options: 'Lucida Console' or 'DOS') */ +/* Characters */ +/* Theme */ +/* Responsive */ +.tui-checkbox { + display: block; + position: relative; + cursor: pointer; + color: white; + padding-left: 30px; + user-select: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; } + +.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: "[√]"; + color: cyan; } + +.tui-checkbox input:not(checked) ~ span::after { + content: "[ ]"; } + +.tui-divider { + border-bottom: 2px solid white; + display: block; } + +.tui-black-divider { + border-bottom: 2px solid black; + display: block; } + +.tui-dropdown { + position: relative; + display: inline-block; + cursor: pointer; + user-select: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; } + +.tui-dropdown-content { + display: none; + position: absolute; + background-color: #a8a8a8; + 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; } + +.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; } + .tui-fieldset-statusbar.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: cyan !important; } + +.tui-input { + background-color: black; + color: white; + outline: 0; + border: none; + padding: 1px; } + +.tui-input:focus { + background-color: yellow !important; + color: black !important; } + +.tui-nav { + width: 100%; + background-color: #a8a8a8; + 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; + user-select: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; } + +.tui-nav ul li:hover { + background-color: #00a800; } + +.tui-panel { + background-color: #0000a8; + 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; } + +.tui-progress { + display: block; + position: relative; + height: 16px; + width: 200px; + background-color: #00a8a8; + overflow: hidden; } + +.tui-progress span { + position: absolute; + left: 0px; + background-color: cyan; + height: 16px; + display: inline-block; } + +.tui-progress .tui-indeterminate { + position: absolute; + left: 0px; + background-color: cyan; + 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%; } } + +/* Font (Options: 'Lucida Console' or 'DOS') */ +/* Characters */ +/* Theme */ +/* Responsive */ +.tui-radio { + display: block; + position: relative; + cursor: pointer; + color: white; + padding-left: 30px; + user-select: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; } + +.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: "(•)"; + color: cyan !important; } + +.tui-radio input:not(checked) ~ span:after { + content: "( )"; } + +::-webkit-scrollbar { + width: 10px; } + +::-webkit-scrollbar-track { + background-image: url("images/scroll.png"); + background-repeat: repeat; } + +::-webkit-scrollbar-thumb { + background-color: #00a8a8; } + +::-webkit-scrollbar-thumb:hover { + background-color: #00a8a8; } + +.tui-sidenav { + position: fixed; + top: 0px; + left: 0px; + background-color: #00a8a8; + min-width: 200px; + box-shadow: 10px 10px black !important; + padding: 6px; + z-index: 10; + height: 100%; + z-index: 8; + display: none; } + .tui-sidenav.right { + left: initial; + right: 0px; } + .tui-sidenav.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; + user-select: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; } + +.tui-sidenav ul li:hover { + background-color: yellow; } + +.tui-sidenav-button { + cursor: pointer; + user-select: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; } + +.tui-statusbar { + width: 100%; + background-color: #a8a8a8; + 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: #0000a8; + color: white; } + +.tui-statusbar ul li a { + user-select: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; } + +.tui-statusbar-divider { + border-right: 2px black solid; + display: inline; + margin: 0px 3px; } + +.tui-table { + border: 2px solid #a8a8a8; + padding: 5px; + border-collapse: collapse; } + +.tui-table-hover tbody tr:hover { + background-color: cyan; + color: black; } + +.tui-table tbody { + background-color: inherit; + color: white; } + +.tui-table tbody tr td { + border-right: 2px solid #a8a8a8; + padding: 0px 2px; } + +.tui-table thead { + background-color: inherit; + color: yellow; + text-align: center; } + +.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; } + +.tui-tabs { + background-color: #0000a8; + width: 100%; + padding: 0px 10px 0px 10px; } + +.tui-tabs ul li { + display: inline-block; } + +.tui-tabs ul li a { + display: block; + user-select: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; } + +.tui-tab { + padding: 2px 10px 0px 10px; + color: #a8a8a8; + cursor: pointer; } + .tui-tab.active { + background-color: #a8a8a8; + color: #0000a8; } + +.tui-tab-content { + display: none; } + +.tui-textarea { + background-color: inherit; + border: none; + padding: 0px; + color: yellow; + outline: none; } + +.tui-window { + background-color: #0000a8; + padding: 1px; + display: inline-block; + position: relative; + box-shadow: 10px 10px black; + color: white; } + +.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; } + .tui-screen-640-360.bordered, + .tui-screen-800-600.bordered, + .tui-screen-1024-768.bordered { + border: 2px solid black; } + +.tui-date { + padding: 1px 0px 1px 0px; + margin-right: 10px; + float: right; } + +/* Styles */ +/* Font (Options: 'Lucida Console' or 'DOS') */ +/* Characters */ +/* Theme */ +/* Responsive */ +/* Theme */ +.primary { + background-color: white; } + +.primary-text { + color: white; } + +.primary-border { + border-color: white; } + +.primary-hover:hover { + background-color: white; } + +.primary-text-hover:hover { + color: white; } + +.primary-border-hover:hover { + border-color: white; } + +.secondary { + background-color: #0000a8; } + +.secondary-text { + color: #0000a8; } + +.secondary-border { + border-color: #0000a8; } + +.secondary-hover:hover { + background-color: #0000a8; } + +.secondary-text-hover:hover { + color: #0000a8; } + +.secondary-border-hover:hover { + border-color: #0000a8; } + +.success { + background-color: #00a800; } + +.success-text { + color: #00a800; } + +.success-border { + border-color: #00a800; } + +.success-hover:hover { + background-color: #00a800; } + +.success-text-hover:hover { + color: #00a800; } + +.success-border-hover:hover { + border-color: #00a800; } + +.danger { + background-color: #a80000; } + +.danger-text { + color: #a80000; } + +.danger-border { + border-color: #a80000; } + +.danger-hover:hover { + background-color: #a80000; } + +.danger-text-hover:hover { + color: #a80000; } + +.danger-border-hover:hover { + border-color: #a80000; } + +.warning { + background-color: #a8a800; } + +.warning-text { + color: #a8a800; } + +.warning-border { + border-color: #a8a800; } + +.warning-hover:hover { + background-color: #a8a800; } + +.warning-text-hover:hover { + color: #a8a800; } + +.warning-border-hover:hover { + border-color: #a8a800; } + +.info { + background-color: #00a8a8; } + +.info-text { + color: #00a8a8; } + +.info-border { + border-color: #00a8a8; } + +.info-hover:hover { + background-color: #00a8a8; } + +.info-text-hover:hover { + color: #00a8a8; } + +.info-border-hover:hover { + border-color: #00a8a8; } + +/* 168 */ +.black-168 { + background-color: black !important; } + +.blue-168 { + background-color: #0000a8 !important; } + +.green-168 { + background-color: #00a800 !important; } + +.cyan-168 { + background-color: #00a8a8 !important; } + +.red-168 { + background-color: #a80000 !important; } + +.purple-168 { + background-color: #a800a8 !important; } + +.yellow-168 { + background-color: #a8a800 !important; } + +.white-168 { + background-color: #a8a8a8 !important; } + +.black-168-text { + color: black !important; } + +.blue-168-text { + color: #0000a8 !important; } + +.green-168-text { + color: #00a800 !important; } + +.cyan-168-text { + color: #00a8a8 !important; } + +.red-168-text { + color: #a80000 !important; } + +.purple-168-text { + color: #a800a8 !important; } + +.yellow-168-text { + color: #a8a800 !important; } + +.white-168-text { + color: #a8a8a8 !important; } + +.black-168-border { + border-color: black !important; } + +.blue-168-border { + border-color: #0000a8 !important; } + +.green-168-border { + border-color: #00a800 !important; } + +.cyan-168-border { + border-color: #00a8a8 !important; } + +.red-168-border { + border-color: #a80000 !important; } + +.purple-168-border { + border-color: #a800a8 !important; } + +.yellow-168-border { + border-color: #a8a800 !important; } + +.white-168-border { + border-color: #a8a8a8 !important; } + +.black-168-hover:hover { + background-color: black !important; } + +.blue-168-hover:hover { + background-color: #0000a8 !important; } + +.green-168-hover:hover { + background-color: #00a800 !important; } + +.cyan-168-hover:hover { + background-color: #00a8a8 !important; } + +.red-168-hover:hover { + background-color: #a80000 !important; } + +.purple-168-hover:hover { + background-color: #a800a8 !important; } + +.yellow-168-hover:hover { + background-color: #a8a800 !important; } + +.white-168-hover:hover { + background-color: #a8a8a8 !important; } + +.black-168-text-hover:hover { + color: black !important; } + +.blue-168-text-hover:hover { + color: #0000a8 !important; } + +.green-168-text-hover:hover { + color: #00a800 !important; } + +.cyan-168-text-hover:hover { + color: #00a8a8 !important; } + +.red-168-text-hover:hover { + color: #a80000 !important; } + +.purple-text-168-hover:hover { + color: #a800a8 !important; } + +.yellow-text-168-hover:hover { + color: #a8a800 !important; } + +.white-text-168-hover:hover { + color: #a8a8a8 !important; } + +.black-168-border-hover:hover { + border-color: black !important; } + +.blue-168-border-hover:hover { + border-color: #0000a8 !important; } + +.green-168-border-hover:hover { + border-color: #00a800 !important; } + +.cyan-168-border-hover:hover { + border-color: #00a8a8 !important; } + +.red-168-border-hover:hover { + border-color: #a80000 !important; } + +.purple-168-border-hover:hover { + border-color: #a800a8 !important; } + +.yellow-168-border-hover:hover { + border-color: #a8a800 !important; } + +.white-168-border-hover:hover { + border-color: #a8a8a8 !important; } + +/* 255 */ +.black-255 { + background-color: black !important; } + +.blue-255 { + background-color: blue !important; } + +.green-255 { + background-color: lime !important; } + +.cyan-255 { + background-color: cyan !important; } + +.red-255 { + background-color: red !important; } + +.purple-255 { + background-color: magenta !important; } + +.yellow-255 { + background-color: yellow !important; } + +.white-255 { + background-color: white !important; } + +.black-255-text { + color: black !important; } + +.blue-255-text { + color: blue !important; } + +.green-255-text { + color: lime !important; } + +.cyan-255-text { + color: cyan !important; } + +.red-255-text { + color: red !important; } + +.purple-255-text { + color: magenta !important; } + +.yellow-255-text { + color: yellow !important; } + +.white-255-text { + color: white !important; } + +.black-255-border { + border-color: black !important; } + +.blue-255-border { + border-color: blue !important; } + +.green-255-border { + border-color: lime !important; } + +.cyan-255-border { + border-color: cyan !important; } + +.red-255-border { + border-color: red !important; } + +.purple-255-border { + border-color: magenta !important; } + +.yellow-255-border { + border-color: yellow !important; } + +.white-255-border { + border-color: white !important; } + +.black-255-hover:hover { + background-color: black !important; } + +.blue-255-hover:hover { + background-color: blue !important; } + +.green-255-hover:hover { + background-color: lime !important; } + +.cyan-255-hover:hover { + background-color: cyan !important; } + +.red-255-hover:hover { + background-color: red !important; } + +.purple-255-hover:hover { + background-color: magenta !important; } + +.yellow-255-hover:hover { + background-color: yellow !important; } + +.white-255-hover:hover { + background-color: white !important; } + +.black-255-text-hover:hover { + color: black !important; } + +.blue-255-text-hover:hover { + color: blue !important; } + +.green-255-text-hover:hover { + color: lime !important; } + +.cyan-255-text-hover:hover { + color: cyan !important; } + +.red-255-text-hover:hover { + color: red !important; } + +.purple-text-255-hover:hover { + color: magenta !important; } + +.yellow-text-255-hover:hover { + color: yellow !important; } + +.white-text-255-hover:hover { + color: white !important; } + +.black-255-border-hover:hover { + border-color: black !important; } + +.blue-255-border-hover:hover { + border-color: blue !important; } + +.green-255-border-hover:hover { + border-color: lime !important; } + +.cyan-255-border-hover:hover { + border-color: cyan !important; } + +.red-255-border-hover:hover { + border-color: red !important; } + +.purple-255-border-hover:hover { + border-color: magenta !important; } + +.yellow-255-border-hover:hover { + border-color: yellow !important; } + +.white-255-border-hover:hover { + border-color: white !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; } + +/* Font (Options: 'Lucida Console' or 'DOS') */ +/* Characters */ +/* Theme */ +/* Responsive */ +@font-face { + font-family: 'DOS'; + src: url("./fonts/Perfect DOS VGA 437 Win.ttf"); } + +/* Global Definitions */ +html { + font-family: "Lucida Console", "monospace"; + font-size: 18px; + 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 white; } + +input, select, textarea { + width: 200px; } + +.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; } + +.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; } + +.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 { + user-select: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; } + +.texturized { + background-image: url("./images/bg.png"); } + +.texturized-black { + background-image: url("./images/bg-black.png"); } diff --git a/dist/tuicss.js b/dist/tuicss.js new file mode 100644 index 0000000..b10f715 --- /dev/null +++ b/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"); + } + }); +} \ No newline at end of file diff --git a/dist/tuicss.min.css b/dist/tuicss.min.css new file mode 100644 index 0000000..8149a22 --- /dev/null +++ b/dist/tuicss.min.css @@ -0,0 +1 @@ +@charset "UTF-8";.tui-button{display:inline-block;outline:0;padding:1px 10px;background-color:#00a800;color:#000;border:none;cursor:pointer;text-align:center;box-shadow:10px 10px #000;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-button:active{background-color:#00a8a8!important;color:#000!important;box-shadow:none!important}.tui-button:focus{color:#0ff!important}.tui-checkbox{display:block;position:relative;cursor:pointer;color:#fff;padding-left:30px;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-checkbox input{position:absolute;opacity:0;cursor:pointer;top:0;left:0}.tui-checkbox span{position:absolute;width:10px;height:10px;cursor:pointer;top:0;left:0}.tui-checkbox input:checked~span::after{content:"[√]";color:#0ff}.tui-checkbox input:not(checked)~span::after{content:"[ ]"}.tui-divider{border-bottom:2px solid #fff;display:block}.tui-black-divider{border-bottom:2px solid #000;display:block}.tui-dropdown{position:relative;display:inline-block;cursor:pointer;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-dropdown-content{display:none;position:absolute;background-color:#a8a8a8;min-width:200px;padding:6px;z-index:9}.tui-dropdown-content ul{border:2px #000 solid}.tui-dropdown-content ul li{display:block!important;margin:6px}.tui-dropdown:hover>.tui-dropdown-content:first-of-type{display:block}.tui-window-fieldset{border:6px #fff double;padding:10px;background-color:inherit;margin-bottom:6px}.tui-window-fieldset-no-legend{margin-top:6px}.tui-input-fieldset{border-top:6px #fff double;border-bottom:6px #fff double;border-left:2px #fff solid;border-right:2px #fff solid;padding:5px;background-color:inherit}.tui-input-fieldset:hover{border-color:#ff0!important}.tui-input-fieldset:hover legend{color:#ff0!important}.tui-border-solid{border:2px #fff solid}.tui-fieldset-button{position:absolute;top:0;right:16px;color:#fff;background-color:inherit;z-index:2;border:none;cursor:pointer;outline:0;padding:2px}.tui-fieldset-statusbar{position:absolute;bottom:0;left:16px;color:#fff;background-color:inherit;z-index:2;padding:2px}.tui-fieldset-statusbar.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:#0ff!important}.tui-input{background-color:#000;color:#fff;outline:0;border:none;padding:1px}.tui-input:focus{background-color:#ff0!important;color:#000!important}.tui-nav{width:100%;background-color:#a8a8a8;padding:0 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;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-nav ul li:hover{background-color:#00a800}.tui-panel{background-color:#0000a8;display:inline-block;color:#fff;box-shadow:10px 10px #000}.tui-panel-content{padding:12px}.tui-panel-header{padding-top:2px;display:block;background:#fff;text-align:center}.tui-progress{display:block;position:relative;height:16px;width:200px;background-color:#00a8a8;overflow:hidden}.tui-progress span{position:absolute;left:0;background-color:#0ff;height:16px;display:inline-block}.tui-progress .tui-indeterminate{position:absolute;left:0;background-color:#0ff;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%}}.tui-radio{display:block;position:relative;cursor:pointer;color:#fff;padding-left:30px;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-radio input{position:absolute;opacity:0;cursor:pointer;top:0;left:0}.tui-radio span{position:absolute;width:10px;height:10px;cursor:pointer;top:0;left:0}.tui-radio input:checked~span:after{content:"(•)";color:#0ff!important}.tui-radio input:not(checked)~span:after{content:"( )"}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background-image:url(images/scroll.png);background-repeat:repeat}::-webkit-scrollbar-thumb{background-color:#00a8a8}::-webkit-scrollbar-thumb:hover{background-color:#00a8a8}.tui-sidenav{position:fixed;top:0;left:0;background-color:#00a8a8;min-width:200px;box-shadow:10px 10px #000!important;padding:6px;z-index:10;height:100%;z-index:8;display:none}.tui-sidenav.right{left:initial;right:0}.tui-sidenav.active{display:block!important}.tui-sidenav ul{margin-top:20px;border:2px #000 solid}.tui-sidenav ul li{display:block;margin:6px}.tui-sidenav ul li a{display:block;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-sidenav ul li:hover{background-color:#ff0}.tui-sidenav-button{cursor:pointer;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-statusbar{width:100%;background-color:#a8a8a8;padding:0 1px;left:0;bottom:0;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:#0000a8;color:#fff}.tui-statusbar ul li a{user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-statusbar-divider{border-right:2px #000 solid;display:inline;margin:0 3px}.tui-table{border:2px solid #a8a8a8;padding:5px;border-collapse:collapse}.tui-table-hover tbody tr:hover{background-color:#0ff;color:#000}.tui-table tbody{background-color:inherit;color:#fff}.tui-table tbody tr td{border-right:2px solid #a8a8a8;padding:0 2px}.tui-table thead{background-color:inherit;color:#ff0;text-align:center}.tui-table-grid{border-collapse:collapse;width:100%}.tui-table-grid tbody tr td,.tui-table-grid tbody tr th,.tui-table-grid thead tr td,.tui-table-grid thead tr th{border:2px solid #000;padding:10px;vertical-align:top}.tui-tabs{background-color:#0000a8;width:100%;padding:0 10px 0 10px}.tui-tabs ul li{display:inline-block}.tui-tabs ul li a{display:block;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-tab{padding:2px 10px 0 10px;color:#a8a8a8;cursor:pointer}.tui-tab.active{background-color:#a8a8a8;color:#0000a8}.tui-tab-content{display:none}.tui-textarea{background-color:inherit;border:none;padding:0;color:#ff0;outline:0}.tui-window{background-color:#0000a8;padding:1px;display:inline-block;position:relative;box-shadow:10px 10px #000;color:#fff}.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-1024-768,.tui-screen-640-360,.tui-screen-800-600{position:relative}.tui-screen-1024-768.bordered,.tui-screen-640-360.bordered,.tui-screen-800-600.bordered{border:2px solid #000}.tui-date{padding:1px 0 1px 0;margin-right:10px;float:right}.primary{background-color:#fff}.primary-text{color:#fff}.primary-border{border-color:#fff}.primary-hover:hover{background-color:#fff}.primary-text-hover:hover{color:#fff}.primary-border-hover:hover{border-color:#fff}.secondary{background-color:#0000a8}.secondary-text{color:#0000a8}.secondary-border{border-color:#0000a8}.secondary-hover:hover{background-color:#0000a8}.secondary-text-hover:hover{color:#0000a8}.secondary-border-hover:hover{border-color:#0000a8}.success{background-color:#00a800}.success-text{color:#00a800}.success-border{border-color:#00a800}.success-hover:hover{background-color:#00a800}.success-text-hover:hover{color:#00a800}.success-border-hover:hover{border-color:#00a800}.danger{background-color:#a80000}.danger-text{color:#a80000}.danger-border{border-color:#a80000}.danger-hover:hover{background-color:#a80000}.danger-text-hover:hover{color:#a80000}.danger-border-hover:hover{border-color:#a80000}.warning{background-color:#a8a800}.warning-text{color:#a8a800}.warning-border{border-color:#a8a800}.warning-hover:hover{background-color:#a8a800}.warning-text-hover:hover{color:#a8a800}.warning-border-hover:hover{border-color:#a8a800}.info{background-color:#00a8a8}.info-text{color:#00a8a8}.info-border{border-color:#00a8a8}.info-hover:hover{background-color:#00a8a8}.info-text-hover:hover{color:#00a8a8}.info-border-hover:hover{border-color:#00a8a8}.black-168{background-color:#000!important}.blue-168{background-color:#0000a8!important}.green-168{background-color:#00a800!important}.cyan-168{background-color:#00a8a8!important}.red-168{background-color:#a80000!important}.purple-168{background-color:#a800a8!important}.yellow-168{background-color:#a8a800!important}.white-168{background-color:#a8a8a8!important}.black-168-text{color:#000!important}.blue-168-text{color:#0000a8!important}.green-168-text{color:#00a800!important}.cyan-168-text{color:#00a8a8!important}.red-168-text{color:#a80000!important}.purple-168-text{color:#a800a8!important}.yellow-168-text{color:#a8a800!important}.white-168-text{color:#a8a8a8!important}.black-168-border{border-color:#000!important}.blue-168-border{border-color:#0000a8!important}.green-168-border{border-color:#00a800!important}.cyan-168-border{border-color:#00a8a8!important}.red-168-border{border-color:#a80000!important}.purple-168-border{border-color:#a800a8!important}.yellow-168-border{border-color:#a8a800!important}.white-168-border{border-color:#a8a8a8!important}.black-168-hover:hover{background-color:#000!important}.blue-168-hover:hover{background-color:#0000a8!important}.green-168-hover:hover{background-color:#00a800!important}.cyan-168-hover:hover{background-color:#00a8a8!important}.red-168-hover:hover{background-color:#a80000!important}.purple-168-hover:hover{background-color:#a800a8!important}.yellow-168-hover:hover{background-color:#a8a800!important}.white-168-hover:hover{background-color:#a8a8a8!important}.black-168-text-hover:hover{color:#000!important}.blue-168-text-hover:hover{color:#0000a8!important}.green-168-text-hover:hover{color:#00a800!important}.cyan-168-text-hover:hover{color:#00a8a8!important}.red-168-text-hover:hover{color:#a80000!important}.purple-text-168-hover:hover{color:#a800a8!important}.yellow-text-168-hover:hover{color:#a8a800!important}.white-text-168-hover:hover{color:#a8a8a8!important}.black-168-border-hover:hover{border-color:#000!important}.blue-168-border-hover:hover{border-color:#0000a8!important}.green-168-border-hover:hover{border-color:#00a800!important}.cyan-168-border-hover:hover{border-color:#00a8a8!important}.red-168-border-hover:hover{border-color:#a80000!important}.purple-168-border-hover:hover{border-color:#a800a8!important}.yellow-168-border-hover:hover{border-color:#a8a800!important}.white-168-border-hover:hover{border-color:#a8a8a8!important}.black-255{background-color:#000!important}.blue-255{background-color:#00f!important}.green-255{background-color:#0f0!important}.cyan-255{background-color:#0ff!important}.red-255{background-color:red!important}.purple-255{background-color:#ff00ff!important}.yellow-255{background-color:#ff0!important}.white-255{background-color:#fff!important}.black-255-text{color:#000!important}.blue-255-text{color:#00f!important}.green-255-text{color:#0f0!important}.cyan-255-text{color:#0ff!important}.red-255-text{color:red!important}.purple-255-text{color:#ff00ff!important}.yellow-255-text{color:#ff0!important}.white-255-text{color:#fff!important}.black-255-border{border-color:#000!important}.blue-255-border{border-color:#00f!important}.green-255-border{border-color:#0f0!important}.cyan-255-border{border-color:#0ff!important}.red-255-border{border-color:red!important}.purple-255-border{border-color:#ff00ff!important}.yellow-255-border{border-color:#ff0!important}.white-255-border{border-color:#fff!important}.black-255-hover:hover{background-color:#000!important}.blue-255-hover:hover{background-color:#00f!important}.green-255-hover:hover{background-color:#0f0!important}.cyan-255-hover:hover{background-color:#0ff!important}.red-255-hover:hover{background-color:red!important}.purple-255-hover:hover{background-color:#ff00ff!important}.yellow-255-hover:hover{background-color:#ff0!important}.white-255-hover:hover{background-color:#fff!important}.black-255-text-hover:hover{color:#000!important}.blue-255-text-hover:hover{color:#00f!important}.green-255-text-hover:hover{color:#0f0!important}.cyan-255-text-hover:hover{color:#0ff!important}.red-255-text-hover:hover{color:red!important}.purple-text-255-hover:hover{color:#ff00ff!important}.yellow-text-255-hover:hover{color:#ff0!important}.white-text-255-hover:hover{color:#fff!important}.black-255-border-hover:hover{border-color:#000!important}.blue-255-border-hover:hover{border-color:#00f!important}.green-255-border-hover:hover{border-color:#0f0!important}.cyan-255-border-hover:hover{border-color:#0ff!important}.red-255-border-hover:hover{border-color:red!important}.purple-255-border-hover:hover{border-color:#ff00ff!important}.yellow-255-border-hover:hover{border-color:#ff0!important}.white-255-border-hover:hover{border-color:#fff!important}.black{background-color:#000}.black-text{color:#000}.black-border{border-color:#000}.black-hover:hover{background-color:#000}.black-text-hover:hover{color:#000}.black-border-hover:hover{border-color:#000}.white{background-color:#fff}.white-text{color:#fff}.white-border{border-color:#fff}.white-hover:hover{background-color:#fff}.white-text-hover:hover{color:#fff}.white-border-hover:hover{border-color:#fff}@font-face{font-family:DOS;src:url("fonts/Perfect DOS VGA 437 Win.ttf")}html{font-family:"Lucida Console",monospace;font-size:18px;box-sizing:border-box}body{margin:0}*,:after,:before{font-family:inherit;font-size:inherit;box-sizing:inherit}ul{margin:0;padding:0;list-style-type:none}ul li{list-style-type:none}ul li a{display:block}a{color:inherit;text-decoration:none}span{margin:0}hr{border:none;border-bottom:2px solid #fff}input,select,textarea{width:200px}.tui-shadow,.tui-shadow-1{box-shadow:10px 10px #000!important}.tui-shadow-2{box-shadow:15px 15px #000}.tui-shadow-3{box-shadow:20px 20px #000}.tui-shadow-4{box-shadow:25px 25px #000}.tui-shadow-5{box-shadow:30px 30px #000}.tui-no-shadow{box-shadow:none!important}.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}.tui-no-padding{padding:0!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{user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.texturized{background-image:url(images/bg.png)}.texturized-black{background-image:url(images/bg-black.png)} \ No newline at end of file diff --git a/dist/tuicss.min.js b/dist/tuicss.min.js new file mode 100644 index 0000000..2f68fa7 --- /dev/null +++ b/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()}); \ No newline at end of file diff --git a/examples/bios.html b/examples/bios.html new file mode 100644 index 0000000..382d8c7 --- /dev/null +++ b/examples/bios.html @@ -0,0 +1,70 @@ + + + + + + BIOS Example + + + + + + +
+
+ BIOS +
+
+ +
+
+ + + + + + + + + + +
+
System Time.........: +
System Date.........: +
+
Legacy Diskette A...:] +
Legacy Diskette B...: +
+
Primary Master......: +
Primary Slave.......: +
Secondary Master....: +
Secondary Slave.....: +
+
Keyboard Features...: +
+
System Memory.......: +
Extended Memory.....: +
Boot-time Diagnostic: + 		Item Specified Help
+
<Tab>, <Shift-Tab> or <Enter> selects field. +
+
+
+ +
+
+ + \ No newline at end of file diff --git a/examples.html b/examples/general.html similarity index 94% rename from examples.html rename to examples/general.html index aa6221b..6ef0a6d 100644 --- a/examples.html +++ b/examples/general.html @@ -6,7 +6,9 @@ TUI - + + + @@ -66,31 +68,9 @@