Make label configurable

[antifa-generator.git] / index.html

diff --git a/index.html b/index.html
index 77f4ffa69884c168b7bfcdc5ab3b2f4dd86966fc..bd926f0d032a1843a4ec11dcd03453dae0633344 100644 (file)
--- a/index.html
+++ b/index.html
@@ -17,48 +17,56 @@
             <h1>Antifa Generator</h1>
             <div class="form-group">
                 <input id="antifa-group" type="text" required="required" />
-                <label for="input" class="control-label">Digite o grupo a qual você pertence</label><i class="bar"></i>
+                <label for="input" class="control-label">Grupo</label><i class="bar"></i>
             </div>
             <div class="form-group">
-                <select id='antifa-label'>
-                    <option>Antifacista</option>
-                    <option>Antifacistas</option>
-                </select>
-                <label for="select" class="control-label"></label><i class="bar"></i>
+                <input id="antifa-label" type="text" required="required" />
+                <label for="input" class="control-label">Label</label><i class="bar"></i>
             </div>
         </form>
         <div class="button-container">
             <button type="button" class="button" onClick="generateImage()"><span>Gerar imagem</span></button>
-        </div>
-    </div>
+            <button type="button" class="button" onClick="downloadImage()"><span>Baixar</span></button>
+            <button type="button" class="button"
+                onclick="window.open('https://medium.com/@matheusMmota/antifascismo-n%C3%A3o-%C3%A9-moldura-para-o-seu-perfil-d648c1b3caa8')"><span>Antifacista?</span></button>
 
-    <canvas id="logo" height="500" width="500">
-        Seu navegador não suporta canvas
-    </canvas>
+        </div>
 
-    <script>
 
-    </script>
+        <canvas id="logo" height="500" width="500">
+            Seu navegador não suporta canvas
+        </canvas>
+    </div>
     <script>
         const button = document.querySelector('.button');
-        button.onclick = function generateImage() {
+        const logoCanvas = document.getElementById('logo')
+
+        function generateImage() {
             antifaGroup = document.getElementById('antifa-group')
             antifaLabel = document.getElementById('antifa-label')
-            console.log('antifaGropup.value :>> ', antifaGroup.value);
-            console.log('antifaLabel.value :>> ', antifaLabel.value);
 
-            const logoCanvas = document.getElementById('logo')
             ctx = logoCanvas.getContext("2d");
             const background = new Image();
-            background.src = 'https://raw.githubusercontent.com/BambataTech/antifa-generator/master/img/antifascist-action.png';
+            background.src = 'img/antifascist-action.png';
             background.onload = function () {
                 ctx.drawImage(background, 0, 0, 500, 500);
                 writeTopCircle(antifaGroup.value, "logo", 510, "white")
                 writeBottomCircle(antifaLabel.value, "logo", 510, "white")
+                logoCanvas.style.display = "flex"
             }
-            document.querySelector('.container').remove()
         };
 
+        function downloadImage() {
+            const img = logoCanvas.toDataURL("image/png");
+            console.log('img :>> ', img);
+            const link = document.createElement('a');
+            link.href = img;
+            link.download = 'Download.jpg';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+
 
     </script>