mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-10 21:28:04 +02:00
187 lines
4.7 KiB
HTML
187 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
|
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
|
|
|
<!-- This file is intended to help frontend developers to easily identify what
|
|
are the available styles for the Loop UI components. -->
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Loop UI shared CSS information/demo</title>
|
|
<link type="text/css" rel="stylesheet" href="common.css">
|
|
<link type="text/css" rel="stylesheet" href="panel.css">
|
|
<link type="text/css" rel="stylesheet" href="conversation.css">
|
|
<style>
|
|
body {
|
|
width: 600px;
|
|
margin: 1em auto;
|
|
background: #fff;
|
|
font-family: Helvetica, Arial, sans;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Loop UI toolkit</h1>
|
|
|
|
<h2>Logo icons</h2>
|
|
|
|
<p>
|
|
<img src="../img/icon_32.png"> 32x32 transparent PNG
|
|
<img src="../img/icon_64.png"> 64x64 transparent PNG
|
|
</p>
|
|
|
|
<p><em><strong>Note:</strong> these are temporary.</em></p>
|
|
|
|
<h2>Share panel</h2>
|
|
|
|
<h3>Simple</h3>
|
|
|
|
<div class="share">
|
|
<form class="description">
|
|
<p>This is a simple message.</p>
|
|
</form>
|
|
<div class="action">
|
|
<p><input type="url" value="http://loop.im/plop75"></p>
|
|
<p>Your name will appear as <a href="">Unnamed</a>.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Featuring options</h3>
|
|
|
|
<div class="share">
|
|
<form class="description">
|
|
<p class="field">
|
|
<label>Share this link with a friend to
|
|
<select>
|
|
<option>browse together</option>
|
|
<option selected="selected">video chat</option>
|
|
<option>audio chat</option>
|
|
<option>text chat</option>
|
|
</select>
|
|
</label>
|
|
</p>
|
|
<p class="field">
|
|
<label>
|
|
Use webcam <select><option>Foo</option></select>
|
|
</label>
|
|
</p>
|
|
<p class="field">
|
|
<label>Use whatever
|
|
<select><option>Long foo is long indeed</option></select>
|
|
</label>
|
|
</p>
|
|
<p class="preview cf">
|
|
Preview <video></video>
|
|
</p>
|
|
</form>
|
|
<div class="action">
|
|
<p><input type="url" value="http://loop.im/plop75"></p>
|
|
<p>Your name will appear as <a href="">Unnamed</a>.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Conversation window</h2>
|
|
|
|
<p><em>The conversation component adapts automatically to its container to
|
|
occupy all the available space.</em></p>
|
|
|
|
<h3>Large</h3>
|
|
|
|
<div class="conversation">
|
|
<div class="media nested">
|
|
<video class="remote"></video>
|
|
<video class="local"></video>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Large with controls</h3>
|
|
|
|
<div class="conversation">
|
|
<nav class="controls">
|
|
<button class="btn">Start</button>
|
|
<button class="btn">Stop</button>
|
|
</nav>
|
|
<div class="media nested">
|
|
<video class="remote"></video>
|
|
<video class="local"></video>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Small (think chat window)</h3>
|
|
|
|
<div style="width: 204px">
|
|
<div class="conversation">
|
|
<div class="media nested">
|
|
<video class="remote"></video>
|
|
<video class="local"></video>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Side by side</h3>
|
|
|
|
<div class="conversation">
|
|
<div class="media side-by-side">
|
|
<video class="remote"></video>
|
|
<video class="local"></video>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Buttons</h2>
|
|
|
|
<h3>Using <code><a></code></h3>
|
|
|
|
<p>
|
|
<a href="" class="btn">default</a>
|
|
<a href="" class="btn btn-info">info</a>
|
|
<a href="" class="btn btn-success">success</a>
|
|
<a href="" class="btn btn-warning">warning</a>
|
|
<a href="" class="btn btn-error">error</a>
|
|
</p>
|
|
|
|
<h3>Inline</h3>
|
|
|
|
<p>Click <a href="" class="btn btn-info">here</a>.</p>
|
|
|
|
<h3>Using <code><button></code></h3>
|
|
|
|
<p>
|
|
<button class="btn">default</button>
|
|
<button class="btn btn-info">info</button>
|
|
<button class="btn btn-success">success</button>
|
|
<button class="btn btn-warning">warning</button>
|
|
<button class="btn btn-error">error</button>
|
|
</p>
|
|
|
|
<h2>Alerts</h2>
|
|
|
|
<div class="alert alert-error">
|
|
<button class="close"></button>
|
|
<p class="message">Oops! Something went really wrong.</p>
|
|
</div>
|
|
|
|
<div class="alert alert-warning">
|
|
<button class="close"></button>
|
|
<p class="message">Oops! This is a warning.</p>
|
|
</div>
|
|
|
|
<h2>Incoming call</h2>
|
|
|
|
<div class="incoming-call">
|
|
<h2>Incoming call</h2>
|
|
<p>
|
|
<button class="btn btn-success btn-accept">Accept</button>
|
|
<button class="btn btn-error btn-decline">Decline</button>
|
|
</p>
|
|
</div>
|
|
|
|
<script>
|
|
window.onload = function() {
|
|
[].forEach.call(document.querySelectorAll("video"), function(video) {
|
|
video.setAttribute("src", "http://v2v.cc/~j/theora_testsuite/320x240.ogg");
|
|
});
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|