curl --request POST \
  --url https://api.iotools.cloud/v1/tool/css-switch-generator \
  --header 'Authorization: Bearer <token>' \
  --header 'Content-Type: application/json' \
  --data '
{
  "style": "track",
  "width": "56",
  "height": "32",
  "borderRadius": "40",
  "offColor": "#cbd5e1",
  "onColor": "#22c55e",
  "knobColor": "#ffffff",
  "transition": "250",
  "knobShadow": "true",
  "className": "io-switch",
  "labelText": "Enable notifications"
}
'

{
  "tool": "css-switch-generator",
  "tool_version": "1.0.1",
  "outputs": {
    "htmlCode": "<label class=\"io-switch\">\n  <input class=\"io-switch__input\" type=\"checkbox\" role=\"switch\" />\n  <span class=\"io-switch__track\"></span>\n  <span class=\"io-switch__label\">Enable notifications</span>\n</label>",
    "cssCode": ".io-switch {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.io-switch__input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.io-switch__track {\n  position: relative;\n  flex: none;\n  display: block;\n  width: 56px;\n  height: 32px;\n  border-radius: 16px;\n  background: #cbd5e1;\n  transition: background-color 250ms ease, border-color 250ms ease;\n}\n\n.io-switch__track::before {\n  content: \"\";\n  position: absolute;\n  top: 4px;\n  left: 4px;\n  width: 24px;\n  height: 24px;\n  border-radius: 12px;\n  background: #ffffff;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n  transition: transform 250ms ease, background-color 250ms ease;\n}\n\n.io-switch__input:checked + .io-switch__track {\n  background: #22c55e;\n}\n\n.io-switch__input:checked + .io-switch__track::before {\n  transform: translateX(24px);\n  background: #ffffff;\n}\n\n.io-switch__input:focus-visible + .io-switch__track {\n  outline: 2px solid #22c55e;\n  outline-offset: 2px;\n}\n\n.io-switch__input:disabled + .io-switch__track {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .io-switch__track,\n  .io-switch__track::before {\n    transition: none;\n  }\n}",
    "previewHtml": "<div style=\"display:flex;flex-wrap:wrap;align-items:center;gap:28px;padding:4px 0\"><div style=\"display:inline-flex;align-items:center;gap:10px;font-size:14px\">\n  <span style=\"position:relative;display:inline-block;flex:none;width:56px;height:32px;border-radius:16px;background:#cbd5e1\"><span style=\"position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:12px;background:#ffffff;box-shadow:0 1px 3px rgba(0,0,0,0.3)\"></span></span><span>Enable notifications</span>\n</div><div style=\"display:inline-flex;align-items:center;gap:10px;font-size:14px\">\n  <span style=\"position:relative;display:inline-block;flex:none;width:56px;height:32px;border-radius:16px;background:#22c55e\"><span style=\"position:absolute;top:4px;left:28px;width:24px;height:24px;border-radius:12px;background:#ffffff;box-shadow:0 1px 3px rgba(0,0,0,0.3)\"></span></span><span>Enable notifications</span>\n</div></div>"
  },
  "credits_used": 3,
  "credits_remaining": null
}