Jingga/cssOMS
1
0
Fork 0
mirror of https://github.com/Karaka-Management/cssOMS.git synced 2026-02-10 23:18:39 +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

305
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,52 +450,54 @@
</div> </div>
</section> </section>
<section class="box-container ac-container"> <h2>Accordion</h2>
<input type="checkbox" name="About us" id="ac-1"> <section class="box-container ac-container">
<label for="ac-1">About us</label> <input type="checkbox" name="About us" id="ac-1">
<section> <label for="ac-1">About us</label>
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show <section>
that show to the people who make shows, and on the strength of that one show they decide if <p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show
they're going to make more shows.</p> that show to the people who make shows, and on the strength of that one show they decide if
</section> they're going to make more shows.</p>
<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> </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>
<section class="box-container w-50 floatLeft"> <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"> <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">