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>