mirzaev/pechatalka.mjs
mirzaev
/
pechatalka.mjs
1
0
Fork 0
Code Issues Pull Requests Releases 1 Activity

added README

This commit is contained in:
Arsen Mirzaev Tatyano-Muradovich 2025-07-06 00:27:25 +07:00
parent b46a729465
commit 3db6b41a7d
1 changed files with 51 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
README.md
View File

@ -1,3 +1,53 @@
# pechatalka.mjs
Module with merch and print constructor for typrographies
Constructor for typographies
## Example
```html
<section id="title" class="unselectable">
<h1>Pechatalka</h1>
<small>Svoboda Work Union</small>
</section>
<section id="pechatalka">
<section class="system">
<input id="pechatalka_add_image" type="file" name="images" accept="image/png, image/jpeg, image/webp" multiple="false" onchange="document.getElementById('pechatalka')?.pechatalka.image(this.files[0]);" />
<input id="pechatalka_background" type="color" name="background" value="#ffffff" oninput="
document.getElementById('pechatalka')?.querySelector('label[for=\'pechatalka_background\']>div.color')?.style.setProperty('--color', event.target.value); document.getElementById('pechatalka')?.pechatalka.canvas.style.setProperty('background-color', event.target.value);" />
</section>
<nav class="tools rounded unselectable">
<label class="button" for="pechatalka_add_image"><i class="icon plus"></i></label>
<label class="button" for="pechatalka_background">
<div class="color"></div>
</label>
</nav>
<section class="canvas pin unselectable">
<label class="button add" for="pechatalka_add_image"><i class="icon plus"></i></label>
<div class="display"></div>
</section>
<section class="result unselectable">
<button class="print rounded"><i class="icon printer"></i></button>
<span class="cost">0</span>
<button class="buy rounded"></button>
</section>
</section>
```
```js
import("/js/modules/pechatalka.mjs").then((module) => {
// Initializing the instance
new module.gallery(
document.getElementById("wrap"),
document.getElementById("images"),
document.getElementById("gallery"),
true
);
});
```
CSS in the `/index.css` file
<p float="left">
<img src="preview/1.gif" width="30%" />
</p>