first
This commit is contained in:
vinicius.reif
parent
edef862d22
commit
ae4c1c119e
BIN
TuiCSS/images/bg-black.png
Normal file
BIN
TuiCSS/images/bg-black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 166 B |
BIN
TuiCSS/images/bg.png
Normal file
BIN
TuiCSS/images/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 B |
BIN
TuiCSS/images/scroll.png
Normal file
BIN
TuiCSS/images/scroll.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 B |
542
TuiCSS/style.css
Normal file
542
TuiCSS/style.css
Normal file
@ -0,0 +1,542 @@
|
||||
/*
|
||||
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;
|
||||
}
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
.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 {
|
||||
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;
|
||||
}
|
||||
.tui-fieldset legend {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
796
examples.html
Normal file
796
examples.html
Normal file
@ -0,0 +1,796 @@
|
||||
<!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/style.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>
|
||||
<button class="tui-button white-168">accept</button>
|
||||
</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>
|
||||
Loading…
x
Reference in New Issue
Block a user