Yidhra/TuiCss
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Created examples

Browse Source
This commit is contained in:
vinibiavatti
2019-09-06 00:07:44 -03:00
parent 2e1b284d12
commit 075b56fcc6
48 changed files with 2558 additions and 1378 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
examples/general.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" class="tui-blue-bg">
<html lang="en" class="tui-bg-blue-black">
<head>
<meta charset="UTF-8">
@@ -320,7 +320,7 @@
<!-- WINDOW EXAMPLE 6 -->
<div class="tui-window red-168">
<fieldset class="tui-window-fieldset tui-window-fieldset-no-legend tui-border-solid">
<fieldset class="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.

79
examples/inputs.html Normal file
View 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="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-input {
width: 300px;
}
</style>
</head>
<body class="center" style="padding: 50px">
<div class="tui-window" style="text-align: left">
<fieldset class="tui-window-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>
</fieldset>
</div>
</body>
</html>

2
examples/pc-startup.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<title>PC Startup</title>
<title>PC Startup 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">

55
examples/pocket-calculator.html
View File

@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pocket Calculator Example</title>
<script src="plugins/jquery-3.4.1.min.js"></script>
<script src="../dist/tuicss.min.js"></script>
<link rel="stylesheet" href="../dist/tuicss.min.css">
</head>
<body>
<div class="tui-screen-800-600 bordered blue-168" style="padding: 40px">
<div class="center" style="margin-top: 100px;">
<div class="tui-window white-168">
<fieldset class="tui-window-fieldset">
<legend align="center">Pocket Calculator</legend>
&nbsp;<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&nbsp;</button>
<button class="tui-button">&#60;-</button>
<button class="tui-button">%&nbsp;</button>
<button class="tui-button">+-</button><br><br>
<button class="tui-button" onclick="digit('7')">7&nbsp;</button>
<button class="tui-button" onclick="digit('8')">8&nbsp;</button>
<button class="tui-button" onclick="digit('9')">9&nbsp;</button>
<button class="tui-button">/&nbsp;</button><br><br>
<button class="tui-button" onclick="digit('4')">4&nbsp;</button>
<button class="tui-button" onclick="digit('5')">5&nbsp;</button>
<button class="tui-button" onclick="digit('6')">6&nbsp;</button>
<button class="tui-button">*&nbsp;</button><br><br>
<button class="tui-button" onclick="digit('1')">1&nbsp;</button>
<button class="tui-button" onclick="digit('2')">2&nbsp;</button>
<button class="tui-button" onclick="digit('3')">3&nbsp;</button>
<button class="tui-button">-&nbsp;</button><br><br>
<button class="tui-button" onclick="digit('0')">0&nbsp;</button>
<button class="tui-button" onclick="digit('.')">.&nbsp;</button>
<button class="tui-button">=&nbsp;</button>
<button class="tui-button">+&nbsp;</button>
</fieldset>
</div>
</div>
</div>
<script>
function digit(digit) {
let val = $("#display").val();
$("#display").val(digit + "" + val);
}
function clearDisplay() {
$("#display").val("");
}
</script>
</body>
</html>

52
examples/scandisk.html
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scandisk 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>
.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">&nbsp;</span><span style="margin-left: 30px">File system</span><br>
<span class="cyan-255-text">&nbsp;</span><span style="margin-left: 30px">Free space</span><br>
<span class="cyan-255-text">&nbsp;</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 right tui-texturized-blue-black" style="width: 550px; ">
<span style="width: 75%" class="yellow-255"></span>
</span>
</div>
</div>
</body>
</html>

171
examples/window-and-panels.html Normal file
View File

@@ -0,0 +1,171 @@
<!DOCTYPE html>
<html lang="en" class="tui-bg-blue-black">
<head>
<meta charset="UTF-8">
<title>Window and Panels 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-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-window-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-window-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-window-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-statusbar">Text format: UTF-8</div>
<div class="tui-fieldset-statusbar 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-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>
</ul>
</fieldset>
</div>
<!-- Window textarea -->
<div class="info-text">Window textarea</div>
<div class="tui-window">
<fieldset class="tui-window-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 &#60;iostream&#62;
using namespace std;
int main()
{
cout &#60;&#60; "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>