templates/conformity_declaration/index.html.twig line 1

Open in your IDE?
  1. {% extends 'layout/app.html.twig' %}
  3. {% block PAGE_CSS %}
  4. {% endblock %}
  6. {% block CONTENT_MID %}
  8. <div class="bg-white">
  9.     <div class="pt-4 max-w-7xl mx-auto lg:flex items-center justify-between space-y-2 lg:space-y-0 lg:space-x-2 px-4 sm:px-6 lg:px-8">
  10.         <ol role="list" class="max-w-3xl flex items-center space-x-2">
  11.             <li>
  12.                 <div class="flex items-center">
  13.                     <a href="{{ navStartNode }}/" class="mr-2 text-sm font-medium text-gray-900">Home</a>
  14.                     <svg width="16" height="20" viewBox="0 0 16 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="h-5 w-4 text-gray-300">
  15.                         <path d="M5.697 4.34L8.98 16.532h1.327L7.025 4.341H5.697z" />
  16.                     </svg>
  17.                 </div>
  18.             </li>
  20.             <li class="text-sm">
  21.                 <a href="{{ navStartNode }}/konformitaetserklaerungen" aria-current="page" class="font-medium text-brand-600 hover:text-gray-600">Konfirmitätserklärungen</a>
  22.             </li>
  23.         </ol>
  24.     </div>
  26.     <div class="mx-auto max-w-2xl pb-16 px-4 sm:pb-24 sm:px-6 lg:max-w-7xl lg:px-8 pt-4 space-y-8 mt-5">
  28.             <div class="max-w-4xl space-y-2">
  29.                 <h3 class="text-2xl font-bold tracking-tight text-gray-900">Konformitätserklärungen</h3>
  30.                 <p class="text-base leading-7 text-gray-700">Für die von uns gelieferte Schutzbekleidung (PSA) stellen wir Konformitätserklärungen aus. Wir erklären darin verbindlich,
  31.                     dass die Bekleidung den einschlägigen Harmonisierungsrechtsvorschriften der Verordnung (EU) 2016/425 sowie den jeweiligen
  32.                     Schutzbekleidungsnormen entspricht und von einer notifizierten Stelle im Rahmen einer Baumusterprüfung entsprechend zertifiziert wurde.
  33.                     Nachfolgend können Sie die Konformitätserklärung zu Ihrer Schutzbekleidung downloaden.</p>
  34.                 <p class="text-base leading-7 text-gray-700">Im Suchfeld geben Sie die ersten 6 Stellen der Artikelnummer ein, gefolgt von einem Leerzeichen und der 3-stelligen Qualitätsnummer.
  35.                     Als Suchergebnis erhalten Sie dann die Konformitätserklärung für den gesuchten Artikel als PDF.
  36.                     Sollte Ihnen die gewünschte Konformitätserklärung nicht angezeigt werden, können Sie diese <a href="https://hugo-josten.de/kontakt" class="text-brand font-bold" target="_blank">hier</a> anfordern.</p>
  37.             </div>
  38.             <form action="" class="max-w-4xl">
  39.                 <div class="relative mt-2 rounded-md">
  40.                     <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
  41.                         <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
  42.                             <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
  43.                         </svg>
  44.                     </div>
  45.                     <input id="autoComplete" name="term" value="{{ app.request.get("term") }}" type="text" class="{% if(wrongTerm and app.request.get("term")>0) %}border-red-500 {% endif%} block w-full py-1.5 pl-10 rounded-md border-gray-300 focus:border-brand-500 focus:ring-brand-500" placeholder="z.B. 704000 051" autocomplete="off">
  46.                     <button type="submit" class="absolute inset-y-0 right-0 flex items-center px-4 py-2 bg-brand-500 text-white rounded-md hover:bg-brand-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500">
  47.                         Suchen
  48.                     </button>
  49.                 </div>
  50.                 {% if wrongTerm and app.request.get("term")>0 %}
  51.                     <p class="text-red-500 text-xs">Bitte geben Sie eine gültige Artikelnummer ein.</p>
  52.                 {% elseif results|length == 0 and app.request.get("term")>0  %}
  53.                     <p class="text-red-500 text-xs">Keine Ergebnisse gefunden.</p>
  54.                 {% endif %}
  55.             </form>
  58.             {% if results | length > 0 %}
  59.                 <div class="max-w-4xl">
  60.                     <h2 class="text-lg font-semibold text-gray-900">Gefundene Konformitätserklärung</h2>
  61.                     <div class="space-y-1 mt-4">
  62.                         <ul role="list" class="divide-y divide-gray-200 rounded-md border border-gray-200">
  63.                             {% for item in results %}
  64.                             <li class="flex items-center justify-between py-3 pl-3 pr-4 text-sm relative group bg-gray-100">
  65.                                 <div class="flex w-0 flex-1 items-center">
  66.                                     <!-- Heroicon name: mini/paper-clip -->
  67.                                     <svg class="h-5 w-5 flex-shrink-0 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
  68.                                         <path fill-rule="evenodd" d="M15.621 4.379a3 3 0 00-4.242 0l-7 7a3 3 0 004.241 4.243h.001l.497-.5a.75.75 0 011.064 1.057l-.498.501-.002.002a4.5 4.5 0 01-6.364-6.364l7-7a4.5 4.5 0 016.368 6.36l-3.455 3.553A2.625 2.625 0 119.52 9.52l3.45-3.451a.75.75 0 111.061 1.06l-3.45 3.451a1.125 1.125 0 001.587 1.595l3.454-3.553a3 3 0 000-4.242z" clip-rule="evenodd"></path>
  69.                                     </svg>
  70.                                     <span class="ml-2 w-0 flex-1 truncate">{{ item.label }}</span>
  71.                                 </div>
  72.                                 <div class="ml-4 flex-shrink-0">
  73.                                     <a href="{{ item.value }}" download="{{ item.label }}" target="_blank" class="font-medium text-brand-600 hover:text-brand-500">Download</a>
  74.                                 </div>
  75.                             </li>
  76.                             {% endfor %}
  77.                         </ul>
  78.                     </div>
  79.                 </div>
  80.             {% endif %}
  81.     </div>
  82. </div>
  83. {% endblock %}
  85. {% block PAGE_JS %}
  86. {% endblock %}