Commit 5f964e3f authored by Sylvain Coulange's avatar Sylvain Coulange
Browse files

ajout bouton pour changer couleur du fond + nouveau makeup

parent 804c9d6b
......@@ -47,6 +47,10 @@ function toBicolor() {
};
};
function bg2white() {
document.getElementById('outputDiv').classList.toggle('win-white');
document.getElementById('output').classList.toggle('graphContours');
}
// KEYBOARD
......
......@@ -3,10 +3,11 @@ body {
font-family: Palatino, Times, Calibri;
font-size: 14pt;
text-align: center;
padding: 0px;
}
h2 {
padding: 5px;
padding: 10px;
font-size: 2em;
font-weight: bold;
margin: auto;
......@@ -25,9 +26,9 @@ h2 {
.inputDiv {
display: inline-table;
height: 100px;
width: 70%;
width: 80%;
background-color: white;
border: outset;
border: solid black 1px;
padding: 10px;
margin: 10px;
text-align: center;
......@@ -46,9 +47,10 @@ h2 {
}
textarea {
height: 30px;
height: 60px;
width: 90%;
padding: 10px;
margin: 5px;
border-radius: 4px;
}
......@@ -62,23 +64,40 @@ textarea {
margin: 10px;
}
.win-white {
background-color: white;
color: black;
}
.graphContours {
-webkit-text-stroke-width: 0.5px;
-webkit-text-stroke-color: black;
}
.outputMainDiv {
height: 250px;
width: 70%;
width: 80%;
text-align: left;
position: relative;
}
.outputParam {
position: absolute;
right: 0px;
top: 0px;
padding: 15px;
}
.output {
display: inline-table;
height: auto;
width: 97%;
background-color: black;
color: white;
padding: 10px;
margin: auto;
text-align: left;
font-size: 35pt;
font-family: Palatino, Times, Calibri;
font-weight: bold;
}
#graphies {
......@@ -92,23 +111,27 @@ textarea {
width: 97%;
}
.transMult {
border: 1px solid lightgray;
}
/* Responsive layout */
@media screen and (max-width: 900px) {
.outputMainDiv {
width: 80%;
width: 90%;
}
.inputDiv {
width: 80%;
width: 90%;
}
}
/* Responsive layout */
@media screen and (max-width: 600px) {
.outputMainDiv {
width: 90%;
width: 95%;
}
.inputDiv {
width: 90%;
width: 95%;
}
}
......@@ -184,8 +207,4 @@ footer {
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
}
.transMult {
border: 1px solid white;
}
\ No newline at end of file
......@@ -5,6 +5,7 @@
<title>Coloriseur phonographémique</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<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/kinephones_style_v2.css'%}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/styles.css'%}">
<!-- <link rel="stylesheet" type="text/css" href="{% static 'styles/kinephones_style.css'%}"> -->
......@@ -29,9 +30,12 @@
</form>
</div>
<div class="win-black outputMainDiv">
<div id="outputDiv" class="win-black outputMainDiv">
<div class="outputParam" onclick="bg2white()">
<span class="glyphicon glyphicon-adjust" aria-hidden="true" title="Changer la couleur du fond"></span>
</div>
<h2>Résultat :</h2>
<div class="output">
<div id="output" class="output">
{% for token in data.pphh %}{% if token == "§" %}<br/>{% elif token in ",.)]}%>"|make_list %}<span class="phon_neutre">{{ token }}</span>{% else %}<span> </span><span class="tokens" id='tok{{ forloop.counter }}' onclick="changeAlign(this.id)"></span>{% endif %}{% endfor %}
</div>
</div>
......
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