mirror of
https://github.com/Karaka-Management/cssOMS.git
synced 2026-01-11 19:18:40 +00:00
874 lines
39 KiB
HTML
874 lines
39 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<base href="http://127.0.0.1/cssOMS/tests/">
|
|
<title>Style Test</title>
|
|
<link rel="stylesheet" type="text/css" href="/Resources/fontawesome/css/font-awesome.min.css">
|
|
<link rel="stylesheet" type="text/css" href="/cssOMS/styles.css">
|
|
<script src="../../jsOMS/Utils/oLib.js"></script>
|
|
<script src="../../jsOMS/Asset/AssetManager.js"></script>
|
|
<script src="../../jsOMS/Autoloader.js"></script>
|
|
<script src="../../jsOMS/Account/AccountType.js"></script>
|
|
<script src="../../jsOMS/Account/AccountManager.js"></script>
|
|
<script src="../../jsOMS/Uri/Http.js"></script>
|
|
<script src="../../jsOMS/Uri/UriFactory.js"></script>
|
|
<script src="../../jsOMS/DataStorage/CacheManager.js"></script>
|
|
<script src="../../jsOMS/DataStorage/LocalStorage.js"></script>
|
|
<script src="../../jsOMS/DataStorage/StorageManager.js"></script>
|
|
<script src="../../jsOMS/Event/EventManager.js"></script>
|
|
<script src="../../jsOMS/Message/Request/BrowserType.js"></script>
|
|
<script src="../../jsOMS/Message/Request/OSType.js"></script>
|
|
<script src="../../jsOMS/Message/Request/RequestMethod.js"></script>
|
|
<script src="../../jsOMS/Message/Request/RequestType.js"></script>
|
|
<script src="../../jsOMS/Message/Request/Request.js"></script>
|
|
<script src="../../jsOMS/UI/ActionManager.js"></script>
|
|
<script src="../../jsOMS/Message/Response/ResponseType.js"></script>
|
|
<script src="../../jsOMS/Message/Response/ResponseManager.js"></script>
|
|
<script src="../../jsOMS/Message/Response/Response.js"></script>
|
|
<script src="../../jsOMS/Message/Notification/App/AppNotification.js"></script>
|
|
<script src="../../jsOMS/Message/Notification/Browser/BrowserNotification.js"></script>
|
|
<script src="../../jsOMS/Message/Notification/NotificationType.js"></script>
|
|
<script src="../../jsOMS/Message/Notification/NotificationLevel.js"></script>
|
|
<script src="../../jsOMS/Message/Notification/NotificationManager.js"></script>
|
|
<script src="../../jsOMS/Message/Notification/NotificationMessage.js"></script>
|
|
<script src="../../jsOMS/Module/ModuleFactory.js"></script>
|
|
<script src="../../jsOMS/Module/ModuleManager.js"></script>
|
|
<script src="../../jsOMS/Dispatcher/Dispatcher.js"></script>
|
|
<script src="../../jsOMS/Log/Logger.js"></script>
|
|
<script src="../../jsOMS/Log/LogLevel.js"></script>
|
|
<script src="../../jsOMS/UI/Component/Form.js"></script>
|
|
<script src="../../jsOMS/UI/Component/Table.js"></script>
|
|
<script src="../../jsOMS/UI/Input/InputManager.js"></script>
|
|
<script src="../../jsOMS/UI/Input/Keyboard/KeyboardManager.js"></script>
|
|
<script src="../../jsOMS/UI/Input/Mouse/ClickType.js"></script>
|
|
<script src="../../jsOMS/UI/Input/Mouse/EventType.js"></script>
|
|
<script src="../../jsOMS/UI/Input/Mouse/MouseManager.js"></script>
|
|
<script src="../../jsOMS/UI/Input/Touch/TouchManager.js"></script>
|
|
<script src="../../jsOMS/UI/Input/Voice/VoiceManager.js"></script>
|
|
<script src="../../jsOMS/UI/Input/Voice/ReadManager.js"></script>
|
|
<script src="../../jsOMS/UI/Input/Voice/SpeechManager.js"></script>
|
|
<script src="../../jsOMS/UI/Component/Tab.js"></script>
|
|
<script src="../../jsOMS/UI/Loader.js"></script>
|
|
<script src="../../jsOMS/UI/DragNDrop.js"></script>
|
|
<script src="../../jsOMS/UI/GeneralUI.js"></script>
|
|
<script src="../../jsOMS/UI/UIManager.js"></script>
|
|
<script src="../../jsOMS/Views/FormView.js"></script>
|
|
<script src="../../jsOMS/Views/TableView.js"></script>
|
|
<script src="../../jsOMS/Utils/Parser/Markdown.js"></script>
|
|
<script src="../../jsOMS/Model/Message/DomActionType.js"></script>
|
|
<script src="../../jsOMS/Model/Message/DomAction.js"></script>
|
|
<script src="../../jsOMS/Model/Message/FormValidation.js"></script>
|
|
<script src="../../jsOMS/Model/Message/NotifyType.js"></script>
|
|
<script src="../../jsOMS/Model/Message/Notify.js"></script>
|
|
<script src="../../jsOMS/Model/Message/Redirect.js"></script>
|
|
<script src="../../jsOMS/Model/Message/Reload.js"></script>
|
|
<script src="../../jsOMS/Model/Action/Message/Request.js"></script>
|
|
<script src="../../jsOMS/Model/Action/Message/Log.js"></script>
|
|
<script src="../../jsOMS/Model/Action/Dom/Popup.js"></script>
|
|
<script src="../../jsOMS/Model/Action/Dom/Remove.js"></script>
|
|
<script src="../../jsOMS/Model/Action/Dom/Show.js"></script>
|
|
<script src="../../jsOMS/Model/Action/Dom/Hide.js"></script>
|
|
<script src="../../jsOMS/Model/Action/Dom/Focus.js"></script>
|
|
<script src="../../jsOMS/Model/Action/Dom/Datalist/Clear.js"></script>
|
|
<script src="../../jsOMS/Model/Action/Dom/Datalist/Append.js"></script>
|
|
<script src="../../jsOMS/Model/Action/Dom/Table/Clear.js"></script>
|
|
<script src="../../jsOMS/Model/Action/Dom/Table/Append.js"></script>
|
|
<script src="../../jsOMS/Model/Action/Utils/Timer.js"></script>
|
|
<script src="../../jsOMS/Model/Action/Validate/Keypress.js"></script>
|
|
<script src="../../jsOMS/Model/Action/Dom/SetValue.js"></script>
|
|
<script src="../../jsOMS/Model/Action/Dom/RemoveValue.js"></script>
|
|
<script src="../../jsOMS/Model/Action/Dom/GetValue.js"></script>
|
|
<script src="../../Web/Backend/js/config.js"></script>
|
|
<script src="../../Web/Backend/js/global/ActionEvents.js"></script>
|
|
<script src="../../Web/Backend/js/global/KeyboardEvents.js"></script>
|
|
<script src="../../Web/Backend/js/global/MouseEvents.js"></script>
|
|
<script src="../../Web/Backend/js/global/ResponseEvents.js"></script>
|
|
<script src="../../Web/Backend/js/global/TouchEvents.js"></script>
|
|
<script src="../../Web/Backend/js/global/VoiceEvents.js"></script>
|
|
<script src="load.js"></script>
|
|
</head>
|
|
<body>
|
|
<div style="width: 900px; padding: 20px; border: 1px solid #ff000000;" class="center">
|
|
<h1>Boxes</h1>
|
|
<h2>Simple</h2>
|
|
<section class="box center">This is some test text.</section>
|
|
<section class="box center"><div class="inner">This is some text in a inner box</div></section>
|
|
<section class="box center"><h1>Headline</h1><div class="inner">This is some text in a inner box</div></section>
|
|
<section class="box center"><header><h1>Header1</h1></header><div class="inner">This is some text in a inner box</div></section>
|
|
|
|
<h2>Colored</h2>
|
|
<section class="box center red"><header><h1>Header1</h1></header><div class="inner">This is some text in a inner box</div></section>
|
|
<section class="box center green"><header><h1>Header1</h1></header><div class="inner">This is some text in a inner box</div></section>
|
|
<section class="box center blue"><header><h1>Header1</h1></header><div class="inner">This is some text in a inner box</div></section>
|
|
<section class="box center purple"><header><h1>Header1</h1></header><div class="inner">This is some text in a inner box</div></section>
|
|
<section class="box center orange"><header><h1>Header1</h1></header><div class="inner">This is some text in a inner box</div></section>
|
|
<section class="box center darkblue"><header><h1>Header1</h1></header><div class="inner">This is some text in a inner box</div></section>
|
|
|
|
<h2>Article</h2>
|
|
<section class="box center">
|
|
<article>
|
|
<h1>Headline1</h1>
|
|
<h2>Headline2</h2>
|
|
<h3>Headline3</h3>
|
|
<h4>Headline4</h4>
|
|
<h5>Headline5</h5>
|
|
<h6>Headline6</h6>
|
|
<h7>Headline7</h7>
|
|
<p><span class="tooltip">Tooltip<i>My Tooltip asd a sd <br>asdfsdf adf asd</i></span> ipsum dolor sit amet,
|
|
consectetur adipiscing elit. Duis posuere, nulla eu condimentum eleifend, nulla magna viverra risus, ut
|
|
faucibus libero libero nec est. Nunc quis rhoncus est, ac sodales lorem. Suspendisse convallis, massa eu
|
|
<a href="#">volutpat</a> posuere, justo dolor porta dui, a ullamcorper ex ipsum eget arcu. Cras quis
|
|
ante placerat, tempus orci vitae, semper nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
|
|
cubilia Curae; Duis at sodales sapien. Morbi dolor risus, finibus ut ipsum non, pellentesque varius ex. Etiam
|
|
pretium tempus diam at eleifend. Quisque a tortor et nisi commodo pretium ac at erat. Nam non iaculis
|
|
ipsum, ultrices tempus nisl. Pellentesque ornare tellus vehicula sapien fringilla cursus. Duis sed tellus
|
|
sagittis elit accumsan placerat et nec ex. In sit amet blandit nunc, a pulvinar nunc. Phasellus vulputate
|
|
facilisis lorem eget aliquet. Curabitur odio ante, lobortis vitae est at, consequat posuere elit.</p>
|
|
|
|
<p><span class="tooltip">Lorem<i>My Tooltip asd a sd asdfsdf adf asd</i></span> sed nulla et ante
|
|
consectetur dictum. Nunc molestie ligula eget felis tincidunt suscipit. Fusce scelerisque diam lectus, non faucibus
|
|
ligula sagittis eu. Sed id porttitor purus. Donec in dolor scelerisque, suscipit metus in, molestie sem.
|
|
Nulla facilisi. Nunc eu lobortis tellus.</p>
|
|
<blockquote>This is a blockquote</blockquote>
|
|
|
|
<table>
|
|
<caption>Table Title</caption>
|
|
<thead>
|
|
<tr>
|
|
<td>Col1 Title</td>
|
|
<td>Col2 Title</td>
|
|
<td>Col3 Title</td>
|
|
<td>Col4 Title</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Col1</td>
|
|
<td>Col2</td>
|
|
<td>Col3</td>
|
|
<td>Col4</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Col1</td>
|
|
<td>Col2</td>
|
|
<td>Col3</td>
|
|
<td>Col4</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Col1</td>
|
|
<td>Col2</td>
|
|
<td>Col3</td>
|
|
<td>Col4</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Col1</td>
|
|
<td>Col2</td>
|
|
<td>Col3</td>
|
|
<td>Col4</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="200">
|
|
</article>
|
|
</section>
|
|
|
|
<h1>Buttons</h1>
|
|
<h2>Normal</h2>
|
|
<section class="box-container center">
|
|
<button>Test Button</button>
|
|
<button><i class="fa fa-lightbulb-o"></i> Test Button</button>
|
|
<button class="red">Test Button</button>
|
|
<button class="red"><i class="fa fa-lightbulb-o"></i> Test Button</button>
|
|
<button class="green">Test Button</button>
|
|
<button class="green"><i class="fa fa-lightbulb-o"></i> Test Button</button>
|
|
<button class="blue">Test Button</button>
|
|
<button class="blue"><i class="fa fa-lightbulb-o"></i> Test Button</button>
|
|
</section>
|
|
|
|
<h2>Connected</h2>
|
|
<section class="box-container">
|
|
<ul class="btns">
|
|
<li><a href="">One</a>
|
|
<li><a href="" class="active">Two</a>
|
|
<li><a href="">Three</a>
|
|
<li><a href="">Four</a>
|
|
</ul>
|
|
</section>
|
|
|
|
<h1>Tags</h1>
|
|
<section class="box-container center">
|
|
<span class="tag green">Test Tag</span>
|
|
<span class="tag red">Test Tag</span>
|
|
<span class="tag blue">Test Tag</span>
|
|
<span class="tag orange">Test Tag</span>
|
|
<span class="tag lightblue">Test Tag</span>
|
|
<span class="tag yellow">Test Tag</span>
|
|
<span class="tag purple">Test Tag</span>
|
|
<span class="tag pink">Test Tag</span>
|
|
<span class="tag grey">Test Tag</span>
|
|
<span class="tag darkred">Test Tag</span>
|
|
<span class="tag darkgreen">Test Tag</span>
|
|
<span class="tag darkblue">Test Tag</span>
|
|
</section>
|
|
|
|
<h1>Tooltips</h1>
|
|
<section class="box center wf-100"><span class="tooltip">Tooltip<i>My Tooltip asd a sd <br>asdfsdf adf asd</i></span></section>
|
|
|
|
<h1>Widths</h1>
|
|
<section class="box wf-100 floatLeft">
|
|
<section class="inner center"> </section>
|
|
</section>
|
|
<section class="box wf-50 floatLeft">
|
|
<section class="inner center"> </section>
|
|
</section>
|
|
<section class="box wf-50 floatLeft">
|
|
<section class="inner center"> </section>
|
|
</section>
|
|
<section class="box wf-33 floatLeft">
|
|
<section class="inner center"> </section>
|
|
</section>
|
|
<section class="box wf-33 floatLeft">
|
|
<section class="inner center"> </section>
|
|
</section>
|
|
<section class="box wf-33 floatLeft">
|
|
<section class="inner center"> </section>
|
|
</section>
|
|
<section class="box wf-25 floatLeft">
|
|
<section class="inner center"> </section>
|
|
</section>
|
|
<section class="box wf-25 floatLeft">
|
|
<section class="inner center"> </section>
|
|
</section>
|
|
<section class="box wf-25 floatLeft">
|
|
<section class="inner center"> </section>
|
|
</section>
|
|
<section class="box wf-25 floatLeft">
|
|
<section class="inner center"> </section>
|
|
</section>
|
|
<section class="box wf-75 floatLeft">
|
|
<section class="inner center"> </section>
|
|
</section>
|
|
<section class="box wf-25 floatLeft">
|
|
<section class="inner center"> </section>
|
|
</section>
|
|
<section class="box wf-66 floatLeft">
|
|
<section class="inner center"> </section>
|
|
</section>
|
|
<section class="box wf-33 floatLeft">
|
|
<section class="inner center"> </section>
|
|
</section>
|
|
<section class="box wf-50 floatLeft">
|
|
<section class="inner center"> </section>
|
|
</section>
|
|
<section class="box wf-25 floatLeft">
|
|
<section class="inner center"> </section>
|
|
</section>
|
|
<section class="box wf-25 floatLeft">
|
|
<section class="inner center"> </section>
|
|
</section>
|
|
<div class="clear"></div>
|
|
|
|
<h1>Icons</h1>
|
|
<section class="center">
|
|
<i class="fa fa-lg infoIcon fa-envelope">
|
|
<span class="badge">777</span>
|
|
</i>
|
|
<i class="fa fa-lg infoIcon fa-bolt">
|
|
<span class="badge">5</span>
|
|
</i>
|
|
<i class="fa fa-lg infoIcon fa-comment">
|
|
<span class="badge">999</span>
|
|
</i>
|
|
<i class="fa fa-lg infoIcon fa-lightbulb-o">
|
|
<span class="badge">123</span>
|
|
</i>
|
|
<i class="fa fa-lg infoIcon fa-calendar">
|
|
<span class="badge">33</span>
|
|
</i>
|
|
</section>
|
|
|
|
<h1>Form</h1>
|
|
<h2>Default</h2>
|
|
<section class="box wf-100">
|
|
<section class="inner center">
|
|
<form>
|
|
<table class="layout wf-100">
|
|
<tr>
|
|
<td colspan="2"><label>Placeholder</label></td>
|
|
<tr>
|
|
<td colspan="2"><input type="text" placeholder=" User">
|
|
<tr>
|
|
<td colspan="2"><label>Password</label></td>
|
|
<tr>
|
|
<td><input type="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}" placeholder=" Pa55w0rd?">
|
|
<td>
|
|
<button>Add</button>
|
|
<tr>
|
|
<td colspan="2">
|
|
<table class="list">
|
|
<tr>
|
|
<td><i class="btn fa fa-times warning"></i><i class="btn fa fa-chevron-up order-up"></i><i
|
|
class="btn fa fa-chevron-down order-down"></i></td>
|
|
<td>Value to change</td>
|
|
<td>Value to change2</td>
|
|
</tr>
|
|
<tr>
|
|
<td><i class="btn fa fa-times warning"></i><i class="btn fa fa-chevron-up order-up"></i><i
|
|
class="btn fa fa-chevron-down order-down"></i></td>
|
|
<td>Value to change</td>
|
|
<td>Value to change2</td>
|
|
</tr>
|
|
<tr>
|
|
<td><i class="btn fa fa-times warning"></i><i class="btn fa fa-chevron-up order-up"></i><i
|
|
class="btn fa fa-chevron-down order-down"></i></td>
|
|
<td>Value to change</td>
|
|
<td>Value to change2</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2"><label>Datalist</label></td>
|
|
<tr>
|
|
<td colspan="2"><input list="test" type="text">
|
|
<datalist id="test">
|
|
<option>Chrome</option>
|
|
<option>IE</option>
|
|
<option>Opera</option>
|
|
<option>Safari</option>
|
|
<option>Firefox</option>
|
|
</datalist>
|
|
</td>
|
|
<tr>
|
|
<tr>
|
|
<td colspan="2"><label>Special</label></td>
|
|
<tr>
|
|
<td colspan="2"><span class="input"><button><i class="fa fa-pencil"></i></button><input type="text"></span></td>
|
|
|
|
<tr>
|
|
<td colspan="2"><label>Number</label></td>
|
|
<tr>
|
|
<td colspan="2"><input type="number" step="any" min="0"></td>
|
|
<tr>
|
|
<td><label>Label1</label></td>
|
|
<td><label>Label2</label>
|
|
<tr>
|
|
<td><input type="text"></td>
|
|
<td><input type="text" pattern="[a-zA-Z]" required>
|
|
<tr>
|
|
<td colspan="2"><label>Localtime</label></td>
|
|
<tr>
|
|
<td colspan="2"><input type="datetime-local">
|
|
<tr>
|
|
<td><label>Label1</label></td>
|
|
<td><label>Label2</label>
|
|
<tr>
|
|
<td><input type="datetime-local"></td>
|
|
<td><input type="datetime-local">
|
|
<tr>
|
|
<td><label>Checkbox</label></td>
|
|
<td><label>Radio</label></td>
|
|
<tr>
|
|
<td><span class="check"><input type="checkbox">Check</span>
|
|
<td><span class="radio"><input type="radio" name="test">Radio</span>
|
|
<tr>
|
|
<td><span class="check"><input type="checkbox">Check</span>
|
|
<td><span class="radio"><input type="radio" name="test">Radio</span>
|
|
<tr>
|
|
<td></td>
|
|
<td><span class="radio"><input type="radio" name="test">Radio</span>
|
|
<tr>
|
|
<td><label>Option</label></td>
|
|
<tr>
|
|
<td colspan="2"><select>
|
|
<option>Option1</option>
|
|
<option>Option2</option>
|
|
<option>Option3</option>
|
|
</select>
|
|
<tr>
|
|
<td><label>Label1</label></td>
|
|
<td><label>Label2</label>
|
|
<tr>
|
|
<td><select>
|
|
<option>Option1</option>
|
|
<option>Option2</option>
|
|
<option>Option3</option>
|
|
</select></td>
|
|
<td>
|
|
<select>
|
|
<option>Option1</option>
|
|
<option>Option2</option>
|
|
<option>Option3</option>
|
|
</select>
|
|
<tr>
|
|
<td colspan="2"><label>Textarea</label></td>
|
|
<tr>
|
|
<td colspan="2"><textarea></textarea>
|
|
<tr>
|
|
<td colspan="2"><input type="submit" value="Submit"> <input type="submit" value="Cancel"> <button type="submit">SButton</button>
|
|
</table>
|
|
</form>
|
|
</section>
|
|
</section>
|
|
|
|
<h2>Input</h2>
|
|
<section class="box wf-100">
|
|
<section class="inner center">
|
|
<form>
|
|
<table class="layout wf-100">
|
|
<tr>
|
|
<td colspan="2"><label>Input+Autocomplete+Dropdown+Badge</label></td>
|
|
<tr>
|
|
<td colspan="2">
|
|
<div class="advancedInput" id="input1">
|
|
<div class="inputOuter">
|
|
<div class="inputbackground">
|
|
<input autocomplete="off" class="inputClass" id="inputId" type="text" emptyAfterSelect="true" data-src="http://127.0.0.1/en/api/admin/find/account?search={#inputId}">
|
|
</div>
|
|
</div>
|
|
<div class="dropdown" data-active="true">
|
|
<table>
|
|
<tbody>
|
|
<template id="rowElement" class="rowTemplate">
|
|
<tr tabindex="-1">
|
|
<td data-tpl-value="/id" data-tpl-name="/id" data-value="">s</td>
|
|
<td data-tpl-value="/name/0" data-tpl-name="/name/0"></td>
|
|
<td data-tpl-value="/email" data-tpl-name="/eamil"></td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="tags" data-active="true">
|
|
<template id="tagElement" class="tagTemplate">
|
|
<span data-tpl-value="/name/0" class="badge">
|
|
<i data-tpl-name="/name/0"></i>
|
|
<i data-tpl-name="/email"></i>
|
|
</span>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<tr>
|
|
<td colspan="2"><label>Input+Autocomplete+Dropdown</label></td>
|
|
<tr>
|
|
<td colspan="2"><label>Input+Autocomplete</label></td>
|
|
<tr>
|
|
<td colspan="2"><label>Input+Autocomplete+Badge</label></td>
|
|
</table>
|
|
</form>
|
|
</section>
|
|
</section>
|
|
|
|
<h2>To List</h2>
|
|
<section class="box wf-100">
|
|
<section class="inner center">
|
|
<form>
|
|
<table class="layout wf-100">
|
|
<tr>
|
|
<td colspan="2"><label>Input+Autocomplete+Dropdown+Badge</label></td>
|
|
<tr>
|
|
<td colspan="2">
|
|
<div class="advancedInput">
|
|
<div class="inputOuter">
|
|
<div class="inputbackground">
|
|
<input type="text" emptyAfterSelect=true>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown" isActive=true>
|
|
<template id="rowElement"></template>
|
|
</div>
|
|
<div class="tags" isActive=true>
|
|
<template id="tagElement"></template>
|
|
</div>
|
|
</div>
|
|
<tr>
|
|
<td colspan="2"><label>Input+Autocomplete+Dropdown</label></td>
|
|
<tr>
|
|
<td colspan="2"><label>Input+Autocomplete</label></td>
|
|
<tr>
|
|
<td colspan="2"><label>Input+Autocomplete+Badge</label></td>
|
|
</table>
|
|
</form>
|
|
</section>
|
|
</section>
|
|
|
|
<h2>Dropdown</h2>
|
|
<section class="box wf-100">
|
|
<section class="inner center">
|
|
<form>
|
|
<table class="layout wf-100">
|
|
<tr>
|
|
<td colspan="2"><label>Input+Autocomplete+Dropdown+Badge</label></td>
|
|
<tr>
|
|
<td colspan="2">
|
|
<div class="advancedInput">
|
|
<div class="inputOuter">
|
|
<div class="inputbackground">
|
|
<input type="text" emptyAfterSelect=true>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown" isActive=true>
|
|
<template id="rowElement"></template>
|
|
</div>
|
|
<div class="tags" isActive=true>
|
|
<template id="tagElement"></template>
|
|
</div>
|
|
</div>
|
|
<tr>
|
|
<td colspan="2"><label>Input+Autocomplete+Dropdown</label></td>
|
|
<tr>
|
|
<td colspan="2"><label>Input+Autocomplete</label></td>
|
|
<tr>
|
|
<td colspan="2"><label>Input+Autocomplete+Badge</label></td>
|
|
</table>
|
|
</form>
|
|
</section>
|
|
</section>
|
|
|
|
<h1>Navigation</h1>
|
|
<h2>Content</h2>
|
|
<section class="wf-100">
|
|
<ul class="nav-top">
|
|
<li><a>About</a></li>
|
|
<li>
|
|
<a>Portfolio</a>
|
|
<ul>
|
|
<li><a>Web Design</a></li>
|
|
<li><a>Web Development</a></li>
|
|
<li><a>Illustrations</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a>Blog</a></li>
|
|
<li><a>Contact</a></li>
|
|
</ul>
|
|
</section>
|
|
|
|
<h1>Tables</h1>
|
|
<h2>Neutral</h2>
|
|
<section class="box-container wf-100">
|
|
<table class="table">
|
|
<caption>Table Title</caption>
|
|
<thead>
|
|
<tr>
|
|
<td>Col1 Title</td>
|
|
<td>Col2 Title</td>
|
|
<td>Col3 Title</td>
|
|
<td>Col4 Title</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Col1</td>
|
|
<td>Col2</td>
|
|
<td>Col3</td>
|
|
<td>Col4</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Col1</td>
|
|
<td>Col2</td>
|
|
<td>Col3</td>
|
|
<td>Col4</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Col1</td>
|
|
<td>Col2</td>
|
|
<td>Col3</td>
|
|
<td>Col4</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Col1</td>
|
|
<td>Col2</td>
|
|
<td>Col3</td>
|
|
<td>Col4</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<td colspan="4">
|
|
<label>Results: 4</label>
|
|
<select>
|
|
<option>25</option>
|
|
<option>50</option>
|
|
<option>100</option>
|
|
<option>500</option>
|
|
</select>
|
|
<ul class="pagination">
|
|
<li><a href="#" class="active">1</a></li>
|
|
<li><a href="#">2</a></li>
|
|
<li><a href="#">3</a></li>
|
|
<li><a href="#">4</a></li>
|
|
<li>...</li>
|
|
<li><a href="#">20</a></li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</section>
|
|
|
|
<h1>Tabs</h1>
|
|
<h2>With Container</h2>
|
|
<section class="box-container wf-100">
|
|
<div class="tabview tab-1">
|
|
<ul class="tab-links">
|
|
<li><label for="c-tab-1">TAAAB</label></li>
|
|
<li class="active"><label for="c-tab-2">TAAAB</label></li>
|
|
</ul>
|
|
<div class="tab-content">
|
|
<input type="radio" id="c-tab-1" name="tabular-1" checked>
|
|
<div class="tab">
|
|
Test content
|
|
</div>
|
|
<input type="radio" id="c-tab-2" name="tabular-1">
|
|
<div class="tab">
|
|
<p>Test content 2</p><p>asdf</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<h2>Without Container</h2>
|
|
<section class="box-container wf-100">
|
|
<div class="tabview tab-2">
|
|
<ul class="tab-links">
|
|
<li><label for="c-tab2-1">TAAAB</label></li>
|
|
<li class="active"><label for="c-tab2-2">TAAAB</label></li>
|
|
</ul>
|
|
<div class="tab-content">
|
|
<input type="radio" id="c-tab2-1" name="tabular-2" checked>
|
|
<div class="tab">
|
|
Test content
|
|
</div>
|
|
<input type="radio" id="c-tab2-2" name="tabular-2">
|
|
<div class="tab">
|
|
<p>Test content 2</p><p>asdf</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<h2>Accordion</h2>
|
|
<section class="box-container ac-container">
|
|
<input type="checkbox" name="About us" id="ac-1">
|
|
<label for="ac-1">About us</label>
|
|
<section>
|
|
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show
|
|
that show to the people who make shows, and on the strength of that one show they decide if
|
|
they're going to make more shows.</p>
|
|
</section>
|
|
<input type="checkbox" name="About us" id="ac-2">
|
|
<label for="ac-2">How we work</label>
|
|
<section>
|
|
<p>Like you, I used to think the world was this great place where everybody lived by the same
|
|
standards I did, then some kid with a nail showed me I was living in his world, a world where
|
|
chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if
|
|
you're not willing to play by his rules, then you're gonna have to pay the price. </p>
|
|
</section>
|
|
<input type="checkbox" name="About us" id="ac-3" checked>
|
|
<label for="ac-3">References</label>
|
|
<section>
|
|
<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it
|
|
killed the world once and got a taste for murder. After the avalanche, it took us a week to
|
|
climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us
|
|
survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We
|
|
said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it
|
|
doesn't hold a candle to man. </p>
|
|
|
|
<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it
|
|
killed the world once and got a taste for murder. After the avalanche, it took us a week to
|
|
climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us
|
|
survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We
|
|
said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it
|
|
doesn't hold a candle to man. </p>
|
|
</section>
|
|
<input type="checkbox" name="About us" id="ac-4">
|
|
<label for="ac-4">Contact us</label>
|
|
<section>
|
|
<p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell
|
|
everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in
|
|
the future when the spacecraft encounters a black hole does the computer call it an 'unknown
|
|
entry event'? Why don't they know? If they don't know, that means we never told anyone. And if
|
|
we never told anyone it means we never made it back. Hence we die down here. Just as a matter of
|
|
deductive logic. </p>
|
|
</section>
|
|
</section>
|
|
|
|
<h1>Breadcrumbs</h1>
|
|
<section class="box-container wf-50 floatLeft">
|
|
<ul class="crumbs-1">
|
|
<li><a>One</a></li>
|
|
<li><a>Two</a></li>
|
|
<li class="active"><a>Three</a></li>
|
|
<li><a>Four</a></li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section class="box-container wf-50 floatLeft">
|
|
<ul class="crumbs-1">
|
|
<li><a>One</a></li>
|
|
<li><a>Two</a></li>
|
|
<li><a>Three</a></li>
|
|
<li><a>Four</a></li>
|
|
<li class="last active"><a>Five</a></li>
|
|
</ul>
|
|
</section>
|
|
<div class="clear"></div>
|
|
|
|
<h1>Alerts</h1>
|
|
<section class="box-container wf-100">
|
|
<div class="log-msg log-msg-status-ok"><i class="fa fa-check"></i>This is ok</div>
|
|
</section>
|
|
<section class="box-container wf-100">
|
|
<div class="log-msg log-msg-status-info"><i class="fa fa-bell"></i>This is a info</div>
|
|
</section>
|
|
<section class="box-container wf-100">
|
|
<div class="log-msg log-msg-status-warning"><i class="fa fa-exclamation-triangle"></i>This is a warning</div>
|
|
</section>
|
|
<section class="box-container wf-100">
|
|
<div class="log-msg log-msg-status-error"><i class="fa fa-times"></i>This is an error</div>
|
|
</section>
|
|
|
|
<h1>Images</h1>
|
|
<section class="box-container wf-25 floatLeft">
|
|
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" class="frame-1" width="200">
|
|
</section>
|
|
<section class="box-container wf-25 floatLeft">
|
|
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" class="frame-2" width="200">
|
|
</section>
|
|
<section class="box-container wf-25 floatLeft">
|
|
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" class="frame-3" width="200">
|
|
</section>
|
|
<div class="clear"></div>
|
|
|
|
<h1>Ranges</h1>
|
|
<section class="box">
|
|
<section class="inner center">
|
|
<input type="range">
|
|
</section>
|
|
</section>
|
|
<section class="box">
|
|
<section class="inner center">
|
|
<progress value="33" max="100"></progress>
|
|
</section>
|
|
</section>
|
|
<section class="box wf-25 floatLeft">
|
|
<section class="inner center">
|
|
<div class="meter">
|
|
<span style="width: 25%"></span>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
<section class="box wf-25 floatLeft">
|
|
<section class="inner center">
|
|
<div class="meter blue">
|
|
<span style="width: 50%"></span>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
<section class="box wf-25 floatLeft">
|
|
<section class="inner center">
|
|
<div class="meter orange">
|
|
<span style="width: 75%"></span>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
<section class="box wf-25 floatLeft">
|
|
<section class="inner center">
|
|
<div class="meter red">
|
|
<span style="width: 100%"></span>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
<div class="clear"></div>
|
|
|
|
<h1>Spinner</h1>
|
|
<section class="box wf-25 floatLeft">
|
|
<section class="inner center">
|
|
<div class="spinner-1"></div>
|
|
</section>
|
|
</section>
|
|
<section class="box wf-25 floatLeft">
|
|
<section class="inner center">
|
|
<div class="meter blue">
|
|
<div class="spinner-2">
|
|
<div class="bounce1"></div>
|
|
<div class="bounce2"></div>
|
|
<div class="bounce3"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
|
|
<section class="box wf-25 floatLeft">
|
|
<section class="inner center">
|
|
<div class="spinner-3">
|
|
<div class="sk-circle1 sk-circle"></div>
|
|
<div class="sk-circle2 sk-circle"></div>
|
|
<div class="sk-circle3 sk-circle"></div>
|
|
<div class="sk-circle4 sk-circle"></div>
|
|
<div class="sk-circle5 sk-circle"></div>
|
|
<div class="sk-circle6 sk-circle"></div>
|
|
<div class="sk-circle7 sk-circle"></div>
|
|
<div class="sk-circle8 sk-circle"></div>
|
|
<div class="sk-circle9 sk-circle"></div>
|
|
<div class="sk-circle10 sk-circle"></div>
|
|
<div class="sk-circle11 sk-circle"></div>
|
|
<div class="sk-circle12 sk-circle"></div>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
<section class="box wf-25 floatLeft">
|
|
<section class="inner center">
|
|
<div class="spinner-4"></div>
|
|
</section>
|
|
</section>
|
|
<div class="clear"></div>
|
|
|
|
<h1>Slider</h1>
|
|
<h2>Automatic</h2>
|
|
<section class="box">
|
|
<div class="slider-1">
|
|
<figure>
|
|
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" alt="">
|
|
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" alt="">
|
|
<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" alt="">
|
|
<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" alt="">
|
|
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" alt="">
|
|
</figure>
|
|
</div>
|
|
</section>
|
|
|
|
<h2>Clickable</h2>
|
|
<section>
|
|
<div class="slider-2">
|
|
<input type="radio" name="slide_switch" id="id1"/>
|
|
<label for="id1">
|
|
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
|
|
</label>
|
|
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"/>
|
|
|
|
<!--Lets show the second image by default on page load-->
|
|
<input type="radio" name="slide_switch" id="id2" checked="checked"/>
|
|
<label for="id2">
|
|
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
|
|
</label>
|
|
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg"/>
|
|
|
|
<input type="radio" name="slide_switch" id="id3"/>
|
|
<label for="id3">
|
|
<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
|
|
</label>
|
|
<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg"/>
|
|
|
|
<input type="radio" name="slide_switch" id="id4"/>
|
|
<label for="id4">
|
|
<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
|
|
</label>
|
|
<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</body>
|
|
</html>
|