mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-12 14:20:14 +02:00
4ac3aa169a
--HG-- rename : static/shared/README.md => browser/components/loop/content/shared/README.md rename : static/shared/css/common.css => browser/components/loop/content/shared/css/common.css rename : static/shared/css/conversation.css => browser/components/loop/content/shared/css/conversation.css rename : static/shared/css/panel.css => browser/components/loop/content/shared/css/panel.css rename : static/shared/css/readme.html => browser/components/loop/content/shared/css/readme.html rename : static/shared/img/icon_32.png => browser/components/loop/content/shared/img/icon_32.png rename : static/shared/img/icon_64.png => browser/components/loop/content/shared/img/icon_64.png rename : static/shared/js/models.js => browser/components/loop/content/shared/js/models.js rename : static/shared/js/views.js => browser/components/loop/content/shared/js/views.js rename : static/shared/libs/backbone-1.1.2.js => browser/components/loop/content/shared/libs/backbone-1.1.2.js rename : static/shared/libs/jquery-2.1.0.js => browser/components/loop/content/shared/libs/jquery-2.1.0.js rename : static/shared/libs/lodash-2.4.1.js => browser/components/loop/content/shared/libs/lodash-2.4.1.js rename : static/shared/libs/sdk.js => browser/components/loop/content/shared/libs/sdk.js rename : static/shared/libs/webl10n-20130617.js => browser/components/loop/content/shared/libs/webl10n-20130617.js rename : static/css/webapp.css => browser/components/loop/standalone/content/css/webapp.css rename : static/index.html => browser/components/loop/standalone/content/index.html rename : static/js/webapp.js => browser/components/loop/standalone/content/js/webapp.js rename : static/l10n/data.ini => browser/components/loop/standalone/content/l10n/data.ini rename : test/webapp_test.js => browser/components/loop/test/standalone/webapp_test.js extra : transplant_source : %DA%D9%3A%E9%C6%E0d%13%84%C1%BEps%C8b%F09o%D7m
173 lines
4.5 KiB
HTML
173 lines
4.5 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"
|
|
onclick="var el=this.parentNode;el.classList.add('fade-out');setTimeout(el.remove.bind(el), 500);"></button>
|
|
<p class="message">Oops! Something went really wrong.</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>
|