ajout API à editeur player + debug initAnswer pour bac a sable

static/js/clavier.js

@@ -624,7 +624,7 @@ function getPopUp() {
             finalOutput += "<br>";
         } else if (m[2] != "&nbsp;") {
             var classs = m[1].split(' ');
-            var expFonte = "font-family: Ubuntu, KaiTi, DejaVu Sans, Times, Calibri;";
+            var expFonte = "font-family: Ubuntu, SimKai, DejaVu Sans, Times, Calibri;";
             var expCoulBase = "color:#cccccc;";
 
             var expSizeBase = "font-size:30pt;";
@@ -1007,7 +1007,7 @@ function getPinyin(api) {
     return pinyin
 }
 
-function writeHan(char,size=1){
+function writeHan(char,size=0){
     var newHan = document.createElement("div");
     newHan.classList = "align-self-center han han"+size;
     newHan.appendChild(makeNewSyll(syllFinie));

static/js/editSerie.js

@@ -5,6 +5,7 @@ $( function() {
     $( "#contenuSerie" ).sortable();
 } );
 
+
 // Initialisation (remise à zéro des checkbox si enregistrées dans cache du navigateur)
 document.getElementById('cbAudioDeb').checked = false;
 document.getElementById('cbImageDeb').checked = false;
@@ -32,7 +33,7 @@ if (serie.nom.length == 0) {
         listeMotsGen.push(listeMots[i].motGenerique)
     }
     document.getElementById('listemots').value = listeMotsGen.join(', ');
-    document.getElementById('listePhonemesVisibles').value = phonVisibles.join(', ');
+    document.getElementById('listePhonemesVisibles').value = apiVisibles.join(', ');
 
     // Checkage des cb
     if (serie.audioDeb == 1) {document.getElementById('cbAudioDeb').checked = true; toggleMedia(document.getElementById('cbAudioDeb'));}
@@ -83,6 +84,7 @@ function openModalAddMot() {
     
     var myModal = new bootstrap.Modal(document.getElementById('popAddw'));
     myModal.show();
+    getAPIkeyboard('fr');
 }
 
 function openModalAddPron(motId) {
@@ -91,6 +93,7 @@ function openModalAddPron(motId) {
     
     var myModal = new bootstrap.Modal(document.getElementById('popAddPron'));
     myModal.show();
+    getAPIkeyboard('fr');
 }
 
 function addPron(motId,trans=[]) {
@@ -460,7 +463,6 @@ async function getPhono(mot, targetDiv) {
 }
 
 function makePhonoliste(data, targetDiv){   
-    console.log("MakePhonoliste",data); 
     for(imot=0; imot < data.length; imot++){
         // pour chaque mot, on crée une divMotPhonoPlus qui contient une divMotPhonoTable (avec les prononciations possibles) et un bouton PLUS
         var divMotPhonoPlus = document.createElement('div');
@@ -491,7 +493,6 @@ function makePhonoliste(data, targetDiv){
 }
 
 function addPhono(divMotPhonoTableId, jphono, phono) {
-    console.log("AddPhono()",phono)
     var phono_i = document.createElement('div');
     phono_i.classList = "px-4 d-flex align-items-center";
     phono_i.id = divMotPhonoTableId + '-' + jphono;
@@ -518,8 +519,15 @@ function addPhono(divMotPhonoTableId, jphono, phono) {
     var phono_i_phonoTextList = [];
     for(kphon=0; kphon < phono.length; kphon++){
         if (phono[kphon] != 'phon_echec' && phono[kphon] != 'phon_neutre'){
-            appendPhonCard(phono[kphon], phono_i_phono);
-            phono_i_phonoTextList.push(phono[kphon]);
+            if (Object.keys(api2phon).includes(phono[kphon])) {
+                // SI API
+                appendPhonCard(api2phon[phono[kphon]], phono_i_phono);
+                phono_i_phonoTextList.push(api2phon[phono[kphon]]);
+            } else {
+                // SI PHON
+                appendPhonCard(phono[kphon], phono_i_phono);
+                phono_i_phonoTextList.push(phono[kphon]);
+            }
         }
     };
     phono_i_phonoText.innerHTML = phono_i_phonoTextList.join(',');
@@ -598,6 +606,14 @@ function makeSerieMots(){
             }],
     }
 
+    var newPhonVisibles = []
+    var listApi = document.getElementById('listePhonemesVisibles').value.replace(/\s/g, '').split(',');
+    for (api of listApi) {
+        for (let phon in phon2api) {
+            if (phon2api[phon] == api) newPhonVisibles.push(phon)
+        }
+    }
+
     var thisSerie  = {
         "nom" : document.getElementById('nom').value,
         "code" : document.getElementById('code').value,
@@ -623,7 +639,7 @@ function makeSerieMots(){
 
         "syntheseVocale" : document.getElementById('cbSyntheseVocale').checked ? "1" : "0",
         "panneauPartiel" : document.getElementById('cbPanneauPartiel').checked ? "1" : "0",
-        "phonVisibles" : JSON.stringify(document.getElementById('listePhonemesVisibles').value.replace(/\s/g, '').split(',')),
+        "phonVisibles" : JSON.stringify(newPhonVisibles),
         "mots" : [],
     }
 
@@ -867,7 +883,7 @@ function getPhonList() {
     var cartes = document.querySelectorAll('.noTextClip');
     var phonList = [];
     cartes.forEach( (carte) => {
-        carte.classList.forEach( (c) => { if(c.match(/phon_.*/) && !phonList.includes(c)) phonList.push(c) } );
+        carte.classList.forEach( (c) => { if(c.match(/phon_.*/) && !phonList.includes(phon2api[c])) phonList.push(phon2api[c]) } );
     });
 
     document.getElementById('listePhonemesVisibles').value = phonList.join(', ');

static/js/keyboard.js

+// KEYBOARD
+// inspiré de https://mottie.github.io/Keyboard/
+$.keyboard.keyaction.undo = function (base) {
+	base.execCommand('undo');
+	return false;
+};
+$.keyboard.keyaction.redo = function (base) {
+	base.execCommand('redo');
+	return false;
+};
+
+
+var lang2keyboard = {
+    "fr": [
+        'ɛ ø œ ə ɔ ɑ ɥ \u0303',
+        'ʃ ʒ ɡ ʁ ɲ ŋ'
+    ],
+    "en": [
+        'ɪ ɛ æ ʊ ə ɚ ʌ ʉ ɜ ɝ ɒ ɔ ɑ ː ˈ ˌ',
+        'θ ð ʃ ʒ ɡ ɹ ŋ'
+    ],
+    "zh": [
+        ''
+    ],
+    "all": [
+        'ɛ ø œ ə ɔ ɑ ɥ \u0303 ʃ ʒ ɡ ʁ ɲ ŋ',
+        'ɪ ɛ æ ʊ ə ɚ ʌ ʉ ɜ ɝ ɒ ɔ ɑ ː θ ð ʃ ʒ ɡ ɹ ŋ'
+    ]
+}
+
+if (typeof dicoLang !== 'undefined') {
+    getAPIkeyboard(dicoLang);
+} else {
+    getAPIkeyboard(thisPageLang);
+}
+function getAPIkeyboard(lang) {
+	var apizones = Object.entries($('.api-kb'));
+
+	for (i = 0 ; i < apizones.length-2 ; i++) {
+	$(apizones[i][1]).keyboard({
+			usePreview: false, // disabled for contenteditable
+			useCombos: false,
+			autoAccept: true,
+			layout: 'custom',
+			customLayout: {
+				'normal': lang2keyboard[lang],
+			},
+			display: {
+				del: '\u2326:Delete',
+				redo: '↻',
+				undo: '↺'
+			}
+		});
+	};
+}

static/js/phon2api.js

+// api2phon généré automatiquement.
 var phon2api = {
 	"phon_1":"ɨ",
 	"phon_2":"ø",
@@ -157,7 +158,7 @@ var phon2api = {
 	"phon_nt":"nt",
 	"phon_nz_maj":"nʒ",
 	"phon_nz":"nz",
-	"phon_o_maj_long":"ɔ",
+	"phon_o_maj_long":"ɔː",
 	"phon_o_maj_nas":"ɔ̃",
 	"phon_o_maj_slash":"ʘ",
 	"phon_o_maj":"ɔ",
@@ -265,4 +266,12 @@ var phon2api = {
     "phon_t_emph":"tˤ",
     "phon_wo":"wo",
     "phon_z_emph":"zˤ"
+}
+
+// Génération de api2phon à partir de phon2api.js
+var api2phon = {}
+
+for (let phon in phon2api) {
+    if (!Object.keys(api2phon).includes(phon2api[phon])) api2phon[phon2api[phon]]=phon
+    else console.log("API2PHON DOUBLON DÉTECTÉ",phon)
 }
\ No newline at end of file

static/js/playerPhono.js

@@ -176,7 +176,7 @@ function recupPhon(identifiant) {
 var nbmots;
 var cptitem = 0;
 var currentAudio = ""
-var currentAudio_R = "" // audio à lire à la fin, quand réponse correcte
+var currentAudioFin = "" // audio à lire à la fin, quand réponse correcte
 var currentVideo = ""
 
 const rep = document.getElementById('rep')
@@ -213,20 +213,18 @@ function loadNext() {
     if (cptitem < nbmots) {
         saveTrace(`next ${mots[cptitem]["motGenerique"]}`)
         rep.innerHTML = ""
-        if (audioMode) {
-            currentAudio = mots[cptitem]["audio"] || mots[cptitem]['audioDeb']
+        currentAudio = mots[cptitem]["audio"] || mots[cptitem]['audioDeb']
+        currentVideo = mots[cptitem]["video"] || mots[cptitem]['videoDeb']
+        currentAudioFin = mots[cptitem]["audio_R"] || mots[cptitem]["audioFin"]
+
+        if (audioDeb==1 && currentAudio.length>0) {
             playAudio()
         }
-        if (videoMode) {
-            currentVideo = mots[cptitem]["video"] || mots[cptitem]['videoDeb']
+        if (videoDeb==1 && currentVideo.length>0) {
             document.getElementById('videoSrc').src = '../../media/video-uploads/'+currentVideo
             document.getElementById('video').load()
             playVideo()
         }
-        if (audioFin == 1) {
-            // Si lecture audio à la fin, quand réponse correcte
-            currentAudio_R = mots[cptitem]["audio_R"]
-        }
         cptitem = cptitem+1
         document.getElementById('cptitem').innerHTML = cptitem
     } else {
@@ -332,9 +330,14 @@ function checkAnswer() {
     }
 }
 
-function initAnswer() {
-    rep.innerHTML = "";
-    document.querySelectorAll('.divReponseMilieu')[0].appendChild(rep)
+function initAnswer(x=0) {
+    if (x>0) { 
+        document.getElementById('rep'+x).parentElement.parentElement.remove() 
+    } else {
+        var repx = document.getElementById('rep');
+        repx.innerHTML = "";
+        document.querySelectorAll('.divReponseMilieu')[x].appendChild(repx)
+    }
 }
 
 function compareRepRef(myrep, ref) {
@@ -474,10 +477,10 @@ function playAudio() {
 }
 
 function playAudio_R() {
-    if( audioFin == 1) {
-        var audio = new Audio("../../media/audio-uploads/"+currentAudio_R)
+    if (audioFin==1 && currentAudioFin.length>0) {
+        var audio = new Audio("../../media/audio-uploads/"+currentAudioFin)
         audio.play()
-        saveTrace("playAudio_R")
+        saveTrace("playAudioFin")
     }
 }
 
@@ -606,9 +609,13 @@ function newLine(el){
     newLine.firstElementChild.firstElementChild.innerHTML = ""
     newLine.firstElementChild.firstElementChild.id = "rep"+cptline
     
-    newLine.lastElementChild.firstElementChild.id = "btnEnter"+cptline
-    newLine.lastElementChild.children[1].firstElementChild.setAttribute('onclick', "playIpa("+cptline+")")
-    newLine.lastElementChild.children[1].lastElementChild.id = "debitParole"+cptline
+    newLine.lastElementChild.firstElementChild.id = "btnEnter"+cptline;
+    newLine.lastElementChild.children[1].id = "divSynthVoc"+cptline;
+    newLine.lastElementChild.children[1].firstElementChild.setAttribute('onclick', "playIpa("+cptline+")");
+    newLine.lastElementChild.children[1].lastElementChild.id = "debitParole"+cptline;
+    
+    newLine.lastElementChild.children[3].id = "btnInit"+cptline;
+    newLine.lastElementChild.children[3].setAttribute('onclick', 'initAnswer('+cptline+')');
 
     el.parentElement.parentElement.parentElement.insertBefore(newLine, el.parentElement.parentElement.nextElementSibling)
     changeLigne(newLine.firstElementChild)

static/js/playerPhonoHome.js

@@ -108,13 +108,13 @@ async function getSerieInfo(code) {
     document.getElementById('modalDateModification').innerHTML = data.serieInfo.dateModification;
     document.getElementById('modalCode').innerHTML = data.serieInfo.code;
     document.getElementById('modalUrl').innerHTML = "https://phonographe.alem-app.fr/player/serie-"+ data.serieInfo.code +"/play";
-    document.getElementById('modalBtnPlay').href = window.location.href + "serie-"+ data.serieInfo.code +"/play";
+    document.getElementById('modalBtnPlay').href = window.location.origin + "/player/serie-"+ data.serieInfo.code +"/play";
     if (userInfo.superadmin || userInfo.nom == data.serieInfo.auteur) {
-        document.getElementById('modalBtnEdit').href = window.location.href + "serie-"+ data.serieInfo.code +"/edit";
+        document.getElementById('modalBtnEdit').href = window.location.origin + "/player/serie-"+ data.serieInfo.code +"/edit";
         document.getElementById('modalBtnEdit').style.display = "block";
     }
     if (userInfo.admin) {
-        document.getElementById('modalBtnCopy').href = window.location.href + "serie-"+ data.serieInfo.code +"/copy";
+        document.getElementById('modalBtnCopy').href = window.location.origin + "/player/serie-"+ data.serieInfo.code +"/copy";
         document.getElementById('modalBtnCopy').style.display = "block";
     }
     modal.style.display = "block";

static/js/syll2chars.js

@@ -8402,6 +8402,7 @@ var syll2chars = {
         "闚": 1
     },
     "ni2": {
+        "你": 44,
         "倪": 16,
         "尼": 558,
         "泥": 119,

static/styles/clavier.css

@@ -532,6 +532,14 @@
     border: 1px solid white;
 }
 
+.han0 {
+    width: 2.1em;
+    height: 2.1em;
+}
+.zi0 {
+    font-size: 1.9em;
+    top: -18px;
+}
 .han1 {
     width: 2.5em;
     height: 2.5em;
@@ -571,7 +579,7 @@
     position: absolute;
     /* top: -5px; */
     /* font-size: 2.2em; */
-    font-family: KaiTi;
+    font-family: SimKai;
     font-weight: bold;
     text-align: center;
     color:black;

static/styles/keyboard-dark.css

+/* *** keyboard dark theme ***
+  for when jQuery UI themes are not being used
+  See https://jsfiddle.net/Mottie/6dmqhLvh/
+ */
+.ui-keyboard {
+	/* adjust overall keyboard size using "font-size" */
+	font-size: 14px;
+	text-align: center;
+	background: #282828;
+	border: 1px solid #484848;
+	padding: 4px;
+
+	/* include the following setting to place the
+	keyboard at the bottom of the browser window */
+	width: 100%;
+	height: auto;
+	left: 0px;
+	top: auto;
+	bottom: 0px;
+	position: sticky;
+	white-space: nowrap;
+	overflow-x: auto;
+	/* see issue #484 */
+	-ms-touch-action: manipulation;
+	touch-action: manipulation;
+}
+.ui-keyboard-has-focus {
+	z-index: 16001;
+}
+.ui-keyboard-button {
+	border: 1px solid #404040;
+	padding: 0 0.5em;
+	margin: 1px;
+	min-width: 3em;
+	height: 3em;
+	line-height: 3em;
+	vertical-align: top;
+	font-family: Helvetica, Arial, sans-serif;
+	color: #eee;
+	text-align: center;
+	border-radius: 5px;
+	-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5);
+	box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5);
+	background: #444;
+	background-image: -webkit-linear-gradient(-90deg, #444 0%, #333 100%);
+	background-image:         linear-gradient(-90deg, #444 0%, #333 100%);
+	cursor: pointer;
+	overflow: hidden;
+	-moz-user-focus: ignore;
+}
+.ui-keyboard-button:not([disabled]):hover {
+	background: #eee;
+	background-image: -webkit-linear-gradient(-90deg, #4f4f4f 0%, #444 100%);
+	background-image:         linear-gradient(-90deg, #4f4f4f 0%, #444 100%);
+}
+.ui-keyboard-button:not([disabled]):active {
+	background: #ddd;
+	background-image: -webkit-linear-gradient(-90deg, #555 0%, #5f5f5f 100%);
+	background-image:         linear-gradient(-90deg, #555 0%, #5f5f5f 100%);
+}
+.ui-keyboard-button span {
+	display: block;
+	width: 100%;
+	font-size: 1.2em;
+	text-align: center;
+}
+/* make action keys extra-wide */
+.ui-keyboard-actionkey:not(.ui-keyboard-dec):not(.ui-keyboard-combo) {
+	min-width: 6em;
+}
+.ui-keyboard-space {
+	width: 15em;
+}
+.ui-keyboard-actionkey:not(.ui-keyboard-dec):not(.ui-keyboard-combo) span {
+	font-size: 0.8em;
+	position: relative;
+	top: -1em;
+	left: -1.6em;
+}
+.ui-keyboard-placeholder {
+	color: #888;
+}
+/* disabled or readonly inputs, or use input[disabled='disabled'] { color: #f00; } */
+.ui-keyboard-nokeyboard {
+	color: #888;
+	border-color: #888;
+}
+.ui-keyboard-spacer {
+	display: inline-block;
+	width: 1px;
+	height: 0;
+	cursor: default;
+}
+.ui-keyboard-NBSP span, .ui-keyboard-ZWSP span, .ui-keyboard-ZWNJ span, .ui-keyboard-ZWJ span,
+.ui-keyboard-LRM span, .ui-keyboard-RLM span {
+	font-size: 0.5em;
+	line-height: 1.5em;
+	white-space: normal;
+}
+
+/* combo key styling - toggles diacritics on/off */
+.ui-keyboard-button.ui-keyboard-combo.ui-state-default {
+	-webkit-box-shadow: 1px 1px 3px 0 rgba(213, 133, 18, 0.5);
+	        box-shadow: 1px 1px 3px 0 rgba(213, 133, 18, 0.5);
+	border-color: #d58512;
+}
+.ui-keyboard-button.ui-keyboard-combo.ui-state-active {
+	-webkit-box-shadow: 1px 1px 3px 0 rgba(38, 154, 188, 0.5);
+	        box-shadow: 1px 1px 3px 0 rgba(38, 154, 188, 0.5);
+	border-color: #269abc;
+}
+/* (in)valid inputs */
+button.ui-keyboard-accept.ui-keyboard-valid-input {
+	-webkit-box-shadow: 1px 1px 3px 0 rgba(57, 132, 57, 0.5);
+	        box-shadow: 1px 1px 3px 0 rgba(57, 132, 57, 0.5);
+	border-color: #398439;
+}
+button.ui-keyboard-accept.ui-keyboard-valid-input:not([disabled]):hover {
+	border-color: #4cae4c;
+}
+button.ui-keyboard-accept.ui-keyboard-invalid-input {
+	-webkit-box-shadow: 1px 1px 3px 0 rgba(172, 41, 37, 0.5);
+	        box-shadow: 1px 1px 3px 0 rgba(172, 41, 37, 0.5);
+	border-color: #ac2925;
+}
+button.ui-keyboard-accept.ui-keyboard-invalid-input:not([disabled]):hover {
+	border-color: #d43f3a;
+}
+/* unlocked icon (keyboard enabled) */
+button.ui-keyboard-toggle span {
+	width: .9em;
+	height: .9em;
+	display: inline-block;
+	background-repeat: no-repeat;
+	background-position: center center;
+	background-size: contain;
+	/* dark theme unlocked icon - fill: #eee */
+	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iI2VlZSI+PHBhdGggZD0iTTguNyw0LjRINy41SDUuMHYtMS45YzAtMS40LTEuMS0yLjUtMi41LTIuNWMtMS40LDAtMi41LDEuMS0yLjUsMi41djEuOWgxLjIgdi0xLjljMC0wLjcsMC42LTEuMiwxLjItMS4yczEuMiwwLjYsMS4yLDEuMnYxLjljLTAuNywwLTEuMiwwLjYtMS4yLDEuMlY4LjggYzAsMC43LDAuNiwxLjIsMS4yLDEuMmg1LjBDOS40LDEwLDEwLDkuNCwxMCw4LjhWNS42QzEwLDUuMCw5LjQsNC40LDguOCw0LjR6IE02LjYsNy40djEuMCBjMCwwLjItMC4xLDAuMy0wLjMsMC4zUzYuMCw4LjYsNi4wLDguNFY3LjRjLTAuMi0wLjEtMC4zLTAuMy0wLjMtMC41YzAtMC4zLDAuMy0wLjYsMC42LTAuNiBTNi45LDYuNiw2LjksNi45QzYuOSw3LjEsNi44LDcuMyw2LjYsNy40eiIvPjwvc3ZnPg==');
+}
+/* locked icon (keyboard disabled) */
+button.ui-keyboard-toggle.ui-keyboard-disabled span {
+	/* dark theme locked icon - fill: #eee */
+	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iI2VlZSI+PHBhdGggZD0iTTcuNCA0LjRWMi41YzAtMS40LTEuMS0yLjUtMi41LTIuNWMtMS40IDAtMi41IDEuMS0yLjUgMi41djEuOSBjLTAuNyAwLTEuMiAwLjUtMS4yIDEuMnYzLjFDMS4zIDkuNCAxLjggMTAgMi41IDEwaDQuOWMwLjcgMCAxLjItMC42IDEuMi0xLjJWNS42IEM4LjcgNC45IDguMSA0LjQgNy40IDQuNHogTTUuMyA3LjR2MS4wYzAgMC4yLTAuMSAwLjMtMC4zIDAuM2MtMC4yIDAtMC4zLTAuMS0wLjMtMC4zVjcuNCBjLTAuMi0wLjEtMC4zLTAuMy0wLjMtMC41YzAtMC4zIDAuMy0wLjYgMC42LTAuNmMwLjMgMCAwLjYgMC4zIDAuNiAwLjYgQzUuNiA3LjEgNS41IDcuMyA1LjMgNy40eiBNNi4yIDQuNEgzLjdWMi41YzAtMC43IDAuNS0xLjIgMS4yLTEuMmMwLjcgMCAxLjIgMC42IDEuMiAxLjIgVjQuNHoiLz48L3N2Zz4=');
+}
+.ui-keyboard.ui-keyboard-disabled button:not(.ui-keyboard-toggle), .ui-keyboard.ui-keyboard-disabled input {
+	opacity: 0.5;
+}
+
+/*** Alt-Keys Popup extension ***/
+/* clickable overlay on top of keyboard to hide the popup */
+.ui-keyboard-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	background: rgba(0, 0, 0, 0.5);
+}
+/* the actual popup styling, class names from the css.container option are also added */
+.ui-keyboard-popup {
+	display: inline-block;
+	/* default buttons are 2em wide + .1em margin on either side (set in .ui-keyboard-button definition);
+	so use multiples of 2.2em	for a max-width if you don't want any extra white space on the sides,
+	e.g. 5 buttons * 2.2em = 11em, 6 buttons * 2.2em = 13.2em, etc */
+	max-width: 22em;
+	/* 10 buttons */
+}
+.ui-keyboard.ui-keyboard-popup-open .ui-keyboard-keyset .ui-keyboard-button {
+	/* Disable keys under overlay while popup is open - see #654 */
+	pointer-events: none;
+}
+
+/*** Caret extension definition ***/
+/* margin-top => is added to the caret height (top & bottom) */
+.ui-keyboard-caret {
+	background: #c00;
+	width: 1px;
+	margin-top: 3px;
+}
+
+/*** Extender keyboard extension ***/
+div.ui-keyboard-extender {
+	margin-left: 5px;
+	margin-right: 10px;
+}
+button.ui-keyboard-extender span {
+	width: .9em;
+	height: .9em;
+	display: inline-block;
+	margin-bottom: 3px;
+	background-repeat: no-repeat;
+	background-position: center center;
+	background-size: contain;
+	/* dark theme extender icon - fill: #eee */
+	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgc3R5bGU9ImZpbGw6I2VlZSI+PGc+PHBhdGggc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6I2VlZSIgZD0iTSAwLjUsNC41IDE1LjUsNC41IDE1LjUsMTUuNSAwLjUsMTUuNSBaIj48L3BhdGg+PHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iMiIgeT0iNiI+PC9yZWN0PjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjUiIHk9IjYiPjwvcmVjdD48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSI4IiB5PSI2Ij48L3JlY3Q+PHBhdGggZD0ibSAxMSw2IDMsMCAwLDUgLTIsMCAwLC0zIC0xLDAgeiI+PC9wYXRoPjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjEyIiB5PSIxMiI+PC9yZWN0PjxyZWN0IHdpZHRoPSI2IiBoZWlnaHQ9IjIiIHg9IjUiIHk9IjEyIj48L3JlY3Q+PHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iOSIgeT0iOSI+PC9yZWN0PjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjYiIHk9IjkiPjwvcmVjdD48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSIyIiB5PSIxMiI+PC9yZWN0PjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjIiIHg9IjIiIHk9IjkiPjwvcmVjdD48L2c+PC9zdmc+');
+}

static/styles/main.css

@@ -107,13 +107,16 @@
     font-weight: 300;
     font-style: italic;
 }
-@font-face {
-    font-family: 'kaitiregular';
-    src: url('../fonts/simkai-webfont.woff2') format('woff2'),
-         url('../fonts/simkai-webfont.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
 
+@font-face{
+	font-family:'SimKai';
+	src: url('../fonts/simkai.eot');
+	src: local('SimKai'), local('KaiTi'),
+        url('../fonts/simkai.woff2') format("woff2"),
+        url('../fonts/simkai.woff') format("woff"),
+        url('../fonts/simkai.ttf') format("truetype");
+	font-weight:normal;
+	font-style:normal
 }
 
 @font-face {
@@ -191,7 +194,7 @@
 body {
     background-image: url(../im/arriereplan.gif);
     background-color: rgba(255, 255, 255, 0.5);
-    font-family: Ubuntu, kaitiregular, DejaVu Sans, Times, Calibri;
+    font-family: Ubuntu, SimKai, DejaVu Sans, Times, Calibri;
     font-variant-ligatures: no-common-ligatures;
     font-size: 14pt;
     text-align: center;

static/svg/prototype_mandarin_ecritureEnCouleurs.html

@@ -237,7 +237,7 @@
             const txt = document.createElementNS("http://www.w3.org/2000/svg", "text");
             txt.setAttribute("x","0");
             txt.setAttribute("y","85");
-            txt.setAttribute("font-family", 'KaiTi' ); // Ma Shan Zheng 'AR PL UKai TW'
+            txt.setAttribute("font-family", 'SimKai' ); // Ma Shan Zheng 'AR PL UKai TW'
             txt.setAttribute("font-size","100");
             txt.innerHTML = sin;
             svg1.appendChild(txt);

templates/playerHome.html

@@ -67,9 +67,9 @@
                                 </div>
 
                                 <div class="d-flex justify-content-around" style="margin:40px 0px">
-                                    <a id="modalBtnPlay" href=""><button type="button" class="btn btn-success btn-lg">Démarrer !</button></a>
-                                    <a id="modalBtnEdit" href="" style="display:none;"><button type="button" class="btn btn-secondary btn-lg">Éditer</button></a>
-                                    <a id="modalBtnCopy" href="" style="display:none;"><button type="button" class="btn btn-primary btn-lg" title="Dupliquer et modifier cette série">Dupliquer</button></a>
+                                    <a id="modalBtnPlay"><button type="button" class="btn btn-success btn-lg">Démarrer !</button></a>
+                                    <a id="modalBtnEdit" style="display:none;"><button type="button" class="btn btn-secondary btn-lg">Éditer</button></a>
+                                    <a id="modalBtnCopy" style="display:none;"><button type="button" class="btn btn-primary btn-lg" title="Dupliquer et modifier cette série">Dupliquer</button></a>
                                 </div>