128 lines
4.2 KiB
HTML
128 lines
4.2 KiB
HTML
<!DOCTYPE>
|
|
<html>
|
|
|
|
<head>
|
|
{% block head %}
|
|
{% endblock %}
|
|
<meta charset="utf-16" />
|
|
<title>{% block title %} {% endblock %}</title>
|
|
<link href="{{ url_for('static', filename='css/common.css') }}" rel="stylesheet" />
|
|
<link rel="shortcut icon" href="../static/img/logo2.ico" type="image/x-icon">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<nav>
|
|
<table id="menu">
|
|
<tr>
|
|
<td class='menuItem'><a href="{{ url_for('main') }}"><img src="../static/img/logo.png" alt="logo" width="50rem"
|
|
height="50rem" style="margin: 15px;"></a></td>
|
|
|
|
<td class='menuItem'><a href="{{ url_for('liste') }}">Lire des histoires</a></td>
|
|
|
|
<td class='menuItem'><a href="{{ url_for('nouvelle') }}">Publier une histoire</a></td>
|
|
<td class="menuItem"><a href="{{ url_for('don') }}"><img src="../static/img/paypal-logo.png" alt="paypal-logo"
|
|
style="max-width: 50px; max-height: 50px; margin: 15px;"></a></td>
|
|
<td class="menuItem2">
|
|
<div class="changeTheme"><img src="../static/img/blackandwhite.png" alt="blackandwhite"
|
|
style="max-width: 50px; max-height: 50px; margin: 10px;"></div>
|
|
<div class="changeFont"><button id="dyslexique" style="margin: 10px;"><span>Mode Dyslexique</span></button>
|
|
</div>
|
|
<div class="slider">
|
|
<div id="glissière" onclick="taille()" class="col">
|
|
<input id="entree" type="range" oninput="taille()" min="100" max="300" class="slider">
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</nav>
|
|
<div id="content">
|
|
<div id="changingfontsize">
|
|
{% block content %} {% endblock %}
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<script>
|
|
const switchThemeBtn = document.querySelector('.changeTheme')
|
|
let toggleTheme = 0;
|
|
switchThemeBtn.addEventListener('click', () => {
|
|
if (toggleTheme === 0) {
|
|
document.documentElement.style.setProperty('--ecriture', '#f1f1f1');
|
|
document.documentElement.style.setProperty('--background', '#262626');
|
|
toggleTheme--;
|
|
} else {
|
|
document.documentElement.style.setProperty('--ecriture', '#262626');
|
|
document.documentElement.style.setProperty('--background', '#f1f1f1');
|
|
toggleTheme++;
|
|
}
|
|
})
|
|
</script>
|
|
<script>
|
|
const switchFontBtn = document.querySelector('.changeFont')
|
|
let toggle2Theme = 0;
|
|
switchFontBtn.addEventListener('click', () => {
|
|
if (toggle2Theme === 0) {
|
|
document.documentElement.style.setProperty('--police', "OpenDyslexic");
|
|
toggle2Theme--;
|
|
} else {
|
|
document.documentElement.style.setProperty('--police', "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif");
|
|
toggle2Theme++;
|
|
}
|
|
})
|
|
</script>
|
|
<script>
|
|
function toggleFullScreen() {
|
|
if (!document.fullscreenElement) {
|
|
document.documentElement.requestFullscreen();
|
|
} else if (document.exitFullscreen) {
|
|
document.exitFullscreen();
|
|
}
|
|
}
|
|
|
|
document.addEventListener("keydown", (e) => {
|
|
if (e.key === "Enter") {
|
|
toggleFullScreen();
|
|
}
|
|
}, false);
|
|
</script>
|
|
|
|
<!-- <script>
|
|
function taille() {
|
|
var entree = document.getElementById("entree");
|
|
var elementpage = document.getElementById("changingfontsize");
|
|
elementpage.style.fontSize = entree.value / 100 + "rem"
|
|
}
|
|
|
|
</script> -->
|
|
|
|
<!-- <script>
|
|
function taille2() {
|
|
var entree2 = document.getElementById("entree");
|
|
|
|
var parentDOM = document.getElementById("content");
|
|
var testTarget = parentDOM.getElementsByClassName("changingfontsize")[0];
|
|
testTarget.style.fontSize = entree2.value / 100 + "rem"
|
|
}
|
|
|
|
</script> -->
|
|
|
|
<script>
|
|
function taille() {
|
|
var entree = document.getElementById("entree");
|
|
var entree2 = document.getElementById("entree");
|
|
var elementpage = document.getElementById("changingfontsize");
|
|
elementpage.style.fontSize = entree.value / 100 + "rem"
|
|
|
|
var parentDOM = document.getElementById("content");
|
|
var testTarget = parentDOM.getElementsByClassName("changingfontsize")[0];
|
|
testTarget.style.fontSize = entree2.value / 130 + "rem"
|
|
}
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
</html> |