PDF Conferma parcheggio

Reviewed

HTML
View
Context
Info
Notes


        
        <div grid="grid" class="u-p-space-24 u-bg-color-sky-10">
    <div grid="12" class="u-text-center">
        <a href="#"><img src="../../images/svgs/logo-adb.svg" class="c-logo" alt="Homepage aeroporto di Bologna"></a>
        <a href="#" class="u-ml-space-16"><img src="../../images/svgs/logo-innovability.svg" class="c-logo c-logo--innovability" alt="Homepage aeroporto di Bologna"></a>
    </div>
</div>

<div grid="grid" class="u-p-space-24">
    <div grid="12">
        <h1 class="u-text-center u-typo-level-4 u-color-night-100 u-typo-weight-semibold">
            Questo è il tuo QR code per accedere all’ingresso
        </h1>
    </div>
    <div grid="12" class="u-text-center u-mt-space-36">
        <img src="../../images/qrcode.jpg" alt="QR code" width="200" />
    </div>
    <div grid="12" class="u-text-center">
        <p><strong>Porta con te questo QR code!</strong></p>
        <p class="u-mt-space-8">Stampa questa pagina o <strong>scarica la nostra app</strong> per utilizzare il QR Code dal tuo smartphone</p>
    </div>
</div>

<div grid="grid" class="u-px-space-24">
    <div grid="12" class="u-text-center">
        <a href="#"><img src="../../images/svgs/badge_appstore_it.svg" alt="Scarica su App Store" height="40" /></a>
        <a href="#" class="u-ml-space-16"><img src="../../images/svgs/Google_Play_Store_badge_IT.svg" alt="Disponibile su Google Play" height="40" /></a>
    </div>
</div>

<div grid="grid 12" class="u-px-space-24 u-mt-space-48">
    <div grid="grid vertical-center" class="u-bg-color-soft-100" style="border: 1px solid #D0D7DF">
        <div grid="2@md" class="u-p-space-16 u-text-center">
            <img src="../../images/svgs/p1.svg" alt="Parcheggio p1" width="70" />
        </div>
        <div grid="7@md" class="u-p-space-16" style="border-right: 1px solid #D0D7DF; border-left: 1px solid #D0D7DF">
            <div>
                <span class="c-rounded-label c-rounded-label--positive" aria-label="">

                    Pagato
                </span> <span class="c-rounded-label c-rounded-label--grey" aria-label="">

                    CODICE <strong>1102935</strong>
                </span>
            </div>
            <div class="u-d--f u-my-space-16">
                <div class="u-pr-space-12">
                    <div class="c-time-detail c-time-detail--raw">
                        <span class="c-time-detail__icon">
                            <svg class="c-icon">
                                <use xlink:href="#ic_drive_eta_black_24px"></use>
                            </svg> </span>
                        <span>
                            <strong>Entrata</strong>
                            <time datetime=2023/07/10>
                                10/07/2023
                            </time>
                        </span>
                        <span>
                            <strong>Ore</strong>
                            <time>20:30</time>
                        </span>
                    </div>
                </div>
                <div class="u-pl-space-12">
                    <div class="c-time-detail c-time-detail--raw">
                        <span class="c-time-detail__icon">
                            <svg class="c-icon">
                                <use xlink:href="#uscita-parcheggio-24px"></use>
                            </svg> </span>
                        <span>
                            <strong>Uscita</strong>
                            <time datetime=2023/07/20>
                                20/07/2023
                            </time>
                        </span>
                        <span>
                            <strong>Ore</strong>
                            <time>20:30</time>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div grid="3@md" class="u-p-space-16 u-text-center">
            <p class="u-typo-level-0">TOTALE SOSTA</p>
            <p class="u-typo-level-2 u-line-through">€ 84,00</p>
            <p class="u-typo-level-4"><strong>€ 61,00</strong></p>
            <p class="u-typo-level-1">Tariffa weekend</p>
        </div>
    </div>
</div>

<div grid="grid vertical-center" class="u-px-space-24 u-mt-space-48">
    <div grid="12">
        <h2 class="u-typo-level-4 u-color-night-100 u-typo-weight-semibold">
            Come accedere al parcheggio
        </h2>
    </div>
</div>

<div grid="grid vertical-center" class="u-px-space-24 u-mt-space-28">
    <div grid="4">
        <img src="../../images/svgs/parcheggio-step1.svg" alt="Entrata parcheggio" />
    </div>
    <div grid="8" class="u-p-space-16">
        <h3 class="u-typo-level-2 u-typo-weight-bold u-color-night-100">1) PRESENTATI ALL'ENTRATA DEL PARCHEGGIO</h3>
        <p class="u-color-night-100">Avvicinati con il QR Code della prenotazione sul tuo smartphone oppure sulla stampa della conferma prenotazione.</p>
    </div>
    <div grid="4">
        <img src="../../images/svgs/parcheggio-step2.svg" alt="Posiziona il QR Code" />
    </div>
    <div grid="8" class="u-p-space-16">
        <h3 class="u-typo-level-2 u-typo-weight-bold u-color-night-100">2) POSIZIONA IL QR CODE</h3>
        <p class="u-color-night-100">Posiziona il QR Code sotto il lettore della colonnina a circa 10cm di distanza e attendi fino a quando non viene letto per l'emissione automatica del biglietto.</p>
    </div>
    <div grid="4">
        <img src="../../images/svgs/parcheggio-step3.svg" alt="Ritira il biglietto" />
    </div>
    <div grid="8" class="u-p-space-16">
        <h3 class="u-typo-level-2 u-typo-weight-bold u-color-night-100">3) RITIRA IL BIGLIETTO DEL PARCHEGGIO</h3>
        <p class="u-color-night-100">Ritira il biglietto e attendi l'apertura della sbarra.</p>
    </div>
</div>

<div grid="grid" class="u-px-space-24 u-mt-space-80">
    <div grid="12">
        <div class="c-suggestion c-suggestion--simple c-suggestion--tutorial-roommate">

            <img src="../../images/svgs/qr-code-example.svg" alt="" aria-hidden="true">

            <div class="c-suggestion__text">
                <strong>Il QR code non viene letto oppure non hai il QR code con te?</strong>
                <p>Potrai contattare la nostra assistenza (h.24), premendo, sulla colonnina di entrata del parcheggio, il tasto con il simbolo della cornetta telefonica.</p>
            </div>

        </div>
    </div>
</div>

<div grid="grid vertical-center" class="u-px-space-24 u-mt-space-48">
    <div grid="12">
        <h2 class="u-typo-level-4 u-color-night-100 u-typo-weight-semibold">
            Avvisi importanti
        </h2>
    </div>
</div>

<div grid="grid" class="u-p-space-24 u-mt-space-12">
    <div grid="12">
        <div class="c-warnings ">

            <div class="c-warnings__items">
                <div class="c-warnings__item">
                    <div class="c-media o-media c-media--warning">
                        <img class="c-media__figure o-media__figure" src="../../images/svgs/telepass.svg" alt="Telepass" height="" width="110">
                        <div class="c-media__body o-media__body">
                            <strong>Attenzione se hai un Telepass</strong><br>Se hai un Telepass a bordo non utilizzare il varco dedicato, oppure, assicurati di oscurare il tuo dispositivo per non farlo leggere all’ingresso. In caso di utilizzo del dispositivo Telepass, la prenotazione che hai appena fatto non potrà essere riconosciuta e verrà applicata la tariffa ordinaria.<br><a href="#">Leggi di più</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>


        <div grid="grid" class="u-p-space-24 u-bg-color-sky-10">
  <div grid="12" class="u-text-center">
    <a href="#">{{ render "@logo" }}</a>
    <a href="#" class="u-ml-space-16">{{ render "@logo--innovability" }}</a>
  </div>
</div>

<div grid="grid" class="u-p-space-24">
  <div grid="12">
    <h1 class="u-text-center u-typo-level-4 u-color-night-100 u-typo-weight-semibold">
      Questo è il tuo QR code per accedere all’ingresso
    </h1>
  </div>
  <div grid="12" class="u-text-center u-mt-space-36">
    <img src="{{ path "/images/qrcode.jpg" }}" alt="QR code" width="200" />
  </div>
  <div grid="12" class="u-text-center">
    <p><strong>Porta con te questo QR code!</strong></p>
    <p class="u-mt-space-8">Stampa questa pagina o <strong>scarica la nostra app</strong> per utilizzare il QR Code dal tuo smartphone</p>
  </div>
</div>

<div grid="grid" class="u-px-space-24">
  <div grid="12" class="u-text-center">
    <a href="#"><img src="{{ path "/images/svgs/badge_appstore_it.svg" }}" alt="Scarica su App Store" height="40" /></a>
    <a href="#" class="u-ml-space-16"><img src="{{ path "/images/svgs/Google_Play_Store_badge_IT.svg" }}" alt="Disponibile su Google Play" height="40" /></a>
  </div>
</div>

{{!-- Parking item --}}
<div grid="grid 12" class="u-px-space-24 u-mt-space-48">
  <div grid="grid vertical-center" class="u-bg-color-soft-100" style="border: 1px solid #D0D7DF">
    <div grid="2@md" class="u-p-space-16 u-text-center">
      <img src="{{ path "/images/svgs/p1.svg" }}" alt="Parcheggio p1" width="70" />
    </div>
    <div grid="7@md" class="u-p-space-16" style="border-right: 1px solid #D0D7DF; border-left: 1px solid #D0D7DF">
      <div>
        {{> @rounded-label parking-status-label }}
        {{> @rounded-label parking-code-label }}
      </div>
      <div class="u-d--f u-my-space-16">
        <div class="u-pr-space-12">{{> @time-detail parking-entrance-time }}</div>
        <div class="u-pl-space-12">{{> @time-detail parking-exit-time }}</div>
      </div>
    </div>
    <div grid="3@md" class="u-p-space-16 u-text-center">
      <p class="u-typo-level-0">TOTALE SOSTA</p>
      <p class="u-typo-level-2 u-line-through">€ 84,00</p>
      <p class="u-typo-level-4"><strong>€ 61,00</strong></p>
      <p class="u-typo-level-1">Tariffa weekend</p>
    </div>
  </div>
</div>
{{!-- End parking item --}}

{{!-- Parking instructions title --}}
<div grid="grid vertical-center" class="u-px-space-24 u-mt-space-48">
  <div grid="12">
    <h2 class="u-typo-level-4 u-color-night-100 u-typo-weight-semibold">
      Come accedere al parcheggio
    </h2>
  </div>
</div>
{{!-- End parking instructions title --}}

{{!-- Parking instructions --}}
<div grid="grid vertical-center" class="u-px-space-24 u-mt-space-28">
  {{!-- Item --}}
  <div grid="4">
    <img src="{{ path "/images/svgs/parcheggio-step1.svg" }}" alt="Entrata parcheggio" />
  </div>
  <div grid="8" class="u-p-space-16">
    <h3 class="u-typo-level-2 u-typo-weight-bold u-color-night-100">1) PRESENTATI ALL'ENTRATA DEL PARCHEGGIO</h3>
    <p class="u-color-night-100">Avvicinati con il QR Code della prenotazione sul tuo smartphone oppure sulla stampa della conferma prenotazione.</p>
  </div>
  {{!-- /Item --}}
  {{!-- Item --}}
  <div grid="4">
    <img src="{{ path "/images/svgs/parcheggio-step2.svg" }}" alt="Posiziona il QR Code" />
  </div>
  <div grid="8" class="u-p-space-16">
    <h3 class="u-typo-level-2 u-typo-weight-bold u-color-night-100">2) POSIZIONA IL QR CODE</h3>
    <p class="u-color-night-100">Posiziona il QR Code sotto il lettore della colonnina a circa 10cm di distanza e attendi fino a quando non viene letto per l'emissione automatica del biglietto.</p>
  </div>
  {{!-- /Item --}}
  {{!-- Item --}}
  <div grid="4">
    <img src="{{ path "/images/svgs/parcheggio-step3.svg" }}" alt="Ritira il biglietto" />
  </div>
  <div grid="8" class="u-p-space-16">
    <h3 class="u-typo-level-2 u-typo-weight-bold u-color-night-100">3) RITIRA IL BIGLIETTO DEL PARCHEGGIO</h3>
    <p class="u-color-night-100">Ritira il biglietto e attendi l'apertura della sbarra.</p>
  </div>
  {{!-- /Item --}}
</div>
{{!-- End parking instructions --}}

<div grid="grid" class="u-px-space-24 u-mt-space-80">
  <div grid="12">
    {{> @suggestion--simple suggestion-qrcode }}
  </div>
</div>

<div grid="grid vertical-center" class="u-px-space-24 u-mt-space-48">
  <div grid="12">
    <h2 class="u-typo-level-4 u-color-night-100 u-typo-weight-semibold">
      Avvisi importanti
    </h2>
  </div>
</div>

<div grid="grid" class="u-p-space-24 u-mt-space-12">
  <div grid="12">
    {{> @warnings warnings }}
  </div>
</div>


        
            
            {
  "parking-status-label": {
    "text": "Pagato",
    "modifier": "c-rounded-label--positive"
  },
  "parking-code-label": {
    "text": "CODICE <strong>1102935</strong>",
    "modifier": "c-rounded-label--grey"
  },
  "parking-entrance-time": {
    "modifier": "c-time-detail--raw",
    "time-detail-icon": {
      "symbol": "ic_drive_eta_black_24px",
      "class": "c-icon"
    },
    "datetime-label": "Entrata",
    "datetime-day": "10",
    "datetime-month": "07",
    "datetime-year": "2023",
    "time-label": "Ore",
    "time-text": "20:30"
  },
  "parking-exit-time": {
    "modifier": "c-time-detail--raw",
    "time-detail-icon": {
      "symbol": "uscita-parcheggio-24px",
      "class": "c-icon"
    },
    "datetime-label": "Uscita",
    "datetime-day": "20",
    "datetime-month": "07",
    "datetime-year": "2023",
    "time-label": "Ore",
    "time-text": "20:30"
  },
  "suggestion-qrcode": {
    "modifier": "c-suggestion--tutorial-roommate",
    "hasImage": true,
    "img-src": "/images/svgs/qr-code-example.svg",
    "text": "<strong>Il QR code non viene letto oppure non hai il QR code con te?</strong><p>Potrai contattare la nostra assistenza (h.24), premendo, sulla colonnina di entrata del parcheggio, il tasto con il simbolo della cornetta telefonica.</p>"
  },
  "warnings": {
    "warnings": [
      {
        "modifier": "c-media--warning",
        "img-src": "/images/svgs/telepass.svg",
        "img-alt": "Telepass",
        "img-width": "110",
        "body": "<strong>Attenzione se hai un Telepass</strong><br>Se hai un Telepass a bordo non utilizzare il varco dedicato, oppure, assicurati di oscurare il tuo dispositivo per non farlo leggere all’ingresso. In caso di utilizzo del dispositivo Telepass, la prenotazione che hai appena fatto non potrà essere riconosciuta e verrà applicata la tariffa ordinaria.<br><a href=\"#\">Leggi di più</a>"
      }
    ]
  }
}

Handle: @page-parking-confirm-pdf
Preview:
- With layout
- Component only
Filesystem Path: src/views/05-pages/22-page-parking-confirm-pdf/page-parking-confirm-pdf.hbs
References (6): @logo, @logo--innovability, @rounded-label, @time-detail, @suggestion--simple, @warnings

No notes defined.