Commit 406d94b3 authored by Sylvain Coulange's avatar Sylvain Coulange 🌼
Browse files

corrections couleurs panneaux anglais et phonochromie v4

parent 010ced3a
......@@ -6,6 +6,7 @@ var voix = "f"
async function playIpa(line="") {
var synth = false
console.log("PLAYIPA", thisPageLang)
if (thisAppli == "phonographe") {
if (thisPageLang == 'fr' || thisPageLang == 'en'){
......@@ -49,6 +50,52 @@ async function playIpa(line="") {
if (repphon != "espace" && repphon != "phon_inconnu") { ipa += phon2api[repphon] }
}
if (ipa.length > 0 && ipa != currentIpa) { synth = true }
} else if (thisAppli == "phonodrop") {
thisPageLang = lang;
if (thisPageLang=="enbr") {thisPageLang = "en";}
// Si quelque chose est écrit...
if (group.length > 1) {
group = sortGroup(group)
// on récupère tous les éléments classe "carte-v2" et on récupère leur classe phon_*
var ipa = "";
for (e=0; e<group.length; e++){
// on parse les classe c de l'élement e
let newcontent = '';
for (c=0; c<group[e].classList.length; c++){
// si la classe match "phon_.*"" alors on récupère l'équivalent api
if (group[e].classList[c].match(/phon_.*/)){
newcontent += phon2api[group[e].classList[c]];
}
if (group[e].classList[c].match(/pause/)) {
// si la classe match "pause" on insert une espace (qui sera convertie en <break> dans text2speech.py)
newcontent += ' ';
}
if (group[e].classList[c].match(/stress1/)) newcontent = 'ˈ' + newcontent
if (group[e].classList[c].match(/stress2/)) newcontent = 'ˌ' + newcontent
}
ipa += newcontent
}
ipa = ipa.trim(); // suppression des espaces en début ou en fin
ipa = ipa.replace(/undefined/g, '')
if (ipa != currentIpa) { synth = true }
} else if (group.length == 1) {
// lire phon kinéphones
var thisPhon = ""
for (c=0; c<group[0].classList.length; c++){
// si la classe match "phon_.*"" alors on récupère l'équivalent api
if (group[0].classList[c].match(/phon_.*/)){
thisPhon = group[0].classList[c]
}
}
console.log('Lecture Kinephones', thisPhon, phon2api[thisPhon])
var audio = new Audio("audio/" + lang+"_" + thisPhon+"-f.mp3")
audio.play()
}
}
if (synth) {
......@@ -73,7 +120,7 @@ async function playIpa(line="") {
};
// ENVOI
const response = await fetch('/_playIpa/', options)
const response = await fetch('https://phonographe.alem-app.fr/_playIpa/', options)
const data = await response.json();
readResponse(data["audio"], line);
} else {
......@@ -82,7 +129,9 @@ async function playIpa(line="") {
sv_audio.play();
}
saveTrace(`playIpa [${ipa}] ${colis.voix} ${colis.lang} ${document.getElementById('debitParole'+line.toString()).value} rep${line}`)
if (typeof saveTrace !== "undefined") {
saveTrace(`playIpa [${ipa}] ${colis.voix} ${colis.lang} ${document.getElementById('debitParole'+line.toString()).value} rep${line}`)
}
}
function readResponse(response, line) {
......
/* CSS ALeM-APP v4 */
/* https://alem.hypotheses.org/ */
/* Last update: 2022/08/05 */
/* Last update: 2022/11/06 */
:root {
--bicolor1: #ff0000;
......@@ -143,8 +143,8 @@
.phon_a { fill: var(--phon_a); color:var(--phon_a); stop-color:var(--phon_a); background:-webkit-linear-gradient(var(--phon_a), var(--phon_a));-webkit-background-clip: text;background-clip: text; }
.phon_a_long { fill: var(--phon_a); color:var(--phon_a); stop-color:var(--phon_a); background:-webkit-linear-gradient(var(--phon_a), var(--phon_a));-webkit-background-clip: text;background-clip: text; }
.phon_a_centr { fill: var(--phon_a_centr); color:var(--phon_a_centr); stop-color:var(--phon_a_centr); background:-webkit-linear-gradient(var(--phon_a_centr), var(--phon_a_centr));-webkit-background-clip: text;background-clip: text; } /*ä a_"*/
.phon_arobase_rho { fill: var(--phon_arobase_rho); color:var(--phon_arobase_rho); stop-color:var(--phon_arobase_rho); background:-webkit-linear-gradient(var(--phon_arobase_rho), var(--phon_arobase_rho));-webkit-background-clip: text;background-clip: text; } /*ɚ*/
.phon_arobase_slash { fill: var(--phon_arobase_slash); color:var(--phon_arobase_slash); stop-color:var(--phon_arobase_slash); background:-webkit-linear-gradient(var(--phon_arobase_slash), var(--phon_arobase_slash));-webkit-background-clip: text;background-clip: text; } /*ɘ @\*/
.phon_arobase_rho, .phon_schwarho { fill: var(--phon_arobase_rho); color:var(--phon_arobase_rho); stop-color:var(--phon_arobase_rho); background:-webkit-linear-gradient(var(--phon_arobase_rho), var(--phon_arobase_rho));-webkit-background-clip: text;background-clip: text; } /*ɚ*/
.phon_arobase_slash, .phon_schwa_slash { fill: var(--phon_arobase_slash); color:var(--phon_arobase_slash); stop-color:var(--phon_arobase_slash); background:-webkit-linear-gradient(var(--phon_arobase_slash), var(--phon_arobase_slash));-webkit-background-clip: text;background-clip: text; } /*ɘ @\*/
.phon_arobase { fill: var(--phon_arobase); color:var(--phon_arobase); stop-color:var(--phon_arobase); background:-webkit-linear-gradient(var(--phon_arobase), var(--phon_arobase));-webkit-background-clip: text;background-clip: text; } /*ə*/
.phon_a_maj_nas { fill: var(--phon_a_maj_nas); color:var(--phon_a_maj_nas); stop-color:var(--phon_a_maj_nas); background:-webkit-linear-gradient(var(--phon_a_maj_nas), var(--phon_a_maj_nas));-webkit-background-clip: text;background-clip: text; } /*ɑ̃*/
.phon_b { fill: var(--phon_b); color:var(--phon_b); stop-color:var(--phon_b); background:-webkit-linear-gradient(var(--phon_b), var(--phon_b));-webkit-background-clip: text;background-clip: text; }
......@@ -264,43 +264,44 @@
.phon_ju_long { background: -webkit-linear-gradient(var(--phon_j) 52%, var(--phon_u) 50%); -webkit-background-clip: text; background-clip: text; text-decoration: underline var(--phon_u);-webkit-text-fill-color: transparent;}
.phon_ju_maj { background: -webkit-linear-gradient(var(--phon_j) 52%, var(--phon_u_maj) 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_schwju { background: -webkit-linear-gradient(var(--phon_j) 52%, var(--phon_schwu) 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_arobasel { background: -webkit-linear-gradient(var(--phon_schwa) 52%, var(--phon_l) 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_arobasem { background: -webkit-linear-gradient(var(--phon_schwa) 52%, var(--phon_m) 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_arobasen { background: -webkit-linear-gradient(var(--phon_schwa) 52%, var(--phon_n) 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_arobasel, .phon_schwal { background: -webkit-linear-gradient(var(--phon_schwa) 52%, var(--phon_l) 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_arobasem, .phon_schwam { background: -webkit-linear-gradient(var(--phon_schwa) 52%, var(--phon_m) 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_arobasen, .phon_schwan { background: -webkit-linear-gradient(var(--phon_schwa) 52%, var(--phon_n) 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_schwiz { background: -webkit-linear-gradient(var(--phon_schwi) 52%, var(--phon_z) 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_schwaz { background: -webkit-linear-gradient(var(--phon_schwa) 52%, var(--phon_z) 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_lj { background: -webkit-linear-gradient(var(--phon_l) 52%, var(--phon_j) 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_sz { background: -webkit-linear-gradient(var(--phon_s) 52%, var(--phon_z) 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_tt_maj { background: -webkit-linear-gradient(var(--phon_t) 52%, var(--phon_t_maj) 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_jarobase { background: -webkit-linear-gradient(var(--phon_j) 52%, var(--phon_schwa) 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_jarobase, .phon_jschwa { background: -webkit-linear-gradient(var(--phon_j) 52%, var(--phon_schwa) 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
/* gradient 60% */
.phon_ei_maj { background: -webkit-linear-gradient(var(--phon_e) 50%, var(--phon_schwi) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_i_majarobase { background: -webkit-linear-gradient(var(--phon_i_maj) 50%, var(--phon_schwa) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_earobase { background: -webkit-linear-gradient(var(--phon_e) 50%, var(--phon_schwa) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_au_maj { background: -webkit-linear-gradient(var(--phon_cbrack) 50%, var(--phon_schwu) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_arobaseu_maj { background: -webkit-linear-gradient(var(--phon_3) 50%, var(--phon_schwu) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_u_majarobase { background: -webkit-linear-gradient(var(--phon_u_maj) 50%, var(--phon_schwa) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_o_maji_maj { background: -webkit-linear-gradient(var(--phon_o) 50%, var(--phon_schwi) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_ai_maj { background: -webkit-linear-gradient(var(--phon_v_maj) 50%, var(--phon_schwi) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_ei_maj, .phon_eschwi { background: -webkit-linear-gradient(var(--phon_e) 50%, var(--phon_schwi) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_i_majarobase, .phon_i_majschwa { background: -webkit-linear-gradient(var(--phon_i_maj) 50%, var(--phon_schwa) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_earobase, .phon_eschwa { background: -webkit-linear-gradient(var(--phon_e) 50%, var(--phon_schwa) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_au_maj, .phon_aschwu { background: -webkit-linear-gradient(var(--phon_cbrack) 50%, var(--phon_schwu) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_arobaseu_maj, .phon_schwau_maj, .phon_arobaseschwu { background: -webkit-linear-gradient(var(--phon_3) 50%, var(--phon_schwu) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_u_majarobase, .phon_u_majschwa { background: -webkit-linear-gradient(var(--phon_u_maj) 50%, var(--phon_schwa) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_o_maji_maj, .phon_o_majschwi { background: -webkit-linear-gradient(var(--phon_o) 50%, var(--phon_schwi) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_ai_maj, .phon_aschwi { background: -webkit-linear-gradient(var(--phon_v_maj) 50%, var(--phon_schwi) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_er { background: -webkit-linear-gradient(var(--phon_e) 50%, var(--phon_r_slash) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_i_majr { background: -webkit-linear-gradient(var(--phon_i_maj) 50%, var(--phon_r_slash) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_u_majr { background: -webkit-linear-gradient(var(--phon_u_maj) 50%, var(--phon_r_slash) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_a_majr { background: -webkit-linear-gradient(var(--phon_a_maj) 50%, var(--phon_r_slash) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_o_majr { background: -webkit-linear-gradient(var(--phon_o_maj) 50%, var(--phon_r_slash) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_o_maju_maj { background: -webkit-linear-gradient(var(--phon_o_maj) 50%, var(--phon_schwu) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_o_maju_maj, .phon_o_majschwu { background: -webkit-linear-gradient(var(--phon_o_maj) 50%, var(--phon_schwu) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_ou_maj, .phon_oschwu { background: -webkit-linear-gradient(var(--phon_o) 50%, var(--phon_schwu) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
/* gradient 50-70% */
.phon_a_rho { background:-webkit-linear-gradient(var(--phon_a) 50%, var(--phon_rho) 70%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;}
.phon_7_rho { background:-webkit-linear-gradient(var(--phon_7) 50%, var(--phon_rho) 70%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;}
.phon_a_rho, .phon_arho { background:-webkit-linear-gradient(var(--phon_a) 50%, var(--phon_rho) 70%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;}
.phon_7_rho, .phon_7rho { background:-webkit-linear-gradient(var(--phon_7) 50%, var(--phon_rho) 70%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;}
/* gradients triples */
.phon_ju_majarobase { background: -webkit-linear-gradient(var(--phon_j) 45%, var(--phon_u_maj) 55%, var(--phon_schwa) 65%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_wai_maj { background: -webkit-linear-gradient(var(--phon_w) 45%, var(--phon_a) 55%, var(--phon_schwi) 65%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_ju_majarobase, .phon_ju_majschwa { background: -webkit-linear-gradient(var(--phon_j) 45%, var(--phon_u_maj) 55%, var(--phon_schwa) 65%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_wai_maj, .phon_waschwi { background: -webkit-linear-gradient(var(--phon_w) 45%, var(--phon_a) 55%, var(--phon_schwi) 65%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_war { background: -webkit-linear-gradient(var(--phon_w) 45%, var(--phon_a) 55%, var(--phon_r_slash) 65%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_ju_majr { background: -webkit-linear-gradient(var(--phon_j) 45%, var(--phon_u_maj) 55%, var(--phon_r_slash) 65%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_ai_majarobase { background: -webkit-linear-gradient(var(--phon_a) 45%, var(--phon_i_maj) 55%, var(--phon_schwa) 65%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_ai_majarobase, .phon_ai_majschwa { background: -webkit-linear-gradient(var(--phon_a) 45%, var(--phon_i_maj) 55%, var(--phon_schwa) 65%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
/* gradients horizontaux (mandarin) */
......
......@@ -32,35 +32,35 @@
id="defs6" />
<linearGradient id="gradient_ei_maj" x1="0" x2="0" y1="0" y2="1">
<stop offset="55%" class="phon_e"/>
<stop offset="80%" class="phon_i_maj"/>
<stop offset="80%" class="phon_schwi"/>
</linearGradient>
<linearGradient id="gradient_i_majarobase" x1="0" x2="0" y1="0" y2="1">
<stop offset="55%" class="phon_i_maj"/>
<stop offset="80%" class="phon_arobase"/>
<stop offset="80%" class="phon_schwa"/>
</linearGradient>
<linearGradient id="gradient_earobase" x1="0" x2="0" y1="0" y2="1">
<stop offset="55%" class="phon_e"/>
<stop offset="80%" class="phon_arobase"/>
<stop offset="80%" class="phon_schwa"/>
</linearGradient>
<linearGradient id="gradient_au_maj" x1="0" x2="0" y1="0" y2="1">
<stop offset="55%" class="phon_a"/>
<stop offset="80%" class="phon_u_maj"/>
<stop offset="55%" class="phon_cbrack"/>
<stop offset="80%" class="phon_schwu"/>
</linearGradient>
<linearGradient id="gradient_arobaseu_maj" x1="0" x2="0" y1="0" y2="1">
<stop offset="55%" class="phon_arobase"/>
<stop offset="80%" class="phon_u_maj"/>
<stop offset="55%" class="phon_3"/>
<stop offset="80%" class="phon_schwu"/>
</linearGradient>
<linearGradient id="gradient_u_majarobase" x1="0" x2="0" y1="0" y2="1">
<stop offset="55%" class="phon_u_maj"/>
<stop offset="80%" class="phon_arobase"/>
<stop offset="80%" class="phon_schwa"/>
</linearGradient>
<linearGradient id="gradient_o_maji_maj" x1="0" x2="0" y1="0" y2="1">
<stop offset="55%" class="phon_o_maj"/>
<stop offset="80%" class="phon_i_maj"/>
<stop offset="80%" class="phon_schwi"/>
</linearGradient>
<linearGradient id="gradient_ai_maj" x1="0" x2="0" y1="0" y2="1">
<stop offset="55%" class="phon_a"/>
<stop offset="80%" class="phon_i_maj"/>
<stop offset="55%" class="phon_v_maj"/>
<stop offset="80%" class="phon_schwi"/>
</linearGradient>
<linearGradient id="gradient_ts_maj" x1="0" x2="0" y1="0" y2="1">
......@@ -193,7 +193,7 @@
<rect
style="fill:url(#gradient_arobaseu_maj);fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0"
id="rect_arobaseu_maj"
class="phon_arobaseu_maj"
class="phon_schwau_maj"
width="104.02859"
height="53.203194"
x="850.508"
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment