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-WHITE, 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 == "WHITE" or user.equipe.badge == 'GRAY' %}#152032{% else %}#ffffffa1{% endif %};
  83.             }
  84.             .qr-code img{
  85.                 height: auto;
  86.                 width: 100%;
  87.             }
  88.             .title1 {
  89.                 position: absolute;
  90.                 bottom: 10%;
  91.                 width: 100%;
  92.                 color: #ffffff;
  93.                 text-align: center;
  94.             }
  95.             .title2 {
  96.                 position: absolute;
  97.                 bottom: 2.5%;
  98.                 width: 100%;
  99.                 text-align: CENTER;
  100.                 color: #ffffff;
  101.             }
  102.             .title1 h1 {
  103.                 margin: 0;
  104.                 font-size: 5.7em;
  105.                 font-weight: 500;
  106.                 LINE-HEIGHT: 1em;
  107.                 font-family: "Montserrat", sans-serif;
  108.                 padding: 0 8.8%;
  109.             }
  110.             {#            {% if user.firstname|lenght%}#}
  111.             .title2 h2{
  112.                 margin: 3px 4% 3px 6.2%;
  113.                 bottom: 6%;
  114.                 font-size: 5.2em;
  115.                 font-weight: 300;
  116.                 font-family: "Montserrat", sans-serif;
  118.             }
  119.             .title2 p {
  120.                 margin: 3px 4% 3px 6.2%;
  121.                 font-size: 4.2em;
  122.                 font-weight: 600;
  123.                 font-family: "Montserrat", sans-serif;
  124.             }
  125.             .code {
  126.                 position: absolute;
  127.                 left: 82%;
  128.                 top: 58%;
  129.             }
  130.             body .code p {
  131.                 margin: 0 65px;
  132.                 color: #b08a89;
  133.                 font-size: 3em !important;
  135.                 margin: 0 45px;
  137.                 font-weight: 300;
  138.                 font-family: "Montserrat", sans-serif;
  139.                 transform: rotate(-0.25turn);
  140.             }
  143.             input#div2{
  144.                 bottom:150px;
  145.                 position: fixed;
  146.                 right: 50px;
  147.                 border-radius: 24px;
  148.                 font-size: 30px;
  149.                 border: none;
  150.                 outline: none;
  151.                 white-space: nowrap;
  152.                 background: #6554C0;
  153.                 padding: 15px 50px;
  154.                 transition: all 0.8s ease-in-out 0s;
  155.                 display: inline-flex;
  156.                 -webkit-box-align: center;
  157.                 align-items: center;
  158.                 overflow: hidden;
  159.                 border: 0;
  160.                 color: #fff;
  161.                 text-align: center;
  162.                 border: 2px solid #fff;
  163.                 cursor: pointer;
  164.             }
  165.             input:hover{
  166.                 background: #fff;
  167.                 color: var(--ds-background-discovery-bold,#6554C0);
  168.                 border: 2px solid #6554C0;
  169.             }
  170.         </style>
  171.     </head>
  173.     <body>
  174.         <div ref='{{ user.reference }}'  id="printableArea" data-id="{{ user.reference }}" data-name="{{ user.reference }}.png" class="face face-bg" style="background-image: url({{asset('senat26/'~user.equipe.badge~'.jpeg')}});">
  175.             <div class="title1" style="{% if user.name|length  < 26 %}bottom: 15%;{% elseif user.name|length  < 30 %}bottom: 11%;{% endif %}{% if user.equipe.badge == 'WHITE' or user.equipe.badge == 'GRAY' %} color: #152032;{% endif %}">
  176.                 <h1>
  177.                     {{ user.name }}
  178.                 </h1>
  179.             </div>
  180.             <div style="{% if user.title|length  > 33 or user.organization|length > 33 %}bottom: 3.5%;{% endif %} {% if user.equipe.badge == 'WHITE' or user.equipe.badge == 'GRAY' %} color: #152032;{% endif %}" class="title2">
  181.                 <h2>
  182.                     {{ user.title }} 
  183.                 </h2>
  184.                 <p>
  185.                     {{ user.organization }} 
  186.                 </p>
  187.             </div>
  189.             {#<div  class="qr-code">
  190.                 <div id="badge"></div>
  191.             </div>#}
  192.             <div class="code">
  193.                 <p>
  194.                     {{ user.reference }}
  195.                 </p>
  196.             </div>
  197.         </div> 
  198.         <input style="margin-top: 150px;font-size: 10em;
  199.                width: 75%;
  200.                height: 10%;" type="button" onclick="printDiv2('printableArea')" value="Download BADGE" id="div1" />
  202.     </body>
  203.     <script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
  204.     <script>
  205.                    jQuery(function () {
  206.                        jQuery('#badge').qrcode({
  207.                            // render method: 'canvas', 'image' or 'div'
  208.                            render: 'canvas',
  210.                            // version range somewhere in 1 .. 40
  211.                            minVersion: 2,
  212.                            maxVersion: 40,
  214.                            // error correction level: 'L', 'M', 'Q' or 'H'
  215.                            ecLevel: 'M',
  217.                            // offset in pixel if drawn onto existing canvas
  218.                            left: 0,
  219.                            top: 0,
  221.                            // size in pixel
  222.                            size: 290,
  224.                            // code color or image element
  225.                            fill: '{% if user.equipe.badge == "WHITE" or user.equipe.badge == 'GRAY' %}#152032{% else %}#fff{% endif %}',
  227.                            // background color or image element, null for transparent background
  228.                            background: null,
  230.                            // content
  231.                            text: '{{user.reference}}',
  233.                            // corner radius relative to module width: 0.0 .. 0.5
  234.                            radius: 0.5,
  236.                            // quiet zone in modules
  237.                            quiet: 1,
  239.                            // modes
  240.                            // 0: normal
  241.                            // 1: label strip
  242.                            // 2: label box
  243.                            // 3: image strip
  244.                            // 4: image box
  245.                            mode: 0,
  247.                            mSize: 0.1,
  248.                            mPosX: 0.5,
  249.                            mPosY: 0.5,
  251.                            label: 'no label',
  252.                            fontname: 'Montserrat',
  253.                            fontcolor: '#000',
  255.                            image: null
  256.                        });
  257.                    });
  258.                    function printDiv2(divName) {
  259.                        html2canvas(document.querySelector("#printableArea")).then(canvas => {
  260.                            let imgName = $('#printableArea').data('name');
  261.                            document.body.appendChild(canvas);
  262.                            const link = document.createElement('a');
  263.                            link.download = imgName;
  264.                            link.href = canvas.toDataURL();
  265.                            link.click();
  266.                            link.delete;
  267.                        });
  269.                    }
  270.     </script>
  271. </html>