templates/inicio/inicio.html.twig line 1

Open in your IDE?
  1. {% extends 'common/base-login.html.twig' %}
  3. {% block form %}
  4.     <style>
  5.         html, body {
  6.             height: 100%;
  7.             margin: 0;
  8.             background:
  9.                     linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
  10.                     url('{{ asset("assets/images/backgrounds/background_login.png") }}') center/cover;
  11.         }
  13.         .login-bg {
  14.             inset: 0;
  15.             background:
  16.                     linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
  17.                     url('{{ asset("assets/images/backgrounds/background_login.png") }}') center/cover no-repeat;
  18.         }
  20.         .split-screen {
  21.             position: relative;
  22.             z-index: 1;
  23.             display: grid;
  24.             grid-template-columns: 1.2fr 1fr 0.8fr;
  25.             min-height: 100vh;
  26.         }
  28.         .left-side {
  29.             display: flex;
  30.             align-items: center;
  31.             padding: 4rem 3rem;
  32.             color: #fafffd;
  33.         }
  35.         .center-side {
  36.             display: flex;
  37.             justify-content: center;
  38.             align-items: center;
  39.             padding: 2rem;
  40.         }
  42.         .container-login {
  43.             width: 100%;
  44.             max-width: 950px;
  45.             margin-top: -150px;
  46.         }
  48.         /* LOGO PRINCIPAL MÁS GRANDE */
  49.         .main-logo {
  50.             max-width: 510px; /* 50% más grande */
  51.             display: block;
  52.             margin: 0 auto;
  53.             padding: 20px;
  54.         }
  56.         .apps-grid {
  57.             width: 100%;
  58.             display: grid;
  59.             grid-template-columns: repeat(3, 1fr);
  60.             gap: 2rem;
  61.         }
  63.         /* columnas dinámicas según nº de módulos activos */
  64.         .apps-grid.apps-1-cols {
  65.             grid-template-columns: 1fr;
  66.         }
  67.         .apps-grid.apps-2-cols {
  68.             grid-template-columns: repeat(2, 1fr);
  69.         }
  70.         .apps-grid.apps-3-cols {
  71.             grid-template-columns: repeat(3, 1fr);
  72.         }
  74.         .app-card {
  75.             background: rgba(0,0,0,0);
  76.             /*backdrop-filter: blur(6px);*/
  77.             padding: 3rem 2rem;
  78.             text-align: center;
  79.             border-radius: 12px;
  80.             /*box-shadow: 0 8px 30px rgba(0,0,0,0.25);*/
  81.             color: #fafffd;
  82.             transition: transform .25s, box-shadow .25s;
  83.             min-height: 330px;
  84.             display: flex;
  85.             flex-direction: column;
  86.             justify-content: space-between;
  87.         }
  89.         .app-card:nth-child(1) { /* Venues */ }
  90.         .app-card:nth-child(2) { /* Catering */ }
  91.         .app-card:nth-child(3) { /* AV */ }
  93.         /* SOMBRAS COLOREADAS EN HOVER */
  94.         .app-card:nth-child(1):hover { /* Venues */
  95.             box-shadow: 0 0 22px rgba(189,191,9,0.85);
  96.             background: rgba(189,191,9,0.05);
  97.         }
  99.         .app-card:nth-child(2):hover { /* Catering */
  100.             box-shadow: 0 0 22px rgba(255,146,28,0.85);
  101.             background: rgba(255,146,28,0.05);
  102.         }
  104.         .app-card:nth-child(3):hover { /* AV */
  105.             box-shadow: 0 0 22px rgba(0,191,139,0.85);
  106.             background: rgba(0,191,139,0.05);
  107.         }
  109.         .app-logo {
  110.             max-width: 170px;
  111.             margin: 0 auto 1rem auto;
  112.         }
  114.         .app-description {
  115.             font-size: 1.3rem;
  116.             color: #ded9e2;
  117.             margin-bottom: 1.5rem;
  118.         }
  120.         .btn-app {
  121.             border-radius: .75rem;
  122.             padding: .6rem 1.4rem;
  123.         }
  125.         .right-side {
  126.             display: flex;
  127.             align-items: center;
  128.             padding: 4rem 3rem;
  129.             color: #fafffd;
  130.         }
  132.         .feature {
  133.             display: flex;
  134.             gap: .85rem;
  135.             align-items: flex-start;
  136.             margin-bottom: .9rem;
  137.         }
  139.         .feature-dot {
  140.             width: .65rem;
  141.             height: .65rem;
  142.             border-radius: 50%;
  143.             background: #fafffd;
  144.             margin-top: .45rem;
  145.         }
  147.         @media (max-width: 1400px) {
  148.             .apps-grid { grid-template-columns: 1fr; max-width: 450px; margin: 0 auto; }
  149.         }
  151.         @media (max-width: 1200px) {
  152.             .split-screen { grid-template-columns: 1fr 1fr; }
  153.             .right-side { display: none; }
  154.         }
  156.         @media (max-width: 768px) {
  157.             .split-screen { grid-template-columns: 1fr; }
  158.             .left-side { display: none; }
  159.             .center-side { padding-top: 2rem; }
  160.         }
  161.     </style>
  163.     {% set activeModules = 0 %}
  164.     {% if configuration.mvenues %}{% set activeModules = activeModules + 1 %}{% endif %}
  165.     {% if configuration.mcatering %}{% set activeModules = activeModules + 1 %}{% endif %}
  166.     {% if configuration.mav %}{% set activeModules = activeModules + 1 %}{% endif %}
  168.     <div class="login-bg"></div>
  170.     <div class="split-screen">
  172.         <!-- IZQUIERDA -->
  173.         <section class="left-side">
  174.             <div>
  175.                 <h1>Plataforma MANTE</h1>
  176.                 <h3>
  177.                     Accede a cualquier aplicación desde un único punto:
  178.                     gestión de venues, catering y audiovisuales para eventos.
  179.                 </h3>
  180.             </div>
  181.         </section>
  183.         <!-- CENTRO -->
  184.         <section class="center-side">
  185.             <div class="container-login">
  187.                 <!-- LOGO PRINCIPAL -->
  188.                 <img src="{{ asset('assets/images/platform/Logo_Mante.png') }}"
  189.                      class="main-logo"
  190.                      alt="MANTE">
  192.                 {#   Mensajes de envío de correo y cambios satisfactorios   #}
  193.                 {% for label, messages in app.flashes %}
  194.                     {% for message in messages %}
  195.                         <div style="text-align: center; padding: 10px; margin-bottom: 15px; border-radius: 4px; color: black; background-color: {{ label == 'danger' ? '#dc3545' : '#ffffff' }};">
  196.                             <strong>{{ message }}</strong>
  197.                         </div>
  198.                     {% endfor %}
  199.                 {% endfor %}
  201.                 <div class="apps-grid apps-{{ activeModules }}-cols">
  203.                     {% if configuration.mvenues %}
  204.                         <!-- Venues -->
  205.                         <div class="app-card">
  206.                             <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 24 24" style="display: block; margin: 0 auto 1rem auto; color:#bdbf09;">
  207.                                 <path fill="currentColor" d="M12 2l-10 6h20l-10-6zM4 9h16v2h-16v-2zM5 12h2v8h-2v-8zM9 12h2v8h-2v-8zM13 12h2v8h-2v-8zM17 12h2v8h-2v-8zM2 21h20v2h-20v-2z"></path>
  208.                             </svg>
  209.                             <img src="{{ asset('/uploads/branding/venues/logo_ManteVenues.png') }}"
  210.                                  class="app-logo" alt="ManteVenues">
  212.                             <p class="app-description">
  213.                                 Espacios, salas, reservas y presupuestos.
  214.                             </p>
  216.                             <a href="{{ path('app_login_branded', {'type': 'venues'}) }}" class="btn bg-btn-limerick btn-app">
  217.                                 Entrar
  218.                             </a>
  219.                         </div>
  220.                     {% endif %}
  222.                     {% if configuration.mcatering %}
  223.                         <!-- Catering -->
  224.                         <div class="app-card">
  225.                             <i class="icon-cup2" style="font-size:42px; color:#FF921C; margin-bottom:1rem;"></i>
  227.                             <img src="{{ asset('/uploads/branding/catering/logo_ManteCatering.png') }}"
  228.                                  class="app-logo" alt="ManteCatering">
  230.                             <p class="app-description">
  231.                                 Menús, productos y coordinación de servicios.
  232.                             </p>
  234.                             <a href="{{ path('app_login_branded', {'type': 'catering'}) }}" class="btn bg-btn-orange_cat btn-app">
  235.                                 Entrar
  236.                             </a>
  237.                         </div>
  238.                     {% endif %}
  240.                     {% if configuration.mav %}
  241.                         <!-- AV -->
  242.                         <div class="app-card">
  243.                             <i class="icon-video-camera" style="font-size:42px; color:#00bf8b; margin-bottom:1rem;"></i>
  245.                             <img src="{{ asset('/uploads/branding/av/logo_ManteAv.png') }}"
  246.                                  class="app-logo" alt="ManteAV">
  248.                             <p class="app-description">
  249.                                 Equipamiento técnico e inventario de audiovisuales.
  250.                             </p>
  252.                             <a href="{{ path('app_login_branded', {'type': 'av'}) }}" class="btn bg-btn-green_av btn-app">
  253.                                 Entrar
  254.                             </a>
  255.                         </div>
  256.                     {% endif %}
  258.                 </div>
  260.             </div>
  261.         </section>
  263.         <!-- DERECHA -->
  264.         <aside class="right-side">
  265.             <div>
  266.                 <div class="feature">
  267.                     <h5><strong>Todo centralizado</strong><br>Acceso unificado a todas las áreas.</h5>
  268.                 </div>
  270.                 <div class="feature">
  271.                     <h5><strong>Profesional</strong><br>Diseño coherente en todo el ecosistema MANTE.</h5>
  272.                 </div>
  274.                 <div class="feature">
  275.                     <h5><strong>Eficiente</strong><br>Optimiza tu trabajo en cada módulo especializado.</h5>
  276.                 </div>
  277.             </div>
  278.         </aside>
  280.     </div>
  282. {% endblock %}
  284. {% block javascripts %}{% endblock %}