LBP
/
OliveTin
зеркало из https://github.com/OliveTin/OliveTin.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
							<!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>