templates/home/home.html.twig line 1

Open in your IDE?
  2. {% extends 'baseFront.html.twig' %}
  4. {% block title %}Hello HomeController!{% endblock %}
  6. {% block body %}
  8. <style>
  9.         /* ========================================
  10.            BEANSTALK - Style inspiré d'Addixo
  11.            ======================================== */
  13.         /* Variables CSS */
  14.         :root {
  15.             /* Couleurs principales - Style Addixo */
  16.             --primary-blue: #003d7a;
  17.             --primary-blue-dark: #002855;
  18.             --primary-blue-light: #0066cc;
  19.             --secondary-blue: #2563eb;
  20.             --accent-green: #10b981;
  21.             --accent-orange: #f59e0b;
  23.             /* Couleurs neutres */
  24.             --text-primary: #1a1a1a;
  25.             --text-secondary: #4a4a4a;
  26.             --text-light: #6b7280;
  27.             --bg-white: #ffffff;
  28.             --bg-light: #f8f9fa;
  29.             --bg-gray: #f3f4f6;
  30.             --border-color: #e5e7eb;
  32.             /* Typographie */
  33.             --font-primary: 'Roboto', sans-serif;
  34.             --font-secondary: 'Open Sans', sans-serif;
  36.             /* Espacements */
  37.             --spacing-xs: 0.5rem;
  38.             --spacing-sm: 1rem;
  39.             --spacing-md: 1.5rem;
  40.             --spacing-lg: 2rem;
  41.             --spacing-xl: 3rem;
  42.             --spacing-xxl: 5rem;
  44.             /* Transitions */
  45.             --transition: all 0.3s ease;
  46.             --transition-fast: all 0.2s ease;
  48.             /* Ombres */
  49.             --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
  50.             --shadow-md: 0 4px 8px rgba(0,0,0,0.1);
  51.             --shadow-lg: 0 10px 20px rgba(0,0,0,0.15);
  52.             --shadow-xl: 0 20px 40px rgba(0,0,0,0.2);
  53.         }
  55.         /* Reset et Base */
  56.         * {
  57.             margin: 0;
  58.             padding: 0;
  59.             box-sizing: border-box;
  60.         }
  62.         html {
  63.             scroll-behavior: smooth;
  64.         }
  66.         body {
  67.             font-family: var(--font-secondary);
  68.             font-size: 16px;
  69.             
  70.             color: var(--text-primary);
  71.             background-color: var(--bg-white);
  72.             overflow-x: hidden;
  73.         }
  75.         
  77.         /* Typography */
  78.         h1, h2, h3, h4, h5, h6 {
  79.             font-family: var(--font-primary);
  80.             font-weight: 700;
  81.             line-height: 1.2;
  82.             margin-bottom: 1rem;
  83.         }
  85.         h1 { font-size: 3rem; }
  86.         h2 { font-size: 2.5rem; }
  87.         h3 { font-size: 1.875rem; }
  89.         p {
  90.             margin-bottom: 1rem;
  91.             color: var(--text-secondary);
  92.         }
  94.         a {
  95.             text-decoration: none;
  96.             color: inherit;
  97.             transition: var(--transition);
  98.         }
  100.         
  102.         
  104.         /* Contact Form */
  105.         .contact-form-wrapper {
  106.             background: white;
  107.             padding: 2rem;
  108.             border-radius: 8px;
  109.             box-shadow: var(--shadow-md);
  110.         }
  112.         .form-header {
  113.             margin-bottom: 2rem;
  114.         }
  116.         .form-header h3 {
  117.             color: #6b7280;
  118.             margin-bottom: 0.5rem;
  119.         }
  121.         .form-header p {
  122.             color: var(--text-light);
  123.             font-size: 0.9rem;
  124.         }
  126.         .form-row {
  127.             display: grid;
  128.             grid-template-columns: 1fr 1fr;
  129.             gap: 1rem;
  130.             margin-bottom: 1rem;
  131.         }
  133.         .form-group {
  134.             margin-bottom: 1rem;
  135.         }
  137.         .form-group label {
  138.             display: block;
  139.             margin-bottom: 0.5rem;
  140.             color: var(--text-primary);
  141.             font-weight: 500;
  142.         }
  144.         .form-group input,
  145.         .form-group select,
  146.         .form-group textarea {
  147.             width: 100%;
  148.             padding: 0.75rem;
  149.             border: 1px solid var(--border-color);
  150.             border-radius: 4px;
  151.             font-family: inherit;
  152.             transition: var(--transition);
  153.             background: white;
  154.         }
  156.         .form-group select {
  157.             cursor: pointer;
  158.             appearance: none;
  159.             background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  160.             background-repeat: no-repeat;
  161.             background-position: right 0.75rem center;
  162.             background-size: 1.5em 1.5em;
  163.             padding-right: 2.5rem;
  164.         }
  166.         .form-group select optgroup {
  167.             font-weight: 600;
  168.             color: var(--primary-blue);
  169.         }
  171.         .form-group select option {
  172.             padding: 0.5rem;
  173.             color: var(--text-primary);
  174.         }
  176.         .form-group textarea {
  177.             resize: vertical;
  178.             min-height: 120px;
  179.         }
  181.         .form-group input:focus,
  182.         .form-group select:focus,
  183.         .form-group textarea:focus {
  184.             outline: none;
  185.             border-color: var(--primary-blue);
  186.             box-shadow: 0 0 0 3px rgba(0, 61, 122, 0.1);
  187.         }
  189.         .checkbox-group {
  190.             display: flex;
  191.             align-items: start;
  192.             gap: 0.5rem;
  193.         }
  195.         .checkbox-group input[type="checkbox"] {
  196.             width: auto;
  197.             margin-top: 0.25rem;
  198.         }
  200.         .checkbox-group label {
  201.             margin-bottom: 0;
  202.         }
  204.         .checkbox-group a {
  205.             color: var(--primary-blue);
  206.             text-decoration: underline;
  207.         }
  209.         .btn-submit {
  210.             width: 100%;
  211.             padding: 1rem;
  212.             background: #6b7280;
  213.             color: white;
  214.             border: none;
  215.             border-radius: 4px;
  216.             font-size: 1rem;
  217.             font-weight: 600;
  218.             cursor: pointer;
  219.             transition: var(--transition);
  220.             display: flex;
  221.             align-items: center;
  222.             justify-content: center;
  223.             gap: 0.5rem;
  224.         }
  226.         .btn-submit:hover {
  227.             background: #6b7280;
  228.             transform: translateY(-2px);
  229.         }
  231.         /* Footer */
  232.         .footer {
  233.             background: var(--text-primary);
  234.             color: white;
  235.             padding: 3rem 0 1rem;
  236.         }
  238.         .footer-top {
  239.             display: grid;
  240.             grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  241.             gap: 2rem;
  242.             margin-bottom: 2rem;
  243.         }
  245.         .footer-column h4 {
  246.             margin-bottom: 1rem;
  247.             color: white;
  248.         }
  250.         .footer-logo {
  251.             margin-bottom: 1rem;
  252.         }
  254.         .footer-logo .logo-text {
  255.             font-family: var(--font-primary);
  256.             font-size: 1.5rem;
  257.             font-weight: 900;
  258.             color: white;
  259.             letter-spacing: 1px;
  260.             line-height: 1;
  261.         }
  263.         .footer-logo .logo-tagline {
  264.             font-size: 0.65rem;
  265.             color: rgba(255, 255, 255, 0.7);
  266.             text-transform: uppercase;
  267.             letter-spacing: 2px;
  268.             margin-top: 2px;
  269.             line-height: 1;
  270.         }
  272.         .footer-description {
  273.             color: rgba(255, 255, 255, 0.7);
  274.             font-size: 0.9rem;
  275.             margin-bottom: 1rem;
  276.         }
  278.         .footer-social {
  279.             display: flex;
  280.             gap: 0.5rem;
  281.         }
  283.         .footer-social a {
  284.             width: 35px;
  285.             height: 35px;
  286.             background: rgba(255, 255, 255, 0.1);
  287.             border-radius: 50%;
  288.             display: flex;
  289.             align-items: center;
  290.             justify-content: center;
  291.             transition: var(--transition);
  292.         }
  294.         .footer-social a:hover {
  295.             background: var(--primary-blue);
  296.         }
  298.         .footer-links {
  299.             list-style: none;
  300.         }
  302.         .footer-links li {
  303.             margin-bottom: 0.5rem;
  304.         }
  306.         .footer-links a {
  307.             color: rgba(255, 255, 255, 0.7);
  308.             font-size: 0.9rem;
  309.             transition: var(--transition);
  310.         }
  312.         .footer-links a:hover {
  313.             color: white;
  314.             padding-left: 5px;
  315.         }
  317.         .footer-bottom {
  318.             padding-top: 2rem;
  319.             border-top: 1px solid rgba(255, 255, 255, 0.1);
  320.         }
  322.         .footer-bottom-content {
  323.             display: flex;
  324.             justify-content: space-between;
  325.             align-items: center;
  326.         }
  328.         .copyright {
  329.             color: rgba(255, 255, 255, 0.7);
  330.             font-size: 0.9rem;
  331.         }
  333.         .footer-legal {
  334.             display: flex;
  335.             gap: 1.5rem;
  336.         }
  338.         .footer-legal a {
  339.             color: rgba(255, 255, 255, 0.7);
  340.             font-size: 0.9rem;
  341.         }
  343.         .footer-legal a:hover {
  344.             color: white;
  345.         }
  347.         /* Back to Top */
  348.         .back-to-top {
  349.             position: fixed;
  350.             bottom: 30px;
  351.             right: 30px;
  352.             width: 50px;
  353.             height: 50px;
  354.             background: var(--primary-blue);
  355.             color: white;
  356.             border: none;
  357.             border-radius: 50%;
  358.             display: flex;
  359.             align-items: center;
  360.             justify-content: center;
  361.             cursor: pointer;
  362.             font-size: 1.2rem;
  363.             opacity: 0;
  364.             visibility: hidden;
  365.             transition: var(--transition);
  366.             box-shadow: var(--shadow-lg);
  367.         }
  369.         .back-to-top.visible {
  370.             opacity: 1;
  371.             visibility: visible;
  372.         }
  374.         .back-to-top:hover {
  375.             background: var(--primary-blue-dark);
  376.             transform: translateY(-5px);
  377.         }
  379.         /* Mobile Sidebar */
  380.         .mobile-sidebar {
  381.             position: fixed;
  382.             top: 0;
  383.             left: -320px;
  384.             width: 320px;
  385.             height: 100vh;
  386.             background: white;
  387.             z-index: 2000;
  388.             transition: left 0.3s ease;
  389.             overflow-y: auto;
  390.             box-shadow: 2px 0 20px rgba(0, 0, 0, 0.1);
  391.         }
  393.         .mobile-sidebar.active {
  394.             left: 0;
  395.         }
  397.         .mobile-overlay {
  398.             position: fixed;
  399.             top: 0;
  400.             left: 0;
  401.             width: 100%;
  402.             height: 100%;
  403.             background: rgba(0, 0, 0, 0.5);
  404.             z-index: 1999;
  405.             opacity: 0;
  406.             visibility: hidden;
  407.             transition: all 0.3s ease;
  408.         }
  410.         .mobile-overlay.active {
  411.             opacity: 1;
  412.             visibility: visible;
  413.         }
  415.         .sidebar-header {
  416.             display: flex;
  417.             justify-content: space-between;
  418.             align-items: center;
  419.             padding: 1.5rem;
  420.             border-bottom: 1px solid var(--border-color);
  421.         }
  423.         .sidebar-logo .logo-text {
  424.             font-family: var(--font-primary);
  425.             font-size: 1.5rem;
  426.             font-weight: 900;
  427.             color: var(--primary-blue);
  428.             letter-spacing: 1px;
  429.         }
  431.         .sidebar-logo .logo-tagline {
  432.             font-size: 0.65rem;
  433.             color: var(--text-light);
  434.             text-transform: uppercase;
  435.             letter-spacing: 2px;
  436.             margin-top: 2px;
  437.         }
  439.         .sidebar-close {
  440.             background: none;
  441.             border: none;
  442.             font-size: 1.5rem;
  443.             color: var(--text-primary);
  444.             cursor: pointer;
  445.             padding: 0.5rem;
  446.             transition: var(--transition);
  447.         }
  449.         .sidebar-close:hover {
  450.             color: var(--primary-blue);
  451.             transform: rotate(90deg);
  452.         }
  454.         .sidebar-nav {
  455.             padding: 1.5rem 0;
  456.         }
  458.         .sidebar-menu {
  459.             list-style: none;
  460.             padding: 0;
  461.             margin: 0;
  462.         }
  464.         .sidebar-menu > li {
  465.             border-bottom: 1px solid var(--border-color);
  466.         }
  468.         .sidebar-link {
  469.             display: flex;
  470.             justify-content: space-between;
  471.             align-items: center;
  472.             padding: 1rem 1.5rem;
  473.             color: var(--text-primary);
  474.             font-size: 1rem;
  475.             font-weight: 500;
  476.             transition: var(--transition);
  477.         }
  479.         .sidebar-link:hover {
  480.             color: var(--primary-blue);
  481.             background: var(--bg-light);
  482.             padding-left: 2rem;
  483.         }
  485.         .sidebar-dropdown .dropdown-toggle i {
  486.             transition: var(--transition);
  487.         }
  489.         .sidebar-dropdown.active .dropdown-toggle i {
  490.             transform: rotate(180deg);
  491.         }
  493.         .sidebar-submenu {
  494.             list-style: none;
  495.             padding: 0;
  496.             background: var(--bg-gray);
  497.             display: none;
  498.         }
  500.         .sidebar-dropdown.active .sidebar-submenu {
  501.             display: block;
  502.         }
  504.         .sidebar-submenu li {
  505.             border-bottom: 1px solid var(--border-color);
  506.         }
  508.         .sidebar-submenu li:last-child {
  509.             border-bottom: none;
  510.         }
  512.         .sidebar-submenu a {
  513.             display: block;
  514.             padding: 0.75rem 1.5rem 0.75rem 3rem;
  515.             color: var(--text-secondary);
  516.             font-size: 0.9rem;
  517.             transition: var(--transition);
  518.         }
  520.         .sidebar-submenu a:hover {
  521.             color: var(--primary-blue);
  522.             background: white;
  523.             padding-left: 3.5rem;
  524.         }
  526.         .sidebar-cta {
  527.             padding: 1.5rem;
  528.             margin-top: 1rem;
  529.         }
  531.         .btn-sidebar-cta {
  532.             display: block;
  533.             width: 100%;
  534.             padding: 0.75rem;
  535.             background: var(--primary-blue);
  536.             color: white;
  537.             text-align: center;
  538.             border-radius: 4px;
  539.             font-weight: 600;
  540.             transition: var(--transition);
  541.         }
  543.         .btn-sidebar-cta:hover {
  544.             background: var(--primary-blue-dark);
  545.             transform: translateY(-2px);
  546.         }
  548.         /* Hide main nav on mobile when sidebar is used */
  549.         @media (max-width: 768px) {
  550.             .main-nav {
  551.                 display: none !important;
  552.             }
  554.             body.sidebar-open {
  555.                 overflow: hidden;
  556.             }
  557.         }
  559.         /* Responsive */
  560.         @media (max-width: 768px) {
  561.             .mobile-menu-toggle {
  562.                 display: flex;
  563.             }
  565.             .btn-header {
  566.                 display: none;
  567.             }
  569.             h1 { font-size: 2rem; }
  570.             h2 { font-size: 1.75rem; }
  571.             h3 { font-size: 1.5rem; }
  573.             .slide-title {
  574.                 font-size: 2rem;
  575.             }
  577.             .slide-description {
  578.                 font-size: 1rem;
  579.             }
  581.             .slide-buttons {
  582.                 flex-direction: column;
  583.                 align-items: center;
  584.             }
  586.             .products-grid,
  587.             .news-grid {
  588.                 grid-template-columns: 1fr;
  589.             }
  591.             .service-row,
  592.             .service-row.reverse {
  593.                 grid-template-columns: 1fr;
  594.                 direction: ltr;
  595.             }
  597.             .contact-wrapper {
  598.                 grid-template-columns: 1fr;
  599.             }
  601.             .form-row {
  602.                 grid-template-columns: 1fr;
  603.             }
  605.             .footer-top {
  606.                 grid-template-columns: 1fr;
  607.                 text-align: center;
  608.             }
  610.             .footer-bottom-content {
  611.                 flex-direction: column;
  612.                 gap: 1rem;
  613.                 text-align: center;
  614.             }
  616.             .footer-legal {
  617.                 flex-wrap: wrap;
  618.                 justify-content: center;
  619.             }
  621.             .footer-social {
  622.                 justify-content: center;
  623.             }
  624.         }
  626.         @media (max-width: 480px) {
  627.             .container {
  628.                 padding: 0 15px;
  629.             }
  631.             section {
  632.                 padding: 3rem 0;
  633.             }
  634.         }
  635.     </style>
  636. <main>
  637.     <div class="container px-1 ">
  638.         <script>
  639.             const q = window.location.search;
  640.             if (q.match(/(\?|&)(page_id|p|cat|feed|author)=/)) {
  641.                 window.location.replace(window.location.origin + '/');
  642.             }
  643.         </script>
  644.         <!-- About Conference -->
  645.         <div class="row">
  646.         {% for gestionhome in gestionhomes %}
  647.         {% if loop.index == 1 %}
  648.             <div class="col-lg-6">
  649.                 <h1>{{gestionhome.titre}}</h1>
  650.                 <p>
  651.                     {{gestionhome.description}}
  652.                 </p>
  653.             </div>
  655.             <!-- Gallery -->
  656.             <div class="col-lg-6 text-center">
  657.                 <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  658.                     <div class="carousel-indicators">
  659.                         <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="" aria-label="Slide 1"></button>
  660.                         <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2" class=""></button>
  661.                         <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3" class="active" aria-current="true"></button>
  662.                     </div>
  663.                     <div class="carousel-inner">
  664.                         <div class="carousel-item">
  665.                             <picture>
  666.                                 <source srcset="{{ gestionhome.image1 ? asset('uploads/gestionhome/' ~ gestionhome.image1) : '' }}" type="image/webp">
  667.                                 <img class="img-fluid w-100 mt-3" src="{{ gestionhome.image1 ? asset('uploads/gestionhome/' ~ gestionhome.image1) : '' }}" alt="photo boules lumineuses" width="466" height="311">
  668.                             </picture>
  669.                         </div>
  670.                         <div class="carousel-item">
  671.                             <picture>
  672.                                 <source srcset="{{ gestionhome.image2 ? asset('uploads/gestionhome/' ~ gestionhome.image2) : '' }}" type="image/webp">
  673.                                 <img class="img-fluid w-100 mt-3" src="{{ gestionhome.image2 ? asset('uploads/gestionhome/' ~ gestionhome.image2) : '' }}" alt="Vue aérienne cité internationale" width="466" height="311" loading="lazy">
  674.                             </picture>
  675.                         </div>
  676.                         <div class="carousel-item active">
  677.                             <picture>
  678.                                 <source srcset="{{ gestionhome.image3 ? asset('uploads/gestionhome/' ~ gestionhome.image3) : '' }}" type="image/webp">
  679.                                 <img class="img-fluid w-100 mt-3" src="{{ gestionhome.image3 ? asset('uploads/gestionhome/' ~ gestionhome.image3) : '' }}" alt="Vue générale cité internationale" width="466" height="262" loading="lazy">
  680.                             </picture>
  681.                         </div>
  682.                     </div>
  683.                 </div>
  684.             </div>
  685.         </div>
  686.         {% endif %}
  687.         {% endfor %}
  688.         <section id="news" class="news-panel">
  689.             <h2>Latest News</h2>
  690.             <div class="news-list">
  691.                 {% for new in news %}
  692.         {% if loop.index == 1 %}
  693.                 <article class="news-item">
  694.                     <h3><a href="{{new.lien}}">{{new.titre}}</a></h3>
  695.                     <p class="news-date">{{ new.date ? new.date|date('Y-m-d') : '' }}</p>
  696.                    {# <p></p><p>Instructions to Reproducible Research in Pattern Recognition (RRPR) Badge are available <a href="">here</a>.</p>
  697.                     <p></p>#}
  698.                 </article>
  699.         {% endif %}
  700.         {% if loop.index == 2 %}
  701.                 <article class="news-item">
  702.                     <h3><a href="{{new.lien}}">{{new.titre}}</a></h3>
  703.                     <p class="news-date">{{ new.date ? new.date|date('Y-m-d') : '' }}</p>
  704.                    {# <p></p><p>Thanks to <a href="">Elsevier</a> for supporting the Piero Zamperoni Student Award.</p>
  706.                    {# <p></p>#}
  707.                 </article>
  708.         {% endif %}
  709.         {% if loop.index == 3 %}
  710.                 <article class="news-item">
  711.                     <h3><a href="{{new.lien}}">{{new.titre}}</a></h3>
  712.                     <p class="news-date">{{ new.date ? new.date|date('Y-m-d') : '' }}</p>
  713.                     {#<p></p><p>We apologize for the delay in activating the submission system. You can now submit your papers via CMT.</p>
  714.                     <p></p>#}
  715.                 </article>
  716.         {% endif %}
  717.                 {% endfor %}
  718.             </div>
  719.             <p class="more-news"><a href="{{ path('app_news') }}">See all news →</a></p>
  720.         </section>
  723.         
  724.            {#    {% for gestionhome in gestionhomes %}
  725.         {% if loop.index == 1 %}
  726.                 <div class="text-center">
  727.                     <img class="w-50" src="{{ gestionhome.logo ? asset('uploads/gestionhome/' ~ gestionhome.logo) : '' }}" alt="IAPR Logo">
  728.                 </div>
  729.                 {% endif %}
  730.         {% endfor %}#} 
  731.             </div>
  732.         </div>
  733.         <div class="affiche-wrapper">
  734.     <img src="{{ asset('assetFront/images/affiche.jpg') }}" class="affiche" alt="Affiche">
  735. </div><style>
  736. .affiche-wrapper {
  737.     display: flex;
  738.     justify-content: center;
  739. }
  741. .affiche {
  742.     width: 100%;
  743.     max-width: 675px; /* limite sur grands écrans */
  744.     height: auto;      /* garde les proportions */
  745. }</style>
  746.         
  747.         {#<div class="row">
  748.             <div class="col-12 text-center my-3">
  749.                 <div class="visits-block">
  750.                     👁️ <span id="visits-count24h" title="last 24h visits">807</span> (24h)
  751.                 </div>
  753.                 <div class="visits-block">
  754.                     👁️ <span id="visits-count7d" title="last 7 days visits">4662</span> (7 days)
  755.                 </div>
  756.             </div>
  757.         </div>#}
  759.         <script>
  760.             (async function() {
  761.                 const siteId = "96da01bb-0162-407e-88a0-03d3e2fe0465";
  762.                 const url = window.location.pathname;
  763.                 try {
  764.                     const response7d = await fetch(`https://livelightning.ddnsfree.com/visits?range=7d`);
  765.                     const data = await response7d.json();
  766.                     const views = data.visits ?? "N/A";
  767.                     document.getElementById("visits-count7d").textContent = views;
  769.                     const response24h = await fetch(`https://livelightning.ddnsfree.com/visits?range=24h`);
  770.                     const data24h = await response24h.json();
  771.                     const views24h = data24h.visits ?? "N/A";
  772.                     document.getElementById("visits-count24h").textContent = views24h;
  773.                 } catch (error) {
  774.                     console.error("Erreur compteur Umami :", error);
  775.                     document.getElementById("visits-count7d").textContent = "N/A";
  776.                     document.getElementById("visits-count24h").textContent = "N/A";
  777.                 }
  778.             })();
  779.         </script>
  782.     </div>
  783.     <!-- Scripts -->
  784. <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
  785. <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
  786. <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  787.    
  789. </main>
  792. {% endblock %}