templates/en/patient-resources-self-testing.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Self-testing resources | CoaguChek{% endblock %}
  4. {% block description %}Find information about learning to use your CoaguChek® device.{% endblock %}
  6. {% block main %}
  7.     <section class="bg-patient text-white position-relative roche-header">
  8.         <div class="container-fluid">
  9.             <div class="row align-items-center">
  10.                 <div class="col-lg-4 offset-lg-2 py-5 px-0 order-2 order-lg-1">
  11.                     <div class="container">
  12.                         <div class="h1">CoaguChek<sup>®</sup> resources</div>
  13.                         <p class="mb-0">Find information about learning to use your CoaguChek<sup>®</sup> device, warranty, reimbursement, and the manuals for <span class="text-nowrap">CoaguChek<sup>®</sup> INRange</span> and <span class="text-nowrap">CoaguChek<sup>®</sup> XS.</span></p>
  14.                     </div>                    
  15.                 </div>
  16.                 <div class="col-lg-6 pe-0 order-1 order-lg-2">
  17.                     <img src="{{ asset('build/images/patient/06-Resources/00-Heroimage_1x.png') }}" srcset="{{ asset('build/images/patient/06-Resources/00-Heroimage_1x.png') }} 1x, {{ asset('build/images/patient/06-Resources/00-Heroimage_2x.png') }} 2x" alt="A man and woman sitting on a couch looking at a tablet" class="w-100" />
  18.                 </div>
  19.             </div>
  20.         </div>
  21.     </section>
  23.     <div data-controller="tab">
  24.         <section class="position-relative roche-section__medium mb-0 pb-0 roche-tab pt-3 lb-tab-menu roche-tab__patient">
  25.             <div class="container lb-tab-container">
  26.                 <div class="nav d-flex rounded-4 shadow mt-5 py-3 justify-content-around">
  27.                     <a href="{{ path('patient-resources-self-testing') }}" class="nav-link active">Self-testing</a>
  28.                     <a href="{{ path('patient-resources-warranty-formulary') }}" class="nav-link">Warranty formulary</a>
  29.                     <a href="{{ path('patient-resources-reimbursement') }}" class="nav-link">Reimbursement</a>
  30.                     <a href="{{ path('patient-resources-device-manuals') }}" class="nav-link">Device manuals</a>
  31.                     <a href="{{ path('patient-resources-glossary') }}" class="nav-link">Glossary</a>
  32.                 </div>
  33.             </div>
  34.         </section>
  36.         <div class="tab-content">
  38.             <div class="tab-pane fade show active" id="self-testing">
  40.                 <section class="roche-section__medium">
  41.                     <div class="container">
  42.                         <ha class="h2 text-patient">Learn to self-test</h1>
  43.                         <p>Self-testing your INR with CoaguChek<sup>®</sup> INRange or CoaguChek<sup>®</sup> XS is a straightforward process: There are just four steps! </p>
  44.                         <p class="mb-5"><a href="{{ path('patient-self-testing') }}#self-testing-cc" class="text-patient">Follow along in pictures</a> or watch a device-specific how-to video:</p>
  45.                         <div class="row">
  46.                             <div class="col-12 col-lg-6 order-1 order-lg-1">
  47.                                 <h3 class="text-patient">CoaguChek<sup>®</sup> INRange</h3>
  48.                                 <p>Watch the short video below to learn more about how to use CoaguChek<sup>®</sup> INRange to determine your INR levels.</p>
  49.                             </div>
  50.                             <div class="col-12 col-lg-6 order-3 order-lg-2 pt-5 pt-lg-0">
  51.                                 <h3 class="text-patient">CoaguChek<sup>®</sup> XS</h3>
  52.                                 <p>Watch the short video below to learn more about how to use CoaguChek<sup>®</sup> XS to determine your INR levels.</p>
  53.                             </div>
  54.                             <div class="col-12 col-lg-6 order-2 order-lg-3">
  55.                                 <div class="ratio ratio-16x9 mt-3">
  56.                                     <video poster="{{ asset('build/images/video-thumb-coaguchek.png') }}" controls="" id="html5_video_eany7cgzpzu">
  57.                                         <source src="{{ asset('build/videos/coaguchek-inrange-handling-video.mp4') }}" type="video/mp4">
  58.                                     </video>
  59.                                 </div>                    
  60.                             </div>
  61.                             <div class="col-12 col-lg-6 order-4">
  62.                                 <div class="ratio ratio-16x9 mt-3">
  63.                                     <video poster="{{ asset('build/images/video-thumb-roche.png') }}" controls="" id="html5_video_eany7cgzpzu">
  64.                                         <source src="{{ asset('build/videos/coaguchek_xs_handling_video.mp4') }}" type="video/mp4">
  65.                                     </video>
  66.                                 </div>                                    
  67.                             </div>    
  68.                         </div>
  69.                     </div>
  70.                 </section>
  72.                 <section class="roche-section__medium bg-soft">
  73.                     <div class="container">
  74.                         <div class="row align-items-center">
  75.                             <div class="col-12 col-lg-7 order-2 order-lg-1">
  76.                                 <div class="roche-image roche-image__left">
  77.                                     <img class="img-fluid" src="{{ asset('build/images/patient/06-Resources/01-BestPractice_1x.png') }}" srcset="{{ asset('build/images/patient/06-Resources/01-BestPractice_1x.png') }} 1x, {{ asset('build/images/patient/06-Resources/01-BestPractice_2x.png') }} 2x" alt="A middle-aged man looking at his phone">
  78.                                 </div>
  79.                             </div>    
  80.                             <div class="col-12 col-lg-5 order-1 order-lg-2 pb-5 p-lg-0">
  81.                                 <h2 class="text-patient">Best practice</h2>
  82.                                 <p >Have your device manual at hand to help you during your self-testing</p>
  83.                                 <a href="{{ path('patient-resources-device-manuals') }}" class="btn btn-patient text-white">See manuals</a>
  84.                             </div>
  85.                         </div>
  86.                     </div>
  87.                 </section>
  89.             </div>
  91.         </div>
  93.     </div>
  96. {% endblock %}