www/iphone/UiUIKit/chat.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   2 <html xmlns="http://www.w3.org/1999/xhtml">
   3 <head>
   4         <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   5         <meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
   6         <title>Chat Interface</title>
   7         <link rel="stylesheet" href="stylesheets/iphone.css" />
   8         <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
   9         <script type="text/javascript" charset="utf-8">
  10                 window.onload = function() {
  11                   setTimeout(function(){window.scrollTo(0, 1);}, 100);
  12                 }
  13         </script>
  14 </head>
  15 <body id="chat">
  16
  17         <div id="header">
  18                 <h1>Chat interface</h1>
  19                 <a href="index.html" id="backButton">Back</a>
  20         </div>
  21
  22         <div class="bubble left">
  23                 <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>
  24         </div>
  25
  26         <p>23/08/2008 21:55</p>
  27
  28         <div class="bubble right">
  29                 <p class="aqua">By using simple markup you can customize colors using "lime, aqua…" classes on any <code>P</code> element.</p>
  30         </div>
  31
  32         <p>23/08/2008 21:57</p>
  33
  34         <div class="bubble right">
  35                 <p class="lemon">And you can customize the display (left or right)</p>
  36         </div>
  37
  38         <div class="bubble right">
  39                 <p class="lemon">Check all the colors.</p>
  40         </div>
  41
  42         <p>23/08/2008 21:59</p>
  43
  44         <div class="bubble left">
  45                 <p class="lime">This is using class "lime"</p>
  46         </div>
  47
  48         <div class="bubble right">
  49                 <p class="lemon">This is using class "lemon"</p>
  50         </div>
  51
  52         <div class="bubble left">
  53                 <p class="orange">This is using class "orange"</p>
  54         </div>
  55
  56         <div class="bubble right">
  57                 <p class="aqua">This is using class "aqua"</p>
  58         </div>
  59
  60         <div class="bubble left">
  61                 <p class="purple">This is using class "purple"</p>
  62         </div>
  63
  64         <div class="bubble right">
  65                 <p class="pink">This is using class "pink"</p>
  66         </div>
  67
  68         <div class="bubble left">
  69                 <p class="graphite">This is using class "graphite"</p>
  70         </div>
  71
  72         <div class="bubble right">
  73                 <p class="clear">This is using class "clear"</p>
  74         </div>
  75
  76 </body>
  77 </html>