templates/baseFront.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta content="width=device-width, initial-scale=1.0" name="viewport">
  8.     <title>Mezghich</title>
  9.     <meta content="" name="description">
  10.     <meta content="" name="keywords">
  12.     <!-- Favicons -->
  13.     <link href="{{ asset('uploads/icon/' ~ config.icon ) }}" rel="icon">
  14.     <link href="{{asset('assets/img/apple-touch-icon.png')  }}" rel="apple-touch-icon">
  16.     <!-- Google Fonts -->
  17.     <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
  19.     <!-- Vendor CSS Files -->
  20.     <link href="{{ asset('assets/vendor/aos/aos.css') }}" rel="stylesheet">
  21.     <link href="{{ asset('assets/vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
  22.     <link href="{{ asset('assets/vendor/bootstrap-icons/bootstrap-icons.css') }}" rel="stylesheet">
  23.     <link href="{{asset('assets/vendor/boxicons/css/boxicons.min.css ') }}" rel="stylesheet">
  24.     <link href="{{ asset('assets/vendor/glightbox/css/glightbox.min.css') }}" rel="stylesheet">
  25.     <link href="{{ asset('assets/vendor/swiper/swiper-bundle.min.css') }}" rel="stylesheet">
  27.     <!-- Template Main CSS File -->
  28.     <link href="{{ asset('assets/css/style.css') }}" rel="stylesheet">
  30.     <!-- =======================================================
  31.     * Template Name: iPortfolio
  32.     * Updated: Mar 10 2023 with Bootstrap v5.2.3
  33.     * Template URL: https://bootstrapmade.com/iportfolio-bootstrap-portfolio-websites-template/
  34.     * Author: BootstrapMade.com
  35.     * License: https://bootstrapmade.com/license/
  36.     ======================================================== -->
  37. </head>
  39. <body>
  41. <!-- ======= Mobile nav toggle button ======= -->
  42. <i class="bi bi-list mobile-nav-toggle d-xl-none"></i>
  44. <!-- ======= Header ======= -->
  45. <header id="header">
  46.     <div class="d-flex flex-column">
  48.         <div class="profile">
  49.             <img src="{{ asset('uploads/logo/' ~ config.logo ) }}" alt="" class="img-fluid rounded-circle">
  50.             <h1 class="text-light"><a href="">Amine Mezghich</a></h1>
  51.             <div class="social-links mt-3 text-center">
  52.                 <a href="{{ config.lienlikedin }}" target="_blank" class="linkedin"><i class="bx bxl-linkedin"></i></a>
  53.                 <a href="{{ config.github }}" target="_blank" class="github"><i class="bx bxl-github"></i></a>
  54.                 <a href="{{ config.reaserachGate }}" target="_blank" class="facebook"><svg style="color: white" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M19.586 0c-.818 0-1.508.19-2.073.565c-.563.377-.97.936-1.213 1.68a3.193 3.193 0 0 0-.112.437a8.365 8.365 0 0 0-.078.53a9 9 0 0 0-.05.727c-.01.282-.013.621-.013 1.016a31.121 31.123 0 0 0 .014 1.017a9 9 0 0 0 .05.727a7.946 7.946 0 0 0 .077.53h-.005a3.334 3.334 0 0 0 .113.438c.245.743.65 1.303 1.214 1.68c.565.376 1.256.564 2.075.564c.8 0 1.536-.213 2.105-.603c.57-.39.94-.916 1.175-1.65c.076-.235.135-.558.177-.93a10.9 10.9 0 0 0 .043-1.207v-.82c0-.095-.047-.142-.14-.142h-3.064c-.094 0-.14.047-.14.141v.956c0 .094.046.14.14.14h1.666c.056 0 .084.03.084.086c0 .36 0 .62-.036.865c-.038.244-.1.447-.147.606c-.108.385-.348.664-.638.876c-.29.212-.738.35-1.227.35c-.545 0-.901-.15-1.21-.353c-.306-.203-.517-.454-.67-.915a3.136 3.136 0 0 1-.147-.762a17.366 17.367 0 0 1-.034-.656c-.01-.26-.014-.572-.014-.939a26.401 26.403 0 0 1 .014-.938a15.821 15.822 0 0 1 .035-.656a3.19 3.19 0 0 1 .148-.76a1.89 1.89 0 0 1 .742-1.01c.344-.244.593-.352 1.137-.352c.508 0 .815.096 1.144.303c.33.207.528.492.764.925c.047.094.111.118.198.07l1.044-.43c.075-.048.09-.115.042-.199a3.549 3.549 0 0 0-.466-.742a3 3 0 0 0-.679-.607a3.313 3.313 0 0 0-.903-.41A4.068 4.068 0 0 0 19.586 0zM8.217 5.836c-1.69 0-3.036.086-4.297.086c-1.146 0-2.291 0-3.007-.029v.831l1.088.2c.744.144 1.174.488 1.174 2.264v11.288c0 1.777-.43 2.12-1.174 2.263l-1.088.2v.832c.773-.029 2.12-.086 3.465-.086c1.29 0 2.951.057 3.667.086v-.831l-1.49-.2c-.773-.115-1.174-.487-1.174-2.264v-4.784c.688.057 1.29.057 2.206.057c1.748 3.123 3.41 5.472 4.355 6.56c.86 1.032 2.177 1.691 3.839 1.691c.487 0 1.003-.086 1.318-.23v-.744c-1.031 0-2.063-.716-2.808-1.518c-1.26-1.376-2.95-3.582-4.355-6.074c2.32-.545 4.04-2.722 4.04-4.9c0-3.208-2.492-4.698-5.758-4.698zm-.515 1.29c2.406 0 3.839 1.26 3.839 3.552c0 2.263-1.547 3.782-4.097 3.782c-.974 0-1.404-.03-2.063-.086v-7.19c.66-.059 1.547-.059 2.32-.059z"/></svg></i></a>
  55.                 <a href="{{ config.dblp }}" target="_blank" class="dlb"><i class="bx bxl-dblp"><svg style="color: white" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M3.075.002c-.096.013-.154.092-.094.31L4.97 7.73L3.1 8.6s-.56.26-.4.85l2.45 9.159s.16.59.72.33l6.169-2.869l1.3-.61s.52-.24.42-.79l-.01-.06l-1.13-4.22l-.658-2.45l-.672-2.49v-.04s-.16-.59-.84-1L3.5.141s-.265-.16-.425-.139zM18.324 5.03a.724.724 0 0 0-.193.06l-5.602 2.6l.862 3.2l1.09 4.08l.01.06c.05.47-.411.79-.411.79l-1.88.87l.5 1.89l.04.1c.07.17.28.6.81.91l6.95 4.269s.68.41.52-.17l-1.981-7.4l1.861-.86s.56-.26.4-.85L18.85 5.42s-.116-.452-.526-.39z"/></svg></i></a>
  56.                 <a href="{{ config.lienfb }}" target="_blank" class="facebook"><i class="bx bxl-facebook"></i></a>
  57.                 <a href="https://ieeexplore.ieee.org/search/searchresult.jsp?newsearch=true&queryText=Mezghich" class="ieee" target="_blank">
  58.                 <svg width="24" height="24" viewBox="0 0 24 24">
  59.                     <image href="{{ asset('ieee.svg' ) }}" width="24" height="24"/>
  60.                 </svg>
  61.                 </a>
  64.             </div>
  65.         </div>
  67.         <nav id="navbar" class="nav-menu navbar">
  68.             <ul>
  69.                 {#<li><a href="#hero" class="nav-link scrollto active"><i class="bx bx-home"></i> <span>Home</span></a></li>#}
  70.                 <li><a href="#about" class="nav-link scrollto active"><i class="bx bx-user"></i> <span>About</span></a></li>
  71.                 <li><a href="#resume" class="nav-link scrollto"><i class="bx bx-file-blank"></i> <span>Resume</span></a></li>
  72.                 <li><a href="#portfolio" class="nav-link scrollto"><i class="bx bx-book-content"></i> <span>Certifications</span></a></li>
  73.                 <li><a href="#services" class="nav-link scrollto"><i class="bx bx-task"></i> <span>Supervisions</span></a></li>
  74.                 <li><a href="#testimonials" class="nav-link scrollto"><i class="bx bx-server"></i> <span>Testimonials</span></a></li>
  75.                 
  76.                 <li><a href="#contact" class="nav-link scrollto"><i class="bx bx-envelope"></i> <span>Contact</span></a></li>
  77.             </ul>
  78.         </nav><!-- .nav-menu -->
  79.     </div>
  80. </header><!-- End Header -->
  81. {#}
  82. <!-- ======= Hero Section ======= -->
  83. <section id="hero" class="d-flex flex-column justify-content-center align-items-center">
  84.     <div class="hero-container" data-aos="fade-in">
  85.     
  86.         <h1 style="color: white"> Amine Mezghich</h1>
  87.         <p>Je suis <span class="typed" data-typed-items="{{ config.titre }}"></span></p>
  88.     </div>
  89. </section><!-- End Hero -->#}
  91. <main id="main">
  93.     <!-- ======= About Section ======= -->
  94.     <section id="about" class="about">
  95.         <div class="container">
  97.             <div class="section-title">
  98.                 <h2>À propos</h2>
  99.                 <p style="text-align: justify">{{ config.about|raw }}</p>
  100.             </div>
  102.             <div class="row">
  103.                 <div class="col-lg-4" data-aos="fade-right">
  104.                     <img src="{{ apropos.photo ? asset('uploads/temoignage/' ~ apropos.photo) : '' }}" class="img-fluid" alt="" width="100%" height="100%">
  105.                 </div>
  106.                 <div class="col-lg-8 pt-4 pt-lg-0 content" data-aos="fade-left">
  107.                     <h3>{{apropos.Titre}}</h3>
  108.                     <p class="fst-italic">
  109.                         {{apropos.description1|striptags}}
  110.                     </p>
  111.                     <div class="row">
  112.                         <div class="col-lg-6">
  113.                             <ul>
  114.                                 <li><i class="bi bi-chevron-right"></i> <strong>Birthday:</strong> <span>{{apropos.birthday}}</span></li>
  115.                                 <li><i class="bi bi-chevron-right"></i> <strong>Website:</strong> <span>{{apropos.website}}</span></li>
  116.                                 <li><i class="bi bi-chevron-right"></i> <strong>Phone:</strong> <span>{{apropos.phone}}</span></li>
  117.                                 <li><i class="bi bi-chevron-right"></i> <strong>City:</strong> <span>{{apropos.city}}</span></li>
  118.                             </ul>
  119.                         </div>
  120.                         <div class="col-lg-6">
  121.                             <ul>
  122.                                 <li><i class="bi bi-chevron-right"></i> <strong>Age:</strong> <span>{{apropos.age}}</span></li>
  123.                                 <li><i class="bi bi-chevron-right"></i> <strong>Degree:</strong> <span>{{apropos.Degree}}</span></li>
  124.                                 <li><i class="bi bi-chevron-right"></i> <strong>Email:</strong> <span>{{apropos.email}}</span></li>
  125.                                 <li><i class="bi bi-chevron-right"></i> <strong>Freelance:</strong> <span>{{apropos.Freelance}}</span></li>
  126.                             </ul>
  127.                         </div>
  128.                     </div>
  129.                     <p>
  130.                         {{apropos.description2|striptags}}
  131.                     </p>
  132.                 </div>
  133.             </div>
  135.         </div>
  136.     </section><!-- End About Section -->
  138.     <!-- ======= Facts Section ======= -->
  139.     <section id="facts" class="facts">
  140.         <div class="container">
  142.             <div class="section-title">
  143.                 <h2>Faits</h2>
  144.                 <p style="text-align: justify">{{ config.faits|raw}}</p>
  145.             </div>
  147.             <div class="row no-gutters">
  149.                 <div class="col-lg-3 col-md-6 d-md-flex align-items-md-stretch" data-aos="fade-up">
  150.                     <div class="count-box">
  151.                         <i class="bi bi-emoji-smile"></i>
  152.                         <span data-purecounter-start="0" data-purecounter-end="{{ config.nbencadrementpfemaster }}" data-purecounter-duration="1" class="purecounter"></span>
  153.                         <p><strong style="font-size: 13px">Nombre d'encadrements </strong> PFE & Master</p>
  154.                     </div>
  155.                 </div>
  157.                 <div class="col-lg-3 col-md-6 d-md-flex align-items-md-stretch" data-aos="fade-up" data-aos-delay="100">
  158.                     <div class="count-box">
  159.                         <i class="bi bi-journal-richtext"></i>
  160.                         <span data-purecounter-start="0" data-purecounter-end="{{ config.nbencadrementthese }}" data-purecounter-duration="1" class="purecounter"></span>
  161.                         <p><strong>Nombre d'encadrements</strong> Thèse</p>
  162.                     </div>
  163.                 </div>
  165.                 <div class="col-lg-3 col-md-6 d-md-flex align-items-md-stretch" data-aos="fade-up" data-aos-delay="200">
  166.                     <div class="count-box">
  167.                         <i class="bi bi-headset"></i>
  168.                         <span data-purecounter-start="0" data-purecounter-end="{{ config.nbconference }}" data-purecounter-duration="1" class="purecounter"></span>
  169.                         <p><strong>Nombre de conférences</strong> </p>
  170.                     </div>
  171.                 </div>
  173.                 <div class="col-lg-3 col-md-6 d-md-flex align-items-md-stretch" data-aos="fade-up" data-aos-delay="300">
  174.                     <div class="count-box">
  175.                         <i class="bi bi-people"></i>
  176.                         <span data-purecounter-start="0" data-purecounter-end="{{ config.nbrevues }}" data-purecounter-duration="1" class="purecounter"></span>
  177.                         <p><strong>Nombre des revues</strong></p>
  178.                     </div>
  179.                 </div>
  181.             </div>
  183.         </div>
  184.     </section><!-- End Facts Section -->
  186.     <!-- ======= Skills Section ======= -->
  187.     <section id="skills" class="skills section-bg">
  188.         <div class="container">
  190.             <div class="section-title">
  191.                 <h2>Skills</h2>
  192.                 <p>{{config.skills|striptags}}</p>
  193.             </div>
  195.             <div class="row skills-content">
  197.                 <div class="col-lg-6" data-aos="fade-up">
  198.                     {% for skill in skills %}
  199.                     {% if skill.id is not divisible by(2) %}
  200.                     
  201.                     <div class="progress">
  202.                         <span class="skill">{{ skill.titre }} <i class="val">{{ skill.pourcentage }}%</i></span>
  203.                         <div class="progress-bar-wrap">
  204.                             <div class="progress-bar" role="progressbar" aria-valuenow="{{ skill.pourcentage }}" aria-valuemin="0" aria-valuemax="100"></div>
  205.                         </div>
  206.                     </div>
  207.                     {% endif %}
  208.                     {% endfor %}
  209. {#
  210.                     <div class="progress">
  211.                         <span class="skill">CSS <i class="val">90%</i></span>
  212.                         <div class="progress-bar-wrap">
  213.                             <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
  214.                         </div>
  215.                     </div>
  217.                     <div class="progress">
  218.                         <span class="skill">JavaScript <i class="val">75%</i></span>
  219.                         <div class="progress-bar-wrap">
  220.                             <div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
  221.                         </div>
  222.                     </div>#}
  223.                     
  224.                     
  226.                 </div>
  228.                 <div class="col-lg-6" data-aos="fade-up" data-aos-delay="100">
  229.                     {% for skill in skills %}
  230.                     {% if skill.id is divisible by(2) %}
  231.                     <div class="progress">
  232.                         <span class="skill">{{ skill.titre }} <i class="val">{{ skill.pourcentage }}%</i></span>
  233.                         <div class="progress-bar-wrap">
  234.                             <div class="progress-bar" role="progressbar" aria-valuenow="{{ skill.pourcentage }}" aria-valuemin="0" aria-valuemax="100"></div>
  235.                         </div>
  236.                     </div>
  237.                     {% endif %}
  238.                     {% endfor %}
  239. {#
  240.                     <div class="progress">
  241.                         <span class="skill">WordPress/CMS <i class="val">90%</i></span>
  242.                         <div class="progress-bar-wrap">
  243.                             <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
  244.                         </div>
  245.                     </div>
  247.                     <div class="progress">
  248.                         <span class="skill">Photoshop <i class="val">55%</i></span>
  249.                         <div class="progress-bar-wrap">
  250.                             <div class="progress-bar" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
  251.                         </div>
  252.                     </div>#}
  254.                 </div>
  256.             </div>
  258.         </div>
  259.     </section><!-- End Skills Section -->
  261.     <!-- ======= Resume Section ======= -->
  262.     <section id="resume" class="resume">
  263.         <div class="container">
  265.             <div class="section-title">
  266.                 <h2>Resume</h2>
  267.                 <p>{{config.resume|striptags}}</p>
  268.             </div>
  270.             <div class="row">
  271.                 <div class="col-lg-6" data-aos="fade-up">
  272.                     <h3 class="resume-title">Sumary</h3>
  273.                     <div class="resume-item pb-0">
  274.                         <h4>{{config.summaryfullname}}</h4>
  275.                         <p><em>{{config.summaryabout|striptags}}</em></p>
  276.                         <ul>
  277.                             <li>{{config.summaryplace}}</li>
  278.                             <li>{{config.summarymobile}}</li>
  279.                             <li>{{config.summaryemail}}</li>
  280.                         </ul>
  281.                     </div>
  283.                     <h3 class="resume-title">Education</h3>
  284.                     {% for education in educations %}
  285.                     <div class="resume-item">
  286.                         <h4>{{ education.Degree}}</h4>
  287.                         <h5>{{ education.time }}</h5>
  288.                         <p><em>{{ education.institute }}</em></p>
  289.                         <p>{{ education.description|striptags }}</p>
  290.                     </div>
  291.                     {% endfor %}
  292.                     {#
  293.                     <div class="resume-item">
  294.                         <h4>Master of Fine Arts &amp; Graphic Design</h4>
  295.                         <h5>2015 - 2016</h5>
  296.                         <p><em>Rochester Institute of Technology, Rochester, NY</em></p>
  297.                         <p>Qui deserunt veniam. Et sed aliquam labore tempore sed quisquam iusto autem sit. Ea vero voluptatum qui ut dignissimos deleniti nerada porti sand markend</p>
  298.                     </div>
  299.                     <div class="resume-item">
  300.                         <h4>Bachelor of Fine Arts &amp; Graphic Design</h4>
  301.                         <h5>2010 - 2014</h5>
  302.                         <p><em>Rochester Institute of Technology, Rochester, NY</em></p>
  303.                         <p>Quia nobis sequi est occaecati aut. Repudiandae et iusto quae reiciendis et quis Eius vel ratione eius unde vitae rerum voluptates asperiores voluptatem Earum molestiae consequatur neque etlon sader mart dila</p>
  304.                     </div>#}
  305.                 </div>
  306.                 <div class="col-lg-6" data-aos="fade-up" data-aos-delay="100">
  307.                     <h3 class="resume-title">Professional Experience</h3>
  308.                     {% for experience in experiences %}
  309.                     <div class="resume-item">
  310.                         <h4>{{ experience.poste }}</h4>
  311.                         <h5>{{ experience.time }}</h5>
  312.                         <p><em>{{ experience.company }}</em></p>
  313.                         <ul>
  314.                             <li>{{ experience.task1 }}</li>
  315.                             <li>{{ experience.task2 }} </li>
  316.                             <li>{{ experience.task3 }}</li>
  317.                             <li>{{ experience.task4 }}</li>
  318.                         </ul>
  319.                     </div>
  320.                     {% endfor %}
  321.                     {#
  322.                     <div class="resume-item">
  323.                         <h4>Senior graphic design specialist</h4>
  324.                         <h5>2019 - Present</h5>
  325.                         <p><em>Experion, New York, NY </em></p>
  326.                         <ul>
  327.                             <li>Lead in the design, development, and implementation of the graphic, layout, and production communication materials</li>
  328.                             <li>Delegate tasks to the 7 members of the design team and provide counsel on all aspects of the project. </li>
  329.                             <li>Supervise the assessment of all graphic materials in order to ensure quality and accuracy of the design</li>
  330.                             <li>Oversee the efficient use of production project budgets ranging from $2,000 - $25,000</li>
  331.                         </ul>
  332.                     </div>
  333.                     <div class="resume-item">
  334.                         <h4>Graphic design specialist</h4>
  335.                         <h5>2017 - 2018</h5>
  336.                         <p><em>Stepping Stone Advertising, New York, NY</em></p>
  337.                         <ul>
  338.                             <li>Developed numerous marketing programs (logos, brochures,infographics, presentations, and advertisements).</li>
  339.                             <li>Managed up to 5 projects or tasks at a given time while under pressure</li>
  340.                             <li>Recommended and consulted with clients on the most appropriate graphic design</li>
  341.                             <li>Created 4+ design presentations and proposals a month for clients and account managers</li>
  342.                         </ul>
  343.                     </div>#}
  344.                 </div>
  345.             </div>
  347.         </div>
  348.     </section><!-- End Resume Section -->
  350.     <!-- ======= Portfolio Section ======= -->
  351.     <section id="portfolio" class="portfolio section-bg">
  352.         <div class="container">
  354.             <div class="section-title">
  355.                 <h2>Certification</h2>
  356.                 <p style="text-align: justify">{{ config.certification|raw }}</p>
  357.             </div>
  359.             {#<div class="row" data-aos="fade-up">
  360.                 <div class="col-lg-12 d-flex justify-content-center">
  361.                     <ul id="portfolio-flters">
  362.                         <li data-filter="*" class="filter-active">All</li>
  363.                         <li data-filter=".filter-app">App</li>
  364.                         <li data-filter=".filter-card">Card</li>
  365.                         <li data-filter=".filter-web">Web</li>
  366.                     </ul>
  367.                 </div>
  368.             </div>#}
  369.             <style>.portfolio-wrap {
  370.     width: 250px;
  371.     height: 250px; /* choose the height you want */
  372.     overflow: hidden;
  373. }
  375. .portfolio-wrap img {
  376.     width: 100%;
  377.     height: 100%;
  378.     object-fit: cover; /* keeps ratio, crops nicely */
  379. }</style>
  380.             <div class="row portfolio-container" data-aos="fade-up" data-aos-delay="100">
  381.                 {% for certification in certifications %}
  382.                 <div class="col-lg-4 col-md-6 portfolio-item filter-app">
  383.                     <div class="portfolio-wrap">
  384.                         <img src="{{ certification.photo ? asset('uploads/certification/' ~ certification.photo) : '' }}" class="img-fluid" alt="{{ certification.titre }}">
  385.                         <div class="portfolio-links">
  386.                             <a href="{{ certification.photo ? asset('uploads/certification/' ~ certification.photo) : '' }}" data-gallery="portfolioGallery" class="portfolio-lightbox" title="{{ certification.titre }}"><i class="bx bx-plus"></i></a>
  387.                             <a href="{{certification.lien}}" title="More Details"><i class="bx bx-link"></i></a>
  388.                         </div>
  389.                     </div>
  390.                 </div>
  391.                 {% endfor %}
  392.                 {#
  393.                 <div class="col-lg-4 col-md-6 portfolio-item filter-web">
  394.                     <div class="portfolio-wrap">
  395.                         <img src="assets/img/portfolio/portfolio-2.jpg" class="img-fluid" alt="">
  396.                         <div class="portfolio-links">
  397.                             <a href="assets/img/portfolio/portfolio-2.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Web 3"><i class="bx bx-plus"></i></a>
  398.                             <a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
  399.                         </div>
  400.                     </div>
  401.                 </div>
  403.                 <div class="col-lg-4 col-md-6 portfolio-item filter-app">
  404.                     <div class="portfolio-wrap">
  405.                         <img src="assets/img/portfolio/portfolio-3.jpg" class="img-fluid" alt="">
  406.                         <div class="portfolio-links">
  407.                             <a href="assets/img/portfolio/portfolio-3.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="App 2"><i class="bx bx-plus"></i></a>
  408.                             <a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
  409.                         </div>
  410.                     </div>
  411.                 </div>
  413.                 <div class="col-lg-4 col-md-6 portfolio-item filter-card">
  414.                     <div class="portfolio-wrap">
  415.                         <img src="assets/img/portfolio/portfolio-4.jpg" class="img-fluid" alt="">
  416.                         <div class="portfolio-links">
  417.                             <a href="assets/img/portfolio/portfolio-4.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Card 2"><i class="bx bx-plus"></i></a>
  418.                             <a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
  419.                         </div>
  420.                     </div>
  421.                 </div>
  423.                 <div class="col-lg-4 col-md-6 portfolio-item filter-web">
  424.                     <div class="portfolio-wrap">
  425.                         <img src="assets/img/portfolio/portfolio-5.jpg" class="img-fluid" alt="">
  426.                         <div class="portfolio-links">
  427.                             <a href="assets/img/portfolio/portfolio-5.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Web 2"><i class="bx bx-plus"></i></a>
  428.                             <a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
  429.                         </div>
  430.                     </div>
  431.                 </div>
  433.                 <div class="col-lg-4 col-md-6 portfolio-item filter-app">
  434.                     <div class="portfolio-wrap">
  435.                         <img src="assets/img/portfolio/portfolio-6.jpg" class="img-fluid" alt="">
  436.                         <div class="portfolio-links">
  437.                             <a href="assets/img/portfolio/portfolio-6.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="App 3"><i class="bx bx-plus"></i></a>
  438.                             <a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
  439.                         </div>
  440.                     </div>
  441.                 </div>
  443.                 <div class="col-lg-4 col-md-6 portfolio-item filter-card">
  444.                     <div class="portfolio-wrap">
  445.                         <img src="assets/img/portfolio/portfolio-7.jpg" class="img-fluid" alt="">
  446.                         <div class="portfolio-links">
  447.                             <a href="assets/img/portfolio/portfolio-7.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Card 1"><i class="bx bx-plus"></i></a>
  448.                             <a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
  449.                         </div>
  450.                     </div>
  451.                 </div>
  453.                 <div class="col-lg-4 col-md-6 portfolio-item filter-card">
  454.                     <div class="portfolio-wrap">
  455.                         <img src="assets/img/portfolio/portfolio-8.jpg" class="img-fluid" alt="">
  456.                         <div class="portfolio-links">
  457.                             <a href="assets/img/portfolio/portfolio-8.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Card 3"><i class="bx bx-plus"></i></a>
  458.                             <a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
  459.                         </div>
  460.                     </div>
  461.                 </div>
  463.                 <div class="col-lg-4 col-md-6 portfolio-item filter-web">
  464.                     <div class="portfolio-wrap">
  465.                         <img src="assets/img/portfolio/portfolio-9.jpg" class="img-fluid" alt="">
  466.                         <div class="portfolio-links">
  467.                             <a href="assets/img/portfolio/portfolio-9.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Web 3"><i class="bx bx-plus"></i></a>
  468.                             <a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
  469.                         </div>
  470.                     </div>
  471.                 </div>#}
  473.             </div>
  475.         </div>
  476.     </section><!-- End Portfolio Section -->
  477.     <section id="publications" class="services">
  478.     <div class="container">
  480.         <div class="section-title">
  481.             <h2>Publications</h2>
  482.         </div>
  484.         <div class="row">
  485.             <div class="publications-container">
  487.                 {% for publication in publications %}
  488.                     <div class="publication-card">
  490.                         <div class="publication-title">
  491.                             <i class="fas fa-file-alt"></i>
  492.                             {{ publication.title ?? 'Untitled Publication' }}
  493.                         </div>
  495.                         {#{% if publication.booktitle %}
  496.                             <div class="publication-book">
  497.                                 <i class="fas fa-book"></i>
  498.                                 {{ publication.booktitle }}
  499.                             </div>
  500.                         {% endif %}#}
  502.                         <div class="publication-meta">
  503.                             {% if publication.pages %}
  504.                                 <span><strong>Pages:</strong> {{ publication.pages }}</span>
  505.                             {% endif %}
  507.                             {% if publication.year %}
  508.                                 <span><strong>Year:</strong> {{ publication.year }}</span>
  509.                             {% endif %}
  511.                             {% if publication.organization %}
  512.                                 <span><strong>Organization:</strong> {{ publication.organization }}</span>
  513.                             {% endif %}
  514.                         </div>
  516.                         {% if publication.authors|length > 0 %}
  517.                             <div class="publication-authors">
  518.                                 <i class="fas fa-user-edit"></i>
  519.                                 authors : 
  520.                                 {% for author in publication.authors %}
  521.                                     {{ author.fullname }}{% if not loop.last %}, {% endif %}
  522.                                 {% endfor %}
  523.                             </div>
  524.                         {% endif %}
  526.                     </div>
  527.                 {% endfor %}
  529.             </div>
  530.         </div>
  532.     </div>
  533. </section>
  534. <style>.publications-container {
  535.     width: 100%;
  536. }
  538. .publication-card {
  539.     background: #f8f9fa;
  540.     border-left: 4px solid #3498db;
  541.     padding: 1rem;
  542.     margin-bottom: 1rem;
  543.     border-radius: 0 4px 4px 0;
  544. }
  546. .publication-card:hover {
  547.     background: #eafaf1;
  548.     transition: background 0.3s;
  549. }
  551. .publication-title {
  552.     font-weight: 600;
  553.     font-size: 1.1rem;
  554.     color: #2c3e50;
  555.     margin-bottom: 0.5rem;
  556. }
  558. .publication-book {
  559.     font-style: italic;
  560.     color: #555;
  561.     margin-bottom: 0.5rem;
  562. }
  564. .publication-meta span {
  565.     display: inline-block;
  566.     margin-right: 1rem;
  567.     font-size: 0.9rem;
  568.     color: #7f8c8d;
  569. }
  571. .publication-authors {
  572.     margin-top: 0.5rem;
  573.     color: #34495e;
  574. }
  576. .fas {
  577.     margin-right: 0.5rem;
  578.     color: #28a745;
  579. }</style>
  580.     <!-- ======= Services Section ======= -->
  581.     <section id="services" class="services">
  582.         <div class="container">
  584.             <div class="section-title">
  585.                 <h2>Supervisions</h2>
  586.                 <p style="text-align: justify">{{ config.encadrement|raw }}</p>
  587.             </div>
  588.             
  589.             <div class="row">
  590.     <div class="encadrements-container">
  591.         {% set types = {
  592.             'phd': '1) PhD',
  593.             'master': '2) Master', 
  594.             'end_of_study_project': '3) End of Study Project'
  595.         } %}
  596.         
  597.         {% for type_key, type_title in types %}
  598.             {% set filtered_encadrements = encadrements|filter(e => e.type.value == type_key) %}
  599.             
  600.             {% if filtered_encadrements|length > 0 %}
  601.                 <div class="encadrement-category">
  602.                     <h3 class="category-title">{{ type_title }}</h3>
  603.                     <div class="encadrement-list">
  604.                         {% for encadrement in filtered_encadrements %}
  605.                             <div class="encadrement-card">
  606.                                 <div class="student-name">
  607.                                     <i class="fas fa-user-graduate"></i>
  608.                                     {{ encadrement.fullname }} ({{encadrement.Datedebut ? encadrement.Datedebut|date('F Y') : 'N/A' }}-{{encadrement.Datefin ? encadrement.Datefin|date('F Y') : 'N/A' }})
  609.                                 </div>
  610.                                 <div class="subject-title">
  611.                                     <i class="fas fa-book"></i>
  612.                                     {{ encadrement.titleofsubject }}
  613.                                 </div>
  614.                                 
  615.                             </div>
  616.                         {% endfor %}
  617.                     </div>
  618.                 </div>
  619.             {% endif %}
  620.         {% endfor %}
  621.     </div>
  622.     <style>
  623.    .encadrements-container {
  624.     width: 100%;
  625. }
  627. .encadrement-category {
  628.     margin-bottom: 2rem;
  629. }
  631. .category-title {
  632.     color: #2c3e50;
  633.     border-bottom: 2px solid #3498db;
  634.     padding-bottom: 0.5rem;
  635.     margin-bottom: 1rem;
  636. }
  638. .encadrement-card {
  639.     background: #f8f9fa;
  640.     border-left: 4px solid #3498db;
  641.     padding: 1rem;
  642.     margin-bottom: 1rem;
  643.     border-radius: 0 4px 4px 0;
  644. }
  646. .encadrement-card:hover {
  647.     background: #e8f4fc;
  648.     transition: background 0.3s;
  649. }
  651. .student-name {
  652.     font-weight: 600;
  653.     color: #2c3e50;
  654.     margin-bottom: 0.5rem;
  655. }
  657. .subject-title {
  658.     color: #555;
  659.     font-style: italic;
  660. }
  662. .encadrement-year {
  663.     color: #7f8c8d;
  664.     font-size: 0.9rem;
  665.     margin-top: 0.5rem;
  666. }
  668. .fas {
  669.     margin-right: 0.5rem;
  670.     color: #3498db;
  671. }</style>
  672.                 {#
  673.                 <div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up" data-aos-delay="100">
  674.                     <div class="icon"><i class="bi bi-card-checklist"></i></div>
  675.                     <h4 class="title"><a href="">Dolor Sitema</a></h4>
  676.                     <p class="description">Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat tarad limino ata</p>
  677.                 </div>
  678.                 <div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up" data-aos-delay="200">
  679.                     <div class="icon"><i class="bi bi-bar-chart"></i></div>
  680.                     <h4 class="title"><a href="">Sed ut perspiciatis</a></h4>
  681.                     <p class="description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
  682.                 </div>
  683.                 <div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up" data-aos-delay="300">
  684.                     <div class="icon"><i class="bi bi-binoculars"></i></div>
  685.                     <h4 class="title"><a href="">Magni Dolores</a></h4>
  686.                     <p class="description">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  687.                 </div>
  688.                 <div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up" data-aos-delay="400">
  689.                     <div class="icon"><i class="bi bi-brightness-high"></i></div>
  690.                     <h4 class="title"><a href="">Nemo Enim</a></h4>
  691.                     <p class="description">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque</p>
  692.                 </div>
  693.                 <div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up" data-aos-delay="500">
  694.                     <div class="icon"><i class="bi bi-calendar4-week"></i></div>
  695.                     <h4 class="title"><a href="">Eiusmod Tempor</a></h4>
  696.                     <p class="description">Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi</p>
  697.                 </div>#}
  698.             </div>
  700.         </div>
  701.     </section><!-- End Services Section -->
  703.     <!-- ======= Testimonials Section ======= -->
  704.     <section id="testimonials" class="testimonials section-bg">
  705.         <div class="container">
  707.             <div class="section-title">
  708.                 <h2>Testimonials</h2>
  709.                 <p style="text-align: justify">{{ config.temoignage|raw }}</p>
  710.             </div>
  712.             <div class="testimonials-slider swiper" data-aos="fade-up" data-aos-delay="100">
  713.                 <div class="swiper-wrapper">
  714.                     {% for temoignage in temoignages %}
  715.                     <div class="swiper-slide">
  716.                         <div class="testimonial-item" data-aos="fade-up">
  717.                             <p>
  718.                                 <i class="bx bxs-quote-alt-left quote-icon-left"></i>
  719.                                 {{ temoignage.description|striptags }}
  720.                                 <i class="bx bxs-quote-alt-right quote-icon-right"></i>
  721.                             </p>
  722.                             <img src="{{ temoignage.photo ? asset('uploads/temoignage/' ~ temoignage.photo) : '' }}" class="testimonial-img" alt="">
  723.                             <h3>{{ temoignage.fullname }}</h3>
  724.                             <h4>{{ temoignage.travail }}</h4>
  725.                         </div>
  726.                     </div>{% endfor %}<!-- End testimonial item -->
  728.                     {#<div class="swiper-slide">
  729.                         <div class="testimonial-item" data-aos="fade-up">
  730.                             <p>
  731.                                 <i class="bx bxs-quote-alt-left quote-icon-left"></i>
  732.                                 Proin iaculis purus consequat sem cure digni ssim donec porttitora entum suscipit rhoncus. Accusantium quam, ultricies eget id, aliquam eget nibh et. Maecen aliquam, risus at semper.
  733.                                 <i class="bx bxs-quote-alt-right quote-icon-right"></i>
  734.                             </p>
  735.                             <img src="assets/img/testimonials/testimonials-1.jpg" class="testimonial-img" alt="">
  736.                             <h3>Saul Goodman</h3>
  737.                             <h4>Ceo &amp; Founder</h4>
  738.                         </div>
  739.                     </div><!-- End testimonial item -->
  741.                     <div class="swiper-slide">
  742.                         <div class="testimonial-item" data-aos="fade-up" data-aos-delay="100">
  743.                             <p>
  744.                                 <i class="bx bxs-quote-alt-left quote-icon-left"></i>
  745.                                 Export tempor illum tamen malis malis eram quae irure esse labore quem cillum quid cillum eram malis quorum velit fore eram velit sunt aliqua noster fugiat irure amet legam anim culpa.
  746.                                 <i class="bx bxs-quote-alt-right quote-icon-right"></i>
  747.                             </p>
  748.                             <img src="assets/img/testimonials/testimonials-2.jpg" class="testimonial-img" alt="">
  749.                             <h3>Sara Wilsson</h3>
  750.                             <h4>Designer</h4>
  751.                         </div>
  752.                     </div><!-- End testimonial item -->
  754.                     <div class="swiper-slide">
  755.                         <div class="testimonial-item" data-aos="fade-up" data-aos-delay="200">
  756.                             <p>
  757.                                 <i class="bx bxs-quote-alt-left quote-icon-left"></i>
  758.                                 Enim nisi quem export duis labore cillum quae magna enim sint quorum nulla quem veniam duis minim tempor labore quem eram duis noster aute amet eram fore quis sint minim.
  759.                                 <i class="bx bxs-quote-alt-right quote-icon-right"></i>
  760.                             </p>
  761.                             <img src="assets/img/testimonials/testimonials-3.jpg" class="testimonial-img" alt="">
  762.                             <h3>Jena Karlis</h3>
  763.                             <h4>Store Owner</h4>
  764.                         </div>
  765.                     </div><!-- End testimonial item -->
  767.                     <div class="swiper-slide">
  768.                         <div class="testimonial-item" data-aos="fade-up" data-aos-delay="300">
  769.                             <p>
  770.                                 <i class="bx bxs-quote-alt-left quote-icon-left"></i>
  771.                                 Fugiat enim eram quae cillum dolore dolor amet nulla culpa multos export minim fugiat minim velit minim dolor enim duis veniam ipsum anim magna sunt elit fore quem dolore labore illum veniam.
  772.                                 <i class="bx bxs-quote-alt-right quote-icon-right"></i>
  773.                             </p>
  774.                             <img src="assets/img/testimonials/testimonials-4.jpg" class="testimonial-img" alt="">
  775.                             <h3>Matt Brandon</h3>
  776.                             <h4>Freelancer</h4>
  777.                         </div>
  778.                     </div><!-- End testimonial item -->
  780.                     <div class="swiper-slide">
  781.                         <div class="testimonial-item" data-aos="fade-up" data-aos-delay="400">
  782.                             <p>
  783.                                 <i class="bx bxs-quote-alt-left quote-icon-left"></i>
  784.                                 Quis quorum aliqua sint quem legam fore sunt eram irure aliqua veniam tempor noster veniam enim culpa labore duis sunt culpa nulla illum cillum fugiat legam esse veniam culpa fore nisi cillum quid.
  785.                                 <i class="bx bxs-quote-alt-right quote-icon-right"></i>
  786.                             </p>
  787.                             <img src="assets/img/testimonials/testimonials-5.jpg" class="testimonial-img" alt="">
  788.                             <h3>John Larson</h3>
  789.                             <h4>Entrepreneur</h4>
  790.                         </div>
  791.                     </div><!-- End testimonial item -->#}
  793.                 </div>
  794.                 <div class="swiper-pagination"></div>
  795.             </div>
  797.         </div>
  798.     </section><!-- End Testimonials Section -->
  800.     <!-- ======= Contact Section ======= -->
  801.     <section id="contact" class="contact">
  802.         <div class="container">
  804.             <div class="section-title">
  805.                 <h2>Contact</h2>
  806.                 <p style="text-align: justify">{{ config.contact|raw }}</p>
  807. {#                <p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>#}
  808.             </div>
  810.             <div class="row" data-aos="fade-in">
  812.                 <div class="col-lg-5 d-flex align-items-stretch">
  813.                     <div class="info">
  814.                         <div class="address">
  815.                             <i class="bi bi-geo-alt"></i>
  816.                             <h4>Adresse:</h4>
  817.                             <p>{{ config.adresse }}</p>
  818.                         </div>
  820.                         <div class="email">
  821.                             <i class="bi bi-envelope"></i>
  822.                             <h4>Email:</h4>
  823.                             <p>{{config.email}}</p>
  824.                         </div>
  826.                         <div class="phone">
  827.                             <i class="bi bi-phone"></i>
  828.                             <h4>Téléphone:</h4>
  829.                             <p>{{ config.telph }}</p>
  830.                         </div>
  832.                         <iframe src="https://www.google.com/maps?q=Bizerte,Tunisia&output=embed" frameborder="0" style="border:0; width: 100%; height: 290px;" allowfullscreen></iframe>
  833.                     </div>
  835.                 </div>
  837.                 <div class="col-lg-7 mt-5 mt-lg-0 d-flex align-items-stretch">
  838.                     <form action="{{ path('app_message_newajax') }}" method="post" role="form" class="php-email-form">
  839.                         <div class="row">
  840.                             <div class="form-group col-md-6">
  841.                                 <label for="name">Nom</label>
  842.                                 <input type="text" name="nom" class="form-control" id="nom" required placeholder="Nom">
  843.                             </div>
  844.                             <div class="form-group col-md-6">
  845.                                 <label for="name">Email</label>
  846.                                 <input type="email" class="form-control" name="email" id="email" required placeholder="Email">
  847.                             </div>
  848.                         </div>
  849.                         <div class="form-group">
  850.                             <label for="name">Objet</label>
  851.                             <input type="date" hidden class="form-control" name="date" id="date" required placeholder="date">
  852.                             <input type="text" class="form-control" name="objet" id="objet" required placeholder="Objet">
  853.                         </div>
  854.                         <div class="form-group">
  855.                             <label for="name">Message</label>
  856.                             <textarea class="form-control" name="message" id="message" rows="10" required placeholder="Message"></textarea>
  857.                         </div>
  858.                         <div class="my-3">
  859. {#                            <div class="loading">Chargement</div>#}
  860. {#                            <div class="error-message"></div>#}
  861.                             <div class="sent-message">Votre message a été envoyé. Merci!</div>
  862.                         </div>
  863. {#                        <div class="rating-form-style form-submit">#}
  864. {#                            <textarea name="Your Review" placeholder="Message" id="message"></textarea>#}
  865. {#                            <input type="button" onclick="addMessage()" value="Valider"  />#}
  866. {#                        </div>#}
  867.                         <div class="text-center">
  868.                             <button type="submit" onclick="addMessage()">Envoyer le message</button></div>
  869.                     </form>
  870.                 </div>
  872.             </div>
  874.         </div>
  875.     </section><!-- End Contact Section -->
  876. <footer class="footer">
  878.         <div class="container">
  879.             <div class="d-flex flex-column flex-md-row justify-content-between align-items-center">
  880.                 <div class="text-center w-100">
  881.                     <span class="copyright">
  882.                         © 2026. Tous droits réservés. Développé par
  883.                         <a href="https://smart-it-partner.com/" target="_blank" rel="noopener noreferrer" class="developer-link">
  884.                             Smart IT Partner
  885.                         </a>
  886.                     </span>
  887.                 </div>
  888.                 
  889.             </div>
  890.             
  891.         
  892.         
  893.         </div>
  894.         
  895.     </footer>
  896.     <style>.footer {
  897.                         background-color: #2f4149; /* Couleur de fond du header */
  898.                         color: white;
  899.                         padding: 1.5rem 0;
  900.                         margin-top: auto; /* Pour pousser le footer en bas si besoin */
  901.                         position: relative;
  902.                         z-index: 10;
  903.                     }
  905.                     /* Conteneur principal du footer */
  906.                     .footer .container {
  907.                         max-width: 1200px;
  908.                         margin: 0 auto;
  909.                         padding: 0 15px;
  910.                     }
  912.                     /* Style du lien du développeur */
  913.                     .footer .developer-link {
  915.                     }
  917.                     .footer .developer-link:hover {
  918.                         color: rgba(255, 255, 255, 0.7);; /* Version plus foncée au survol */
  919.                         text-decoration: underline;
  920.                     }
  922.                     /* Responsive */
  923.                     @media (max-width: 768px) {
  924.                         .footer {
  925.                             padding: 1rem 0;
  926.                             text-align: center;
  927.                         }
  929.                         .footer .copyright {
  930.                             font-size: 0.9rem;
  931.                             line-height: 1.4;
  932.                         }
  933.                     }</style>
  934. </main><!-- End #main -->
  936. <!-- ======= Footer ======= -->
  937. {#<footer id="footer">
  938.     <div class="container">
  939.         <div class="copyright">
  940.             &copy; Copyright <strong><span>iPortfolio</span></strong>
  941.         </div>
  942.         <div class="credits">
  943.             <!-- All the links in the footer should remain intact. -->
  944.             <!-- You can delete the links only if you purchased the pro version. -->
  945.             <!-- Licensing information: https://bootstrapmade.com/license/ -->
  946.             <!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/iportfolio-bootstrap-portfolio-websites-template/ -->
  947.             Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
  948.         </div>
  949.     </div>
  950. </footer><!-- End  Footer -->#}
  952. <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
  954. <!-- Vendor JS Files -->
  955. <script src="{{ asset('assets/vendor/purecounter/purecounter_vanilla.js') }}"></script>
  956. <script src="{{ asset('assets/vendor/aos/aos.js') }}"></script>
  957. <script src="{{ asset('assets/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
  958. <script src="{{asset('assets/vendor/glightbox/js/glightbox.min.js')  }}"></script>
  959. <script src="{{ asset('assets/vendor/isotope-layout/isotope.pkgd.min.js') }}"></script>
  960. <script src="{{asset('assets/vendor/swiper/swiper-bundle.min.js')  }}"></script>
  961. <script src="{{ asset('assets/vendor/typed.js/typed.min.js') }}"></script>
  962. <script src="{{asset('assets/vendor/waypoints/noframework.waypoints.js')  }}"></script>
  963. <script src="{{ asset('assets/vendor/php-email-form/validate.js') }}"></script>
  964. <link rel="stylesheet" 
  965.       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
  966. <!-- Template Main JS File -->
  967. <script src="{{asset('assets/js/main.js')  }}"></script>
  968. <link href="//cdn.jsdelivr.net/npm/@sweetalert2/themes/dark" rel="stylesheet">
  969. <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  970. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  971. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
  972. <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
  975. <script>
  976.     function fireSweetAlertMessage() {
  977.         swal({
  978.             title: 'Message envoyé!',
  979.             text: 'Votre message a été envoyé avec succès.',
  980.             type: 'success',
  981.             confirmButtonText: 'OK'
  982.         });
  983.     }
  986. </script>
  988. <script>
  989.     function addMessage() {
  990.         console.log("ok new")
  991.         var nom = document.getElementById("nom").value;
  992.         var email = document.getElementById("email").value;
  993.         var objet = document.getElementById("objet").value;
  994.         var message = document.getElementById("message").value;
  995.         $.ajax({
  996.             type: "POST",
  997.             url: "{{ path('app_message_newajax') }}",
  998.             data:  {email:email,  nom:nom, message:message,objet:objet  },
  999.             success: function (data) {
  1000.                 console.log(data);
  1001.                 if (data.success) {
  1002.                     fireSweetAlertMessage();
  1003.                     document.getElementById("nom").value = "";
  1004.                     document.getElementById("email").value = "";
  1005.                     document.getElementById("objet").value = "";
  1006.                     document.getElementById("message").value = "";
  1007.                 }
  1008.             }
  1009.         });
  1010.     }
  1012. </script>
  1014. </body>
  1016. </html>