interface.haml

!!! XML
!!! Strict
%html{ xmlns: "http://www.w3.org/1999/xhtml" }
  %head
    %title DinMaker - A real-time chat demo for TopCloud and NodeRouter
    %link{ href: "style.css", rel: "stylesheet", type: "text/css" }
    %link{ href: "/external/ui-darkness/jquery-ui-1.7.2.custom.css", rel: "stylesheet", type: "text/css" }
    %script{ src: "/external/jquery-1.3.2.min.js", type: "text/javascript" }
    %script{ src: "/external/jquery-ui-1.7.2.custom.min.js", type: "text/javascript" }
    %script{ src: "/external/jquery.haml-1.3.js", type: "text/javascript" }
    %script{ src: "/lib/TC.js", type: "text/javascript" }
    :javascript
      // This file was generated on #{Date.now()}
      $(function () {
        TC.set_path("lib/");
      });
      function login(form) {
        TC.render_interface('Demo.js', $('input', form).val());
      }
    :css
      body, html {
        background: #222 url(background.jpg) 50% 50%;
        font-size: 12px;
        width: 100%;
        height: 100%;
        position: absolute;
        padding: 0;
        margin: 0;
        overflow: hidden;
      }
  %body
  
    %form{ onsubmit: "login(this.form); return false;" }
      #shadow
        .ui-widget-shadow
      %table#login.ui-widget.ui-widget-content.ui-corner-all
        %thead
          %tr
            %th.ui-widget-header.ui-corner-top{ colspan: "2" }
              Enter your desired username for DinMaker
        %tr
          %th
            Name
          %td
            %input{ name: "name", style: "width: 93%" }
        %tr
          %th
          %td
            %button.ui-state-default.ui-corner-all{ title: "Enter the chat room.", type: "submit" }
              %span.ui-icon.ui-icon-unlocked
              Launch