From 7b12e0e29f222ccad39a6e0c9f3a3d8c410060a9 Mon Sep 17 00:00:00 2001
From: Jorge Marcos <jorge.marcosfer@gmail.com>
Date: Mon, 18 Apr 2022 19:39:39 +0200
Subject: [PATCH] images are clickable

---
 examples/index.html | 114 +++++++++++++++++++++++++-------------------
 1 file changed, 64 insertions(+), 50 deletions(-)

diff --git a/examples/index.html b/examples/index.html
index ca650f8..602bc59 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -79,78 +79,92 @@ <h1>Examples</h1>
         <a class="item" data-tab="starter-code">Interactive code examples</a>
       </div>
       <div class="ui active bottom attached tab segment" data-tab="demos">
-        <div class="ui four column grid cards">
+        <div class="ui four column grid link cards">
           <div class="row">
-            <div class="ui fluid card column">
-              <div class="rounded image">
-                <img src='./demos/screenshots/melspectrogram-rt.png'></img>
-              </div>
-              <div class="content">
-                <a href="./demos/melspectrogram-rt/" class="header" target="_blank">
-                  Melspectrogram (Real-time)
+            <div class="column">
+              <div class="ui fluid card">
+                <a href="./demos/melspectrogram-rt/" class="image" target="_blank">
+                  <img src='./demos/screenshots/melspectrogram-rt.png'></img>
                 </a>
+                <div class="content">
+                  <a href="./demos/melspectrogram-rt/" class="header" target="_blank">
+                    Melspectrogram (Real-time)
+                  </a>
+                </div>
               </div>
             </div>
-            <div class="ui fluid card column">
-              <div class="image">
-                <img src='./demos/screenshots/rms-rt.png'></img>
-              </div>
-              <div class="content">
-                <a href="./demos/rms-rt/" class="header" target="_blank">
-                  RMS (Real-time)
+            <div class="column">
+              <div class="ui fluid card">
+                <a href="./demos/rms-rt/" class="image" target="_blank">
+                  <img src='./demos/screenshots/rms-rt.png'></img>
                 </a>
+                <div class="content">
+                  <a href="./demos/rms-rt/" class="header" target="_blank">
+                    RMS (Real-time)
+                  </a>
+                </div>
               </div>
             </div>
-            <div class="ui fluid card column">
-              <div class="image">
-                <img src='./demos/screenshots/pitchmelodia-rt.png'></img>
-              </div>
-              <div class="content">
-                <a href="./demos/pitchmelodia-rt/" class="header" target="_blank">
-                  Pitch Melodia (Real-time)
+            <div class="column">
+              <div class="ui fluid card">
+                <a href="./demos/pitchmelodia-rt/" class="image" target="_blank">
+                  <img src='./demos/screenshots/pitchmelodia-rt.png'></img>
                 </a>
+                <div class="content">
+                  <a href="./demos/pitchmelodia-rt/" class="header" target="_blank">
+                    Pitch Melodia (Real-time)
+                  </a>
+                </div>
               </div>
             </div>
-            <div class="ui fluid card column">
-              <div class="image">
-                <img src='./demos/screenshots/onsets.png'></img>
-              </div>
-              <div class="content">
-                <a href="./demos/onsets/public/" class="header" target="_blank">
-                  Onset Detection
+            <div class="column">
+              <div class="ui fluid card">
+                <a href="./demos/onsets/public/" class="image" target="_blank">
+                  <img src='./demos/screenshots/onsets.png'></img>
                 </a>
+                <div class="content">
+                  <a href="./demos/onsets/public/" class="header" target="_blank">
+                    Onset Detection
+                  </a>
+                </div>
               </div>
             </div>
           </div>
           <div class="row">
-            <div class="ui fluid card column">
-              <div class="image">
-                <img src='./demos/screenshots/autotagging-rt.png'></img>
-              </div>
-              <div class="content">
-                <a href="./demos/autotagging-rt/" class="header" target="_blank">
-                  Music Autotagging (Real-time)
+            <div class="column">
+              <div class="ui fluid card">
+                <a href="./demos/autotagging-rt/" class="image" target="_blank">
+                  <img src='./demos/screenshots/autotagging-rt.png'></img>
                 </a>
+                <div class="content">
+                  <a href="./demos/autotagging-rt/" class="header" target="_blank">
+                    Music Autotagging (Real-time)
+                  </a>
+                </div>
               </div>
             </div>
-            <div class="ui fluid card column">
-              <div class="image">
-                <img src='./demos/screenshots/mood-classifiers.png'></img>
-              </div>
-              <div class="content">
-                <a href="./demos/mood-classifiers/" class="header" target="_blank">
-                  Mood Classification plus Key & BPM
+            <div class="column">
+              <div class="ui fluid card">
+                <a href="./demos/mood-classifiers/" class="image" target="_blank">
+                  <img src='./demos/screenshots/mood-classifiers.png'></img>
                 </a>
+                <div class="content">
+                  <a href="./demos/mood-classifiers/" class="header" target="_blank">
+                    Mood Classification plus Key & BPM
+                  </a>
+                </div>
               </div>
             </div>
-            <div class="ui fluid card column">
-              <div class="image">
-                <img src='./demos/screenshots/hpcp-chroma-rt.png'></img>
-              </div>
-              <div class="content">
-                <a href="./demos/hpcp-chroma-rt/" class="header" target="_blank">
-                  HPCP Chroma (Real-time)
+            <div class="column">
+              <div class="ui fluid card">
+                <a href="./demos/hpcp-chroma-rt/" class="image" target="_blank">
+                  <img src='./demos/screenshots/hpcp-chroma-rt.png'></img>
                 </a>
+                <div class="content">
+                  <a href="./demos/hpcp-chroma-rt/" class="header" target="_blank">
+                    HPCP Chroma (Real-time)
+                  </a>
+                </div>
               </div>
             </div>
           </div>