generated from garrettmills/template-npm-typescript
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
243 lines
13 KiB
243 lines
13 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Test Page</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif
|
|
}
|
|
</style>
|
|
<script>
|
|
if ( typeof $ !== 'function' ) {
|
|
window.$ = (...args) => document.querySelector(...args)
|
|
}
|
|
</script>
|
|
<script src="dist/extollo-ui.dist.js" type="module"></script>
|
|
</head>
|
|
<body>
|
|
<ex-page>
|
|
<ex-nav appName="Extollo"></ex-nav>
|
|
<h1>Test Form!</h1>
|
|
<ex-form>
|
|
<ex-input name="test" placeholder="Name"></ex-input>
|
|
<ex-input-password name="pw" placeholder="Password" confirmed></ex-input-password>
|
|
<ex-input-url name="url" placeholder="URL"></ex-input-url>
|
|
<ex-input-email name="email" placeholder="E-Mail"></ex-input-email>
|
|
<ex-input-phone name="phone" placeholder="Phone"></ex-input-phone>
|
|
<ex-input-search name="search" placeholder="Search"></ex-input-search>
|
|
<ex-input-number name="number" min="40" step="10" placeholder="Number"></ex-input-number>
|
|
</ex-form>
|
|
<h1>Header 1</h1>
|
|
<p>
|
|
Example anchor tag: <a href="#">look no further</a>
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget sapien maximus, sodales elit tempus, viverra libero. Phasellus vitae elit eros. Vivamus non nibh vestibulum, tristique nulla at, convallis est. Aliquam erat volutpat. Sed est lorem, lacinia at lobortis vel, finibus a arcu. Integer ac eros est. In mattis tincidunt elit eget tempor.
|
|
</p>
|
|
<p>
|
|
Some <i>more</i>, <em>text</em>, <b>goes</b>, <strong>here</strong>, <code>like this</code>.
|
|
</p>
|
|
<p>
|
|
<strong>Block quote:</strong>
|
|
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget sapien maximus, sodales elit tempus, viverra libero. Phasellus vitae elit eros. Vivamus non nibh vestibulum, tristique nulla at, convallis est. Aliquam erat volutpat. Sed est lorem, lacinia at lobortis vel, finibus a arcu. Integer ac eros est. In mattis tincidunt elit eget tempor. </blockquote>
|
|
<blockquote class="ex-secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget sapien maximus, sodales elit tempus, viverra libero. Phasellus vitae elit eros. Vivamus non nibh vestibulum, tristique nulla at, convallis est. Aliquam erat volutpat. Sed est lorem, lacinia at lobortis vel, finibus a arcu. Integer ac eros est. In mattis tincidunt elit eget tempor. </blockquote>
|
|
<blockquote class="ex-success">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget sapien maximus, sodales elit tempus, viverra libero. Phasellus vitae elit eros. Vivamus non nibh vestibulum, tristique nulla at, convallis est. Aliquam erat volutpat. Sed est lorem, lacinia at lobortis vel, finibus a arcu. Integer ac eros est. In mattis tincidunt elit eget tempor. </blockquote>
|
|
<blockquote class="ex-warning">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget sapien maximus, sodales elit tempus, viverra libero. Phasellus vitae elit eros. Vivamus non nibh vestibulum, tristique nulla at, convallis est. Aliquam erat volutpat. Sed est lorem, lacinia at lobortis vel, finibus a arcu. Integer ac eros est. In mattis tincidunt elit eget tempor. </blockquote>
|
|
<blockquote class="ex-danger">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget sapien maximus, sodales elit tempus, viverra libero. Phasellus vitae elit eros. Vivamus non nibh vestibulum, tristique nulla at, convallis est. Aliquam erat volutpat. Sed est lorem, lacinia at lobortis vel, finibus a arcu. Integer ac eros est. In mattis tincidunt elit eget tempor. </blockquote>
|
|
</p>
|
|
|
|
<h2>Header 2</h2>
|
|
<p>
|
|
<b>Code blocks</b>
|
|
<pre><code>import time
|
|
# Quick, count to ten!
|
|
for i in range(10):
|
|
# (but not *too* quick)
|
|
time.sleep(0.5)
|
|
print i</code></pre>
|
|
</p>
|
|
|
|
<h3>Header 3</h3>
|
|
<ol>
|
|
<li>
|
|
Testing
|
|
<ul>
|
|
<li>One</li>
|
|
<li>Two</li>
|
|
<li>Three</li>
|
|
</ul>
|
|
</li>
|
|
<li>Still testing</li>
|
|
<li>
|
|
some before code
|
|
<pre><code>const bob = 'bar'
|
|
console.log('bar')</code></pre>
|
|
some following code
|
|
</li>
|
|
</ol>
|
|
|
|
<h1>Heading 1</h1>
|
|
<h2>Heading 2</h2>
|
|
<h3>Heading 3</h3>
|
|
<h4>Heading 4</h4>
|
|
<h5>Heading 5</h5>
|
|
<h6>Heading h</h6>
|
|
|
|
<p>
|
|
A line:
|
|
</p>
|
|
|
|
<hr>
|
|
|
|
<p>Here's a link to <a href="http://foo.bar">a website</a>, to a <a href="local-doc.html">local doc</a>, and to a <a href="#an-h2-header">section heading in the current doc</a>. Here's a footnote <a href="#fn1" id="fnref1"><sup>1</sup></a>.</p>
|
|
<p>Tables can look like this:</p>
|
|
|
|
<table>
|
|
<caption>
|
|
Shoes, their sizes, and what they're made of
|
|
</caption>
|
|
<thead>
|
|
<tr >
|
|
<th align="left">size</th>
|
|
<th align="left">material</th>
|
|
<th align="left">color</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr >
|
|
<td align="left">9</td>
|
|
<td align="left">leather</td>
|
|
<td align="left">brown</td>
|
|
</tr>
|
|
<tr >
|
|
<td align="left">10</td>
|
|
<td align="left">hemp canvas</td>
|
|
<td align="left">natural</td>
|
|
</tr>
|
|
<tr >
|
|
<td align="left">11</td>
|
|
<td align="left">glass</td>
|
|
<td align="left">transparent</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p>Multi-line tables:</p>
|
|
<table style="width:46%;">
|
|
<colgroup>
|
|
<col width="13%">
|
|
<col width="31%">
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th align="left">keyword</th>
|
|
<th align="left">text</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td align="left">red</td>
|
|
<td align="left">Sunsets, apples, and other red or reddish things.</td>
|
|
</tr>
|
|
<tr>
|
|
<td align="left">green</td>
|
|
<td align="left">Leaves, grass, frogs and other things it's not easy being.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<p>A horizontal rule follows.</p>
|
|
<hr>
|
|
<p>Images are responsive by default:</p>
|
|
<div>
|
|
<!-- <img alt="example image" src="#" title="An exemplary image">-->
|
|
<p>example image</p>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<h1 id="form-elements">Form Elements</h1>
|
|
<form>
|
|
<div id="forms__input">
|
|
<h3>Input fields</h3>
|
|
<p><label for="input__text">Text Input</label> <input id="input__text" placeholder="Text Input" type="text"></p>
|
|
<p><label for="input__password">Password</label> <input id="input__password" placeholder="Type your Password" type="password"></p>
|
|
<p><label for="input__webaddress">Web Address</label> <input id="input__webaddress" placeholder="http://yoursite.com" type="url"></p>
|
|
<p><label for="input__emailaddress">Email Address</label> <input id="input__emailaddress" placeholder="name@email.com" type="email"></p>
|
|
<p><label for="input__phone">Phone Number</label> <input id="input__phone" placeholder="(999) 999-9999" type="tel"></p>
|
|
<p><label for="input__search">Search</label> <input id="input__search" placeholder="Enter Search Term" type="search"></p>
|
|
<p><label for="input__text2">Number Input</label> <input id="input__text2" placeholder="Enter a Number" type="number"></p>
|
|
<p><label for="input__text3">Error</label> <input id="input__text3" placeholder="Text Input" type="text"></p>
|
|
<p><label for="input__text4">Valid</label> <input id="input__text4" placeholder="Text Input" type="text"></p>
|
|
</div>
|
|
<p><a href="#top">[Top]</a></p>
|
|
<div id="forms__select">
|
|
<h3>Select menus</h3>
|
|
<p><label for="select">Select</label> <select id="select">
|
|
<optgroup label="Option Group">
|
|
<option>
|
|
Option One
|
|
</option>
|
|
<option>
|
|
Option Two
|
|
</option>
|
|
<option>
|
|
Option Three
|
|
</option>
|
|
</optgroup>
|
|
</select></p>
|
|
</div>
|
|
<p><a href="#top">[Top]</a></p>
|
|
<div id="forms__checkbox">
|
|
<h3>Checkboxes</h3>
|
|
<ul style="list-style:none;">
|
|
<li><label for="checkbox1"><input checked="checked" id="checkbox1" name="checkbox" type="checkbox"> Choice A</label></li>
|
|
<li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
|
|
<li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
|
|
</ul>
|
|
</div>
|
|
<p><a href="#top">[Top]</a></p>
|
|
<div id="forms__textareas">
|
|
<h3>Textareas</h3>
|
|
<p><label for="textarea">Textarea</label>
|
|
<textarea cols="48" id="textarea" placeholder="Enter your message here" rows="8"></textarea></p>
|
|
</div>
|
|
<p><a href="#top">[Top]</a></p>
|
|
<div id="forms__html5">
|
|
<div id="forms__action">
|
|
<h3>Action buttons</h3>
|
|
<p><input type="submit" value="input type=submit"> <input type="button" value="input type=button"> <input type="reset" value="input type=reset"> <input disabled type="submit" value="input disabled"></p>
|
|
<p><input type="submit" value="input type=submit" class="ex-secondary"> <input type="button" value="input type=button" class="ex-secondary"> <input type="reset" value="input type=reset" class="ex-secondary"> <input disabled type="submit" value="input disabled" class="ex-secondary"></p>
|
|
<p><input type="submit" value="input type=submit" class="ex-danger"> <input type="button" value="input type=button" class="ex-danger"> <input type="reset" value="input type=reset" class="ex-danger"> <input disabled type="submit" value="input disabled" class="ex-danger"></p>
|
|
<p><input type="submit" value="input type=submit" class="ex-success"> <input type="button" value="input type=button" class="ex-success"> <input type="reset" value="input type=reset" class="ex-success"> <input disabled type="submit" value="input disabled" class="ex-success"></p>
|
|
<p><input type="submit" value="input type=submit" class="ex-warning"> <input type="button" value="input type=button" class="ex-warning"> <input type="reset" value="input type=reset" class="ex-warning"> <input disabled type="submit" value="input disabled" class="ex-warning"></p>
|
|
<p><button type="submit"><button type=submit></button> <button type="button"><button type=button></button> <button type="reset"><button type=reset></button> <button disabled type="button"><button disabled></button></p>
|
|
</div>
|
|
<p><a href="#top">[Top]</a></p>
|
|
</div>
|
|
</form>
|
|
</ex-page>
|
|
|
|
<ex-modal header="Modal header goes here">
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget sapien maximus, sodales elit tempus, viverra libero. Phasellus vitae elit eros. Vivamus non nibh vestibulum, tristique nulla at, convallis est. Aliquam erat volutpat. Sed est lorem, lacinia at lobortis vel, finibus a arcu. Integer ac eros est. In mattis tincidunt elit eget tempor.
|
|
</p>
|
|
</ex-modal>
|
|
|
|
<script>
|
|
window.addEventListener('load', () => {
|
|
$('ex-nav').tap(el => {
|
|
el.items = [{ title: 'Home', name: 'home' }]
|
|
el.addEventListener('onItemClick', ev => {
|
|
console.log('item clicked!', ev)
|
|
})
|
|
})
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|