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: 2778px;
  30.                 width:  1985px;
  31.                 margin: 0;
  32.             }
  33.             /* fill half the height with each face */
  34.             .face {
  35.                 height: 2778px;
  36.                 width:  1985px;
  37.                 position: relative;
  38.             }
  40.             /* background image of card */
  41.             .face-bg {
  42.                 background-size:  1985px 2778px;
  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: 7%;
  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: 82%;
  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: 5em;
  116.                 font-weight: 300;
  117.                 font-family: "Montserrat", sans-serif;
  118.                 margin: 10px 0;
  120.             }
  121.             .title2 p {
  122.                 font-size: 4.2em;
  123.                 font-weight: 600;
  124.                 font-family: "Montserrat", sans-serif;
  125.                 margin: 10px 0px;
  126.             }
  127.             .code {
  128.                 position: absolute;
  129.                 left: 82%;
  130.                 top: 52%;
  131.             }
  132.             body .code p {
  133.                 margin: 0 65px;
  134.                 color: #b08a89;
  135.                 font-size: 3em !important;
  137.                 margin: 0 45px;
  139.                 font-weight: 300;
  140.                 font-family: "Montserrat", sans-serif;
  141.                 transform: rotate(-0.25turn);
  142.             }
  145.             input#div2{
  146.                 bottom:150px;
  147.                 position: fixed;
  148.                 right: 50px;
  149.                 border-radius: 24px;
  150.                 font-size: 30px;
  151.                 border: none;
  152.                 outline: none;
  153.                 white-space: nowrap;
  154.                 background: #6554C0;
  155.                 padding: 15px 50px;
  156.                 transition: all 0.8s ease-in-out 0s;
  157.                 display: inline-flex;
  158.                 -webkit-box-align: center;
  159.                 align-items: center;
  160.                 overflow: hidden;
  161.                 border: 0;
  162.                 color: #fff;
  163.                 text-align: center;
  164.                 border: 2px solid #fff;
  165.                 cursor: pointer;
  166.             }
  167.             input:hover{
  168.                 background: #fff;
  169.                 color: var(--ds-background-discovery-bold,#6554C0);
  170.                 border: 2px solid #6554C0;
  171.             }
  172.         </style>
  173.     </head>
  175.     <body>
  176.         <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')}});">
  177.             <div  class="txt-content">
  178.                 <div class="title1" style="{% if user.name|length  < 26 %}bottom: 14%;{% elseif user.name|length  < 30 %}bottom: 11%;{% endif %}{% if user.equipe.badge == 'Blanc' or user.equipe.badge == 'GRAY' %} color: #152032;{% endif %}">
  179.                     <h1>
  180.                         {{ user.name }}
  181.                     </h1>
  182.                 </div>
  183.                 <div style="{% if user.title|length  > 33 or user.organization|length > 33 %}bottom: 3.5%;{% endif %} {% if user.equipe.badge == 'Blanc' or user.equipe.badge == 'GRAY' %} color: #152032;{% endif %}" class="title2">
  184.                     <h2>
  185.                         {{ user.title }} 
  186.                     </h2>
  187.                     <p>
  188.                         {{ user.organization }} 
  189.                     </p>
  190.                 </div>
  191.             </div>
  193.             <div  class="qr-code">
  194.                 <div id="badge"></div>
  195.             </div>
  196.             <div class="code">
  197.                 <p>
  198.                     {{ user.reference }}
  199.                 </p>
  200.             </div>
  201.         </div> 
  202.         <input style="margin-top: 150px;font-size: 10em;
  203.                width: 75%;
  204.                height: 10%;" type="button" onclick="printDiv2('printableArea')" value="Download BADGE" id="div1" />
  206.     </body>
  207.     <script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
  208.     <script>
  209.                    jQuery(function () {
  210.                        jQuery('#badge').qrcode({
  211.                            // render method: 'canvas', 'image' or 'div'
  212.                            render: 'canvas',
  214.                            // version range somewhere in 1 .. 40
  215.                            minVersion: 2,
  216.                            maxVersion: 40,
  218.                            // error correction level: 'L', 'M', 'Q' or 'H'
  219.                            ecLevel: 'M',
  221.                            // offset in pixel if drawn onto existing canvas
  222.                            left: 0,
  223.                            top: 0,
  225.                            // size in pixel
  226.                            size: 270,
  228.                            // code color or image element
  229.                            fill: '{% if user.equipe.badge == "Blanc" or user.equipe.badge == 'GRAY' %}#152032{% else %}#fff{% endif %}',
  231.                            // background color or image element, null for transparent background
  232.                            background: null,
  234.                            // content
  235.                            text: '{{user.reference}}',
  237.                            // corner radius relative to module width: 0.0 .. 0.5
  238.                            radius: 0.7,
  240.                            // quiet zone in modules
  241.                            quiet: 1,
  243.                            // modes
  244.                            // 0: normal
  245.                            // 1: label strip
  246.                            // 2: label box
  247.                            // 3: image strip
  248.                            // 4: image box
  249.                            mode: 0,
  251.                            mSize: 0.1,
  252.                            mPosX: 0.5,
  253.                            mPosY: 0.5,
  255.                            label: 'no label',
  256.                            fontname: 'Montserrat',
  257.                            fontcolor: '#000',
  259.                            image: null
  260.                        });
  261.                    });
  262.                    function printDiv2(divName) {
  263.                        html2canvas(document.querySelector("#printableArea")).then(canvas => {
  264.                            let imgName = $('#printableArea').data('name');
  265.                            document.body.appendChild(canvas);
  266.                            const link = document.createElement('a');
  267.                            link.download = imgName;
  268.                            link.href = canvas.toDataURL();
  269.                            link.click();
  270.                            link.delete;
  271.                        });
  273.                    }
  274.     </script>
  275. </html>