Commit 9a1011b1 authored by Sylvain Coulange's avatar Sylvain Coulange
Browse files

passage à Bootstrap5

parent b27e0140
......@@ -30,7 +30,7 @@ fidels = {
def newPage(request):
updateTimeStr = updateTime()
dataFidels = json.dumps(fidels)
return render(request, 'clavier.html', {'updateTime': updateTimeStr, 'fidels':dataFidels, 'dataPage':0})
return render(request, 'clavier.html', {'updateTime': updateTimeStr, 'fidels':dataFidels, 'dataPage':0, 'appli':'phonographe'})
def loadPage(request, pageId):
pageId = 'id-'+pageId
......@@ -115,14 +115,6 @@ class SerieDetailView(DetailView):
# def openPlayerPhono(request, serieId):
# updateTimeStr = updateTime()
# serieContent = json.dumps(model_to_dict(Serie.objects.filter(id=serieId).first()))
# print(serieContent)
# print("Demande ouverture série",serieId)
# return render(request, 'playerPhono.html', {'updateTime': updateTimeStr, 'serieContent':serieContent})
def openPlayerPhono(request, pk):
updateTimeStr = updateTime()
serieContent = Serie.objects.filter(id=pk).first()
......
var langJson = {
"sp_soustitre": {
"fr":"Clavier phonographémique <span class='phon_p'>p</span><span class='phon_u'>ou</span><span class='phon_r_maj'>r</span><span> </span><span class='phon_e'>é</span><span class='phon_k'>c</span><span class='phon_r_maj'>r</span><span class='phon_i'>i</span><span class='phon_r_maj'>re</span><span> </span><span class='phon_a_maj_nas'>en</span><span> </span><span class='phon_k'>c</span><span class='phon_u'>ou</span><span class='phon_l'>l</span><span class='phon_9'>eu</span><span class='phon_r_maj'>rs</span>",
"en":"A phonographemic keyboard <span class='phon_t'>t</span><span class='phon_u_long'>o</span><span> </span><span class=''><span class='phon_r_slash'>wr</span><span class='phon_ai_maj stress1'>i</span><span class='phon_t'>te</span></span><span> </span><span class='phon_i_maj'>i</span><span class='phon_n'>n</span><span> </span><span class=''><span class='phon_k'>c</span><span class='phon_v_maj stress1'>o</span><span class='phon_l'>l</span></span><span class='phon_schwa schwa'>or</span><span class='phon_z'>s</span>"
"fr":"<span class='phon_k'>C</span><span class='phon_l'>l</span><span class='phon_a'>a</span><span class='phon_v'>v</span><span class='phon_j'>i</span><span class='phon_e'>er</span><span> </span><span class='phon_f'>ph</span><span class='phon_o'>o</span><span class='phon_n'>n</span><span class='phon_o'>o</span><span class='phon_g'>g</span><span class='phon_r_maj'>r</span><span class='phon_a'>a</span><span class='phon_f'>ph</span><span class='phon_e'>é</span><span class='phon_m'>m</span><span class='phon_i'>i</span><span class='phon_k'>que</span><span> </span><span class='phon_p'>p</span><span class='phon_u'>ou</span><span class='phon_r_maj'>r</span><span> </span><span class='phon_e'>é</span><span class='phon_k'>c</span><span class='phon_r_maj'>r</span><span class='phon_i'>i</span><span class='phon_r_maj'>re</span><span> </span><span class='phon_a_maj_nas'>en</span><span> </span><span class='phon_k'>c</span><span class='phon_u'>ou</span><span class='phon_l'>l</span><span class='phon_9'>eu</span><span class='phon_r_maj'>rs</span>",
"en":"<span class='phon_arobase schwa'>a</span><span> </span><span class='phon_f'>ph</span><span class='phon_arobase schwa'>o</span><span class='phon_n'>n</span><span class='phon_q_maj stress2'>o</span><span class='phon_g'>g</span><span class='phon_r_slash'>r</span><span class='phon_cbrack'>a</span><span class='phon_f'>ph</span><span class='phon_i_long stress1'>e</span><span class='phon_m'>m</span><span class='phon_i_maj schwa'>i</span><span class='phon_k'>c</span><span> </span><span class='phon_k'>k</span><span class='phon_i_long stress1'>ey</span><span class='phon_b'>b</span><span class='phon_o_maj_long'>oar</span><span class='phon_d'>d</span><span> </span><span class='phon_t'>t</span><span class='phon_arobase schwa'>o</span><span> </span><span class=''><span class='phon_r_slash'>wr</span><span class='phon_ai_maj stress1'>i</span><span class='phon_t'>te</span></span><span> </span><span class='phon_i_maj'>i</span><span class='phon_n'>n</span><span> </span><span class=''><span class='phon_k'>c</span><span class='phon_v_maj stress1'>o</span><span class='phon_l'>l</span></span><span class='phon_schwa schwa'>or</span><span class='phon_z'>s</span>"
},
"sp_btnspace": {
"fr":"Espace",
......
......@@ -3,16 +3,6 @@
--graphSize:50%;
}
.preprod {
position: absolute;
top: 5px;
left: 5px;
font-size: 2em;
font-weight: bolder;
color: red;
border: 5px solid red;
}
.choixLang {
position: absolute;
top: 15px;
......@@ -20,27 +10,6 @@
background-color: white;
}
body {
background-image: url(../im/arriereplan.gif);
background-color: rgba(255, 255, 255, 0.5);
font-family: Palatino, Times, Calibri;
font-size: 14pt;
text-align: center;
padding: 0px;
}
h2 {
padding: 10px;
font-size: 1.5em;
font-weight: bold;
margin: auto;
}
.contours {
-webkit-text-stroke-width: 0.7px;
-webkit-text-stroke-color: black;
}
.btn-car {
min-width: 3vw;
padding: 3px;
......@@ -76,23 +45,10 @@ h2 {
padding: 3px;
}
.paramGestionPage {
position: absolute;
top: -35px;
left: 5px;
font-size: 20pt;
color: black;
}
.paramGestionPage a {
color: black;
}
.outputParam {
position: absolute;
top: -35px;
right: 5px;
font-size: 20pt;
color: black;
.param div {
margin: 0px 10px;
}
.glyphicon {
cursor: pointer;
padding: 3px;
......@@ -356,11 +312,6 @@ h2 {
.right {
flex: 50%;
}
.param {
padding: 5px 10px;
background-color: black;
}
/* Calques A. Do */
.doCalques {
......
body {
background-image: url(../im/arriereplan.gif);
background-color: rgba(255, 255, 255, 0.5);
font-family: Palatino, Times, Calibri;
font-size: 14pt;
text-align: center;
padding: 0px;
}
h2 {
padding: 10px;
font-size: 1.5em;
font-weight: bold;
margin: auto;
}
.contours {
-webkit-text-stroke-width: 0.7px;
-webkit-text-stroke-color: black;
}
.preprod {
position: absolute;
top: 5px;
left: 5px;
font-size: 2em;
font-weight: bolder;
color: red;
border: 5px solid red;
}
.navbarPerso {
background-color: rgba(252, 235, 205, 0.548);
padding: 0px;
max-height: 60px;
padding: 0px 20px;
}
.site-header .navbar-nav .nav-link {
......@@ -75,4 +105,9 @@
.serieAuteurImage {
width: 20px;
height: 20px;
}
/* Pour éviter bg noir dans svg */
.nobg {
background-color: transparent;
}
\ No newline at end of file
......@@ -7,11 +7,12 @@
{% else %}
<title>PhonoGraphe</title>
{% endif %}
<link rel="shortcut icon" type="image/png" href="{% static 'phonographe.ico' %}"/>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png" href="{% static 'phonographe.ico' %}"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"> -->
<!-- BOOTSTRAP -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'styles/fa/css/font-awesome.min.css' %}">
......@@ -22,61 +23,82 @@
<link rel="stylesheet" type="text/css" href="{% static 'styles/player.css'%}">
<script type="text/javascript" src="{% static 'languages/languages.js' %}"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script defer src="{% static 'js/html2canvas.min.js' %}"></script>
<script defer src="{% static 'js/download.js' %}"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light navbarPerso">
<!-- LOGO PHONOGRAPHE -->
<a class="navbar-brand mr-4" href="/"><img height="60px" src="{% static 'im/logo_phonographe3.png' %}"></a>
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark navbarPerso">
<div class="container">
<a class="navbar-brand mr-4" href="/"><img height="60px" src="{% static 'im/logo_phonographe3.png' %}"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<!-- COLLAPSE -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="/player"><span id="sp_playerHeader" class="langspan"></span></a>
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav">
</button>
<div class="collapse navbar-collapse d-flex justify-content-between" id="navbarToggle">
<!-- TITRE -->
<div class="navbar-nav mr-auto fs-2 fw-bold">
{% if appli == "phonographe" %}
<a class="nav-item nav-link contours" href="/"><span id="sp_soustitre" class="langspan"></span></a>
{% elif appli == "phonoplayer" %}
<a class="nav-item nav-link" href="/player"><span id="sp_playerHeader" class="langspan"></span></a>
{% endif %}
</div>
<!-- CONNEXION -->
<div class="navbar-nav">
{% if user.is_authenticated %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle nav-login" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ user.username }}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{% url 'profile' %}">Page personnelle</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'logout' %}">Se déconnecter</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle nav-login" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ user.username }}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{% url 'profile' %}">Page personnelle</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'logout' %}">Se déconnecter</a>
</div>
</li>
{% else %}
<a class="nav-item nav-link nav-login" href="{% url 'login' %}">Se connecter</a>
<a class="nav-item nav-link nav-login" href="{% url 'login' %}">Se connecter</a>
{% endif %}
</div>
</div>
</div>
</nav>
</header>
</div>
</nav>
<div class="preprod" style="display: none;">PREPROD</div>
<div class="container">
<div class="container-fluid">
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }}">{{ message }}</div>
{% endfor %}
{% endif %}
{% block content %}{% endblock %}
</div>
{% include 'footer.html' %}
<footer class="footer-copyright text-center py-3">
<div><span id="sp_footfirefox" class="langspan"></span></div>
<div><a href="mailto:sylvain.coulange@univ-genoble-alpes.fr">S.Coulange</a>, {{ updateTime }} | <a href="https://gricad-gitlab.univ-grenoble-alpes.fr/pedagogies-multimodales/phonographe"><span id="sp_footcode" class="langspan"></span></a> - <a href="https://gricad-gitlab.univ-grenoble-alpes.fr/pedagogies-multimodales/phonographe/-/commits/master"><span id="sp_footjournal" class="langspan"></span></a></div>
<div class="licence-div">
<div><span id="sp_footlicence" class="langspan"></span></div>
<div><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" title="Attribution-NonCommercial-ShareAlike 4.0 International"><img height="30px" src="{% static 'im/cc-by-nc-sa.png' %}" title="Attribution-NonCommercial-ShareAlike 4.0 International" class="licence-element licence-img"/></a></div>
<div><span id="sp_footcopyr" class="langspan"></span> ©<a href="mailto:do.alexandre38@gmail.com">Alexandre Do</a> ©<a href="https://www.pronunciationscience.com/">PronSci</a></div>
</div>
<div><span id="sp_header" class="langspan"></span></div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
{% block javascript %}
......@@ -84,4 +106,9 @@
<script type="text/javascript" src="{% static 'js/interface_basic.js' %}"></script>
<script type="text/javascript" src="{% static 'js/clavierCalques.js' %}"></script>
<script type="text/javascript" src="{% static 'js/popupAide.js' %}"></script>
<script type="text/javascript" src="{% static 'js/id2class.js' %}"></script>
<script type="text/javascript" src="{% static 'js/interface.js' %}"></script>
<script type="text/javascript" src="{% static 'js/clavier.js' %}"></script>
</html>
{% extends "base.html" %}
{% load static %}
<!DOCTYPE html>
<html lang="fr">
<head>
<title>PhonoGraphe</title>
<link rel="shortcut icon" type="image/png" href="{% static 'phonographe.ico' %}"/>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'styles/phonochromie_alem_v3.css'%}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/popup.css'%}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/clavier.css'%}">
<!-- <script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script> -->
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script defer src="{% static 'js/html2canvas.min.js' %}"></script>
<script defer src="{% static 'js/download.js' %}"></script>
</head>
<body>
{% block content %}
<script type="text/javascript">
var dicoFidels = JSON.parse("{{fidels|escapejs}}");
var dataPage = JSON.parse("{{dataPage|escapejs}}");
</script>
<div class="header"><span id="sp_header" class="langspan"></span></div>
<div id="mainZone">
<img src="{% static 'im/logo_phonographe3.png' %}" width="40%">
<h2 class="contours"><span id="sp_soustitre" class="langspan"></span></h2>
<div class="preprod" style="display: none;">PREPROD</div>
<!-- fermeture conteneur -->
<div class="choixLang">
<select id="choixLang" onchange="selectLang(this.value)">
<option value="fr">Français</option>
<option value="en">English</option>
</select>
<div class="d-flex justify-content-between mx-2 mt-2">
<div class="d-flex param">
<div onclick="savePage()" title="Enregistrer ce travail"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-cloud-upload-fill nobg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 4.095 0 5.555 0 7.318 0 9.366 1.708 11 3.781 11H7.5V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11h4.188C14.502 11 16 9.57 16 7.773c0-1.636-1.242-2.969-2.834-3.194C12.923 1.999 10.69 0 8 0zm-.5 14.5V11h1v3.5a.5.5 0 0 1-1 0z"/></svg></div>
<div title="Ouvrir une nouvelle page"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-file-earmark nobg" viewBox="0 0 16 16"><path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z"/><path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/></svg></div>
<a id="hrefNewPage" href="" target="_blank"></a>
<div id="btnSwitchStress" onclick="toggleSwitchStress()" class="btnSwitchStress" title="Click on spellings to switch the accent">Switch stress</div>
</div>
<div class="fenetre textSide textZone" id="textZoneBack">
<div class="paramGestionPage">
<span class="glyphicon glyphicon-floppy-disk" onclick="savePage()" area-hidden="true" title="Enregistrer ce travail"></span>
<a id="hrefNewPage" href="" target="_blank"><span class="glyphicon glyphicon-plus" area-hidden="true" title="Ouvrir une nouvelle page"></span></a>
<div id="btnSwitchStress" onclick="toggleSwitchStress()" class="btnSwitchStress" title="Click on spellings to switch the accent">Switch stress</div>
</div>
<div id="textZone" contenteditable="false" spellcheck="true"></div>
<div class="outputParam" id="outputParam">
<span class="glyphicon glyphicon-duplicate" aria-hidden="true" title="Copier/Coller le contenu" onclick="getPopUp()"></span>
<span onclick="bg2white()" class="glyphicon glyphicon-adjust" aria-hidden="true" title="Changer la couleur du fond"></span>
<span id="div2png" class="glyphicon glyphicon-picture" aria-hidden="true" title="Exporter en png"></span>
<span onclick="toggleContentEditable()" id="btnContentEditable" class="glyphicon glyphicon-edit" aria-hidden="true" title="(dé)vérrouiller la saisie"></span>
</div>
<select id="choixLang" onchange="selectLang(this.value)">
<option value="fr">Français</option>
<option value="en">English</option>
</select>
<div class="d-flex param" id="outputParam">
<div title="Copier/Coller le contenu" onclick="getPopUp()"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-textarea-t nobg" viewBox="0 0 16 16"><path d="M1.5 2.5A1.5 1.5 0 0 1 3 1h10a1.5 1.5 0 0 1 1.5 1.5v3.563a2 2 0 0 1 0 3.874V13.5A1.5 1.5 0 0 1 13 15H3a1.5 1.5 0 0 1-1.5-1.5V9.937a2 2 0 0 1 0-3.874V2.5zm1 3.563a2 2 0 0 1 0 3.874V13.5a.5.5 0 0 0 .5.5h10a.5.5 0 0 0 .5-.5V9.937a2 2 0 0 1 0-3.874V2.5A.5.5 0 0 0 13 2H3a.5.5 0 0 0-.5.5v3.563zM2 7a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm12 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/><path d="M11.434 4H4.566L4.5 5.994h.386c.21-1.252.612-1.446 2.173-1.495l.343-.011v6.343c0 .537-.116.665-1.049.748V12h3.294v-.421c-.938-.083-1.054-.21-1.054-.748V4.488l.348.01c1.56.05 1.963.244 2.173 1.496h.386L11.434 4z"/></svg></div>
<div onclick="bg2white()" title="Changer la couleur du fond"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-circle-half nobg" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/></svg></div>
<div id="div2png" title="Exporter en png"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-image nobg" viewBox="0 0 16 16"><path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/><path d="M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z"/></svg></div>
<div onclick="toggleContentEditable()" id="btnContentEditable" title="(dé)vérrouiller la saisie"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-pencil-square nobg" viewBox="0 0 16 16"><path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456l-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/><path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/></svg></div>
</div>
</div>
<div class="fenetre textSide textZone" id="textZoneBack">
<div id="textZone" contenteditable="false" spellcheck="true"></div>
</div>
<div class="boutons">
<button onclick="writeGraph('. ','punct')" class="btn-car">.</button>
<button onclick="writeGraph(', ','punct')" class="btn-car">,</button>
<button onclick="writeGraph(' ? ','punct')" class="btn-car">?</button>
<button onclick="writeGraph(' ! ','punct')" class="btn-car">!</button>
<button onclick="writeGraph(' : ','punct')" class="btn-car">:</button>
<button onclick="writeGraph(' ; ','punct')" class="btn-car">;</button>
<button onclick="writeGraph('-','punct')" class="btn-car">-</button>
<button onclick="writeGraph(' « ','punct')" class="btn-car">«</button>
<button onclick="writeGraph(' » ','punct')" class="btn-car">»</button>
<button onclick="writeGraph(' ','punct')" class="btn-car-space"><span id="sp_btnspace" class="langspan"></span></button>
<button onclick="writeEnter()" class="btn-car-enter" title="Aller à la ligne"></button>
<button onclick="erasePreviousSpan()" class="btn-car"><span id="sp_btnerase" class="langspan"></span></button>
<button class="btn-car" onclick="gotoPrecedent()" title="Aller à la graphie précédente"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></button>
<button class="btn-car" onclick="gotoNext()" title="Aller à la graphie suivante"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></button>
<button class="btn-car" onclick="putAnchorOnLast()" title="Aller à la dernière graphie"><span class="glyphicon glyphicon-step-forward" aria-hidden="true"></span></button>
<button onclick="eraseAll()" class="btn-car btn-car-erall"><span id="sp_btneraseall" class="langspan"></span></button>
<button type="button" class="btn btn-secondary" onclick="writeGraph('. ','punct')">.</button>
<button type="button" class="btn btn-secondary" onclick="writeGraph(', ','punct')">,</button>
<button type="button" class="btn btn-secondary" onclick="writeGraph(' ? ','punct')">?</button>
<button type="button" class="btn btn-secondary" onclick="writeGraph(' ! ','punct')">!</button>
<button type="button" class="btn btn-secondary" onclick="writeGraph(' : ','punct')">:</button>
<button type="button" class="btn btn-secondary" onclick="writeGraph(' ; ','punct')">;</button>
<button type="button" class="btn btn-secondary" onclick="writeGraph('-','punct')">-</button>
<button type="button" class="btn btn-secondary" onclick="writeGraph(' « ','punct')">«</button>
<button type="button" class="btn btn-secondary" onclick="writeGraph(' » ','punct')">»</button>
<button type="button" class="btn btn-secondary" onclick="writeGraph(' ','punct')" class="btn-car-space"><span id="sp_btnspace" class="langspan"></span></button>
<button type="button" class="btn btn-secondary" onclick="writeEnter()" class="btn-car-enter" title="Aller à la ligne"></button>
<button type="button" class="btn btn-secondary" onclick="erasePreviousSpan()"><span id="sp_btnerase" class="langspan"></span></button>
<button type="button" class="btn btn-secondary" onclick="gotoPrecedent()" title="Aller à la graphie précédente"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-caret-left-fill nobg" viewBox="0 0 16 16"><path d="M3.86 8.753l5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z"/></svg></button>
<button type="button" class="btn btn-secondary" onclick="gotoNext()" title="Aller à la graphie suivante"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-caret-right-fill nobg" viewBox="0 0 16 16"><path d="M12.14 8.753l-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/></svg></button>
<button type="button" class="btn btn-secondary" onclick="putAnchorOnLast()" title="Aller à la dernière graphie"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-chevron-bar-right nobg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.146 3.646a.5.5 0 0 0 0 .708L7.793 8l-3.647 3.646a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708 0zM11.5 1a.5.5 0 0 1 .5.5v13a.5.5 0 0 1-1 0v-13a.5.5 0 0 1 .5-.5z"/></svg></button>
<button type="button" class="btn btn-danger" onclick="eraseAll()"><span id="sp_btneraseall" class="langspan"></span></button>
</div>
<div class="clavier-graphiesZone">
......@@ -113,12 +94,10 @@
</div>
</div>
<div class="zoneParam">
<div class="zoneParam my-3">
<div class="left">
<div class="fenetre param">
<select id="selectPanneau" onchange="selectPanneau(this.value)"></select>
</div>
<div id="doCalques" class="doCalques">
<select id="selectPanneau" onchange="selectPanneau(this.value)"></select>
<div id="doCalques" class="doCalques mt-2">
<input type="image" class="btn-calq" src="../static/png/btn_rien.png" title="Panneau vierge" id="btn-rien" />
<input type="image" class="btn-calq" src="../static/png/btn_vsm.png" title="Voisements et position langue" id="btn-vsm" />
<input type="image" class="btn-calq btnfocus" src="../static/png/btn_bch.png" title="Formes de bouche" id="btn-bch" />
......@@ -126,9 +105,7 @@
</div>
</div>
<div class="right">
<div class="fenetre param">
<select id="selectFidel" onchange="selectFidel(this.value)"></select>
</div>
<select id="selectFidel" onchange="selectFidel(this.value)"></select>
</div>
</div>
......@@ -182,14 +159,7 @@
</div>
{% include 'footer.html' %}
<script type="text/javascript" src="{% static 'languages/languages.js' %}"></script>
<script type="text/javascript" src="{% static 'js/clavierCalques.js' %}"></script>
<script type="text/javascript" src="{% static 'js/popupAide.js' %}"></script>
<script type="text/javascript" src="{% static 'js/id2class.js' %}"></script>
<script type="text/javascript" src="{% static 'js/interface.js' %}"></script>
<script type="text/javascript" src="{% static 'js/clavier.js' %}"></script>
</html>
{% endblock %}
{% load static %}
<footer class="footer-copyright text-center py-3">
<div><span id="sp_footfirefox" class="langspan"></span></div>
<div><a href="mailto:sylvain.coulange@univ-genoble-alpes.fr">S.Coulange</a>, {{ updateTime }} | <a href="https://gricad-gitlab.univ-grenoble-alpes.fr/pedagogies-multimodales/phonographe"><span id="sp_footcode" class="langspan"></span></a> - <a href="https://gricad-gitlab.univ-grenoble-alpes.fr/pedagogies-multimodales/phonographe/-/commits/master"><span id="sp_footjournal" class="langspan"></span></a></div>
<div class="licence-div">
<div><span id="sp_footlicence" class="langspan"></span></div>
<div><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" title="Attribution-NonCommercial-ShareAlike 4.0 International"><img height="30px" src="{% static 'im/cc-by-nc-sa.png' %}" title="Attribution-NonCommercial-ShareAlike 4.0 International" class="licence-element licence-img"/></a></div>
<div><span id="sp_footcopyr" class="langspan"></span> ©<a href="mailto:do.alexandre38@gmail.com">Alexandre Do</a> ©<a href="https://www.pronunciationscience.com/">PronSci</a></div>
</div>
</footer>
\ No newline at end of file
Markdown is supported
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