diff --git a/v1-com-officielle/cutter/cutter.css b/v1-com-officielle/cutter/cutter.css new file mode 100644 index 0000000..a2f7b69 --- /dev/null +++ b/v1-com-officielle/cutter/cutter.css @@ -0,0 +1,72 @@ +/*=============Typo*/ +@font-face { + font-family: 'lineal'; + src: url('../typo/Lineal-Heavy.ttf'); +} + +@font-face { + font-family: 'pressStart2P'; + src: url('../typo/PressStart2P-Regular.ttf'); +} + +@font-face { + font-family: 'velvelyne'; + src: url('../typo/Velvelyne-Light.ttf') format('truetype'); + font-weight:lighter; +} + +@font-face { + font-family: 'velvelyne'; + src:url('../typo/Velvelyne-Bold.ttf') format('truetype'); + font-weight: bold; +} + +/*============General*/ + +body, html { + padding: 0; + margin: 0; +} + +body { + width: 100vw; + height: 100vh; + overflow: hidden; +} + +:root { + --back-color: black; + --main-color: white; + --accent-color: #3CFF00; + --neon-color: #3CFF00; + + color: var(--main-color); + font-size: 1rem; + background: var(--back-color); + font-family: 'velvelyne', sans-serif; + font-weight: bold; +} + +body > *{ + width: 100%; + height: 100%; + box-sizing: border-box; + padding: 15px; +} + +#welcome-panel { + text-align: center; +} + +h1 { + font-family: 'lineal', sans-serif; + font-weight: bolder; +} + +#ui-canvas { + display: block; + height: 1350px; + width: 1080px; + margin-left: auto; + margin-right: auto; +} diff --git a/v1-com-officielle/cutter/cutter.js b/v1-com-officielle/cutter/cutter.js new file mode 100644 index 0000000..3a9970d --- /dev/null +++ b/v1-com-officielle/cutter/cutter.js @@ -0,0 +1,42 @@ +const CANVAS = document.getElementById("ui-canvas") +const UI_CUTTER = new Image(CANVAS) +const FORM = document.getElementById("cutter-form") + +async function updateFromForm(){ + let data = new FormData(FORM) + + let image = data.get("image") + if(image.size > 0){ + if(UI_CUTTER.currentImageFile != image){ + await UI_CUTTER.setImage(image) + UI_CUTTER.clearGlitch() + } + } else { + UI_CUTTER.clearImage() + } + + document.getElementById("welcome-panel").hidden = image.size > 0 + document.getElementById("glitch-panel").hidden = image.size == 0 + + UI_CUTTER.render() +} + +FORM.addEventListener("submit", e => { + e.preventDefault() + updateFromForm() + }) + +FORM.addEventListener("reset", e => { + FORM.elements["image"].value = "" + updateFromForm() + }) + +document.getElementById("download-btn").addEventListener("click", async e => { + e.preventDefault(); + let data = await UI_CUTTER.toBlob("image/jpeg", 1); + let a = document.createElement('a') + a.href = URL.createObjectURL(data) + a.download = UI_CUTTER.currentImageFile.name + a.click() + setTimeout(() => URL.revokeObjectURL(a.href), 10000) +}) diff --git a/v1-com-officielle/cutter/index.html b/v1-com-officielle/cutter/index.html new file mode 100644 index 0000000..b04d2a9 --- /dev/null +++ b/v1-com-officielle/cutter/index.html @@ -0,0 +1,29 @@ + + + + + + + Insta Ninja + + + +
+
+

Insta Ninja

+

Séléctionne un photo pour la découper
en une grille au format du feed insta

+ + +
+ +
+ + + + diff --git a/v1-com-officielle/src/data/peopleData.js b/v1-com-officielle/src/data/peopleData.js index 389b7ab..e3db1d9 100644 --- a/v1-com-officielle/src/data/peopleData.js +++ b/v1-com-officielle/src/data/peopleData.js @@ -129,7 +129,7 @@ export async function loadPeopleData() { dateInfo: selectedPouet.created_at, type: "link", author: displayName, - caption: textInfos.title + '.liens', + caption: textInfos.title + '.plus', links: textInfos.links, description: textInfos.content, isSelected: false diff --git a/v1-com-officielle/vite.config.js b/v1-com-officielle/vite.config.js index aee2945..f22bde6 100644 --- a/v1-com-officielle/vite.config.js +++ b/v1-com-officielle/vite.config.js @@ -20,6 +20,7 @@ export default defineConfig({ input: { main: path.resolve(import.meta.dirname, 'index.html'), glitcher: path.resolve(import.meta.dirname, 'glitcher/index.html'), + cutter: path.resolve(import.meta.dirname, 'cutter/index.html') }, }, }