fhenry2/bd-chapril
fhenry2/bd-chapril
1
0
Fork 0
forked from gee/bd-chapril
Code Pull Requests Activity

Compare commits

base: fhenry2:4b2e78015cc5557186b48b6d3edef26231ab5a0f
Branches Tags
fhenry2:main
fhenry2:with-banner
fhenry2:dev
gee:main
fhenry2:1.1
...
compare: fhenry2:b4d9baee033f16e1b7ac78eb11feb788d5769709
Branches Tags
fhenry2:with-banner
fhenry2:dev
fhenry2:main
gee:main
fhenry2:1.1

2 Commits
4b2e78015c ... b4d9baee03

Author SHA1 Message Date
fhenry2
b4d9baee03
Added key symboles 2025-01-03 20:33:55 +01:00
fhenry2
8af18521fc
Cleaned document 2025-01-03 16:16:25 +01:00
9 changed files with 252 additions and 44 deletions
Show Stats Expand all files Collapse all files

9
bdchapril.css
View File

@ -223,6 +223,7 @@ padding: 0;
footer
{
margin-top: 10px;
margin-left: 244px;
width: 100%;
text-align: center;
color: #444444;
@ -231,7 +232,8 @@ padding-bottom: 10px;
footer p
{
display: inline;
display: block;
text-align: justify;
}
footer a
@ -266,3 +268,8 @@ display : inline;
input.file {
display:none;
}
.keySymbol {
width: 1rem;
height: auto;
}

15
images/delete.svg Normal file
View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="1em"
height="1em"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg" transform="rotate(180, 0, 0)">
<title>Supprimer</title>
<path d="M11.7071 15.2938C11.3166 14.9033 11.3166 14.2701 11.7071 13.8796L13.5839 12.0027L11.7079 10.1267C11.3174 9.73617 11.3174 9.103 11.7079 8.71248C12.0984 8.32195 12.7316 8.32195 13.1221 8.71248L14.9982 10.5885L16.8796 8.70702C17.2702 8.3165 17.9033 8.3165 18.2938 8.70702C18.6844 9.09755 18.6844 9.73071 18.2938 10.1212L16.4124 12.0027L18.293 13.8833C18.6835 14.2739 18.6835 14.907 18.293 15.2975C17.9025 15.6881 17.2693 15.6881 16.8788 15.2975L14.9982 13.4169L13.1213 15.2938C12.7308 15.6843 12.0976 15.6843 11.7071 15.2938Z"
fill="#0F0F0F"/>
<path fill-rule="evenodd"
clip-rule="evenodd"
d="M5.6131 5.14653C6.18186 4.42266 7.05148 4 7.97206 4H20C21.6568 4 23 5.34315 23 7V17C23 18.6569 21.6568 20 20 20H7.97206C7.05148 20 6.18186 19.5773 5.6131 18.8535L1.68453 13.8535C0.829805 12.7656 0.829807 11.2344 1.68453 10.1465L5.6131 5.14653ZM7.97206 6C7.6652 6 7.37533 6.14089 7.18574 6.38218L3.25717 11.3822C2.97226 11.7448 2.97226 12.2552 3.25717 12.6178L7.18574 17.6178C7.37533 17.8591 7.6652 18 7.97206 18H20C20.5523 18 21 17.5523 21 17V7C21 6.44772 20.5523 6 20 6H7.97206Z"
fill="#0F0F0F"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

24
images/mouse-wheel-down.svg Normal file
View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="1em"
height="1em"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<title>Roulette bas</title>
<path d="M 6,4
A 2,2 180 0 1 10,4
L 10,16
A 2,2 180 0 1 6,16
L 6,4 Z"
stroke="#000000"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"/>
<polyline points="14,7
14,13
16,10"
stroke="#000000"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 679 B

24
images/mouse-wheel-up.svg Normal file
View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="1em"
height="1em"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<title>Roulette bas</title>
<path d="M 6,4
A 2,2 180 0 1 10,4
L 10,16
A 2,2 180 0 1 6,16
L 6,4 Z"
stroke="#000000"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"/>
<polyline points="16,10
14,7
14,13"
stroke="#000000"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 679 B

23
images/square-arrow-down.svg Normal file
View File

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="1em"
height="1em"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<title>Touche bas</title>
<rect x="2"
y="2"
width="16"
height="16"
rx="2"
stroke="#000000"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M 10,6 V 14 M 10,14 L 7,11 M 10,14 L 13,11"
stroke="#000000"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 727 B

23
images/square-arrow-left.svg Normal file
View File

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="1em"
height="1em"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<title>Touche gauche</title>
<rect x="2"
y="2"
width="16"
height="16"
rx="2"
stroke="#000000"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M 14,10 L 6,10 M 6,10 L 9,13 M 6,10 L 9,7"
stroke="#000000"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 729 B

22
images/square-arrow-right.svg Normal file
View File

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="1em"
height="1em"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<title>Touche droite</title>
<rect x="2"
y="2"
width="16"
height="16"
rx="2"
stroke="#000000"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M 6,10 L 14,10 M 14,10 L 11,13 M 14,10 L 11,7"
stroke="#000000" stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 720 B

23
images/square-arrow-up.svg Normal file
View File

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="1em"
height="1em"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<title>Touche haut</title>
<rect x="2"
y="2"
width="16"
height="16"
rx="2"
stroke="#000000"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M 10,14 L 10,6 M 10,6 L 13,9 M 10,6 L 7,9"
stroke="#000000"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 727 B

133
index.html
View File

@ -1,78 +1,126 @@
<!doctype html>
<html lang="fr" manifest="data/bdchapril.appcache">
<head>
<meta charset="utf-8"/>
<meta name="description" content="Un générateur de BD" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="bdchapril.css" />
<link rel="manifest" href="manifest.json" />
<title>BD Chapril, générateur de BD de l'April</title>
<meta name="description" content="Un générateur de BD"/>
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="bdchapril.css"/>
<link rel="manifest" href="manifest.json"/>
<title>BD Chapril, générateur de BD de l’April</title>
</head>
<body>
<!-- ajout conteneur global -->
<div id="wrapper">
<div id="focusImg"><img id="bigImg" />
<div id="focusImg">
<img id="bigImg"/>
</div>
<!-- tableau de bord -->
<div id="tableauDeBord">
<div id="menuContainer">
<h1><span class="hidden">BD Chapril</span><img id="logo" src="images/banniere_bdchapril.png" width="230"
height="162" alt="Banniere du générateur"></h1>
<p class="hidden">Générateur de BD de l'April</p>
<h1>
<span class="hidden">BD Chapril</span>
<img id="logo"
src="images/banniere_bdchapril.png"
width="230"
height="162"
alt="Banniere du générateur">
</h1>
<p class="hidden">Générateur de BD de l’April</p>
<div id="lib" class="rc">
<div><label for="newText"><span class="hidden">Saisissez votre bulle</span></label> <input
type="text" id="newText" placeholder="Saisissez votre bulle"/></div>
<div>
<label for="newText">
<span class="hidden">Saisissez votre bulle</span>
</label>
<input type="text"
id="newText"
placeholder="Saisissez votre bulle"/>
</div>
<div class="upload">
<input type="file" accept="image/*" id="imageFileInput" class="file" multiple/>
<h2 class="save"><a id="uploadSave" href="#" title="Importer une ou plusieurs images">Importer une image</a></h2>
<input type="file"
accept="image/*"
id="imageFileInput"
class="file"
multiple/>
<h2 class="save">
<a id="uploadSave"
href="#"
title="Importer une ou plusieurs images">Importer une image</a>
</h2>
</div>
</div>
</div>
<div id="hiddenObjs">
<div id="textTool" class="rc mini textTool" title="Ajouter du texte">T</div>
<div id="textTool"
class="rc mini textTool"
title="Ajouter du texte">T</div>
<div id="instructs" class="rc instructions">
<h2>Instructions</h2>
<ul>
<li><em>Flêche bas</em>: rétrécir</li>
<li><em>Flêche haut</em>: agrandir</li>
<li><em>Gauche/Droite</em>: retournement horizontal</li>
<li><em>Del</em>: effacer l'objet</li>
<li>
<img class="keySymbol"
src="images/square-arrow-down.svg"
type="image/svg+xml"/>
<em>/</em>
<img class="keySymbol"
src="images/mouse-wheel-up.svg"
type="image/svg+xml"/>: rétrécir</li>
<li>
<img class="keySymbol"
src="images/square-arrow-up.svg"
type="image/svg+xml"/>
<em>/</em>
<img class="keySymbol"
src="images/mouse-wheel-down.svg"
type="image/svg+xml"/>: agrandir</li>
<li>
<img class="keySymbol"
src="images/square-arrow-left.svg"
type="image/svg+xml"/>
<em>/</em>
<img class="keySymbol"
src="images/square-arrow-right.svg"
type="image/svg+xml"/>: retournement horizontal</li>
<li><img class="keySymbol"
src="images/delete.svg"
type="image/svg+xml"/>: effacer l’objet</li>
</ul>
</div>
</div>
<div id="toolbar" class="rcBottom">
<h2 class="save"><a id="toolbarImageSave" href="#" title="Enregistrer l’image">Enregistrer votre
image</a></h2>
<h2 class="save">
<a id="toolbarImageSave"
href="#"
title="Enregistrer l’image">Enregistrer votre image</a>
</h2>
<h2 class="last">Redimensionner la fenêtre</h2>
<br />
<p> <input type="text" id="newWidth" placeholder="Largeur" /> x <input type="text" id="newHeight"
placeholder="Hauteur" /> </p>
<br />
<h2 class="save"><a id="resizeCanvas" href="#" class="save">Redimensionner</a> </h2>
<br/>
<p><input type="text"
id="newWidth"
placeholder="Largeur"/> x <input type="text"
id="newHeight"
placeholder="Hauteur"/></p>
<br/>
<h2 class="save">
<a id="resizeCanvas"
href="#"
class="save">Redimensionner</a>
</h2>
</div>
</div>
<!-- fin tableau de bord -->
<div id="cscreen">
<canvas class="rc" id="c" crossorigin="anonymous" width="800" height="600" tabindex=0>
Le générateur du GKND a besoin d'un navigateur récent et de javascript pour fonctionner.
<canvas class="rc"
id="c"
crossorigin="anonymous"
width="800"
height="600"
tabindex=0>
<p>Le générateur du GKND a besoin d'un navigateur récent et de javascript pour fonctionner.</p>
</canvas>
</div>
<footer>
<p>Les dessins sont l'œuvre de <a href="https://ptilouk.net"><em>Gee</em></a> et sont diffusés sous
licence Creative Commons By-Sa.<br />
<em>BD Chapril</em> est une adaptation de <a href="https://framalab.org/gknd-creator/">GéGé</a>,
lui-même une adaptation de <a href="https://github.com/willianpc/comicgen"
title="Code source de l'auteur original sur Github">Comic Gen de Willian Carvalho</a> réalisée
par Cyrille Largillier pour <a href="https://framasoft.org/"
title="Vous ne connaissez pas encore Framasoft ?">Framasoft</a>.</p>
<p>Les dessins sont l'œuvre de <a href="https://ptilouk.net/"><em>Gee</em></a> et sont diffusés sous licence Creative Commons By-Sa.</p>
<p><em>BD Chapril</em> est une adaptation de <a href="https://framalab.org/gknd-creator/">GéGé</a>, lui-même une adaptation de <a href="https://github.com/willianpc/comicgen" title="Code source de l'auteur original sur Github">Comic Gen de Willian Carvalho</a> réalisée par Cyrille Largillier pour <a href="https://framasoft.org/" title="Vous ne connaissez pas encore Framasoft ?">Framasoft</a>.</p>
</footer>
<script type="module" src="bdchapril.js" async="true"></script>
<script type="text/javascript" src="lib/jquery-3.7.1.min.js"></script>
@ -81,5 +129,4 @@
<script type="text/javascript" src="lib/comicgen.js"></script>
</div>
</body>
</html>