diff --git a/v1-com-officielle/cutter/cutter.css b/v1-com-officielle/cutter/cutter.css index 105328d..809241a 100644 --- a/v1-com-officielle/cutter/cutter.css +++ b/v1-com-officielle/cutter/cutter.css @@ -54,15 +54,40 @@ body > *{ padding: 15px; } +/*===================Animation*/ +@keyframes blink { + 0% { color: var(--accent-color);} + 15% { color: var(--main-color);} + 35% { color: var(--main-color);} + 50% { color: var(--accent-color);} + 65% { color: var(--main-color);} + 85% { color: var(--main-color);} + 100% { color: var(--accent-color);} +} + +/*===================Layout*/ #welcome-panel { text-align: center; } +#welcome-panel strong{ + font-family:'lineal'; + font-weight: normal; + font-size: 22.2px; +} + h1 { font-family: 'lineal', sans-serif; font-weight: bolder; } +h2{ + font-family: 'pressStart2P'; + font-size: 13.12px; + font-weight: normal; + animation: blink 1.61s infinite; +} + #ui-canvas { display: block; height: 1350px; diff --git a/v1-com-officielle/cutter/cutter.js b/v1-com-officielle/cutter/cutter.js index 9537dc6..3de6170 100644 --- a/v1-com-officielle/cutter/cutter.js +++ b/v1-com-officielle/cutter/cutter.js @@ -20,12 +20,12 @@ IMAGE.addEventListener('load', e => { e.width = 1080 e.height = 1350 let context = e.getContext('2d') - context.fillStyle = 'red' + context.fillStyle = 'black' context.drawImage(IMAGE, - j*1080, i*1350, - 1080, 1350, - 0, 0, - 1080, 1350 + j*(1080*0.94), i*1350, + 1080*0.94, 1350, + 1080*0.03, 0, + 1080*0.94, 1350 ) document.getElementById('cutter-panel').append(e) } diff --git a/v1-com-officielle/cutter/index.html b/v1-com-officielle/cutter/index.html index cfa296e..fd538fd 100644 --- a/v1-com-officielle/cutter/index.html +++ b/v1-com-officielle/cutter/index.html @@ -7,12 +7,15 @@ Insta Ninja -

Insta Ninja

-

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

- +

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

+

Attention : pour un permettre le bon affichage de la miniature sur le feed,
+ il faut que la largeur de l'image d'entrée soit de 3 x (1080 x 0.94) = 3045 px

+ Pour la hauteur, il suffit de multiplier 1350 par le nombre de ligne voulu

+ Ex : pour 6 post, soit 2 lignes sur les 3 colonnes qui sont imposées par insta
+ il faut que le format de l'image que tu crée soit 3045 px de large par 2700 px de haut