Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- prin<html>
- <head>
- <style media="all">
- body {
- font-family: Arial, sans-serif;
- margin: 0;
- padding: 20px;
- background-color: white;
- margin-left: 150px;
- }
- .section {
- background-color: white;
- padding: 20px;
- margin-bottom: 20px;
- }
- .details-grid {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- gap: 20px;
- }
- .detail {
- padding: 10px 0;
- }
- .label {
- font-weight: bold;
- display: block;
- }
- .value {
- margin-top: 5px;
- }
- h2 {
- font-size: 18px;
- color: #333;
- padding-bottom: 10px;
- margin-top: 0;
- }
- @media screen and (max-width: 600px) {
- .details-grid {
- grid-template-columns: 1fr;
- gap: 10px;
- }
- }
- .table {
- border-collapse: collapse;
- width: 100%;
- }
- th,
- td {
- padding: 15px 4px 0px 50px;
- border-bottom: 1px solid gray;
- }
- tr,
- td:first-child {
- border-right: 1px solid gray;
- }
- .ratingComponent {
- margin: 20px;
- text-align: center;
- }
- .ratingComponent__heading {
- display: block;
- color: #666;
- margin-bottom: 5px;
- }
- .ratingComponent__rating {
- display: flex;
- flex-direction: row-reverse;
- align-items: center;
- align-content: center;
- justify-content: space-between;
- }
- .ratingComponent__dot {
- border: solid 2px #eb822f;
- width: 16px;
- height: 16px;
- border-radius: 50%;
- margin: 0 5px 0 0;
- }
- .ratingComponent__dot:first-of-type {
- margin: 0;
- }
- .ratingComponent__dot--filled {
- background-color: #eb822f;
- }
- .ratingComponent__dot--halfFilled {
- background-color: #eb822f;
- width: 7px;
- border-radius: 10px 0 0 10px;
- margin-right: 15px;
- }
- .ratingComponent__dot--halfFilled:after {
- content: "";
- display: block;
- position: relative;
- left: 7px;
- top: -2px;
- width: 8px;
- height: 16px;
- border-radius: 0 10px 10px 0;
- border: solid 2px #eb822f;
- }
- .ratingComponent__dot--unRated {
- background-color: transparent;
- border-color: #e0e0e0;
- cursor: pointer;
- transition: all 200ms ease-in-out;
- }
- .ratingComponent__dot--unRated:hover,
- .ratingComponent__dot--unRated:hover~.ratingComponent__dot,
- .ratingComponent__dot--unRated:focus,
- .ratingComponent__dot--unRated:focus~.ratingComponent__dot {
- border-color: #eb822f;
- background-color: #eb822f;
- }
- </style>
- </head>
- <body>
- <div style="text-align: center;">
- <div class="image">
- <img src="assets/images/brands_logo/logo_150.png" alt="img" width="150" />
- </div>
- </div>
- <div class="section">
- <h2>Customer details</h2>
- <div class="details-grid">
- <div class="detail">
- <span class="label">First name</span>
- <span class="value">###</span>
- </div>
- <div class="detail">
- <span class="label">Last name</span>
- <span class="value">###</span>
- </div>
- <div class="detail">
- <span class="label">Phone</span>
- <span class="value">###</span>
- </div>
- <div class="detail">
- <span class="label">Email</span>
- <span class="value">###</span>
- </div>
- <div class="detail">
- <span class="label">Regione</span>
- <span class="value">EUR</span>
- </div>
- <div class="detail">
- <span class="label">Market</span>
- <span class="value">PL</span>
- </div>
- <div class="detail">
- <span class="label">Importer</span>
- <span class="value"></span>
- </div>
- <div class="detail">
- <span class="label">Agent</span>
- <span class="value">2182320A</span>
- </div>
- <div class="detail">
- <span class="label">Dealer</span>
- <span class="value">2182320A</span>
- </div>
- </div>
- </div>
- <div class="section">
- <h2>Vehicle details</h2>
- <div class="details-grid">
- <div class="detail">
- <span class="label">Brand</span>
- <span class="value">b_DO</span>
- </div>
- <div class="detail">
- <span class="label">VIN</span>
- <span class="value">###</span>
- </div>
- <div class="detail">
- <span class="label">Model</span>
- <span class="value"></span>
- </div>
- </div>
- </div>
- <div class="section">
- <h2>Survey details</h2>
- <div class="details-grid">
- <div class="detail">
- <span class="label">Response channel</span>
- <span class="value">CAWI</span>
- </div>
- <div class="detail">
- <span class="label">Response date</span>
- <span class="value">2023-11-14 00:00:00</span>
- </div>
- <div class="detail">
- <span class="label">Event date</span>
- <span class="value">2023-10-30 00:00:00</span>
- </div>
- </div>
- </div>
- <div class="section">
- <h4 style="block-size: auto;">Domande / Risposte</h4>
- </div>
- <div>
- <table class="table">
- <tr>
- <td></td>
- <td><br />
- <br />
- <div class="ratingComponent">
- <!-- <small class="ratingComponent__heading"></small> -->
- <div class="ratingComponent__rating">
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- </div>
- </div>
- </td>
- </tr>
- <tr>
- <td>MCDZ-sales_s_Q1_s</td>
- <td><br />
- <br />
- <div class="ratingComponent">
- <!-- <small class="ratingComponent__heading"></small> -->
- <div class="ratingComponent__rating">10</div>
- </div>
- </td>
- </tr>
- <tr>
- <td>MCDZ-sales_nPS_Dealer</td>
- <td><br />
- <br />
- <div class="ratingComponent">
- <!-- <small class="ratingComponent__heading"></small> -->
- <div class="ratingComponent__rating">10</div>
- </div>
- </td>
- </tr>
- <tr>
- <td>MCDZ-sales_s_Q3_v</td>
- <td><br />
- <br />
- <div class="ratingComponent">
- <!-- <small class="ratingComponent__heading"></small> -->
- <div class="ratingComponent__rating">
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- </div>
- </div>
- </td>
- </tr>
- <tr>
- <td>MCDZ-sales_s_Q4_v</td>
- <td><br />
- <br />
- <div class="ratingComponent">
- <!-- <small class="ratingComponent__heading"></small> -->
- <div class="ratingComponent__rating">
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- </div>
- </div>
- </td>
- </tr>
- <tr>
- <td>MCDZ-sales_s_Q5_s</td>
- <td><br />
- <br />
- <div class="ratingComponent">
- <!-- <small class="ratingComponent__heading"></small> -->
- <div class="ratingComponent__rating">10</div>
- </div>
- </td>
- </tr>
- <tr>
- <td>MCDZ-sales_s_PR1a</td>
- <td><br />
- <br />
- <div class="ratingComponent">
- <!-- <small class="ratingComponent__heading"></small> -->
- <div class="ratingComponent__rating">10</div>
- </div>
- </td>
- </tr>
- <tr>
- <td>MCDZ-sales_s_Q6_s</td>
- <td><br />
- <br />
- <div class="ratingComponent">
- <!-- <small class="ratingComponent__heading"></small> -->
- <div class="ratingComponent__rating">10</div>
- </div>
- </td>
- </tr>
- <tr>
- <td>MCDZ-sales_s_Q7_s</td>
- <td><br />
- <br />
- <div class="ratingComponent">
- <!-- <small class="ratingComponent__heading"></small> -->
- <div class="ratingComponent__rating">10</div>
- </div>
- </td>
- </tr>
- <tr>
- <td>MCDZ-sales_s_PR3</td>
- <td><br />
- <br />
- <div class="ratingComponent">
- <!-- <small class="ratingComponent__heading"></small> -->
- <div class="ratingComponent__rating">10</div>
- </div>
- </td>
- </tr>
- <tr>
- <td>MCDZ-sales_s_Q10_s</td>
- <td><br />
- <br />
- <div class="ratingComponent">
- <!-- <small class="ratingComponent__heading"></small> -->
- <div class="ratingComponent__rating">10</div>
- </div>
- </td>
- </tr>
- <tr>
- <td>MCDZ-sales_s_PR2</td>
- <td><br />
- <br />
- <div class="ratingComponent">
- <!-- <small class="ratingComponent__heading"></small> -->
- <div class="ratingComponent__rating">
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- </div>
- </div>
- </td>
- </tr>
- <tr>
- <td>MCDZ-sales_s_PR2a</td>
- <td><br />
- <br />
- <div class="ratingComponent">
- <!-- <small class="ratingComponent__heading"></small> -->
- <div class="ratingComponent__rating">10</div>
- </div>
- </td>
- </tr>
- <tr>
- <td>MCDZ-sales_s_W1</td>
- <td><br />
- <br />
- <div class="ratingComponent">
- <!-- <small class="ratingComponent__heading"></small> -->
- <div class="ratingComponent__rating">
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- </div>
- </div>
- </td>
- </tr>
- <tr>
- <td>MCDZ-sales_s_Q11_s</td>
- <td><br />
- <br />
- <div class="ratingComponent">
- <!-- <small class="ratingComponent__heading"></small> -->
- <div class="ratingComponent__rating">10</div>
- </div>
- </td>
- </tr>
- <tr>
- <td>MCDZ-sales_s_D1a</td>
- <td><br />
- <br />
- <div class="ratingComponent">
- <!-- <small class="ratingComponent__heading"></small> -->
- <div class="ratingComponent__rating">10</div>
- </div>
- </td>
- </tr>
- <tr>
- <td>MCDZ-sales_s_D1b</td>
- <td><br />
- <br />
- <div class="ratingComponent">
- <!-- <small class="ratingComponent__heading"></small> -->
- <div class="ratingComponent__rating">10</div>
- </div>
- </td>
- </tr>
- <tr>
- <td>MCDZ-sales_s_D1c</td>
- <td><br />
- <br />
- <div class="ratingComponent">
- <!-- <small class="ratingComponent__heading"></small> -->
- <div class="ratingComponent__rating">10</div>
- </div>
- </td>
- </tr>
- <tr>
- <td>MCDZ-sales_s_R1</td>
- <td><br />
- <br />
- <div class="ratingComponent">
- <!-- <small class="ratingComponent__heading"></small> -->
- <div class="ratingComponent__rating">
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- </div>
- </div>
- </td>
- </tr>
- <tr>
- <td>MCDZ-sales_s_Q13_s</td>
- <td><br />
- <br />
- <div class="ratingComponent">
- <!-- <small class="ratingComponent__heading"></small> -->
- <div class="ratingComponent__rating">10</div>
- </div>
- </td>
- </tr>
- <tr>
- <td>MCDZ-sales_s_O2b</td>
- <td><br />
- <br />
- <div class="ratingComponent">
- <!-- <small class="ratingComponent__heading"></small> -->
- <div class="ratingComponent__rating">
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- </div>
- </div>
- </td>
- </tr>
- <tr>
- <td>MCDZ-sales_s_Q15_m</td>
- <td><br />
- <br />
- <div class="ratingComponent">
- <!-- <small class="ratingComponent__heading"></small> -->
- <div class="ratingComponent__rating">
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- </div>
- </div>
- </td>
- </tr>
- <tr>
- <td>MCDZ-sales_s_DP3</td>
- <td><br />
- <br />
- <div class="ratingComponent">
- <!-- <small class="ratingComponent__heading"></small> -->
- <div class="ratingComponent__rating">
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- </div>
- </div>
- </td>
- </tr>
- <tr>
- <td>MCDZ-sales_s_Q16_m</td>
- <td><br />
- <br />
- <div class="ratingComponent">
- <!-- <small class="ratingComponent__heading"></small> -->
- <div class="ratingComponent__rating">
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- <div tabindex="" class="ratingComponent__dot ratingComponent__dot--unRated"></div>
- </div>
- </div>
- </td>
- </tr>
- </table>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment