index.haml

#wizard
    Info
    %input.long#title{:placeholder => "Titre",:title => "Titre"}
    %input.short#code{:placeholder => "Code GC",:title => "Code GC"}
    %br
    Taille 
    %select.short#model{:label=> "Type",:title => "Modèle de boite"}
        %option{:value => "micro"} Micro
        %option{:value => "nano"} Nano
        %option{:value => "yb"} Yellow book
    //%input#pages{:type=>"number", :placeholder => "Pages (2)"}
    %input.short#sheets{:type=>"number", :placeholder => "Sheets (10)", :title => "Sheets (10)"}
    %input.short#width{:placeholder => "Largeurs des rubans",:title => "Largeurs des rubans"}
    %br
    Logos
    %select#logo{:label=> "Logo",:title => "Logo"}
        %option{:value => ""} Aucun
        %option{:value => "gc"} Officiel
        %option{:value => "alt"} Alternatif
        %option{:value => "nb"} Noir et blanc
        %option{:value => "custom"} Perso
    %select#logob{:label=> "Logo bas",:title => "Logo bas"}
        %option{:value => ""} Aucun
        %option{:value => "gc"} Officiel
        %option{:value => "alt"} Alternatif
        %option{:value => "nb"} Noir et blanc  
        %option{:value => "custom"} Perso
    %br
    %label{:for=>"ftf"} FTF
    %input#ftf{:type=>"checkbox", :placeholder => "FTF"}
    
    %label{:for=>"stf"} STF
    %input#stf{:type=>"checkbox", :placeholder => "STF"} 
    
    %label{:for=>"ttf"} TTF
    %input#ttf{:type=>"checkbox", :placeholder => "TTF"}     
    %br
    
    %button#gen Generate
    
.logbook#tpl
    .sheet.intro
        .cell
            .logo.logo-nb
        .cell.header
            .title La geocache
            .code  GC123456  
        .cell.intro Lorem ipsum....
    .sheet.single           
        .cell
            .logo.logo-gc
        .cell.header
            .title La geocache
            .code  GC123456     
        .cell.log.f.f1
            .date 10/10/2014
            .cacher LudoO-FTF
            .num 1
            .bg FTF
            
        .cell.log.f.f2
            .date 10/10/2014
            .cacher LudoO-STF
            .num 2
            .bg STF
        .cell.log.f.f1
            .date 10/10/2014
            .cacher LudoO-TTF
            .num 3
            .bg TTF
        .cell.log
            .date 10/10/2014
            .cacher LudoO
            .num 4          
    .sheet            
        .cell
            .logo.logo-alt
        .cell.header
            .title La geocache
            .code  GC123456  
#sandbox            

Logbook-creator.markdown

Logbook creator

Online logbook creator for Geocaching

A Pen by Ludovic Valente on CodePen.

License.

script.js

$(function() {
  var ms={nano:{w:10},
          micro:{w:45},
          yb:{w:30}
  };
  
  var s=$('#sandbox');
  $('#gen').click(function(){
    s.html('');
    var o = {
    intro:'Lorem ipsum cachos et dnfera...'
    };
    $('input,select','#wizard').each(function(i,el){
      o[$(el).attr('id')]=$(el).val();
    });
    $("#tpl .cell.header .title").text(o.title);
    $("#tpl .cell.header .code").text(o.code);
    $("#tpl .cell.intro").html(o.intro);
  
    $('#tpl .sheet.intro').clone().appendTo(s);
    for(var i=0;i<o.sheets;i++){
      $('#tpl .sheet.single').clone().appendTo(s);
    }
  });
  $('#model').change(function(){
    var m = $('#model').val();
    $('.logbook').removeClass().addClass("logbook "+m);
  });
});

style.css

body {
  margin: 0;
  font-family:Arial;
  font-size:10px;
}
@media print {
  #wizard{display:none;}  
}
.logbook{
  margin:5px;
}
.sheet{
  border:1px solid black;
  width:25mm;
  min-height:20mm;
  float : left;
  margin-right:5px;
}
.logbook.nano .sheet{
  width:10mm;
  min-height:20mm;
}
.logbook.micro .sheet{
  width:45mm;
  min-height:30mm;
}
.logbook.yb .sheet{
  width:30mm;
  min-height:50mm;
}
.cell{
  margin: auto auto;
  text-align:center;
}
.cell.header{
  background-color: black;
  color: white;
}
.cell.log{
  height:80px;
  border-bottom:1px solid black;
  text-align:left;
  position: relative;
}
.cell.log .date:before {
  content:"Date:";
}
.cell.log .cacher{
  margin:5px 0;
  padding-top:10px;
  border:1px dotted gray;
}
.cell.log .cacher:before {
  content:"By:";
}
.cell.log .num{
  position: absolute; bottom: 0; right: 0;
  margin: 2px;
}
.bg{
  display:none;
}
.f{
    position: relative;
}
.f .bg{
  display:block;
  position:relative;
  
  width:100%;
  margin: auto auto;
  font-size:30px;
  text-align:center;
  color:gray;
  opacity:0.5;
}
.logo{
  width:80px;
  height:80px;
  margin: 5px auto;
  margin-top:30px;
  background-size: 80px 80px; 
  background-repeat:no-repeat;
  background-position: center; 
}
.logo-gc{
  background-image:url("http://chroniqueterrienne.fr/blog/wp-content/uploads/2011/04/Geocaching_Logo.jpg?dur=1489");
}
.logo-nb{
  background-image:url("http://www.geocaching.com/images/about/logos/geocaching/Logo_Geocaching_BnW_300.png");
}
.logo-alt{
  background-image:url("http://www.oregonpark.org/wp-content/uploads/GeocacheLogo.jpg?dur=1903");
}

select.short, input.short{
  width:80px;
}
select.long, input.long{
  width:200px;
}

.sandbox{
  border:1px solid red;
}

this is the first log