Integrate illustrations as a showcase (#544)

Integrate some custom graphics, and a whole comics explanation, only in French for now.
Fix #363 

1 files changed, 67 insertions, 0 deletions

diff --git a/ihatemoney/templates/showcase.html b/ihatemoney/templates/showcase.html
new file mode 100644
index 0000000..cd9a371
--- /dev/null
+++ b/ihatemoney/templates/showcase.html
@@ -0,0 +1,67 @@
+<div id="pswp" class="hiddenpswp" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="pswp__bg"></div>
+    <div class="pswp__scroll-wrap">
+        <div class="pswp__container">
+            <div class="pswp__item"></div>
+            <div class="pswp__item"></div>
+            <div class="pswp__item"></div>
+        </div>
+        <div class="pswp__ui pswp__ui--hidden">
+            <div class="pswp__top-bar">
+                <div class="pswp__counter"></div>
+                <button class="pswp__button pswp__button--close" title="Fermer (Esc)"></button>
+                <div class="pswp__preloader">
+                    <div class="pswp__preloader__icn">
+                      <div class="pswp__preloader__cut">
+                        <div class="pswp__preloader__donut"></div>
+                      </div>
+                    </div>
+                </div>
+            </div>
+
+            <button class="pswp__button pswp__button--arrow--left" title="Suivant (flèche droite)">
+            </button>
+
+            <button class="pswp__button pswp__button--arrow--right" title="Précédent (flèche gauche)">
+            </button>
+
+            <div class="pswp__caption">
+                <div class="pswp__caption__center"></div>
+            </div>
+        </div>
+    </div>
+</div>
+<script type="text/javascript">
+var pswpElement = document.getElementById('pswp');
+var items = JSON.parse('[{"h": 2450, "src": "/static/showcase/1.jpg", "w": 2450}, {"h": 2509, "src": "/static/showcase/2.jpg", "w": 2221}, {"h": 2536, "src": "/static/showcase/3.jpg", "w": 2101}, {"h": 2722, "src": "/static/showcase/4.jpg", "w": 2348}, {"h": 2745, "src": "/static/showcase/5.jpg", "w": 1804}, {"h": 3307, "src": "/static/showcase/6.jpg", "w": 2897}, {"h": 2321, "src": "/static/showcase/7.jpg", "w": 2239}, {"h": 2470, "src": "/static/showcase/8.jpg", "w": 2419}, {"h": 3307, "src": "/static/showcase/9.jpg", "w": 2602}]');
+var options = {
+  index: 0,
+  loop: false,
+};
+
+function showGallery(){
+
+   /* the CSS and JS for photoswipe is loaded dynamically
+    * so that they are not loaded if the gallery is not open */
+
+   $('head').append('<link rel="stylesheet" type="text/css" href="{{ url_for("static", filename="photoswipe/default-skin/default-skin.css") }}">');
+   $('head').append('<link rel="stylesheet" type="text/css" href="{{ url_for("static", filename="photoswipe/photoswipe.css") }}">');
+
+   var script = document.createElement("script");
+   script.type = "text/javascript";
+   script.src = "{{ url_for('static', filename='photoswipe/photoswipe.min.js')}}";
+   script.onload = function(){
+     var script2 = document.createElement("script");
+     script2.type = "text/javascript";
+     script2.src = "{{ url_for('static', filename='photoswipe/photoswipe-ui-default.min.js')}}";
+     script2.onload = function(){
+       pswpElement.className="pswp";
+       var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
+       gallery.init();
+     };
+     document.body.appendChild(script2);
+   };
+   document.body.appendChild(script);
+}
+
+</script>