templates/home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'layout.html.twig' %}
  2. {% block body %}
  3.     <div class="row">
  4.         <div class="col-md-10 col-md-offset-1 text-center">
  5.             
  6.             <h1 class="easyamap easyamap-large"><img src="https://cdn1.easyamap.fr/images/logo-easy-amap-160.png" alt="Logo Easy AMAP" /> easy<span>amap</span></h1>
  7.             
  8.             
  9.             <h4>Le logiciel de gestion de commandes pour les AMAP</h4>
  10.             <br /><br/>        </div>
  11.     </div>
  12.      <div class="row" id="presentation">
  13.         <div class="col-md-10 col-md-offset-1">
  14.             <h3>Présentation</h3>
  15.             <p><span class="easyamap easyamap-small">easy<span>amap</span></span> est un logiciel en ligne de gestion des commandes pour les AMAP. Accessible depuis n'importe quel navigateur, il permet de simplifier la saisie des contrats pour les adhérents et d'obtenir les compte-rendus nécessaires aux producteurs et aux administrateurs.</p>
  16.             <p>Ce logiciel a été développé initialement pour les besoins de l'AMAP de La Riche (Indre-et-Loire) et est maintenant disponible pour toutes les AMAP qui le souhaitent.</p>
  17.         </div>
  18.      </div>
  19.      <div class="row">
  20.         <div class="col-md-10 col-md-offset-1">            
  21.             <h3>Fonctionnement</h3>
  22.             <p>Chaque adhérent dispose d'un accès protégé par mot de passe afin d'accéder aux différents contrats proposés. </p>
  23.             <p>Les comptes "référent" permettent de créer un contrat en fixant les dates et la liste des produits disponibles. </p>
  24.             <p>Les comptes "producteurs" accèdent uniquement aux comptes-rendus des contrats (par date, par adhérent...)</p>
  25.             <p>Les comptes "administrateurs" servent à la gestion des adhérents, des producteurs et permettent d'accéder à des statistiques avancées.</p>
  26.    </div>
  27.      </div>
  28.      <div class="row">
  29.         
  30.         <div class="col-md-10 col-md-offset-1">
  31.             <h3>Diaporama</h3>
  32.             <br />
  33.             <h4 id="carousel-comment" class="text-center"></h4>
  34.             <div id="carousel-container">
  35.             <div class="owl-carousel owl-theme">
  36.             {% for diapo in diapos %}
  37.                 <div class="item">
  38.                   <img class="owl-lazy" data-src="https://cdn1.easyamap.fr/images/diapo/{{ diapo[0] }}" title="{{ diapo[1] }}" />
  39.                 </div>
  40.             {% endfor %}
  41.             </div>
  42.             
  43.             </div>
  44.             <div class="text-center" style="margin-top:10px;">
  45.                 <button type="button" id="prev" class="btn btn-primary"><i class="glyphicon glyphicon-step-backward"></i></button>
  46.                 <button type="button" id="play" class="btn btn-primary"><i class="glyphicon glyphicon-play"></i></button>
  47.                 <button type="button" id="stop" class="btn btn-primary"><i class="glyphicon glyphicon-stop"></i></button>
  48.                 <button type="button" id="next" class="btn btn-primary"><i class="glyphicon glyphicon-step-forward"></i></button>
  49.             </div>
  50.         </div>
  51.      </div>
  52.     <div class="row">
  53.         <div class="col-md-10 col-md-offset-1">            
  54.             <h3>Tester</h3>
  55.             <p>Pour test le logiciel, merci de me contacter à cette adresse : {{ "[email protected]" }}</p>
  56.         </div>
  57.      </div>
  58.      <div class="row">
  59.         <div class="col-md-10 col-md-offset-1">            
  60.             <h3>Installer</h3>
  61.             <p>Pour mettre en place l'outil dans votre AMAP, vous pouvez me contacter à cette adresse : {{ "[email protected]" }}</p>
  62.             <p>L'abonnement coûte <b>25€/an</b> pour une AMAP quel que soit le nombre d'adhérents.</p>
  63.             <p>Vous pourrez choisir une adresse du type <i>https://nomdemonamap.easyamap.fr</i></p>
  64.             <p>Le logiciel est open-source, vous pouvez également installer vous-même l'application si vous le souhaitez. Voir <a href="https://github.com/abouchereau/easyamap">https://github.com/abouchereau/easyamap</a>
  65.         </div>
  66.      </div>
  67.      <div class="row">
  68.         <div class="col-md-10 col-md-offset-1">            
  69.             <h3>Documentation</h3>
  70.             <p>La documentation est accessible ici : <a href="https://cdn1.easyamap.fr/docs/documentation.pdf">https://cdn1.easyamap.fr/docs/documentation.pdf</a></p>
  71.             <p>Un tutoriel adhérent est accessible ici : <a href="https://cdn1.easyamap.fr/docs/tuto-easyamap.pdf">https://cdn1.easyamap.fr/docs/tuto-easyamap.pdf</a></p>
  72.             <p>Un support de formation pour les référents  est accessible ici : <a href="https://cdn1.easyamap.fr/docs/easyamap_formation_referents.pptx">https://cdn1.easyamap.fr/docs/easyamap_formation_referents.pptx</a> (document réalisé par <a href="http://www.pascal-lenoble.fr/">Pascal Lenoble</a>)</p>
  73.         </div>
  74.      </div>
  75.      <div class="row">
  76.         <div class="col-md-10 col-md-offset-1">            
  77.             <h3>Technologies utilisées</h3>
  78.             <p><strong>Symfony 4</strong> : framework PHP open-source permettant de créer une application solide, sécurisée et évolutive.</p>
  79.             <p><strong>Bootstrap</strong> : framework CSS / Javascript open-source facilitant la création d'une interface claire et "responsive".</p>
  80.             <p><strong>MySQL</strong> : base de données robuste et rapide.</p>
  81.             <p>L'hébergement est effectué sur un serveur <strong>Dedibox</strong> utilisant un système d'exploitation <strong>Debian 10</strong>.
  82.         </div>
  83.      </div>
  84.      <div class="row">
  85.         <div class="col-md-10 col-md-offset-1">            
  86.             <h3>Versions</h3>
  87.             <p>L'historique des évolutions est accessible ici: <a href="{{ path('historique') }}">{{ app.request.scheme ~'://' ~ app.request.httpHost ~ path('historique') }}</a></p>
  88.         </div>
  89.      </div>
  90.      <div class="row">
  91.         <div class="col-md-10 col-md-offset-1">            
  92.             <h3>Conditions Générales d'utilisation</h3>
  93.             <p>Les conditions générales d'utilisation sont acessibles ici <a href="https://cdn1.easyamap.fr/docs/CGU-easyamap.pdf">https://cdn1.easyamap.fr/docs/CGU-easyamap.pdf</a></p>
  94.         </div>
  95.      </div>
  96.       <div class="row" id="empreinte-ecologique">
  97.         <div class="col-md-10 col-md-offset-1">            
  98.             <h3> Empreinte écologique </h3>
  99.    
  100.                 <p>
  101.                 L'utilisation d'une application web comme easyamap permet d'éviter des échanges par mail qui nécessitent beaucoup de stockage.
  102.                 Par exemple, un fichier Excel de 1Mo envoyé par mail à 50 personnes est en réalité dupliqué sur 50 serveurs, puis de nouveau sur les 50 ordinateurs des personnes qui le téléchargent.</p>
  103.                 Au contraire, les données hébergées par easyamap sont peu volumineuses (1 à 10 Mo au total par AMAP) et ne sont stockées qu'à un endroit (plus les sauvegardes).
  104.                 L'application easyamap a des pages web légères : 1 Mo maximum par page. Il y a très peu d'images, pas de video ou d'animations. Elle suit de manière générale les recommandations du <a href="https://label.greencodelab.org/green-code-label-detail/">Green Code Label</a>. 
  105.                 Les pages imprimables sont "allégées" : pas d'élément superflu, nombre de pages minimal.
  106.                 </p>
  107.                 <p>
  108.                 L'empreinte écologique de l'application dépend aussi des adhérents eux-mêmes.
  109.                 Ainsi, il est recommandé aux utilisateurs d'utiliser Firefox plutôt que Chrome et une connexion fibre/ADSL plutôt que 4G/5G.
  110.                 Pour plus d'informations, voir le guide de l'ADEME "La face cachée du numérique" : <a href="https://www.ademe.fr/sites/default/files/assets/documents/guide-pratique-face-cachee-numerique.pdf">https://www.ademe.fr/sites/default/files/assets/documents/guide-pratique-face-cachee-numerique.pdf</a>
  111.                 </p>
  112.         </div>
  113.       </div>
  114.                 
  115.         
  116.         {# <div class="row">
  117.         <div class="col-md-10 col-md-offset-1">            
  118.             <h3>Ils ont choisi easyamap</h3>
  119.             <div id="map"></div>
  120.         </div>
  121.      </div>
  122.    
  123.     var CartoDB_Positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
  124.     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
  125.     subdomains: 'abcd',
  126.     maxZoom: 19
  127. });
  128. #}
  129.      <div class="row">
  130.         <div class="col-md-10 col-md-offset-1">            
  131.             <h3>L'auteur</h3>
  132.             <p>Anthony Bouchereau est Expert Technique Digital chez Umanis. Il maîtrise en particulier les langages PHP, Javascript et Java.</p>
  133.             <p>Depuis 2015, il développe le logiciel <span class="easyamap easyamap-small">easy<span>amap</span></span> comme projet personnel.</p>
  134.             <p><a href="https://fr.linkedin.com/in/anthony-bouchereau-66909239"><img src="https://cdn1.easyamap.fr/images/linkedin.png" alt="Logo LinkedIn" /> https://fr.linkedin.com/in/anthony-bouchereau-66909239</a></p>
  135.         </div>
  136.      </div>
  137.         
  138.     <div class="row">
  139.         <div class="col-md-10 col-md-offset-1">            
  140.             <h3>Les AMAP qui utilisent <span class="easyamap easyamap-small">easy<span>amap</span></span></h3>
  141.             
  142.             {% include 'home/_map.html.twig' with {'amaps': amaps } %}  
  143.         </div>
  144.      </div>
  145.         
  146.      <div class="row">
  147.         <div class="col-md-10 col-md-offset-1">            
  148.             <h3>Suivre sur Facebook</h3>
  149.             <p><a href="https://www.facebook.com/easyamap"><img src="https://cdn1.easyamap.fr/images/facebook.png" alt="Logo Facebook" /> https://www.facebook.com/easyamap</a></p>
  150.             
  151.         </div>
  152.     </div>
  153. {% endblock %}