Une application en ligne pour créer des feuilles de calcul collaboratives à partir d'un serveur Ethercalc
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
digicalc/index.html

102 lines
4.8 KiB

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=5, minimal-ui, viewport-fit=cover">
<meta name="keywords" content="digital learning, blended learning, language teaching tools, collaboratif, pad, éducation">
<meta name="description" content="Digicalc est une application en ligne proposée par La Digitale qui permet de créer des feuilles de calcul collaboratives. Elle repose sur le projet libre Ethercalc.">
<meta name="robots" content="index, no-follow" />
<meta name="theme-color" content="#00ced1">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="HandheldFriendly" content="true">
<meta property="og:title" content="Digicalc by La Digitale">
<meta property="og:description" content="Digicalc est une application en ligne proposée par La Digitale qui permet de créer des feuilles de calcul collaboratives. Elle repose sur le projet libre Ethercalc.">
<meta property="og:type" content="website" />
<meta property="og:url" content="https://ladigitale.dev/digicalc" />
<meta property="og:image" content="https://ladigitale.dev/digicalc/img/digicalc.png" />
<meta property="og:locale" content="fr_FR" />
<title>Digicalc by La Digitale</title>
<link rel="stylesheet" href="./css/destyle.css">
<link rel="stylesheet" href="./css/style.css?v=1658999736478">
<link rel="apple-touch-icon" href="./img/apple-touch-icon.png">
<link rel="icon" href="./img/favicon.png">
</head>
<body>
<main>
<div id="conteneur-chargement">
<div id="chargement">
<div class="spinner">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<div id="conteneur">
<div id="contenu">
<h1><span>Digicalc</span> <span>by La Digitale</span></h1>
<div>
<p><strong>Digicalc</strong> permet de créer des <strong>feuilles de calcul collaboratives</strong> pour vos travaux en présence ou à distance.</p>
<span id="bouton" role="button" tabindex="0">Créer un document</span>
</div>
</div>
<div id="credits">
<p><a href="https://opencollective.com/ladigitale" target="_blank" rel="noreferrer">Je souhaite apporter mon soutien ❤.</a></p>
<p>2022 - <a href="https://ladigitale.dev" target="_blank" rel="noreferrer">La Digitale</a> - <a href="https://codeberg.org/ladigitale/digicalc" target="_blank" rel="noreferrer">Code source</a> - <span class="hub"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#001d1d" width="36px" height="36px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg></span></p>
</div>
</div>
</main>
<div id="hub">
<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff" width="36px" height="36px"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></span>
<iframe src="https://ladigitale.dev/hub.html"></iframe>
</div>
<script>
document.querySelector('#bouton').addEventListener('click', function (e) {
document.querySelector('#conteneur-chargement').style.display = 'block';
var xhr = new XMLHttpRequest();
xhr.onload = function () {
if (xhr.readyState === xhr.DONE && xhr.status === 200) {
if (xhr.responseText === 'erreur') {
alert('Erreur de communication avec le serveur.');
document.querySelector('#conteneur-chargement').style.display = 'none';
} else {
window.location = xhr.responseText;
}
} else {
alert('Erreur lors de la création de la feuille de calcul.');
document.querySelector('#conteneur-chargement').style.display = 'none';
}
};
xhr.open('POST', 'generer_document.php', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send('creation=calc');
});
document.querySelector('#credits .hub').addEventListener('click', function (e) {
document.querySelector('#hub').classList.add('ouvert');
});
document.querySelector('#hub span').addEventListener('click', function (e) {
document.querySelector('#hub').classList.remove('ouvert');
});
window.addEventListener('load', function () {
setTimeout(function () {
document.querySelector('#conteneur-chargement').style.display = 'none';
}, 300);
});
</script>
</body>
</html>