edit: insta cutter maintenant ajusté à tous les trucs de merde d'insta x333

2026-05-06 06:09:38 +02:00
parent 56f1255078
commit 2cc2862503
3 changed files with 36 additions and 8 deletions
@@ -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;
@@ -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)
        }
@@ -7,12 +7,15 @@
    <title>Insta Ninja</title>
 </head>
 <body>
-
    <form id="cutter-form">
        <div id="welcome-panel">
            <h1>Insta Ninja</h1>
-            <p>Séléctionne un photo pour la découper<br>en une grille au format du feed insta</p>
-
+            <h2>Séléctionne un photo pour la découper<br>en une grille au format du feed insta<br></h2>
+            <p><strong>Attention :</strong> pour un permettre le bon affichage de la miniature sur le feed,<br>
+              il faut que <strong>la largeur de l'image d'entrée soit de 3 x (1080 x 0.94) = 3045 px</strong><br><br>
+              Pour la hauteur, il suffit de multiplier 1350 par le nombre de ligne voulu<br><br>
+              Ex : pour 6 post, soit <strong>2 lignes sur les 3 colonnes</strong> qui sont imposées par insta<br>
+              il faut que le format de l'image que tu crée soit <strong>3045 px de large par 2700 px de haut</strong></p>
                <input type="number" name="rows" value="2" min="1">
            <input type="file" name="image" accept="image/jpg,image/jpeg,image/png,image/webp" required/>
            <button>Cut !</button>