mirror of
https://github.com/OliveTin/OliveTin
synced 2025-12-15 10:35:45 +00:00
288 lines
6.4 KiB
HTML
288 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
<head>
|
|
<title>Femtocrank</title>
|
|
|
|
<meta charset = "UTF-8">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<link rel = "shortcut icon" href = "tests/logo.png" type = "image/png" />
|
|
|
|
<link rel = "stylesheet" type = "text/css" href = "style.css" />
|
|
<link rel = "stylesheet" type = "text/css" href = "dark.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<header class = "show">
|
|
<div class = "logo-and-title">
|
|
<img src = "tests/logo.png" alt = "SimpleApp Logo" class = "logo">
|
|
<h1 class = "show">FemtoCrank</h1>
|
|
</div>
|
|
|
|
<nav class = "fg1">
|
|
<ul role = "menubar">
|
|
<li><a href = "index.html" class = "active">Demo page</a></li>
|
|
<li><a href = "tests/simple.html">Simple app</a></li>
|
|
<li><a href = "tests/sidebar-app.html">Sidebar app</a></li>
|
|
<li><a href = "tests/login.html">Login</a></li>
|
|
<li>
|
|
<span><a href="#">Dropdown</a></span>
|
|
<div>
|
|
<ul>
|
|
<li><a href = "#">foo</a></li>
|
|
<li><a href = "#">bar</a></li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
<main class = "grid gc-xl">
|
|
<section class = "with-header-and-content">
|
|
<div class = "section-header">
|
|
<h2>Introduction</h2>
|
|
</div>
|
|
<div class = "section-content padding">
|
|
<p>This is a very simple theme of James Read's personal preferences, which tries to be bright and simple.</p>
|
|
<p>The examples below show the color choices in context.</p>
|
|
|
|
<div class = "annotation">
|
|
<div class = "annotation-key">
|
|
fyi
|
|
</div>
|
|
<div class = "annotation-val">
|
|
This is an annotation.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section class = "with-header-and-content">
|
|
<div class = "section-header">
|
|
<h2>Content</h2>
|
|
</div>
|
|
|
|
<div class = "section-content padding">
|
|
<p>
|
|
This is content. <a href = "foo.html">This is an internal link</a>. <a href = "https://google.com">This is an external link</a>.
|
|
</p>
|
|
</div>
|
|
|
|
<div class = "section-subheader">
|
|
<h3>Subsection</h3>
|
|
</div>
|
|
|
|
<div class = "section-content padding">
|
|
<p>This is a subsection.</p>
|
|
<p>It has some more content.</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Properties</h2>
|
|
|
|
<dl>
|
|
<dt>Name</dt>
|
|
<dd>Alice</dd>
|
|
|
|
<dt>Age</dt>
|
|
<dd>30</dd>
|
|
|
|
<dt>Location</dt>
|
|
<dd>London</dd>
|
|
|
|
<dt>Occupation</dt>
|
|
<dd>Software Engineer</dd>
|
|
</dl>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Code</h2>
|
|
<pre class = "show">
|
|
This is code.
|
|
|
|
|
|
function foo() {
|
|
console.log("bar");
|
|
}
|
|
</pre>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Inline Notifications</h2>
|
|
<p class = "info show inline-notification">
|
|
<strong>INFO:</strong> This is an info message.
|
|
</p>
|
|
|
|
<p class = "note show inline-notification">
|
|
<strong>NOTE:</strong>
|
|
This is a note.
|
|
</p>
|
|
|
|
<p class = "success show inline-notification">
|
|
<strong>SUCCESS:</strong>
|
|
This is a success message.
|
|
</p>
|
|
|
|
<p class = "important show inline-notification">
|
|
<strong>IMPORTANT:</strong>
|
|
This is an important message.
|
|
</p>
|
|
|
|
<p class = "warning show inline-notification">
|
|
<strong>WARNING:</strong>
|
|
This is a warning message.
|
|
</p>
|
|
|
|
<p class = "severe show inline-notification">
|
|
<strong>SEVERE:</strong>
|
|
This is a severe message.
|
|
</p>
|
|
|
|
<p class = "critical show inline-notification">
|
|
<strong>CRITICAL: </strong> This is a critical message.
|
|
</p>
|
|
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Forms</h2>
|
|
|
|
<p>This is a form.</p>
|
|
|
|
<form>
|
|
<label for = "name">Name</label>
|
|
<input type = "text" id = "name" name = "name" />
|
|
|
|
<span class = "fake-label">Role</span>
|
|
<div class = "radio-group">
|
|
<label>
|
|
<input type = "radio" name = "role" value = "sales" />
|
|
<span>Sales</span>
|
|
</label>
|
|
<label>
|
|
<input type = "radio" name = "role" value = "engineerig" />
|
|
<span>Engineering</span>
|
|
</label>
|
|
|
|
<label>
|
|
<input type = "radio" name = "role" value = "hr" />
|
|
<span>HR</span>
|
|
</label>
|
|
</div>
|
|
|
|
<label for = "salary">Salary</label>
|
|
<select id = "salary" name = "salary">
|
|
<option value = "0">Select a salary</option>
|
|
<option value = "10000">£10,000</option>
|
|
<option value = "20000">£20,000</option>
|
|
<option value = "30000">£30,000</option>
|
|
<option value = "40000">£40,000</option>
|
|
<option value = "50000">£50,000</option>
|
|
</select>
|
|
|
|
<fieldset>
|
|
<button type = "submit">Submit</button>
|
|
|
|
<button type = "cancel">Cancel</button>
|
|
|
|
<button type = "reset">Reset</button>
|
|
<button type = "submit" disabled>Disabled</button>
|
|
</fieldset>
|
|
|
|
</form>
|
|
|
|
<p>
|
|
<strong>Note:</strong> A more complete example can be found in the <a href = "tests/simple.html">SimpleApp</a> demo.
|
|
</p>
|
|
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Stats</h2>
|
|
|
|
<p>Stats updated in the last decade.</p>
|
|
|
|
<div class = "grid-boxed">
|
|
<div class = "stat-display">
|
|
<span class = "subtle">Hits</span>
|
|
<span class = "stat">1,000</span>
|
|
</div>
|
|
|
|
<div class = "stat-display">
|
|
<span class = "subtle">Unique visitors</span>
|
|
<span class = "stat">137</span>
|
|
</div>
|
|
|
|
<div class = "stat-display">
|
|
<span class = "subtle">Conversions</span>
|
|
<span class = "stat">1.5%</span>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Menus</h2>
|
|
|
|
<p>This section shows menus.</p>
|
|
|
|
<ul role = "menubar">
|
|
<li>
|
|
<span class = "submenu"><a href="#">Menu 1</a></span>
|
|
<div>
|
|
<ul>
|
|
<li><a href = "#">One</a></li>
|
|
<li><a href = "#">Two</a></li>
|
|
<li><a href = "#">Three</a></li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<span class = "submenu"><a href="#">Menu 2</a></span>
|
|
<div>
|
|
<ul>
|
|
<li><a href = "#">One</a></li>
|
|
<li><a href = "#">Two</a></li>
|
|
<li><a href = "#">Three</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Table</h2>
|
|
|
|
<p>This section shows tables.</p>
|
|
|
|
<table class = "row-hover">
|
|
<thead>
|
|
<th>ID</th>
|
|
<th>Forename</th>
|
|
<th>Surname</th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>1</td>
|
|
<td>Bob</td>
|
|
<td>Smith</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<span>This is the footer.</span>
|
|
</footer>
|
|
<script src = "annotate.js"></script>
|
|
</body>
|
|
</html>
|
|
|
|
|