Compare commits
49 Commits
v0.0.1-alp
...
no-jquery
| Author | SHA1 | Date | |
|---|---|---|---|
|
6dff41b95a | ||
|
|
64b94b4f2c | ||
|
|
d15e6415a8 | ||
|
de578dd6d4 | ||
|
|
ec84e8f727 | ||
|
|
b1c098a1dc | ||
|
|
4825bed608 | ||
|
|
bdb456fcb5 | ||
|
|
be3b8b8501 | ||
|
|
76f6f1df6a | ||
|
|
d8ef5f0425 | ||
|
|
2cfcb82555 | ||
|
|
5ae67e05c9 | ||
|
|
845713b822 | ||
|
|
9ca30ca6a8 | ||
|
|
ac9de80e9e | ||
|
|
c0634cf10b | ||
|
e7b988cce2 | ||
|
|
c9c57746bb | ||
|
|
2275806f41 | ||
|
|
56b2c99882 | ||
|
|
4c4e254c6a | ||
|
9e65ef0f6f | ||
|
|
5d2c2d94b2 | ||
|
|
1a8bbc77c0 | ||
|
|
e175f648a1 | ||
|
|
5411a40dfd | ||
|
|
2bb8771f0a | ||
|
|
97dbe17703 | ||
|
|
ac25a6edbf | ||
|
|
e505d7bc99 | ||
|
|
60e65ba52e | ||
|
|
d970177ea9 | ||
|
|
088c7d2229 | ||
|
|
379da944b1 | ||
|
|
a478627e01 | ||
|
cc375dd9f3 | ||
|
|
a256bae66e | ||
|
|
4f56845a7a | ||
|
|
dc1200a46a | ||
|
|
58417a711e | ||
|
|
6909da3c2a | ||
|
|
eb2e19f6c5 | ||
|
|
b6df894344 | ||
|
|
8bc8b091cc | ||
|
|
742991ace8 | ||
|
|
075b56fcc6 | ||
|
|
2e1b284d12 | ||
|
|
2ba52ac5e7 |
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
node_modules
|
||||
.idea
|
||||
21
LICENSE.md
Normal file
21
LICENSE.md
Normal file
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2019 Vinicius Reif Biavatti
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
328
README.md
328
README.md
@@ -1,327 +1,9 @@
|
||||
# TuiCss
|
||||
Text-based user interface CSS framework
|
||||
### Text-based user interface CSS library
|
||||
|
||||
TuiCss is a framework to create web applications using an interface based in ASCII text like MS-DOS applications. This kind of interface is very eligible because the ultra-contrast colors used. This framework was created following the <a href="https://en.wikipedia.org/wiki/Turbo_Vision">Turbo Vision UI Framework</a> and other applications based on TUI.
|
||||
TuiCss is a library focused to create web applications using an interface based in ASCII table, like MS-DOS applications. This kind of interface is very eligible because the ultra-contrast colors used and the less effects of the elements. The main framework thats is following to develop TuiCss is <a href="https://en.wikipedia.org/wiki/Turbo_Vision">Turbo Vision Framework</a> with some techniques with [box-drawing characters](https://en.wikipedia.org/wiki/Box-drawing_character), but some others frameworks were checked too, like [curses](https://en.wikipedia.org/wiki/Curses_(programming_library)), [ncurses](https://en.wikipedia.org/wiki/Ncurses), [Newt](https://en.wikipedia.org/wiki/Newt_(programming_library)), etc. Check the examples page in the wiki to see some creations!
|
||||
|
||||
|
||||
<img src="https://i.ibb.co/zhJMy1h/Tui-Css-home.png" width="600">
|
||||
|
||||
## Getting Started
|
||||
To use TuiCss, you have to download the TuiCss folder of the repository and import the tuicss.css to your html page using this tag:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="TuiCss/tuicss.css" />
|
||||
```
|
||||
|
||||
Don't forget to keep the images folder in the same folder of the css file because the css uses this folder as reference to get the images for some classes.
|
||||
|
||||
## Components
|
||||
|
||||
This is a simple doc for the avaiable components in the framework. For more details, download the repository and run example.html to check the full code.
|
||||
|
||||
### Navbar
|
||||
<img src="https://image.ibb.co/fACzUp/tui_nav.png"/>
|
||||
|
||||
```html
|
||||
<nav class="tui-nav tui-nav-fixed">
|
||||
<span class="tui-clock" id="clock"></span>
|
||||
<ul>
|
||||
<li>
|
||||
...
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
```
|
||||
|
||||
### Navbar Menu
|
||||
<img src="https://image.ibb.co/kv0Tpp/tui_menu.png"/>
|
||||
|
||||
```html
|
||||
<li class="tui-dropdown">
|
||||
<span class="red-168-text">F</span>ile
|
||||
<div class="tui-dropdown-content">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">O</span>pen
|
||||
<span class="tui-shortcut">ctrl+o</span>
|
||||
</a>
|
||||
</li>
|
||||
<div class="tui-black-divider"></div>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">Q</span>uit
|
||||
<span class="tui-shortcut">F4</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
```
|
||||
|
||||
### Sidenav
|
||||
<img src="https://image.ibb.co/ci06aU/tui_sidenav.png"/>
|
||||
|
||||
```html
|
||||
<nav class="tui-sidenav">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#!">Open</a>
|
||||
...
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
```
|
||||
|
||||
### Window
|
||||
<img src="https://image.ibb.co/jcRMs9/tui_window.png"/>
|
||||
|
||||
```html
|
||||
<div class="tui-window">
|
||||
<fieldset class="tui-window-fieldset">
|
||||
<legend>Window</legend>
|
||||
<button class="tui-fieldset-button"><span class="green-255-text">■</span></button>
|
||||
...
|
||||
</fieldset>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Fieldset Status Bar
|
||||
<img src="https://image.ibb.co/grD4ep/tui_fieldset_statusbar.png"/>
|
||||
|
||||
```html
|
||||
<div class="tui-window">
|
||||
<fieldset class="tui-window-fieldset">
|
||||
...
|
||||
<div class="tui-fieldset-statusbar">Text format: UTF-8</div>
|
||||
...
|
||||
</fieldset>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Buttons
|
||||
<img src="https://image.ibb.co/dqaLkU/tui_buttons.png" />
|
||||
|
||||
```html
|
||||
<a href="#!" class="tui-button">button</a>
|
||||
<button class="tui-button">button</button>
|
||||
```
|
||||
|
||||
### Status Bar
|
||||
<img src="https://image.ibb.co/egTHX9/tui_statusbar.png" />
|
||||
|
||||
```html
|
||||
<div class="tui-statusbar">
|
||||
<ul>
|
||||
<li><a href="#!"><span class="red-168-text">F1</span> Help</a></li>
|
||||
<li><a href="#!"><span class="red-168-text">F2</span> Shell</a></li>
|
||||
<li><a href="#!"><span class="red-168-text">F3</span> Open</a></li>
|
||||
<span class="tui-statusbar-divider"></span>
|
||||
<li><a href="#!"><span class="red-168-text">F10</span> Exit</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Menu List
|
||||
<img src="https://image.ibb.co/ihphX9/tui_menu_list.png" />
|
||||
|
||||
```html
|
||||
<div class="tui-window">
|
||||
<fieldset class="tui-window-fieldset tui-window-fieldset-no-legend tui-border-solid">
|
||||
<ul>
|
||||
<li class="cyan-255-hover black-255-text-hover">
|
||||
<span class="tui-shortcut">A</span>
|
||||
<span>Register Tables</span>
|
||||
</li>
|
||||
<li class="cyan-255-hover black-255-text-hover">
|
||||
<span class="tui-shortcut">B</span>
|
||||
<span>Quit</span>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Panel
|
||||
<img src="https://image.ibb.co/dapGs9/tui_panel.png" />
|
||||
|
||||
```html
|
||||
<div class="tui-panel">
|
||||
...
|
||||
</div>
|
||||
```
|
||||
|
||||
### Inputs
|
||||
<img src="https://image.ibb.co/fCRFKp/tui_inputs.png" />
|
||||
|
||||
```html
|
||||
<!-- Input -->
|
||||
<input class="tui-input" type="text" />
|
||||
<input class="tui-input" type="number" />
|
||||
<input class="tui-input" type="email" />
|
||||
<input class="tui-input" type="password" />
|
||||
<input class="tui-input" type="color" />
|
||||
<input class="tui-input" type="date" />
|
||||
<input class="tui-input" type="datetime-local" />
|
||||
|
||||
<!-- Select -->
|
||||
<select class="tui-input">
|
||||
<option selected>-- SELECT --</option>
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
<select class="tui-input" multiple>
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
|
||||
<!-- Checkbox -->
|
||||
<label class="tui-checkbox">
|
||||
Checkbox
|
||||
<input type="checkbox"/>
|
||||
<span></span>
|
||||
</label>
|
||||
|
||||
<!-- Radio -->
|
||||
<fieldset class="tui-input-fieldset">
|
||||
<legend>Radios</legend>
|
||||
<label class="tui-radio">
|
||||
Option 1
|
||||
<input type="radio" name="radio" checked />
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-radio">
|
||||
Option 2
|
||||
<input type="radio" name="radio" />
|
||||
<span></span>
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<!-- Textarea -->
|
||||
<textarea class="tui-input"></textarea>
|
||||
```
|
||||
|
||||
### Window Textarea
|
||||
<img src="https://image.ibb.co/gzkxX9/tui_win_textarea.png" />
|
||||
|
||||
```html
|
||||
<div class="tui-window">
|
||||
<fieldset class="tui-window-fieldset">
|
||||
<legend align="center">FILE.C</legend>
|
||||
<button class="tui-fieldset-button"><span class="green-255-text">↑</span></button>
|
||||
<button class="tui-fieldset-button tui-fieldset-button-left"><span class="green-255-text">■</span></button>
|
||||
<textarea class="tui-textarea"></textarea>
|
||||
</fieldset>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Table
|
||||
<img src="https://image.ibb.co/cN8nzp/tui_table.png" />
|
||||
|
||||
```html
|
||||
<table class="tui-table tui-table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Name</td>
|
||||
<td>Size</td>
|
||||
<td>MTime</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>/.mc</td>
|
||||
<td>1024</td>
|
||||
<td>Apr 24 01:24</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
|
||||
### Progress Bar
|
||||
<img src="https://image.ibb.co/moYRs9/tui_progress.png" />
|
||||
|
||||
```html
|
||||
<!-- Determinate -->
|
||||
<div class="tui-progress">
|
||||
<span style="width: 25%"></span>
|
||||
</div>
|
||||
|
||||
<!-- Indeterminate -->
|
||||
<div class="tui-progress">
|
||||
<span class="tui-indeterminate"></span>
|
||||
</div>
|
||||
```
|
||||
|
||||
## CSS Classes
|
||||
| Class | Description |
|
||||
| --- | --- |
|
||||
| `.tui-divider` | Create a white bottom divider |
|
||||
| `.tui-black-divider` | Create a black bottom divider |
|
||||
| `.tui-no-shadow` | Remove the shadow |
|
||||
| `.tui-no-padding` | Remove padding |
|
||||
| `.tui-shadow` | Create a shadow in the element |
|
||||
| `.tui-white-bg` | Used in html tag to create a white 168 dot background |
|
||||
| `.tui-blue-bg` | Used in html tag to create a blue 168 dot background |
|
||||
| `.left` | Quick left float |
|
||||
| `.right` | Quick right float |
|
||||
| `.inline` | Quick inline display |
|
||||
| `.block` | Quick block display |
|
||||
| `.tui-shortcut` | Used in lists to put some text like shortcuts on the right side of the main text |
|
||||
| `.tui-content` | Put a default padding in the container |
|
||||
| `.tui-nav` | Create a navbar |
|
||||
| `.tui-nav-fixed` | Change the navbar to a fixed position |
|
||||
| `.tui-statusbar` | Create a status bar |
|
||||
| `.tui-statusbar-divider` | Put a vertical divider in the status bar |
|
||||
| `.tui-input` | Create a TUI theme input like inputs, selects, textareas... |
|
||||
| `.tui-button` | Create a TUI button. It can be used to a, buttons, input[type="button"] |
|
||||
| `.tui-panel` | Create a TUI panel |
|
||||
| `.tui-window` | Create a TUI window |
|
||||
| `.tui-window-fieldset` | Put the border for the TUI window |
|
||||
| `.tui-input-fieldset` | Used to create a container for the inputs like checkboxes and radios |
|
||||
| `.tui-border-solid` | Change the border like fieldset borders to a solid border |
|
||||
| `.tui-fieldset-button` | Create a action button in the fieldset like buttons to close, minimize, maximize... |
|
||||
| `.tui-fieldset-button-left` | Change the position of the fieldset button to the left side |
|
||||
| `.tui-fieldset-statusbar` | Create a bottom status bar in the fieldset |
|
||||
| `.tui-checkbox` | Create TUI checkbox |
|
||||
| `.tui-radio` | Create TUI radio |
|
||||
| `.tui-progress` | Create a TUI progress bar |
|
||||
| `.tui-indeterminate` | Set the progress bar to indeterminate property |
|
||||
| `.tui-dropdown` | Create a menu dropdown. It can be used to the navbar itens, buttons... |
|
||||
| `.tui-dropdown-content` | The content that will be displayed for the dropdown |
|
||||
| `.tui-sidenav` | Create a left sidenav. To active, just move the cursor for the left side of the screen |
|
||||
| `.tui-table` | Create a table |
|
||||
| `.tui-table-hover` | Add an hover effect for the table rows |
|
||||
| `.tui-textarea` | Create a textarea without background |
|
||||
| `.tui-clock` | Create a clock space in the navbar |
|
||||
|
||||
## CSS Colors
|
||||
| Colors | 168 Value | 255 Value |
|
||||
| --- | --- | --- |
|
||||
| `black` | `rgb(0, 0, 0)` | `rgb(0, 0, 0)` |
|
||||
| `blue` | `rgb(0, 0, 168)` | `rgb(0, 0, 255)` |
|
||||
| `green` | `rgb(0, 168, 0)` | `rgb(0, 255, 0)` |
|
||||
| `cyan` | `rgb(0, 168, 168)` | `rgb(0, 255, 255)` |
|
||||
| `red` | `rgb(168, 0, 0)` | `rgb(255, 0, 0)` |
|
||||
| `purple` | `rgb(168, 0, 168)` | `rgb(255, 0, 255)` |
|
||||
| `yellow` | `rgb(168, 168, 0)` | `rgb(255, 255, 0)` |
|
||||
| `white` |`rgb(168, 168, 168)` | `rgb(255, 255, 255)` |
|
||||
|
||||
## CSS Color Classes
|
||||
| Class | Description |
|
||||
| --- | --- |
|
||||
| `.<color>-168` | Change the background color to a specified color name with value 168 |
|
||||
| `.<color>-255` | Change the background color to a specified color name with value 255 |
|
||||
| `.<color>-168-text` | Change the foreground color to a specified color name with value 168 |
|
||||
| `.<color>-255-text` | Change the foreground color to a specified color name with value 255 |
|
||||
| `.<color>-168-border` | Change the border color to a specified color name with value 168 |
|
||||
| `.<color>-255-border` | Change the border color to a specified color name with value 255 |
|
||||
| `.<color>-168-hover` | Change the background color to a specified color name with value 168 on mouse hover |
|
||||
| `.<color>-255-hover` | Change the background color to a specified color name with value 255 on mouse hover |
|
||||
| `.<color>-168-text-hover` | Change the foreground color to a specified color name with value 168 on mouse hover |
|
||||
| `.<color>-255-text-hover` | Change the foreground color to a specified color name with value 255 on mouse hover |
|
||||
|
||||
## Credit
|
||||
TuiCss Framework © Copyright 2018<br>
|
||||
by Vinícius Reif Biavatti<br>
|
||||
VBFoundation
|
||||
### Documentation
|
||||
Check the [repository wiki](https://github.com/vinibiavatti1/TuiCss/wiki) to access the documentation, getting started, components index, examples, styles, or to know how to contribute for this project.
|
||||
|
||||
@@ -1,540 +0,0 @@
|
||||
/*
|
||||
TuiCSS - (c) Copyright 2018
|
||||
by Vinícius Reif Biavatti
|
||||
VBFoundation
|
||||
*/
|
||||
|
||||
/* 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}
|
||||
|
||||
/* 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}
|
||||
|
||||
/* GLOBAL */
|
||||
html {
|
||||
font-family: 'Lucida Console';
|
||||
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 rgb(255, 255, 255);
|
||||
}
|
||||
input, select, textarea {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
/* TUI UTILS */
|
||||
.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;
|
||||
}
|
||||
.tui-no-shadow {
|
||||
box-shadow: none!important;
|
||||
}
|
||||
.tui-no-padding {
|
||||
padding: 0px!important;
|
||||
}
|
||||
.tui-shadow {
|
||||
box-shadow: 10px 10px black!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;
|
||||
}
|
||||
.left {
|
||||
float: left!important;
|
||||
}
|
||||
.right {
|
||||
float: right!important;
|
||||
}
|
||||
.inline {
|
||||
display: inline!important;
|
||||
}
|
||||
.block {
|
||||
display: block!important;
|
||||
}
|
||||
.tui-shortcut {
|
||||
float: right;
|
||||
}
|
||||
.tui-content {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
.tui-nav {
|
||||
width: 100%;
|
||||
background-color: rgb(168, 168, 168);
|
||||
padding: 0px 1px;
|
||||
z-index: 9;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.tui-nav ul li:hover {
|
||||
background-color: rgb(0, 168, 0);
|
||||
}
|
||||
|
||||
/* STATUSBAR */
|
||||
.tui-statusbar {
|
||||
width: 100%;
|
||||
background-color: rgb(168, 168, 168);
|
||||
padding: 0px 1px;
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
z-index: 9;
|
||||
}
|
||||
.tui-statusbar ul li {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
padding: 1px 3px;
|
||||
}
|
||||
.tui-statusbar ul li:active {
|
||||
background-color: rgb(0, 0, 168);
|
||||
color: white;
|
||||
}
|
||||
.tui-statusbar .tui-statusbar-divider {
|
||||
border-right: 2px black solid;
|
||||
display: inline;
|
||||
margin: 0px 3px;
|
||||
}
|
||||
|
||||
/* TUI INPUT */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* TUI BUTTON */
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
/* TUI PANEL */
|
||||
.tui-panel {
|
||||
background-color: rgb(0, 0, 168);
|
||||
padding: 12px;
|
||||
display: inline-block;
|
||||
color: white;
|
||||
box-shadow: 6px 6px black;
|
||||
}
|
||||
|
||||
/* TUI WINDOW */
|
||||
.tui-window {
|
||||
background-color: rgb(0, 0, 168);
|
||||
padding: 1px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
box-shadow: 10px 10px black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* TUI FIELDSET */
|
||||
.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-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;
|
||||
}
|
||||
|
||||
/* CHECKBOX */
|
||||
.tui-checkbox {
|
||||
display: block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
padding-left: 30px;
|
||||
}
|
||||
.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: rgb(0, 255, 255);
|
||||
}
|
||||
.tui-checkbox input:not(checked) ~ span::after {
|
||||
content: "[\00a0]";
|
||||
}
|
||||
|
||||
/* RADIO */
|
||||
.tui-radio {
|
||||
display: block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
padding-left: 30px;
|
||||
}
|
||||
.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: rgb(0, 255, 255)!important;
|
||||
}
|
||||
.tui-radio input:not(checked) ~ span:after {
|
||||
content: "(\00a0)";
|
||||
}
|
||||
|
||||
/* PROGRESS BAR */
|
||||
.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%}
|
||||
}
|
||||
|
||||
/* DROPDOWN */
|
||||
.tui-dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
.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;
|
||||
margin: 6px;
|
||||
}
|
||||
.tui-dropdown:hover > .tui-dropdown-content:first-of-type {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* SCROLLBAR */
|
||||
::-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);
|
||||
}
|
||||
|
||||
/* SIDENAV */
|
||||
.tui-sidenav {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
background-color: rgb(0, 168, 168);
|
||||
width: 1px;
|
||||
z-index: 10;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tui-sidenav:hover {
|
||||
min-width: 200px;
|
||||
box-shadow: 10px 10px black!important;
|
||||
padding: 6px;
|
||||
}
|
||||
.tui-sidenav ul {
|
||||
border: 2px black solid;
|
||||
}
|
||||
.tui-sidenav ul li {
|
||||
display: block;
|
||||
margin: 6px;
|
||||
}
|
||||
.tui-sidenav ul li a {
|
||||
display: block;
|
||||
}
|
||||
.tui-sidenav ul li:hover {
|
||||
background-color: rgb(255, 255, 0);
|
||||
}
|
||||
|
||||
/* TABLE */
|
||||
.tui-table {
|
||||
border: 2px solid rgb(168, 168, 168);
|
||||
padding: 5px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.tui-table-hover tbody tr:hover {
|
||||
background-color: rgb(0, 168, 168);
|
||||
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;
|
||||
}
|
||||
|
||||
/* TEXTAREA */
|
||||
.tui-textarea {
|
||||
background-color: inherit;
|
||||
border: none;
|
||||
padding: 0px;
|
||||
color: rgb(255, 255, 0);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* CLOCK */
|
||||
.tui-clock {
|
||||
padding: 1px 0px;
|
||||
margin-right: 10px;
|
||||
float:right;
|
||||
}
|
||||
BIN
dist/fonts/Perfect DOS VGA 437 Win.ttf
vendored
Normal file
BIN
dist/fonts/Perfect DOS VGA 437 Win.ttf
vendored
Normal file
Binary file not shown.
BIN
dist/fonts/Perfect DOS VGA 437.ttf
vendored
Normal file
BIN
dist/fonts/Perfect DOS VGA 437.ttf
vendored
Normal file
Binary file not shown.
72
dist/fonts/dos437.txt
vendored
Normal file
72
dist/fonts/dos437.txt
vendored
Normal file
@@ -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 ("<22>" 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^
|
||||
-------------------------------------------------------------------------------
|
||||
|
Before Width: | Height: | Size: 166 B After Width: | Height: | Size: 166 B |
|
Before Width: | Height: | Size: 168 B After Width: | Height: | Size: 168 B |
BIN
dist/images/bg-cyan-black.png
vendored
Normal file
BIN
dist/images/bg-cyan-black.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 B |
BIN
dist/images/bg-cyan-white.png
vendored
Normal file
BIN
dist/images/bg-cyan-white.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 165 B |
BIN
dist/images/bg-green-black.png
vendored
Normal file
BIN
dist/images/bg-green-black.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 B |
BIN
dist/images/bg-green-white.png
vendored
Normal file
BIN
dist/images/bg-green-white.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 165 B |
BIN
dist/images/bg-orange-black.png
vendored
Normal file
BIN
dist/images/bg-orange-black.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 B |
BIN
dist/images/bg-orange-white.png
vendored
Normal file
BIN
dist/images/bg-orange-white.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 165 B |
BIN
dist/images/bg-purple-black.png
vendored
Normal file
BIN
dist/images/bg-purple-black.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 B |
BIN
dist/images/bg-purple-white.png
vendored
Normal file
BIN
dist/images/bg-purple-white.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 165 B |
BIN
dist/images/bg-red-black.png
vendored
Normal file
BIN
dist/images/bg-red-black.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 166 B |
BIN
dist/images/bg-red-white.png
vendored
Normal file
BIN
dist/images/bg-red-white.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 165 B |
BIN
dist/images/bg-yellow-black.png
vendored
Normal file
BIN
dist/images/bg-yellow-black.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 B |
BIN
dist/images/bg-yellow-white.png
vendored
Normal file
BIN
dist/images/bg-yellow-white.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 165 B |
BIN
dist/images/scroll-blue.png
vendored
Normal file
BIN
dist/images/scroll-blue.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 166 B |
|
Before Width: | Height: | Size: 168 B After Width: | Height: | Size: 168 B |
BIN
dist/images/scroll-green.png
vendored
Normal file
BIN
dist/images/scroll-green.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 167 B |
BIN
dist/images/scroll-orange.png
vendored
Normal file
BIN
dist/images/scroll-orange.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 167 B |
BIN
dist/images/scroll-purple.png
vendored
Normal file
BIN
dist/images/scroll-purple.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 B |
BIN
dist/images/scroll-red.png
vendored
Normal file
BIN
dist/images/scroll-red.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 167 B |
BIN
dist/images/scroll-white.png
vendored
Normal file
BIN
dist/images/scroll-white.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 B |
BIN
dist/images/scroll-yellow.png
vendored
Normal file
BIN
dist/images/scroll-yellow.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 167 B |
1927
dist/tuicss.css
vendored
Normal file
1927
dist/tuicss.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
249
dist/tuicss.js
vendored
Normal file
249
dist/tuicss.js
vendored
Normal file
@@ -0,0 +1,249 @@
|
||||
/**
|
||||
* Replacement for jQuery's $(document).ready() function.
|
||||
* This is handy in making sure stuff fires after the DOM is ready to be touched.
|
||||
* Stolen from:https://stackoverflow.com/a/53601942/344028
|
||||
*
|
||||
* @param fn Callback.
|
||||
*/
|
||||
function domReady(fn) {
|
||||
// If we're early to the party
|
||||
document.addEventListener('DOMContentLoaded', fn);
|
||||
|
||||
// If late; I mean on time.
|
||||
if (document.readyState === 'interactive' || document.readyState === 'complete') {
|
||||
fn();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* TuiTabs controller
|
||||
*/
|
||||
function tabsController() {
|
||||
// Get all the tab elements (typically li tags).
|
||||
const tabs = document.getElementsByClassName('tui-tab');
|
||||
|
||||
if (!tabs.length) {
|
||||
// No tabs found, return early and save a couple CPU cycles.
|
||||
return;
|
||||
}
|
||||
|
||||
for (const tab of tabs) {
|
||||
// Add click listeners to them.
|
||||
tab.addEventListener('click', function (e) {
|
||||
// Remove the 'active' class from any and all tabs.
|
||||
for (const otherTab of tabs) {
|
||||
otherTab.classList.remove('active');
|
||||
}
|
||||
|
||||
// Get the content element.
|
||||
const tabContents = document.getElementsByClassName('tui-tab-content');
|
||||
|
||||
if (tabContents) {
|
||||
for (const tabContent of tabContents) {
|
||||
// Hide all tab contents.
|
||||
tabContent.style.display = 'none';
|
||||
}
|
||||
} else {
|
||||
throw 'No tab content elements found.'
|
||||
}
|
||||
|
||||
// Get the id of the tab contents we want to show.
|
||||
const tabContentId = e.target.getAttribute('data-tab-content');
|
||||
|
||||
if (tabContentId) {
|
||||
const tabContent = document.getElementById(tabContentId);
|
||||
if (tabContent) {
|
||||
// Show the tab contents.
|
||||
tabContent.style.display = 'block';
|
||||
} else {
|
||||
throw 'No tab content element with id "' + tabContentId + '" found.';
|
||||
}
|
||||
}
|
||||
// We are not going to throw an error here, since we could make the tab do something else that a tab
|
||||
// normally wouldn't do.
|
||||
|
||||
// Set the clicked tab to have the 'active' class so we can use it in the next part.
|
||||
e.target.classList.add('active');
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
// Grab the first tab with the active class.
|
||||
const activeTab = document.querySelector('.tui-tab.active');
|
||||
if (activeTab) {
|
||||
// Now click it 'click' it.
|
||||
activeTab.click();
|
||||
} else {
|
||||
// Nothing found, just click the first tab foud.
|
||||
tabs[0].click()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Date/time field controller
|
||||
*/
|
||||
function datetimeController() {
|
||||
// Get date/time elements.
|
||||
const clocks = document.getElementsByClassName('tui-datetime');
|
||||
|
||||
if (!clocks.length) {
|
||||
// No date time elements found, return early and save a couple CPU cycles.
|
||||
return;
|
||||
}
|
||||
|
||||
// Kick off our clock interval stuff.
|
||||
datetimeInterval();
|
||||
setInterval(datetimeInterval, 1000);
|
||||
|
||||
function datetimeInterval() {
|
||||
for (const clock of clocks) {
|
||||
// Set the interval.
|
||||
const interval = setInterval(() => {
|
||||
// Technically we should have already returned earlier in the code, but to be on the safe side.
|
||||
if (clock === null) {
|
||||
clearInterval(interval);
|
||||
return;
|
||||
}
|
||||
|
||||
// Get the format we want to display in the element.
|
||||
let format = clock.getAttribute('data-format');
|
||||
|
||||
// parse out the date and time into constants.
|
||||
const today = new Date();
|
||||
const month = (today.getMonth() + '').length === 2 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1);
|
||||
const day = (today.getDay() + '').length === 2 ? today.getDay() + 1 : '0' + (today.getDay() + 1);
|
||||
const year = today.getFullYear() + '';
|
||||
const hour = (today.getHours() + '').length === 2 ? today.getHours() : '0' + today.getHours();
|
||||
const hour12 = (parseInt(hour) + 24) % '12' || '12';
|
||||
const minute = (today.getMinutes() + '').length === 2 ? today.getMinutes() : '0' + today.getMinutes();
|
||||
const second = (today.getSeconds() + '').length === 2 ? today.getSeconds() : '0' + today.getSeconds();
|
||||
const ampm = parseInt(hour) >= 12 ? 'PM' : 'AM';
|
||||
|
||||
// Replace based on the format.
|
||||
format = format.replace('M', month);
|
||||
format = format.replace('d', day);
|
||||
format = format.replace('y', year);
|
||||
format = format.replace('H', hour);
|
||||
format = format.replace('h', hour12);
|
||||
format = format.replace('m', minute);
|
||||
format = format.replace('s', second);
|
||||
format = format.replace('a', ampm);
|
||||
|
||||
// Show it in the element.
|
||||
clock.innerHTML = format;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Sidenav Controller
|
||||
* There should only side navigation element at the moment.
|
||||
*/
|
||||
function sidenavController() {
|
||||
// Get the side navigation button (there should be only one, but if not, we are getting the first one).
|
||||
const sideNavButton = document.querySelector('.tui-sidenav-button');
|
||||
|
||||
if (!sideNavButton) {
|
||||
// No side navigation button found, return early and save a couple CPU cycles.
|
||||
return;
|
||||
}
|
||||
|
||||
// Add the click event listener to the buttons.
|
||||
sideNavButton.addEventListener('click', () => {
|
||||
// Get the side navigation element (there should be only one, but if not, we are getting the first one).
|
||||
const sideNav = document.querySelector('.tui-sidenav');
|
||||
|
||||
if (sideNav) {
|
||||
if (sideNav.classList.contains('active')) {
|
||||
sideNav.classList.remove('active');
|
||||
} else {
|
||||
sideNav.classList.add('active');
|
||||
}
|
||||
} else {
|
||||
throw 'No sidenav element found.'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Modal controller
|
||||
*/
|
||||
function modalController() {
|
||||
// Get the overlap (overlay) element (there should be only one, but if not, we are getting the first one).
|
||||
const tuiOverlap = document.querySelector('.tui-overlap');
|
||||
|
||||
if (!tuiOverlap) {
|
||||
// No overlap found element, return early and save a couple CPU cycles.
|
||||
return;
|
||||
}
|
||||
|
||||
// Find modal buttons.
|
||||
const modalButtons = document.getElementsByClassName('tui-modal-button');
|
||||
for (const modalButton of modalButtons) {
|
||||
// Add the click event listener to the buttons.
|
||||
modalButton.addEventListener('click', (e) => {
|
||||
// Show the overlap.
|
||||
tuiOverlap.classList.add('active');
|
||||
|
||||
// Get the display element for the modal.
|
||||
const modalId = e.target.getAttribute('data-modal');
|
||||
|
||||
if (modalId) {
|
||||
const modal = document.getElementById(modalId);
|
||||
|
||||
if (modal) {
|
||||
// Show it.
|
||||
modal.classList.add('active');
|
||||
} else {
|
||||
throw 'No modal element with id of "' + modalId + '" found.';
|
||||
}
|
||||
} else {
|
||||
throw 'Modal close button data-modal attribute is empty or not set.'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Find the close modal buttons.
|
||||
const modalCloseButtons = document.getElementsByClassName('tui-modal-close-button');
|
||||
|
||||
if (modalButtons.length > 0 && !modalCloseButtons.length) {
|
||||
// A modal without a close button, is a bad modal.
|
||||
throw 'No modal close buttons found.'
|
||||
}
|
||||
|
||||
for (const modalCloseButton of modalCloseButtons) {
|
||||
// Add the click event listener to the buttons.
|
||||
modalCloseButton.addEventListener('click', (e) => {
|
||||
// Hide the the overlap.
|
||||
tuiOverlap.classList.remove('active');
|
||||
|
||||
// Get the display element id for the modal.
|
||||
const modalId = e.target.getAttribute('data-modal');
|
||||
|
||||
if (modalId) {
|
||||
// Get the modal element.
|
||||
const modal = document.getElementById(modalId);
|
||||
|
||||
if (modal) {
|
||||
// Hide it.
|
||||
modal.classList.remove('active');
|
||||
} else {
|
||||
throw 'No modal element with id of "' + modalId + '" found.';
|
||||
}
|
||||
} else {
|
||||
throw 'Modal close button data-modal attribute is empty or not set.'
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Init: This is at the bottom to make sure it is fired correctly.
|
||||
*/
|
||||
domReady(function () {
|
||||
tabsController();
|
||||
datetimeController();
|
||||
sidenavController();
|
||||
modalController();
|
||||
});
|
||||
1
dist/tuicss.min.css
vendored
Normal file
1
dist/tuicss.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/tuicss.min.js
vendored
Normal file
1
dist/tuicss.min.js
vendored
Normal file
@@ -0,0 +1 @@
|
||||
function domReady(t){document.addEventListener("DOMContentLoaded",t),"interactive"!==document.readyState&&"complete"!==document.readyState||t()}function tabsController(){const t=document.getElementsByClassName("tui-tab");if(!t.length)return;for(const e of t)e.addEventListener("click",function(e){for(const e of t)e.classList.remove("active");const o=document.getElementsByClassName("tui-tab-content");if(!o)throw"No tab content elements found.";for(const t of o)t.style.display="none";const n=e.target.getAttribute("data-tab-content");if(n){const t=document.getElementById(n);if(!t)throw'No tab content element with id "'+n+'" found.';t.style.display="block"}e.target.classList.add("active")});const e=document.querySelector(".tui-tab.active");e?e.click():t[0].click()}function datetimeController(){const t=document.getElementsByClassName("tui-datetime");function e(){for(const e of t){const t=setInterval(()=>{if(null===e)return void clearInterval(t);let o=e.getAttribute("data-format");const n=new Date,a=2===(n.getMonth()+"").length?n.getMonth()+1:"0"+(n.getMonth()+1),s=2===(n.getDay()+"").length?n.getDay()+1:"0"+(n.getDay()+1),c=n.getFullYear()+"",l=2===(n.getHours()+"").length?n.getHours():"0"+n.getHours(),i=(parseInt(l)+24)%"12"||"12",r=2===(n.getMinutes()+"").length?n.getMinutes():"0"+n.getMinutes(),d=2===(n.getSeconds()+"").length?n.getSeconds():"0"+n.getSeconds(),u=parseInt(l)>=12?"PM":"AM";o=(o=(o=(o=(o=(o=(o=(o=o.replace("M",a)).replace("d",s)).replace("y",c)).replace("H",l)).replace("h",i)).replace("m",r)).replace("s",d)).replace("a",u),e.innerHTML=o})}}t.length&&(e(),setInterval(e,1e3))}function sidenavController(){const t=document.querySelector(".tui-sidenav-button");t&&t.addEventListener("click",()=>{const t=document.querySelector(".tui-sidenav");if(!t)throw"No sidenav element found.";t.classList.contains("active")?t.classList.remove("active"):t.classList.add("active")})}function modalController(){const t=document.querySelector(".tui-overlap");if(!t)return;const e=document.getElementsByClassName("tui-modal-button");for(const o of e)o.addEventListener("click",e=>{t.classList.add("active");const o=e.target.getAttribute("data-modal");if(!o)throw"Modal close button data-modal attribute is empty or not set.";{const t=document.getElementById(o);if(!t)throw'No modal element with id of "'+o+'" found.';t.classList.add("active")}});const o=document.getElementsByClassName("tui-modal-close-button");if(e.length>0&&!o.length)throw"No modal close buttons found.";for(const e of o)e.addEventListener("click",e=>{t.classList.remove("active");const o=e.target.getAttribute("data-modal");if(!o)throw"Modal close button data-modal attribute is empty or not set.";{const t=document.getElementById(o);if(!t)throw'No modal element with id of "'+o+'" found.';t.classList.remove("active")}})}domReady(function(){tabsController(),datetimeController(),sidenavController(),modalController()});
|
||||
796
examples.html
vendored
796
examples.html
vendored
@@ -1,796 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="tui-blue-bg">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- SIDENAV -->
|
||||
<nav class="tui-sidenav">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">O</span>pen
|
||||
<span class="tui-shortcut">ctrl+o</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">OS Shell</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">C</span>opy
|
||||
<span class="tui-shortcut">ctrl+c</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">P</span>aste
|
||||
<span class="tui-shortcut">ctrl+v</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">C<span class="red-168-text">u</span>t
|
||||
<span class="tui-shortcut">ctrl+x</span>
|
||||
</a>
|
||||
</li>
|
||||
<div class="tui-black-divider"></div>
|
||||
<li>
|
||||
<a href="#!">Insert</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">Delete</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">Go...</a>
|
||||
</li>
|
||||
<div class="tui-black-divider"></div>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">S</span>earch
|
||||
<span class="tui-shortcut">ctrl+p</span>
|
||||
</a>
|
||||
</li>
|
||||
<div class="tui-black-divider"></div>
|
||||
<li>
|
||||
<a href="#!">Exit <span class="tui-shortcut">F10</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav class="tui-nav tui-nav-fixed">
|
||||
<span class="tui-clock" id="clock"></span>
|
||||
<ul>
|
||||
<li class="tui-dropdown">
|
||||
<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">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">N</span>ew
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">O</span>pen...
|
||||
<span class="tui-shortcut">F3</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">S</span>ave
|
||||
<span class="tui-shortcut">F2</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
S<span class="red-168-text">a</span>ve as...
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
Save a<span class="red-168-text">l</span>l
|
||||
</a>
|
||||
</li>
|
||||
<div class="tui-black-divider"></div>
|
||||
|
||||
<!-- SUBMENU EXAMPLE -->
|
||||
<li class="tui-dropdown">
|
||||
<span class="right">►</span>
|
||||
<span class="red-168-text">M</span>ore
|
||||
<div class="tui-dropdown-content">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">C</span>hange dir...
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">P</span>rint
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">D</span>OS shell
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<div class="tui-black-divider"></div>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">Q</span>uit
|
||||
<span class="tui-shortcut">F10</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="tui-dropdown">
|
||||
<span class="red-168-text">E</span>dit
|
||||
<div class="tui-dropdown-content">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">C</span>opy
|
||||
<span class="tui-shortcut">ctrl+c</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">P</span>aste
|
||||
<span class="tui-shortcut">ctrl+v</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">C<span class="red-168-text">u</span>t
|
||||
<span class="tui-shortcut">ctrl+x</span>
|
||||
</a>
|
||||
</li>
|
||||
<div class="tui-black-divider"></div>
|
||||
<li>
|
||||
<a href="#!">Insert</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">Delete</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">Go...</a>
|
||||
</li>
|
||||
<div class="tui-black-divider"></div>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">S</span>earch
|
||||
<span class="tui-shortcut">ctrl+p</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="tui-dropdown">
|
||||
<span class="red-168-text">E</span>dit Styled
|
||||
<div class="tui-dropdown-content blue-168 white-255-text">
|
||||
<ul class="white-255-border">
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="green-255-text">C</span>opy
|
||||
<span class="tui-shortcut">ctrl+c</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="green-255-text">P</span>aste
|
||||
<span class="tui-shortcut">ctrl+v</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">C<span class="green-255-text">u</span>t
|
||||
<span class="tui-shortcut">ctrl+x</span>
|
||||
</a>
|
||||
</li>
|
||||
<div class="tui-divider"></div>
|
||||
<li>
|
||||
<a href="#!">Insert</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">Delete</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">Go...</a>
|
||||
</li>
|
||||
<div class="tui-divider"></div>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="green-255-text">S</span>earch
|
||||
<span class="tui-shortcut">ctrl+p</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="#!"><span class="red-168-text">H</span>elp</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<br>
|
||||
|
||||
<!-- CONTENT -->
|
||||
<div class="tui-content">
|
||||
|
||||
<!-- WINDOW EXAMPLE 1 -->
|
||||
<div class="tui-window">
|
||||
<fieldset class="tui-window-fieldset">
|
||||
<legend>Window</legend>
|
||||
<button class="tui-fieldset-button tui-fieldset-button-right"><span class="green-255-text">■</span></button>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
|
||||
Curabitur id vestibulum libero, id fermentum lorem.<br>
|
||||
Aenean aliquam erat leo, eu tempus ex ornare eu.<br>
|
||||
Sed ut lacus libero. Etiam rhoncus ipsum arcu.<br>
|
||||
In quis bibendum libero. Donec nec egestas ipsum.<br>
|
||||
Sed in venenatis diam. Nullam sollicitudin risus vel.<br>
|
||||
<br>
|
||||
<div class="tui-divider"></div>
|
||||
<br>
|
||||
<button class="tui-button">more...</button>
|
||||
<button class="tui-button purple-168 white-255-text">share</button>
|
||||
</fieldset>
|
||||
</div><br><br>
|
||||
|
||||
<!-- WINDOW EXAMPLE 2 -->
|
||||
<div class="tui-window white-168 black-255-text">
|
||||
<fieldset class="tui-window-fieldset">
|
||||
<legend class="white-255-text">Window</legend>
|
||||
<div style="overflow: scroll; height: 200px; width: 400px; white-space: nowrap;">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
|
||||
Curabitur id vestibulum libero, id fermentum lorem.<br>
|
||||
Aenean aliquam erat leo, eu tempus ex ornare eu.<br>
|
||||
Sed ut lacus libero. Etiam rhoncus ipsum arcu.<br>
|
||||
In quis bibendum libero. Donec nec egestas ipsum.<br>
|
||||
Sed in venenatis diam. Nullam sollicitudin risus vel.<br>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
|
||||
Curabitur id vestibulum libero, id fermentum lorem.<br>
|
||||
Aenean aliquam erat leo, eu tempus ex ornare eu.<br>
|
||||
Sed ut lacus libero. Etiam rhoncus ipsum arcu.<br>
|
||||
In quis bibendum libero. Donec nec egestas ipsum.<br>
|
||||
Sed in venenatis diam. Nullam sollicitudin risus vel.<br>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
|
||||
Curabitur id vestibulum libero, id fermentum lorem.<br>
|
||||
Aenean aliquam erat leo, eu tempus ex ornare eu.<br>
|
||||
Sed ut lacus libero. Etiam rhoncus ipsum arcu.<br>
|
||||
In quis bibendum libero. Donec nec egestas ipsum.<br>
|
||||
Sed in venenatis diam. Nullam sollicitudin risus vel.<br>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div><br><br>
|
||||
|
||||
<!-- WINDOW EXAMPLE 3 -->
|
||||
<div class="tui-window cyan-168 black-255-text">
|
||||
<fieldset class="tui-window-fieldset">
|
||||
<legend class="white-255-text">Window</legend>
|
||||
<span class="tui-shadow">The Lorem Ipsum </span><br><br>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
|
||||
Curabitur id vestibulum libero, id fermentum lorem.<br>
|
||||
Aenean aliquam erat leo, eu tempus ex ornare eu.<br>
|
||||
Sed ut lacus libero. Etiam rhoncus ipsum arcu.<br>
|
||||
In quis bibendum libero. Donec nec egestas ipsum.<br>
|
||||
Sed in venenatis diam. Nullam sollicitudin risus vel.<br>
|
||||
<br>
|
||||
<div class="tui-divider"></div>
|
||||
<br>
|
||||
<a class="tui-button white-168">accept</a>
|
||||
</fieldset>
|
||||
</div><br><br>
|
||||
|
||||
<!-- WINDOW EXAMPLE 4 -->
|
||||
<div class="tui-window red-168">
|
||||
<fieldset class="tui-window-fieldset">
|
||||
<legend>Error!</legend>
|
||||
An ERROR ocurred while processing!
|
||||
<br><br>
|
||||
<button class="tui-button white-168"><span class="yellow-255-text">o</span>k</button>
|
||||
</fieldset>
|
||||
</div><br><br>
|
||||
|
||||
<!-- WINDOW EXAMPLE 5 -->
|
||||
<div class="tui-window">
|
||||
<fieldset class="tui-window-fieldset tui-border-solid">
|
||||
<legend align="center">Window</legend>
|
||||
<button class="tui-fieldset-button tui-fieldset-button-left">X</button>
|
||||
<div class="tui-fieldset-statusbar">Text format: UTF-8</div>
|
||||
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>
|
||||
<span class="tui-divider"></span>
|
||||
<br>Author: Lorem Ipsum<br><br>
|
||||
</fieldset>
|
||||
</div><br><br>
|
||||
|
||||
<!-- WINDOW EXAMPLE 6 -->
|
||||
<div class="tui-window red-168">
|
||||
<fieldset class="tui-window-fieldset tui-window-fieldset-no-legend tui-border-solid">
|
||||
<span class="red-255 yellow-255-text">Warning! There are pendencies</span><br><br>
|
||||
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.
|
||||
</fieldset>
|
||||
</div><br><br>
|
||||
|
||||
<!-- LIST -->
|
||||
<div class="tui-window purple-168">
|
||||
<fieldset class="tui-window-fieldset tui-window-fieldset-no-legend tui-border-solid" style="width: 300px">
|
||||
<ul>
|
||||
<li class="cyan-255-hover black-255-text-hover">
|
||||
<a href="#!">
|
||||
<span class="tui-shortcut">A</span>
|
||||
<span>Register Tables</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="cyan-255-hover black-255-text-hover">
|
||||
<a href="#!">
|
||||
<span class="tui-shortcut">B</span>
|
||||
<span>Register Consumers</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="cyan-255-hover black-255-text-hover">
|
||||
<a href="#!">
|
||||
<span class="tui-shortcut">C</span>
|
||||
<span>Register Companies</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="cyan-255-hover black-255-text-hover">
|
||||
<a href="#!">
|
||||
<span class="tui-shortcut">D</span>
|
||||
<span>Search Windows</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="cyan-255-hover black-255-text-hover">
|
||||
<a href="#!">
|
||||
<span class="tui-shortcut">E</span>
|
||||
<span>Quit</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div><br><br>
|
||||
|
||||
<!-- PANEL EXAMPLE 1 -->
|
||||
<div class="tui-panel">
|
||||
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><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
|
||||
placerat
|
||||
lorem.<br> Aliquam urna lorem, placerat et varius et, aliquam ac libero.
|
||||
</div><br><br>
|
||||
|
||||
<!-- INPUTS -->
|
||||
<div class="tui-window">
|
||||
<fieldset class="tui-window-fieldset">
|
||||
<legend>Inputs</legend>
|
||||
TEXT:<br><input class="tui-input" /><br>
|
||||
NUMBER:<br><input class="tui-input" type="number" /><br>
|
||||
DATE:<br><input class="tui-input" type="date" /><br>
|
||||
DATETIME:<br><input class="tui-input" type="datetime-local" /><br>
|
||||
PASSWORD:<br><input class="tui-input" type="password" /><br>
|
||||
SELECT:<br>
|
||||
<select class="tui-input">
|
||||
<option selected>-- SELECT --</option>
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
<fieldset class="tui-input-fieldset">
|
||||
<legend>Checkboxes</legend>
|
||||
<label class="tui-checkbox">One
|
||||
<input type="checkbox" checked />
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-checkbox">Second
|
||||
<input type="checkbox" />
|
||||
<span></span>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset class="tui-input-fieldset">
|
||||
<legend>Radios</legend>
|
||||
<label class="tui-radio">One
|
||||
<input type="radio" name="radio" checked />
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-radio">Second
|
||||
<input type="radio" name="radio" />
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-radio">Third
|
||||
<input type="radio" name="radio" />
|
||||
<span></span>
|
||||
</label>
|
||||
</fieldset>
|
||||
TEXTAREA:<br>
|
||||
<textarea class="tui-input"></textarea><br>
|
||||
COLOR:<br>
|
||||
<input class="tui-input" type="color" /><br>
|
||||
MULTIPLE:<br>
|
||||
<select class="tui-input" multiple>
|
||||
<option selected>-- SELECT --</option>
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
<option>Option 4</option>
|
||||
<option>Option 5</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
</div><br><br>
|
||||
|
||||
<!--PROGRESS -->
|
||||
<div class="tui-window">
|
||||
<fieldset class="tui-window-fieldset">
|
||||
<legend>Progress</legend>
|
||||
0%
|
||||
<div class="tui-progress">
|
||||
<span style="width: 0%"></span>
|
||||
</div>
|
||||
25%
|
||||
<div class="tui-progress">
|
||||
<span style="width: 25%"></span>
|
||||
</div>
|
||||
50%
|
||||
<div class="tui-progress">
|
||||
<span style="width: 50%"></span>
|
||||
</div>
|
||||
75%
|
||||
<div class="tui-progress">
|
||||
<span style="width: 75%"></span>
|
||||
</div>
|
||||
100%
|
||||
<div class="tui-progress">
|
||||
<span style="width: 100%"></span>
|
||||
</div>
|
||||
Indeterminate
|
||||
<div class="tui-progress">
|
||||
<span class="tui-indeterminate"></span>
|
||||
</div>
|
||||
Custom
|
||||
<div class="tui-progress red-255">
|
||||
<span class="green-255" style="width: 75%"></span>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div><br><br>
|
||||
|
||||
<!-- TABLE -->
|
||||
<div class="tui-window">
|
||||
<fieldset class="tui-window-fieldset">
|
||||
<legend>Table</legend>
|
||||
<table class="tui-table tui-table-hover" style="width: 600px">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Name</td>
|
||||
<td>Size</td>
|
||||
<td>MTime</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>/.mc</td>
|
||||
<td>1024</td>
|
||||
<td>Apr 24 01:24</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>/bin</td>
|
||||
<td>3072</td>
|
||||
<td>Jun 12 11:01</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>/boot</td>
|
||||
<td>1024</td>
|
||||
<td>Apr 24 01:24</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>~cdrom</td>
|
||||
<td>256</td>
|
||||
<td>May 24 01:24</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>/disk</td>
|
||||
<td>10258</td>
|
||||
<td>May 12 11:01</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>/win32</td>
|
||||
<td>4056</td>
|
||||
<td>Apr 24 01:24</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</fieldset>
|
||||
</div><br><br>
|
||||
|
||||
<!-- CALCULATOR EXAMPLE -->
|
||||
<div class="tui-window white-168">
|
||||
<fieldset class="tui-window-fieldset">
|
||||
<legend align="center">Pocket Calculator</legend>
|
||||
<input class="tui-input blue-168 white-255-text" style="text-align: right;" disabled value="872.9000" />
|
||||
<br><br>
|
||||
<button class="tui-button">C </button>
|
||||
<button class="tui-button"><-</button>
|
||||
<button class="tui-button">% </button>
|
||||
<button class="tui-button">+-</button><br><br>
|
||||
<button class="tui-button">7 </button>
|
||||
<button class="tui-button">8 </button>
|
||||
<button class="tui-button">9 </button>
|
||||
<button class="tui-button">/ </button><br><br>
|
||||
<button class="tui-button">4 </button>
|
||||
<button class="tui-button">5 </button>
|
||||
<button class="tui-button">6 </button>
|
||||
<button class="tui-button">* </button><br><br>
|
||||
<button class="tui-button">1 </button>
|
||||
<button class="tui-button">2 </button>
|
||||
<button class="tui-button">3 </button>
|
||||
<button class="tui-button">- </button><br><br>
|
||||
<button class="tui-button">0 </button>
|
||||
<button class="tui-button">. </button>
|
||||
<button class="tui-button">= </button>
|
||||
<button class="tui-button">+ </button>
|
||||
</fieldset>
|
||||
</div><br><br>
|
||||
|
||||
<!-- WINDOW TEXTAREA -->
|
||||
<div class="tui-window">
|
||||
<fieldset class="tui-window-fieldset">
|
||||
<legend align="center">MYAPP.CPP</legend>
|
||||
<button class="tui-fieldset-button"><span class="green-255-text">↑</span></button>
|
||||
<button class="tui-fieldset-button tui-fieldset-button-left"><span class="green-255-text">■</span></button>
|
||||
<textarea class="tui-textarea" style="width: 400px; height: 200px;">#include <iostream>
|
||||
using namespace std;
|
||||
|
||||
int main()
|
||||
{
|
||||
cout << "Hello, World!";
|
||||
return 0;
|
||||
}</textarea>
|
||||
</fieldset>
|
||||
</div><br><br>
|
||||
|
||||
<!--HELP -->
|
||||
<div class="tui-window">
|
||||
<fieldset class="tui-window-fieldset tui-window-fieldset-no-legend yellow-255-border">
|
||||
<br><br>
|
||||
<center>
|
||||
TuiCSS<br><br>
|
||||
Version: 0.1.0<br>
|
||||
Copyright (c) 2018 by VBFoundation
|
||||
</center>
|
||||
<br><br>
|
||||
</fieldset>
|
||||
</div><br><br>
|
||||
|
||||
<!--REGISTER EXAMPLE 1 -->
|
||||
<div class="tui-window white-168">
|
||||
<fieldset class="tui-window-fieldset black-255-text">
|
||||
<legend align="center" class="white-255-text">Register / 106</legend>
|
||||
<div style="display: inline-block; width: 500px">
|
||||
<span class="yellow-255-text">N</span>umber.....:
|
||||
<input style="width: 100px" class="tui-input blue-168" type="number" value="106" /><br>
|
||||
<span class="yellow-255-text">D</span>ocument...:
|
||||
<input style="width: 150px" class="tui-input blue-168" value="1.504.00.1-00" /><br>
|
||||
<span class="yellow-255-text">F</span>irst Name.:
|
||||
<input style="width: 250px" class="tui-input blue-168" value="Robert" /><br>
|
||||
<span class="yellow-255-text">S</span>econd Name:
|
||||
<input style="width: 250px" class="tui-input blue-168" value="Munique Steffens" /><br>
|
||||
<span class="yellow-255-text">C</span>ity.......:
|
||||
<input style="width: 150px" class="tui-input blue-168" value="Blumenau" /><br>
|
||||
S<span class="yellow-255-text">t</span>ate......:
|
||||
<input style="width: 50px" class="tui-input blue-168" value="SC" /><br>
|
||||
C<span class="yellow-255-text">o</span>ntry.....:
|
||||
<input style="width: 100px" class="tui-input blue-168" value="Brazil" /><br><br>
|
||||
P<span class="yellow-255-text">h</span>one......:
|
||||
<input style="width: 200px" class="tui-input blue-168" value="(47) 3 3784-2134" /><br>
|
||||
F<span class="yellow-255-text">a</span>x........:
|
||||
<input style="width: 200px" class="tui-input blue-168" value="" /><br>
|
||||
E<span class="yellow-255-text">m</span>ail......:
|
||||
<input style="width: 250px" class="tui-input blue-168" value="robert@email.com" /><br><br>
|
||||
<span class="yellow-255-text">G</span>roup......:
|
||||
<select class="tui-input blue-168">
|
||||
<option>Awner</option>
|
||||
<option>Administrators</option>
|
||||
<option>Common Users</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="display: inline-block; width: 200px; vertical-align: top">
|
||||
<span>Locale</span>
|
||||
<div class="cyan-168">
|
||||
<label class="tui-radio black-255-text"> en-US
|
||||
<input type="radio" name="locale" checked>
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-radio black-255-text"> pt-BR
|
||||
<input type="radio" name="locale">
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-radio black-255-text"> ch-CH
|
||||
<input type="radio" name="locale">
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-radio black-255-text"> none
|
||||
<input type="radio" name="locale">
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="right">
|
||||
<span>...Cod:</span><input style="width: 30px" class="tui-input blue-168">
|
||||
</div>
|
||||
<br><br>
|
||||
<span>Currency</span>
|
||||
<div class="cyan-168 black-255-text">
|
||||
<label class="tui-radio black-255-text"> USD
|
||||
<input type="radio" name="currency" checked>
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-radio black-255-text"> R$
|
||||
<input type="radio" name="currency">
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-radio black-255-text"> none
|
||||
<input type="radio" name="currency">
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
<br>
|
||||
Registered at: 11/09/2018 12:50:15
|
||||
</div>
|
||||
<br><br>
|
||||
<button class="tui-button"><span class="yellow-255-text">n</span>ew</button>
|
||||
<button class="tui-button"><span class="yellow-255-text">d</span>el</button>
|
||||
<button class="tui-button"><span class="yellow-255-text">s</span>earch</button>
|
||||
<button class="tui-button"><span class="yellow-255-text">l</span>ist</button>
|
||||
<button class="tui-button"><span class="yellow-255-text">r</span>eports</button>
|
||||
<br><br>
|
||||
</fieldset>
|
||||
</div><br><br>
|
||||
|
||||
<!--REGISTER EXAMPLE 2 -->
|
||||
<div class="tui-window">
|
||||
<fieldset class="tui-window-fieldset">
|
||||
<legend align="center" class="white-255-text">Register / 106</legend>
|
||||
<div style="display: inline-block; width: 500px">
|
||||
<span class="yellow-255-text">N</span>umber.....:
|
||||
<input style="width: 100px" class="tui-input" type="number" value="106" /><br>
|
||||
<span class="yellow-255-text">D</span>ocument...:
|
||||
<input style="width: 150px" class="tui-input" value="1.504.00.1-00" /><br>
|
||||
<span class="yellow-255-text">F</span>irst Name.:
|
||||
<input style="width: 250px" class="tui-input" value="Robert" /><br>
|
||||
<span class="yellow-255-text">S</span>econd Name:
|
||||
<input style="width: 250px" class="tui-input" value="Munique Steffens" /><br>
|
||||
<span class="yellow-255-text">C</span>ity.......:
|
||||
<input style="width: 150px" class="tui-input" value="Blumenau" /><br>
|
||||
S<span class="yellow-255-text">t</span>ate......:
|
||||
<input style="width: 50px" class="tui-input" value="SC" /><br>
|
||||
C<span class="yellow-255-text">o</span>ntry.....:
|
||||
<input style="width: 100px" class="tui-input" value="Brazil" /><br><br>
|
||||
P<span class="yellow-255-text">h</span>one......:
|
||||
<input style="width: 200px" class="tui-input" value="(47) 3 3784-2134" /><br>
|
||||
F<span class="yellow-255-text">a</span>x........:
|
||||
<input style="width: 200px" class="tui-input" value="" /><br>
|
||||
E<span class="yellow-255-text">m</span>ail......:
|
||||
<input style="width: 250px" class="tui-input" value="robert@email.com" /><br><br>
|
||||
<span class="yellow-255-text">G</span>roup......:
|
||||
<select class="tui-input">
|
||||
<option>Awner</option>
|
||||
<option>Administrators</option>
|
||||
<option>Common Users</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="display: inline-block; width: 200px; vertical-align: top">
|
||||
<span>Locale</span>
|
||||
<div class="cyan-168">
|
||||
<label class="tui-radio black-255-text"> en-US
|
||||
<input type="radio" name="locale" checked>
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-radio black-255-text"> pt-BR
|
||||
<input type="radio" name="locale">
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-radio black-255-text"> ch-CH
|
||||
<input type="radio" name="locale">
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-radio black-255-text"> none
|
||||
<input type="radio" name="locale">
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="right">
|
||||
<span>...Cod:</span><input style="width: 30px" class="tui-input blue-168">
|
||||
</div>
|
||||
<br><br>
|
||||
<span>Currency</span>
|
||||
<div class="cyan-168 black-255-text">
|
||||
<label class="tui-radio black-255-text"> USD
|
||||
<input type="radio" name="currency" checked>
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-radio black-255-text"> R$
|
||||
<input type="radio" name="currency">
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-radio black-255-text"> none
|
||||
<input type="radio" name="currency">
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
<br>
|
||||
Registered at: 11/09/2018 12:50:15
|
||||
</div>
|
||||
<br><br>
|
||||
<button class="tui-button"><span class="yellow-255-text">n</span>ew</button>
|
||||
<button class="tui-button"><span class="yellow-255-text">d</span>el</button>
|
||||
<button class="tui-button"><span class="yellow-255-text">s</span>earch</button>
|
||||
<button class="tui-button"><span class="yellow-255-text">l</span>ist</button>
|
||||
<button class="tui-button"><span class="yellow-255-text">r</span>eports</button>
|
||||
<br><br>
|
||||
</fieldset>
|
||||
</div><br><br>
|
||||
|
||||
<!-- STATUSBAR -->
|
||||
<div class="tui-statusbar">
|
||||
<ul>
|
||||
<li><a href="#!"><span class="red-168-text">F1</span> Help</a></li>
|
||||
<li><a href="#!"><span class="red-168-text">F2</span> Shell</a></li>
|
||||
<li><a href="#!"><span class="red-168-text">F3</span> Open</a></li>
|
||||
<span class="tui-statusbar-divider"></span>
|
||||
<li><a href="#!"><span class="red-168-text">F10</span> Exit</a></li>
|
||||
</ul>
|
||||
</div><br><br>
|
||||
|
||||
</div>
|
||||
<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>
|
||||
71
examples/bios.html
Normal file
71
examples/bios.html
Normal file
@@ -0,0 +1,71 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>BIOS Example</title>
|
||||
<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><Tab>, <Shift-Tab> or <Enter> selects field.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="tui-tab-content tui-content" id="tab-2-content">
|
||||
</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>
|
||||
155
examples/chart.html
Normal file
155
examples/chart.html
Normal file
@@ -0,0 +1,155 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="tui-bg-blue-black">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Chart 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">
|
||||
<style>
|
||||
.tui-chart-vertical {
|
||||
position: relative;
|
||||
background-color: black;
|
||||
}
|
||||
.tui-chart-horizontal {
|
||||
position: relative;
|
||||
background-color: black;
|
||||
}
|
||||
.tui-chart-vertical .tui-chart-display {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 50px;
|
||||
right: 0px;
|
||||
bottom: 30px;
|
||||
align-items: flex-end;
|
||||
border-bottom: 2px solid white;
|
||||
border-left: 2px solid white;
|
||||
}
|
||||
.tui-chart-horizontal .tui-chart-display {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
top: 0px;
|
||||
left: 50px;
|
||||
right: 0px;
|
||||
bottom: 30px;
|
||||
align-items: stretch;
|
||||
border-bottom: 2px solid white;
|
||||
border-left: 2px solid white;
|
||||
}
|
||||
.tui-chart-x-axis {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
height: 30px;
|
||||
left: 50px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.tui-chart-y-axis {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
bottom: 30px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.tui-chart-vertical .tui-chart-x-axis .tui-chart-legend {
|
||||
flex-basis: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.tui-chart-vertical .tui-chart-y-axis .tui-chart-legend {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
padding-right: 2px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.tui-chart-horizontal .tui-chart-x-axis .tui-chart-legend {
|
||||
flex-basis: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
.tui-chart-horizontal .tui-chart-y-axis .tui-chart-legend {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
padding-right: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.tui-chart-vertical .tui-chart-display .tui-chart-value {
|
||||
margin: 0px 30px;
|
||||
flex-basis: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.tui-chart-horizontal .tui-chart-display .tui-chart-value {
|
||||
margin: 5px 0px;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: flex-start;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="center">
|
||||
<div style="margin-top: 50px"></div>
|
||||
|
||||
<div class="tui-window black-168 left-align">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="">Vertical Bar Chart</legend>
|
||||
<div class="tui-chart-vertical" style="width: 500px; height: 200px;">
|
||||
<div class="tui-chart-display">
|
||||
<div class="tui-chart-value red-168" style="height: 80%;">80%</div>
|
||||
<div class="tui-chart-value green-168" style="height: 60%;">60%</div>
|
||||
<div class="tui-chart-value blue-168" style="height: 100%;">100%</div>
|
||||
</div>
|
||||
<div class="tui-chart-y-axis">
|
||||
<div class="tui-chart-legend">100%</div>
|
||||
<div class="tui-chart-legend">75%</div>
|
||||
<div class="tui-chart-legend">50%</div>
|
||||
<div class="tui-chart-legend">25%</div>
|
||||
</div>
|
||||
<div class="tui-chart-x-axis">
|
||||
<div class="tui-chart-legend">2018</div>
|
||||
<div class="tui-chart-legend">2019</div>
|
||||
<div class="tui-chart-legend">2020</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<br><br>
|
||||
|
||||
<div class="tui-window black-168 left-align">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="">Horizontal Bar Chart</legend>
|
||||
<div class="tui-chart-horizontal" style="width: 500px; height: 200px;">
|
||||
<div class="tui-chart-display">
|
||||
<div class="tui-chart-value red-168" style="width: 80%;">80%</div>
|
||||
<div class="tui-chart-value green-168" style="width: 60%;">60%</div>
|
||||
<div class="tui-chart-value blue-168" style="width: 100%;">100%</div>
|
||||
</div>
|
||||
<div class="tui-chart-y-axis">
|
||||
<div class="tui-chart-legend">2018</div>
|
||||
<div class="tui-chart-legend">2019</div>
|
||||
<div class="tui-chart-legend">2020</div>
|
||||
</div>
|
||||
<div class="tui-chart-x-axis">
|
||||
<div class="tui-chart-legend">25%</div>
|
||||
<div class="tui-chart-legend">50%</div>
|
||||
<div class="tui-chart-legend">75%</div>
|
||||
<div class="tui-chart-legend">100%</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
79
examples/inputs.html
Normal file
79
examples/inputs.html
Normal file
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="tui-bg-blue-black">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Inputs Example</title>
|
||||
<script src="../dist/tuicss.min.js"></script>
|
||||
<link rel="stylesheet" href="../dist/tuicss.min.css">
|
||||
<style>
|
||||
.tui-input {
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="center" style="padding: 50px">
|
||||
<div class="tui-window" style="text-align: left">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="center">Form</legend>
|
||||
Text.......: <input class="tui-input" value="text" /><br>
|
||||
Number.....: <input class="tui-input" type="number" value="25" /><br>
|
||||
Password...: <input class="tui-input" type="password" value="12345" /><br>
|
||||
Color......: <input class="tui-input" type="color" value="#00FF00" /><br>
|
||||
Select.....: <select class="tui-input">
|
||||
<option>First</option>
|
||||
<option>Second</option>
|
||||
<option>Third</option>
|
||||
</select><br>
|
||||
Date.......: <input class="tui-input" type="date" value="2019-01-01" /><br>
|
||||
Time.......: <input class="tui-input" type="datetime-local" value="2019-01-01T12:00" />
|
||||
<br><br>
|
||||
<fieldset class="tui-input-fieldset">
|
||||
<legend>Checkboxes</legend>
|
||||
<label class="tui-checkbox">First
|
||||
<input type="checkbox" checked />
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-checkbox">Second
|
||||
<input type="checkbox" />
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-checkbox">Third
|
||||
<input type="checkbox" />
|
||||
<span></span>
|
||||
</label>
|
||||
</fieldset>
|
||||
<br>
|
||||
<fieldset class="tui-input-fieldset">
|
||||
<legend>Radios</legend>
|
||||
<label class="tui-radio">First
|
||||
<input type="radio" name="radio" checked />
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-radio">Second
|
||||
<input type="radio" name="radio" />
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-radio">Third
|
||||
<input type="radio" name="radio" />
|
||||
<span></span>
|
||||
</label>
|
||||
</fieldset>
|
||||
<br>
|
||||
Textarea<br>
|
||||
<textarea class="tui-input" style="width: 100%"></textarea>
|
||||
<br>
|
||||
Multiple<br>
|
||||
<select multiple class="tui-input" style="width: 100%">
|
||||
<option>---</option>
|
||||
<option>First</option>
|
||||
<option>Second</option>
|
||||
<option>Third</option>
|
||||
</select><br>
|
||||
File <input class="tui-input full-width" type="file" />
|
||||
</fieldset>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
34
examples/modal.html
Normal file
34
examples/modal.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="tui-bg-blue-black">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Modal Example</title>
|
||||
<script src="../dist/tuicss.min.js"></script>
|
||||
<link rel="stylesheet" href="../dist/tuicss.min.css">
|
||||
</head>
|
||||
|
||||
<body class="center">
|
||||
<div style="margin-top: 300px"></div>
|
||||
|
||||
<!-- Button -->
|
||||
<button class="tui-button tui-modal-button" data-modal="modal">◄ Click ►</button>
|
||||
|
||||
<!-- Overlap -->
|
||||
<div class="tui-overlap"></div>
|
||||
|
||||
<!-- Modal window -->
|
||||
<div id="modal" class="tui-modal">
|
||||
<div class="tui-window red-168 left-align">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="red-255 yellow-255-text">Alert</legend>
|
||||
This is an example of a modal window.
|
||||
<br><br>
|
||||
<div class="tui-divider"></div>
|
||||
<br>
|
||||
<button class="tui-button cyan-168 white-255-text tui-modal-close-button right" data-modal="modal">close</button>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
63
examples/pc-startup.html
Normal file
63
examples/pc-startup.html
Normal file
@@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>PC Startup Example</title>
|
||||
<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 : 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 id="session-5" style="display: none">
|
||||
<br>Found virus! The PC cannot be started. I'm Sorry :(
|
||||
</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>
|
||||
window.onload = function() {
|
||||
setTimeout(function() { showSession("session-1"); }, 300);
|
||||
setTimeout(function() { showSession("session-2"); }, 400);
|
||||
setTimeout(function() { showSession("session-3"); }, 450);
|
||||
setTimeout(function() { showSession("session-4"); }, 870);
|
||||
setTimeout(function() { showSession("session-5"); }, 1500);
|
||||
};
|
||||
function showSession(id) {
|
||||
const session = document.getElementById(id);
|
||||
session.style.display = "block";
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
54
examples/pocket-calculator.html
Normal file
54
examples/pocket-calculator.html
Normal file
@@ -0,0 +1,54 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Pocket Calculator Example</title>
|
||||
<script src="../dist/tuicss.min.js"></script>
|
||||
<link rel="stylesheet" href="../dist/tuicss.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="tui-screen-800-600 bordered blue-168" style="padding: 40px">
|
||||
<div class="center" style="margin-top: 100px;">
|
||||
<div class="tui-window white-168">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend align="center">Pocket Calculator</legend>
|
||||
<input id="display" class="tui-input blue-168 white-255-text" style="text-align: right;" disabled value="872.9000" />
|
||||
<br><br>
|
||||
<button class="tui-button" onclick="clearDisplay()">C </button>
|
||||
<button class="tui-button"><-</button>
|
||||
<button class="tui-button">% </button>
|
||||
<button class="tui-button">+-</button><br><br>
|
||||
<button class="tui-button" onclick="digit('7')">7 </button>
|
||||
<button class="tui-button" onclick="digit('8')">8 </button>
|
||||
<button class="tui-button" onclick="digit('9')">9 </button>
|
||||
<button class="tui-button">/ </button><br><br>
|
||||
<button class="tui-button" onclick="digit('4')">4 </button>
|
||||
<button class="tui-button" onclick="digit('5')">5 </button>
|
||||
<button class="tui-button" onclick="digit('6')">6 </button>
|
||||
<button class="tui-button">* </button><br><br>
|
||||
<button class="tui-button" onclick="digit('1')">1 </button>
|
||||
<button class="tui-button" onclick="digit('2')">2 </button>
|
||||
<button class="tui-button" onclick="digit('3')">3 </button>
|
||||
<button class="tui-button">- </button><br><br>
|
||||
<button class="tui-button" onclick="digit('0')">0 </button>
|
||||
<button class="tui-button" onclick="digit('.')">. </button>
|
||||
<button class="tui-button">= </button>
|
||||
<button class="tui-button">+ </button>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function digit(digit) {
|
||||
let val = document.getElementById("display").value;
|
||||
document.getElementById("display").value = digit + "" + val;
|
||||
}
|
||||
function clearDisplay() {
|
||||
document.getElementById("display").value = "";
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
59
examples/progress-bar.html
Normal file
59
examples/progress-bar.html
Normal file
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="tui-bg-blue-black">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Progress Example</title>
|
||||
<script src="../dist/tuicss.min.js"></script>
|
||||
<link rel="stylesheet" href="../dist/tuicss.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<body class="center" style="padding: 50px">
|
||||
<div class="tui-window" style="text-align: left;">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="center">Progress</legend>
|
||||
0% ............:
|
||||
<div class="tui-progress-bar inline-block valign-middle">
|
||||
<span class="tui-progress" style="width: 0%"></span>
|
||||
</div><br><br>
|
||||
25% ...........:
|
||||
<div class="tui-progress-bar inline-block valign-middle">
|
||||
<span class="tui-progress" style="width: 25%"></span>
|
||||
</div><br><br>
|
||||
50% ...........:
|
||||
<div class="tui-progress-bar inline-block valign-middle">
|
||||
<span class="tui-progress" style="width: 50%"></span>
|
||||
</div><br><br>
|
||||
75% ...........:
|
||||
<div class="tui-progress-bar inline-block valign-middle">
|
||||
<span class="tui-progress" style="width: 75%"></span>
|
||||
</div><br><br>
|
||||
100% ..........:
|
||||
<div class="tui-progress-bar inline-block valign-middle">
|
||||
<span class="tui-progress" style="width: 100%"></span>
|
||||
</div><br><br>
|
||||
Texture bg ....:
|
||||
<div class="tui-progress-bar inline-block valign-middle tui-bg-blue-black">
|
||||
<span class="tui-progress" style="width: 50%"></span>
|
||||
</div><br><br>
|
||||
Indeterminate .:
|
||||
<div class="tui-progress-bar inline-block valign-middle">
|
||||
<span class="tui-indeterminate"></span>
|
||||
</div><br><br>
|
||||
Labeled .......:
|
||||
<div class="tui-progress-bar inline-block valign-middle">
|
||||
<span class="tui-progress-label black-text">75%</span>
|
||||
<span class="tui-progress" style="width: 75%"></span>
|
||||
</div><br><br>
|
||||
Custom ........:
|
||||
<div class="tui-progress-bar inline-block valign-middle red-255">
|
||||
<span class="tui-progress green-255" style="width: 50%"></span>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
125
examples/register.html
Normal file
125
examples/register.html
Normal file
@@ -0,0 +1,125 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Register Example</title>
|
||||
<script src="../dist/tuicss.min.js"></script>
|
||||
<link rel="stylesheet" href="../dist/tuicss.min.css">
|
||||
<style>
|
||||
ul li {
|
||||
display: inline-block;
|
||||
margin-right: 60px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="tui-screen-800-600 bordered white-168 tui-bg-blue-black center">
|
||||
|
||||
<div class="tui-window full-width tui-no-shadow left-align">
|
||||
<fieldset class="tui-fieldset no-legend">
|
||||
<ul>
|
||||
<li><a class="white-255-hover black-text-hover cursor-pointer inline">Tables</a></li>
|
||||
<li><a class="white-255-hover black-text-hover cursor-pointer inline">Reports</a></li>
|
||||
<li><a class="white-255-hover black-text-hover cursor-pointer inline">Print</a></li>
|
||||
<li><a class="white-255-hover black-text-hover cursor-pointer inline">Admin</a></li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="tui-window left-align" style="margin-top: 60px;">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="white-255-text center">Register</legend>
|
||||
<div style="display: inline-block; width: 500px">
|
||||
<span class="yellow-255-text">N</span>umber.....:
|
||||
<input style="width: 100px" class="tui-input" type="number" value="106" /><br>
|
||||
<span class="yellow-255-text">D</span>ocument...:
|
||||
<input style="width: 150px" class="tui-input" value="1.504.00.1-00" /><br>
|
||||
<span class="yellow-255-text">F</span>irst Name.:
|
||||
<input style="width: 250px" class="tui-input" value="Robert" /><br>
|
||||
<span class="yellow-255-text">S</span>econd Name:
|
||||
<input style="width: 250px" class="tui-input" value="Munique Steffens" /><br>
|
||||
<span class="yellow-255-text">C</span>ity.......:
|
||||
<input style="width: 150px" class="tui-input" value="Blumenau" /><br>
|
||||
S<span class="yellow-255-text">t</span>ate......:
|
||||
<input style="width: 50px" class="tui-input" value="SC" /><br>
|
||||
C<span class="yellow-255-text">o</span>ntry.....:
|
||||
<input style="width: 100px" class="tui-input" value="Brazil" /><br><br>
|
||||
P<span class="yellow-255-text">h</span>one......:
|
||||
<input style="width: 200px" class="tui-input" value="(47) 3 3784-2134" /><br>
|
||||
F<span class="yellow-255-text">a</span>x........:
|
||||
<input style="width: 200px" class="tui-input" value="" /><br>
|
||||
E<span class="yellow-255-text">m</span>ail......:
|
||||
<input style="width: 250px" class="tui-input" value="robert@email.com" /><br><br>
|
||||
<span class="yellow-255-text">G</span>roup......:
|
||||
<select class="tui-input">
|
||||
<option>Owner</option>
|
||||
<option>Administrators</option>
|
||||
<option>Common Users</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="display: inline-block; width: 200px; vertical-align: top">
|
||||
<span>Locale</span>
|
||||
<div class="cyan-168">
|
||||
<label class="tui-radio black-255-text"> en-US
|
||||
<input type="radio" name="locale" checked>
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-radio black-255-text"> pt-BR
|
||||
<input type="radio" name="locale">
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-radio black-255-text"> es-EC
|
||||
<input type="radio" name="locale">
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-radio black-255-text"> none
|
||||
<input type="radio" name="locale">
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="right">
|
||||
<span>...Cod:</span><input style="width: 30px" class="tui-input">
|
||||
</div>
|
||||
<br><br>
|
||||
<span>Currency</span>
|
||||
<div class="cyan-168 black-255-text">
|
||||
<label class="tui-radio black-255-text"> USD
|
||||
<input type="radio" name="currency" checked>
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-radio black-255-text"> R$
|
||||
<input type="radio" name="currency">
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-radio black-255-text"> none
|
||||
<input type="radio" name="currency">
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
<br>
|
||||
Registered at: 09/06/2019 09:38:00 PM
|
||||
</div>
|
||||
<br><br>
|
||||
<button class="tui-button"><span class="yellow-255-text">n</span>ew</button>
|
||||
<button class="tui-button"><span class="yellow-255-text">d</span>el</button>
|
||||
<button class="tui-button"><span class="yellow-255-text">s</span>earch</button>
|
||||
<button class="tui-button"><span class="yellow-255-text">l</span>ist</button>
|
||||
<button class="tui-button"><span class="yellow-255-text">r</span>eports</button>
|
||||
<br><br>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="tui-statusbar blue-255 white-255-text absolute left-align">
|
||||
<ul>
|
||||
<li><a>09/06/2019</a></li>
|
||||
<li><a>Service Orders Count: 2</a></li>
|
||||
<li><a>10:43:00 PM</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
examples/resources/pcstartup1.png
Normal file
BIN
examples/resources/pcstartup1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
BIN
examples/resources/pcstartup2.png
Normal file
BIN
examples/resources/pcstartup2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
51
examples/scandisk.html
Normal file
51
examples/scandisk.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Scandisk Example</title>
|
||||
<script src="../dist/tuicss.min.js"></script>
|
||||
<link rel="stylesheet" href="../dist/tuicss.min.css">
|
||||
<style>
|
||||
.scandisk-button {
|
||||
background-color: rgb(80, 80, 80);
|
||||
color: rgb(168, 168, 168);
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="tui-screen-800-600 bordered blue-168" style="padding: 40px">
|
||||
<span class="cyan-255-text">Microsoft ScanDisk</span>
|
||||
<br><br>
|
||||
<span class="tui-divider cyan-255-border"></span>
|
||||
<br><br>
|
||||
<span class="white-168-text">ScanDisk is now checking the following areas of drive C:</span>
|
||||
<br><br>
|
||||
<div class="white-168-text" style="padding-left: 80px">
|
||||
<span class="cyan-255-text">√</span><span style="margin-left: 30px">Media descriptor</span><br>
|
||||
<span class="cyan-255-text">√</span><span style="margin-left: 30px">Files allocation tables</span><br>
|
||||
<span class="cyan-255-text">»</span><span style="margin-left: 30px">Directory structure</span><br>
|
||||
<span class="cyan-255-text"> </span><span style="margin-left: 30px">File system</span><br>
|
||||
<span class="cyan-255-text"> </span><span style="margin-left: 30px">Free space</span><br>
|
||||
<span class="cyan-255-text"> </span><span style="margin-left: 30px">Surface scan</span><br>
|
||||
</div>
|
||||
<div style="height: 220px"></div>
|
||||
<div>
|
||||
<button class="tui-button scandisk-button white-text">◄ Pause ►</button>
|
||||
<button class="tui-button scandisk-button"><span class="white-text">M</span>ore info</button>
|
||||
<button class="tui-button scandisk-button">E<span class="white-text">x</span>it</button>
|
||||
</div>
|
||||
<br><br>
|
||||
<span class="tui-divider cyan-255-border"></span>
|
||||
<br>
|
||||
<div>
|
||||
<span class="cyan-255-text">75% complete</span>
|
||||
<span class="tui-progress-bar right tui-bg-blue-black" style="width: 550px; ">
|
||||
<span class="tui-progress yellow-255" style="width: 75%"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
255
examples/table.html
Normal file
255
examples/table.html
Normal file
@@ -0,0 +1,255 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="tui-bg-blue-black">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Table Example</title>
|
||||
<script src="../dist/tuicss.min.js"></script>
|
||||
<link rel="stylesheet" href="../dist/tuicss.min.css">
|
||||
<style>
|
||||
.tui-window {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<body class="center" style="padding: 50px">
|
||||
<div class="tui-window" style="text-align: left;">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="center">Table</legend>
|
||||
<table class="tui-table" style="width: 700px">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>PID</th>
|
||||
<th>CPU</th>
|
||||
<th>Memory</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>conhost.exe</td>
|
||||
<td>25768</td>
|
||||
<td>00</td>
|
||||
<td>1.748 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>msdos.exe</td>
|
||||
<td>748</td>
|
||||
<td>00</td>
|
||||
<td>22.216 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>System</td>
|
||||
<td>25000</td>
|
||||
<td>12</td>
|
||||
<td>112 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>svchost.exe</td>
|
||||
<td>580</td>
|
||||
<td>01</td>
|
||||
<td>9.440 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>explorer.exe</td>
|
||||
<td>4</td>
|
||||
<td>00</td>
|
||||
<td>53.740 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>conhost.exe</td>
|
||||
<td>25768</td>
|
||||
<td>00</td>
|
||||
<td>1.748 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>msdos.exe</td>
|
||||
<td>748</td>
|
||||
<td>00</td>
|
||||
<td>22.216 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>System</td>
|
||||
<td>25000</td>
|
||||
<td>12</td>
|
||||
<td>112 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>svchost.exe</td>
|
||||
<td>580</td>
|
||||
<td>01</td>
|
||||
<td>9.440 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>explorer.exe</td>
|
||||
<td>4</td>
|
||||
<td>00</td>
|
||||
<td>53.740 Kb</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</fieldset>
|
||||
</div><br>
|
||||
|
||||
<div class="tui-window" style="text-align: left;">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="center">Table hovered</legend>
|
||||
<table class="tui-table hovered-cyan" style="width: 700px">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>PID</th>
|
||||
<th>CPU</th>
|
||||
<th>Memory</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>conhost.exe</td>
|
||||
<td>25768</td>
|
||||
<td>00</td>
|
||||
<td>1.748 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>msdos.exe</td>
|
||||
<td>748</td>
|
||||
<td>00</td>
|
||||
<td>22.216 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>System</td>
|
||||
<td>25000</td>
|
||||
<td>12</td>
|
||||
<td>112 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>svchost.exe</td>
|
||||
<td>580</td>
|
||||
<td>01</td>
|
||||
<td>9.440 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>explorer.exe</td>
|
||||
<td>4</td>
|
||||
<td>00</td>
|
||||
<td>53.740 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>conhost.exe</td>
|
||||
<td>25768</td>
|
||||
<td>00</td>
|
||||
<td>1.748 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>msdos.exe</td>
|
||||
<td>748</td>
|
||||
<td>00</td>
|
||||
<td>22.216 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>System</td>
|
||||
<td>25000</td>
|
||||
<td>12</td>
|
||||
<td>112 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>svchost.exe</td>
|
||||
<td>580</td>
|
||||
<td>01</td>
|
||||
<td>9.440 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>explorer.exe</td>
|
||||
<td>4</td>
|
||||
<td>00</td>
|
||||
<td>53.740 Kb</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</fieldset>
|
||||
</div><br>
|
||||
|
||||
<div class="tui-window" style="text-align: left;">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="center">Table striped</legend>
|
||||
<table class="tui-table striped-purple" style="width: 700px">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>PID</th>
|
||||
<th>CPU</th>
|
||||
<th>Memory</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>conhost.exe</td>
|
||||
<td>25768</td>
|
||||
<td>00</td>
|
||||
<td>1.748 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>msdos.exe</td>
|
||||
<td>748</td>
|
||||
<td>00</td>
|
||||
<td>22.216 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>System</td>
|
||||
<td>25000</td>
|
||||
<td>12</td>
|
||||
<td>112 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>svchost.exe</td>
|
||||
<td>580</td>
|
||||
<td>01</td>
|
||||
<td>9.440 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>explorer.exe</td>
|
||||
<td>4</td>
|
||||
<td>00</td>
|
||||
<td>53.740 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>conhost.exe</td>
|
||||
<td>25768</td>
|
||||
<td>00</td>
|
||||
<td>1.748 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>msdos.exe</td>
|
||||
<td>748</td>
|
||||
<td>00</td>
|
||||
<td>22.216 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>System</td>
|
||||
<td>25000</td>
|
||||
<td>12</td>
|
||||
<td>112 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>svchost.exe</td>
|
||||
<td>580</td>
|
||||
<td>01</td>
|
||||
<td>9.440 Kb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>explorer.exe</td>
|
||||
<td>4</td>
|
||||
<td>00</td>
|
||||
<td>53.740 Kb</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
187
examples/turbo-vision.html
Normal file
187
examples/turbo-vision.html
Normal file
@@ -0,0 +1,187 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="no-tui-scroll">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Turbo Vision Example</title>
|
||||
<script src="../dist/tuicss.min.js"></script>
|
||||
<link rel="stylesheet" href="../dist/tuicss.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="tui-screen-800-600 bordered tui-bg-blue-black">
|
||||
|
||||
<!-- Sidenav -->
|
||||
<nav class="tui-sidenav absolute">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">O</span>pen
|
||||
<span class="tui-shortcut">ctrl+o</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">OS Shell</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">C</span>opy
|
||||
<span class="tui-shortcut">ctrl+c</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">P</span>aste
|
||||
<span class="tui-shortcut">ctrl+v</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">C<span class="red-168-text">u</span>t
|
||||
<span class="tui-shortcut">ctrl+x</span>
|
||||
</a>
|
||||
</li>
|
||||
<div class="tui-black-divider"></div>
|
||||
<li>
|
||||
<a href="#!">Insert</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">Delete</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">Go...</a>
|
||||
</li>
|
||||
<div class="tui-black-divider"></div>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">S</span>earch
|
||||
<span class="tui-shortcut">ctrl+p</span>
|
||||
</a>
|
||||
</li>
|
||||
<div class="tui-black-divider"></div>
|
||||
<li>
|
||||
<a href="#!">Exit <span class="tui-shortcut">F10</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="tui-nav absolute">
|
||||
<span class="tui-datetime" data-format="h:m:s a"></span>
|
||||
<ul>
|
||||
<li class="tui-sidenav-button red-168-text">≡</li>
|
||||
<li class="tui-dropdown">
|
||||
<span class="red-168-text">F</span>ile
|
||||
<div class="tui-dropdown-content">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">N</span>ew
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">O</span>pen...
|
||||
<span class="tui-shortcut">F3</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">S</span>ave
|
||||
<span class="tui-shortcut">F2</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
S<span class="red-168-text">a</span>ve as...
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
Save a<span class="red-168-text">l</span>l
|
||||
</a>
|
||||
</li>
|
||||
<div class="tui-black-divider"></div>
|
||||
|
||||
<!-- SUBMENU EXAMPLE -->
|
||||
|
||||
<li class="tui-dropdown block">
|
||||
<span class="right">►</span>
|
||||
<span class="red-168-text">M</span>ore
|
||||
<div class="tui-dropdown-content">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">C</span>hange dir...
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">P</span>rint
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">D</span>OS shell
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<div class="tui-black-divider"></div>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">Q</span>uit
|
||||
<span class="tui-shortcut">F10</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="tui-dropdown">
|
||||
<span class="red-168-text">E</span>dit
|
||||
</li>
|
||||
<li class="tui-dropdown">
|
||||
<span class="red-168-text">V</span>iew
|
||||
</li>
|
||||
<li class="tui-dropdown">
|
||||
<span class="red-168-text">H</span>elp
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Edit panel -->
|
||||
<div class="tui-window full-width tui-no-shadow" style="margin-top: 20px;">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="center">MYAPP.CPP</legend>
|
||||
<span class="tui-fieldset-button"><span class="green-255-text">↕</span></span>
|
||||
<span class="tui-fieldset-button left"><span class="green-255-text">■</span></span>
|
||||
<span class="tui-fieldset-text top right" style="margin-right: 50px">1</span>
|
||||
<span class="tui-fieldset-text" style="margin-left: 50px;"> 1:1 </span>
|
||||
<textarea class="tui-textarea full-width" style="height: 493px; overflow: scroll;">#include <iostream>
|
||||
using namespace std;
|
||||
|
||||
int main()
|
||||
{
|
||||
cout << "Hello, World!";
|
||||
return 0;
|
||||
}</textarea>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<!-- Status bar -->
|
||||
<div class="tui-statusbar absolute">
|
||||
<ul>
|
||||
<li><a href="#!"><span class="red-168-text">F1</span> Help</a></li>
|
||||
<li><a href="#!"><span class="red-168-text">F2</span> Save</a></li>
|
||||
<li><a href="#!"><span class="red-168-text">F3</span> Open</a></li>
|
||||
<li><a href="#!"><span class="red-168-text">Alt+F9</span> Compile</a></li>
|
||||
<span class="tui-statusbar-divider"></span>
|
||||
<li><a href="#!"><span class="red-168-text">F10</span> Menu</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
170
examples/window-and-panels.html
Normal file
170
examples/window-and-panels.html
Normal file
@@ -0,0 +1,170 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="tui-bg-blue-black">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Window and Panels Example</title>
|
||||
<script src="../dist/tuicss.min.js"></script>
|
||||
<link rel="stylesheet" href="../dist/tuicss.min.css">
|
||||
<style>
|
||||
.tui-window, .tui-panel {
|
||||
margin-bottom: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
margin-bottom: 10px;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="center" style="margin-top: 100px; margin-bottom: 100px">
|
||||
|
||||
<!-- Simple window -->
|
||||
<div class="info-text">Simple window</div>
|
||||
<div class="tui-window">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend>Window</legend>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
|
||||
Curabitur id vestibulum libero, id fermentum lorem.<br>
|
||||
Aenean aliquam erat leo, eu tempus ex ornare eu.<br>
|
||||
Sed ut lacus libero. Etiam rhoncus ipsum arcu.<br>
|
||||
In quis bibendum libero. Donec nec egestas ipsum.<br>
|
||||
Sed in venenatis diam. Nullam sollicitudin risus vel.<br>
|
||||
<br>
|
||||
<div class="tui-divider"></div>
|
||||
<br>
|
||||
<button class="tui-button white-255-text">more...</button>
|
||||
<button class="tui-button purple-168 white-255-text">share</button>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<!-- Scrool window -->
|
||||
<div class="info-text">Scrool window</div>
|
||||
<div class="tui-window white-168 black-255-text">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="white-255-text">Window</legend>
|
||||
<div style="overflow: scroll; height: 200px; width: 400px; white-space: nowrap;">
|
||||
<span class="tui-shadow">The Lorem Ipsum </span><br><br>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
|
||||
Curabitur id vestibulum libero, id fermentum lorem.<br>
|
||||
Aenean aliquam erat leo, eu tempus ex ornare eu.<br>
|
||||
Sed ut lacus libero. Etiam rhoncus ipsum arcu.<br>
|
||||
In quis bibendum libero. Donec nec egestas ipsum.<br>
|
||||
Sed in venenatis diam. Nullam sollicitudin risus vel.<br>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
|
||||
Curabitur id vestibulum libero, id fermentum lorem.<br>
|
||||
Aenean aliquam erat leo, eu tempus ex ornare eu.<br>
|
||||
Sed ut lacus libero. Etiam rhoncus ipsum arcu.<br>
|
||||
In quis bibendum libero. Donec nec egestas ipsum.<br>
|
||||
Sed in venenatis diam. Nullam sollicitudin risus vel.<br>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
|
||||
Curabitur id vestibulum libero, id fermentum lorem.<br>
|
||||
Aenean aliquam erat leo, eu tempus ex ornare eu.<br>
|
||||
Sed ut lacus libero. Etiam rhoncus ipsum arcu.<br>
|
||||
In quis bibendum libero. Donec nec egestas ipsum.<br>
|
||||
Sed in venenatis diam. Nullam sollicitudin risus vel.<br>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<!-- Fieldset features -->
|
||||
<div class="info-text">Fieldset features</div>
|
||||
<div class="tui-window orange-168 black-255-text">
|
||||
<fieldset class="tui-fieldset tui-border-solid white-border">
|
||||
<legend class="center white-255-text">Window</legend>
|
||||
<button class="tui-fieldset-button left"><span class="green-255-text">↑</span></button>
|
||||
<button class="tui-fieldset-button"><span class="green-255-text">■</span></button>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
|
||||
Curabitur id vestibulum libero, id fermentum lorem.<br>
|
||||
Aenean aliquam erat leo, eu tempus ex ornare eu.<br>
|
||||
Sed ut lacus libero. Etiam rhoncus ipsum arcu.<br>
|
||||
In quis bibendum libero. Donec nec egestas ipsum.<br>
|
||||
Sed in venenatis diam. Nullam sollicitudin risus vel.<br>
|
||||
<br>
|
||||
<div class="tui-divider"></div>
|
||||
<br>
|
||||
<a class="tui-button white-168">Copy</a>
|
||||
<a class="tui-button white-168">Paste</a>
|
||||
<br><br>
|
||||
<div class="tui-fieldset-text">Text format: UTF-8</div>
|
||||
<div class="tui-fieldset-text right">Ln: 2, Col: 5</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<!-- Item select -->
|
||||
<div class="info-text">Item select</div>
|
||||
<div class="tui-window purple-168">
|
||||
<fieldset class="tui-fieldset no-legend tui-border-solid" style="width: 300px">
|
||||
<ul>
|
||||
<li class="cyan-255-hover black-255-text-hover">
|
||||
<a href="#!">
|
||||
<span class="tui-shortcut">A</span>
|
||||
<span>Register Tables</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="cyan-255-hover black-255-text-hover">
|
||||
<a href="#!">
|
||||
<span class="tui-shortcut">B</span>
|
||||
<span>Register Consumers</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="cyan-255-hover black-255-text-hover">
|
||||
<a href="#!">
|
||||
<span class="tui-shortcut">C</span>
|
||||
<span>Register Companies</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<!-- Window textarea -->
|
||||
<div class="info-text">Window textarea</div>
|
||||
<div class="tui-window">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="center">MYAPP.CPP</legend>
|
||||
<button class="tui-fieldset-button"><span class="green-255-text">↑</span></button>
|
||||
<button class="tui-fieldset-button tui-fieldset-button-left"><span class="green-255-text">■</span></button>
|
||||
<textarea class="tui-textarea" style="width: 400px; height: 200px;">#include <iostream>
|
||||
using namespace std;
|
||||
|
||||
int main()
|
||||
{
|
||||
cout << "Hello, World!";
|
||||
return 0;
|
||||
}</textarea>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<!-- Simple panel -->
|
||||
<div class="info-text">Simple panel</div>
|
||||
<div class="tui-panel cyan-168 black-255-text">
|
||||
<div class="tui-panel-content">
|
||||
<b>NOTE:</b> 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>
|
||||
|
||||
<!-- Panel title -->
|
||||
<div class="info-text">Panel title</div>
|
||||
<div class="tui-panel white-168 black-255-text">
|
||||
<div class="tui-panel-header">
|
||||
About
|
||||
</div>
|
||||
<div class="tui-panel-content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
|
||||
Curabitur id vestibulum libero, id fermentum lorem.
|
||||
<br><br>
|
||||
<div class="center">
|
||||
<button class="tui-button white-255" style="width: 80px">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
61
gulpfile.js
Normal file
61
gulpfile.js
Normal file
@@ -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);
|
||||
|
||||
|
||||
|
||||
|
||||
4891
package-lock.json
generated
Normal file
4891
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
34
package.json
Normal file
34
package.json
Normal file
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"name": "tuicss",
|
||||
"version": "1.0.0",
|
||||
"description": "TuiCss is a framework made to develop text-based user interface applications (TUI)",
|
||||
"keywords": [
|
||||
"TUI",
|
||||
"Text based user interface",
|
||||
"Turbo vision",
|
||||
"TuiCss"
|
||||
],
|
||||
"main": "dist/tuicss.min.css",
|
||||
"scripts": {
|
||||
"build": "gulp"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/vinibiavatti1/TuiCss.git"
|
||||
},
|
||||
"author": "Vinícius Reif Biavatti",
|
||||
"license": "MIT",
|
||||
"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.3.0",
|
||||
"gulp-copy": "^4.0.1",
|
||||
"gulp-minify": "^3.1.0",
|
||||
"gulp-rename": "^1.4.0",
|
||||
"gulp-sass": "^4.1.0"
|
||||
}
|
||||
}
|
||||
20
src/components/background.scss
Normal file
20
src/components/background.scss
Normal file
@@ -0,0 +1,20 @@
|
||||
.tui-bg-blue-white { background-image: url('./images/bg-blue-white.png'); background-repeat: repeat; }
|
||||
.tui-bg-blue-black { background-image: url('./images/bg-blue-black.png'); background-repeat: repeat; }
|
||||
|
||||
.tui-bg-green-white { background-image: url('./images/bg-green-white.png'); background-repeat: repeat; }
|
||||
.tui-bg-green-black { background-image: url('./images/bg-green-black.png'); background-repeat: repeat; }
|
||||
|
||||
.tui-bg-cyan-white { background-image: url('./images/bg-cyan-white.png'); background-repeat: repeat; }
|
||||
.tui-bg-cyan-black { background-image: url('./images/bg-cyan-black.png'); background-repeat: repeat; }
|
||||
|
||||
.tui-bg-red-white { background-image: url('./images/bg-red-white.png'); background-repeat: repeat; }
|
||||
.tui-bg-red-black { background-image: url('./images/bg-red-black.png'); background-repeat: repeat; }
|
||||
|
||||
.tui-bg-purple-white { background-image: url('./images/bg-purple-white.png'); background-repeat: repeat; }
|
||||
.tui-bg-purple-black { background-image: url('./images/bg-purple-black.png'); background-repeat: repeat; }
|
||||
|
||||
.tui-bg-yellow-white { background-image: url('./images/bg-yellow-white.png'); background-repeat: repeat; }
|
||||
.tui-bg-yellow-black { background-image: url('./images/bg-yellow-black.png'); background-repeat: repeat; }
|
||||
|
||||
.tui-bg-orange-white { background-image: url('./images/bg-orange-white.png'); background-repeat: repeat; }
|
||||
.tui-bg-orange-black { background-image: url('./images/bg-orange-black.png'); background-repeat: repeat; }
|
||||
19
src/components/border.scss
Normal file
19
src/components/border.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
.tui-border-solid {
|
||||
border-style: solid !important;
|
||||
border-width: 2px !important;
|
||||
}
|
||||
|
||||
.tui-border-dashed {
|
||||
border-style: dashed !important;
|
||||
border-width: 2px !important;
|
||||
}
|
||||
|
||||
.tui-border-dotted {
|
||||
border-style: dotted !important;
|
||||
border-width: 2px !important;
|
||||
}
|
||||
|
||||
.tui-border-double {
|
||||
border-style: double !important;
|
||||
border-width: 6px !important;
|
||||
}
|
||||
25
src/components/button.scss
Normal file
25
src/components/button.scss
Normal file
@@ -0,0 +1,25 @@
|
||||
@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;
|
||||
}
|
||||
input[type=button] {
|
||||
width: initial;
|
||||
}
|
||||
98
src/components/chart.scss
Normal file
98
src/components/chart.scss
Normal file
@@ -0,0 +1,98 @@
|
||||
/* Chart container */
|
||||
.tui-chart-vertical {
|
||||
position: relative;
|
||||
background-color: black;
|
||||
}
|
||||
.tui-chart-horizontal {
|
||||
position: relative;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
/* Chart display */
|
||||
.tui-chart-vertical .tui-chart-display {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 50px;
|
||||
right: 0px;
|
||||
bottom: 30px;
|
||||
align-items: flex-end;
|
||||
border-bottom: 2px solid white;
|
||||
border-left: 2px solid white;
|
||||
}
|
||||
.tui-chart-horizontal .tui-chart-display {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
top: 0px;
|
||||
left: 50px;
|
||||
right: 0px;
|
||||
bottom: 30px;
|
||||
align-items: stretch;
|
||||
border-bottom: 2px solid white;
|
||||
border-left: 2px solid white;
|
||||
}
|
||||
|
||||
/* Chart X axis */
|
||||
.tui-chart-x-axis {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
height: 30px;
|
||||
left: 50px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
/* Chart Y axis */
|
||||
.tui-chart-y-axis {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
bottom: 30px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
/* Chart legends */
|
||||
.tui-chart-vertical .tui-chart-x-axis .tui-chart-legend {
|
||||
flex-basis: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.tui-chart-vertical .tui-chart-y-axis .tui-chart-legend {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
padding-right: 2px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.tui-chart-horizontal .tui-chart-x-axis .tui-chart-legend {
|
||||
flex-basis: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
.tui-chart-horizontal .tui-chart-y-axis .tui-chart-legend {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
padding-right: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* Chart value */
|
||||
.tui-chart-vertical .tui-chart-display .tui-chart-value {
|
||||
margin: 0px 30px;
|
||||
flex-basis: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.tui-chart-horizontal .tui-chart-display .tui-chart-value {
|
||||
margin: 5px 0px;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: flex-start;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
33
src/components/checkbox.scss
Normal file
33
src/components/checkbox.scss
Normal file
@@ -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;
|
||||
}
|
||||
5
src/components/datetime.scss
Normal file
5
src/components/datetime.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
.tui-datetime {
|
||||
padding: 1px 0px 1px 0px;
|
||||
margin-right: 10px;
|
||||
float:right;
|
||||
}
|
||||
8
src/components/divider.scss
Normal file
8
src/components/divider.scss
Normal file
@@ -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;
|
||||
}
|
||||
29
src/components/dropdown.scss
Normal file
29
src/components/dropdown.scss
Normal file
@@ -0,0 +1,29 @@
|
||||
@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-content ul li a:hover {
|
||||
background-color: rgb(0, 168, 0);
|
||||
}
|
||||
.tui-dropdown:hover > .tui-dropdown-content:first-of-type {
|
||||
display: block;
|
||||
}
|
||||
78
src/components/fieldset.scss
Normal file
78
src/components/fieldset.scss
Normal file
@@ -0,0 +1,78 @@
|
||||
@import '../mixins.scss';
|
||||
|
||||
.tui-fieldset {
|
||||
border: 6px white double;
|
||||
padding: 12px;
|
||||
background-color: inherit;
|
||||
margin-bottom: 6px;
|
||||
|
||||
&.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 legend {
|
||||
color: white;
|
||||
}
|
||||
.tui-input-fieldset:hover {
|
||||
border-color: yellow;
|
||||
}
|
||||
.tui-input-fieldset:hover legend {
|
||||
color: yellow;
|
||||
}
|
||||
.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;
|
||||
@include disable-select;
|
||||
|
||||
&.left {
|
||||
right: initial;
|
||||
left: 16px !important;
|
||||
}
|
||||
&.bottom {
|
||||
bottom: 0px;
|
||||
top: initial;
|
||||
}
|
||||
}
|
||||
.tui-fieldset-text {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 16px;
|
||||
color: white;
|
||||
background-color: inherit;
|
||||
z-index: 2;
|
||||
padding: 2px;
|
||||
|
||||
&.right {
|
||||
left: initial;
|
||||
right: 16px;
|
||||
}
|
||||
&.top {
|
||||
top: 0px;
|
||||
bottom: initial;
|
||||
}
|
||||
}
|
||||
.tui-fieldset-button::before {
|
||||
content: "[";
|
||||
}
|
||||
.tui-fieldset-button::after {
|
||||
content: "]";
|
||||
}
|
||||
.tui-fieldset-button:active {
|
||||
color: rgb(0, 255, 255)!important;
|
||||
}
|
||||
158
src/components/grid.scss
Normal file
158
src/components/grid.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
11
src/components/input.scss
Normal file
11
src/components/input.scss
Normal file
@@ -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;
|
||||
}
|
||||
25
src/components/modal.scss
Normal file
25
src/components/modal.scss
Normal file
@@ -0,0 +1,25 @@
|
||||
.tui-modal {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
top: 100px;
|
||||
z-index: 101;
|
||||
display: none;
|
||||
&.active {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
.tui-overlap {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
z-index: 100;
|
||||
display: none;
|
||||
&.active {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
.tui-modal-button {}
|
||||
.tui-modal-close-button {}
|
||||
22
src/components/navbar.scss
Normal file
22
src/components/navbar.scss
Normal file
@@ -0,0 +1,22 @@
|
||||
@import '../mixins.scss';
|
||||
|
||||
.tui-nav {
|
||||
width: 100%;
|
||||
background-color: rgb(168, 168, 168);
|
||||
padding: 0px 2px;
|
||||
z-index: 9;
|
||||
display: block;
|
||||
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);
|
||||
}
|
||||
17
src/components/panel.scss
Normal file
17
src/components/panel.scss
Normal file
@@ -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;
|
||||
}
|
||||
37
src/components/progressbar.scss
Normal file
37
src/components/progressbar.scss
Normal file
@@ -0,0 +1,37 @@
|
||||
.tui-progress-bar {
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 20px;
|
||||
width: 200px;
|
||||
background-color: rgb(0, 168, 168);
|
||||
overflow: hidden;
|
||||
}
|
||||
.tui-progress {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
background-color: rgb(0, 255, 255);
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
.tui-progress-bar .tui-indeterminate {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
background-color: rgb(0, 255, 255);
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
display: inline-block;
|
||||
animation: indeterminate 1s backwards;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
.tui-progress-label {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
z-index: 1;
|
||||
}
|
||||
@keyframes indeterminate {
|
||||
from {margin-left: -10%; }
|
||||
to {margin-left: 100%}
|
||||
}
|
||||
33
src/components/radio.scss
Normal file
33
src/components/radio.scss
Normal file
@@ -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;
|
||||
}
|
||||
25
src/components/screen.scss
Normal file
25
src/components/screen.scss
Normal file
@@ -0,0 +1,25 @@
|
||||
.tui-screen-640-480 {
|
||||
width: 640px;
|
||||
height: 480px;
|
||||
}
|
||||
.tui-screen-800-600 {
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
}
|
||||
.tui-screen-1024-768 {
|
||||
width: 1024px;
|
||||
height: 768px;
|
||||
}
|
||||
|
||||
.tui-screen-640-480,
|
||||
.tui-screen-800-600,
|
||||
.tui-screen-1024-768 {
|
||||
position: relative;
|
||||
&.bordered{
|
||||
border: 2px solid black;
|
||||
}
|
||||
&.centered {
|
||||
margin: auto;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
105
src/components/scrollbar.scss
Normal file
105
src/components/scrollbar.scss
Normal file
@@ -0,0 +1,105 @@
|
||||
@import '../variables.scss';
|
||||
|
||||
@if $scroll-default-tui {
|
||||
|
||||
/* Default */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background-image: $scroll-default-image;
|
||||
background-repeat: repeat;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: $scroll-default-color;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: $scroll-default-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Styles */
|
||||
.tui-scroll-blue {
|
||||
::-webkit-scrollbar-track {
|
||||
background-image: url(images/scroll-blue.png);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(0, 0, 168);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgb(0, 0, 168);
|
||||
}
|
||||
}
|
||||
|
||||
.tui-scroll-green {
|
||||
::-webkit-scrollbar-track {
|
||||
background-image: url(images/scroll-green.png);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(0, 168, 0);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgb(0, 168, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.tui-scroll-cyan {
|
||||
::-webkit-scrollbar-track {
|
||||
background-image: url(images/scroll-cyan.png);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(0, 168, 168);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgb(0, 168, 168);
|
||||
}
|
||||
}
|
||||
|
||||
.tui-scroll-red {
|
||||
::-webkit-scrollbar-track {
|
||||
background-image: url(images/scroll-red.png);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(168, 0, 0);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgb(168, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.tui-scroll-purple {
|
||||
::-webkit-scrollbar-track {
|
||||
background-image: url(images/scroll-purple.png);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(168, 0, 168);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgb(168, 0, 168);
|
||||
}
|
||||
}
|
||||
|
||||
.tui-scroll-yellow {
|
||||
::-webkit-scrollbar-track {
|
||||
background-image: url(images/scroll-yellow.png);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(168, 168, 0);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgb(168, 168, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.tui-scroll-white {
|
||||
::-webkit-scrollbar-track {
|
||||
background-image: url(images/scroll-white.png);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(168, 168, 168);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgb(168, 168, 168);
|
||||
}
|
||||
}
|
||||
43
src/components/shadow.scss
Normal file
43
src/components/shadow.scss
Normal file
@@ -0,0 +1,43 @@
|
||||
.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-shadow-left, .tui-shadow-left-1 {
|
||||
box-shadow: -10px 10px black!important;
|
||||
}
|
||||
|
||||
.tui-shadow-left-2 {
|
||||
box-shadow: -15px 15px black!important;
|
||||
}
|
||||
|
||||
.tui-shadow-left-3 {
|
||||
box-shadow: -20px 20px black!important;
|
||||
}
|
||||
|
||||
.tui-shadow-left-4 {
|
||||
box-shadow: -25px 25px black!important;
|
||||
}
|
||||
|
||||
.tui-shadow-left-5 {
|
||||
box-shadow: -30px 30px black!important;
|
||||
}
|
||||
|
||||
.tui-no-shadow {
|
||||
box-shadow: none!important;
|
||||
}
|
||||
3
src/components/shortcut.scss
Normal file
3
src/components/shortcut.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
.tui-shortcut {
|
||||
float: right;
|
||||
}
|
||||
41
src/components/sidenav.scss
Normal file
41
src/components/sidenav.scss
Normal file
@@ -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;
|
||||
}
|
||||
28
src/components/statusbar.scss
Normal file
28
src/components/statusbar.scss
Normal file
@@ -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;
|
||||
}
|
||||
101
src/components/table.scss
Normal file
101
src/components/table.scss
Normal file
@@ -0,0 +1,101 @@
|
||||
.tui-table {
|
||||
border: 2px solid rgb(168, 168, 168);
|
||||
padding: 5px;
|
||||
border-collapse: collapse;
|
||||
|
||||
&.hovered-blue tbody tr:hover {
|
||||
background-color: rgb(0, 0, 255) !important;
|
||||
color: black;
|
||||
}
|
||||
|
||||
&.hovered-green tbody tr:hover {
|
||||
background-color: rgb(0, 255, 0) !important;
|
||||
color: black;
|
||||
}
|
||||
|
||||
&.hovered-cyan tbody tr:hover {
|
||||
background-color: rgb(0, 255, 255) !important;
|
||||
color: black;
|
||||
}
|
||||
|
||||
&.hovered-red tbody tr:hover {
|
||||
background-color: rgb(255, 0, 0) !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.hovered-purple tbody tr:hover {
|
||||
background-color: rgb(255, 0, 255) !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.hovered-yellow tbody tr:hover {
|
||||
background-color: rgb(255, 255, 0) !important;
|
||||
color: black;
|
||||
}
|
||||
|
||||
&.hovered-white tbody tr:hover {
|
||||
background-color: rgb(255, 255, 255) !important;
|
||||
color: black;
|
||||
}
|
||||
|
||||
&.hovered-orange tbody tr:hover {
|
||||
background-color: rgb(255, 168, 0) !important;
|
||||
color: black;
|
||||
}
|
||||
|
||||
&.hovered tbody tr:hover {
|
||||
background-color: rgb(0, 255, 255) !important;
|
||||
color: black;
|
||||
}
|
||||
|
||||
&.striped-blue tbody tr:nth-child(even) {
|
||||
background-color: rgb(0, 0, 168);
|
||||
}
|
||||
|
||||
&.striped-green tbody tr:nth-child(even) {
|
||||
background-color: rgb(0, 168, 0);
|
||||
}
|
||||
|
||||
&.striped-cyan tbody tr:nth-child(even) {
|
||||
background-color: rgb(0, 168, 168);
|
||||
}
|
||||
|
||||
&.striped-red tbody tr:nth-child(even) {
|
||||
background-color: rgb(168, 0, 0);
|
||||
}
|
||||
|
||||
&.striped-purple tbody tr:nth-child(even) {
|
||||
background-color: rgb(168, 0, 168);
|
||||
}
|
||||
|
||||
&.striped-yellow tbody tr:nth-child(even) {
|
||||
background-color: rgb(168, 168, 0);
|
||||
}
|
||||
|
||||
&.striped-white tbody tr:nth-child(even) {
|
||||
background-color: rgb(168, 168, 168);
|
||||
color: black;
|
||||
}
|
||||
|
||||
&.striped-orange tbody tr:nth-child(even) {
|
||||
background-color: rgb(168, 86, 0);
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.tui-table tfoot {
|
||||
background-color: inherit;
|
||||
color: rgb(255, 255, 0);
|
||||
text-align: center;
|
||||
}
|
||||
13
src/components/tablegrid.scss
Normal file
13
src/components/tablegrid.scss
Normal file
@@ -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;
|
||||
}
|
||||
26
src/components/tabs.scss
Normal file
26
src/components/tabs.scss
Normal file
@@ -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;
|
||||
}
|
||||
7
src/components/textarea.scss
Normal file
7
src/components/textarea.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
.tui-textarea {
|
||||
background-color: inherit;
|
||||
border: none;
|
||||
padding: 0px;
|
||||
color: rgb(255, 255, 0);
|
||||
outline: none;
|
||||
}
|
||||
8
src/components/window.scss
Normal file
8
src/components/window.scss
Normal file
@@ -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;
|
||||
}
|
||||
BIN
src/fonts/Perfect DOS VGA 437 Win.ttf
Normal file
BIN
src/fonts/Perfect DOS VGA 437 Win.ttf
Normal file
Binary file not shown.
BIN
src/fonts/Perfect DOS VGA 437.ttf
Normal file
BIN
src/fonts/Perfect DOS VGA 437.ttf
Normal file
Binary file not shown.
72
src/fonts/dos437.txt
Normal file
72
src/fonts/dos437.txt
Normal file
@@ -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 ("<22>" 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^
|
||||
-------------------------------------------------------------------------------
|
||||
BIN
src/images/bg-blue-black.png
Normal file
BIN
src/images/bg-blue-black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 166 B |
BIN
src/images/bg-blue-white.png
Normal file
BIN
src/images/bg-blue-white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 B |
BIN
src/images/bg-cyan-black.png
Normal file
BIN
src/images/bg-cyan-black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 B |
BIN
src/images/bg-cyan-white.png
Normal file
BIN
src/images/bg-cyan-white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 165 B |
BIN
src/images/bg-green-black.png
Normal file
BIN
src/images/bg-green-black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 B |
BIN
src/images/bg-green-white.png
Normal file
BIN
src/images/bg-green-white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 165 B |
BIN
src/images/bg-orange-black.png
Normal file
BIN
src/images/bg-orange-black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 B |
BIN
src/images/bg-orange-white.png
Normal file
BIN
src/images/bg-orange-white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 165 B |
BIN
src/images/bg-purple-black.png
Normal file
BIN
src/images/bg-purple-black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 B |
BIN
src/images/bg-purple-white.png
Normal file
BIN
src/images/bg-purple-white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 165 B |
BIN
src/images/bg-red-black.png
Normal file
BIN
src/images/bg-red-black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 166 B |
BIN
src/images/bg-red-white.png
Normal file
BIN
src/images/bg-red-white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 165 B |
BIN
src/images/bg-yellow-black.png
Normal file
BIN
src/images/bg-yellow-black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 B |
BIN
src/images/bg-yellow-white.png
Normal file
BIN
src/images/bg-yellow-white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 165 B |
BIN
src/images/scroll-blue.png
Normal file
BIN
src/images/scroll-blue.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 166 B |
BIN
src/images/scroll-cyan.png
Normal file
BIN
src/images/scroll-cyan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 B |
BIN
src/images/scroll-green.png
Normal file
BIN
src/images/scroll-green.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 167 B |
BIN
src/images/scroll-orange.png
Normal file
BIN
src/images/scroll-orange.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 167 B |
BIN
src/images/scroll-purple.png
Normal file
BIN
src/images/scroll-purple.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 B |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user