qr-layout.html

<!-- test area for html formatting -->

<div class="bill_container">
  <div class="receipt_section">
    <div class="title">Ricevuta</div>
    <div class="subtitle payable_to">Conto / Pagabile a</div>
    <div class="qrcontent">
      CH93 0076 2011 6238 5295 7<br/>
      Compagnia di assicurazione forma & scalciante<br/>
      Via cantonale 24<br/>
      3000 Lugano
    </div>
    <div><br/></div>
    <div class="subtitle reference">Referenza</div>
    <div class="reference">
      RF89 MTR8 1UUW ZYO4 8NY5 5NP3
    </div>
    <div><br/></div>
    <div class="subtitle payable_by">Pagabile da</div>
    <div class="payable_by">
      Foobar Barfoot<br/>
      Via Cantonale 25<br/>
      3001 Comano<br/>
    </div>

    <div class="amount">
      <div class="currency">
        <span class="amount_header subtitle">Valuta</span><br/>
        CHF
      </div>

      <div class="amount_value">
        <span class="amount_header subtitle">Importo</span><br/>
        2151.00
      </div>
    </div>

    <div class="acceptance_point">
      Punto di accettazione
    </div>

  </div>
  <div class="payment_section">
    <div class="left_column">
      <div class="title">Sezione pagamento</div>
      <div class="qr_code"><img src="tmp/qrcode2.png" /></div>
      <div class="amount">
        <div class="currency">
          <span class="amount_header subtitle">Valuta</span><br/>
          CHF
        </div>

        <div class="amount_value">
          <span class="amount_header subtitle">Importo</span><br/>
          2151.00
        </div>
      </div>

      <div class="further_information">
        <span class="finfo_header">Name AV1:</span> UV;UltraPay005;12345
        <span class="finfo_header">Name AV2:</span> XY;XYService;54321
      </div>
    </div>
    <div class="right_column">
      <div class="subtitle payable_to">Conto / Pagabile a</div>
      <div class="qrcontent">
        CH93 0076 2011 6238 5295 7<br/>
        Compagnia di assicurazione forma & scalciante<br/>
        Via cantonale 24<br/>
        3000 Lugano<br/>
      </div>
    <div><br/></div>
    <div class="subtitle reference">Referenza</div>
      <div class="reference">
        RF89 MTR8 1UUW ZYO4 8NY5 5NP3
      </div>
    <div><br/></div>
    <div class="subtitle additional_information">Informazioni supplementari</div>
      <div class="additional_information">
        Premio mensile luglio 2020
      </div>
    <div><br/></div>
    <div class="subtitle payable_by">Pagabile da</div>
      <div class="payable_by">
        Foobar Barfoot<br/>
        Via Cantonale 25<br/>
        3001 Lugano<br/>
      </div>
    </div>
  </div>
</div>

<style>

  @font-face{ 
    font-family: 'liberation_sansregular';
    src: url('app/assets/fonts/LiberationSans-Regular.eot');
    src: url('app/assets/fonts/LiberationSans-Regular.eot?#iefix') format('embedded-opentype'),
         url('app/assets/fonts/LiberationSans-Regular.woff') format('woff'),
         url('app/assets/fonts/LiberationSans-Regular.ttf') format('truetype'),
         url('app/assets/fonts/LiberationSans-Regular.svg#liberation_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
  }

  .bill_container {
    width: 210mm;
    height: 105mm;
    font-family: 'liberation_sansregular';
    border: 1px solid #ccc;
  }

  .bill_container:after {
    content: "";
    display: table;
    clear: both;
  }

  .receipt_section {
    width: 52mm;
    height: 95mm;
    padding: 5mm;
    float: left;
    font-size: 8pt;
    border-right: 1px dotted #ccc;
  }

  .payment_section {
    width: 157mm;
    height: 95mm;
    float: left;
    padding: 5mm;
    font-size: 10pt;
  }

  .payment_section .left_column {
    height: 95mm;
    width: 46mm;
    float: left;
    margin-right: 5mm;
  }

  .payment_section .right_column {
    height: 95mm;
    width: 86mm;
    float: left;
  }

  .qr_code {
    padding: 5mm 0mm 5mm 0mm;
    height: 46mm;
    width: 46mm;
  }

  .qr_code img {
    height: 46mm;
    width: 46mm;
  }

  .amount {
    margin-top: 15px;
  }

  .amount .currency {
    float: left;
    margin-right: 15px;
  }

  .title {
    font-weight: bold;
    font-size: 11pt;
  }

  .receipt_section .subtitle {
    font-weight: bold;
    font-size: 6pt;
    line-height: 9pt;
  }

  .receipt_section .acceptance_point {
    font-weight: bold;
    text-align: right;
    font-size: 6pt;
    line-height: 8pt;
    padding-top: 5mm;
  }

  .payment_section .subtitle {
    font-weight: bold;
    font-size: 8pt;
    line-height: 11pt;
  }

  .payment_section .amount {
    height: 22mm;
    margin-top: 40px;
  }

  .payment_section .further_information {
    font-size: 7pt;
  }

  .payment_section .finfo_header {
    font-weight: bold;
  }
</style>