Adding images

views/products/demo/at2.tpl

@@ -6,18 +6,59 @@
     source code of the project.
     If you're interested, please contact us, and we'll get you in contact
     with the original authors.</p>
+<p>Here are some screenshots of the demo:</p>
+<div class="columns">
+    <div class="click-zoom">
+        <label>
+            <input type="checkbox">
+            <img src="../../../resources/products/images/at2/at2-demo-1.png">
+            <br>The introduction of the demo with a short explanation of what
+            it is about.
+        </label>
+    </div>
+    <div class="click-zoom">
+        <label>
+            <input type="checkbox">
+            <img src="../../../resources/products/images/at2/at2-demo-2.png">
+            <br>On the next screen it shows the account creation and the
+            network of the nodes.
+        </label>
+    </div>
+</div>
+<div class="columns">
+    <div class="click-zoom">
+        <label>
+            <input type="checkbox">
+            <img src="../../../resources/products/images/at2/at2-demo-3.png">
+            <br>Now you can transfer some assets to one of the other accounts
+            on the network. For this test you have 100k coins of whatever value
+            (currently 0US$ :)
+        </label>
+    </div>
+    <div class="click-zoom">
+        <label>
+            <input type="checkbox">
+            <img src="../../../resources/products/images/at2/at2-demo-4.png">
+            <br>To show the performance of AT2, you can perform a speedtest where
+            it tries to send the tokens as fast as possible over the network.
+            Once the tokens are sent, it waits for confirmation from the network, which
+            can take longer than the actual sending.
+        </label>
+    </div>
+</div>
+<h4>Former description</h4>
 <p>
-  The
-  <a href="https://factory.c4dt.org/incubator/at2/demo/">AT2 Demonstrator</a>
-  will show you the power lying behind this technology. In a tutorial approach,
-  you'll be taken through the creation of your account on the deployed test
-  network. Then, you'll be able to send some assets to other accounts already
-  registered there, as you would do on other distributed ledgers. To show that
-  indeed AT2 is blazingly fast, the last part is a speed test where you can send
-  as many transactions as you want and measure how well the network handles the
-  load.
+    The
+    <a href="https://factory.c4dt.org/incubator/at2/demo/">AT2 Demonstrator</a>
+    will show you the power lying behind this technology. In a tutorial approach,
+    you'll be taken through the creation of your account on the deployed test
+    network. Then, you'll be able to send some assets to other accounts already
+    registered there, as you would do on other distributed ledgers. To show that
+    indeed AT2 is blazingly fast, the last part is a speed test where you can send
+    as many transactions as you want and measure how well the network handles the
+    load.
 </p>
 
 <a href="https://factory.c4dt.org/incubator/at2/demo/" class="tab-link">
-  Take me to the demo!
+    Take me to the demo!
 </a>

views/products/demo/garfield.tpl

@@ -6,6 +6,57 @@
     the instructions to run it on your own computer!
     <a href="https://github.com/c4dt/garfield">Garfield Archive</a>.
 </p>
+<p>Here are some screenshots from the running demo:</p>
+<div class="columns">
+    <div class="click-zoom">
+        <label>
+            <input type="checkbox">
+            <img src="../../../resources/products/images/garfield/garfield-demo-1.png">
+            <br>
+        </label>
+    </div>
+    <div class="click-zoom">
+        <label>
+            <input type="checkbox">
+            <img src="../../../resources/products/images/garfield/garfield-demo-2.png">
+            <br>
+        </label>
+    </div>
+</div>
+<div class="columns">
+    <div class="click-zoom">
+        <label>
+            <input type="checkbox">
+            <img src="../../../resources/products/images/garfield/garfield-demo-3.png">
+            <br>
+        </label>
+    </div>
+    <div class="click-zoom">
+        <label>
+            <input type="checkbox">
+            <img src="../../../resources/products/images/garfield/garfield-demo-4.png">
+            <br>
+        </label>
+    </div>
+</div>
+<div class="columns">
+    <div class="click-zoom">
+        <label>
+            <input type="checkbox">
+            <img src="../../../resources/products/images/garfield/garfield-demo-5.png">
+            <br>
+        </label>
+    </div>
+    <div class="click-zoom">
+        <label>
+            <input type="checkbox">
+            <img src="../../../resources/products/images/garfield/garfield-demo-6.png">
+            <br>
+        </label>
+    </div>
+</div>
+
+<h4>Former description</h4>
 <p>
     The <a href="https://factory.c4dt.org/incubator/garfield/demo/">Garfield
     Demonstrator</a> illustrates how Machine Learning is used to train a model