https://imgico.com/_next/static/chunks/app/page-61a28c2658840683.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6706,8974],{293:(e,i,a)=>{Promise.resolve().then(a.t.bind(a,2619,23)),Promise.resolve().then(a.t.bind(a,7314,23)),Promise.resolve().then(a.t.bind(a,9755,23)),Promise.resolve().then(a.bind(a,5630)),Promise.resolve().then(a.bind(a,2476)),Promise.resolve().then(a.bind(a,1615)),Promise.resolve().then(a.bind(a,7961)),Promise.resolve().then(a.bind(a,4164))},4164:(e,i,a)=>{"use strict";a.d(i,{default:()=>n});var s=a(5155),t=a(2115);function n(){let[e,i]=(0,t.useState)(0);return(0,t.useEffect)(()=>{let e=setInterval(()=>{i(e=>(e+1)%3)},2600);return()=>clearInterval(e)},[]),(0,s.jsxs)("section",{className:"sec",children:[(0,s.jsx)("h2",{children:"How it works"}),(0,s.jsxs)("div",{className:"how2",children:[(0,s.jsxs)("div",{className:"how-list",children:[(0,s.jsxs)("div",{className:"hstep",children:[(0,s.jsx)("span",{className:"hn",children:"01"}),(0,s.jsxs)("div",{children:[(0,s.jsx)("b",{children:"Drop two images"}),(0,s.jsx)("p",{children:"A before and an after. Drag them in or click to browse, up to ten in one comparison."})]})]}),(0,s.jsxs)("div",{className:"hstep",children:[(0,s.jsx)("span",{className:"hn",children:"02"}),(0,s.jsxs)("div",{children:[(0,s.jsx)("b",{children:"Drag to compare"}),(0,s.jsx)("p",{children:"Both images lock into the same spot, so the only thing that moves is what your edit changed."})]})]}),(0,s.jsxs)("div",{className:"hstep",children:[(0,s.jsx)("span",{className:"hn",children:"03"}),(0,s.jsxs)("div",{children:[(0,s.jsx)("b",{children:"Share one link"}),(0,s.jsx)("p",{children:"Publish for a permanent link anyone can open, or embed it on your own site."})]})]})]}),(0,s.jsx)("div",{className:"how-demo",children:(0,s.jsxs)("div",{className:"hiw","data-

1phase":e,children:[(0,s.jsxs)("div",{className:"hiw-bar",children:[(0,s.jsxs)("span",{className:"hiw-dots",children:[(0,s.jsx)("i",{}),(0,s.jsx)("i",{}),(0,s.jsx)("i",{})]}),(0,s.jsx)("span",{className:"hiw-tag t0",children:"Upload"}),(0,s.jsx)("span",{className:"hiw-tag t1",children:"Publish"}),(0,s.jsx)("span",{className:"hiw-tag t2",children:"Compare"})]}),(0,s.jsxs)("div",{className:"hiw-stage",children:[(0,s.jsxs)("div",{className:"hiw-phase p0",children:[(0,s.jsxs)("div",{className:"hiw-slot",children:[(0,s.jsx)("img",{className:"hiw-th a",src:"/demo/scene-before.jpg",alt:"",loading:"lazy",decoding:"async"}),(0,s.jsx)("img",{className:"hiw-th b",src:"/demo/scene-after.jpg",alt:"",loading:"lazy",decoding:"async"})]}),(0,s.jsx)("span",{className:"hiw-note",children:"two images added"}),(0,s.jsx)("img",{className:"hiw-drag",src:"/demo/scene-before.jpg",alt:"",loading:"lazy",decoding:"async"}),(0,s.jsx)("span",{className:"hiw-cursor",children:(0,s.jsx)("svg",{viewBox:"0 0 24 24",width:"22",height:"22",children:(0,s.jsx)("path",{d:"M5 3 L5 18.5 L9.4 14.3 L12.4 20.6 L15 19.5 L12 13.2 L18 13.2 Z",fill:"#fff",stroke:"#0b0e1a",strokeWidth:"1.4",strokeLinejoin:"round"})})})]}),(0,s.jsxs)("div",{className:"hiw-phase p1",children:[(0,s.jsxs)("div",{className:"hiw-mini",children:[(0,s.jsx)("img",{src:"/demo/scene-after.jpg",alt:"",loading:"lazy",decoding:"async"}),(0,s.jsx)("span",{className:"mh",children:(0,s.jsx)("img",{src:"/demo/scene-before.jpg",alt:"",loading:"lazy",decoding:"async"})}),(0,s.jsx)("span",{className:"ml"})]}),(0,s.jsx)("button",{className:"hiw-pub",type:"button",children:"Publish"})]}),(0,s.jsxs)("div",{className:"hiw-phase p2",children:[(0,s.jsxs)("div",{className:"hiw-cmp",children:[(0,s.jsx)("img",{className:"a",src:"/demo/scene-after.jpg",alt:"",loading:"lazy",decoding:"async"}),(0,s.jsx)("img",{className:"b",src:"/demo/scene-before.jpg",alt:"",loading:"lazy",decoding:"async"}),(0,s.jsx)("span",{className:"d"}),(0,s.jsxs)("span",{className:"pk",children:[(0,s.jsx)("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round",children:(0,s.jsx)("path",{d:"M14 5 L7 12 L14 19"})}),(0,s.jsx)("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round",children:(0,s.jsx)("path",{d:"M10 5 L17 12 L10 19"})})]})]}),(0,s.jsxs)("div",{className:"hiw-url",children:[(0,s.jsx)("span",{children:"imgico.com/my-mod"}),(0,s.jsx)("b",{children:"copied"})]})]})]})]})})]})]})}},6706:(e,i,a)=>{"use strict";a.r(i),a.d(i,{default:()=>u});var s=a(5155),t=a(4182),n=a(9167),l=a(5199),r=a(2957);let o=e=>(0,s.jsxs)("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:[(0,s.jsx)("rect",{x:"4",y:"4",width:"16",height:"16",rx:"2"}),(0,s.jsx)("path",{d:e})]}),d=o("M12 4v16"),c=o("M4 12h16"),p=o("M19 5 5 19"),h=(e,i)=>(0,s.jsxs)("svg",{className:i,width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.9",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:[(0,s.jsx)("rect",{x:"5",y:"11",width:"14",height:"9",rx:"2"}),(0,s.jsx)("path",{d:e})]}),x=h("M8 11V8a4 4 0 0 1 8 0v3","dz-lk-shut"),m=h("M8 11V8a4 4 0 0 1 7.5-2","dz-lk-open"),g=(0,s.jsx)("svg",{width:"10",height:"10",viewBox:"0 0 14 14",fill:"none",stroke:"#fff",strokeWidth:"2.4",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:(0,s.jsx)("path",{d:"M2.5 7.5l3 3 6-6.5"})});function u(e){let{slots:i,onPickSlot:a,onSlotPointerDown:o,dragSrcUid:h,dragOverUid:u,angle:b,onAngle:f,preset:j,onPreset:v,cross:y,onCross:w,line:k,onLine:z,lineColor:N,lineW:S,onLineW:L,handle:C,onHandle:T,handleColor:D,frame:P,onFrame:W,frameColor:M,frameW:_,onFrameW:F,onPick:R,labelsOn:B,onLabelsOn:E,labelBg:H,onLabelBg:U,linked:A,onLinked:O,labelSize:I,onLabelSize:K,unlocked:V,onUnlocked:q,watermark:Z,onWatermark:G,wmLocked:J,title:Q,onTitle:X,onReset:Y,folderSlot:$,urlSlot:ee,publishSlot:ei,resetSlot:ea}=e,es="display:flex;align-items:center;border:1px solid rgba(255,255,255,.09);border-radius:5px;background:#0b111d;";return(0,s.jsx)("div",{className:"pd-deck pd-on","data-deck":"still",style:(0,t.S)("background:linear-gradient(180deg,#151c2c,#101623);border-top:1px solid rgba(255,255,255,.08);padding:9px 20px 14px;font-family:'Manrope',system-ui,sans-serif;--acc:#3b82f6;--accL:color-mix(in oklab,var(--acc),white 16%);--accD:color-mix(in oklab,var(--acc),black 10%);"),children:(0,s.jsxs)("div",{style:(0,t.S)("display:flex;align-items:stretch;gap:16px;"),children:[(0,s.jsxs)("div",{className:"st-col st-img",children:[(0,s.jsx)("div",{style:(0,t.S)("height:2px;")}),(0,s.jsx)("div",{id:"dzStillSlots",style:(0,t.S)("display:flex;flex-wrap:wrap;gap:9px;"),children:i.map((e,i)=>(0,s.jsx)("div",{className:"dz-slot"+(h===e.uid?" drag-src":"")+(u===e.uid&&h!==e.uid?" drag-over":""),"data-i":i,"data-uid":e.uid,role:"button",tabIndex:0,"aria-label":e.url?"Replace image ".concat(i+1):"Add image ".concat(i+1),"data-tip-title":e.url?"Replace image":"Add image","data-tip":e.url?"Click to swap this image for another.":"Click to add an image to this slot.",onPointerDown:o?e=>o(e,i):void 0,onClick:o?void 0:()=>a(i),onKeyDown:e=>

1{("Enter"===e.key||" "===e.key)&&(e.preventDefault(),a(i))},style:{...(0,t.S)(e.url?"position:relative;width:72px;height:72px;border-radius:5px;overflow:hidden;border:1px solid rgba(255,255,255,.09);display:flex;align-items:center;justify-content:center;cursor:pointer;":"position:relative;width:72px;height:72px;border-radius:5px;border:1.5px dashed rgba(255,255,255,.34);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#8a95ac;font-size:20px;font-weight:300;"),...e.url?{background:"url('".concat(e.url,"') center/cover no-repeat,#28324c")}:null},children:e.url?(0,s.jsx)("div",{style:(0,t.S)("position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:4px;background:rgba(6,9,15,.85);color:#eef1f8;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;"),children:i+1}):"+"},i))})]}),(0,s.jsx)("div",{className:"dz-rule"}),(0,s.jsxs)("div",{className:"st-col st-split",children:[(0,s.jsx)("span",{className:"dz-colh",children:"Split image"}),(0,s.jsx)("div",{style:(0,t.S)("margin-top:11px;font-size:11px;color:#dfe4ee;font-weight:600;"),children:"Rotate"}),(0,s.jsxs)("div",{"data-tip-title":"Rotate","data-tip":"Turn the seam. 0 is a straight vertical split; 90 is horizontal.",style:(0,t.S)("display:flex;align-items:center;gap:8px;margin-top:7px;"),children:[(0,s.jsx)(n.iW,{value:b,min:-90,max:90,step:1,label:"Rotate",onChange:f,cls:"dz-strack",extra:"flex:1;",data:{"data-k":"rotate","data-min":"-90","data-max":"90"}}),(0,s.jsx)(n._h,{value:b,min:-90,max:90,onChange:f,label:"Rotate",tipTitle:"Rotate",tip:"Nudge the seam angle one degree at a time.",cls:"dz-stepper",data:{"data-k":"rotate","data-min":"-90","data-max":"90"},wrap:es+"flex:none;",btn:"width:22px;height:26px;background:transparent;border:none;color:#8a93a6;cursor:pointer;font-size:13px;font-family:inherit;",val:"min-width:22px;text-align:center;font-size:11.5px;color:#eef1f8;"}),(0,s.jsx)("span",{style:(0,t.S)("font-size:11px;color:#8a93a6;flex:none;"),children:"\xb0"})]}),(0,s.jsx)("div",{className:"dz-sseg",style:(0,t.S)("display:flex;padding:3px;background:#0b111d;border:1px solid rgba(255,255,255,.08);border-radius:5px;gap:3px;margin-top:10px;"),children:[["vertical","Vertical",d],["horizontal","Horizontal",c],["diagonal","Diagonal",p]].map(e=>{let[i,a,n]=e;return(0,s.jsxs)("button",{type:"button",className:j!==i||y?void 0:"on","data-v":i,"data-tip-title":a,"data-tip":"Split the image ".concat("vertical"===i?"down the middle.":"horizontal"===i?"across the middle.":"corner to corner."),"aria-pressed":j===i&&!y,onClick:()=>v(i),style:(0,t.S)("flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0;border-radius:4px;font-size:10.5px;font-weight:600;border:none;cursor:pointer;font-family:inherit;"+(j!==i||y?"background:transparent;color:#8a93a6;":"background:#243049;color:#eef1f8;")),children:[n,a]},i)})}),(0,s.jsx)("button",{type:"button",className:"dz-cross","data-tip-title":"Cross","data-tip":"Four images, one per quadrant.","aria-pressed":y,onClick:w,style:(0,t.S)("width:100%;margin-top:10px;padding:8px;border-radius:5px;background:#1a2334;color:#c7cede;font-weight:700;font-size:11.5px;border:1px solid rgba(255,255,255,.09);cursor:pointer;font-family:inherit;"),children:"Cross (up to 4 images)"})]}),(0,s.jsx)("div",{className:"dz-rule"}),(0,s.jsxs)("div",{className:"st-col st-dhf",children:[(0,s.jsxs)("div",{style:(0,t.S)("width:66px;"),children:[(0,s.jsx)(n.fU,{on:k,label:"Divider",onToggle:z,tipTitle:"Divider",tip:"Draw a line along the seam between the images."}),(0,s.jsx)(n.zb,{color:N,label:"Divider colour",tipTitle:"Divider colour",tip:"Pick the colour of the line along the seam.",disabled:!k,onOpen:e=>R("Divider",e)}),(0,s.jsx)("div",{style:(0,t.S)("margin-top:11px;display:flex;justify-content:center;"),children:(0,s.jsx)(n._h,{value:S,min:1,max:80,onChange:L,label:"Divider width",tipTitle:"Divider width",tip:"Thickness of the divider line in pixels, at full resolution.",cls:"dz-stepper",data:{"data-min":"1","data-max":"80"},wrap:es,btn:"width:20px;height:24px;background:transparent;border:none;color:#8a93a6;cursor:pointer;font-size:12px;font-family:inherit;",val:"min-width:16px;text-align:center;font-size:11px;color:#eef1f8;"})})]}),(0,s.jsxs)("div",{style:(0,t.S)("width:60px;"),children:[(0,s.jsx)(n.fU,{on:C,label:"Handle",onToggle:T,tipTitle:"Handle",tip:"Show the round grip where the seam meets the edge."}),(0,s.jsx)(n.zb,{color:D,label:"Handle colour",tipTitle:"Handle colour",tip:"Pick the colour of the round grip.",disabled:!C,onOpen:e=>R("Handle",e)})]}),(0,s.jsxs)("div",{style:(0,t.S)("width:66px;"),children:[(0,s.jsx)(n.fU,{on:P,label:"Frame",onToggle:W,tipTitle:"Frame",tip:"Draw a border around the finished image."}),(0,s.jsx)(n.zb,{color:M,label:"Frame colour",tipTitle:"Frame colour",tip:"Pick the colour of the border around the image.",disabled:!P,onOpen:e=>R("Frame",e)}),(0,s.jsx)("div",{style:(0,t.S)("margin-top:11px;display:flex;justify-content:center;"),children:(0,s.jsx)(n._h,{value:_,min:1,max:80,onChange:F,label:"Frame width",tipTitle:"Frame width",tip:"Thickness of the frame in pixels, at full resolution.",cls:"dz-stepper",data:{"data-min":"1","data-max":"80"},wrap:es,btn:"width:20px;height:24px;background:transparent;border:none;color:#8a93a6;cursor:pointer;font-size:12px;font-family:inherit;",val:"min-width:16px;text-align:center;font-size:11px;color:#eef1f8;"})})]})]}),(0,s.jsx)("div",{className:"dz-rule"}),(0,s.jsxs)("div",{style:(0,t.S)("width:158px;flex:none;"),children:[(0,s.jsx)("span",{className:"dz-colh",children:"Labels"}),(0,s.jsxs)("button",{type:"button",className:"dz-unlockbtn"+(V?" is-on":""),"data-tip-title":"Unlock labels","data-tip":"Drag the labels anywhere on the image instead of keeping them in the corners.","aria-pressed":V,onClick:()=>q(!V),style:(0,t.S)("width:100%;margin-top:9px;padding:8px;border-radius:5px;background:#1a2334;color:#c7cede;font-weight:700;font-size:11.5px;border:1px solid rgba(255,255,255,.09);cursor:pointer;font-family:inherit;"),children:[x,m,(0,s.jsx)("span",{className:"dz-lk-txt",children:V?"Lock labels":"Unlock labels"})]}),(0,s.jsxs)("div",{style:(0,t.S)("margin-top:11px;display:flex;flex-direction:column;gap:9px;"),children:[(0,s.jsx)(n.zx,{label:"Show labels",on:B,onToggle:E,tipTitle:"Show labels",tip:"Show the image names on the finished image.",style:"display:flex;align-items:center;justify-content:space-between;"}),(0,s.jsx)(n.zx,{label:"Label background",on:H,disabled:!B,onToggle:U,tipTitle:"Label background",tip:"Put a dar

1k panel behind each label so it stays readable over a busy image.",style:"display:flex;align-items:center;justify-content:space-between;"}),(0,s.jsx)(n.zx,{label:"Link labels",on:A,disabled:!B,onToggle:O,tipTitle:"Link labels",tip:"Keep every label the same size and style.",style:"display:flex;align-items:center;justify-content:space-between;"}),(0,s.jsxs)("div",{"data-tip-title":"Label size","data-tip":"Scale the label text up or down.",style:(0,t.S)("margin-top:2px;"),children:[(0,s.jsxs)("div",{className:"dz-labrow",style:(0,t.S)("display:flex;justify-content:space-between;font-size:11px;margin-bottom:6px;"),children:[(0,s.jsx)("span",{style:(0,t.S)("color:#dfe4ee;font-weight:600;"),children:"Label size"}),(0,s.jsxs)("span",{className:"dz-sval-txt",style:(0,t.S)("color:#8a93a6;"),children:[I,"%"]})]}),(0,s.jsx)(n.iW,{value:I,min:50,max:200,step:1,label:"Label size",disabled:!B,onChange:K,cls:"dz-strack",data:{"data-k":"lsize","data-min":"50","data-max":"200"}})]})]})]}),(0,s.jsx)("div",{className:"dz-rule"}),(0,s.jsxs)("div",{style:(0,t.S)("width:322px;flex:none;"),children:[(0,s.jsxs)("div",{style:(0,t.S)("display:flex;align-items:center;justify-content:space-between;"),children:[(0,s.jsx)("span",{className:"dz-colh",children:"Publish & share"}),null!=ea?ea:(0,s.jsx)(l.A,{onReset:Y})]}),(0,s.jsx)("div",{style:(0,t.S)("margin-top:11px;"),children:(0,s.jsx)("input",{placeholder:"Title (optional)",value:Q,maxLength:120,onChange:e=>X(e.target.value),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),e.currentTarget.blur())},style:(0,t.S)("width:100%;padding:8px 11px;border-radius:5px;background:#0b111d;border:1px solid rgba(255,255,255,.09);color:#eef1f8;font-size:12px;font-family:inherit;outline:none;")})}),(0,s.jsxs)("div",{className:"dz-pubrow3",style:(0,t.S)("display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:8px;"),children:[(0,s.jsxs)("button",{type:"button",className:"dz-wmbtn"+(J||Z?" is-on":"")+(J?" dz-locked":""),"data-pro":"watermark","data-tip-title":J?"Watermark (Pro)":"Watermark","data-tip":"Exports carry the imgico watermark. Untick to remove it.",role:"checkbox","aria-checked":!!J||Z,onClick:()=>G(!Z),style:(0,t.S)("display:inline-flex;align-items:center;gap:7px;padding:7px 2px;background:none;border:none;color:#dfe4ee;font-weight:600;font-size:11.5px;cursor:pointer;font-family:inherit;white-space:nowrap;margin-right:auto;"),children:[(0,s.jsx)("span",{className:"dz-wmbox",children:g}),"Watermark"]}),$,ee]}),(0,s.jsx)("div",{style:(0,t.S)("display:flex;flex-direction:row-reverse;gap:8px;margin-top:8px;"),children:ei})]}),(0,s.jsx)(r.A,{})]})})}},7314:()=>{},7961:(e,i,a)=>{"use strict";a.d(i,{default:()=>d});var s=a(5155),t=a(9498),n=a(6442),l=a(5289),r=a(6706);let o={CompareSlider:n.default,SliderDeck:l.default,StillDeck:r.default};function d(e){return(0,s.jsx)(t.default,{...e,panes:o})}},9755:()=>{}},e=>{e.O(0,[9453,8022,219,3727,6958,2619,1677,9966,6068,8191,4061,9498,5933,5289,8441,1255,7358],()=>e(e.s=293)),_N_E=e.O()}]);