index.haml

!!!
%html
  %head
    %meta{:charset => "utf-8"}/
    %title Blockchain Pen
    %meta{:content => "Blockchain Pen - the easiest way to write immutable messages on the blockchain ", :name => "description"}/
    %meta{:content => "Francesco 'makevoid' Canessa", :name => "author"}/
    %meta{:content => "width=device-width, initial-scale=1", :name => "viewport"}/
    %meta{:content => "http://blockchainpen.com/img/stylus.png", :property => "og:image"}/
    / TODO: embed local font
    / <link href='//fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>
    %link{:charset => "utf-8", :href => "./css/vendor/normalize.css", :media => "screen", :rel => "stylesheet"}/
    %link{:charset => "utf-8", :href => "./css/style.css", :media => "screen", :rel => "stylesheet"}/
  %body
    .container
      .row
        %header
          .row
            .one.columns
              %img{:src => "/img/stylus.svg"}/
            .five.columns
              %h1 Blockchain Pen
        .align-right.address
          %a{:href => "javascript:void(0)"} 1address
          .row.rel
            .qr.hidden
            %p
              You can send
              %span.messages_num 0
              messages
            %p.topup_msg.hidden You need to top-up!
        .spacer50
        .bc_stylus
          .message_input
            .row.align-right
              %span.chars_count
                0
              %span
                chars
            .spacer10
            .row
              .five.columns
                %textarea{:maxlength => "1000", :name => "message", :placeholder => "paste hash or json here...", :type => "text"}
              .one.columns
                %button.main
                  Write
              .row
                .six.columns.hidden.outcome
                  loading...
              .extra_section
                %a.extra_btn{:href => "javascript:void(0)"}
                  extra features
                .extra_content.hidden
                  %p
                    %a.reveal_pvtkey{:href => "javascript:void(0)"} reveal private key
                  %p
                    %a.add_ew_prefix{:href => "javascript:void(0)"} add EternityWall prefix
                  %p
                    %a{:href => "http://github.com/makevoid/blockchain_pen_coffee"} view/edit the source code

    %script{:src => "./vendor/zepto.js", :type => "text/javascript"}
    %script{:src => "./vendor/qrcode.js", :type => "text/javascript"}
    %script{:src => "./bower_components/bitcore/bitcore.min.js", :type => "text/javascript"}
    %script{:src => "./bower_components/blockchain-api-basic/bundle.js", :type => "text/javascript"}
    %script{:src => "./dist/bundle.js", :type => "text/javascript"}