templates/projets/index.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}Saltaf Studio | Accueil{% endblock %}
  5. {% block body %}
  6. <style>body{
  7.     background-color:#E8E0C9;
  8. }</style>
  9. <div class="top">
  10. </div>
  11. <div class="tip">
  12. </div><a href="{{ path('projet') }}">
  13. <div class="fit">
  14. <img class="fit-picture"
  15.      src="{{asset(('images/site/logo.png'))}}"
  16.      alt="logo Saltaf">
  17. </div></a>
  18. <div class="picture-titre">
  19.         <img 
  20.      src="{{asset('images/sltflogo.svg')}}" class="trucss">
  21.     </div>
  22. <div>
  23. <!--div class="triangle">
  24.     <p class="contacts">Bonjour@saltaf.com</p>
  25. </div-->
  26. <button  id="mybutton" style="position:fixed;top:20px;left:200px;z-index:1000;display:none;">Matin</button>
  28. <button onclick="envoyer1()" id="btn_rose" style="position:fixed;top:20px;left:20px;z-index:1000;display:none;">Matin</button>
  30. <button onclick="envoyer2()" id="btn_rose2" style="position:fixed;top:20px;left:100px;z-index:1000;display:none">Matin</button>
  31. <canvas width="3000px" height="3000px" id="drawPlace" style="border:1px solid #eee;position:fixed;top:-550px;z-index:200;display:none;"></canvas>
  32.         <script>var square = document.getElementById("drawPlace");
  33. var paper = square.getContext("2d");
  34. var pressedMouse = false; 
  35. var x;
  36. var y;
  37. var color2 = "#66d9a4";
  39. var colorLine ="#9cb7e1";
  41. function envoyer1(){
  42. colorLine = "#9cb7e1";;
  43. }
  44. function envoyer2(){
  45. colorLine = color2;
  46. }
  47. var key = {C: 67};
  50.   const button = document.getElementById("mybutton");
  51.   let isActionExecuted = false;
  53.   button.addEventListener("click", function() {
  54.     if (!isActionExecuted) {
  55.       
  56.       console.log("Action exécutée");
  57.       
  58.       document.addEventListener("mouseover", startDrawing);
  59. document.addEventListener("mousemove", drawLine);
  61. document.addEventListener("keydown", clearCanvas);
  62. isActionExecuted = true;
  63.     } else {
  64.       // Annulez votre action ici
  65.       stopDrawing();
  66.       console.log("Action annulée");
  67.       isActionExecuted = false;
  68.       
  69.     }
  70.   });
  72. function envoyer3(){
  73.     
  74.     
  75. }
  77. function startDrawing(eventvs01){
  78.     pressedMouse = true;
  79.     x = eventvs01.offsetX;
  80.     y = eventvs01.offsetY;
  81. }
  83. function drawLine(eventvs02) {
  84.     if (pressedMouse) {
  85.         document.getElementById("drawPlace").style.cursor = "crosshair";
  86.         var xM = eventvs02.offsetX;
  87.         var yM = eventvs02.offsetY;
  88.         drawing_line(colorLine, x, y, xM, yM, paper);
  89.         x = xM;
  90.         y = yM;
  91.     }
  92. }
  94. function stopDrawing(eventvs03) {
  95.     pressedMouse = false;
  96.     document.getElementById("drawPlace").style.cursor = "default";
  97. }
  99. function clearCanvas(whenPressKey) {
  100.     if (whenPressKey.keyCode == key.C) {
  101.         paper.clearRect(0, 0, square.width, square.height);
  102.     }
  103. }
  105. drawing_line("#FFf", x-1, y, x, y, paper);
  107. function drawing_line(color, x_start, y_start, x_end, y_end, board){
  108.     board.beginPath();
  109.     board.strokeStyle = color;
  110.     board.lineWidth = 80;
  111.     board.moveTo(x_start,y_start);
  112.     board.lineTo(x_end,y_end);
  113.     board.stroke(); 
  114.     board.closePath();
  115. }</script>
  117. <div class="listProjet"></a>
  118.     
  119.     <div style="display:flex;" class="link">
  120. <a href="#contact" class="conta">Contact</a>
  121.         <a href="{{ path('app_projet_metiers')}}">Nos métiers</a>
  122.     </div>
  123.     <ul >
  124.         {% for projet in projets %}
  125.         
  126.         <li id="element">
  127.             <img id="hover_image" src="{{asset('images/' ~ projet.imagePresentation)}}" alt="">
  128.             <img id="hover_image2" src="{{asset('images/' ~ projet.image2)}}" alt="">
  129.             <a href="{{ path('app_projet_show', {'id': projet.id}) }}" class="typo" >
  130.                 
  131.                 <p id="mon_element">{{projet.titre}}</p>
  132.             </a>
  133.         </li>
  134.         
  135.         {% endfor %}
  136.         <div style="height:40px;"> </div>
  138.     </ul>
  139.     <div  class="menuzen">
  140.         <p class="menuzen-p">Nous sommes ravis de partager notre vision d'un monde plus juste, plus agréable et plus ambitieux avec vous. <br>
  141.         <br>Saltaf Studio, spécialisé dans l'image des petites et moyennes entreprises, est là pour vous accompagner tout au long de votre parcours. 
  142.         <br>
  143.         <br>Chez Saltaf Studio, nous sommes des créatifs, des illustrateurs, des artistes 3D, des concepteurs et des développeurs qui puisent dans l'actualité, notre sensibilité et notre créativité pour construire un monde plus juste.
  144.         <br><br>
  145.         Nous sommes impatients de vous aider à atteindre vos objectifs.</p>
  146.     </div>
  147.     <div class="categorie">
  148.     {% for categorie in categories %}
  149.     
  150.     <a href="categorie/{{ categorie.id }}" ><span >{{ categorie.titre }}</span></a>
  151.     {% endfor %}
  152.               
  153. </div>
  154.     <div class="contain" >
  155.         <div class="foottest">
  156.         <img 
  157.      src="{{asset('images/sltflogo.svg')}}" class="foots">
  158.     </div>
  159.     <div  class="testr" id="contact">
  160.     
  161.         <p class="contact-p">Contactez nous</p>
  162.         
  163.         <div class="container" style="margin:0;">
  164.             <div class="row contactSaltaf">
  165.                 <div class="col-md-3">
  166.                 <a href="mailto:studio.saltaf@gmail.com"><img src="{{asset('images/mail.svg')}}" class="mail"></a>
  167.     </div>
  168.                 <div class="col-md-3"><a href="tel:+33666440867"><img src="{{asset('images/tel.svg')}}" class="tel"></a></div>
  169.                 <div class="col-md-3"><a href="https://www.instagram.com/saltaf_studio/" target="_blank"><img src="{{asset('images/insta.svg')}}" class="insta"></a></div>
  170.                 <div class="col-md-3"><a href="https://www.facebook.com/saltafprod" target="_blank"><img src="{{asset('images/fb.svg')}}" class="fb"></a></div>
  171.         </div>
  172.         
  173.    
  174.     <p class="bbtn-p">
  176. Studio Saltaf reste à votre dispostition pour tous projets graphiques ,
  178. de communication, de site web & autres .<br>
  180.  
  182. Nous serions ravis de vous accompagner dans vos futurs projets</p>
  183. <footer class="con">
  184.     Saltaf.Studio<br>
  185.     Studio de Graphisme<br>
  186.     42 rue du grand Faubourg<br>
  187.     Chartres - 28000 France
  188.     <br><br>
  189. </footer>
  190.         
  191.     </div>
  192. </div>
  194. </div>
  198. {% endblock %}