templates/portfolio/index.html.twig line 1

  1. {% extends 'base-portfolio.html.twig' %}
  3. {% block title %}Portfolio de Surmurthag{% endblock %}
  5. {% block body %}
  6.     {#<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet">
  7.     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">#}
  8.     <style>
  9.      /*   .modal-backdrop.show {
  10.             opacity: 0.5 !important;
  11.             background-color: #000;
  12.         }
  13.         #btnConnexion {
  15.             background-color: transparent;
  16.             border: none;
  17.             padding: 0;
  18.             height: 25px;
  19.             width: 25px;
  20.         }
  22.         #btnConnexion:hover, #btnConnexion:focus {
  23.             background-color: transparent;
  24.             outline: none;
  25.             height: 25px;
  26.             width: 25px;
  27.         }
  28.         #chatModal {
  30.             background-color: transparent;
  31.             border: none;
  32.             padding: 0;
  33.             height: 25px;
  34.             width: 25px;
  35.         }
  37.         #chatModal:hover, #chatModal:focus {
  38.             background-color: transparent;
  39.             outline: none;
  40.             height: 25px;
  41.             width: 25px;
  42.         }
  43. */
  44.     </style>
  46.     <div class="text-center">
  47.         {% for message in app.flashes('error') %}
  48.             <div class="alert alert-danger" role="alert">
  49.                 {{ message }}
  50.             </div>
  51.         {% endfor %}
  52.     </div>
  53.     <div class="text-center mt-1">
  55.         <img src="{{ asset('build/portfolio/profilFondMath.png') }}" alt="Photo de profil" class="rounded-circle" style="width: 150px; height: 150px;">
  56.         <h1>Surmurthag</h1>
  57.         <a href="https://github.com/surmurthag" class="btn btn-dark mt-2"><i class="fab fa-github"></i> GitHub</a>
  59.     </div>
  61.     <div class="container mt-5">
  62.         <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">
  63.             <div class="col">
  64.             <div class="card h-100 d-flex flex-column justify-content-between">
  65.                 <img src="{{ asset('build/portfolio/EpisolBackground.PNG') }}" class="card-img-top" alt="Image du site 1">
  66.                 <div class="card-body text-center">
  67.                     <h5 class="card-title">Epicerie</h5>
  70.                 </div>
  71.                 <div class="card-footer bg-transparent text-center">
  72.                     <a href="{{ path('Episol_portfolio') }}" class="btn btn-success">Visiter le site</a>
  73.                 </div>
  74.             </div>
  76.     </div>
  79.             <div class="col">
  80.                 <div class="card h-100 d-flex flex-column justify-content-between">
  81.                 <img src="{{ asset('build/portfolio/LadegustBackground.PNG') }}" class="card-img-top" alt="Image du site 2">
  82.                     <div class="card-body text-center">
  83.                         <h5 class="card-title">Dégustation</h5>
  86.                     </div>
  87.                         <div class="card-footer bg-transparent text-center">
  89.                             <button id="monBouton"  class="btn btn-success">Visiter le site</button>
  91.                         </div>
  92.                     </div>
  94.             </div>
  96.             <div class="col">
  97.                 <div class="card h-100 d-flex flex-column justify-content-between">
  98.                 <img src="{{ asset('build/portfolio/UneTerreEnSoiBackground.PNG') }}" class="card-img-top" alt="Image du site 3">
  99.                     <div class="card-body text-center">
  100.                         <h5 class="card-title">Bien-être</h5>
  103.                     </div>
  104.                         <div class="card-footer bg-transparent text-center">
  105.                         <a href="{{ path('uneTerreEnSoi_portfolio') }}" class="btn btn-success">Visiter le site</a>
  106.                         </div>
  107.                     </div>
  109.             </div>
  111.             <div class="col">
  112.                 <div class="card h-100 d-flex flex-column justify-content-between">
  113.                 <img src="{{ asset('build/portfolio/EntBatimentBackground.PNG') }}" class="card-img-top" alt="Image du site 4">
  114.                     <div class="card-body text-center">
  115.                         <h5 class="card-title">Peinture</h5>
  118.                     </div>
  119.                         <div class="card-footer bg-transparent text-center">
  120.                         <a href="{{ path('app_portfolio_templates_entreprise_du_batiment') }}" class="btn btn-success">Visiter le site</a>
  121.                         </div>
  123.                 </div>
  124.             </div>
  126.             <div class="col">
  127.                 <div class="card h-100 d-flex flex-column justify-content-between">
  128.                 <img src="{{ asset('build/portfolio/ConfyUIBackground.PNG') }}" class="card-img-top" alt="Image du site 4">
  129.                     <div class="card-body text-center">
  130.                         <h5 class="card-title">ConfyUI</h5>
  131.                     </div>
  132.                     <div class="card-footer bg-transparent text-center">
  133.                         <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#downloadModal">Télécharger ConfyUI</button>
  134.                     </div>
  135.                 </div>
  136.             </div>
  138.             <div class="col">
  139.                 <div class="card h-100 d-flex flex-column justify-content-between">
  140.                     <img src="{{ asset('build/portfolio/SolarBackground.PNG') }}" class="card-img-top" alt="Image du site 4">
  141.                     <div class="card-body text-center">
  142.                         <h5 class="card-title">SolarSystem</h5>
  143.                     </div>
  144.                     <div class="card-footer bg-transparent text-center">
  145.                         <a href="{{ path('app_portfolio_solarSystem') }}" class="btn btn-success">Visiter le site</a>
  146.                     </div>
  147.                 </div>
  148.             </div>
  150.             <div class="col">
  151.                 <div class="card h-100 d-flex flex-column justify-content-between">
  152.                     <img src="{{ asset('build/portfolio/Llama2Background.PNG') }}" class="card-img-top" alt="Image du site 4">
  153.                     <div class="card-body text-center">
  154.                         <h5 class="card-title">Chatbot IA Génération</h5>
  155.                     </div>
  156.                     <div class="card-footer bg-transparent text-center">
  157.                         <a href="{{ path('app_portfolio_show_profil') }}" class="btn btn-success">Visiter le site</a>
  158.                     </div>
  159.                 </div>
  160.             </div>
  162.            {# <button id="btnConnexion" data-is-connected="{{ app.user ? 'true' : 'false' }}" class="btn position-absolute top-0 end-0 m-3 ">
  163.                 <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-power {{ app.user ? 'text-success' : 'text-danger' }}" viewBox="0 0 16 16">
  164.                     <path d="M7.5 1v7h1V1z"/>
  165.                     <path d="M3 8.812a5 5 0 0 1 2.578-4.375l-.485-.874A6 6 0 1 0 11 3.616l-.501.865A5 5 0 1 1 3 8.812"/>
  166.                 </svg>
  167.             </button>
  169.             <div class="modal fade" id="modalConnexion" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
  170.                 <div class="modal-dialog modal-dialog-centered">
  171.                     <div class="modal-content">
  172.                         <div class="modal-header">
  173.                             <h5 class="modal-title">Vous souhaitez vous connecter.</h5>
  174.                             <button type="button" class="btn-close close-modal" data-bs-dismiss="modal" aria-label="Close"></button>
  175.                         </div>
  176.                         <div class="modal-body text-center">
  177.                             <form id="downloadVerificationForm" >
  178.                                 <a type="submit" class="btn btn-success" href="{{ path('app_login') }}">connexion</a>
  179.                             </form>
  180.                         </div>
  181.                     </div>
  182.                 </div>
  183.             </div>
  185.             <div class="modal fade" id="modalDeconnexion" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
  186.                 <div class="modal-dialog modal-dialog-centered">
  187.                     <div class="modal-content">
  188.                         <div class="modal-header">
  189.                             <h5 class="modal-title">Vous souhaitez vous déconnecter.</h5>
  190.                             <button type="button" class="btn-close close-modal" data-bs-dismiss="modal" aria-label="Close"></button>
  191.                         </div>
  192.                         <div class="modal-body text-center">
  193.                             <form id="downloadVerificationForm" >
  195.                                 <a type="submit" class="btn btn-success" href="{{ path('app_logout') }}">déconnexion</a>
  196.                             </form>
  197.                         </div>
  198.                     </div>
  199.                 </div>
  200.             </div>
  201. #}
  202.             <div class="modal fade" id="downloadModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
  203.                 <div class="modal-dialog modal-dialog-centered">
  204.                     <div class="modal-content">
  205.                         <div class="modal-header">
  206.                             <h5 class="modal-title">Entrer le code de téléchargement</h5>
  207.                             <button type="button" class="btn-close close-down-modal" data-bs-dismiss="modal" aria-label="Close"></button>
  208.                         </div>
  209.                         <div class="modal-body text-center">
  210.                             <form method="post" action="{{ path('verify_download_code_www') }}">
  211.                                 <div class="mb-3">
  212.                                     <label for="downloadverificationCode"></label>
  213.                                     <input type="text" class="form-control" id="downloadverificationCode" name="download-verification_code" placeholder="Code à 4 chiffres" required>
  214.                                 </div>
  215.                                 <button type="submit" class="btn btn-success">Vérifier le code</button>
  216.                             </form>
  217.                         </div>
  219.                     </div>
  220.                 </div>
  221.             </div>
  223.          {#   <button id="chatModal" class="btn position-absolute bottom-0 end-0 m-3" >
  224.                 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-robot" viewBox="0 0 16 16">
  225.                     <path d="M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.6 26.6 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.93.93 0 0 1-.765.935c-.845.147-2.34.346-4.235.346s-3.39-.2-4.235-.346A.93.93 0 0 1 3 9.219zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a25 25 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25 25 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135"></path>
  226.                     <path d="M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2zM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5"></path>
  227.                 </svg>
  228.             </button>
  230.             <div class="modal fade" id="chatbotModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
  231.                 <div class="modal-dialog modal-dialog-centered">
  232.                     <div class="modal-content">
  233.                         <div class="modal-header">
  234.                             <h5 class="modal-title">Bienvenue sur le tchatbot </h5>
  235.                             <button type="button" class="btn-close close-modal" data-bs-dismiss="modal" aria-label="Close"></button>
  237.                         </div>
  238.                         <div class="modal-body text-center">
  239.                             <form id="promptForm">
  240.                                 <input type="text" id="promptInput" placeholder="Entrez votre question ici">
  241.                                 <button type="submit">Envoyer</button>
  242.                             </form>
  243.                             <div id="responseContainer" style="margin-top: 20px; height: 15em;"></div> <!-- Zone pour afficher la réponse -->
  244.                             <div id="botpress-chat-container"></div> <!-- Conteneur pour le chatbot -->
  245.                         </div>
  249.                     </div>
  250.                 </div>
  252.             </div>
  253. #}
  254.         </div>
  255.     </div>
  256.     {#<script src="https://cdn.botpress.cloud/webchat/v1/inject.js"></script>
  257.     <script src="https://mediafiles.botpress.cloud/0e76e20f-72e7-48c7-b9be-6ad7817d50a7/webchat/config.js" defer></script>#}
  258.     {#<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>#}
  259.     <script>
  260.     /*    document.getElementById('btnConnexion').addEventListener('click', function() {
  261.             var isConnected = this.getAttribute('data-is-connected') === 'true';
  262.             var modalId = isConnected ? 'modalDeconnexion' : 'modalConnexion';
  263.             var modal = new bootstrap.Modal(document.getElementById(modalId));
  264.             modal.show();
  265.         });
  266. */
  267.     /*    document.addEventListener('DOMContentLoaded', function() {
  268.             // Configuration de Botpress
  269.             window.botpressWebChat.init({
  270.                 host: 'https://mediafiles.botpress.cloud/be59bd44-3746-46c9-b9bc-f7d1956d2ca3/webchat/bot.html', // Remplacez par votre URL de serveur Botpress
  271.                 botId: 'bp_pat_irQyeGbmyBSSkeSvtzDVFgeZMa5j2Pr0TxOv', // Remplacez par l'ID de votre bot Botpress
  272.                 container: document.getElementById('botpress-chat-container'), // Spécifiez le conteneur du chatbot
  273.             });
  275.             // Affichez le modal lorsque le chatbot est prêt
  276.             var modal = new bootstrap.Modal(document.getElementById('chatbotModal'));
  277.             document.getElementById('votre_bouton_ou_element_declencheur').addEventListener('click', function() {
  278.                 modal.show();
  279.             });
  280.         });
  281. */
  282.       /*  document.getElementById('chatModal').addEventListener('click', function() {
  283.             var modal = new bootstrap.Modal(document.getElementById('chatbotModal'));
  284.             modal.show();
  285.         });*/
  288.   /*      document.getElementById('monBouton').addEventListener('click', function() {
  289.             {% if app.user %}
  290.             window.location.href = 'https://ladegust.fr/';
  291.             {% else %}
  292.             window.location.href = '{{ path('app_login') }}';
  293.             {% endif %}
  294.         });
  295.         window.addEventListener('load', function() {
  296.             if (document.querySelectorAll('.alert-danger').length > 0) {
  297.                 var myModal = new bootstrap.Modal(document.getElementById('downloadModal'));
  298.                 myModal.show();
  299.             }
  300.         });*/
  301.      /*   window.addEventListener('chat', function() {
  302.             if (document.querySelectorAll('.alert-danger').length > 0) {
  303.                 var chatModal = new bootstrap.Modal(document.getElementById('chatbotModal'));
  304.                 chatModal.show();
  305.             }
  306.         });*/
  307.       /*  document.addEventListener('DOMContentLoaded', function () {
  308.             var closeModalButtons = document.querySelectorAll('.close-modal');
  309.             closeModalButtons.forEach(function (button) {
  310.                 button.addEventListener('click', function () {
  311.                     window.location.href = "{{ path('app_portfolio') }}";
  312.                 });
  313.             });
  314.         });*/
  316.        /* document.addEventListener('DOMContentLoaded', function () {
  317.             var username = 'surmurthag@outlook.fr'; // Remplacez par le nom d'utilisateur de test
  318.             var password = '@USqJnMp0f0BKAaKzIsUy'; // Remplacez par le mot de passe de test
  319.             var form = document.getElementById('promptForm');
  320.             form.onsubmit = async function (event) {
  321.                 event.preventDefault();
  324.                 var promptValue = document.getElementById('promptInput').value;
  325.                 var requestData = {
  326.                     "prompt": promptValue
  327.                 };
  329.                 try {
  330.                     const response = await fetch('/post-response-IA', {
  331.                         method: 'POST',
  332.                         headers: {
  333.                             'Content-Type': 'application/json',
  334.                             'Authorization': 'Basic ' + btoa(username + ':' + password)
  335.                         },
  336.                         body: JSON.stringify(requestData)
  337.                     });
  339.                     if (!response.ok) {
  340.                         throw new Error(`HTTP error! status: ${response.status}`);
  341.                     }
  343.                     const data = await response.json();
  344.                     console.log(data);
  346.                     // Extraire uniquement la réponse du tchat
  347.                     const chatResponse = data.response.response;
  349.                     // Mise à jour de la zone de réponse avec uniquement la réponse du tchat
  350.                     document.getElementById('responseContainer').innerText = chatResponse;
  351.                 } catch (error) {
  352.                     document.getElementById('responseContainer').innerText = 'Erreur : Impossible de récupérer la réponse.';
  353.                 }
  354.             };
  355.         });
  356. */
  359.     </script>
  361. {% endblock %}