templates/user/start/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block metaTitle %}Startseite - {{ parent() }}{% endblock %}
  4. {#
  5. // .............
  6. // Todo: Auf H1 prüfen
  7. // .............
  8. #}
  11. {% block body %}
  13.     {% set terminIDs = [] %}
  15.     {% set desktopHintergrundbild = asset('img/campus/startseite/Header1.png') %}
  16.     {% set mobileHintergrundbild = asset('img/campus/startseite/Header1.png') %}
  17.     {% set buttonfarbe = 'btn-primary' %}
  18.     <style>
  19.         .schriftfarbe {
  20.             color: white;
  21.         }
  22.     </style>
  24.     {% set kundendesign = false %}
  26.     {% if is_granted('ROLE_FIRMA') %}
  27.         {% if app.user.firmenprofil.bildStartseite == 'ja' %}
  28.             {% set kundendesign = true %}
  29.             {% set desktopHintergrundbild = asset('uploads/firmendesign/bilder/' ~ app.user.firmenprofil.bildDesktop.dateiname ) %}
  30.             {% set mobileHintergrundbild = asset('uploads/firmendesign/bilder/' ~ app.user.firmenprofil.bildMobile.dateiname ) %}
  31.             {% set buttonfarbe = 'style="background-color: ' ~ app.user.firmenprofil.buttonfarbe ~ ';"' %}
  32.             <style>
  33.                 .top-header-image-section {
  34.                     background-color: {{ app.user.firmenprofil.primarfarbe }};
  35.                 }
  37.                 .schriftfarbe {
  38.                     color: {{ app.user.firmenprofil.schriftfarbe }};
  39.                 }
  41.                 .andereButtonfarbe {
  42.                     background-color: {{ app.user.firmenprofil.buttonfarbe }};
  43.                 }
  44.             </style>
  45.         {% endif %}
  46.     {% endif %}
  48.     <!-- Hero section-->
  49.     <section class="top-header-image-section">
  50.         <div class="container">
  51.             <div class="header-image d-md-block d-none" style="background-image: url('{{ desktopHintergrundbild }}')">
  52.                 <img src="{{ desktopHintergrundbild }}" class="img-fluid invisible"/>
  53.             </div>
  54.             {% if kundendesign %}
  55.                 <div class="header-image bg-white d-md-none d-block text-center" {#style="background-image: url('{{ mobileHintergrundbild }}')"#}>
  56.                     <img src="{{ mobileHintergrundbild }}" class="img-fluid p-2" style="max-height: 100px"/>
  57.                 </div>
  58.             {% else %}
  59.                 <div class="mt-0">
  60.                     &nbsp;
  61.                 </div>
  62.             {% endif %}
  64.             <div class="info-text mt-lg-5 mt-md-1 mt-4 text-center text-md-start">
  65.                 <h1 class="fw-bolder schriftfarbe ueberschrift-startseite" style="size: 24em">
  66.                     Es steckt so viel<br>mehr in dir!
  67.                 </h1>
  68.                 <div class="fs-sm schriftfarbe ueberschrift2-startseite">Mach dich fit für die Zukunft.<br>Finde dein Weiterbildungsangebot!</div>
  70.                 <div class="mt-lg-5 mt-md-3 mt-sm-3 mt-3">
  71.                     {#
  72.                     <a class="btn btn-primary border-0 andereButtonfarbe p-1 ps-2 pe-2" href="{{ path ('user_konfigurator_auswahl') }}">
  73.                         <div class="d-flex align-items-center fw-bolder"><i class="mdi mdi-compass me-2 fs-4"></i> Stärkenkompass starten</div>
  74.                     </a>
  75. #}
  76.                     <a class="btn btn-primary border-0 andereButtonfarbe p-1 ps-2 pe-2 seminarlink-navigationsleiste" href="#">
  77.                         <div class="d-flex align-items-center fw-bolder"><i class="mdi mdi-card-search-outline me-2 fs-4"></i> Seminare suchen</div>
  78.                     </a>
  79.                 </div>
  80.             </div>
  82.         </div>
  84.     </section>
  86.     <section class="seminar-slider-section container position-relative mt-md-n10">
  87.         <div class="card px-lg-2 border-0 shadow-lg">
  88.             <div class="card-body px-1 pt-4 pb-4">
  89.                 <h3 class="text-center pb-3">Unsere Seminarempfehlungen</h3>
  92.                 {% if schulungen != null %}
  93.                     <div class="row pt-2 mx-n2">
  94.                         {% for schulung in schulungen %}
  95.                             {% set istFavorit = false %}
  96.                             {% for favorit in favoriten %}
  97.                                 {% if schulung.id == favorit.schulung.id %}
  98.                                     {% set istFavorit = true %}
  99.                                 {% endif %}
  100.                             {% endfor %}
  102.                             <!-- Product-->
  103.                             <div class="col-lg-4 col-md-6 px-2 mb-grid-gutter">
  104.                                 <!-- Product-->
  105.                                 <div class="card product-card-alt">
  106.                                     <div class="product-thumb">
  107.                                         <button href="{{ path ('user_produkt_favoriten_speichern',{id:schulung.id}) }}"
  108.                                                 title="Zu Favoriten hinzufügen"
  109.                                                 class="btn-wishlist btn-sm btn-heart-favorite {% if istFavorit %}d-none{% endif %}"
  110.                                                 data-herz-button-art="plus"
  111.                                                 data-schulung-id="{{ schulung.id }}"
  112.                                                 type="button">
  113.                                             <i class="mdi mdi-heart-plus fs-4"></i>
  114.                                         </button>
  115.                                         <button href="{{ path ('user_produkt_favoriten_loeschen',{id:schulung.id}) }}"
  116.                                                 title="aus Favoriten entfernen"
  117.                                                 class="btn-wishlist btn-sm btn-heart-favorite {% if istFavorit == false %}d-none{% endif %}"
  118.                                                 data-herz-button-art="minus"
  119.                                                 data-schulung-id="{{ schulung.id }}"
  120.                                                 type="button">
  121.                                             <i class="mdi mdi-heart-minus fs-4"></i>
  122.                                         </button>
  123.                                         <a class="product-thumb-overlay"
  124.                                            href="{{ path ('produkt_details',{id:schulung.id}) }}{% if schulung.nurCelsisten == 4 %}?guid={{ schulung.importFehler }}{% endif %}"></a>
  125.                                         {% if schulung.importId == 0 %}
  126.                                             <img src="{{ asset('uploads/schulungen/' ~ schulung.id ~ '/titelbild/' ~ schulung.titelbild ) }}">
  127.                                         {% else %}
  128.                                             <div class="ratio ratio-16x9">
  129.                                                 <div style="background-image: url('{{ asset('uploads/schulungen/' ~ schulung.id ~ '/titelbild/' ~ schulung.titelbild) }}'); width: 100%; background-size: cover; background-repeat: no-repeat;"></div>
  130.                                             </div>
  131.                                         {% endif %}
  133.                                         <i class="mdi mdi-heart fs-1 text-primary heart-favorite {% if istFavorit == false %}d-none{% endif %}"></i>
  135.                                     </div>
  136.                                     <div class="card-body">
  137.                                         <div class="d-flex flex-wrap justify-content-between align-items-start pb-2">
  138.                                             <div class="text-muted fs-xs me-1">
  139.                                                 {% for firmenprofil in firmenprofile %}
  140.                                                     {% if schulung.erstellerFirmenId == firmenprofil.id %}
  141.                                                         von <a class="product-meta fw-medium"
  142.                                                                href="#">{{ firmenprofil.firmenname }}</a>
  143.                                                     {% endif %}
  144.                                                 {% endfor %}
  145.                                             </div>
  148.                                             {% set anzahlSterneVergabe = 0 %}
  149.                                             {% set SterneGesamt = 0 %}
  150.                                             {% set SterneErgebnis = 0 %}
  151.                                             {% for bewertung in schulung.bewertungen %}
  152.                                                 {% set anzahlSterneVergabe = anzahlSterneVergabe + 1 %}
  153.                                                 {% set SterneGesamt = SterneGesamt + bewertung.sterne %}
  154.                                             {% endfor %}
  155.                                             {% if anzahlSterneVergabe != 0 %}
  156.                                                 {% set SterneErgebnis = SterneGesamt / anzahlSterneVergabe %}
  157.                                             {% endif %}
  159.                                             <div class="star-rating">
  160.                                                 <i class="star-rating-icon ci-star{% if SterneErgebnis >= 1 %}-filled active{% endif %}"></i>
  162.                                                 {% for i in 1..4 %}
  163.                                                     {% set stern = '' %}
  164.                                                     {% if SterneErgebnis >= i + 0.5 %}
  165.                                                         {% set stern = '-half active' %}
  166.                                                     {% endif %}
  167.                                                     {% if SterneErgebnis >= i + 1 %}
  168.                                                         {% set stern = '-filled active' %}
  169.                                                     {% endif %}
  170.                                                     <i class="star-rating-icon ci-star{{ stern }}"></i>
  171.                                                 {% endfor %}
  172.                                             </div>
  173.                                         </div>
  174.                                         <h3 class="product-title fs-sm mb-2 fw-bold">
  175.                                             <a href="{{ path ('produkt_details',{id:schulung.id}) }}{% if schulung.nurCelsisten == 4 %}?guid={{ schulung.importFehler }}{% endif %}">{{ schulung.schulungName }}</a>
  176.                                         </h3>
  177.                                         <div class="fs-sm me-2">{{ schulung.kurzbeschreibung|u.truncate(130, '...',false) }}</div>
  178.                                         <div class="d-flex flex-wrap justify-content-between align-items-center mt-3">
  179.                                             <div class="fs-sm me-2 text-muted">{{ schulung.schulungsart.name }}</div>
  181.                                             {% if schulung.schulungsTermine|length > 0 %}
  182.                                                 {% set terminGefunden = 0 %}
  184.                                                 {% for termin in schulung.schulungsTermine|sort((a, b) => a.von <=> b.von) %}
  185.                                                     {% if terminGefunden == 0 %}
  186.                                                         {% set terminAnzeigen = 0 %}
  188.                                                         {% if termin.anmeldeschluss == null %}
  189.                                                             {% if date(termin.von) >= date('+0seconds', 'Europe/Berlin') %}
  190.                                                                 {% set terminAnzeigen = 1 %}
  191.                                                             {% endif %}
  192.                                                         {% else %}
  193.                                                             {% if termin.anmeldeschluss >= date('-1days', 'Europe/Berlin') %}
  194.                                                                 {% set terminAnzeigen = 1 %}
  195.                                                             {% endif %}
  196.                                                         {% endif %}
  198.                                                         {% if terminAnzeigen == 1 %}
  199.                                                             {% set terminIDs = terminIDs|merge([termin.id]) %}
  201.                                                             <div class="text-muted rounded-1 py-1 px-2 small"><i
  202.                                                                         class="mdi mdi-clock-outline me-1"></i>{{ termin.von|date("d.m.Y") }}</div>
  203.                                                             {% set terminGefunden = 1 %}
  204.                                                         {% endif %}
  205.                                                     {% endif %}
  206.                                                 {% endfor %}
  207.                                             {% endif %}
  208.                                         </div>
  209.                                     </div>
  210.                                 </div>
  211.                                 <div class="d-md-none border-top"></div>
  212.                             </div>
  213.                         {% endfor %}
  215.                         <div id="weitere-seminare">
  216.                         </div>
  218.                     </div>
  219.                 {% endif %}
  221.                 <div class="text-center">
  222.                     <a class="btn btn-outline-primary {#weitere-seminare-anzeigen#} seminarlink-navigationsleiste" href="#">
  223.                         weitere Seminare anzeigen
  224.                         <i class="ci-arrow-right fs-ms ms-1"></i>
  225.                     </a>
  226.                 </div>
  228.             </div>
  229.         </div>
  230.     </section>
  234.     {#
  235.     {% include('/user/start/index_evtl.html.twig') %}
  236.     #}
  240.     <section class="bg-size-cover bg-position-center pt-5 pb-4 pb-lg-5 hintergrundfarbe">
  241.         <div class="container pt-lg-3">
  242.             {% if not is_granted('ROLE_MITGLIED') %}
  243.                 <h2 class="h3 mb-3 pb-4 text-light text-center">Warum unseren Campus?</h2>
  244.             {% else %}
  245.                 <h2 class="h3 mb-3 pb-4 text-light text-center">Das wichtigste Projekt bei uns bist du!</h2>
  246.             {% endif %}
  247.             <div class="row pt-lg-2">
  248.                 <div class="col-lg-3 col-md-6 mb-grid-gutter">
  249.                     <div class="d-inline-flex text-start"><i class="h1 mdi mdi-order-alphabetical-ascending text-white"></i>
  250.                         <div class="ps-3">
  251.                             <h6 class="text-light fs-base mb-1">Vielfältiges Angebot:</h6>
  252.                             <p class="text-light fs-ms opacity-70 mb-0">
  253.                                 Wir bündeln alle relevanten Seminare der SHK Branche - vom Online Live-Seminar bis zum mehrtägigen Präsenztraining und Qualifizierungsangebot.
  254.                             </p>
  255.                         </div>
  256.                     </div>
  257.                 </div>
  258.                 <div class="col-lg-3 col-md-6 mb-grid-gutter">
  259.                     <div class="d-inline-flex text-start"><i class="h1 mdi mdi-chart-line text-white"></i>
  260.                         <div class="ps-3">
  261.                             <h6 class="text-light fs-base mb-1">Das richtige Angebot für jedes Ziel:</h6>
  262.                             <p class="text-light fs-ms opacity-70 mb-0">
  263.                                 Finde heraus, welche Qualifizierung geeignet ist.
  264.                                 Klicke auf den Stärkenkompass und finde so das richtige Angebot um deine Pontenziale zu entwickeln.
  265.                             </p>
  266.                         </div>
  267.                     </div>
  268.                 </div>
  269.                 <div class="col-lg-3 col-md-6 mb-grid-gutter">
  270.                     <div class="d-inline-flex text-start"><i class="h1 mdi mdi-account-check text-white"></i>
  271.                         <div class="ps-3">
  272.                             <h6 class="text-light fs-base mb-1">Erfahrene Dozenten:</h6>
  273.                             <p class="text-light fs-ms opacity-70 mb-0">
  274.                                 Unsere Dozenten verbinden Fachwissen mit Praxiserfahrung und vermitteln ihr Wissen daher besonders verständlich.
  275.                             </p>
  276.                         </div>
  277.                     </div>
  278.                 </div>
  279.                 <div class="col-lg-3 col-md-6 mb-grid-gutter">
  280.                     <div class="d-inline-flex text-start"><i class="h1 mdi mdi-card-account-details text-white"></i>
  281.                         <div class="ps-3">
  282.                             <h6 class="text-light fs-base mb-1">Bewertungen und Teilnehmer:</h6>
  283.                             <p class="text-light fs-ms opacity-70 mb-0">Unabhängige Bewertungen helfen dir, den besten und individuell passenden Trainer und Anbieter zu finden.</p>
  284.                         </div>
  285.                     </div>
  286.                 </div>
  287.             </div>
  288.         </div>
  289.     </section>
  293.     <!-- Blog posts carousel-->
  294.     <section class="py-5">
  295.         <div class="container py-lg-3">
  296.             <h2 class="h1 text-center">Blogs</h2>
  297.             <p class="text-muted text-center mb-3 pb-4">Hier erfährst du was die Branche bewegt.</p>
  298.             <div class="tns-carousel">
  299.                 <div class="tns-carousel-inner"
  300.                      data-carousel-options="{&quot;items&quot;: 2, &quot;gutter&quot;: 15, &quot;controls&quot;: false, &quot;nav&quot;: true, &quot;responsive&quot;: {&quot;0&quot;:{&quot;items&quot;:1},&quot;500&quot;:{&quot;items&quot;:2},&quot;768&quot;:{&quot;items&quot;:3}, &quot;992&quot;:{&quot;items&quot;:3, &quot;gutter&quot;: 30}}}">
  302.                     {% for blog in blogs %}
  303.                         <div>
  304.                             <div class="card">
  305.                                 <a class="blog-entry-thumb" href="{{ path ('user_blog',{id:blog.id}) }}">
  306.                                     <img class="card-img-top"
  307.                                          src="{{ asset('/uploads/blogs/' ~ blog.firma.id ~ '/titelbild/' ~ blog.id ~ '/' ~ blog.titelbild) }}">
  308.                                 </a>
  309.                                 <div class="card-body">
  310.                                     <h2 class="h6 blog-entry-title">
  311.                                         <a href="{{ path ('user_blog',{id:blog.id}) }}">{{ blog.titel }}</a>
  312.                                     </h2>
  313.                                     <p class="fs-sm">{{ blog.kurzbeschreibung }}</p>
  314.                                     <div class="fs-xs text-nowrap">
  315.                                         <span class="text-nowrap text-muted">{{ blog.datum|date("d.m.Y") }}</span>
  316.                                         <span class="blog-entry-meta-divider mx-2"></span>
  317.                                         <span class="text-nowrap text-muted">{{ blog.firma.firmenname }}</span>
  318.                                     </div>
  319.                                 </div>
  320.                             </div>
  321.                         </div>
  322.                     {% endfor %}
  323.                 </div>
  324.             </div>
  325.             <!-- More button-->
  326.             <div class="text-center pt-5 mt-md-2 d-none"><a class="btn btn-outline-primary" href="#">weitere NEWS anzeigen<i class="ci-arrow-right fs-ms ms-1"></i></a></div>
  327.         </div>
  328.     </section>
  332.     <script>
  333.         jQuery(function ($) {
  335.             $('#staerkenkompass-mobil-ansicht').removeClass('d-none')
  336.             $('#home-mobil-ansicht').addClass('d-none')
  337.             {% if app.user != null and app.user.firmenProfil != null %}
  338.             $('#dashboard-mobil-ansicht').removeClass('d-none')
  339.             {% endif %}
  342.             let neueSeminareCounter = 0
  344.             let array_termine_vorhanden = [];
  345.             {% for terminID in terminIDs %}
  346.             array_termine_vorhanden.push({{ terminID }});
  347.             {% endfor %}
  350.             $(document).on('click', '.weitere-seminare-anzeigen', function (event) {
  351.                 event.preventDefault();
  352.                 neueSeminareCounter ++;
  353.                 $('<div id="weitere-seminare-' + neueSeminareCounter + '"></div>').appendTo('#weitere-seminare');
  355.                 $.ajax({
  356.                     'url': '{{ path('user_start_weitere') }}',
  357.                     'method': 'post',
  358.                     'data': {
  359.                         'array_termine_vorhanden': array_termine_vorhanden,
  360.                         'neueSeminareCounter': neueSeminareCounter,
  361.                     },
  362.                     'success': function (response) {
  363.                         document.getElementById("weitere-seminare-" + neueSeminareCounter).innerHTML = response['weitere_seminare_gefunden'];
  364.                         array_termine_vorhanden = $.merge(array_termine_vorhanden, response['weitere_termine_ids']);
  365.                         if (response['anzahl_termine'] < 3) {
  366.                             $('.weitere-seminare-anzeigen').addClass('d-none');
  367.                         }
  368.                     },
  369.                     'error': function (response) {
  370.                         console.log('Konnte nicht gespeichert werden.' + response)
  371.                     }
  372.                 });
  374.             });
  377.             $(document).on('click', '.btn-heart-favorite', function (event) {
  378.                 event.preventDefault();
  380.                 let $button = $(this);
  381.                 let $container = $button.closest('.product-thumb');
  382.                 let href = $(this).attr('href');
  383.                 let buttonArt = $(this).attr('data-herz-button-art');
  385.                 $.ajax({
  386.                     'url': href,
  387.                     'method': 'get',
  388.                     'success': function (response) {
  389.                         {% if is_granted('ROLE_MITGLIED') %}
  390.                         if (response['anzahlFavoriten'] > 0) {
  391.                             $('.favoriten-handy-navigation-link').removeClass('d-none');
  392.                         } else {
  393.                             $('.favoriten-handy-navigation-link').addClass('d-none');
  394.                         }
  395.                         {% endif %}
  396.                         $button.addClass('d-none');
  397.                         if (buttonArt === 'plus') {
  398.                             $('button[data-herz-button-art="minus"]', $container).removeClass('d-none');
  399.                             $('.heart-favorite', $container).removeClass('d-none');
  400.                         }
  401.                         if (buttonArt === 'minus') {
  402.                             $('button[data-herz-button-art="plus"]', $container).removeClass('d-none');
  403.                             $('.heart-favorite', $container).addClass('d-none');
  404.                         }
  405.                     },
  406.                     'error': function (response) {
  407.                         console.log('Fehler bei Ajax-Link' + response)
  408.                     }
  409.                 });
  410.             });
  411.         });
  412.     </script>
  414. {% endblock %}