<!DOCTYPE html> <html> <head> <title>Papier</title> <link rel="stylesheet" type="text/css" href="jquery/jquery-ui-base.min.css"> <link rel="stylesheet" type="text/css" href="spectrum-1.8.1/spectrum.css"> <link rel="stylesheet" type="text/css" href="papier.css"> <script type="text/javascript" src="jquery/jquery-2.2.4.min.js"></script> <script type="text/javascript" src="jquery/jquery-ui-1.12.1.min.js"></script> <script type="text/javascript" src="spectrum-1.8.1/spectrum.js"></script> <script type="text/javascript" src="spectrum-1.8.1/i18n/jquery.spectrum-fr.js"></script> <script type="text/javascript" src="papier.js"></script> </head> <body onload="initialisation();"> <div id="widget"> <div class="onglet"> <!-- Définition des onglets !--> <button class="lien_onglet" onclick="onglet(event, 'uni')">Uni</button> <button class="lien_onglet" onclick="onglet(event, 'seyes')">Seyes</button> <button class="lien_onglet" onclick="onglet(event, 'maternelle')">Maternelle</button> <button class="lien_onglet" onclick="onglet(event, 'guide_ane')">Guide Âne</button> <button class="lien_onglet" onclick="onglet(event, 'dys')">Dys</button> <button class="lien_onglet" onclick="onglet(event, 'quadrillage')">Quadrillage</button> <button class="lien_onglet" onclick="onglet(event, 'mm')">Millimétré</button> <button class="lien_onglet" onclick="onglet(event, 'pointé')">Pointé</button> <button class="lien_onglet" onclick="onglet(event, 'aide')">?</button> </div> <!-- Contenu de l'onglet 1 !--> <div id="uni" class="contenu_onglet"> <!-- Boîte de commandes à droite !--> <div class="boite_droite"> <!-- Bouton générateur !--> <button id="bouton_générer" class="bouton_commande"></button> <!-- Paramètres de la page !--> <div class="parametres"> <!-- Choix du format de page !--> <div class="etiquette haut"><span>Format de page</span><br></div> <input type="radio" id="4/3" name="taille_page_uni" value="4/3">4/3 <input type="radio" checked id="16/9" name="taille_page_uni" value="16/9">16/9 </div> </div> <!-- Boîte des options à gauche !--> <div class="boite_gauche"> <!-- Option 1 !--> <div class="etiquette haut"><span>Couleur</span></div> <div class='palette'> <input type='text' id="palette_fond_uni"/> <!-- Couleur du fond !--> </div> </div> </div> <!-- Contenu de l'onglet 2 !--> <div id="seyes" class="contenu_onglet"> <!-- Boîte de commandes à droite !--> <div class="boite_droite"> <!-- Bouton générateur !--> <button id="bouton_générer" class="bouton_commande"></button> <!-- Paramètres de la page !--> <div class="parametres"> <!-- Choix du format de page !--> <div class="etiquette haut"><span>Format de page</span></div> <input type="radio" id="4/3" name="taille_page_seyes" value="4/3">4/3 <input type="radio" checked id="16/9" name="taille_page_seyes" value="16/9">16/9 <!-- Marge ? !--> <div class="etiquette milieu"><input type="checkbox" id="marge_seyes"><span>Marge</span></div> <input type="text" id="taille_marge_seyes" class="taille"> <div id="curseur_position_marge_seyes" class="potentiometre" ></div> </div> </div> <!-- Boîte des options à gauche !--> <div class="boite_gauche"> <!-- Option 1 !--> <div class="etiquette haut"><span>Interligne</span></div> <input type="text" id="taille_carreau_seyes" class="taille"> <div id="curseur_seyes" class="potentiometre" ></div> <!-- Option 2 !--> <div class="etiquette milieu"><span>Couleurs des lignes/du fond</span></div> <div class='palette'> <input type='text' id="palette_seyes_1"/> <!-- Ligne Horizontale !--> <input type='text' id="palette_seyes_2"/><!-- Ligne Verticale !--> <input type='text' id="palette_seyes_3"/><!-- Interligne !--> <input type='text' id="palette_fond_seyes" class='palette'/> <!-- Couleur du fond !--> </div> <!-- Option 3 !--> <div class="etiquette milieu"><span>Épaisseur des lignes</span></div> <input type="text" id="épaisseur_seyes" readonly class="taille"> <div id="curseur_épaisseur_seyes" class="potentiometre" ></div> </div> </div> <!-- Contenu de l'onglet 3 !--> <div id="maternelle" class="contenu_onglet"> <!-- Boîte de commandes à droite !--> <div class="boite_droite"> <!-- Bouton générateur !--> <button id="bouton_générer" class="bouton_commande"></button> <!-- Paramètres de la page !--> <div class="parametres"> <!-- Choix du format de page !--> <div class="etiquette haut"><span>Format de page</span></div> <input type="radio" id="4/3" name="taille_page_maternelle" value="4/3">4/3 <input type="radio" checked id="16/9" name="taille_page_maternelle" value="16/9">16/9 <!-- Marge ? !--> <div class="etiquette milieu"><input type="checkbox" id="marge_maternelle"><span>Marge</span></div> <input type="text" id="taille_marge_maternelle" class="taille"> <div id="curseur_position_marge_maternelle" class="potentiometre" ></div> </div> </div> <!-- Boîte des options à gauche !--> <div class="boite_gauche"> <!-- Option 1 !--> <div class="etiquette haut"><span>Interligne</span></div> <input type="text" id="taille_carreau_maternelle" class="taille"> <div id="curseur_maternelle" class="potentiometre" ></div> <!-- Option 2 !--> <div class="etiquette milieu"><span>Couleurs des lignes/du fond</span></div> <div class='palette'> <input type='text' id="palette_maternelle_1"/> <!-- Ligne Horizontale !--> <input type='text' id="palette_maternelle_2"/><!-- Interligne !--> <input type='text' id="palette_fond_maternelle" class='palette'/> <!-- Couleur du fond !--> </div> <!-- Option 3 !--> <div class="etiquette milieu"><span>Épaisseur des lignes</span></div> <input type="text" id="épaisseur_maternelle" readonly class="taille"> <div id="curseur_épaisseur_maternelle" class="potentiometre" ></div> </div> </div> <!-- Contenu de l'onglet 3 !--> <div id="guide_ane" class="contenu_onglet"> <!-- Boîte de commandes à droite !--> <div class="boite_droite"> <!-- Bouton générateur !--> <button id="bouton_générer" class="bouton_commande"></button> <!-- Paramètres de la page !--> <div class="parametres"> <!-- Choix du format de page !--> <div class="etiquette haut"><span>Format de page</span></div> <input type="radio" id="4/3" name="taille_page_guide_ane" value="4/3">4/3 <input type="radio" checked id="16/9" name="taille_page_guide_ane" value="16/9">16/9 <div class="etiquette milieu"><input type="checkbox" id="marge_guide_ane"><span>Marge</span></div> <input type="text" id="taille_marge_guide_ane" class="taille"> <div id="curseur_position_marge_guide_ane" class="potentiometre" ></div> </div> </div> <!-- Boîte des options à gauche !--> <div class="boite_gauche"> <!-- Option 1 !--> <div class="etiquette haut"><span>Interligne</span></div> <input type="text" id="interligne_guide_ane" class="taille"> <div id="curseur_guide_ane" class="potentiometre" ></div> <!-- Option 2 !--> <div class="etiquette milieu"><span>Couleurs des lignes/du fond</span></div> <div class='palette'> <input type='text' id="palette_fond_guide_ane"/> <!-- Couleur du fond !--> <input type='text' id="palette_ligne_guide_ane"/> <!-- Couleur des lignes !--> </div> <!-- Option 3 !--> <div class="etiquette milieu"><span>Épaisseur des lignes</span></div> <input type="text" id="épaisseur_guide_ane" readonly class="taille"> <div id="curseur_épaisseur_guide_ane" class="potentiometre" ></div> </div> </div> <!-- Contenu de l'onglet 4 !--> <div id="dys" class="contenu_onglet"> <!-- Boîte de commandes à droite !--> <div class="boite_droite"> <!-- Bouton générateur !--> <button id="bouton_générer" class="bouton_commande"></button> <!-- Paramètres de la page !--> <div class="parametres"> <!-- Choix du format de page !--> <div class="etiquette haut"><span>Format de page</span></div> <input type="radio" id="4/3" name="taille_page_dys" value="4/3">4/3 <input type="radio" checked id="16/9" name="taille_page_dys" value="16/9">16/9 </div> </div> <!-- Boîte des options à gauche !--> <div class="boite_gauche"> <!-- Option 1 !--> <div class="etiquette haut"><span>Interligne centrale</span></div> <input type="text" id="taille_carreau_dys" class="taille"> <div id="curseur_dys" class="potentiometre" ></div> <!-- Option 2 !--> <div class="etiquette milieu"><span>Couleur du fond</span></div> <div class='palette'> <input type='text' id="palette_fond_dys" class='palette'/> <!-- Couleur du fond !--> </div> <!-- Option 3 !--> <div class="etiquette milieu"><span>Épaisseur des lignes</span></div> <input type="text" id="épaisseur_dys" readonly class="taille"> <div id="curseur_épaisseur_dys" class="potentiometre" ></div> </div> </div> <!-- Contenu de l'onglet 5 !--> <div id="quadrillage" class="contenu_onglet"> <!-- Boîte de commandes à droite !--> <div class="boite_droite"> <!-- Bouton générateur !--> <button id="bouton_générer" class="bouton_commande"></button> <!-- Paramètres de la page !--> <div class="parametres"> <!-- Choix du format de page !--> <div class="etiquette haut"><span>Format de page</span></div> <input type="radio" id="4/3" name="taille_page_quadrillage" value="4/3">4/3 <input type="radio" checked id="16/9" name="taille_page_quadrillage" value="16/9">16/9 </div> </div> <!-- Boîte des options à gauche !--> <div class="boite_gauche"> <!-- Option 1 !--> <div class="etiquette haut"><span>Quadrillage</span></div> <input type="text" id="taille_carreau_quadrillage" class="taille"> <div id="curseur_quadrillage" class="potentiometre" ></div> <!-- Option 2 !--> <div class="etiquette milieu"><span>Couleurs des lignes/du fond</span></div> <div class='palette'> <input type='text' id='palette_quadrillage'/><!-- Ligne !--> <input type='text' id="palette_fond_quadrillage" class='palette'/> <!-- Couleur du fond !--> </div> <!-- Option 3 !--> <div class="etiquette milieu"><span>Épaisseur des lignes</span></div> <input type="text" id="épaisseur_quadrillage" readonly class="taille"> <div id="curseur_épaisseur_quadrillage" class="potentiometre" ></div> </div> </div> <!-- Contenu de l'onglet 6 !--> <div id="mm" class="contenu_onglet"> <!-- Boîte de commandes à droite !--> <div class="boite_droite"> <!-- Bouton générateur !--> <button id="bouton_générer" class="bouton_commande"></button> <!-- Paramètres de la page !--> <div class="parametres"> <!-- Choix du format de page !--> <div class="etiquette haut"><span>Format de page</span></div> <input type="radio" id="4/3" name="taille_page_mm" value="4/3">4/3 <input type="radio" checked id="16/9" name="taille_page_mm" value="16/9">16/9 </div> </div> <!-- Boîte des options à gauche !--> <div class="boite_gauche"> <!-- Option 1 !--> <div class="etiquette haut"><span>Interligne</span></div> <input type="text" id="taille_carreau_mm" class="taille"> <div id="curseur_mm" class="potentiometre" ></div> <!-- Option 2 !--> <div class="etiquette milieu"><span>Couleurs des lignes/du fond</span></div> <div class='palette'> <input type='text' id='palette_mm_ligne'/><!-- Ligne Horizontale et Verticale!--> <input type='text' id='palette_mm_interligne'/><!-- Interligne !--> <input type='text' id="palette_fond_mm" class='palette'/> <!-- Couleur du fond !--> </div> <!-- Option 3 !--> <div class="etiquette milieu"><span>Épaisseur des lignes</span></div> <input type="text" id="épaisseur_mm" readonly class="taille"> <div id="curseur_épaisseur_mm" class="potentiometre" ></div> </div> </div> <!-- Contenu de l'onglet 7 !--> <div id="pointé" class="contenu_onglet"> <!-- Boîte de commandes à droite !--> <div class="boite_droite"> <!-- Bouton générateur !--> <button id="bouton_générer" class="bouton_commande"></button> <!-- Paramètres de la page !--> <div class="parametres"> <!-- Choix du format de page !--> <div class="etiquette haut"><span>Format de page</span></div> <input type="radio" id="4/3" name="taille_page_pointé" value="4/3">4/3 <input type="radio" checked id="16/9" name="taille_page_pointé" value="16/9">16/9 <!-- Choix du type de point !--> <div class="etiquette milieu"><span>Type de point</span></div> <input type="radio" checked id="point" name="type_point_page_pointé" value="point"><span>•</span> <input type="radio" id="plus" name="type_point_page_pointé" value="plus"><span>+</span> <input type="radio" id="croix" name="type_point_page_pointé" value="croix"><span>x</span> <!-- Choix du Maillage !--> <div class="etiquette milieu"><span>Type de Maillage</span></div> <input type="radio" checked id="pointé_carré" name="type_papier_pointé" value="pointé_carré"><span><b style="font-size:20pt">∷</b></span> <input type="radio" id="pointé_iso" name="type_papier_pointé" value="pointé_iso"><span><b style="font-size:20pt">∴</b></span> </div> </div> <!-- Boîte des options à gauche !--> <div class="boite_gauche"> <!-- Option 1 !--> <div class="etiquette haut"><span>Maillage</span></div> <input type="text" id="taille_pointé" class="taille"> <div id="curseur_pointé" class="potentiometre" ></div> <!-- Option 2 !--> <div class="etiquette milieu"><span>Couleur des points/du fond</span></div> <div class='palette'> <input type='text' id='palette_pointé'/> <!-- Couleur des points !--> <input type='text' id="palette_fond_pointé"/> <!-- Couleur du fond !--> </div> <!-- Option 3 !--> <div class="etiquette milieu"><span>Épaisseur des points</span></div> <input type="text" id="épaisseur_pointé" readonly class="taille"> <div id="curseur_épaisseur_pointé" class="potentiometre" ></div> </div> </div> <!-- Contenu de l'onglet 8 !--> <div id="aide" class="contenu_onglet"> <!-- Aide ponctuelle !--> <h1>PAPIER</h1> <h2>Application pour Open-Sankoré / OpenBoard</h2> <p> <li>Cliquer sur les onglets pour choisir le papier à mettre en fond de page.</li> <li>Modifier les paramètres du papier et visualisez le résultat dans la fenêtre d'apeçu.</li> <li>Cliquer sur le bouton <button class="petit_bouton_commande" width="10" height="10" disabled></button> pour générer le fond.</li> </p> <p style="text-align:center">Développée par <a href="https://openedu.fr/" target="blank">F. Le Cléac'h</a> <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/fr/legalcode" target="blank"><img src="images/cc-by-nc-sa-min.svg"></a> <a href="rev.txt" target="blank">Version 2.5.4</a> Novembre 2020 </p> </div> <canvas id="aperçu" width="300px" height="200px">Votre navigateur ne supporte pas le CANVAS</canvas> <!-- fenêtre d'aperçu dans l'onglet !--> <canvas id="feuille" width="1820px" height="1024px">Votre navigateur ne supporte pas le CANVAS</canvas> <!-- page finale 4/3 ou 16/9 !--> </div> </body> </html>