domus_node
Version:
Node.js web frontend to heyu
77 lines (60 loc) • 2.24 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>Chat Interface</title>
<link rel="stylesheet" href="stylesheets/iphone.css" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<script type="text/javascript" charset="utf-8">
window.onload = function() {
setTimeout(function(){window.scrollTo(0, 1);}, 100);
}
</script>
</head>
<body id="chat">
<div id="header">
<h1>Chat interface</h1>
<a href="index.html" id="backButton">Back</a>
</div>
<div class="bubble left">
<p class="lime">Hi, welcome to the chat interface example. All bubbles are made from a <code>DIV</code> element. Inside div elements there's <code>P</code> element that represents the user text. #chat on <code>BODY</code> is mandatory.</p>
</div>
<p>23/08/2008 21:55</p>
<div class="bubble right">
<p class="aqua">By using simple markup you can customize colors using "lime, aqua…" classes on any <code>P</code> element.</p>
</div>
<p>23/08/2008 21:57</p>
<div class="bubble right">
<p class="lemon">And you can customize the display (left or right)</p>
</div>
<div class="bubble right">
<p class="lemon">Check all the colors.</p>
</div>
<p>23/08/2008 21:59</p>
<div class="bubble left">
<p class="lime">This is using class "lime"</p>
</div>
<div class="bubble right">
<p class="lemon">This is using class "lemon"</p>
</div>
<div class="bubble left">
<p class="orange">This is using class "orange"</p>
</div>
<div class="bubble right">
<p class="aqua">This is using class "aqua"</p>
</div>
<div class="bubble left">
<p class="purple">This is using class "purple"</p>
</div>
<div class="bubble right">
<p class="pink">This is using class "pink"</p>
</div>
<div class="bubble left">
<p class="graphite">This is using class "graphite"</p>
</div>
<div class="bubble right">
<p class="clear">This is using class "clear"</p>
</div>
</body>
</html>