Added download tooltip screen

Pedro270707 · Nov 27, 2023 · 28038d4 · 28038d4
1 parent 895449d
commit 28038d4
Show file tree

Hide file tree

Showing 8 changed files with 144 additions and 57 deletions.
diff --git a/css/minecrafttooltips.css b/css/minecrafttooltips.css
@@ -381,25 +381,30 @@
  border-style: solid none;
 }
 
-.minecraft-text-input {
- min-width: 500px;
- min-height: 32px;
- max-width: 95%;
+.text-input, .minecraft-text-input {
+ width: 3em;
+ height: 1.4em;
+ max-width: 95vw;
+ max-width: 95svw;
  font-family: var(--default-font-family);
  background-color: var(--text-input-color);
- border: 2px solid var(--text-input-color);
- padding: 5px;
+ border: 2px solid var(--text-input-color);
+ padding: 0.5em;
  outline: none;
  border-radius: 32px;
  color: var(--default-text-color);
- transition: background-color 0.2s;
- padding-left: 10px;
- padding-right: 10px;
+ transition: background-color 0.2s;
+ padding-left: 10px;
+ padding-right: 10px;
+}
+
+.minecraft-text-input {
+ width: 40rem;
 }
 
 .dark-mode .minecraft-text-input {
  background-color: var(--dark-mode-text-input-color);
- border: 2px solid var(--dark-mode-text-input-color);
+ border-color: var(--dark-mode-text-input-color);
  color: var(--dark-mode-text-color);
 }
 
@@ -535,6 +540,7 @@
 
 .download-overlay {
  position: fixed;
+ display: flex;
  height: 100vh;
  width: 100vw;
  top: 0;
@@ -543,7 +549,6 @@
  text-align: center;
  align-items: center;
  justify-content: center;
- display: none;
 }
 
 .download-overlay-background {
@@ -563,6 +568,7 @@
  z-index: 9999;
  box-shadow: 0 0 5px #000;
  padding: 6px;
+ width: fit-content;
 }
 
 .dark-mode .download-overlay-window {

diff --git a/css/senha.css b/css/senha.css
@@ -121,8 +121,8 @@
 }
 
 .text-input {
- min-width: 50px;
- min-height: 32px;
+ width: 3em;
+ height: 1.4em;
  max-width: 95vw;
  max-width: 95svw;
  font-family: var(--default-font-family);

diff --git a/css/style.css b/css/style.css
@@ -312,7 +312,7 @@ body {
 
 .website-divider {
  background-color: var(--primary-background-color);
- min-height: 200px;
+ min-height: 1em;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 15px;

diff --git a/js/minecraft-tip-impl.js b/js/minecraft-tip-impl.js
@@ -1,5 +1,6 @@
 var apng2webp = window.apng2webp.default;
 
+const downloadOverlay = document.getElementById("download-overlay");
 const tooltipField = document.getElementById("minecraft-text-input");
 let tooltip;
 new TranslatableText("minecrafttooltips-defaulttooltip").get().then(str => {
@@ -37,7 +38,7 @@ setInterval(() => {
 const recordingText = document.getElementById("recording-text");
 
 function recordPNG(exporter) {
- if (!tooltip.dataset.text.includes("§j") && !tooltip.dataset.text.includes("§k")) { // temporary, if you're a beginner programmer PLEASE don't be inspired by this
+ if (getTooltipTimeLength() === 0) {
  let encoder = new APNGencoder(tooltip);
  encoder.start();
  encoder.addFrame();
@@ -46,6 +47,7 @@ function recordPNG(exporter) {
  exporter(base64Out);
  } else {
  recordingText.classList.remove("hidden");
+ downloadOverlay.classList.add("hidden");
  let encoder = new APNGencoder(tooltip);
  encoder.setRepeat(0);
  encoder.setDelay(5);
@@ -83,4 +85,24 @@ function exportWebP(data) {
  .catch(error => {
  console.error('Conversion failed:', error);
  });
+}
+
+function getTooltipTimeLength() {
+ const form = document.getElementById("tooltip-time-length");
+ const custom = document.getElementById("download-tooltip-custom");
+ const customInput = document.getElementById("download-tooltip-custom-input");
+
+ for (const child of form.children) {
+ if (child.checked) {
+ if (child === custom) {
+ console.log("Custom");
+ console.log((customInput.value || 0) * 1000);
+ } else {
+ console.log(child);
+ console.log(child.value);
+ }
+ return child === custom ? (customInput.value || 0) * 1000 : parseInt(child.value);
+ }
+ }
+ return 0;
 }
diff --git a/language/en.json b/language/en.json
@@ -9,8 +9,12 @@
  "mainpage-projects": "Fun Projects",
  "minecrafttooltips-title": "Minecraft Items",
  "minecrafttooltips-defaulttooltip": "Minecraft Item Tooltip",
- "minecrafttooltips-downloadtooltip": "Download tooltip (.png)",
+ "minecrafttooltips-downloadtooltip": "Download tooltip",
+ "minecrafttooltips-downloadtooltip-png": "Download tooltip (.png)",
  "minecrafttooltips-downloadtooltip-webp": "Download tooltip (.webp)",
+ "minecrafttooltips-downloadtooltipstatic": "Static (one frame)",
+ "minecrafttooltips-downloadtooltipfullloop": "Full loop (2π s)",
+ "minecrafttooltips-downloadtooltipcustom": "Custom",
  "minecrafttooltips-uploaditem": "Upload item image",
  "minecrafttooltips-changeitem": "Change item image",
  "minecrafttooltips-downloaditem": "Download item",

diff --git a/language/pt.json b/language/pt.json
@@ -9,8 +9,12 @@
  "mainpage-projects": "Projetos divertidos",
  "minecrafttooltips-title": "Itens do Minecraft",
  "minecrafttooltips-defaulttooltip": "Nomes de itens do Minecraft",
- "minecrafttooltips-downloadtooltip": "Baixar nome (.png)",
+ "minecrafttooltips-downloadtooltip": "Baixar nome",
+ "minecrafttooltips-downloadtooltip-png": "Baixar nome (.png)",
  "minecrafttooltips-downloadtooltip-webp": "Baixar nome (.webp)",
+ "minecrafttooltips-downloadtooltipstatic": "Estático (um quadro)",
+ "minecrafttooltips-downloadtooltipfullloop": "Loop completo (2π s)",
+ "minecrafttooltips-downloadtooltipcustom": "Outro",
  "minecrafttooltips-uploaditem": "Enviar imagem do item",
  "minecrafttooltips-changeitem": "Alterar imagem do item",
  "minecrafttooltips-downloaditem": "Baixar item",

diff --git a/language/sl.json b/language/sl.json
@@ -9,8 +9,12 @@
  "mainpage-projects": "Zabavni projekti",
  "minecrafttooltips-title": "Predmeti Minecrafta",
  "minecrafttooltips-defaulttooltip": "Opis orodja za predmet Minecraft",
- "minecrafttooltips-downloadtooltip": "Prenesi opis orodja (.png)",
+ "minecrafttooltips-downloadtooltip": "Prenesi opis orodja",
+ "minecrafttooltips-downloadtooltip-png": "Prenesi opis orodja (.png)",
  "minecrafttooltips-downloadtooltip-webp": "Prenesi opis orodja (.webp)",
+ "minecrafttooltips-downloadtooltipstatic": "Statični (en okvir)",
+ "minecrafttooltips-downloadtooltipfullloop": "Celotna zanka (2π s)",
+ "minecrafttooltips-downloadtooltipcustom": "Drugo",
  "minecrafttooltips-uploaditem": "Naložite sliko predmeta",
  "minecrafttooltips-changeitem": "Spremenite sliko predmeta",
  "minecrafttooltips-downloaditem": "Prenesi predmet",

diff --git a/minecrafttooltips.html b/minecrafttooltips.html
@@ -35,8 +35,21 @@ <h1 data-string='{"translate":"minecrafttooltips-title"}'></h1>
  <div id="recording-text" class="center hidden" data-string='{"translate":"minecrafttooltips-recording"}'></div>
 
  <br>
-
+ 
  <div class="download-tooltip-wrapper info-bubble" data-aria-label='{"translate":"minecrafttooltips-downloadtooltip"}'>
+ <button class="icon-button" id="download-tooltip" onclick="downloadOverlay.classList.toggle('hidden')">
+ <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 374.1 374.1" style="fill: currentColor; width: 15px;" xml:space="preserve">
+ <path d="M344.1,207.5c-16.6,0-30,13.4-30,30v76.6h-254v-76.6c0-16.6-13.4-30-30-30s-30,13.4-30,30v106.6c0,16.6,13.4,30,30,30h314
+ c16.6,0,30-13.4,30-30V237.5C374.1,220.9,360.6,207.5,344.1,207.5z"/>
+ <path d="M250.5,108.3l-33.5,33.5V30c0-16.6-13.4-30-30-30s-30,13.4-30,30v111.8l-33.5-33.5c-5.9-5.9-13.5-8.8-21.2-8.8
+ s-15.4,2.9-21.2,8.8c-11.7,11.7-11.7,30.7,0,42.4l84.7,84.7c11.7,11.7,30.7,11.7,42.4,0l84.7-84.7c11.7-11.7,11.7-30.7,0-42.4
+ C281.3,96.6,262.3,96.6,250.5,108.3z"/>
+ </svg>
+ </button>
+ </div>
+<!--
+ <div class="download-tooltip-wrapper info-bubble" data-aria-label='{"translate":"minecrafttooltips-downloadtooltip-png"}'>
  <button class="icon-button" id="download-tooltip" onclick="recordPNG(exportFile)">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 374.1 374.1" style="fill: currentColor; width: 15px;" xml:space="preserve">
@@ -60,7 +73,7 @@ <h1 data-string='{"translate":"minecrafttooltips-title"}'></h1>
  </svg>
  </button>
  </div>
-
+-->
  <br>
 
  <div id="item-output" class="minecraft-item item-output" data-mctitle='{"text":"Diamond Sword\n\n§7§lWhen in main hand:\n §21.6 Attack Speed\n §27 Attack Damage"}'>
@@ -74,27 +87,31 @@ <h1 data-string='{"translate":"minecrafttooltips-title"}'></h1>
 
  <div class="item-flex center">
  <div class="download-item-wrapper info-bubble" data-aria-label='{"translate":"minecrafttooltips-downloaditem"}'>
- <button class="icon-button" id="download-item"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
- viewBox="0 0 374.1 374.1" style="fill: currentColor; width: 15px;" xml:space="preserve">
- <path d="M344.1,207.5c-16.6,0-30,13.4-30,30v76.6h-254v-76.6c0-16.6-13.4-30-30-30s-30,13.4-30,30v106.6c0,16.6,13.4,30,30,30h314
- c16.6,0,30-13.4,30-30V237.5C374.1,220.9,360.6,207.5,344.1,207.5z"/>
- <path d="M250.5,108.3l-33.5,33.5V30c0-16.6-13.4-30-30-30s-30,13.4-30,30v111.8l-33.5-33.5c-5.9-5.9-13.5-8.8-21.2-8.8
- s-15.4,2.9-21.2,8.8c-11.7,11.7-11.7,30.7,0,42.4l84.7,84.7c11.7,11.7,30.7,11.7,42.4,0l84.7-84.7c11.7-11.7,11.7-30.7,0-42.4
- C281.3,96.6,262.3,96.6,250.5,108.3z"/></svg>
+ <button class="icon-button" id="download-item">
+ <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 374.1 374.1" style="fill: currentColor; width: 15px;" xml:space="preserve">
+ <path d="M344.1,207.5c-16.6,0-30,13.4-30,30v76.6h-254v-76.6c0-16.6-13.4-30-30-30s-30,13.4-30,30v106.6c0,16.6,13.4,30,30,30h314
+ c16.6,0,30-13.4,30-30V237.5C374.1,220.9,360.6,207.5,344.1,207.5z"/>
+ <path d="M250.5,108.3l-33.5,33.5V30c0-16.6-13.4-30-30-30s-30,13.4-30,30v111.8l-33.5-33.5c-5.9-5.9-13.5-8.8-21.2-8.8
+ s-15.4,2.9-21.2,8.8c-11.7,11.7-11.7,30.7,0,42.4l84.7,84.7c11.7,11.7,30.7,11.7,42.4,0l84.7-84.7c11.7-11.7,11.7-30.7,0-42.4
+ C281.3,96.6,262.3,96.6,250.5,108.3z"/>
+ </svg>
  </button>
  </div>
+
  <div id="item-input" class="item-input info-bubble" data-aria-label='{"translate":"minecrafttooltips-uploaditem"}'>
- <label for="item-input-upload"><span id="item-input-text"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
- viewBox="0 0 374.116 374.116" style="enable-background:new 0 0 374.116 374.116; fill: currentColor; width: 15px; vertical-align: -2px;" xml:space="preserve">
- <g>
- <path d="M344.058,207.506c-16.568,0-30,13.432-30,30v76.609h-254v-76.609c0-16.568-13.432-30-30-30c-16.568,0-30,13.432-30,30
- v106.609c0,16.568,13.432,30,30,30h314c16.568,0,30-13.432,30-30V237.506C374.058,220.938,360.626,207.506,344.058,207.506z"/>
- <path d="M123.57,135.915l33.488-33.488v111.775c0,16.568,13.432,30,30,30c16.568,0,30-13.432,30-30V102.426l33.488,33.488
- c5.857,5.858,13.535,8.787,21.213,8.787c7.678,0,15.355-2.929,21.213-8.787c11.716-11.716,11.716-30.71,0-42.426L208.271,8.788
- c-11.715-11.717-30.711-11.717-42.426,0L81.144,93.489c-11.716,11.716-11.716,30.71,0,42.426
- C92.859,147.631,111.855,147.631,123.57,135.915z"/>
- </g>
- </svg></span>
+ <label for="item-input-upload">
+ <span id="item-input-text">
+ <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 374.116 374.116" style="enable-background:new 0 0 374.116 374.116; fill: currentColor; width: 15px; vertical-align: -2px;" xml:space="preserve">
+ <g>
+ <path d="M344.058,207.506c-16.568,0-30,13.432-30,30v76.609h-254v-76.609c0-16.568-13.432-30-30-30c-16.568,0-30,13.432-30,30
+ v106.609c0,16.568,13.432,30,30,30h314c16.568,0,30-13.432,30-30V237.506C374.058,220.938,360.626,207.506,344.058,207.506z"/>
+ <path d="M123.57,135.915l33.488-33.488v111.775c0,16.568,13.432,30,30,30c16.568,0,30-13.432,30-30V102.426l33.488,33.488
+ c5.857,5.858,13.535,8.787,21.213,8.787c7.678,0,15.355-2.929,21.213-8.787c11.716-11.716,11.716-30.71,0-42.426L208.271,8.788
+ c-11.715-11.717-30.711-11.717-42.426,0L81.144,93.489c-11.716,11.716-11.716,30.71,0,42.426
+ C92.859,147.631,111.855,147.631,123.57,135.915z"/>
+ </g>
+ </svg>
+ </span>
  <input type="file" accept="image/*" id="item-input-upload" /></label>
  </div>
  </div>
@@ -105,41 +122,71 @@ <h1 data-string='{"translate":"minecrafttooltips-title"}'></h1>
  <input type="text" data-placeholder='{"translate":"minecrafttooltips-defaulttooltip"}' id="minecraft-text-input" name="Texto do Minecraft" class="minecraft-text-input">
  <input type="text" data-placeholder='{"translate":"minecrafttooltips-itemquantity"}' id="item-count-input" name="Número de itens" class="minecraft-text-input">
  </div>
- 
+<!--
  <br>
  <br>
 
  <div id="super-secret-settings" class="center" style="display: none;">
  <span class="checkbox-container"><input type="checkbox" id="k-numbers-only" name="k-numbers-only" value="k-numbers-only" /></span><label for="k-numbers-only" data-string='{"translate":"minecrafttooltips-numbersonlyk"}'> Usar somente números no §k</label>
  </div>
+-->
 </div>
 
-<div class="download-overlay" id="download-overlay">
+<div class="download-overlay hidden" id="download-overlay">
  <div class="download-overlay-background" id="download-overlay-background"></div>
  <div class="download-overlay-window">
+ <!--
  <span class="minor"><span data-string='{"translate":"minecrafttooltips-imageresolution"}'>resolução da imagem:</span> <span id="image-resolution">1</span>x</span> <span class="warning info-bubble" id="resolution-warning" data-aria-label='{"translate":"minecrafttooltips-resolutionwarning"}'>!</span><br>
- <input type="range" min="1" max="50" value="1" class="slider" id="resolution-slider"><br>
- <div class="download-overlay-download-button-wrapper info-bubble" data-aria-label='{"translate":"minecrafttooltips-download"}'>
- <button class="icon-button" id="download-overlay-download-button"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
- viewBox="0 0 374.1 374.1" style="fill: currentColor; width: 15px;" xml:space="preserve">
- <path d="M344.1,207.5c-16.6,0-30,13.4-30,30v76.6h-254v-76.6c0-16.6-13.4-30-30-30s-30,13.4-30,30v106.6c0,16.6,13.4,30,30,30h314
- c16.6,0,30-13.4,30-30V237.5C374.1,220.9,360.6,207.5,344.1,207.5z"/>
- <path d="M250.5,108.3l-33.5,33.5V30c0-16.6-13.4-30-30-30s-30,13.4-30,30v111.8l-33.5-33.5c-5.9-5.9-13.5-8.8-21.2-8.8
- s-15.4,2.9-21.2,8.8c-11.7,11.7-11.7,30.7,0,42.4l84.7,84.7c11.7,11.7,30.7,11.7,42.4,0l84.7-84.7c11.7-11.7,11.7-30.7,0-42.4
- C281.3,96.6,262.3,96.6,250.5,108.3z"/></svg></button>
+ <input type="range" min="1" max="50" value="1" class="slider" id="resolution-slider">
+ -->
+
+ <form id="tooltip-time-length" action="">
+ <input type="radio" name="tooltip-time-length" id="download-tooltip-static" value="0" checked><label for="download-tooltip-static" data-string='{"translate":"minecrafttooltips-downloadtooltipstatic"}'></label><br>
+ <input type="radio" name="tooltip-time-length" id="download-tooltip-full-loop" value="6283.185307179586"><label for="download-tooltip-full-loop" data-string='{"translate":"minecrafttooltips-downloadtooltipfullloop"}'></label><br>
+
+ <input type="radio" name="tooltip-time-length" id="download-tooltip-custom" value="0"><label for="download-tooltip-custom" data-string='{"translate":"minecrafttooltips-downloadtooltipcustom"}'></label>
+ <input type="number" id="download-tooltip-custom-input" name="download-tooltip-custom-input" class="text-input" step="0.1">
+ </form>
+
+ <br>
+
+ <div class="download-overlay-download-button-wrapper info-bubble" data-aria-label='{"translate":"minecrafttooltips-downloadtooltip-png"}'>
+ <button class="icon-button" id="download-overlay-download-button" onclick="recordPNG(exportFile); downloadOverlay.classList.add('hidden')">
+ <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 374.1 374.1" style="fill: currentColor; width: 15px;" xml:space="preserve">
+ <path d="M344.1,207.5c-16.6,0-30,13.4-30,30v76.6h-254v-76.6c0-16.6-13.4-30-30-30s-30,13.4-30,30v106.6c0,16.6,13.4,30,30,30h314
+ c16.6,0,30-13.4,30-30V237.5C374.1,220.9,360.6,207.5,344.1,207.5z"/>
+ <path d="M250.5,108.3l-33.5,33.5V30c0-16.6-13.4-30-30-30s-30,13.4-30,30v111.8l-33.5-33.5c-5.9-5.9-13.5-8.8-21.2-8.8
+ s-15.4,2.9-21.2,8.8c-11.7,11.7-11.7,30.7,0,42.4l84.7,84.7c11.7,11.7,30.7,11.7,42.4,0l84.7-84.7c11.7-11.7,11.7-30.7,0-42.4
+ C281.3,96.6,262.3,96.6,250.5,108.3z"/>
+ </svg>
+ </button>
+ </div>
+
+ <div class="download-overlay-download-button-wrapper info-bubble" data-aria-label='{"translate":"minecrafttooltips-downloadtooltip-webp"}'>
+ <button class="icon-button" id="download-overlay-download-button" onclick="recordPNG(exportWebP); downloadOverlay.classList.add('hidden')">
+ <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 374.1 374.1" style="fill: currentColor; width: 15px;" xml:space="preserve">
+ <path d="M344.1,207.5c-16.6,0-30,13.4-30,30v76.6h-254v-76.6c0-16.6-13.4-30-30-30s-30,13.4-30,30v106.6c0,16.6,13.4,30,30,30h314
+ c16.6,0,30-13.4,30-30V237.5C374.1,220.9,360.6,207.5,344.1,207.5z"/>
+ <path d="M250.5,108.3l-33.5,33.5V30c0-16.6-13.4-30-30-30s-30,13.4-30,30v111.8l-33.5-33.5c-5.9-5.9-13.5-8.8-21.2-8.8
+ s-15.4,2.9-21.2,8.8c-11.7,11.7-11.7,30.7,0,42.4l84.7,84.7c11.7,11.7,30.7,11.7,42.4,0l84.7-84.7c11.7-11.7,11.7-30.7,0-42.4
+ C281.3,96.6,262.3,96.6,250.5,108.3z"/>
+ </svg>
+ </button>
  </div>
+
  <div class="download-overlay-close-button-wrapper info-bubble" data-aria-label='{"translate":"minecrafttooltips-close"}'>
- <button class="icon-button" id="close-button"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
- viewBox="0 0 374.1 374.1" style="fill: currentColor; width: 15px;" xml:space="preserve">
- <g>
- <path d="M349.2,349.2c-5.9,5.9-13.5,8.8-21.2,8.8c-7.7,0-15.4-2.9-21.2-8.8L185.6,228.1L65.2,348.5
- c-5.9,5.8-13.5,8.8-21.2,8.8s-15.3-2.9-21.2-8.8c-11.7-11.7-11.7-30.7,0-42.4l120.4-120.4L24.9,67.4c-11.7-11.7-11.7-30.7,0-42.4
- c11.7-11.7,30.7-11.7,42.4,0l118.3,118.3L304.6,24.3c11.7-11.7,30.7-11.7,42.4,0c11.7,11.7,11.7,30.7,0,42.4L228.1,185.6
- l121.1,121.1C360.9,318.4,360.9,337.4,349.2,349.2z"/>
- </g>
+ <button class="icon-button" id="close-button" onclick="downloadOverlay.classList.add('hidden')">
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 374.1 374.1" style="fill: currentColor; width: 15px;" xml:space="preserve">
+  <g>
+  <path d="M349.2,349.2c-5.9,5.9-13.5,8.8-21.2,8.8c-7.7,0-15.4-2.9-21.2-8.8L185.6,228.1L65.2,348.5
+  c-5.9,5.8-13.5,8.8-21.2,8.8s-15.3-2.9-21.2-8.8c-11.7-11.7-11.7-30.7,0-42.4l120.4-120.4L24.9,67.4c-11.7-11.7-11.7-30.7,0-42.4
+  c11.7-11.7,30.7-11.7,42.4,0l118.3,118.3L304.6,24.3c11.7-11.7,30.7-11.7,42.4,0c11.7,11.7,11.7,30.7,0,42.4L228.1,185.6
+  l121.1,121.1C360.9,318.4,360.9,337.4,349.2,349.2z"/>
+  </g>
  </svg>
  </button>
  </div>
+
  </div>
 </div>