templates/pdf/property.html.twig line 1

Open in your IDE?
  1. <div class="container">
  2.     <style>
  3.         hr {
  4.             color: rgb(206, 34, 72);
  5.         }
  7.         div {
  8.             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  9.         }
  11.         /* Container */
  12.         .container {
  13.             width: 100%;
  14.             padding-right: 15px;
  15.             padding-left: 15px;
  16.             margin-right: auto;
  17.             margin-left: auto;
  18.         }
  20.         /* Font weight bold */
  21.         .font-weight-bold {
  22.             font-weight: 700;
  23.         }
  25.         /* Display inline block */
  26.         .d-inline-block {
  27.             display: inline-block;
  28.         }
  30.         /* Align text top */
  31.         .align-text-top {
  32.             vertical-align: text-top;
  33.         }
  35.         /* Margin bottom */
  36.         .mb-4 {
  37.             margin-bottom: 1.5rem;
  38.         }
  40.         /* Justify content between */
  41.         .d-flex {
  42.             display: flex;
  43.         }
  45.         .justify-content-between {
  46.             justify-content: center;
  47.         }
  49.         .align-items-center {
  50.             align-items: center;
  51.         }
  53.         /* Badge */
  54.         .badge {
  55.             display: inline-block;
  56.             padding: 0.25em 0.4em;
  57.             font-size: 75%;
  58.             text-align: center;
  59.             white-space: nowrap;
  60.             border-radius: 0.25rem;
  61.         }
  63.         .badge.bg-coupdocoeur {
  64.             background-color: #191f39;
  65.             color: white;
  66.         }
  68.         .badge.rounded-pill {
  69.             border-radius: 30rem;
  70.         }
  72.         /* Card title */
  73.         .card-title {
  74.             margin-bottom: 0.75rem;
  75.         }
  77.         /* Modal body */
  78.         .modal-body {
  79.             position: relative;
  80.             flex: 1 1 auto;
  81.             padding: 1rem;
  82.         margin-bottom: 20px;
  83.         }
  85.         /* Border */
  86.         .border {
  87.             border: 1px solid #dee2e6 !important;
  88.         }
  90.         /* Padding */
  91.         .p-3 {
  92.             padding: 1rem !important;
  93.         }
  95.         /* Modal footer */
  96.         .modal-footer {
  97.             display: flex;
  98.             flex-wrap: wrap;
  99.             align-items: center;
  100.             justify-content: left;
  101.             padding: 0.75rem;
  102.             border-top: 1px solid #dee2e6;
  103.         }
  105.         /* Text danger */
  106.         .text-danger {
  107.             color: #dc3545 !important;
  108.             padding-left: 35px;
  109.         }
  111.         /* Width 100 */
  112.         .w-100 {
  113.             width: 67% !important;
  114.             border-radius: 64px;
  115.             padding: 2.25rem;
  116.         }
  118.         .card {
  119.             position: relative;
  120.             display: flex;
  121.             flex-direction: column;
  122.             min-width: 0;
  123.             word-wrap: break-word;
  124.             background-color: #fff;
  125.             background-clip: border-box;
  126.             border: 1px solid rgb(255, 255, 255);
  127.             border-radius: 0.25rem;
  128.         }
  130.         @media (min-width: 576px) {
  131.             .modal-dialog {
  132.                 max-width: 75em;
  133.                 margin: 1.75rem auto;
  134.             }
  135.         }
  137.         .bg-coupdocoeur {
  138.             background-color: #191f39;
  139.             font-size: 16px;
  140.             color: white;
  141.             font-weight: normal;
  142.         }
  144.         .vertical-table {
  145.             display: flex;
  146.             flex-direction: column;
  147.             width: 100%;
  148.         }
  150.         .property-item {
  151.             margin-bottom: 1rem;
  152.             font-size: 20px;
  153.         }
  155.         .property-label {
  156.             font-weight: bold;
  157.             margin-right: 0.5rem;
  158.             background-color: #f8d7da;
  159.             border-color: #f5c6cb;
  160.             color: black;
  161.             padding: 0.75rem;
  162.         }
  164.         .property-value {
  165.             margin-left: 10px;
  166.         }
  167. img{
  170.     width:100%:
  171.     height:100%
  173. }
  174. footer{
  176. font-size:10px;
  177. }
  179.     </style>
  180.     <div>
  181.         <div>
  182.             <img src="data:image/jpeg;base64,{{ imageBase64 }}" alt="CoupdcoeurimmoLogo" width="120" height="120" class="d-inline-block align-text-top">
  183.         </div>
  185.         <hr>
  187.         <h1 class="font-weight-bold text-danger" id="title">{{ property.title|raw }}</h1>
  189.         <div>
  190.             <div id="image">
  192.                     <img src="data:image/jpeg;base64,{{ encodedImage }}" alt="Property Image" width="300" height="200">
  194.             </div>
  195.             <div class="card-body" id="tableau">
  196.                 <h2 class="card-title mb-4 font-weight-bold">Caractéristiques</h2>
  198.                 <div class="vertical-table">
  199.                     <div class="property-item">
  200.                         <div class="property-label">Nombre de pièces : {{ property.roomNumber }}</div>
  201.                     </div>
  202.                     <div class="property-item">
  203.                         <div class="property-value">Ce bien dispose d'un jardin : {{ property.garden ? 'Oui' : 'Non' }}</div>
  204.                     </div>
  205.                     <div class="property-item">
  206.                         <div class="property-label">Type du logement : {{ property.housingType.name }}</div>
  207.                     </div>
  208.                     <div class="property-item">
  209.                         <div class="property-value">Surface : {{ property.harea }} m²</div>
  210.                     </div>
  211.                     <div class="property-item">
  212.                         <div class="property-label">Type de transaction : {{ property.category.name }}</div>
  213.                     </div>
  214.                     <div class="property-item">
  215.                         <div class="property-value">Chauffage : {{ property.heating }}</div>
  216.                     </div>
  217.                     <div class="property-item">
  218.                         <div class="property-label">Année de construction : {{ property.yearBuilt|date('Y') }}</div>
  219.                     </div>
  220.                     <div class="property-item">
  221.                         <div class="property-value">Catégorie : {{ property.category.name }}</div>
  222.                     </div>
  223.                 </div>
  224.             </div>
  225.         </div>
  226.     </div>
  228.     <div class="modal-body">
  229.         <div class="border p-3">
  230.             <h2 class="font-weight-bold">Description</h2>
  231.             <p class="card-text">{{ property.content|raw }}</p>
  232.         </div>
  233.         <div class="border p-3">
  234.             <h2 class="font-weight-bold">Catégorie</h2>
  235.             <p>{{ property.category.name }}</p>
  236.         </div>
  237.         <div class="border p-3">
  238.             <h2 class="font-weight-bold">Date d'ajout</h2>
  239.             <p>{{ property.createdAt|date("d/m/Y") }}</p>
  240.         </div>
  241.     </div>
  242. </div>
  243. <footer> Pour plus d'info voir sur <strong>www.coupdcoeurimmo.fr</strong></footer>