templates/card/showCardA6.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>Badge - {{ user.reference }} </title>
  6.         <meta name="viewport" content="width=device-width, initial-scale=1">
  7.         {#        <link href="{{ asset('qrcode/styles.css')}}" rel="stylesheet">#}
  8.         <link rel="preconnect" href="https://fonts.googleapis.com">
  9.         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  10.         <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
  11.         <script src="{{ asset('qrcode/jquery.min.js') }}"></script>
  12.         <script src="{{ asset('qrcode/jquery-qrcode-0.18.0.js')}}"></script>
  13.         {#        <script src="{{ asset('qrcode/scripts.js')}}"></script>#}
  14.         <style>
  15.             @page {
  16.                 /* dimensions for the whole page */
  17.                 size: A5;
  19.                 margin: 0;
  20.             }
  22.             html {
  23.                 /* off-Blanc, so body edge is visible in browser */
  24.                 background: #eee;
  25.             }
  27.             body {
  28.                 /* 9X14 dimensions */
  29.                 height: 2590px;
  30.                 width:  1740px;
  31.                 margin: 0;
  32.             }
  33.             /* fill half the height with each face */
  34.             .face {
  35.                 height: 2590px;
  36.                 width:  1740px;
  37.                 position: relative;
  38.             }
  40.             /* background image of card */
  41.             .face-bg {
  42.                 background-size:  1740px 2590px;
  43.                 background-position: center;
  44.                 background-repeat: no-repeat;
  45.                 position: relative;
  46.             }
  48.             /* the back face */
  49.             .face-back {
  50.                 background: #f6f6f6;
  51.             }
  53.             /* the front face */
  54.             .face-front {
  55.                 background: #fff;
  56.             }
  58.             /* an image that fills the whole of the front face */
  59.             .face-front img {
  60.                 position: absolute;
  61.                 top: 0;
  62.                 left: 0;
  63.                 bottom: 0;
  64.                 right: 0;
  65.                 width: 100%;
  66.                 height: 100%;
  67.             }
  69.             .date{
  70.                 position: absolute;
  71.                 top: 70px;
  72.                 right: 10px;
  73.                 transform: rotate(-90deg);
  74.             }
  75.             .qr-code {
  76.                 position: absolute;
  77.                 overflow: hidden;
  78.                 bottom: 6%;
  79.                 right: 6%;
  80.                 border-radius: 5px;
  81.                 padding: 2px;
  82.                 border: 2px solid {% if user.equipe.badge == "Blanc" or user.equipe.badge == 'GRAY' %}#152032{% else %}#ffffffa1{% endif %};
  83.             }
  84.             .qr-code img{
  85.                 height: auto;
  86.                 width: 100%;
  87.             }
  88.             .txt-content {
  89.                 width: 75%;
  90.                 color: #ffffff;
  91.                 text-align: left;
  92.                 padding: 0 4%;
  93.                 top: 81%;
  94.                 position: absolute;
  95.             }
  96.             .title1 {
  97.                 width: 100%;
  98.                 color: #ffffff;
  99.                 text-align: left;
  100.             }
  101.             .title2 {
  102.                 width: 100%;
  103.                 text-align: left;
  104.                 color: #ffffff;
  105.             }
  106.             .title1 h1 {
  107.                 margin: 10px 0;
  108.                 font-size: 5.7em;
  109.                 font-weight: 500;
  110.                 LINE-HEIGHT: 1em;
  111.                 font-family: "Montserrat", sans-serif;
  112.             }
  113.             {#            {% if user.firstname|lenght%}#}
  114.             .title2 h2{
  115.                 font-size: 3.2em;
  116.                 font-weight: 300;
  117.                 font-family: "Montserrat", sans-serif;
  118.                 margin: 10px 0;
  120.             }
  121.             .title2 p {
  122.                 font-size: 4em;
  123.                 font-family: "Montserrat", sans-serif;
  124.                 margin: 10px 0px;
  125.             }
  126.             .code {
  127.                 position: absolute;
  128.                 left: 82%;
  129.                 top: 52%;
  130.             }
  131.             body .code p {
  132.                 margin: 0 65px;
  133.                 color: #b08a89;
  134.                 font-size: 3em !important;
  136.                 margin: 0 45px;
  138.                 font-weight: 300;
  139.                 font-family: "Montserrat", sans-serif;
  140.                 transform: rotate(-0.25turn);
  141.             }
  144.             input#div2{
  145.                 bottom:150px;
  146.                 position: fixed;
  147.                 right: 50px;
  148.                 border-radius: 24px;
  149.                 font-size: 30px;
  150.                 border: none;
  151.                 outline: none;
  152.                 white-space: nowrap;
  153.                 background: #6554C0;
  154.                 padding: 15px 50px;
  155.                 transition: all 0.8s ease-in-out 0s;
  156.                 display: inline-flex;
  157.                 -webkit-box-align: center;
  158.                 align-items: center;
  159.                 overflow: hidden;
  160.                 border: 0;
  161.                 color: #fff;
  162.                 text-align: center;
  163.                 border: 2px solid #fff;
  164.                 cursor: pointer;
  165.             }
  166.             input:hover{
  167.                 background: #fff;
  168.                 color: var(--ds-background-discovery-bold,#6554C0);
  169.                 border: 2px solid #6554C0;
  170.             }
  171.         </style>
  172.     </head>
  174.     <body>
  175.         <div ref='{{ user.reference }}'  id="printableArea" data-id="{{ user.reference }}" data-name="{{ user.reference }}.png" class="face face-bg" style="background-image: url({{asset('apm-26/'~user.equipe.badge~'.jpeg')}});">
  176.             <div style="{% if user.name|length  < 26 %}{% elseif user.title|length  > 41 %}top: 80%;{% endif %}"  class="txt-content">
  177.                 <div class="title1" style="{% if user.equipe.badge == 'Blanc' or user.equipe.badge == 'GRAY' %} color: #152032;{% endif %}">
  178.                     <h1>
  179.                         {{ user.name }}
  180.                     </h1>
  181.                 </div>
  182.                 <div style="{% if user.title|length  > 33 or user.organization|length > 33 %}{% endif %} {% if user.equipe.badge == 'Blanc' or user.equipe.badge == 'GRAY' %} color: #152032;{% endif %}" class="title2">
  183.                     <h2>
  184.                         {{ user.title }} 
  185.                     </h2>
  186.                     <p>
  187.                         {{ user.organization }} 
  188.                     </p>
  189.                 </div>
  190.             </div>
  192.             <div  class="qr-code">
  193.                 <div id="badge"></div>
  194.             </div>
  195.             <div class="code">
  196.                 <p>
  197.                     {{ user.reference }}
  198.                 </p>
  199.             </div>
  200.         </div> 
  201.         <input style="margin-top: 150px;font-size: 10em;
  202.                width: 75%;
  203.                height: 10%;" type="button" onclick="printDiv2('printableArea')" value="Download BADGE" id="div1" />
  205.     </body>
  206.     <script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
  207.     <script>
  208.                    jQuery(function () {
  209.                        jQuery('#badge').qrcode({
  210.                            // render method: 'canvas', 'image' or 'div'
  211.                            render: 'canvas',
  213.                            // version range somewhere in 1 .. 40
  214.                            minVersion: 2,
  215.                            maxVersion: 40,
  217.                            // error correction level: 'L', 'M', 'Q' or 'H'
  218.                            ecLevel: 'M',
  220.                            // offset in pixel if drawn onto existing canvas
  221.                            left: 0,
  222.                            top: 0,
  224.                            // size in pixel
  225.                            size: 270,
  227.                            // code color or image element
  228.                            fill: '{% if  user.equipe.badge == 'Blanc' or user.equipe.badge == 'Gris'   %}#152032{% else %}#fff{% endif %}',
  230.                            // background color or image element, null for transparent background
  231.                            background: null,
  233.                            // content
  234.                            text: '{{user.reference}}',
  236.                            // corner radius relative to module width: 0.0 .. 0.5
  237.                            radius: 0.5,
  239.                            // quiet zone in modules
  240.                            quiet: 1,
  242.                            // modes
  243.                            // 0: normal
  244.                            // 1: label strip
  245.                            // 2: label box
  246.                            // 3: image strip
  247.                            // 4: image box
  248.                            mode: 0,
  250.                            mSize: 0.1,
  251.                            mPosX: 0.5,
  252.                            mPosY: 0.5,
  254.                            label: 'no label',
  255.                            fontname: 'Montserrat',
  256.                            fontcolor: '#000',
  258.                            image: null
  259.                        });
  260.                    });
  261.                    function printDiv2(divName) {
  262.                        html2canvas(document.querySelector("#printableArea")).then(canvas => {
  263.                            let imgName = $('#printableArea').data('name');
  264.                            document.body.appendChild(canvas);
  265.                            const link = document.createElement('a');
  266.                            link.download = imgName;
  267.                            link.href = canvas.toDataURL();
  268.                            link.click();
  269.                            link.delete;
  270.                        });
  272.                    }
  273.     </script>
  274. </html>