layout.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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 <title>Kiwi IRC</title>
   6 <style type="text/css">
   7 * { margin:0px; padding:0px; }
   8 body {
   9         background:#1b1b1b;
  10         font: 14px Tahoma, Geneva, sans-serif;
  11         color: #D4D4D4;
  12         height:100%;
  13 }
  14
  15 a {
  16         color: #8D9713;
  17         text-decoration:none;
  18 }
  19
  20
  21
  22 .logo { display:block; width:264px; height:90px; text-indent:-1000px; margin:70px auto 100px; background:url(img/logo.png) no-repeat; }
  23 #login { width:665px; margin:0px auto; }
  24 #login ul { list-style:none; }
  25 #login ul li { overflow:hidden; margin-bottom:10px; }
  26 #login ul li label { float:left; text-align:right; padding-right:.5em; }
  27 #login input { border:none; }
  28 #login .more { border-top: 1px dotted #888888; }
  29 #login .more_link {
  30         font-size:12px;
  31         position:relative;
  32         top:-16px;
  33         background: url(img/more.png) no-repeat right 5px;
  34         padding-right: 12px;
  35         color:#888;
  36 }
  37
  38 #login .content.top {
  39         width:470px;
  40         margin:30px auto 60px;
  41 }
  42 #login .content.top ul { font-size:27px; }
  43 #login .content.top label { width:40%; }
  44 #login .content.top input {
  45         width:240px; padding:.2em .5em;
  46         font-size:.8em; text-align:center;
  47         background:#D4D4D4;
  48         border-radius:8px; -moz-border-radius:8px;
  49 }
  50 #login .content.top a { display:block; text-align:right; font-size:22px; margin-top:30px; }
  51
  52 #login .content.bottom { width:350px; margin:30px auto; display:none; }
  53 #login .content.bottom ul { font-size:20px; }
  54 #login .content.bottom label { width:25%; }
  55 #login .content.bottom input { width:216px; font-size:.8em; no-repeat; padding:.2em .5em; background:#D4D4D4; border-radius:8px; -moz-border-radius:8px; }
  56 #login .content.bottom a { display:block; text-align:right; font-size:16px; margin-top:30px; }
  57 </style>
  58
  59 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
  60 <script type="text/javascript">
  61
  62         $(document).ready(function(){
  63                 addEvents();
  64                 $('.nick').focus();
  65         });
  66
  67
  68         function addEvents(){
  69                 $('.more_link').click(function(){ $('.content.bottom').slideDown('fast'); $('.network').focus(); return false; });
  70                 $('.formconnectwindow').submit(function(){ alert("logging in.."); return false; });
  71                 $('a.connect').click(function(){ $('.formconnectwindow').submit(); return false; });
  72         }
  73 </script>
  74 </head>
  75
  76 <body>
  77
  78 <div class="connectwindow">
  79         <h1 class="logo">Kiwi IRC</h1>
  80         <div id="login">
  81                 <form class="formconnectwindow">
  82                         <div class="content top">
  83                                 <ul>
  84                                         <li><label for="nick">Your nickname:</label>
  85                                                 <input type="text" id="nick" name="nick" class="nick" /></li>
  86                                 </ul>
  87                                 <a class="connect" href="">Connect »</a>
  88                         </div>
  89
  90                         <div class="more">
  91                                 <a href="" class="more_link">More</a>
  92                                 <div class="content bottom">
  93                                         <ul>
  94                                                 <li><label for="network">Server:</label>
  95                                                         <input type="text" id="network" name="network" class="network" value="irc.anonnet.org" /></li>
  96                                                 <li><label for="channel">Channel:</label>
  97                                                         <input type="text" id="channel" name="channel" class="channel" value="#kiwi" /></li>
  98                                         </ul>
  99                                         <a class="connect" href="">Connect »</a>
 100                                 </div>
 101                         </div>
 102                 </form>
 103         </div>
 104 </div>
 105
 106 </body>
 107 </html>