templates/home/index.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <title>Asistente para emergencias - ArsInnovatio</title>
  5.     <meta property="og:title" content="Feedbox Mobile App" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <meta charset="utf-8" />
  8.     <meta property="twitter:card" content="summary_large_image" />
  10.     <style data-tag="reset-style-sheet">
  11.       html {  line-height: 1.15;}body {  margin: 0;}* {  box-sizing: border-box;  border-width: 0;  border-style: solid;}p,li,ul,pre,div,h1,h2,h3,h4,h5,h6,figure,blockquote,figcaption {  margin: 0;  padding: 0;}button {  background-color: transparent;}button,input,optgroup,select,textarea {  font-family: inherit;  font-size: 100%;  line-height: 1.15;  margin: 0;}button,select {  text-transform: none;}button,[type="button"],[type="reset"],[type="submit"] {  -webkit-appearance: button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {  border-style: none;  padding: 0;}button:-moz-focus,[type="button"]:-moz-focus,[type="reset"]:-moz-focus,[type="submit"]:-moz-focus {  outline: 1px dotted ButtonText;}a {  color: inherit;  text-decoration: inherit;}input {  padding: 2px 4px;}img {  display: block;}html { scroll-behavior: smooth  }
  12.     </style>
  13.     <style data-tag="default-style-sheet">
  14.       html {
  15.         font-family: Lexend;
  16.         font-size: 16px;
  17.       }
  19.       body {
  20.         font-weight: 400;
  21.         font-style:normal;
  22.         text-decoration: none;
  23.         text-transform: none;
  24.         letter-spacing: normal;
  25.         line-height: 1.1;
  26.         color: var(--dl-color-grays-dark100);
  27.         background-color: var(--dl-color-grays-white100);
  29.       }
  30.     </style>
  31.     <link
  32.       rel="stylesheet"
  33.       href="https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&amp;display=swap"
  34.       data-tag="font"
  35.     />
  36.     <style>
  37.       ::placeholder{
  38.       color: #63667066;
  39.       }
  40.     </style>
  41.     <link rel="stylesheet" href="{{asset('assets/style.css')}}" />
  42.   </head>
  43.   <body>
  44.     <div>
  45.       <link href="{{asset('assets/home.css')}}" rel="stylesheet" />
  47.       <div class="home-container">
  48.         <div class="navbar-navbar-container">
  49.           <header data-role="Header" class="navigation-container">
  50.             <h1 id="logo-asistente"><span>Asistente para emergencias</span></h1>
  51.             <div class="navbar-nav">
  52.               <nav
  53.                 class="navigation-links-nav navigation-links-root-class-name10"
  54.               >
  55.                 <a
  56.                   href="#que-es"
  57.                   id="que-es-lnik"
  58.                   class="navigation-links-link navbar-link"
  59.                 >
  60.                   <span>¿Qué es?</span>
  61.                 </a>
  62.                 <a
  63.                   href="#know-more"
  64.                   id="know-more-link"
  65.                   class="navigation-links-link1 navbar-link"
  66.                 >
  67.                   <span>Mas información</span>
  68.                 </a>
  69.               </nav>
  70.             </div>
  71.             <div data-role="BurgerMenu" class="navigation-burger-menu">
  72.               <svg viewBox="0 0 1024 1024" class="navbar-icon">
  73.                 <path
  74.                   d="M128 554.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667zM128 298.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667zM128 810.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667z"
  75.                 ></path>
  76.               </svg>
  77.             </div>
  78.             <div data-role="MobileMenu" class="navigation-mobile-menu">
  79.               <div class="navbar-nav1">
  80.                 <div class="navbar-container">
  81.                   <img
  82.                     alt="image"
  83.                     src="{{asset('assets/images/logo-1500h.png') }}"
  84.                     class="navbar-image"
  85.                   />
  86.                   <div data-role="CloseMobileMenu" class="navbar-menu-close">
  87.                     <svg viewBox="0 0 1024 1024" class="navbar-icon02">
  88.                       <path
  89.                         d="M810 274l-238 238 238 238-60 60-238-238-238 238-60-60 238-238-238-238 60-60 238 238 238-238z"
  90.                       ></path>
  91.                     </svg>
  92.                   </div>
  93.                 </div>
  94.                 <nav
  95.                   class="navigation-links-nav navigation-links-root-class-name11"
  96.                 >
  97.                   <a
  98.                     href="#que-es"
  99.                     id="que-es-lnik"
  100.                     class="navigation-links-link navbar-link"
  101.                   >
  102.                     <span>¿Qué es?</span>
  103.                   </a>
  104.                   <a
  105.                     href="#know-more"
  106.                     id="know-more-link"
  107.                     class="navigation-links-link1 navbar-link"
  108.                   >
  109.                     <span>Mas información</span>
  110.                   </a>
  111.                 </nav>
  112.                 <button class="navbar-primary-btn button-primary button">
  113.                   <span>Get started</span>
  114.                 </button>
  115.               </div>
  116.               <div class="navbar-social-media">
  117.                 <span class="navbar-text1"><span>Follow us</span></span>
  118.                 <div class="navbar-container1">
  119.                   <svg viewBox="0 0 1024 1024" class="navbar-icon04">
  120.                     <path
  121.                       d="M384 384h177.106v90.782h2.532c24.64-44.194 84.958-90.782 174.842-90.782 186.946 0 221.52 116.376 221.52 267.734v308.266h-184.61v-273.278c0-65.184-1.334-149.026-96.028-149.026-96.148 0-110.82 70.986-110.82 144.292v278.012h-184.542v-576z"
  122.                     ></path>
  123.                     <path d="M64 384h192v576h-192v-576z"></path>
  124.                     <path
  125.                       d="M256 224c0 53.019-42.981 96-96 96s-96-42.981-96-96c0-53.019 42.981-96 96-96s96 42.981 96 96z"
  126.                     ></path></svg
  127.                   ><svg viewBox="0 0 1024 1024" class="navbar-icon08">
  128.                     <path
  129.                       d="M512 92.2c136.8 0 153 0.6 206.8 3 50 2.2 77 10.6 95 17.6 23.8 9.2 41 20.4 58.8 38.2 18 18 29 35 38.4 58.8 7 18 15.4 45.2 17.6 95 2.4 54 3 70.2 3 206.8s-0.6 153-3 206.8c-2.2 50-10.6 77-17.6 95-9.2 23.8-20.4 41-38.2 58.8-18 18-35 29-58.8 38.4-18 7-45.2 15.4-95 17.6-54 2.4-70.2 3-206.8 3s-153-0.6-206.8-3c-50-2.2-77-10.6-95-17.6-23.8-9.2-41-20.4-58.8-38.2-18-18-29-35-38.4-58.8-7-18-15.4-45.2-17.6-95-2.4-54-3-70.2-3-206.8s0.6-153 3-206.8c2.2-50 10.6-77 17.6-95 9.2-23.8 20.4-41 38.2-58.8 18-18 35-29 58.8-38.4 18-7 45.2-15.4 95-17.6 53.8-2.4 70-3 206.8-3zM512 0c-139 0-156.4 0.6-211 3-54.4 2.4-91.8 11.2-124.2 23.8-33.8 13.2-62.4 30.6-90.8 59.2-28.6 28.4-46 57-59.2 90.6-12.6 32.6-21.4 69.8-23.8 124.2-2.4 54.8-3 72.2-3 211.2s0.6 156.4 3 211c2.4 54.4 11.2 91.8 23.8 124.2 13.2 33.8 30.6 62.4 59.2 90.8 28.4 28.4 57 46 90.6 59 32.6 12.6 69.8 21.4 124.2 23.8 54.6 2.4 72 3 211 3s156.4-0.6 211-3c54.4-2.4 91.8-11.2 124.2-23.8 33.6-13 62.2-30.6 90.6-59s46-57 59-90.6c12.6-32.6 21.4-69.8 23.8-124.2 2.4-54.6 3-72 3-211s-0.6-156.4-3-211c-2.4-54.4-11.2-91.8-23.8-124.2-12.6-34-30-62.6-58.6-91-28.4-28.4-57-46-90.6-59-32.6-12.6-69.8-21.4-124.2-23.8-54.8-2.6-72.2-3.2-211.2-3.2v0z"
  130.                     ></path>
  131.                     <path
  132.                       d="M512 249c-145.2 0-263 117.8-263 263s117.8 263 263 263 263-117.8 263-263c0-145.2-117.8-263-263-263zM512 682.6c-94.2 0-170.6-76.4-170.6-170.6s76.4-170.6 170.6-170.6c94.2 0 170.6 76.4 170.6 170.6s-76.4 170.6-170.6 170.6z"
  133.                     ></path>
  134.                     <path
  135.                       d="M846.8 238.6c0 33.91-27.49 61.4-61.4 61.4s-61.4-27.49-61.4-61.4c0-33.91 27.49-61.4 61.4-61.4s61.4 27.49 61.4 61.4z"
  136.                     ></path></svg
  137.                   ><svg viewBox="0 0 1024 1024" class="navbar-icon12">
  138.                     <path
  139.                       d="M920.021 283.179c12.245 65.237 19.115 140.587 18.645 218.667 0.811 65.195-5.248 139.392-18.645 214.229-2.432 8.875-6.4 17.195-11.605 24.533-9.685 13.696-23.808 24.107-40.491 28.8-25.771 6.869-91.989 11.733-165.419 14.549-95.147 3.669-190.507 3.669-190.507 3.669s-95.36 0-190.507-3.627c-73.429-2.816-139.648-7.637-164.949-14.421-8.747-2.432-16.896-6.315-24.149-11.435-13.269-9.387-23.509-22.869-28.587-39.381-12.16-65.109-18.944-140.203-18.475-218.027-0.896-65.707 5.163-140.459 18.645-215.893 2.432-8.875 6.4-17.195 11.605-24.533 9.685-13.696 23.808-24.107 40.491-28.8 25.771-6.869 91.989-11.733 165.419-14.549 95.147-3.627 190.507-3.627 190.507-3.627s95.36 0 190.549 3.328c73.344 2.56 140.032 6.955 164.523 12.928 9.344 2.688 17.963 7.040 25.515 12.757 13.099 9.899 22.955 23.936 27.435 40.875zM1003.093 263.552c-9.259-36.949-30.635-67.84-59.008-89.301-15.915-12.032-33.963-21.077-53.291-26.667-38.315-9.387-115.029-13.781-185.259-16.213-96.725-3.371-193.536-3.371-193.536-3.371s-96.939 0-193.749 3.712c-70.059 2.688-147.2 7.467-184.192 17.365-37.291 10.539-67.456 32.853-88.064 61.867-11.52 16.256-20.011 34.603-25.045 54.101-0.256 1.024-0.469 2.091-0.64 3.029-14.635 80.981-21.291 161.835-20.309 233.856-0.512 82.091 6.869 163.456 20.352 234.752 0.256 1.323 0.555 2.645 0.896 3.755 10.453 36.693 32.853 66.859 61.909 87.381 15.232 10.752 32.299 18.859 50.389 23.936 37.504 10.027 114.603 14.805 184.661 17.493 96.853 3.712 193.792 3.712 193.792 3.712s96.939 0 193.749-3.712c70.059-2.688 147.157-7.467 184.192-17.365 37.248-10.539 67.456-32.853 88.021-61.867 11.52-16.256 20.053-34.603 25.045-54.059 0.256-1.067 0.512-2.133 0.64-3.029 14.507-80.384 21.163-160.64 20.309-232.107 0.512-82.133-6.869-163.541-20.352-234.837-0.171-0.853-0.341-1.707-0.512-2.432zM458.667 567.509v-132.352l116.352 66.176zM437.077 677.931l245.333-139.52c20.48-11.648 27.648-37.717 16-58.197-3.968-6.997-9.643-12.459-16-16l-245.333-139.52c-20.48-11.648-46.549-4.48-58.197 16-3.84 6.741-5.632 14.080-5.589 21.077v279.040c0 23.552 19.115 42.667 42.667 42.667 7.765 0 15.019-2.091 21.077-5.589z"
  140.                     ></path></svg
  141.                   ><svg viewBox="0 0 1024 1024" class="navbar-icon14">
  142.                     <path
  143.                       d="M1024 226.4c-37.6 16.8-78.2 28-120.6 33 43.4-26 76.6-67.2 92.4-116.2-40.6 24-85.6 41.6-133.4 51-38.4-40.8-93-66.2-153.4-66.2-116 0-210 94-210 210 0 16.4 1.8 32.4 5.4 47.8-174.6-8.8-329.4-92.4-433-219.6-18 31-28.4 67.2-28.4 105.6 0 72.8 37 137.2 93.4 174.8-34.4-1-66.8-10.6-95.2-26.2 0 0.8 0 1.8 0 2.6 0 101.8 72.4 186.8 168.6 206-17.6 4.8-36.2 7.4-55.4 7.4-13.6 0-26.6-1.4-39.6-3.8 26.8 83.4 104.4 144.2 196.2 146-72 56.4-162.4 90-261 90-17 0-33.6-1-50.2-3 93.2 59.8 203.6 94.4 322.2 94.4 386.4 0 597.8-320.2 597.8-597.8 0-9.2-0.2-18.2-0.6-27.2 41-29.4 76.6-66.4 104.8-108.6z"
  144.                     ></path>
  145.                   </svg>
  146.                 </div>
  147.               </div>
  148.             </div>
  149.             <a
  150.               href="#contacto"
  151.               class="navbar-primary-btn1 button-primary button"
  152.             >
  153.               <span>Contacto</span>
  154.             </a>
  155.           </header>
  156.         </div>
  157.         <main class="home-main">
  158.           <div class="home-hero section-container">
  159.             <div class="home-max-width max-content-container">
  160.               <div class="home-content-container">
  161.                 <h1 class="home-text">
  162.                   Asistente para emergencias y grandes catástrofes
  163.                 </h1>
  164.                 <div class="home-features-container">
  165.                   <div class="home-feature">
  166.                     <svg viewBox="0 0 877.7142857142857 1024" class="home-icon">
  167.                       <path
  168.                         d="M733.714 419.429c0-9.714-3.429-19.429-10.286-26.286l-52-51.429c-6.857-6.857-16-10.857-25.714-10.857s-18.857 4-25.714 10.857l-233.143 232.571-129.143-129.143c-6.857-6.857-16-10.857-25.714-10.857s-18.857 4-25.714 10.857l-52 51.429c-6.857 6.857-10.286 16.571-10.286 26.286s3.429 18.857 10.286 25.714l206.857 206.857c6.857 6.857 16.571 10.857 25.714 10.857 9.714 0 19.429-4 26.286-10.857l310.286-310.286c6.857-6.857 10.286-16 10.286-25.714zM877.714 512c0 242.286-196.571 438.857-438.857 438.857s-438.857-196.571-438.857-438.857 196.571-438.857 438.857-438.857 438.857 196.571 438.857 438.857z"
  169.                       ></path>
  170.                     </svg>
  171.                     <span class="home-text01">
  172.                       Aplicación movil para la clasificación de afectados
  173.                     </span>
  174.                   </div>
  175.                   <div class="home-feature1">
  176.                     <svg
  177.                       viewBox="0 0 877.7142857142857 1024"
  178.                       class="home-icon2"
  179.                     >
  180.                       <path
  181.                         d="M733.714 419.429c0-9.714-3.429-19.429-10.286-26.286l-52-51.429c-6.857-6.857-16-10.857-25.714-10.857s-18.857 4-25.714 10.857l-233.143 232.571-129.143-129.143c-6.857-6.857-16-10.857-25.714-10.857s-18.857 4-25.714 10.857l-52 51.429c-6.857 6.857-10.286 16.571-10.286 26.286s3.429 18.857 10.286 25.714l206.857 206.857c6.857 6.857 16.571 10.857 25.714 10.857 9.714 0 19.429-4 26.286-10.857l310.286-310.286c6.857-6.857 10.286-16 10.286-25.714zM877.714 512c0 242.286-196.571 438.857-438.857 438.857s-438.857-196.571-438.857-438.857 196.571-438.857 438.857-438.857 438.857 196.571 438.857 438.857z"
  182.                       ></path>
  183.                     </svg>
  184.                     <span class="home-text02">
  185.                       Aplicación web para acceder de forma compartida a los
  186.                       sucesos
  187.                     </span>
  188.                   </div>
  189.                   <div class="home-feature2">
  190.                     <svg
  191.                       viewBox="0 0 877.7142857142857 1024"
  192.                       class="home-icon4"
  193.                     >
  194.                       <path
  195.                         d="M733.714 419.429c0-9.714-3.429-19.429-10.286-26.286l-52-51.429c-6.857-6.857-16-10.857-25.714-10.857s-18.857 4-25.714 10.857l-233.143 232.571-129.143-129.143c-6.857-6.857-16-10.857-25.714-10.857s-18.857 4-25.714 10.857l-52 51.429c-6.857 6.857-10.286 16.571-10.286 26.286s3.429 18.857 10.286 25.714l206.857 206.857c6.857 6.857 16.571 10.857 25.714 10.857 9.714 0 19.429-4 26.286-10.857l310.286-310.286c6.857-6.857 10.286-16 10.286-25.714zM877.714 512c0 242.286-196.571 438.857-438.857 438.857s-438.857-196.571-438.857-438.857 196.571-438.857 438.857-438.857 438.857 196.571 438.857 438.857z"
  196.                       ></path>
  197.                     </svg>
  198.                     <span class="home-text03">
  199.                       Dispositivo IoT interconectado para la monitorización de
  200.                       afectados
  201.                     </span>
  202.                   </div>
  203.                 </div>
  204.               </div>
  205.               <div class="home-image-container">
  206.                 <img
  207.                   alt="image"
  208.                   src="{{asset('assets/images/captura%20de%20pantalla%202022-11-28%20170458-1200w.jpg') }}"
  209.                   class="home-image"
  210.                 />
  211.               </div>
  212.             </div>
  213.           </div>
  214.           <div id="que-es" class="home-section-one section-container">
  215.             <div class="home-max-width1 max-content-container">
  216.               <h2 class="home-text04">
  217.                 <span>Sistema</span>
  218.                 <span class="home-text06">clasificador</span>
  219.                 <span>para situaciones de emergencia</span>
  220.               </h2>
  221.               <div class="home-cards-container">
  222.                 <div class="feature-card-card">
  223.                   <h4 class="feature-card-text Heading4">
  224.                     <span>Coordinación</span>
  225.                   </h4>
  226.                   <span class="feature-card-text1 Content-Light">
  227.                     <span>
  228.                       La información del suceso es compartida por los diferentes
  229.                       involucrados en tiempo real, facilitando la toma de
  230.                       decisión y reduciendo errores de gestión.
  231.                     </span>
  232.                   </span>
  233.                 </div>
  234.                 <div class="feature-card-card">
  235.                   <h4 class="feature-card-text Heading4">
  236.                     <span>Inmediatez</span>
  237.                   </h4>
  238.                   <span class="feature-card-text1 Content-Light">
  239.                     <span>
  240.                       Todo el proceso de clasificación esta guiado por el
  241.                       asistente, permitiendo de esta forma reducir tiempos en la
  242.                       evaluación de los afectados
  243.                     </span>
  244.                   </span>
  245.                 </div>
  246.                 <div class="feature-card-card">
  247.                   <h4 class="feature-card-text Heading4">
  248.                     <span>Tecnología</span>
  249.                   </h4>
  250.                   <span class="feature-card-text1 Content-Light">
  251.                     <span>
  252.                       Un dispositivo wereable acompaña al afectado durante todo
  253.                       el proceso, monitorizando constantes y mostrando la
  254.                       información pertinente
  255.                     </span>
  256.                   </span>
  257.                 </div>
  258.               </div>
  259.             </div>
  260.           </div>
  261.           <div id="know-more" class="section-container">
  262.             <div class="home-max-width2 max-content-container">
  263.               <div class="home-image-container1">
  264.                 <img
  265.                   alt="image"
  266.                   src="{{asset('assets/images/coauvci01kyot7ymmtwqsiqnsugooptjz59ttmo0-1200w.png') }}"
  267.                   class="home-image1"
  268.                 />
  269.               </div>
  270.               <div class="home-content-container1">
  271.                 <h1 class="home-text08">
  272.                   ¿Qué es un clasificador para situaciones de emergencia?
  273.                 </h1>
  274.                 <span class="home-text09">
  275.                   <span>
  276.                     Se trata de una solución tecnológica compuesta de tres
  277.                     herramientas que en conjunto asisten al personal experto en
  278.                     la tarea de clasificar a diferentes afectados en situación
  279.                     de emergencia o de catástrofe.
  280.                   </span>
  281.                   <br class="home-text11 Content-Light" />
  282.                   <br class="home-text12" />
  283.                   <br class="home-text13 Content-Light" />
  284.                   <span>
  285.                     En primer lugar , una aplicación para dispositivos móviles
  286.                     permite al personal llevar una gestión de las
  287.                     clasificaciones realizadas a diferentes afectados. Con una
  288.                     interfaz muy intuitiva, de forma simultánea se obtiene
  289.                     información del registro de lesiones y del resultado de la
  290.                     clasificación de gravedad realizada
  291.                   </span>
  292.                   <br class="home-text15" />
  293.                   <br class="home-text16 Content-Light" />
  294.                   <br class="home-text17 Content-Light" />
  295.                   <span>
  296.                     La información obtenida puede ser compartida entre los
  297.                     diferentes puestos de mando de emergencias mediante una
  298.                     aplicación web que se sincroniza con las diferentes
  299.                     aplicaciones de los expertos. Por último, una serie de
  300.                     dispositivos IoT permiten sensorizar las constantes de los
  301.                     afectados y mostrar la información de las diferentes
  302.                     evaluaciones realizadas. Todo ello sincronizado mediante un
  303.                     servidor Edge instalado en los vehículos asistenciales.
  304.                   </span>
  305.                   <br class="home-text19 Content-Light" />
  306.                   <br class="home-text20" />
  307.                   <br class="home-text21 Content-Light" />
  308.                   <span>
  309.                     Con esta aplicación se pretende mejorar la información
  310.                     compartida entre los diferentes actores que intervienen en
  311.                     el proceso de la atención a víctimas de estos desafortunados
  312.                     procesos.
  313.                   </span>
  314.                   <br class="home-text23" />
  315.                   <br class="home-text24 Content-Light" />
  316.                 </span>
  317.               </div>
  318.             </div>
  319.           </div>
  320.           <div class="home-section-four section-container">
  321.             <div class="home-max-width3 max-content-container">
  322.               <h2 class="home-text25">Nos encantaría escuchar tu opinión</h2>
  323.             </div>
  324.             <div data-type="slider" class="home-slider">
  325.               <div data-type="slide" class="slide-slide slide">
  326.                 <div class="slide-max-width max-content-container">
  327.                   <div class="slide-left-side">
  328.                     <div class="slide-decorations-container">
  329.                       <img
  330.                         alt="image"
  331.                         src="{{asset('assets/images/union-200h.png') }}"
  332.                         class="slide-dots"
  333.                       />
  334.                       <div class="slide-squares-container">
  335.                         <div class="slide-light-green"></div>
  336.                         <div class="slide-orange"></div>
  337.                       </div>
  338.                     </div>
  339.                     <div class="slide-image-container">
  340.                       <div class="slide-slider-controls">
  341.                         <div data-action="previousSlide" class="slide-go-left">
  342.                           <svg viewBox="0 0 1024 1024" class="slide-icon">
  343.                             <path
  344.                               d="M854 470v84h-520l238 240-60 60-342-342 342-342 60 60-238 240h520z"
  345.                             ></path>
  346.                           </svg>
  347.                         </div>
  348.                         <div data-action="nextSlide" class="slide-go-right">
  349.                           <svg viewBox="0 0 1024 1024" class="slide-icon2">
  350.                             <path
  351.                               d="M512 170l342 342-342 342-60-60 238-240h-520v-84h520l-238-240z"
  352.                             ></path>
  353.                           </svg>
  354.                         </div>
  355.                       </div>
  356.                     </div>
  357.                   </div>
  358.                   <div id="contacto" class="slide-right-side">
  359.                   
  360.                           {{ form_start(form) }}
  361.                             <div class="home-form">
  362.                                 <span class="home-text53 TextXL">
  363.                                     Para contactar con nosotros rellena el siguiente formulario
  364.                                 </span>
  365.                                 <span class="home-text54 TextXS">Nombre completo</span>
  366.                                 {{ form_widget(form.nombre, {'attr': {'class': 'form-control home-textinput TextSM input' }}) }}
  367.                                 {{ form_errors(form.nombre) }}
  368.                                 <span class="home-text55 TextXS">Email</span>
  369.                                 {{ form_widget(form.email, {'attr': {'class': 'form-control home-textinput1 TextSM input' }}) }}
  370.                                 {{ form_errors(form.email) }}
  371.                                 <span class="home-text56 TextXS">Mensaje</span>
  372.                                 {{ form_widget(form.feedback, {'attr': {'class': 'form-control home-textarea TextSM textarea' }}) }}
  373.                                 {{ form_errors(form.feedback) }}
  374.                                 <div class="home-container16" style="margin-top: 15px">
  375.                                     <div class="secondary-button-container secondary-button-root-class-name">
  376.                                         {{ form_widget(form._token, {'attr': {'class': 'form-control' }}) }}
  377.                                         <button type="submit" class="secondary-button-button TextXS button">
  378.                                             <span>Enviar</span>
  379.                                         </button>
  380.                                     </div>
  381.                                 </div>
  382.                             </div>
  383.                             {{ form_end(form) }}
  384.                   </div>
  385.                 </div>
  386.               </div>
  387.               <div
  388.                 data-type="slide"
  389.                 class="slide-slide slide slide-root-class-name"
  390.               >
  391.                 <div class="slide-max-width max-content-container">
  392.                   <div class="slide-left-side">
  393.                     <div class="slide-decorations-container">
  394.                       <img
  395.                         alt="image"
  396.                         src="{{asset('assets/images/union-200h.png') }}"
  397.                         class="slide-dots"
  398.                       />
  399.                       <div class="slide-squares-container">
  400.                         <div class="slide-light-green"></div>
  401.                         <div class="slide-orange"></div>
  402.                       </div>
  403.                     </div>
  404.                     <div class="slide-image-container">
  405.                       <div class="slide-slider-controls">
  406.                         <div data-action="previousSlide" class="slide-go-left">
  407.                           <svg viewBox="0 0 1024 1024" class="slide-icon">
  408.                             <path
  409.                               d="M854 470v84h-520l238 240-60 60-342-342 342-342 60 60-238 240h520z"
  410.                             ></path>
  411.                           </svg>
  412.                         </div>
  413.                         <div data-action="nextSlide" class="slide-go-right">
  414.                           <svg viewBox="0 0 1024 1024" class="slide-icon2">
  415.                             <path
  416.                               d="M512 170l342 342-342 342-60-60 238-240h-520v-84h520l-238-240z"
  417.                             ></path>
  418.                           </svg>
  419.                         </div>
  420.                       </div>
  421.                     </div>
  422.                   </div>
  423.                   <div class="slide-right-side"></div>
  424.                 </div>
  425.               </div>
  426.               <div
  427.                 data-type="slide"
  428.                 class="slide-slide slide slide-root-class-name1"
  429.               >
  430.                 <div class="slide-max-width max-content-container">
  431.                   <div class="slide-left-side">
  432.                     <div class="slide-decorations-container">
  433.                       <img
  434.                         alt="image"
  435.                         src="{{asset('assets/images/union-200h.png') }}"
  436.                         class="slide-dots"
  437.                       />
  438.                       <div class="slide-squares-container">
  439.                         <div class="slide-light-green"></div>
  440.                         <div class="slide-orange"></div>
  441.                       </div>
  442.                     </div>
  443.                     <div class="slide-image-container">
  444.                       <div class="slide-slider-controls">
  445.                         <div data-action="previousSlide" class="slide-go-left">
  446.                           <svg viewBox="0 0 1024 1024" class="slide-icon">
  447.                             <path
  448.                               d="M854 470v84h-520l238 240-60 60-342-342 342-342 60 60-238 240h520z"
  449.                             ></path>
  450.                           </svg>
  451.                         </div>
  452.                         <div data-action="nextSlide" class="slide-go-right">
  453.                           <svg viewBox="0 0 1024 1024" class="slide-icon2">
  454.                             <path
  455.                               d="M512 170l342 342-342 342-60-60 238-240h-520v-84h520l-238-240z"
  456.                             ></path>
  457.                           </svg>
  458.                         </div>
  459.                       </div>
  460.                     </div>
  461.                   </div>
  462.                   <div class="slide-right-side">                  
  463.                   </div>
  464.                 </div>
  465.               </div>
  466.             </div>
  467.           </div>
  468.         </main>
  469.         <footer class="footer-footer section-container footer-root-class-name">
  470.           <div class="footer-max-width max-content-container">
  471.             <div class="footer-container">
  472.               <h1><span>Asistente para emergencias</span></h1>
  473.               <span class="footer-text1 Content-Light">
  474.                 Sistema clasificador para situaciones de emergencia
  475.               </span>
  476.             </div>
  477.             <div class="footer-links">
  478.               <div class="footer-container1">
  479.                 <span class="footer-text2">ArsInnovatio</span>
  480.                 <a
  481.                   href="https://innovatio.iuii.ua.es"
  482.                   target="_blank"
  483.                   rel="noreferrer noopener"
  484.                   class="footer-link"
  485.                 >
  486.                   Sobre nosotros
  487.                 </a>
  488.                 <a
  489.                   href="https://innovatio.iuii.ua.es/webars/noticias"
  490.                   target="_blank"
  491.                   rel="noreferrer noopener"
  492.                   class="footer-link1 footer-link"
  493.                 >
  494.                   Noticias
  495.                 </a>
  496.               </div>
  497.               <div class="footer-container2">
  498.                 <span class="footer-text3">Otros proyectos</span>
  499.                 <a
  500.                   href="https://www.actuasalud.net/es/"
  501.                   target="_blank"
  502.                   rel="noreferrer noopener"
  503.                   class="footer-link2 footer-link"
  504.                 >
  505.                   Actuasalud
  506.                 </a>
  507.                 <a
  508.                   href="https://innovatio.iuii.ua.es/holdenia/"
  509.                   target="_blank"
  510.                   rel="noreferrer noopener"
  511.                   class="footer-link3 footer-link"
  512.                 >
  513.                   HoldenIA
  514.                 </a>
  515.                 <a
  516.                   href="https://innovatio.iuii.ua.es/comoconsalud"
  517.                   target="_blank"
  518.                   rel="noreferrer noopener"
  519.                   class="footer-link4 footer-link"
  520.                 >
  521.                   Comoconsalud
  522.                 </a>
  523.                 <a
  524.                   href="https://innovatio.iuii.ua.es/trazabilidad"
  525.                   target="_blank"
  526.                   rel="noreferrer noopener"
  527.                   class="footer-link5 footer-link"
  528.                 >
  529.                   Traza-Agro
  530.                 </a>
  531.               </div>
  532.             </div>
  533.           </div>
  534.         </footer>
  535.         <div class="copyright-copyright copyright-root-class-name">
  536.           <div class="copyright-max-width max-content-container">
  537.             <span class="copyright-text">
  538.               Copyright © 2022 ArsInnovatio. Universidad de Alicante
  539.             </span>
  540.           </div>
  541.         </div>
  542.       </div>
  543.     </div>
  545.             {% for message in app.flashes('success') %}
  546.             <div class="alert-container">
  547.                 <div class="alert alert-success alert-dismissible fade show" role="alert">
  548.                     <strong>{{'Success' | trans}}</strong>
  549.                     {{ message }}
  550.                     <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  551.                 </div>
  552.             </div>
  553.         {% endfor %}
  555.         {% for message in app.flashes('error') %}
  556.             <div class="alert-container">
  557.                 <div class="alert alert-danger alert-dismissible fade show" role="alert">
  558.                     <strong>{{'Error' | trans}}</strong>
  559.                     {{ message }}
  560.                     <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  561.                 </div>
  562.             </div>
  563.         {% endfor %}
  565.         {% for message in app.flashes('info') %}
  566.             <div class="alert-container">
  567.                 <div class="alert alert-info alert-dismissible fade show" role="alert">
  568.                     <strong>{{'Info' | trans}}</strong>
  569.                     {{ message }}
  570.                     <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  571.                 </div>
  572.             </div>
  573.         {% endfor %}
  575.         {% for message in app.flashes('alert') %}
  576.             <div class="alert-container">
  577.                 <div class="alert alert-warning alert-dismissible fade show" role="alert">
  578.                     <strong>{{'Alert' | trans}}</strong>
  579.                     {{ message }}
  580.                     <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  581.                 </div>
  582.             </div>
  583.         {% endfor %}
  586.     <script src="https://unpkg.com/@teleporthq/teleport-custom-scripts"></script>
  587.     <script>
  588.       window.onload = () => {
  589.         const runAllScripts = () => {
  590.           initializeAllSliders();
  591.         };
  593.         const listenForUrlChanges = () => {
  594.           let url = location.href;
  595.           document.body.addEventListener(
  596.             "click",
  597.             () => {
  598.               requestAnimationFrame(() => {
  599.                 if (url !== location.href) {
  600.                   runAllScripts();
  601.                   url = location.href;
  602.                 }
  603.               });
  604.             },
  605.             true
  606.           );
  607.         };
  609.         const initializeAllSliders = () => {
  610.           const allSliders = document.querySelectorAll('[data-type="slider"]');
  611.           allSliders.forEach((carrousel) => {
  612.             initializeSlider(carrousel);
  613.           });
  614.         };
  616.         const initializeSlider = (carrousel) => {
  617.           let currentSlide = 0;
  619.           const slides = carrousel.querySelectorAll('[data-type="slide"]');
  620.           const nextSlideBtns = carrousel.querySelectorAll(
  621.             '[data-action="nextSlide"]'
  622.           );
  623.           const previousSlideBtns = carrousel.querySelectorAll(
  624.             '[data-action="previousSlide"]'
  625.           );
  627.           const changeSlide = (slideIndex, action) => {
  628.             currentSlide = slideIndex;
  630.             switch (action) {
  631.               case "next":
  632.                 slideIndex === slides.length - 1
  633.                   ? (currentSlide = 0)
  634.                   : currentSlide++;
  635.                 break;
  636.               case "previous":
  637.                 slideIndex === 0
  638.                   ? (currentSlide = slides.length - 1)
  639.                   : currentSlide--;
  640.             }
  642.             carrousel.style.transform = `translateX(${-100 * currentSlide}%)`;
  643.           };
  645.           previousSlideBtns.forEach((btn) => {
  646.             btn.addEventListener("click", () =>
  647.               changeSlide(currentSlide, "previous")
  648.             );
  649.           });
  651.           nextSlideBtns.forEach((btn) => {
  652.             btn.addEventListener("click", () =>
  653.               changeSlide(currentSlide, "next")
  654.             );
  655.           });
  656.         };
  658.         runAllScripts();
  659.       };
  660.     </script>
  661.   </body>
  662. </html>