{"id":12698,"date":"2025-10-10T12:36:45","date_gmt":"2025-10-10T10:36:45","guid":{"rendered":"https:\/\/www.madinnovation.ch\/?page_id=12698"},"modified":"2026-03-23T16:55:39","modified_gmt":"2026-03-23T15:55:39","slug":"tools","status":"publish","type":"page","link":"https:\/\/www.madinnovation.ch\/en\/tools\/","title":{"rendered":"Tools"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"12698\" class=\"elementor elementor-12698\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f5090ac e-flex e-con-boxed e-con e-parent\" data-id=\"f5090ac\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b63723d elementor-widget elementor-widget-html\" data-id=\"b63723d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n.mad-tools-wrap { background: #0a0a0a; }\n\n.mad-tools-hero {\n  padding: 100px 5% 60px;\n  max-width: 1100px;\n  margin: 0 auto;\n  border-bottom: 1px solid rgba(255,255,255,0.06);\n}\n\n.mad-tool-section {\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 80px 5%;\n}\n\n.mad-tool-card {\n  background: #111;\n  border: 1px solid rgba(0,185,255,0.15);\n  border-radius: 20px;\n  overflow: hidden;\n}\n\n.mad-tool-card-header {\n  padding: 32px 36px;\n  border-bottom: 1px solid rgba(255,255,255,0.06);\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.mad-tool-icon {\n  width: 48px;\n  height: 48px;\n  background: rgba(0,185,255,0.1);\n  border: 1px solid rgba(0,185,255,0.2);\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.mad-tool-body {\n  padding: 36px;\n}\n\n.mad-tool-field {\n  margin-bottom: 24px;\n}\n\n.mad-tool-label {\n  display: block;\n  font-size: 13px;\n  font-weight: 600;\n  color: rgba(255,255,255,0.6);\n  margin-bottom: 8px;\n  letter-spacing: 0.03em;\n}\n\n.mad-tool-input {\n  width: 100%;\n  background: #0a0a0a;\n  border: 1px solid rgba(0,185,255,0.2);\n  border-radius: 10px;\n  padding: 12px 16px;\n  color: #ffffff;\n  font-size: 15px;\n  outline: none;\n  transition: border-color 0.2s;\n  box-sizing: border-box;\n  font-family: inherit;\n}\n\n.mad-tool-input:focus {\n  border-color: #00b9ff;\n}\n\n.mad-tool-upload {\n  width: 100%;\n  background: #0a0a0a;\n  border: 2px dashed rgba(0,185,255,0.25);\n  border-radius: 10px;\n  padding: 32px 16px;\n  color: rgba(255,255,255,0.4);\n  font-size: 14px;\n  text-align: center;\n  cursor: pointer;\n  transition: border-color 0.2s, background 0.2s;\n  box-sizing: border-box;\n  position: relative;\n}\n\n.mad-tool-upload:hover {\n  border-color: #00b9ff;\n  background: rgba(0,185,255,0.04);\n}\n\n.mad-tool-upload input[type=\"file\"] {\n  position: absolute;\n  inset: 0;\n  opacity: 0;\n  cursor: pointer;\n  width: 100%;\n  height: 100%;\n}\n\n.mad-tool-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 16px;\n  margin-bottom: 24px;\n}\n\n.mad-tool-btn {\n  width: 100%;\n  background: #00b9ff;\n  color: #0a0a0a;\n  border: none;\n  border-radius: 12px;\n  padding: 16px;\n  font-size: 15px;\n  font-weight: 700;\n  cursor: pointer;\n  transition: background 0.25s;\n  font-family: inherit;\n  letter-spacing: 0.02em;\n}\n\n.mad-tool-btn:hover { background: #ffffff; }\n\n.mad-tool-btn:disabled {\n  background: rgba(0,185,255,0.3);\n  cursor: not-allowed;\n  color: rgba(0,0,0,0.5);\n}\n\n.mad-tool-preview {\n  display: none;\n  margin-top: 8px;\n  border-radius: 8px;\n  overflow: hidden;\n  border: 1px solid rgba(0,185,255,0.15);\n}\n\n.mad-tool-preview img {\n  width: 100%;\n  display: block;\n  max-height: 200px;\n  object-fit: contain;\n  background: #0a0a0a;\n}\n\n.mad-downloads {\n  margin-top: 32px;\n  display: none;\n}\n\n.mad-downloads-title {\n  font-size: 13px;\n  font-weight: 600;\n  color: rgba(255,255,255,0.5);\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  margin-bottom: 16px;\n}\n\n.mad-download-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n  gap: 10px;\n}\n\n.mad-download-item {\n  background: #0a0a0a;\n  border: 1px solid rgba(0,185,255,0.15);\n  border-radius: 10px;\n  overflow: hidden;\n  text-align: center;\n}\n\n.mad-download-item img {\n  width: 100%;\n  height: 100px;\n  object-fit: cover;\n  display: block;\n}\n\n.mad-download-item a {\n  display: block;\n  padding: 8px;\n  font-size: 11px;\n  color: #00b9ff;\n  text-decoration: none;\n  font-weight: 600;\n  transition: color 0.2s;\n}\n\n.mad-download-item a:hover { color: #ffffff; }\n\n.mad-tool-status {\n  display: none;\n  padding: 12px 16px;\n  background: rgba(0,185,255,0.08);\n  border: 1px solid rgba(0,185,255,0.2);\n  border-radius: 8px;\n  font-size: 13px;\n  color: #00b9ff;\n  margin-top: 16px;\n  text-align: center;\n}\n\n@media (max-width: 600px) {\n  .mad-tools-hero { padding: 60px 5% 40px; }\n  .mad-tool-section { padding: 48px 4%; }\n  .mad-tool-body { padding: 24px 20px; }\n  .mad-tool-card-header { padding: 24px 20px; }\n  .mad-tool-grid { grid-template-columns: 1fr; }\n}\n<\/style>\n\n<div class=\"mad-tools-wrap\">\n\n  <!-- HERO -->\n  <div class=\"mad-tools-hero\">\n    <p style=\"font-size:12px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:#00b9ff; margin-bottom:16px;\">Tools gratuiti<\/p>\n    <h1 style=\"font-size:clamp(32px,5vw,56px); font-weight:800; color:#ffffff; line-height:1.1; margin-bottom:20px;\">Strumenti pensati<br><span style=\"color:#00b9ff;\">per chi lavora sui social.<\/span><\/h1>\n    <p style=\"font-size:17px; color:rgba(255,255,255,0.55); max-width:560px; line-height:1.8;\">Piccoli tool che uso ogni giorno nel mio lavoro. Li condivido gratuitamente \u2014 perch\u00e9 se ti semplificano la vita, ancora meglio.<\/p>\n  <\/div>\n\n  <!-- TOOL -->\n  <div class=\"mad-tool-section\">\n\n    <div class=\"mad-tool-card\">\n\n      <div class=\"mad-tool-card-header\">\n        <div class=\"mad-tool-icon\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#00b9ff\" stroke-width=\"1.5\" stroke-linecap=\"round\">\n            <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"3\"\/>\n            <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"21\"\/>\n            <line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"\/>\n          <\/svg>\n        <\/div>\n        <div>\n          <div style=\"font-size:18px; font-weight:700; color:#ffffff; margin-bottom:4px;\">Dividi immagine per LinkedIn<\/div>\n          <div style=\"font-size:13px; color:rgba(255,255,255,0.45);\">Carica un'immagine, scegli righe e colonne \u2014 ottieni le tile pronte da usare nel carosello<\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"mad-tool-body\">\n\n        <div class=\"mad-tool-field\">\n          <label class=\"mad-tool-label\">Carica la tua immagine<\/label>\n          <div class=\"mad-tool-upload\" id=\"uploadZone\">\n            <input type=\"file\" id=\"imageInput\" accept=\"image\/*\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"rgba(0,185,255,0.5)\" stroke-width=\"1.5\" stroke-linecap=\"round\" style=\"margin:0 auto 10px; display:block;\">\n              <path d=\"M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4\"\/>\n              <polyline points=\"17 8 12 3 7 8\"\/>\n              <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"\/>\n            <\/svg>\n            <div id=\"uploadLabel\">Clicca o trascina un'immagine qui<\/div>\n            <div style=\"font-size:11px; margin-top:6px; color:rgba(255,255,255,0.25);\">PNG, JPG, WEBP \u2014 qualsiasi dimensione<\/div>\n          <\/div>\n          <div class=\"mad-tool-preview\" id=\"previewWrap\">\n            <img decoding=\"async\" id=\"previewImg\" src=\"\" alt=\"Anteprima\"\/>\n          <\/div>\n        <\/div>\n\n        <div class=\"mad-tool-grid\">\n          <div class=\"mad-tool-field\" style=\"margin-bottom:0;\">\n            <label class=\"mad-tool-label\" for=\"rows\">Numero di righe<\/label>\n            <input class=\"mad-tool-input\" type=\"number\" id=\"rows\" value=\"1\" min=\"1\" max=\"20\">\n          <\/div>\n          <div class=\"mad-tool-field\" style=\"margin-bottom:0;\">\n            <label class=\"mad-tool-label\" for=\"cols\">Numero di colonne<\/label>\n            <input class=\"mad-tool-input\" type=\"number\" id=\"cols\" value=\"3\" min=\"1\" max=\"20\">\n          <\/div>\n        <\/div>\n\n        <div style=\"margin-top:24px;\">\n          <button class=\"mad-tool-btn\" id=\"splitButton\">Dividi immagine \u2192<\/button>\n        <\/div>\n\n        <div class=\"mad-tool-status\" id=\"statusMsg\"><\/div>\n\n        <div class=\"mad-downloads\" id=\"downloadsWrap\">\n          <div class=\"mad-downloads-title\">Tile pronte da scaricare<\/div>\n          <div class=\"mad-download-grid\" id=\"downloads\"><\/div>\n        <\/div>\n\n      <\/div>\n    <\/div>\n\n    <!-- NOTE USO -->\n    <div style=\"margin-top:32px; padding:24px 28px; background:#111; border:1px solid rgba(255,255,255,0.06); border-radius:14px;\">\n      <p style=\"font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.3); margin-bottom:12px;\">Come si usa<\/p>\n      <ol style=\"font-size:14px; color:rgba(255,255,255,0.5); line-height:1.9; padding-left:20px; margin:0;\">\n        <li>Carica l'immagine che vuoi usare per il carosello LinkedIn<\/li>\n        <li>Imposta il numero di colonne (es. 3 per un carosello a 3 slide) e righe (di solito 1)<\/li>\n        <li>Clicca \"Dividi immagine\" e scarica le singole tile<\/li>\n        <li>Caricale in ordine su LinkedIn come carosello \u2014 l'immagine originale apparir\u00e0 divisa perfettamente<\/li>\n      <\/ol>\n    <\/div>\n\n  <\/div>\n\n<\/div>\n\n<script>\nconst imageInput = document.getElementById('imageInput');\nconst uploadZone = document.getElementById('uploadZone');\nconst uploadLabel = document.getElementById('uploadLabel');\nconst previewWrap = document.getElementById('previewWrap');\nconst previewImg = document.getElementById('previewImg');\nconst splitButton = document.getElementById('splitButton');\nconst statusMsg = document.getElementById('statusMsg');\nconst downloadsWrap = document.getElementById('downloadsWrap');\nconst downloads = document.getElementById('downloads');\n\nimageInput.addEventListener('change', function() {\n  if (!this.files[0]) return;\n  const file = this.files[0];\n  uploadLabel.textContent = file.name;\n  uploadZone.style.borderColor = '#00b9ff';\n  uploadZone.style.background = 'rgba(0,185,255,0.04)';\n  const reader = new FileReader();\n  reader.onload = function(e) {\n    previewImg.src = e.target.result;\n    previewWrap.style.display = 'block';\n  };\n  reader.readAsDataURL(file);\n});\n\nuploadZone.addEventListener('dragover', function(e) {\n  e.preventDefault();\n  this.style.borderColor = '#00b9ff';\n  this.style.background = 'rgba(0,185,255,0.06)';\n});\n\nuploadZone.addEventListener('dragleave', function() {\n  this.style.borderColor = 'rgba(0,185,255,0.25)';\n  this.style.background = '#0a0a0a';\n});\n\nuploadZone.addEventListener('drop', function(e) {\n  e.preventDefault();\n  const file = e.dataTransfer.files[0];\n  if (file && file.type.startsWith('image\/')) {\n    imageInput.files = e.dataTransfer.files;\n    uploadLabel.textContent = file.name;\n    this.style.borderColor = '#00b9ff';\n    const reader = new FileReader();\n    reader.onload = function(ev) {\n      previewImg.src = ev.target.result;\n      previewWrap.style.display = 'block';\n    };\n    reader.readAsDataURL(file);\n  }\n});\n\nsplitButton.addEventListener('click', function() {\n  if (!imageInput.files[0]) {\n    statusMsg.textContent = 'Carica prima un\\'immagine!';\n    statusMsg.style.display = 'block';\n    statusMsg.style.background = 'rgba(255,80,80,0.1)';\n    statusMsg.style.borderColor = 'rgba(255,80,80,0.3)';\n    statusMsg.style.color = '#ff8080';\n    return;\n  }\n\n  const rows = parseInt(document.getElementById('rows').value);\n  const cols = parseInt(document.getElementById('cols').value);\n\n  if (rows < 1 || cols < 1 || rows > 20 || cols > 20) {\n    statusMsg.textContent = 'Inserisci valori tra 1 e 20.';\n    statusMsg.style.display = 'block';\n    return;\n  }\n\n  splitButton.disabled = true;\n  splitButton.textContent = 'Elaborazione in corso...';\n  statusMsg.style.display = 'none';\n  downloads.innerHTML = '';\n\n  const img = new Image();\n  img.onload = function() {\n    const tileW = Math.floor(img.width \/ cols);\n    const tileH = Math.floor(img.height \/ rows);\n    let count = 0;\n\n    for (let r = 0; r < rows; r++) {\n      for (let c = 0; c < cols; c++) {\n        const canvas = document.createElement('canvas');\n        canvas.width = tileW;\n        canvas.height = tileH;\n        const ctx = canvas.getContext('2d');\n        ctx.drawImage(img, c * tileW, r * tileH, tileW, tileH, 0, 0, tileW, tileH);\n\n        const item = document.createElement('div');\n        item.className = 'mad-download-item';\n\n        const thumb = document.createElement('img');\n        thumb.src = canvas.toDataURL();\n\n        const link = document.createElement('a');\n        link.download = 'tile_' + (r+1) + '_' + (c+1) + '.png';\n        link.href = canvas.toDataURL();\n        link.textContent = 'Scarica ' + (r+1) + '\u00d7' + (c+1);\n\n        item.appendChild(thumb);\n        item.appendChild(link);\n        downloads.appendChild(item);\n        count++;\n      }\n    }\n\n    downloadsWrap.style.display = 'block';\n    statusMsg.textContent = count + ' tile pronte! Cliccale per scaricarle.';\n    statusMsg.style.display = 'block';\n    statusMsg.style.background = 'rgba(0,185,255,0.08)';\n    statusMsg.style.borderColor = 'rgba(0,185,255,0.2)';\n    statusMsg.style.color = '#00b9ff';\n    splitButton.disabled = false;\n    splitButton.textContent = 'Dividi immagine \u2192';\n  };\n  img.src = URL.createObjectURL(imageInput.files[0]);\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Tools gratuiti Strumenti pensatiper chi lavora sui social. Piccoli tool che uso ogni giorno nel mio lavoro. Li condivido gratuitamente \u2014 perch\u00e9 se ti semplificano la vita, ancora meglio. Dividi immagine per LinkedIn Carica un&#8217;immagine, scegli righe e colonne \u2014 ottieni le tile pronte da usare nel carosello Carica la tua immagine Clicca o trascina [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-12698","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.madinnovation.ch\/en\/wp-json\/wp\/v2\/pages\/12698","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.madinnovation.ch\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.madinnovation.ch\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.madinnovation.ch\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.madinnovation.ch\/en\/wp-json\/wp\/v2\/comments?post=12698"}],"version-history":[{"count":23,"href":"https:\/\/www.madinnovation.ch\/en\/wp-json\/wp\/v2\/pages\/12698\/revisions"}],"predecessor-version":[{"id":12972,"href":"https:\/\/www.madinnovation.ch\/en\/wp-json\/wp\/v2\/pages\/12698\/revisions\/12972"}],"wp:attachment":[{"href":"https:\/\/www.madinnovation.ch\/en\/wp-json\/wp\/v2\/media?parent=12698"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}