diff --git a/popup.html b/popup.html
index 281bbeccf9c1f4414d5a5712758bc58279262fe5..bd412b69ad6cc0c0e9340569222fdbd3a4fb7229 100644
--- a/popup.html
+++ b/popup.html
@@ -1,139 +1,241 @@
<!DOCTYPE html>
<html>
+ <head>
+ <link rel="stylesheet" href="style.css" />
+ <script
+ src="jquery-3.6.0.min.js"
+ type="text/javascript"
+ charset="utf-8"
+ ></script>
+ <script src="jquery-ui.js" type="text/javascript" charset="utf-8"></script>
+ </head>
-<head>
- <link rel="stylesheet" href="style.css">
- <script src="jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
- <script src="jquery-ui.js" type="text/javascript" charset="utf-8"></script>
-</head>
-
-<body>
- <div class="actions">
- <p>Appareils MIDI :<br><span id="midiDevices">Aucun</span></p>
- <p>Controle MIDI ID :<br><span id="midiEvent">Aucun</span></p>
- <div class="infos">
- <div style="flex: 1 1 auto;"></div>
- Etat<div id="onOff" class="onOff"></div>
- MIDI<div class="midiI"></div>
- Audio<div class="audioI"></div>
- </div>
- </div>
- <details open>
- <summary><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-code" width="12"
- height="12" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
- stroke-linecap="round" stroke-linejoin="round">
- <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
- <polyline points="7 8 3 12 7 16"></polyline>
- <polyline points="17 8 21 12 17 16"></polyline>
- <line x1="14" y1="4" x2="10" y2="20"></line>
- </svg> CSSLSD</summary>
- <div id="editor"></div>
- </details>
- <details open>
- <summary><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-variable" width="12"
- height="12" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
- stroke-linecap="round" stroke-linejoin="round">
- <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
- <path
- d="M5 4c-2.5 5 -2.5 10 0 16m14 -16c2.5 5 2.5 10 0 16m-10 -11h1c1 0 1 1 2.016 3.527c.984 2.473 .984 3.473 1.984 3.473h1">
- </path>
- <path d="M8 16c1.5 0 3 -2 4 -3.5s2.5 -3.5 4 -3.5"></path>
- </svg> PARAMETRES</summary>
- <table>
- <thead>
- <tr>
- <th><a title="Glisser-deposer, dupliquer et supprimer la ligne.">Actions</a></th>
- <th><a title="Nom de votre parametre a utiliser avec des crochets dans le code CSS-LSD">Nom</a></th>
- <th><a title="0:1 (plage decimale) #000:#fff (plage hexadecimale) A;B;C (liste)">Type</a>
- </th>
- <th><a title="r (aleatoire) d (decimal) i:1 (increment de 1)">Options</a></th>
- <th><a title="cc:1 (control change 1) note:1 (note 1) pb (pitch bend)">MIDI</a></th>
- <th><a
- title="loud (volume) low|lomi|mid|mihi|hi (puissance plage de frequence) onset:E (note de type E) attack (attaque d'un son)">Audio</a>
- </th>
- </tr>
- </thead>
- <tbody id="parameters"></tbody>
- </table>
- </details>
- <details>
- <summary>
- <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-repeat" width="12" height="12"
- viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
- stroke-linejoin="round">
- <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
- <path d="M4 12v-3a3 3 0 0 1 3 -3h13m-3 -3l3 3l-3 3"></path>
- <path d="M20 12v3a3 3 0 0 1 -3 3h-13m3 3l-3 -3l3 -3"></path>
- </svg> BOUCLES
- </summary>
- <table width="100%">
- <thead>
- <tr>
- <th>Nom</th>
- <th>Temps</th>
- <th>Changes</th>
- <th>Actions</th>
- <th></th>
- </tr>
- </thead>
- <tbody id="loopList"></tbody>
- </table>
- </details>
- <details>
- <summary>
- <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-text" width="12"
- height="12" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
- stroke-linecap="round" stroke-linejoin="round">
- <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
- <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
- <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path>
- <line x1="9" y1="9" x2="10" y2="9"></line>
- <line x1="9" y1="13" x2="15" y2="13"></line>
- <line x1="9" y1="17" x2="15" y2="17"></line>
- </svg> CHARGER / TELECHARGER
- </summary>
- <table>
- <tr>
- <td>
- <input id="upload" type="file" />
- <label for="upload">
- <svg title="Chargez votre fichier .json" xmlns="http://www.w3.org/2000/svg"
- class="icon icon-tabler icon-tabler-file-upload" width="24" height="24" viewBox="0 0 24 24"
- stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
- stroke-linejoin="round">
- <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
- <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
- <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path>
- <line x1="12" y1="11" x2="12" y2="17"></line>
- <polyline points="9 14 12 11 15 14"></polyline>
- </svg>
- </label>
- <span>Charger</span>
- </td>
- <td>
- <svg title="Telechargez votre fichier .json" id="download" xmlns="http://www.w3.org/2000/svg"
- class="icon icon-tabler icon-tabler-file-download" width="24" height="24" viewBox="0 0 24 24"
- stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
- stroke-linejoin="round">
- <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
- <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
- <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path>
- <line x1="12" y1="11" x2="12" y2="17"></line>
- <polyline points="9 14 12 17 15 14"></polyline>
- </svg>
- <span>Telecharger</span>
- </td>
- </tr>
- </table>
- </details>
- <p style="text-align: center;">© 2022 - Universite de Lille - <a id="doc">Voir la documentation</a></p>
-
- <script src="cssParser.js" type="text/javascript" charset="utf-8"></script>
- <script src="ace/ace.js" type="text/javascript" charset="utf-8"></script>
- <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/ace.min.js" integrity="sha512-hDyKEpCc9jPn3u2VffFjScCtNqZI+BAbThAhhDYqqqZbxMqmTSNIgdU0OU9BRD/8wFxHIWLAo561hh9fW7j6sA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/ext-language_tools.min.js" integrity="sha512-S7Whi8oQAQu/MK6AhBWufIJIyOvqORj+/1YDM9MaHeRalsZjzyYS7Usk4fsh+6J77PUhuk5v/BxaMDXRdWd1KA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
- <script src="ace/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
- <script src="main.min.js" type="text/javascript" charset="utf-8"></script>
-</body>
-
-</html>
\ No newline at end of file
+ <body>
+ <div class="actions">
+ <p>Appareils MIDI :<br /><span id="midiDevices">Aucun</span></p>
+ <p>Controle MIDI ID :<br /><span id="midiEvent">Aucun</span></p>
+ <div class="infos">
+ <div style="flex: 1 1 auto"></div>
+ Etat
+ <div id="onOff" class="onOff"></div>
+ MIDI
+ <div class="midiI"></div>
+ Audio
+ <div class="audioI"></div>
+ </div>
+ </div>
+ <details open>
+ <summary>
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ class="icon icon-tabler icon-tabler-code"
+ width="12"
+ height="12"
+ viewBox="0 0 24 24"
+ stroke-width="1.5"
+ stroke="currentColor"
+ fill="none"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ >
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+ <polyline points="7 8 3 12 7 16"></polyline>
+ <polyline points="17 8 21 12 17 16"></polyline>
+ <line x1="14" y1="4" x2="10" y2="20"></line>
+ </svg>
+ CSSLSD
+ </summary>
+ <div id="editor"></div>
+ </details>
+ <details open>
+ <summary>
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ class="icon icon-tabler icon-tabler-variable"
+ width="12"
+ height="12"
+ viewBox="0 0 24 24"
+ stroke-width="1.5"
+ stroke="currentColor"
+ fill="none"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ >
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+ <path
+ d="M5 4c-2.5 5 -2.5 10 0 16m14 -16c2.5 5 2.5 10 0 16m-10 -11h1c1 0 1 1 2.016 3.527c.984 2.473 .984 3.473 1.984 3.473h1"
+ ></path>
+ <path d="M8 16c1.5 0 3 -2 4 -3.5s2.5 -3.5 4 -3.5"></path>
+ </svg>
+ PARAMETRES
+ </summary>
+ <table>
+ <thead>
+ <tr>
+ <th>
+ <a title="Glisser-deposer, dupliquer et supprimer la ligne."
+ >Actions</a
+ >
+ </th>
+ <th>
+ <a
+ title="Nom de votre parametre a utiliser avec des crochets dans le code CSS-LSD"
+ >Nom</a
+ >
+ </th>
+ <th>
+ <a
+ title="0:1 (plage decimale) #000:#fff (plage hexadecimale) A;B;C (liste)"
+ >Type</a
+ >
+ </th>
+ <th>
+ <a title="r (aleatoire) d (decimal) i:1 (increment de 1)"
+ >Options</a
+ >
+ </th>
+ <th>
+ <a
+ title="cc:1 (control change 1) note:1 (note 1) pb (pitch bend)"
+ >MIDI</a
+ >
+ </th>
+ <th>
+ <a
+ title="loud (volume) low|lomi|mid|mihi|hi (puissance plage de frequence) onset:E (note de type E) attack (attaque d'un son)"
+ >Audio</a
+ >
+ </th>
+ </tr>
+ </thead>
+ <tbody id="parameters"></tbody>
+ </table>
+ </details>
+ <details>
+ <summary>
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ class="icon icon-tabler icon-tabler-repeat"
+ width="12"
+ height="12"
+ viewBox="0 0 24 24"
+ stroke-width="1.5"
+ stroke="currentColor"
+ fill="none"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ >
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+ <path d="M4 12v-3a3 3 0 0 1 3 -3h13m-3 -3l3 3l-3 3"></path>
+ <path d="M20 12v3a3 3 0 0 1 -3 3h-13m3 3l-3 -3l3 -3"></path>
+ </svg>
+ BOUCLES
+ </summary>
+ <table width="100%">
+ <thead>
+ <tr>
+ <th>Nom</th>
+ <th>Temps</th>
+ <th>Changes</th>
+ <th>Actions</th>
+ <th></th>
+ </tr>
+ </thead>
+ <tbody id="loopList"></tbody>
+ </table>
+ </details>
+ <details>
+ <summary>
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ class="icon icon-tabler icon-tabler-file-text"
+ width="12"
+ height="12"
+ viewBox="0 0 24 24"
+ stroke-width="1.5"
+ stroke="currentColor"
+ fill="none"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ >
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+ <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
+ <path
+ d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"
+ ></path>
+ <line x1="9" y1="9" x2="10" y2="9"></line>
+ <line x1="9" y1="13" x2="15" y2="13"></line>
+ <line x1="9" y1="17" x2="15" y2="17"></line>
+ </svg>
+ CHARGER / TELECHARGER
+ </summary>
+ <table>
+ <tr>
+ <td>
+ <input id="upload" type="file" />
+ <label for="upload">
+ <svg
+ title="Chargez votre fichier .json"
+ xmlns="http://www.w3.org/2000/svg"
+ class="icon icon-tabler icon-tabler-file-upload"
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ stroke-width="1.5"
+ stroke="currentColor"
+ fill="none"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ >
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+ <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
+ <path
+ d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"
+ ></path>
+ <line x1="12" y1="11" x2="12" y2="17"></line>
+ <polyline points="9 14 12 11 15 14"></polyline>
+ </svg>
+ </label>
+ <span>Charger</span>
+ </td>
+ <td>
+ <svg
+ title="Telechargez votre fichier .json"
+ id="download"
+ xmlns="http://www.w3.org/2000/svg"
+ class="icon icon-tabler icon-tabler-file-download"
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ stroke-width="1.5"
+ stroke="currentColor"
+ fill="none"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ >
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+ <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
+ <path
+ d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"
+ ></path>
+ <line x1="12" y1="11" x2="12" y2="17"></line>
+ <polyline points="9 14 12 17 15 14"></polyline>
+ </svg>
+ <span>Telecharger</span>
+ </td>
+ </tr>
+ </table>
+ </details>
+ <p style="text-align: center">
+ © 2022 - Universite de Lille - <a id="doc">Voir la documentation</a>
+ </p>
+ <script src="cssParser.js" type="text/javascript" charset="utf-8"></script>
+ <script src="ace/ace.js" type="text/javascript" charset="utf-8"></script>
+ <script
+ src="ace/ext-language_tools.js"
+ type="text/javascript"
+ charset="utf-8"
+ ></script>
+ <script src="main.js" type="text/javascript" charset="utf-8"></script>
+ </body>
+</html>
diff --git a/style.css b/style.css
index 6c33139a8c71650134cf129b99c83ca2391aecc9..cd3fac4b187d39ccacaed61a664140fa1b95070b 100644
--- a/style.css
+++ b/style.css
@@ -253,4 +253,8 @@ td label {
}
a#doc {
cursor: pointer;
+}
+
+#parameters td:nth-child(3) {
+ max-width: 200px;
}
\ No newline at end of file