app.haml

%div#main

  %ul#buttons{:style => "display: none;"}
    %li
      %a#schematic-link{:href => "", :target => '_blank'}
        %strong Download Schematic
    %li
      %a#download-link{:href=>'#'}
        %strong Printable Inventory
    %li
      %a#edit-link
        %strong Edit Brick Colors

  %div#form{:class=>"view"}
    
    %div#sample
      %h3 (This is bricked out awesome)
      %img{:src=>'/images/sample.png'}
    
    %form#config{:action=>"#/view/", :method=>"get"}
      %h2 Brickify turns your images into bricked out <em>awesome</em>.
      %ul
        %li
          %label{:for => 'url'}
            %strong Image URL
          %ul
            %li
              %input#url{:type => 'text', :name => "url", :placeholder => "http://"}
            %li
              %a#upload{:href=>'http://imgur.com/'} Need to upload your photo? Use this service
        -# %li
          Slider
          %ul
            %li Less detail, fewer bricks
            %li More detail, more bricks
        %li
          %input{:type => 'submit', :value => "Brickify!"}
    
  %hr
  
  %div#view{:class=>"view", :style=>"display: none;"}   
      
    #view-area
  
      %canvas#iso{:width=>"800", :height => '600'}
    
      %ul.controls
        %li
          %a#fit{:href => "#"} Fit
        %li
          %a#full{:href => "#"} Zoom
      
      #iso_viewer.fit
        %img#out
  %hr
  
  %div#edit{:class=>"view", :style=>"display: none;"}
    %h1 Brick Editor
    %div#canvas-wrap
      %canvas#canvas{:width=>"898", :height => '600'}
    %div{:id => "palette"}
    %a#view-link Save and View

  %hr
  
  %div#inventory{:class=>"view", :style=>"display: none;"}
    %a#back &larr; Back to viewer
    %p.dimensions
      %span#bricks_width
      bricks x
      %span#bricks_height
      bricks
    %p.dimensions
      %span#cm_width
      cm x
      %span#cm_height
      cm
    %table#inventory-table
      %thead
        %tr
          %th Color
          %th Size
          %th Quantity
      %tbody

  
  %div#about{:class => "view", :style => "display: none;"}
    %h2
      About

    #video

      #player
        %iframe{:src => "http://player.vimeo.com/video/19018711?title=0&amp;byline=0&amp;portrait=0", :width => "600", :height => "342", :frameborder => "0"}

    #profiles

      .person
        .picture
          %img{:src => "images/ryan.jpg"}
        .info
          %p.name
            %strong
              Ryan Carson,
            Founder
          %a{:href => "http://twitter.com/ryancarson", :class => "twitter"}
            @ryancarson

      .person
        .picture
          %img{:src => "images/jim.jpg"}
        .info
          %p.name
            %strong
              Jim Hoskins,
            Developer
          %a{:href => "http://twitter.com/jimrhoskins", :class => "twitter"}
            @jimrhoskins

      .person
        .picture
          %img{:src => "images/allison.jpg"}
        .info
          %p.name
            %strong
              Allison House,
            Designer
          %a{:href => "http://twitter.com/allison_house", :class => "twitter"}
            @allison_house

      .person
        .picture
          %img{:src => "images/alan.jpg"}
        .info
          %p.name
            %strong
              Alan Johnson,
            Developer
          %a{:href => "http://twitter.com/commondream", :class => "twitter"}
            @commondream

      .person
        .picture
          %img{:src => "images/nick.jpg"}
        .info
          %p.name
            %strong
              Nick Pettit,
            Designer
          %a{:href => "http://twitter.com/nickrp", :class => "twitter"}
            @nickrp

    .clear

    #vid_description

      %h3 What is Brickify?
      %p Brickify is a web application that turns images into LEGO building plans.

      %h3 Who built this and why?
      %p
        Brickify is an app created by <a href="http://www.carsonified.com">Carsonified</a>. It all started during a team building week at our new Orlando, Florida office. We took a fun trip to the local LEGO store, and Jim thought it might be fun to build the Carsonified logo in Lego bricks.
      %p
        We searched the web, but we couldn't find any web apps that transformed images into LEGO plans, so we decided to build one ourselves. After just two days of design and development, Brickify was the result.

      %h3 How does Brickify work?
      %p 
        Turning a picture into a brick pattern isn't the kind of problem we solve every day, but HTML5 technologies made it relatively easy. We use the <a href="http://membership.thinkvitamin.com/library/html5?cid=131#canvas">canvas</a> to load the users image and process the pixels in the image into bricks. We also use the canvas to tile brick images together to form an isometric view of the final production. 
        %a{:href => "http://jquery.org"} JQuery
        helps out with basic manipulation in the UI, and we use 
        %a{:href => "https://github.com/quirkey/sammy"} Sammy.js
        and 
        %a{:href => "http://documentcloud.github.com/underscore/"} Underscore.js
        to glue everything together. Check out the 
        <a href="https://github.com/carsonified/brickify">code on GitHub</a>.
        
      %h3 Want to learn how to make apps like this?
      %p We're not only web professionals&mdash;we're teachers, too! Our team runs <a href="http://membership.thinkvitamin.com/?cid=131">Think Vitamin Membership</a>, an online training facility for web designers and developers. Whether you're just getting started or want to stay on the cutting edge, our video library contains hundreds of high quality tutorials to teach you everything you need to know.
      
      %h3 Contribute
      %p Brickify is open source on <a href="http://github.com/carsonified/">GitHub</a>. If you would like to contribute, just fork Brickify, and send us a pull request.
      
      %h3 Contributors
      %ul
        %li
          %a{:href => "http://twitter.com/GavinStark"} Gavin Stark
          \: Added final project dimensions to the inventory page.
      

  .clear

%footer
  %a#about-link{:href => "#/about/"}
    %img{:src => "/images/team.jpg"}
    %p
      %strong Brickify
      was created by the Carsonified Think Vitamin team during a team building week in the Orlando office.
      %strong.link Learn more about Brickify and the team &rarr;
  %div#social
    <iframe src="http://www.facebook.com/plugins/like.php?href=brickify.com&amp;layout=standard&amp;show_faces=false&amp;width=3000&amp;action=like&amp;colorscheme=light&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:35px;" allowTransparency="true"></iframe>
  
    <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="carsonified" data-related="thinkvitamin">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
  

%canvas#schematic{:width=>"800", :height => '600'}