Jingga/cssOMS
1
0
Fork 0
mirror of https://github.com/Karaka-Management/cssOMS.git synced 2026-02-14 00:38:40 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix old standard elements visualization test

Browse Source
This commit is contained in:
Dennis Eichhorn 2018-09-30 18:04:42 +02:00
parent cef1144ab0
commit 329516fd91
1 changed files with 200 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

219
tests/StandardElements.htm
View File

@ -6,33 +6,92 @@
</head> </head>
<body> <body>
<div style="width: 900px; padding: 20px; border: 1px solid #ff0000;" class="center"> <div style="width: 900px; padding: 20px; border: 1px solid #ff0000;" class="center">
<h1>Boxes</h1>
<h2>Simple</h2>
<section class="box center">This is some test text.</section> <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"> <section class="box center">
<article> <article>
<p><span class="tooltip">Lorem<i>My Tooltip asd a sd <br>asdfsdf adf asd</i></span> ipsum dolor sit amet, <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 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 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 <a href="#">volutpat</a> posuere, justo dolor porta dui, a ullamcorper ex ipsum eget arcu. Cras quis
ante placerat, tempus ante placerat, tempus orci vitae, semper nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
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
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 pretium tempus diam at eleifend. Quisque a tortor et nisi commodo pretium ac at erat. Nam non iaculis
ipsum, ipsum, ultrices tempus nisl. Pellentesque ornare tellus vehicula sapien fringilla cursus. Duis sed tellus
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
sagittis facilisis lorem eget aliquet. Curabitur odio ante, lobortis vitae est at, consequat posuere elit.</p>
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 <p><span class="tooltip">Lorem<i>My Tooltip asd a sd asdfsdf adf asd</i></span> sed nulla et ante
consectetur consectetur dictum. Nunc molestie ligula eget felis tincidunt suscipit. Fusce scelerisque diam lectus, non faucibus
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. ligula sagittis eu. Sed id porttitor purus. Donec in dolor scelerisque, suscipit metus in, molestie sem.
Nulla facilisi. Nunc eu lobortis tellus.</p> Nulla facilisi. Nunc eu lobortis tellus.</p>
<blockquote>This is a blockquote</blockquote> <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> </article>
</section> </section>
<h1>Buttons</h1>
<h2>Normal</h2>
<section class="box-container center"> <section class="box-container center">
<button>Test Button</button> <button>Test Button</button>
<button><i class="fa fa-lightbulb-o"></i> Test Button</button> <button><i class="fa fa-lightbulb-o"></i> Test Button</button>
@ -43,6 +102,8 @@
<button class="blue">Test Button</button> <button class="blue">Test Button</button>
<button class="blue"><i class="fa fa-lightbulb-o"></i> Test Button</button> <button class="blue"><i class="fa fa-lightbulb-o"></i> Test Button</button>
</section> </section>
<h2>Connected</h2>
<section class="box-container"> <section class="box-container">
<ul class="btns"> <ul class="btns">
<li><a href="">One</a> <li><a href="">One</a>
@ -51,6 +112,8 @@
<li><a href="">Four</a> <li><a href="">Four</a>
</ul> </ul>
</section> </section>
<h1>Tags</h1>
<section class="box-container center"> <section class="box-container center">
<span class="tag green">Test Tag</span> <span class="tag green">Test Tag</span>
<span class="tag red">Test Tag</span> <span class="tag red">Test Tag</span>
@ -65,58 +128,65 @@
<span class="tag darkgreen">Test Tag</span> <span class="tag darkgreen">Test Tag</span>
<span class="tag darkblue">Test Tag</span> <span class="tag darkblue">Test Tag</span>
</section> </section>
<section class=" w-100 floatLeft">
<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">&nbsp;</section> <section class="inner center">&nbsp;</section>
</section> </section>
<section class=" w-50 floatLeft"> <section class="box wf-50 floatLeft">
<section class="inner center">&nbsp;</section> <section class="inner center">&nbsp;</section>
</section> </section>
<section class=" w-50 floatLeft"> <section class="box wf-50 floatLeft">
<section class="inner center">&nbsp;</section> <section class="inner center">&nbsp;</section>
</section> </section>
<section class=" w-33 floatLeft"> <section class="box wf-33 floatLeft">
<section class="inner center">&nbsp;</section> <section class="inner center">&nbsp;</section>
</section> </section>
<section class=" w-33 floatLeft"> <section class="box wf-33 floatLeft">
<section class="inner center">&nbsp;</section> <section class="inner center">&nbsp;</section>
</section> </section>
<section class=" w-33 floatLeft"> <section class="box wf-33 floatLeft">
<section class="inner center">&nbsp;</section> <section class="inner center">&nbsp;</section>
</section> </section>
<section class=" w-25 floatLeft"> <section class="box wf-25 floatLeft">
<section class="inner center">&nbsp;</section> <section class="inner center">&nbsp;</section>
</section> </section>
<section class=" w-25 floatLeft"> <section class="box wf-25 floatLeft">
<section class="inner center">&nbsp;</section> <section class="inner center">&nbsp;</section>
</section> </section>
<section class=" w-25 floatLeft"> <section class="box wf-25 floatLeft">
<section class="inner center">&nbsp;</section> <section class="inner center">&nbsp;</section>
</section> </section>
<section class=" w-25 floatLeft"> <section class="box wf-25 floatLeft">
<section class="inner center">&nbsp;</section> <section class="inner center">&nbsp;</section>
</section> </section>
<section class=" w-75 floatLeft"> <section class="box wf-75 floatLeft">
<section class="inner center">&nbsp;</section> <section class="inner center">&nbsp;</section>
</section> </section>
<section class=" w-25 floatLeft"> <section class="box wf-25 floatLeft">
<section class="inner center">&nbsp;</section> <section class="inner center">&nbsp;</section>
</section> </section>
<section class=" w-66 floatLeft"> <section class="box wf-66 floatLeft">
<section class="inner center">&nbsp;</section> <section class="inner center">&nbsp;</section>
</section> </section>
<section class=" w-33 floatLeft"> <section class="box wf-33 floatLeft">
<section class="inner center">&nbsp;</section> <section class="inner center">&nbsp;</section>
</section> </section>
<section class=" w-50 floatLeft"> <section class="box wf-50 floatLeft">
<section class="inner center">&nbsp;</section> <section class="inner center">&nbsp;</section>
</section> </section>
<section class=" w-25 floatLeft"> <section class="box wf-25 floatLeft">
<section class="inner center">&nbsp;</section> <section class="inner center">&nbsp;</section>
</section> </section>
<section class=" w-25 floatLeft"> <section class="box wf-25 floatLeft">
<section class="inner center">&nbsp;</section> <section class="inner center">&nbsp;</section>
</section> </section>
<div class="clear"></div> <div class="clear"></div>
<h1>Icons</h1>
<section class="center"> <section class="center">
<i class="fa fa-lg infoIcon fa-envelope"> <i class="fa fa-lg infoIcon fa-envelope">
<span class="badge">777</span> <span class="badge">777</span>
@ -134,12 +204,9 @@
<span class="badge">33</span> <span class="badge">33</span>
</i> </i>
</section> </section>
<section class="box">
<h1>This is H1</h1>
<h2>This is H2</h2> <h1>Form</h1>
</section> <section class="box wf-100">
<section class="box w-100">
<section class="inner center"> <section class="inner center">
<form> <form>
<table class="layout"> <table class="layout">
@ -260,6 +327,9 @@
</form> </form>
</section> </section>
</section> </section>
<h1>Navigation</h1>
<h2>Content</h2>
<section class="wf-100"> <section class="wf-100">
<ul class="nav-top"> <ul class="nav-top">
<li><a>About</a></li> <li><a>About</a></li>
@ -275,7 +345,10 @@
<li><a>Contact</a></li> <li><a>Contact</a></li>
</ul> </ul>
</section> </section>
<section class="box-container w-100">
<h1>Tables</h1>
<h2>Neutral</h2>
<section class="box-container wf-100">
<table class="table"> <table class="table">
<caption>Table Title</caption> <caption>Table Title</caption>
<thead> <thead>
@ -335,7 +408,10 @@
</tfoot> </tfoot>
</table> </table>
</section> </section>
<section class="box-container w-100">
<h1>Tabs</h1>
<h2>With Container</h2>
<section class="box-container wf-100">
<div class="tabular"> <div class="tabular">
<ul class="tab-links"> <ul class="tab-links">
<li><label for="c-tab-1">TAAAB</label></li> <li><label for="c-tab-1">TAAAB</label></li>
@ -354,6 +430,7 @@
</div> </div>
</section> </section>
<h2>Without Container</h2>
<section class="box-container wf-100"> <section class="box-container wf-100">
<div class="tabular-2"> <div class="tabular-2">
<ul class="tab-links"> <ul class="tab-links">
@ -373,6 +450,7 @@
</div> </div>
</section> </section>
<h2>Accordion</h2>
<section class="box-container ac-container"> <section class="box-container ac-container">
<input type="checkbox" name="About us" id="ac-1"> <input type="checkbox" name="About us" id="ac-1">
<label for="ac-1">About us</label> <label for="ac-1">About us</label>
@ -418,7 +496,8 @@
</section> </section>
</section> </section>
<section class="box-container w-50 floatLeft"> <h1>Breadcrumbs</h1>
<section class="box-container wf-50 floatLeft">
<ul class="crumbs-1"> <ul class="crumbs-1">
<li><a>One</a></li> <li><a>One</a></li>
<li><a>Two</a></li> <li><a>Two</a></li>
@ -426,7 +505,8 @@
<li><a>Four</a></li> <li><a>Four</a></li>
</ul> </ul>
</section> </section>
<section class="box-container w-50 floatLeft">
<section class="box-container wf-50 floatLeft">
<ul class="crumbs-1"> <ul class="crumbs-1">
<li><a>One</a></li> <li><a>One</a></li>
<li><a>Two</a></li> <li><a>Two</a></li>
@ -436,28 +516,34 @@
</ul> </ul>
</section> </section>
<div class="clear"></div> <div class="clear"></div>
<section class="box-container w-100">
<div class="alert ok"><i class="fa fa-check"></i>This is ok</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>
<section class="box-container w-100"> <section class="box-container wf-100">
<div class="alert info"><i class="fa fa-bell"></i>This is a info</div> <div class="log-msg log-msg-status-info"><i class="fa fa-bell"></i>This is a info</div>
</section> </section>
<section class="box-container w-100"> <section class="box-container wf-100">
<div class="alert warning"><i class="fa fa-exclamation-triangle"></i>This is a warning</div> <div class="log-msg log-msg-status-warning"><i class="fa fa-exclamation-triangle"></i>This is a warning</div>
</section> </section>
<section class="box-container w-100"> <section class="box-container wf-100">
<div class="alert error"><i class="fa fa-times"></i>This is an error</div> <div class="log-msg log-msg-status-error"><i class="fa fa-times"></i>This is an error</div>
</section> </section>
<section class="box-container w-25 floatLeft">
<img class="frame-1" width="100" height="100"> <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>
<section class="box-container w-25 floatLeft"> <section class="box-container wf-25 floatLeft">
<img class="frame-2" width="100" height="100"> <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" class="frame-2" width="200">
</section> </section>
<section class="box-container w-25 floatLeft"> <section class="box-container wf-25 floatLeft">
<img class="frame-3" width="100" height="100"> <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" class="frame-3" width="200">
</section> </section>
<div class="clear"></div> <div class="clear"></div>
<h1>Ranges</h1>
<section class="box"> <section class="box">
<section class="inner center"> <section class="inner center">
<input type="range"> <input type="range">
@ -468,40 +554,43 @@
<progress value="33" max="100"></progress> <progress value="33" max="100"></progress>
</section> </section>
</section> </section>
<section class="box w-25 floatLeft"> <section class="box wf-25 floatLeft">
<section class="inner center"> <section class="inner center">
<div class="meter"> <div class="meter">
<span style="width: 25%"></span> <span style="width: 25%"></span>
</div> </div>
</section> </section>
</section> </section>
<section class="box w-25 floatLeft"> <section class="box wf-25 floatLeft">
<section class="inner center"> <section class="inner center">
<div class="meter blue"> <div class="meter blue">
<span style="width: 50%"></span> <span style="width: 50%"></span>
</div> </div>
</section> </section>
</section> </section>
<section class="box w-25 floatLeft"> <section class="box wf-25 floatLeft">
<section class="inner center"> <section class="inner center">
<div class="meter orange"> <div class="meter orange">
<span style="width: 75%"></span> <span style="width: 75%"></span>
</div> </div>
</section> </section>
</section> </section>
<section class="box w-25 floatLeft"> <section class="box wf-25 floatLeft">
<section class="inner center"> <section class="inner center">
<div class="meter red"> <div class="meter red">
<span style="width: 100%"></span> <span style="width: 100%"></span>
</div> </div>
</section> </section>
</section> </section>
<section class="box w-25 floatLeft"> <div class="clear"></div>
<h1>Spinner</h1>
<section class="box wf-25 floatLeft">
<section class="inner center"> <section class="inner center">
<div class="spinner-1"></div> <div class="spinner-1"></div>
</section> </section>
</section> </section>
<section class="box w-25 floatLeft"> <section class="box wf-25 floatLeft">
<section class="inner center"> <section class="inner center">
<div class="meter blue"> <div class="meter blue">
<div class="spinner-2"> <div class="spinner-2">
@ -512,7 +601,8 @@
</div> </div>
</section> </section>
</section> </section>
<section class="box w-25 floatLeft">
<section class="box wf-25 floatLeft">
<section class="inner center"> <section class="inner center">
<div class="spinner-3"> <div class="spinner-3">
<div class="sk-circle1 sk-circle"></div> <div class="sk-circle1 sk-circle"></div>
@ -530,12 +620,15 @@
</div> </div>
</section> </section>
</section> </section>
<section class="box w-25 floatLeft"> <section class="box wf-25 floatLeft">
<section class="inner center"> <section class="inner center">
<div class="spinner-4"></div> <div class="spinner-4"></div>
</section> </section>
</section> </section>
<div class="clear"></div> <div class="clear"></div>
<h1>Slider</h1>
<h2>Automatic</h2>
<section class="box"> <section class="box">
<div class="slider-1"> <div class="slider-1">
<figure> <figure>
@ -547,7 +640,9 @@
</figure> </figure>
</div> </div>
</section> </section>
<section class="">
<h2>Clickable</h2>
<section>
<div class="slider-2"> <div class="slider-2">
<input type="radio" name="slide_switch" id="id1"/> <input type="radio" name="slide_switch" id="id1"/>
<label for="id1"> <label for="id1">