diff --git a/docs/825.js b/docs/825.js
new file mode 100644
index 0000000..30e1bfb
--- /dev/null
+++ b/docs/825.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkvisualization_collection=self.webpackChunkvisualization_collection||[]).push([[825],{11590:(e,t,s)=>{s.d(t,{A:()=>c});s(96540);var n=s(6442);const r="ModuleTitle_container__7ZCMv";var i=s(74848);const c=e=>{const t=(0,n.A)(),{intlTitle:s,style:c={}}=e;return(0,i.jsx)("div",{className:r,style:c,children:t.formatMessage({id:s})})}},59904:(e,t,s)=>{s.r(t),s.d(t,{default:()=>Tr});var n=s(96540),r=s(46935),i=s(40961),c=s(11590);const o=s.p+"images/6765fa3b.png",a="MagnifyingGlass_container__z7+HK",l="MagnifyingGlass_content__csBAU",d="MagnifyingGlass_smallBox__1rC23",u="MagnifyingGlass_mask__kbQ6H",p="MagnifyingGlass_floatBox__Msmv9",x="MagnifyingGlass_bigBox__dtenq";var f=s(74848);const m=()=>{const{scrollTop:e,headHeight:t}=(0,r.S)(),s=(0,n.useRef)(null),m=(0,n.useRef)(null),g=(0,n.useRef)(null),[h,_]=(0,n.useState)(!1);return(0,f.jsx)("div",{className:a,children:(0,f.jsxs)("div",{className:l,children:[(0,f.jsxs)("div",{className:d,ref:s,children:[(0,f.jsx)(c.A,{intlTitle:"page.htmlVision.interactiveDesign.magnifyingGlass",style:{top:"-80px",left:"114%"}}),(0,f.jsx)("div",{className:u,onMouseOver:()=>{_(!0)},onMouseMove:n=>{const r=i.findDOMNode(s.current),c=i.findDOMNode(m.current),{offsetWidth:o,offsetHeight:a}=r,{offsetWidth:l,offsetHeight:d}=c;let u=n.clientX-r.offsetLeft-l/2,p=0;p=e<r.offsetTop-t-100?n.clientY-d/2-r.offsetTop-e:n.clientY-t-d/2+(e-r.offsetTop+t),u<0?u=0:u>o-l&&(u=o-l),p<0?p=0:p>a-d&&(p=a-d),c.style.left=u+"px",c.style.top=p+"px";const x=u/(o-l),f=p/(a-d),h=i.findDOMNode(g.current),_=h.children[0];_.style.left=-x*(_.offsetWidth-h.offsetWidth)+"px",_.style.top=-f*(_.offsetHeight-h.offsetHeight)+"px"},onMouseLeave:()=>{_(!1)}}),(0,f.jsx)("div",{className:p,style:{visibility:h?"visible":"hidden"},ref:m}),(0,f.jsx)("img",{src:o})]}),(0,f.jsx)("div",{className:x,ref:g,children:(0,f.jsx)("img",{src:o,style:{visibility:h?"visible":"hidden"}})})]})})};var g=s(55874);const h="CropImage_container__agQZ5",_="CropImage_leftBox__rxH+K",v="CropImage_img1__vvyEU",j="CropImage_img2__CuOAQ",y="CropImage_cropBox__A4fdb",N="CropImage_dot__TnuYQ",A="CropImage_leftUp__RO+TV",M="CropImage_up__fR18N",b="CropImage_rightUp__5Btk7",w="CropImage_right__nbAwk",C="CropImage_rightDown__8vsgu",k="CropImage_down__0RD60",D="CropImage_leftDown__Ssc21",R="CropImage_left__qEy8B",B="CropImage_rightBox__tH7SB";var T=function(e){return e[e.leftUp=0]="leftUp",e[e.up=1]="up",e[e.rightUp=2]="rightUp",e[e.right=3]="right",e[e.rightDown=4]="rightDown",e[e.down=5]="down",e[e.leftDown=6]="leftDown",e[e.left=7]="left",e}(T||{});const L=()=>{const{scrollTop:e}=(0,r.S)(),t=(0,n.useRef)(0),s=(0,n.useRef)(0),o=(0,n.useRef)(!1),a=(0,n.useRef)(),l=(0,n.useRef)(!1),d=(0,n.useRef)(null),u=(0,n.useRef)(null),p=(0,n.useRef)(null),x=(0,n.useRef)(null),m=(0,n.useRef)(null),L=(0,n.useRef)(0),S=(0,n.useRef)(0),I=(0,n.useRef)(0),E=(0,n.useRef)(0),H=e=>{var t=e.offsetLeft,s=e.offsetTop;let n=e.offsetParent;for(;null!=n;)t+=n.offsetLeft,s+=n.offsetTop,n=n.offsetParent;return{left:t,top:s}},P=e=>{let s=e.clientX;const n=i.findDOMNode(u.current),{left:r}=H(n),c=r,o=c+t.current-4;s>o?s=o:s<c&&(s=c);const a=i.findDOMNode(x.current),l=a.offsetWidth-2,d=s-l-H(a).left;a.style.width=l+d+"px"},W=t=>{let s=t.clientY+e;const n=i.findDOMNode(u.current),{top:r}=H(n),c=r,o=i.findDOMNode(x.current),a=H(o).top,l=a+o.offsetHeight-4;s<c?s=c:s>l&&(s=l);const d=o.offsetHeight;o.style.height=d+a-s+"px",o.style.top=o.offsetTop+s-a+"px"},Y=e=>{let t=e.clientX;const s=i.findDOMNode(u.current),{left:n}=H(s),r=n,c=i.findDOMNode(x.current),o=H(c).left,a=o+c.offsetWidth-4;t<r?t=r:t>a&&(t=a);const l=c.offsetWidth;c.style.width=l+o-t+"px",c.style.left=c.offsetLeft+t-o+"px"},O=t=>{let n=t.clientY+e;const r=i.findDOMNode(u.current),{top:c}=H(r),o=c,a=o+s.current-4;n<o?n=o:n>a&&(n=a);const l=i.findDOMNode(x.current),d=l.offsetHeight-2,p=n-d-H(l).top;l.style.height=d+p+"px"},F=()=>{const e=i.findDOMNode(x.current),{offsetWidth:t,offsetHeight:s,offsetLeft:n,offsetTop:r}=e,c=n+t,o=r+s;i.findDOMNode(p.current).style.clip="rect(".concat(r,"px,").concat(c,"px,").concat(o,"px,").concat(n,"px)")},V=()=>{const e=i.findDOMNode(x.current),{offsetWidth:t,offsetHeight:s,offsetLeft:n,offsetTop:r}=e,c=n+t,o=r+s,a=i.findDOMNode(m.current);a.style.top="".concat(-r,"px"),a.style.left="".concat(-n,"px"),a.style.clip="rect(".concat(r,"px,").concat(c,"px,").concat(o,"px,").concat(n,"px)")},X=(e,t)=>{e.stopPropagation(),o.current=!0,a.current=t},z=()=>{o.current=!1,l.current=!1};return(0,n.useEffect)((()=>{const e=i.findDOMNode(u.current),{offsetWidth:n,offsetHeight:r}=e;t.current=n,s.current=r}),[]),(0,f.jsxs)("div",{className:h,onMouseMove:e=>{if(l.current){const n=i.findDOMNode(x.current),{offsetWidth:r,offsetHeight:c}=n,o=e.clientX-L.current,a=e.clientY-S.current,l=E.current+a,d=I.current+o;l<0?n.style.top="0px":l>s.current-c-2?n.style.top="".concat(s.current-c-2,"px"):n.style.top="".concat(l,"px"),d<0?n.style.left="0px":d>t.current-r-2?n.style.left="".concat(t.current-r-2,"px"):n.style.left="".concat(d,"px"),F(),V()}if(o.current){switch(a.current){case T.right:P(e);break;case T.up:W(e);break;case T.left:Y(e);break;case T.down:O(e);break;case T.leftUp:Y(e),W(e);break;case T.leftDown:Y(e),O(e);break;case T.rightUp:P(e),W(e);break;case T.rightDown:P(e),O(e)}F(),V()}},onMouseUp:z,onMouseLeave:z,ref:d,children:[(0,f.jsx)(c.A,{intlTitle:"page.htmlVision.interactiveDesign.dragAndDropClipBox"}),(0,f.jsxs)("div",{className:_,ref:u,children:[(0,f.jsx)("img",{src:g,className:v}),(0,f.jsx)("img",{src:g,className:j,ref:p}),(0,f.jsxs)("div",{className:y,onMouseDown:e=>{L.current=e.clientX,S.current=e.clientY;const t=i.findDOMNode(x.current);E.current=t.offsetTop,I.current=t.offsetLeft,l.current=!0},ref:x,children:[(0,f.jsx)("div",{className:"".concat(N," ").concat(A),onMouseDown:e=>X(e,T.leftUp)}),(0,f.jsx)("div",{className:"".concat(N," ").concat(M),onMouseDown:e=>X(e,T.up)}),(0,f.jsx)("div",{className:"".concat(N," ").concat(b),onMouseDown:e=>X(e,T.rightUp)}),(0,f.jsx)("div",{className:"".concat(N," ").concat(w),onMouseDown:e=>X(e,T.right)}),(0,f.jsx)("div",{className:"".concat(N," ").concat(C),onMouseDown:e=>X(e,T.rightDown)}),(0,f.jsx)("div",{className:"".concat(N," ").concat(k),onMouseDown:e=>X(e,T.down)}),(0,f.jsx)("div",{className:"".concat(N," ").concat(D),onMouseDown:e=>X(e,T.leftDown)}),(0,f.jsx)("div",{className:"".concat(N," ").concat(R),onMouseDown:e=>X(e,T.left)})]})]}),(0,f.jsx)("div",{className:B,children:(0,f.jsx)("img",{src:g,ref:m})})]})};var S=s(6442),I=s(60505);const E=s.p+"images/e55cd06c.jpg",H=s.p+"images/f44f33e9.jpg",P=s.p+"images/ccd69096.jpg",W=s.p+"images/dbd623e3.jpg",Y=s.p+"images/d327c52a.jpg",O=s.p+"images/f160c0ae.jpg",F={container:"DragShopping_container__IbTIV",content:"DragShopping_content__VVnMY",bookBox:"DragShopping_bookBox__SDdDi",shoppingBox:"DragShopping_shoppingBox__3DBFv",tableHead:"DragShopping_tableHead__lYIfd",tableCell:"DragShopping_tableCell__6tWCA",tableRow:"DragShopping_tableRow__6Qo3x",total:"DragShopping_total__+sd3-",tip:"DragShopping_tip__vp+8T"},{GridBox:V}=I.A,X=[{id:"1",name:"一个星期学会吉他弹唱",price:68,imgUrl:E},{id:"2",name:"柳公权楷书教程入门",price:45,imgUrl:H},{id:"3",name:"世说新语",price:52,imgUrl:P},{id:"4",name:"名人传",price:124,imgUrl:W},{id:"5",name:"骆驼祥子",price:168,imgUrl:Y},{id:"6",name:"阅微堂笔记",price:56,imgUrl:O}],z=()=>{const e=(0,S.A)(),[t,s]=(0,n.useState)([]),[r,i]=(0,n.useState)(!1),[o,a]=(0,n.useState)(0);return(0,f.jsxs)("div",{className:F.container,children:[(0,f.jsx)(c.A,{intlTitle:"page.htmlVision.interactiveDesign.dragAndDropShopping"}),(0,f.jsxs)("div",{className:F.content,children:[(0,f.jsx)(I.A,{differentScreenCols:[6,6,3,3,3],rowSpace:0,colSpace:0,children:X.map(((e,t)=>{const{id:s,name:n,price:r,imgUrl:i}=e;return(0,f.jsx)(V,{children:(0,f.jsxs)("div",{className:F.bookBox,draggable:"true",onDragStart:e=>((e,t)=>{e=e||window.event;const s=X[t];e.dataTransfer.setData("id",s.id),e.dataTransfer.effectAllowed="copy"})(e,t),children:[(0,f.jsx)("img",{src:i,draggable:"false"}),(0,f.jsx)("p",{children:n}),(0,f.jsx)("p",{children:"￥".concat(r)})]})},s)}))}),(0,f.jsxs)("div",{className:F.shoppingBox,style:r?{border:"1px solid #DD5044",color:"#DD5044"}:{},onDragOver:e=>{e.preventDefault(),r||i(!0)},onDragLeave:e=>{e.preventDefault(),r&&i(!1)},onDrop:e=>{e.preventDefault();const n=e.dataTransfer.getData("id");let r=!1,c=0;const l=t.map((e=>e.id===n?(r=!0,c=e.price,{...e,num:e.num+1}):e));if(!r){let e;for(let t=X.length-1;t>=0;t--){const s=X[t];if(s.id===n){c=s.price,e=s;break}}e&&l.unshift({...e,num:1})}s(l),i(!1),a(o+c)},children:[(0,f.jsxs)("div",{className:F.tableHead,children:[(0,f.jsx)("div",{className:F.tableCell,children:e.formatMessage({id:"page.htmlVision.interactiveDesign.title"})}),(0,f.jsx)("div",{className:F.tableCell,children:e.formatMessage({id:"page.htmlVision.interactiveDesign.price"})}),(0,f.jsx)("div",{className:F.tableCell,children:e.formatMessage({id:"page.htmlVision.interactiveDesign.count"})})]}),t.map((e=>{const{id:t,num:s,name:n,price:r}=e;return(0,f.jsxs)("div",{className:F.tableRow,children:[(0,f.jsx)("div",{className:F.tableCell,children:n}),(0,f.jsx)("div",{className:F.tableCell,children:"￥".concat(r)}),(0,f.jsx)("div",{className:F.tableCell,children:s})]},t)})),t.length>0&&(0,f.jsx)("div",{className:F.total,children:(0,f.jsxs)("span",{className:F.totalMoney,children:[e.formatMessage({id:"page.htmlVision.interactiveDesign.total"}),"：￥",(0,f.jsx)("span",{children:o})]})}),(0,f.jsx)("div",{className:F.tip,children:r?e.formatMessage({id:"page.htmlVision.interactiveDesign.addingToCart"}):e.formatMessage({id:"page.htmlVision.interactiveDesign.dragToThisToBuy"})})]})]})]})};var U=s(91844),G=s(73776);const q=s.p+"images/70af4d01.jpg",Q="MouseHover1_container__D7VNa",J="MouseHover1_content__qBPDJ",Z="MouseHover1_title__cOVT0",K="MouseHover1_bottom__Ua8lo",$="MouseHover1_right__D0ca6",ee="MouseHover1_cursor__orRgp",te=()=>{const e=(0,S.A)(),t=(0,n.useRef)(null),s=(0,n.useRef)(null),{showCursor:r,cursorSize:i,cursorDefaultRadius:c,cursorBigRadius:o,setCursorSize:a,onMouseEnter:l,onMouseMove:d,onMouseLeave:u}=(0,U.A)(t,s),p=()=>{a("big")},x=()=>{a("default")};return(0,f.jsxs)("div",{className:Q,onMouseEnter:l,onMouseMove:d,onMouseLeave:u,ref:t,children:[(0,f.jsxs)("div",{className:J,children:[(0,f.jsx)("p",{className:Z,onMouseEnter:p,onMouseLeave:x,children:e.formatMessage({id:"page.htmlVision.interactiveDesign.personalArticle"})}),(0,f.jsxs)("div",{className:K,children:[(0,f.jsx)("img",{src:q,alt:"",onMouseEnter:p,onMouseLeave:x}),(0,f.jsx)("div",{className:$,children:G.O7.map(((e,t)=>(0,f.jsx)("a",{href:e.href,target:"_blank",onMouseEnter:p,onMouseLeave:x,children:e.name},t)))})]})]}),(0,f.jsx)("div",{className:ee,style:{visibility:r?"visible":"hidden",width:"".concat("big"===i?2*o:2*c,"px"),height:"".concat("big"===i?2*o:2*c,"px")},ref:s})]})},se="MouseHover2_container__HD+sM",ne="MouseHover2_content__UKyly",re="MouseHover2_item__lglpx",ie="MouseHover2_box__dKAMr",ce=()=>{const e=(0,n.useRef)(null),t=(0,n.useCallback)((t=>{if(e.current){const{clientX:s,clientY:n}=t,{children:r}=e.current;Array.prototype.forEach.call(r,(e=>{const{x:t,y:r}=e.getBoundingClientRect();e.setAttribute("style","--x: ".concat(s-t,"px; --y: ").concat(n-r,"px"))}))}}),[]);return(0,n.useEffect)((()=>(window.addEventListener("mousemove",t),()=>{window.removeEventListener("mousemove",t)})),[]),(0,f.jsx)("div",{className:se,children:(0,f.jsx)("div",{className:ne,ref:e,children:G.O7.map(((e,t)=>(0,f.jsx)("div",{className:re,children:(0,f.jsxs)("div",{className:ie,children:[(0,f.jsx)("div",{children:e.name}),(0,f.jsx)("a",{href:e.href,target:"_blank",children:e.href})]})},t)))})})},oe="card_container__5Q3kU",ae="card_content__rVMcc",le=e=>{const{url:t}=e,s=(0,n.useRef)(null),r=(0,n.useCallback)((e=>{if(s.current){const{clientX:n,clientY:r}=e,{x:i,y:c}=s.current.getBoundingClientRect();s.current.setAttribute("style",'--url: url("'.concat(t,'"); --x: ').concat(n-i,"px; --y: ").concat(r-c,"px"))}}),[]);return(0,n.useEffect)((()=>(s.current&&t&&s.current.setAttribute("style",'--url: url("'.concat(t,'")')),window.addEventListener("mousemove",r),()=>{window.removeEventListener("mousemove",r)})),[]),(0,f.jsx)("div",{className:oe,ref:s,children:(0,f.jsx)("div",{className:ae})})},de=s.p+"images/6a5e2167.png",ue=s.p+"images/4c6b00fb.png",pe=s.p+"images/2d40aaff.png",xe="MouseHover3_container__AfDAp",fe="MouseHover3_content__sQ9Jr",me=[de,ue,pe],ge=()=>(0,f.jsx)("div",{className:xe,children:(0,f.jsx)("div",{className:fe,children:me.map(((e,t)=>(0,f.jsx)(le,{url:e},t)))})}),he="card_container__Ego-o",_e="card_content__ZjzyA",ve=36,je=e=>{const{url:t}=e,s=(0,n.useRef)(null),r=(0,n.useRef)(0),i=(0,n.useRef)(0),c=(0,n.useRef)(0),o=()=>{if(s.current){const{clientWidth:e,clientHeight:n}=s.current;let a=i.current,l=c.current;c.current<=0?i.current>=e?(a=e,l=ve):a+ve>e?(l=a+ve-e,a=e):(a+=ve,l=0):i.current>=e?c.current>=n?(a=e-ve,l=n):l+ve>n?(a=e-(l+ve-n),l=n):(a=e,l+=ve):c.current>=n?i.current<=0?(a=0,l=n-ve):a-ve<0?(l=n-(ve-a),a=0):(a-=ve,l=n):c.current<=0?(a=ve,l=0):l-ve<0?(a=ve-l,l=0):(a=0,l=Math.max(l-ve,0)),i.current=a,c.current=l,s.current.setAttribute("style",'--url: url("'.concat(t,'"); --x: ').concat(a,"px; --y: ").concat(l,"px")),r.current=window.requestAnimationFrame(o)}},a=(0,n.useCallback)((()=>{s.current&&(r.current=window.requestAnimationFrame(o))}),[]),l=(0,n.useCallback)((()=>{s.current&&(r.current&&window.cancelAnimationFrame(r.current),s.current.setAttribute("style",'--url: url("'.concat(t,'"); --x: 0px; --y: 0px')))}),[]);return(0,n.useEffect)((()=>(s.current&&t&&s.current.setAttribute("style",'--url: url("'.concat(t,'")')),()=>{r.current&&window.cancelAnimationFrame(r.current)})),[]),(0,f.jsx)("div",{className:he,onMouseEnter:a,onMouseLeave:l,ref:s,children:(0,f.jsx)("div",{className:_e})})},ye="MouseHover4_container__ix6z4",Ne="MouseHover4_content__zXQBZ",Ae=[de,ue,pe],Me=()=>(0,f.jsx)("div",{className:ye,children:(0,f.jsx)("div",{className:Ne,children:Ae.map(((e,t)=>(0,f.jsx)(je,{url:e},t)))})}),be="SlideButtonTab_container__eT4SM",we="SlideButtonTab_content__6sIYs",Ce="SlideButtonTab_btn__tD8IC",ke="SlideButtonTab_actived__RWXqG",De=new Array(4).fill(0),Re=()=>{const e=(0,n.useRef)(null),[t,s]=(0,n.useState)(0),r=(0,n.useRef)(0);return(0,n.useEffect)((()=>{if(e.current){const{width:t}=e.current.getBoundingClientRect(),s=(t-32-8*(2*De.length-2))/De.length;e.current.style.setProperty("--btnWidth","".concat(s,"px")),r.current=s}}),[]),(0,f.jsxs)("div",{className:be,children:[(0,f.jsx)(c.A,{intlTitle:"page.htmlVision.interactiveDesign.swipeTab"}),(0,f.jsx)("div",{className:we,ref:e,children:De.map(((n,i)=>(0,f.jsxs)("div",{className:"".concat(Ce," ").concat(t===i?ke:""),onClick:()=>(n=>{if(e.current&&t!==n){const i="".concat(16+r.current*n+8*n*2,"px");e.current.style.setProperty("--groove-left",i);let c="0deg";c=n<t?"-8deg":"8deg",e.current.style.setProperty("--wraper-rotate",c),window.setTimeout((()=>{e.current&&e.current.style.setProperty("--wraper-rotate","0deg")}),600),s(n)}})(i),children:["Button",i+1]},i)))})]})};var Be=s(68777);const Te=s.p+"images/a601ac6c.png",Le=s.p+"images/d1a0696c.png",Se=s.p+"images/e430aae1.png",Ie=s.p+"images/b2b0669d.png",Ee=s.p+"images/f354e378.png",He=s.p+"images/c6c82aab.png",Pe=s.p+"images/7075d257.png",We=s.p+"images/b637b49e.png",Ye="FlipBook_container__bOMio",Oe="FlipBook_pages__Ls1i4",Fe="FlipBook_paper__qnIh0",Ve="FlipBook_page__5K+Jz",Xe="FlipBook_left-show-front-page__I3ToF",ze="FlipBook_right-show-back-page__crJO-",Ue="FlipBook_left-show-back-page__yRt8k",Ge="FlipBook_right-show-front-page__pTHC0",qe="FlipBook_left-hide-front-page__kQs3M",Qe="FlipBook_left-hide-back-page__lMGif",Je="FlipBook_right-hide-front-page__8XaW9",Ze="FlipBook_btns__9Cs+L",Ke="FlipBook_btn__QmvzH",$e=[[Te,Le],[Se,Ie],[Ee,He],[Pe,We]],et=[Xe,Ue,Ge,ze,qe,Qe,Je,"FlipBook_right-hide-back-page__56D1v"],tt=()=>{const e=(0,S.A)(),t=(0,n.useRef)(null),s=(0,n.useRef)(0),r=(0,n.useRef)(!1),i=()=>{if(t.current){const{children:e}=t.current;Array.prototype.forEach.call(e,((e,t)=>{if(e.attributes&&e.attributes.length){var n,r;if(e.attributes.getNamedItem("data-left"))null===(n=e.attributes)||void 0===n||n.removeNamedItem("data-left");if(e.attributes.getNamedItem("data-right"))null===(r=e.attributes)||void 0===r||r.removeNamedItem("data-right")}const{children:i}=e;if(t===s.current){var c,o,a,l;const t=document.createAttribute("data-left");t.nodeValue="true",e.attributes.setNamedItem(t),e.style.transform="perspective(1000px) rotateY(-180deg)",e.style.zIndex="4",null===(c=i[0].classList)||void 0===c||c.remove(...et),null===(o=i[0].classList)||void 0===o||o.add(Ue),null===(a=i[1].classList)||void 0===a||a.remove(...et),null===(l=i[1].classList)||void 0===l||l.add(Xe)}else if(t===s.current+1){var d,u,p,x;const t=document.createAttribute("data-right");t.nodeValue="true",e.attributes.setNamedItem(t),e.style.transform="perspective(1000px) rotateY(0deg)",e.style.zIndex="4",null===(d=i[0].classList)||void 0===d||d.remove(...et),null===(u=i[0].classList)||void 0===u||u.add(Ge),null===(p=i[1].classList)||void 0===p||p.remove(...et),null===(x=i[1].classList)||void 0===x||x.add(ze)}else if(t<s.current){var f,m,g,h;e.style.transform="perspective(1000px) rotateY(-180deg)",t===s.current-1?e.style.zIndex="3":e.style.zIndex="2",null===(f=i[0].classList)||void 0===f||f.remove(...et),null===(m=i[0].classList)||void 0===m||m.add(Qe),null===(g=i[1].classList)||void 0===g||g.remove(...et),null===(h=i[1].classList)||void 0===h||h.add(qe)}else{var _,v,j,y;e.style.transform="perspective(1000px) rotateY(0deg)",t===s.current+2?e.style.zIndex="3":e.style.zIndex="2",null===(_=i[0].classList)||void 0===_||_.remove(...et),null===(v=i[0].classList)||void 0===v||v.add(Je),null===(j=i[1].classList)||void 0===j||j.remove(...et),null===(y=i[1].classList)||void 0===y||y.add(Qe)}}))}r.current=!1};return(0,n.useLayoutEffect)((()=>{const e=document.styleSheets[0];e.insertRule("@keyframes flip-to-left {\n        from {\n          transform: perspective(1000px) rotateY(0);\n        }\n        to {\n          transform: perspective(1000px) rotateY(-180deg);\n        }\n      }"),e.insertRule("@keyframes flip-to-right {\n        from {\n          transform: perspective(1000px) rotateY(-180deg);\n        }\n        to {\n          transform: perspective(1000px) rotateY(0);\n        }\n      }"),r.current=!0,i()}),[]),(0,f.jsxs)("div",{className:Ye,children:[(0,f.jsx)(c.A,{intlTitle:"page.htmlVision.interactiveDesign.flipBoook"}),(0,f.jsx)("div",{className:Oe,ref:t,children:$e.map(((e,t)=>(0,f.jsxs)("div",{className:Fe,children:[(0,f.jsx)("div",{className:Ve,children:(0,f.jsx)("img",{src:e[0],alt:""})}),(0,f.jsx)("div",{className:Ve,children:(0,f.jsx)("img",{src:e[1],alt:""})})]},t)))}),(0,f.jsxs)("div",{className:Ze,children:[(0,f.jsx)(Be.Ay,{type:"primary",className:Ke,onClick:()=>{if(!(s.current<=-1||r.current)){if(r.current=!0,t.current){const{children:e}=t.current,n=e[s.current];n.style.animation="flip-to-right 2s ease-in-out forwards",setTimeout((()=>{n.style.zIndex="5"}),1e3)}setTimeout((()=>{s.current=s.current-1,i()}),2e3)}},children:e.formatMessage({id:"page.htmlVision.interactiveDesign.previousPage"})}),(0,f.jsx)(Be.Ay,{type:"primary",className:Ke,onClick:()=>{if(!(s.current>=$e.length-1||r.current)){if(r.current=!0,t.current){const{children:e}=t.current,n=e[s.current+1];n.style.animation="flip-to-left 2s ease-in-out forwards",setTimeout((()=>{n.style.zIndex="5"}),1e3)}setTimeout((()=>{s.current=s.current+1,i()}),2e3)}},children:e.formatMessage({id:"page.htmlVision.interactiveDesign.nextPage"})})]})]})},st="switch_container__i9Gh6",nt="switch_box__M6wl2",rt="switch_icon__AQIrn",it=e=>{const{open:t,width:s=90,height:r=40,openIcon:i,closeIcon:c,onChange:o,style:a={},className:l=""}=e,[d,u]=(0,n.useState)(void 0!==t&&t);return(0,f.jsxs)("div",{className:"".concat(st," ").concat(l),style:{width:"".concat(s,"px"),height:"".concat(r,"px"),borderRadius:"".concat(r/2,"px"),backgroundColor:void 0!==t&&t||void 0===t&&d?"#e4e4e4":"#1a1c20",...a},onClick:()=>{void 0!==t?o&&o(!t):u(!d)},children:[(0,f.jsx)("div",{className:nt,style:void 0!==t&&t||void 0===t&&d?{width:"".concat(.8*r,"px"),height:"".concat(.8*r,"px"),borderRadius:"50%",top:"".concat(.1*r,"px"),left:"".concat(.1*r,"px")}:{width:"".concat(.2*r,"px"),height:"".concat(.7*r,"px"),borderRadius:"".concat(.2*r/2,"px"),top:"".concat(.15*r,"px"),left:"".concat(s-r/2,"px")}}),c&&(0,f.jsx)("div",{className:rt,style:{width:"".concat(.8*r,"px"),height:"".concat(.8*r,"px"),top:"".concat(.1*r,"px"),left:"".concat(.1*r,"px"),opacity:void 0!==t&&t||void 0===t&&d?0:1,display:"flex",alignItems:"center"},children:c}),i&&(0,f.jsx)("div",{className:rt,style:{width:"".concat(.8*r,"px"),height:"".concat(.8*r,"px"),top:"".concat(.1*r,"px"),left:"".concat(s-.9*r,"px"),opacity:void 0!==t&&t||void 0===t&&d?1:0,display:"flex",alignItems:"center",justifyContent:"flex-end"},children:i})]})},ct=s.p+"images/16a09882.png",ot=s.p+"images/58bbf8ef.png",at="Switchs_container__pX5RV",lt=()=>(0,f.jsxs)("div",{className:at,children:[(0,f.jsx)(c.A,{intlTitle:"page.htmlVision.interactiveDesign.switchButton"}),(0,f.jsx)(it,{width:66,height:30}),(0,f.jsx)(it,{width:76,height:34,openIcon:(0,f.jsx)("span",{style:{color:"#333",marginRight:"2px"},children:"ON"}),closeIcon:(0,f.jsx)("span",{style:{color:"#fff",marginLeft:"4px"},children:"OFF"}),style:{margin:"0 60px"}}),(0,f.jsx)(it,{openIcon:(0,f.jsx)("img",{src:ct,alt:"",width:26,height:26}),closeIcon:(0,f.jsx)("img",{src:ot,alt:"",width:26,height:26})})]}),dt=s.p+"images/0e3fc4a1.png",ut=s.p+"images/036f3b2c.png",pt=s.p+"images/de961e69.png",xt=s.p+"images/77eff419.png",ft=s.p+"images/bae3b2af.png",mt=s.p+"images/641be512.png",gt=s.p+"images/bb4c7aec.png",ht=s.p+"images/95259d51.png",_t=s.p+"images/a3f5bcd3.png",vt="animation_container__bfyEi",jt="animation_content__H8vdL",yt="animation_people__3G2ps",Nt="animation_giftBox__06Ghv",At="animation_coin__9Ei6m",Mt="animation_gift__fEEYc";let bt=600;const wt=80;let Ct="CCW";let kt=0,Dt=0,Rt=0,Bt=!1,Tt=!1;const Lt={icon1:{top:60,left:32,vx:-4.5},icon2:{top:30,left:34,vx:-3},icon3:{top:50,left:36,vx:0},icon4:{top:80,left:38,vx:1},icon5:{top:36,left:40,vx:3},icon6:{top:60,left:42,vx:2},icon7:{top:90,left:44,vx:5}},St={icon1:{top:Lt.icon1.top,left:Lt.icon1.left,vx:-4.5,vy:0,g:.2,opacity:0,isMoving:!1},icon2:{top:Lt.icon2.top,left:Lt.icon2.left,vx:-3,vy:0,g:.3,opacity:0,isMoving:!1},icon3:{top:Lt.icon3.top,left:Lt.icon3.left,vx:0,vy:0,g:.2,opacity:0,isMoving:!1},icon4:{top:Lt.icon4.top,left:Lt.icon4.left,vx:1,vy:0,g:.3,opacity:0,isMoving:!1},icon5:{top:Lt.icon5.top,left:Lt.icon5.left,vx:3,vy:0,g:.4,opacity:0,isMoving:!1},icon6:{top:Lt.icon6.top,left:Lt.icon6.left,vx:2,vy:0,g:.5,opacity:0,isMoving:!1},icon7:{top:Lt.icon7.top,left:Lt.icon7.left,vx:5,vy:0,g:.3,opacity:0,isMoving:!1}};function It(e,t,s){let n=0;return s>-e&&s<e&&(n=Math.sqrt((1-Math.pow(s,2)/Math.pow(e,2))*Math.pow(t,2))),n}const Et=e=>{const{noDropCoins:t=!1,clickNoDropCoins:s=!1}=e,r=(0,n.useRef)(null),c=(0,n.useRef)(null);return(0,n.useLayoutEffect)((()=>{let e=0,s=64,n=It(wt,40,s);return e=window.requestAnimationFrame((function o(){if(r.current){const e=function(e,t){let s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,r=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,i=e,c=t;return 0!==s&&(i=e*Math.cos(s)+t*Math.sin(s)+n,c=-e*Math.sin(s)+t*Math.cos(s)+r),{transitionX:i,transitionY:c}}(s,n,kt,Dt,Rt),{transitionX:o,transitionY:a}=e,l=i.findDOMNode(r.current);if(!l)return;l.offsetWidth<350?bt=500:l.offsetWidth<400&&(bt=550),l.style.left="".concat(o,"px"),l.style.top="".concat(-a,"px");let d=1.5;s>=wt?("CCW"===Ct?(kt=0,Dt=0,Rt=0):(kt=120,Dt=17,Rt=49),t||(Bt=!0,Tt=!0)):s<=-wt&&(Ct="CCW"===Ct?"CW":"CCW",t||(Bt=!0,Tt=!0)),Math.abs(s)>16&&(d=1.5*Math.pow(Math.cos(s/wt),2));const u=function(e,t,s,n,r){let i=arguments.length>5&&void 0!==arguments[5]?arguments[5]:1,c=n,o=r;return c=n>=e?n-i:n<=-e?n+i:"CCW"===s?r>0?n-i:n+i:r<0?n-i:n+i,c>e?c=e:c<-e&&(c=-e),o=It(e,t,c),o>0&&(n>=e?"CCW"!==s&&(o=-o):n<=-e?"CCW"===s&&(o=-o):r<0&&(o=-o)),{nextX:c,nextY:o}}(wt,40,Ct,s,n,d),{nextX:p,nextY:x}=u;s=p,n=x;let f=null;c&&c.current&&(f=i.findDOMNode(c.current));let m=!0;f&&Object.keys(St).forEach(((e,t)=>{const s=f.childNodes[t];if(s){const t=St[e],{top:n,left:r,vx:i,vy:c,g:o,opacity:a,isMoving:l}=t;if(l||Bt){const d=Lt[e];let u=n+c,p=r+i,x=i;x=Math.abs(i)>.1?i>0?i-.1:i+.1:0;let f=u-d.top;const g=bt-d.top,h=g/2*.45;let _=a;f/g>.55&&(f=h-(u-.55*g)),_=(f/h).toFixed(2),_>1&&(_=1);let v=c+o,j=l;0===u?(u=d.top,p=d.left,x=d.vx,j=!0):u>=bt?(u=0,p=0,_=0,x=0,v=0,j=!1):(m=!1,Bt&&(j=!0)),s.style.top="".concat(u,"px"),s.style.left="".concat(p,"px"),s.style.opacity=_,Object.assign(t,{top:u,left:p,vx:x,vy:v,isMoving:j})}}})),Bt&&(Bt=!1),m&&(Tt=!1)}e=window.requestAnimationFrame(o)})),()=>{e&&window.cancelAnimationFrame(e)}}),[]),(0,f.jsx)("div",{className:vt,children:(0,f.jsxs)("div",{className:jt,ref:r,children:[(0,f.jsx)("img",{src:dt,alt:"",className:yt}),(0,f.jsxs)("div",{className:Nt,onClick:()=>{s||Tt||(Bt=!0,Tt=!0)},ref:c,children:[(0,f.jsx)("img",{src:pt,alt:"",className:At}),(0,f.jsx)("img",{src:xt,alt:"",className:At}),(0,f.jsx)("img",{src:ft,alt:"",className:At}),(0,f.jsx)("img",{src:mt,alt:"",className:At}),(0,f.jsx)("img",{src:gt,alt:"",className:At}),(0,f.jsx)("img",{src:ht,alt:"",className:At}),(0,f.jsx)("img",{src:_t,alt:"",className:At}),(0,f.jsx)("img",{src:ut,alt:"",className:Mt})]})]})})},Ht="PeopleAnimation_container__P9IRI",Pt=()=>(0,f.jsx)("div",{className:Ht,children:(0,f.jsx)(Et,{})}),Wt={container:"TweakCube_container__chHsQ",content:"TweakCube_content__rXgCM",cube:"TweakCube_cube__c9JMo",changeColor:"TweakCube_changeColor__SsQtL",column0:"TweakCube_column0__0ANAL",span0:"TweakCube_span0__kaIxY",span1:"TweakCube_span1__RA+mL",span2:"TweakCube_span2__BzTLy",column1:"TweakCube_column1__9Hhyi",column2:"TweakCube_column2__EbxfC"},Yt=new Array(3).fill(0),Ot=()=>(0,f.jsxs)("div",{className:Wt.container,children:[(0,f.jsx)(c.A,{intlTitle:"page.htmlVision.interactiveDesign.pseudo3DRubikCube"}),(0,f.jsx)("div",{className:Wt.content,children:Yt.map(((e,t)=>(0,f.jsx)("div",{className:Wt.cube,children:Yt.map(((e,t)=>(0,f.jsx)("div",{className:Wt["column".concat(t)],children:Yt.map(((e,t)=>(0,f.jsx)("span",{className:Wt["span".concat(t)]},t)))},t)))},t)))})]}),Ft="Preserve3dBox_container__S8Nkn",Vt="Preserve3dBox_content__OkpkD",Xt="Preserve3dBox_box__xhigG",zt="Preserve3dBox_side1__OlfJ5",Ut="Preserve3dBox_side2__N20GX",Gt="Preserve3dBox_side3__t1Hxo",qt="Preserve3dBox_side4__7YzMw",Qt="Preserve3dBox_side5__38WMJ",Jt="Preserve3dBox_side6__pWRYS",Zt="Preserve3dBox_light__8ms1v",Kt=()=>{const e=(0,n.useRef)(null),t=(0,n.useRef)(null),s=(0,n.useRef)(null),r=()=>{if(s.current=null,t.current){const{children:e}=t.current;Array.prototype.forEach.call(e,(e=>{Array.prototype.includes.call(e.classList,Zt)&&e.classList.remove(Zt)}));document.styleSheets[0].insertRule("@keyframes preserve3dRotate {\n            100% {\n                transform: rotate3d(1, 1, 1, 360deg);\n              }\n          }"),t.current.style.animation="preserve3dRotate 10s linear infinite"}},o=e=>{null==e||e.classList.add(Zt)};return(0,f.jsxs)("div",{className:Ft,onMouseDown:e=>{const{clientX:n,clientY:r}=e,{transform:c}=window.getComputedStyle(i.findDOMNode(t.current));if(c&&"none"!==c){const e=c.match(/matrix(3d)?((.+))/);if(e&&e.length>=3){const t=e[2].split(", ")||[],i=180*Math.acos(Number(t[5]))/Math.PI,c=180*Math.acos(Number(t[10]))/Math.PI;s.current={x:n,y:r,rotateX:i,rotateY:c}}}},onMouseMove:e=>{if(t.current&&s.current){const{clientX:n,clientY:r}=e,{x:i,y:c,rotateX:o,rotateY:a}=s.current,l=2*(c-r),d=(n-i)/2;t.current&&(t.current.style.animation="none"),t.current.style.transform="rotateX(".concat(o+l,"deg) rotateY(").concat(a+d,"deg)")}},onMouseUp:r,onMouseLeave:r,ref:e,children:[(0,f.jsx)(c.A,{intlTitle:"page.htmlVision.interactiveDesign.3DRubikCube"}),(0,f.jsx)("div",{className:Vt,children:(0,f.jsxs)("div",{className:Xt,ref:t,children:[(0,f.jsx)("div",{className:zt,onClick:e=>{t.current&&(t.current.style.transform="rotateX(360deg) rotateY(360deg)",t.current.style.animation="none",o(e.target))}}),(0,f.jsx)("div",{className:Ut,onClick:e=>{t.current&&(t.current.style.transform="rotateX(0deg) rotateY(180deg)",t.current.style.animation="none",o(e.target))}}),(0,f.jsx)("div",{className:Gt,onClick:e=>{t.current&&(t.current.style.transform="rotateX(270deg) rotateY(0deg)",t.current.style.animation="none",o(e.target))}}),(0,f.jsx)("div",{className:qt,onClick:e=>{t.current&&(t.current.style.transform="rotateX(90deg) rotateY(180deg)",t.current.style.animation="none",o(e.target))}}),(0,f.jsx)("div",{className:Qt,onClick:e=>{t.current&&(t.current.style.transform="rotateX(0deg) rotateY(90deg)",t.current.style.animation="none",o(e.target))}}),(0,f.jsx)("div",{className:Jt,onClick:e=>{t.current&&(t.current.style.transform="rotateX(0deg) rotateY(270deg)",t.current.style.animation="none",o(e.target))}})]})})]})},$t="OrientationSenseCard_container__wM4Og",es="OrientationSenseCard_content__nHHlN",ts="OrientationSenseCard_card__kb1rR",ss=[Se,Ie,He,Pe,We],ns=()=>(0,f.jsxs)("div",{className:$t,children:[(0,f.jsx)(c.A,{intlTitle:"page.htmlVision.interactiveDesign.automaticIdentificationOfMouseDirection"}),(0,f.jsx)("div",{className:es,children:ss.map(((e,t)=>(0,f.jsx)("div",{className:ts,children:(0,f.jsx)("img",{src:e,alt:""})},t)))})]}),rs="HexagonalMesh1_container__4Mauo",is="HexagonalMesh1_item__uupv2",cs=new Array(800).fill(0),os=()=>{const e=(0,n.useRef)(null),t=()=>{if(e.current){const{width:t,height:s}=e.current.getBoundingClientRect(),n=t/2,r=s/2;e.current.style.setProperty("--xPos","".concat(n,"px")),e.current.style.setProperty("--yPos","".concat(r,"px"))}};return(0,n.useEffect)((()=>{t()}),[]),(0,f.jsx)("div",{className:rs,onMouseMove:t=>{if(e.current){const{left:s,top:n}=e.current.getBoundingClientRect(),r=t.pageX-s,i=t.pageY-n;window.requestAnimationFrame((function(){e.current&&(e.current.style.setProperty("--xPos","".concat(r,"px")),e.current.style.setProperty("--yPos","".concat(i,"px")))}))}},onMouseLeave:t,ref:e,children:cs.map(((e,t)=>(0,f.jsx)("div",{className:is},t)))})},as="HexagonalMesh2_container__7Eq5-",ls="HexagonalMesh2_item__RBkZx",ds=new Array(800).fill(0),us=()=>{const e=(0,n.useRef)(null),t=()=>{if(e.current){const{width:t,height:s}=e.current.getBoundingClientRect(),n=t/2,r=s/2;e.current.style.setProperty("--xPos","".concat(n,"px")),e.current.style.setProperty("--yPos","".concat(r,"px"))}};return(0,n.useEffect)((()=>{t()}),[]),(0,f.jsx)("div",{className:as,onMouseMove:t=>{if(e.current){const{left:s,top:n}=e.current.getBoundingClientRect(),r=t.pageX-s,i=t.pageY-n;window.requestAnimationFrame((function(){e.current&&(e.current.style.setProperty("--xPos","".concat(r,"px")),e.current.style.setProperty("--yPos","".concat(i,"px")))}))}},onMouseLeave:t,ref:e,children:ds.map(((e,t)=>(0,f.jsx)("div",{className:ls},t)))})},ps="HexagonalMesh3_container__7cOnb",xs="HexagonalMesh3_item__JnppT",fs=new Array(800).fill(0),ms=()=>{const e=(0,n.useRef)(null);return(0,f.jsx)("div",{className:ps,ref:e,children:fs.map(((e,t)=>(0,f.jsx)("div",{className:xs},t)))})};var gs=s(70792),hs=s(75846),_s=s(69877),vs=s(2266),js=s(92136),ys=s(3766),Ns=s(17122),As=s(80002),Ms=s(68456),bs=s(90580),ws=s(1399),Cs=s(46061),ks=s(790),Ds=s(87104),Rs=s(18406),Bs=s(76517),Ts=s(66480),Ls=s(53422),Ss=s(51600),Is=s(46221),Es=s(16125),Hs=s(58676),Ps=s(80069),Ws=s(29566),Ys=s(73576),Os=s(6516),Fs=s(82138),Vs=s(72226),Xs=s(91046),zs=s(87851),Us=s(94131),Gs=s(11033),qs=s(4716),Qs=s(77584),Js=s(43965),Zs=s(41546),Ks=s(86405),$s=s(25167),en=s(73142),tn=s(86706),sn=s(84032),nn=s(44663),rn=s(77639),cn=s(99328),on=s(31942),an=s(13740),ln=s(41723),dn=s(1372),un=s(43348),pn=s(95718),xn=s(43450),fn=s(84145),mn=s(76371),gn=s(3674),hn=s(40562),_n=s(51711),vn=s(83762),jn=s(97189),yn=s(66893),Nn=s(142),An=s(58937),Mn=s(56679),bn=s(26362),wn=s(24089),Cn=s(3105),kn=s(24423),Dn=s(67345),Rn=s(82510),Bn=s(138),Tn=s(60227),Ln=s(13255),Sn=s(90888),In=s(30074),En=s(82463),Hn=s(46802),Pn=s(43774),Wn=s(7079),Yn=s(48990),On=s(80088),Fn=s(88668),Vn=s(44627),Xn=s(53578),zn=s(78602),Un=s(6490);const Gn="IconScroll_container__pHJbN",qn="IconScroll_row__ueyux",Qn=new Array(40).fill(0),Jn=()=>{const e=()=>(0,f.jsxs)("div",{children:[(0,f.jsx)(gs.A,{}),(0,f.jsx)(hs.A,{}),(0,f.jsx)(_s.A,{}),(0,f.jsx)(vs.A,{}),(0,f.jsx)(js.A,{}),(0,f.jsx)(ys.A,{}),(0,f.jsx)(Ns.A,{}),(0,f.jsx)(As.A,{}),(0,f.jsx)(Ms.A,{}),(0,f.jsx)(bs.A,{}),(0,f.jsx)(ws.A,{}),(0,f.jsx)(Cs.A,{}),(0,f.jsx)(ks.A,{}),(0,f.jsx)(Ds.A,{}),(0,f.jsx)(Rs.A,{}),(0,f.jsx)(Bs.A,{}),(0,f.jsx)(Ts.A,{}),(0,f.jsx)(Ls.A,{}),(0,f.jsx)(Ss.A,{}),(0,f.jsx)(Is.A,{}),(0,f.jsx)(Es.A,{}),(0,f.jsx)(Hs.A,{}),(0,f.jsx)(Ps.A,{}),(0,f.jsx)(Ws.A,{}),(0,f.jsx)(Ys.A,{}),(0,f.jsx)(Os.A,{}),(0,f.jsx)(Fs.A,{}),(0,f.jsx)(Vs.A,{}),(0,f.jsx)(Xs.A,{}),(0,f.jsx)(zs.A,{}),(0,f.jsx)(Us.A,{}),(0,f.jsx)(Gs.A,{}),(0,f.jsx)(qs.A,{}),(0,f.jsx)(Qs.A,{}),(0,f.jsx)(Js.A,{}),(0,f.jsx)(Zs.A,{}),(0,f.jsx)(Ks.A,{}),(0,f.jsx)($s.A,{}),(0,f.jsx)(en.A,{}),(0,f.jsx)(tn.A,{}),(0,f.jsx)(sn.A,{}),(0,f.jsx)(nn.A,{}),(0,f.jsx)(rn.A,{}),(0,f.jsx)(cn.A,{}),(0,f.jsx)(on.A,{}),(0,f.jsx)(an.A,{}),(0,f.jsx)(ln.A,{}),(0,f.jsx)(dn.A,{}),(0,f.jsx)(un.A,{}),(0,f.jsx)(pn.A,{}),(0,f.jsx)(xn.A,{}),(0,f.jsx)(fn.A,{}),(0,f.jsx)(mn.A,{}),(0,f.jsx)(gn.A,{}),(0,f.jsx)(hn.A,{}),(0,f.jsx)(_n.A,{}),(0,f.jsx)(vn.A,{}),(0,f.jsx)(jn.A,{}),(0,f.jsx)(yn.A,{}),(0,f.jsx)(Nn.A,{}),(0,f.jsx)(An.A,{}),(0,f.jsx)(Mn.A,{}),(0,f.jsx)(bn.A,{}),(0,f.jsx)(wn.A,{}),(0,f.jsx)(Cn.A,{}),(0,f.jsx)(kn.A,{}),(0,f.jsx)(Dn.A,{}),(0,f.jsx)(Rn.A,{}),(0,f.jsx)(Bn.A,{}),(0,f.jsx)(Tn.A,{}),(0,f.jsx)(Ln.A,{}),(0,f.jsx)(Sn.A,{}),(0,f.jsx)(In.A,{}),(0,f.jsx)(En.A,{}),(0,f.jsx)(Hn.A,{}),(0,f.jsx)(Pn.A,{}),(0,f.jsx)(Wn.A,{}),(0,f.jsx)(Yn.A,{}),(0,f.jsx)(On.A,{}),(0,f.jsx)(Fn.A,{}),(0,f.jsx)(Vn.A,{}),(0,f.jsx)(Xn.A,{}),(0,f.jsx)(zn.A,{}),(0,f.jsx)(Un.A,{})]});return(0,f.jsx)("div",{className:Gn,children:Qn.map(((t,s)=>(0,f.jsxs)("div",{className:qn,children:[e(),e()]},s)))})};var Zn=s(50329),Kn=s(68e3);const $n="WipeSwitchover_container__zA+wD",er="WipeSwitchover_mask1__efwWk",tr="WipeSwitchover_mask2__bTFbb",sr="WipeSwitchover_mask3__Gaobg",nr="WipeSwitchover_mask4__ZERnA",rr="WipeSwitchover_mask5__MkpDg",ir="WipeSwitchover_page1__ex092",cr="WipeSwitchover_page2__S7sFb",or="WipeSwitchover_page3__JtV7t",ar="WipeSwitchover_page4__9G6Y9",lr="WipeSwitchover_page5__uBeX2",dr="WipeSwitchover_prevBtn__6vW6Q",ur="WipeSwitchover_icon__Z3ryB",pr="WipeSwitchover_nextBtn__sVZkG",xr=.006,fr=[8,8,8,7,30],mr=[.72,.7,1,1,.32],gr=()=>{const e=(0,n.useRef)(null),t=(0,n.useRef)(null),s=(0,n.useRef)(null),[r,i]=(0,n.useState)(fr.length-1),o=(0,n.useRef)(fr.length-1),a=(0,n.useRef)(!1),l=(0,n.useRef)(0),d=(e,t)=>{if(e){a.current=!0;const{strokeDashoffset:s}=e.style;let n=0;if(s)if("0"===s)n=Number((fr[o.current]*xr).toFixed(2));else if(s.includes("px")){const r=Number(s.substring(0,s.length-2));if(t<o.current){if(r>=fr[o.current])return a.current=!1,o.current=t,void i(t);n=Number((fr[o.current]*xr+r).toFixed(2))}else if(t>o.current){if(r>=2*fr[t])return e.style.strokeDashoffset="0px",a.current=!1,o.current=t,void i(t);n=Number((fr[t]*xr+r).toFixed(2))}}else{const r=Number(s);if(t<o.current){if(r>=fr[o.current])return a.current=!1,o.current=t,void i(t);n=Number((fr[o.current]*xr+r).toFixed(2))}else if(t>o.current){if(r>=2*fr[t])return e.style.strokeDashoffset="0px",a.current=!1,o.current=t,void i(t);n=Number((fr[t]*xr+r).toFixed(2))}}else n=Number((fr[o.current]*xr).toFixed(2));e.style.strokeDashoffset="".concat(n,"px"),l.current=window.requestAnimationFrame((()=>d(e,t)))}},u=()=>{if(e.current&&s.current){const{clientWidth:n}=e.current,r=Math.ceil(600+.1*(n-1140));Array.prototype.forEach.call(s.current.children,((e,t)=>{let s=window.getComputedStyle(e.children[0],null).getPropertyValue("transform");if(s&&s.startsWith("matrix")){const e=s.split(", ");e[0]="".concat(e[0].substring(0,7)).concat(Math.ceil(mr[t]*n)),s=e.join(", ")}e.children[0].style.transform=s})),t.current&&(e.current.style.height="".concat(r,"px"),Array.prototype.forEach.call(t.current.children,(e=>{if("g"===e.tagName){e.style.height="".concat(r,"px"),e.children[0].style.height="".concat(r,"px"),e.children[0].style.transform="".concat(r,"px");const t=Math.floor(n/2-240-40),s=Math.floor((r-340)/2);e.children[1].style.transform="translate(".concat(t,"px, ").concat(s,"px)")}})))}};return(0,n.useEffect)((()=>(u(),()=>{l.current&&cancelAnimationFrame(l.current)})),[]),(0,n.useEffect)((()=>(window.addEventListener("resize",u),()=>{window.removeEventListener("resize",u)})),[]),(0,f.jsxs)("div",{className:$n,ref:e,children:[(0,f.jsx)(c.A,{intlTitle:"page.htmlVision.interactiveDesign.wipeTheEffect"}),(0,f.jsxs)("svg",{ref:t,children:[(0,f.jsxs)("defs",{ref:s,children:[(0,f.jsx)("mask",{id:"mask1",className:er,children:(0,f.jsx)("path",{d:"M0.712-0.263\r c0,0-0.009,0.466-0.001,0.593c0.002,0.033,0.013,0.098-0.149,0.098c-0.157,0-0.16-0.049-0.161-0.08\r C0.398,0.245,0.395,0.04,0.399-0.063c0.001-0.035,0.009-0.105-0.162-0.102C0.088-0.163,0.091-0.093,0.09-0.059\r C0.09,0.04,0.08,0.238,0.09,0.337C0.093,0.368,0.107,0.42-0.058,0.42c-0.162,0-0.136-0.05-0.139-0.079\r C-0.21,0.234-0.207,0.033-0.2-0.069c0.002-0.035,0.015-0.103-0.16-0.102C-0.521-0.171-0.511-0.1-0.509-0.066\r C-0.502,0.046-0.51,0.379-0.51,0.379"})}),(0,f.jsx)("mask",{id:"mask2",className:tr,children:(0,f.jsx)("path",{d:"M-0.305,0.045\r c0,0,1.262-0.007,1.36-0.007c0.231,0,0.229,0.224-0.001,0.224c-0.14,0.001-0.929-0.002-1.042,0c-0.174,0.003-0.17,0.224-0.021,0.23\r c0.288,0.011,0.87-0.005,1.055-0.011C1.223,0.475,1.228,0.71,1.071,0.71C0.779,0.723,0.09,0.705-0.038,0.712\r s-0.148,0.223,0.031,0.234s0.233,0.011,0.233,0.011"})}),(0,f.jsx)("mask",{id:"mask3",className:sr,children:(0,f.jsx)("path",{d:"M1.15844,0.36167L1.08063,0.40111C0.95906,0.528330.94358,0.771430.87938,0.95278C0.81605,1.131660.65918,1.069850.71313,0.88778C0.75751,0.737960.89903,0.356360.93094,0.16944C0.95119,0.050820.84113,-0.056650.77563,0.12056C0.70882,0.301290.46792,1.203240.32092,0.97256C0.23658,0.840220.60869,0.261270.58134,0.05953C0.56686,-0.047280.49508,-0.06670.43749,0.0378C0.32377,0.244160.27639,0.451050.17792,0.71504C0.07944,0.979030.00295,0.842150.01094,0.75333C0.03758,0.457110.31406,0.1150.23375,-0.01111C0.15331,-0.137420.09392,0.21887-0.0325,0.23722"})}),(0,f.jsx)("mask",{id:"mask4",className:nr,children:(0,f.jsx)("path",{d:"M0.559-0.226L0.535-0.16\r c-0.196,0.171,0.09,0.27-0.022,0.436C0.49,0.31,0.384,0.312,0.344,0.202c-0.035-0.097-0.033-0.195,0.014-0.26\r c0.105-0.143,0.209-0.079,0.264,0.003c0.061,0.09,0.066,0.192,0.047,0.265c-0.093,0.35-0.537,0.162-0.49-0.159\r c0.019-0.129,0.095-0.202,0.196-0.228c0.13-0.034,0.289-0.028,0.373,0.063c0.083,0.09,0.094,0.349-0.014,0.466\r C0.64,0.452,0.178,0.502,0.077,0.256C-0.05-0.055,0.18-0.217,0.373-0.227c0.224-0.012,0.463-0.017,0.535,0.128\r C0.993,0.072,0.978,0.29,0.813,0.427"})}),(0,f.jsx)("mask",{id:"mask5",className:rr,children:(0,f.jsx)("path",{d:"M1.854-1.746L1.537-1.042\r c0.01,0.123-1.79,0.327-2.269,0.467C-1.433-0.37-1.427,0.309-0.835,0.209c0.464-0.078,3.077-0.572,3.921-0.742\r C3.714-0.66,3.81-0.043,3.364,0.102C2.423,0.406-0.153,0.795-1.188,1.026c-0.494,0.11-0.409,0.646,0.107,0.629\r c0.76-0.025,3.983-0.752,4.594-0.793c0.399-0.045,0.967,0.403-0.091,0.66C3.028,1.685,1,2.067,0.612,2.239\r C0.225,2.411,0.27,2.982,1.007,2.833l2.979-0.615"})})]}),(0,f.jsxs)("g",{className:ir,mask:"url(#mask1)",children:[(0,f.jsx)("rect",{fill:"#e3e4e5"}),(0,f.jsx)("image",{xlinkHref:Te}),(0,f.jsx)("text",{fill:"#757576",children:"Book5"})]}),(0,f.jsxs)("g",{className:cr,mask:"url(#mask2)",children:[(0,f.jsx)("rect",{fill:"#7e7f83"}),(0,f.jsx)("image",{xlinkHref:Le}),(0,f.jsx)("text",{fill:"#dedede",children:"Book4"})]}),(0,f.jsxs)("g",{className:or,mask:"url(#mask3)",children:[(0,f.jsx)("rect",{fill:"#f8d3cc"}),(0,f.jsx)("image",{xlinkHref:Se}),(0,f.jsx)("text",{fill:"#b0304e",children:"Book3"})]}),(0,f.jsxs)("g",{className:ar,mask:"url(#mask4)",children:[(0,f.jsx)("rect",{fill:"#d2e4ce"}),(0,f.jsx)("image",{xlinkHref:Ie}),(0,f.jsx)("text",{fill:"#04756e",children:"Book2"})]}),(0,f.jsxs)("g",{className:lr,mask:"url(#mask5)",children:[(0,f.jsx)("rect",{fill:"#cad9e5"}),(0,f.jsx)("image",{xlinkHref:Ee}),(0,f.jsx)("text",{fill:"#142864",children:"Book1"})]})]}),(0,f.jsx)("div",{className:dr,style:r>=fr.length-1?{pointerEvents:"none"}:{},onClick:()=>{if(!a.current&&s.current){const e=r+1,t=s.current.children[e].children[0];d(t,e)}},children:(0,f.jsx)("div",{className:ur,children:(0,f.jsx)(Zn.A,{})})}),(0,f.jsx)("div",{className:pr,style:r<=0?{pointerEvents:"none"}:{},onClick:()=>{if(!a.current&&s.current){const e=r-1,t=s.current.children[r].children[0];d(t,e)}},children:(0,f.jsx)("div",{className:ur,children:(0,f.jsx)(Kn.A,{})})})]})},hr="AutoCompletePunctuation_container__EjYmN",_r="AutoCompletePunctuation_content__PIXsh",vr={"'":"'",'"':'"',"(":")","（":"）","【":"】","[":"]","《":"》","「":"」","『":"』","{":"}","“":"”","‘":"’"},jr=()=>{const e=(0,n.useRef)(null),t=(0,n.useRef)(null),s=(0,n.useCallback)((e=>{const t=vr[e.data];if(t&&("insertText"===e.inputType||"compositionend"===e.type))if(["TEXTAREA","INPUT"].includes(e.target.tagName))e.target.setRangeText(t);else{const e=document.createTextNode(t),s=document.getSelection();if(s){const t=s.getRangeAt(0);t.insertNode(e),t.setEndBefore(e),t.commonAncestorContainer.normalize()}}}),[]);return(0,n.useEffect)((()=>(e.current&&(e.current.addEventListener("input",s),e.current.addEventListener("compositionend",s)),t.current&&(t.current.addEventListener("input",s),t.current.addEventListener("compositionend",s)),()=>{e.current&&(e.current.removeEventListener("input",s),e.current.removeEventListener("compositionend",s)),t.current&&(t.current.removeEventListener("input",s),t.current.removeEventListener("compositionend",s))})),[]),(0,f.jsxs)("div",{className:hr,children:[(0,f.jsx)(c.A,{intlTitle:"page.htmlVision.interactiveDesign.autoCompletePunctuation"}),(0,f.jsxs)("div",{className:_r,children:[(0,f.jsx)("textarea",{rows:5,placeholder:"maxLength is 100",maxLength:100,ref:e}),(0,f.jsx)("div",{contentEditable:"true",ref:t})]})]})};var yr=s(72453),Nr=s(49452),Ar=s(4713),Mr=s(25118);const br="StackedImages_container__Hnz74",wr="StackedImages_content__bZLt4",Cr=[yr,Nr,Ar,Mr],kr=()=>(0,f.jsxs)("div",{className:br,children:[(0,f.jsx)(c.A,{intlTitle:"page.htmlVision.interactiveDesign.stackedImages"}),(0,f.jsx)("div",{className:wr,children:Cr.map(((e,t)=>(0,f.jsx)("img",{src:e,alt:""},t)))})]}),Dr="InteractiveDesign_container__oK3No",Rr="InteractiveDesign_box__+Trza",Br=[{element:(0,f.jsx)(m,{})},{element:(0,f.jsx)(L,{})},{element:(0,f.jsx)(z,{})},{element:(0,f.jsx)(te,{})},{element:(0,f.jsx)(ce,{})},{element:(0,f.jsx)(ge,{})},{element:(0,f.jsx)(Me,{})},{element:(0,f.jsx)(Re,{})},{element:(0,f.jsx)(tt,{})},{element:(0,f.jsx)(lt,{})},{element:(0,f.jsx)(Pt,{})},{element:(0,f.jsx)(Ot,{})},{element:(0,f.jsx)(Kt,{})},{element:(0,f.jsx)(ns,{})},{element:(0,f.jsx)(os,{})},{element:(0,f.jsx)(us,{})},{element:(0,f.jsx)(ms,{})},{element:(0,f.jsx)(Jn,{})},{element:(0,f.jsx)(gr,{})},{element:(0,f.jsx)(jr,{})},{element:(0,f.jsx)(kr,{})}],Tr=()=>{const{setScrollTop:e}=(0,r.S)();return(0,n.useEffect)((()=>{e(0)}),[]),(0,f.jsx)("div",{className:Dr,children:Br.map(((e,t)=>(0,f.jsx)("div",{className:Rr,children:e.element},t)))})}},55874:(e,t,s)=>{e.exports=s.p+"images/c5e4532e.jpg"},72453:(e,t,s)=>{e.exports=s.p+"images/7380e6f7.jpg"},49452:(e,t,s)=>{e.exports=s.p+"images/06a46209.jpg"},4713:(e,t,s)=>{e.exports=s.p+"images/ed6d9a11.jpg"},25118:(e,t,s)=>{e.exports=s.p+"images/271a66ed.jpg"}}]);
\ No newline at end of file
diff --git a/docs/8868.js b/docs/8868.js
deleted file mode 100644
index 8d49806..0000000
--- a/docs/8868.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkvisualization_collection=self.webpackChunkvisualization_collection||[]).push([[8868],{11590:(e,t,s)=>{s.d(t,{A:()=>c});s(96540);var n=s(6442);const r="ModuleTitle_container__7ZCMv";var i=s(74848);const c=e=>{const t=(0,n.A)(),{intlTitle:s,style:c={}}=e;return(0,i.jsx)("div",{className:r,style:c,children:t.formatMessage({id:s})})}},6581:(e,t,s)=>{s.r(t),s.d(t,{default:()=>Mr});var n=s(96540),r=s(46935),i=s(40961),c=s(11590);const o=s.p+"images/6765fa3b.png",a="MagnifyingGlass_container__z7+HK",l="MagnifyingGlass_content__csBAU",d="MagnifyingGlass_smallBox__1rC23",u="MagnifyingGlass_mask__kbQ6H",p="MagnifyingGlass_floatBox__Msmv9",x="MagnifyingGlass_bigBox__dtenq";var f=s(74848);const m=()=>{const{scrollTop:e,headHeight:t}=(0,r.S)(),s=(0,n.useRef)(null),m=(0,n.useRef)(null),g=(0,n.useRef)(null),[h,_]=(0,n.useState)(!1);return(0,f.jsx)("div",{className:a,children:(0,f.jsxs)("div",{className:l,children:[(0,f.jsxs)("div",{className:d,ref:s,children:[(0,f.jsx)(c.A,{intlTitle:"page.htmlVision.interactiveDesign.magnifyingGlass",style:{top:"-80px",left:"114%"}}),(0,f.jsx)("div",{className:u,onMouseOver:()=>{_(!0)},onMouseMove:n=>{const r=i.findDOMNode(s.current),c=i.findDOMNode(m.current),{offsetWidth:o,offsetHeight:a}=r,{offsetWidth:l,offsetHeight:d}=c;let u=n.clientX-r.offsetLeft-l/2,p=0;p=e<r.offsetTop-t-100?n.clientY-d/2-r.offsetTop-e:n.clientY-t-d/2+(e-r.offsetTop+t),u<0?u=0:u>o-l&&(u=o-l),p<0?p=0:p>a-d&&(p=a-d),c.style.left=u+"px",c.style.top=p+"px";const x=u/(o-l),f=p/(a-d),h=i.findDOMNode(g.current),_=h.children[0];_.style.left=-x*(_.offsetWidth-h.offsetWidth)+"px",_.style.top=-f*(_.offsetHeight-h.offsetHeight)+"px"},onMouseLeave:()=>{_(!1)}}),(0,f.jsx)("div",{className:p,style:{visibility:h?"visible":"hidden"},ref:m}),(0,f.jsx)("img",{src:o})]}),(0,f.jsx)("div",{className:x,ref:g,children:(0,f.jsx)("img",{src:o,style:{visibility:h?"visible":"hidden"}})})]})})};var g=s(55874);const h="CropImage_container__agQZ5",_="CropImage_leftBox__rxH+K",v="CropImage_img1__vvyEU",j="CropImage_img2__CuOAQ",y="CropImage_cropBox__A4fdb",N="CropImage_dot__TnuYQ",A="CropImage_leftUp__RO+TV",M="CropImage_up__fR18N",b="CropImage_rightUp__5Btk7",w="CropImage_right__nbAwk",C="CropImage_rightDown__8vsgu",k="CropImage_down__0RD60",D="CropImage_leftDown__Ssc21",R="CropImage_left__qEy8B",B="CropImage_rightBox__tH7SB";var T=function(e){return e[e.leftUp=0]="leftUp",e[e.up=1]="up",e[e.rightUp=2]="rightUp",e[e.right=3]="right",e[e.rightDown=4]="rightDown",e[e.down=5]="down",e[e.leftDown=6]="leftDown",e[e.left=7]="left",e}(T||{});const L=()=>{const{scrollTop:e}=(0,r.S)(),t=(0,n.useRef)(0),s=(0,n.useRef)(0),o=(0,n.useRef)(!1),a=(0,n.useRef)(),l=(0,n.useRef)(!1),d=(0,n.useRef)(null),u=(0,n.useRef)(null),p=(0,n.useRef)(null),x=(0,n.useRef)(null),m=(0,n.useRef)(null),L=(0,n.useRef)(0),S=(0,n.useRef)(0),I=(0,n.useRef)(0),E=(0,n.useRef)(0),H=e=>{var t=e.offsetLeft,s=e.offsetTop;let n=e.offsetParent;for(;null!=n;)t+=n.offsetLeft,s+=n.offsetTop,n=n.offsetParent;return{left:t,top:s}},P=e=>{let s=e.clientX;const n=i.findDOMNode(u.current),{left:r}=H(n),c=r,o=c+t.current-4;s>o?s=o:s<c&&(s=c);const a=i.findDOMNode(x.current),l=a.offsetWidth-2,d=s-l-H(a).left;a.style.width=l+d+"px"},W=t=>{let s=t.clientY+e;const n=i.findDOMNode(u.current),{top:r}=H(n),c=r,o=i.findDOMNode(x.current),a=H(o).top,l=a+o.offsetHeight-4;s<c?s=c:s>l&&(s=l);const d=o.offsetHeight;o.style.height=d+a-s+"px",o.style.top=o.offsetTop+s-a+"px"},Y=e=>{let t=e.clientX;const s=i.findDOMNode(u.current),{left:n}=H(s),r=n,c=i.findDOMNode(x.current),o=H(c).left,a=o+c.offsetWidth-4;t<r?t=r:t>a&&(t=a);const l=c.offsetWidth;c.style.width=l+o-t+"px",c.style.left=c.offsetLeft+t-o+"px"},O=t=>{let n=t.clientY+e;const r=i.findDOMNode(u.current),{top:c}=H(r),o=c,a=o+s.current-4;n<o?n=o:n>a&&(n=a);const l=i.findDOMNode(x.current),d=l.offsetHeight-2,p=n-d-H(l).top;l.style.height=d+p+"px"},F=()=>{const e=i.findDOMNode(x.current),{offsetWidth:t,offsetHeight:s,offsetLeft:n,offsetTop:r}=e,c=n+t,o=r+s;i.findDOMNode(p.current).style.clip="rect(".concat(r,"px,").concat(c,"px,").concat(o,"px,").concat(n,"px)")},V=()=>{const e=i.findDOMNode(x.current),{offsetWidth:t,offsetHeight:s,offsetLeft:n,offsetTop:r}=e,c=n+t,o=r+s,a=i.findDOMNode(m.current);a.style.top="".concat(-r,"px"),a.style.left="".concat(-n,"px"),a.style.clip="rect(".concat(r,"px,").concat(c,"px,").concat(o,"px,").concat(n,"px)")},X=(e,t)=>{e.stopPropagation(),o.current=!0,a.current=t},U=()=>{o.current=!1,l.current=!1};return(0,n.useEffect)((()=>{const e=i.findDOMNode(u.current),{offsetWidth:n,offsetHeight:r}=e;t.current=n,s.current=r}),[]),(0,f.jsxs)("div",{className:h,onMouseMove:e=>{if(l.current){const n=i.findDOMNode(x.current),{offsetWidth:r,offsetHeight:c}=n,o=e.clientX-L.current,a=e.clientY-S.current,l=E.current+a,d=I.current+o;l<0?n.style.top="0px":l>s.current-c-2?n.style.top="".concat(s.current-c-2,"px"):n.style.top="".concat(l,"px"),d<0?n.style.left="0px":d>t.current-r-2?n.style.left="".concat(t.current-r-2,"px"):n.style.left="".concat(d,"px"),F(),V()}if(o.current){switch(a.current){case T.right:P(e);break;case T.up:W(e);break;case T.left:Y(e);break;case T.down:O(e);break;case T.leftUp:Y(e),W(e);break;case T.leftDown:Y(e),O(e);break;case T.rightUp:P(e),W(e);break;case T.rightDown:P(e),O(e)}F(),V()}},onMouseUp:U,onMouseLeave:U,ref:d,children:[(0,f.jsx)(c.A,{intlTitle:"page.htmlVision.interactiveDesign.dragAndDropClipBox"}),(0,f.jsxs)("div",{className:_,ref:u,children:[(0,f.jsx)("img",{src:g,className:v}),(0,f.jsx)("img",{src:g,className:j,ref:p}),(0,f.jsxs)("div",{className:y,onMouseDown:e=>{L.current=e.clientX,S.current=e.clientY;const t=i.findDOMNode(x.current);E.current=t.offsetTop,I.current=t.offsetLeft,l.current=!0},ref:x,children:[(0,f.jsx)("div",{className:"".concat(N," ").concat(A),onMouseDown:e=>X(e,T.leftUp)}),(0,f.jsx)("div",{className:"".concat(N," ").concat(M),onMouseDown:e=>X(e,T.up)}),(0,f.jsx)("div",{className:"".concat(N," ").concat(b),onMouseDown:e=>X(e,T.rightUp)}),(0,f.jsx)("div",{className:"".concat(N," ").concat(w),onMouseDown:e=>X(e,T.right)}),(0,f.jsx)("div",{className:"".concat(N," ").concat(C),onMouseDown:e=>X(e,T.rightDown)}),(0,f.jsx)("div",{className:"".concat(N," ").concat(k),onMouseDown:e=>X(e,T.down)}),(0,f.jsx)("div",{className:"".concat(N," ").concat(D),onMouseDown:e=>X(e,T.leftDown)}),(0,f.jsx)("div",{className:"".concat(N," ").concat(R),onMouseDown:e=>X(e,T.left)})]})]}),(0,f.jsx)("div",{className:B,children:(0,f.jsx)("img",{src:g,ref:m})})]})};var S=s(6442),I=s(60505);const E=s.p+"images/e55cd06c.jpg",H=s.p+"images/f44f33e9.jpg",P=s.p+"images/ccd69096.jpg",W=s.p+"images/dbd623e3.jpg",Y=s.p+"images/d327c52a.jpg",O=s.p+"images/f160c0ae.jpg",F={container:"DragShopping_container__IbTIV",content:"DragShopping_content__VVnMY",bookBox:"DragShopping_bookBox__SDdDi",shoppingBox:"DragShopping_shoppingBox__3DBFv",tableHead:"DragShopping_tableHead__lYIfd",tableCell:"DragShopping_tableCell__6tWCA",tableRow:"DragShopping_tableRow__6Qo3x",total:"DragShopping_total__+sd3-",tip:"DragShopping_tip__vp+8T"},{GridBox:V}=I.A,X=[{id:"1",name:"一个星期学会吉他弹唱",price:68,imgUrl:E},{id:"2",name:"柳公权楷书教程入门",price:45,imgUrl:H},{id:"3",name:"世说新语",price:52,imgUrl:P},{id:"4",name:"名人传",price:124,imgUrl:W},{id:"5",name:"骆驼祥子",price:168,imgUrl:Y},{id:"6",name:"阅微堂笔记",price:56,imgUrl:O}],U=()=>{const e=(0,S.A)(),[t,s]=(0,n.useState)([]),[r,i]=(0,n.useState)(!1),[o,a]=(0,n.useState)(0);return(0,f.jsxs)("div",{className:F.container,children:[(0,f.jsx)(c.A,{intlTitle:"page.htmlVision.interactiveDesign.dragAndDropShopping"}),(0,f.jsxs)("div",{className:F.content,children:[(0,f.jsx)(I.A,{differentScreenCols:[6,6,3,3,3],rowSpace:0,colSpace:0,children:X.map(((e,t)=>{const{id:s,name:n,price:r,imgUrl:i}=e;return(0,f.jsx)(V,{children:(0,f.jsxs)("div",{className:F.bookBox,draggable:"true",onDragStart:e=>((e,t)=>{e=e||window.event;const s=X[t];e.dataTransfer.setData("id",s.id),e.dataTransfer.effectAllowed="copy"})(e,t),children:[(0,f.jsx)("img",{src:i,draggable:"false"}),(0,f.jsx)("p",{children:n}),(0,f.jsx)("p",{children:"￥".concat(r)})]})},s)}))}),(0,f.jsxs)("div",{className:F.shoppingBox,style:r?{border:"1px solid #DD5044",color:"#DD5044"}:{},onDragOver:e=>{e.preventDefault(),r||i(!0)},onDragLeave:e=>{e.preventDefault(),r&&i(!1)},onDrop:e=>{e.preventDefault();const n=e.dataTransfer.getData("id");let r=!1,c=0;const l=t.map((e=>e.id===n?(r=!0,c=e.price,{...e,num:e.num+1}):e));if(!r){let e;for(let t=X.length-1;t>=0;t--){const s=X[t];if(s.id===n){c=s.price,e=s;break}}e&&l.unshift({...e,num:1})}s(l),i(!1),a(o+c)},children:[(0,f.jsxs)("div",{className:F.tableHead,children:[(0,f.jsx)("div",{className:F.tableCell,children:e.formatMessage({id:"page.htmlVision.interactiveDesign.title"})}),(0,f.jsx)("div",{className:F.tableCell,children:e.formatMessage({id:"page.htmlVision.interactiveDesign.price"})}),(0,f.jsx)("div",{className:F.tableCell,children:e.formatMessage({id:"page.htmlVision.interactiveDesign.count"})})]}),t.map((e=>{const{id:t,num:s,name:n,price:r}=e;return(0,f.jsxs)("div",{className:F.tableRow,children:[(0,f.jsx)("div",{className:F.tableCell,children:n}),(0,f.jsx)("div",{className:F.tableCell,children:"￥".concat(r)}),(0,f.jsx)("div",{className:F.tableCell,children:s})]},t)})),t.length>0&&(0,f.jsx)("div",{className:F.total,children:(0,f.jsxs)("span",{className:F.totalMoney,children:[e.formatMessage({id:"page.htmlVision.interactiveDesign.total"}),"：￥",(0,f.jsx)("span",{children:o})]})}),(0,f.jsx)("div",{className:F.tip,children:r?e.formatMessage({id:"page.htmlVision.interactiveDesign.addingToCart"}):e.formatMessage({id:"page.htmlVision.interactiveDesign.dragToThisToBuy"})})]})]})]})};var z=s(91844),G=s(73776);const Q=s.p+"images/70af4d01.jpg",q="MouseHover1_container__D7VNa",J="MouseHover1_content__qBPDJ",Z="MouseHover1_title__cOVT0",K="MouseHover1_bottom__Ua8lo",$="MouseHover1_right__D0ca6",ee="MouseHover1_cursor__orRgp",te=()=>{const e=(0,S.A)(),t=(0,n.useRef)(null),s=(0,n.useRef)(null),{showCursor:r,cursorSize:i,cursorDefaultRadius:c,cursorBigRadius:o,setCursorSize:a,onMouseEnter:l,onMouseMove:d,onMouseLeave:u}=(0,z.A)(t,s),p=()=>{a("big")},x=()=>{a("default")};return(0,f.jsxs)("div",{className:q,onMouseEnter:l,onMouseMove:d,onMouseLeave:u,ref:t,children:[(0,f.jsxs)("div",{className:J,children:[(0,f.jsx)("p",{className:Z,onMouseEnter:p,onMouseLeave:x,children:e.formatMessage({id:"page.htmlVision.interactiveDesign.personalArticle"})}),(0,f.jsxs)("div",{className:K,children:[(0,f.jsx)("img",{src:Q,alt:"",onMouseEnter:p,onMouseLeave:x}),(0,f.jsx)("div",{className:$,children:G.O7.map(((e,t)=>(0,f.jsx)("a",{href:e.href,target:"_blank",onMouseEnter:p,onMouseLeave:x,children:e.name},t)))})]})]}),(0,f.jsx)("div",{className:ee,style:{visibility:r?"visible":"hidden",width:"".concat("big"===i?2*o:2*c,"px"),height:"".concat("big"===i?2*o:2*c,"px")},ref:s})]})},se="MouseHover2_container__HD+sM",ne="MouseHover2_content__UKyly",re="MouseHover2_item__lglpx",ie="MouseHover2_box__dKAMr",ce=()=>{const e=(0,n.useRef)(null),t=(0,n.useCallback)((t=>{if(e.current){const{clientX:s,clientY:n}=t,{children:r}=e.current;Array.prototype.forEach.call(r,(e=>{const{x:t,y:r}=e.getBoundingClientRect();e.setAttribute("style","--x: ".concat(s-t,"px; --y: ").concat(n-r,"px"))}))}}),[]);return(0,n.useEffect)((()=>(window.addEventListener("mousemove",t),()=>{window.removeEventListener("mousemove",t)})),[]),(0,f.jsx)("div",{className:se,children:(0,f.jsx)("div",{className:ne,ref:e,children:G.O7.map(((e,t)=>(0,f.jsx)("div",{className:re,children:(0,f.jsxs)("div",{className:ie,children:[(0,f.jsx)("div",{children:e.name}),(0,f.jsx)("a",{href:e.href,target:"_blank",children:e.href})]})},t)))})})},oe="card_container__5Q3kU",ae="card_content__rVMcc",le=e=>{const{url:t}=e,s=(0,n.useRef)(null),r=(0,n.useCallback)((e=>{if(s.current){const{clientX:n,clientY:r}=e,{x:i,y:c}=s.current.getBoundingClientRect();s.current.setAttribute("style",'--url: url("'.concat(t,'"); --x: ').concat(n-i,"px; --y: ").concat(r-c,"px"))}}),[]);return(0,n.useEffect)((()=>(s.current&&t&&s.current.setAttribute("style",'--url: url("'.concat(t,'")')),window.addEventListener("mousemove",r),()=>{window.removeEventListener("mousemove",r)})),[]),(0,f.jsx)("div",{className:oe,ref:s,children:(0,f.jsx)("div",{className:ae})})},de=s.p+"images/6a5e2167.png",ue=s.p+"images/4c6b00fb.png",pe=s.p+"images/2d40aaff.png",xe="MouseHover3_container__AfDAp",fe="MouseHover3_content__sQ9Jr",me=[de,ue,pe],ge=()=>(0,f.jsx)("div",{className:xe,children:(0,f.jsx)("div",{className:fe,children:me.map(((e,t)=>(0,f.jsx)(le,{url:e},t)))})}),he="SlideButtonTab_container__eT4SM",_e="SlideButtonTab_content__6sIYs",ve="SlideButtonTab_btn__tD8IC",je="SlideButtonTab_actived__RWXqG",ye=new Array(4).fill(0),Ne=()=>{const e=(0,n.useRef)(null),[t,s]=(0,n.useState)(0),r=(0,n.useRef)(0);return(0,n.useEffect)((()=>{if(e.current){const{width:t}=e.current.getBoundingClientRect(),s=(t-32-8*(2*ye.length-2))/ye.length;e.current.style.setProperty("--btnWidth","".concat(s,"px")),r.current=s}}),[]),(0,f.jsxs)("div",{className:he,children:[(0,f.jsx)(c.A,{intlTitle:"page.htmlVision.interactiveDesign.swipeTab"}),(0,f.jsx)("div",{className:_e,ref:e,children:ye.map(((n,i)=>(0,f.jsxs)("div",{className:"".concat(ve," ").concat(t===i?je:""),onClick:()=>(n=>{if(e.current&&t!==n){const i="".concat(16+r.current*n+8*n*2,"px");e.current.style.setProperty("--groove-left",i);let c="0deg";c=n<t?"-8deg":"8deg",e.current.style.setProperty("--wraper-rotate",c),window.setTimeout((()=>{e.current&&e.current.style.setProperty("--wraper-rotate","0deg")}),600),s(n)}})(i),children:["Button",i+1]},i)))})]})};var Ae=s(68777);const Me=s.p+"images/a601ac6c.png",be=s.p+"images/d1a0696c.png",we=s.p+"images/e430aae1.png",Ce=s.p+"images/b2b0669d.png",ke=s.p+"images/f354e378.png",De=s.p+"images/c6c82aab.png",Re=s.p+"images/7075d257.png",Be=s.p+"images/b637b49e.png",Te="FlipBook_container__bOMio",Le="FlipBook_pages__Ls1i4",Se="FlipBook_paper__qnIh0",Ie="FlipBook_page__5K+Jz",Ee="FlipBook_left-show-front-page__I3ToF",He="FlipBook_right-show-back-page__crJO-",Pe="FlipBook_left-show-back-page__yRt8k",We="FlipBook_right-show-front-page__pTHC0",Ye="FlipBook_left-hide-front-page__kQs3M",Oe="FlipBook_left-hide-back-page__lMGif",Fe="FlipBook_right-hide-front-page__8XaW9",Ve="FlipBook_btns__9Cs+L",Xe="FlipBook_btn__QmvzH",Ue=[[Me,be],[we,Ce],[ke,De],[Re,Be]],ze=[Ee,Pe,We,He,Ye,Oe,Fe,"FlipBook_right-hide-back-page__56D1v"],Ge=()=>{const e=(0,S.A)(),t=(0,n.useRef)(null),s=(0,n.useRef)(0),r=(0,n.useRef)(!1),i=()=>{if(t.current){const{children:e}=t.current;Array.prototype.forEach.call(e,((e,t)=>{if(e.attributes&&e.attributes.length){var n,r;if(e.attributes.getNamedItem("data-left"))null===(n=e.attributes)||void 0===n||n.removeNamedItem("data-left");if(e.attributes.getNamedItem("data-right"))null===(r=e.attributes)||void 0===r||r.removeNamedItem("data-right")}const{children:i}=e;if(t===s.current){var c,o,a,l;const t=document.createAttribute("data-left");t.nodeValue="true",e.attributes.setNamedItem(t),e.style.transform="perspective(1000px) rotateY(-180deg)",e.style.zIndex="4",null===(c=i[0].classList)||void 0===c||c.remove(...ze),null===(o=i[0].classList)||void 0===o||o.add(Pe),null===(a=i[1].classList)||void 0===a||a.remove(...ze),null===(l=i[1].classList)||void 0===l||l.add(Ee)}else if(t===s.current+1){var d,u,p,x;const t=document.createAttribute("data-right");t.nodeValue="true",e.attributes.setNamedItem(t),e.style.transform="perspective(1000px) rotateY(0deg)",e.style.zIndex="4",null===(d=i[0].classList)||void 0===d||d.remove(...ze),null===(u=i[0].classList)||void 0===u||u.add(We),null===(p=i[1].classList)||void 0===p||p.remove(...ze),null===(x=i[1].classList)||void 0===x||x.add(He)}else if(t<s.current){var f,m,g,h;e.style.transform="perspective(1000px) rotateY(-180deg)",t===s.current-1?e.style.zIndex="3":e.style.zIndex="2",null===(f=i[0].classList)||void 0===f||f.remove(...ze),null===(m=i[0].classList)||void 0===m||m.add(Oe),null===(g=i[1].classList)||void 0===g||g.remove(...ze),null===(h=i[1].classList)||void 0===h||h.add(Ye)}else{var _,v,j,y;e.style.transform="perspective(1000px) rotateY(0deg)",t===s.current+2?e.style.zIndex="3":e.style.zIndex="2",null===(_=i[0].classList)||void 0===_||_.remove(...ze),null===(v=i[0].classList)||void 0===v||v.add(Fe),null===(j=i[1].classList)||void 0===j||j.remove(...ze),null===(y=i[1].classList)||void 0===y||y.add(Oe)}}))}r.current=!1};return(0,n.useLayoutEffect)((()=>{const e=document.styleSheets[0];e.insertRule("@keyframes flip-to-left {\n        from {\n          transform: perspective(1000px) rotateY(0);\n        }\n        to {\n          transform: perspective(1000px) rotateY(-180deg);\n        }\n      }"),e.insertRule("@keyframes flip-to-right {\n        from {\n          transform: perspective(1000px) rotateY(-180deg);\n        }\n        to {\n          transform: perspective(1000px) rotateY(0);\n        }\n      }"),r.current=!0,i()}),[]),(0,f.jsxs)("div",{className:Te,children:[(0,f.jsx)(c.A,{intlTitle:"page.htmlVision.interactiveDesign.flipBoook"}),(0,f.jsx)("div",{className:Le,ref:t,children:Ue.map(((e,t)=>(0,f.jsxs)("div",{className:Se,children:[(0,f.jsx)("div",{className:Ie,children:(0,f.jsx)("img",{src:e[0],alt:""})}),(0,f.jsx)("div",{className:Ie,children:(0,f.jsx)("img",{src:e[1],alt:""})})]},t)))}),(0,f.jsxs)("div",{className:Ve,children:[(0,f.jsx)(Ae.Ay,{type:"primary",className:Xe,onClick:()=>{if(!(s.current<=-1||r.current)){if(r.current=!0,t.current){const{children:e}=t.current,n=e[s.current];n.style.animation="flip-to-right 2s ease-in-out forwards",setTimeout((()=>{n.style.zIndex="5"}),1e3)}setTimeout((()=>{s.current=s.current-1,i()}),2e3)}},children:e.formatMessage({id:"page.htmlVision.interactiveDesign.previousPage"})}),(0,f.jsx)(Ae.Ay,{type:"primary",className:Xe,onClick:()=>{if(!(s.current>=Ue.length-1||r.current)){if(r.current=!0,t.current){const{children:e}=t.current,n=e[s.current+1];n.style.animation="flip-to-left 2s ease-in-out forwards",setTimeout((()=>{n.style.zIndex="5"}),1e3)}setTimeout((()=>{s.current=s.current+1,i()}),2e3)}},children:e.formatMessage({id:"page.htmlVision.interactiveDesign.nextPage"})})]})]})},Qe="switch_container__i9Gh6",qe="switch_box__M6wl2",Je="switch_icon__AQIrn",Ze=e=>{const{open:t,width:s=90,height:r=40,openIcon:i,closeIcon:c,onChange:o,style:a={},className:l=""}=e,[d,u]=(0,n.useState)(void 0!==t&&t);return(0,f.jsxs)("div",{className:"".concat(Qe," ").concat(l),style:{width:"".concat(s,"px"),height:"".concat(r,"px"),borderRadius:"".concat(r/2,"px"),backgroundColor:void 0!==t&&t||void 0===t&&d?"#e4e4e4":"#1a1c20",...a},onClick:()=>{void 0!==t?o&&o(!t):u(!d)},children:[(0,f.jsx)("div",{className:qe,style:void 0!==t&&t||void 0===t&&d?{width:"".concat(.8*r,"px"),height:"".concat(.8*r,"px"),borderRadius:"50%",top:"".concat(.1*r,"px"),left:"".concat(.1*r,"px")}:{width:"".concat(.2*r,"px"),height:"".concat(.7*r,"px"),borderRadius:"".concat(.2*r/2,"px"),top:"".concat(.15*r,"px"),left:"".concat(s-r/2,"px")}}),c&&(0,f.jsx)("div",{className:Je,style:{width:"".concat(.8*r,"px"),height:"".concat(.8*r,"px"),top:"".concat(.1*r,"px"),left:"".concat(.1*r,"px"),opacity:void 0!==t&&t||void 0===t&&d?0:1,display:"flex",alignItems:"center"},children:c}),i&&(0,f.jsx)("div",{className:Je,style:{width:"".concat(.8*r,"px"),height:"".concat(.8*r,"px"),top:"".concat(.1*r,"px"),left:"".concat(s-.9*r,"px"),opacity:void 0!==t&&t||void 0===t&&d?1:0,display:"flex",alignItems:"center",justifyContent:"flex-end"},children:i})]})},Ke=s.p+"images/16a09882.png",$e=s.p+"images/58bbf8ef.png",et="Switchs_container__pX5RV",tt=()=>(0,f.jsxs)("div",{className:et,children:[(0,f.jsx)(c.A,{intlTitle:"page.htmlVision.interactiveDesign.switchButton"}),(0,f.jsx)(Ze,{width:66,height:30}),(0,f.jsx)(Ze,{width:76,height:34,openIcon:(0,f.jsx)("span",{style:{color:"#333",marginRight:"2px"},children:"ON"}),closeIcon:(0,f.jsx)("span",{style:{color:"#fff",marginLeft:"4px"},children:"OFF"}),style:{margin:"0 60px"}}),(0,f.jsx)(Ze,{openIcon:(0,f.jsx)("img",{src:Ke,alt:"",width:26,height:26}),closeIcon:(0,f.jsx)("img",{src:$e,alt:"",width:26,height:26})})]}),st=s.p+"images/0e3fc4a1.png",nt=s.p+"images/036f3b2c.png",rt=s.p+"images/de961e69.png",it=s.p+"images/77eff419.png",ct=s.p+"images/bae3b2af.png",ot=s.p+"images/641be512.png",at=s.p+"images/bb4c7aec.png",lt=s.p+"images/95259d51.png",dt=s.p+"images/a3f5bcd3.png",ut="animation_container__bfyEi",pt="animation_content__H8vdL",xt="animation_people__3G2ps",ft="animation_giftBox__06Ghv",mt="animation_coin__9Ei6m",gt="animation_gift__fEEYc";let ht=600;const _t=80;let vt="CCW";let jt=0,yt=0,Nt=0,At=!1,Mt=!1;const bt={icon1:{top:60,left:32,vx:-4.5},icon2:{top:30,left:34,vx:-3},icon3:{top:50,left:36,vx:0},icon4:{top:80,left:38,vx:1},icon5:{top:36,left:40,vx:3},icon6:{top:60,left:42,vx:2},icon7:{top:90,left:44,vx:5}},wt={icon1:{top:bt.icon1.top,left:bt.icon1.left,vx:-4.5,vy:0,g:.2,opacity:0,isMoving:!1},icon2:{top:bt.icon2.top,left:bt.icon2.left,vx:-3,vy:0,g:.3,opacity:0,isMoving:!1},icon3:{top:bt.icon3.top,left:bt.icon3.left,vx:0,vy:0,g:.2,opacity:0,isMoving:!1},icon4:{top:bt.icon4.top,left:bt.icon4.left,vx:1,vy:0,g:.3,opacity:0,isMoving:!1},icon5:{top:bt.icon5.top,left:bt.icon5.left,vx:3,vy:0,g:.4,opacity:0,isMoving:!1},icon6:{top:bt.icon6.top,left:bt.icon6.left,vx:2,vy:0,g:.5,opacity:0,isMoving:!1},icon7:{top:bt.icon7.top,left:bt.icon7.left,vx:5,vy:0,g:.3,opacity:0,isMoving:!1}};function Ct(e,t,s){let n=0;return s>-e&&s<e&&(n=Math.sqrt((1-Math.pow(s,2)/Math.pow(e,2))*Math.pow(t,2))),n}const kt=e=>{const{noDropCoins:t=!1,clickNoDropCoins:s=!1}=e,r=(0,n.useRef)(null),c=(0,n.useRef)(null);return(0,n.useLayoutEffect)((()=>{let e=0,s=64,n=Ct(_t,40,s);return e=window.requestAnimationFrame((function o(){if(r.current){const e=function(e,t){let s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,r=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,i=e,c=t;return 0!==s&&(i=e*Math.cos(s)+t*Math.sin(s)+n,c=-e*Math.sin(s)+t*Math.cos(s)+r),{transitionX:i,transitionY:c}}(s,n,jt,yt,Nt),{transitionX:o,transitionY:a}=e,l=i.findDOMNode(r.current);if(!l)return;l.offsetWidth<350?ht=500:l.offsetWidth<400&&(ht=550),l.style.left="".concat(o,"px"),l.style.top="".concat(-a,"px");let d=1.5;s>=_t?("CCW"===vt?(jt=0,yt=0,Nt=0):(jt=120,yt=17,Nt=49),t||(At=!0,Mt=!0)):s<=-_t&&(vt="CCW"===vt?"CW":"CCW",t||(At=!0,Mt=!0)),Math.abs(s)>16&&(d=1.5*Math.pow(Math.cos(s/_t),2));const u=function(e,t,s,n,r){let i=arguments.length>5&&void 0!==arguments[5]?arguments[5]:1,c=n,o=r;return c=n>=e?n-i:n<=-e?n+i:"CCW"===s?r>0?n-i:n+i:r<0?n-i:n+i,c>e?c=e:c<-e&&(c=-e),o=Ct(e,t,c),o>0&&(n>=e?"CCW"!==s&&(o=-o):n<=-e?"CCW"===s&&(o=-o):r<0&&(o=-o)),{nextX:c,nextY:o}}(_t,40,vt,s,n,d),{nextX:p,nextY:x}=u;s=p,n=x;let f=null;c&&c.current&&(f=i.findDOMNode(c.current));let m=!0;f&&Object.keys(wt).forEach(((e,t)=>{const s=f.childNodes[t];if(s){const t=wt[e],{top:n,left:r,vx:i,vy:c,g:o,opacity:a,isMoving:l}=t;if(l||At){const d=bt[e];let u=n+c,p=r+i,x=i;x=Math.abs(i)>.1?i>0?i-.1:i+.1:0;let f=u-d.top;const g=ht-d.top,h=g/2*.45;let _=a;f/g>.55&&(f=h-(u-.55*g)),_=(f/h).toFixed(2),_>1&&(_=1);let v=c+o,j=l;0===u?(u=d.top,p=d.left,x=d.vx,j=!0):u>=ht?(u=0,p=0,_=0,x=0,v=0,j=!1):(m=!1,At&&(j=!0)),s.style.top="".concat(u,"px"),s.style.left="".concat(p,"px"),s.style.opacity=_,Object.assign(t,{top:u,left:p,vx:x,vy:v,isMoving:j})}}})),At&&(At=!1),m&&(Mt=!1)}e=window.requestAnimationFrame(o)})),()=>{e&&window.cancelAnimationFrame(e)}}),[]),(0,f.jsx)("div",{className:ut,children:(0,f.jsxs)("div",{className:pt,ref:r,children:[(0,f.jsx)("img",{src:st,alt:"",className:xt}),(0,f.jsxs)("div",{className:ft,onClick:()=>{s||Mt||(At=!0,Mt=!0)},ref:c,children:[(0,f.jsx)("img",{src:rt,alt:"",className:mt}),(0,f.jsx)("img",{src:it,alt:"",className:mt}),(0,f.jsx)("img",{src:ct,alt:"",className:mt}),(0,f.jsx)("img",{src:ot,alt:"",className:mt}),(0,f.jsx)("img",{src:at,alt:"",className:mt}),(0,f.jsx)("img",{src:lt,alt:"",className:mt}),(0,f.jsx)("img",{src:dt,alt:"",className:mt}),(0,f.jsx)("img",{src:nt,alt:"",className:gt})]})]})})},Dt="PeopleAnimation_container__P9IRI",Rt=()=>(0,f.jsx)("div",{className:Dt,children:(0,f.jsx)(kt,{})}),Bt={container:"TweakCube_container__chHsQ",content:"TweakCube_content__rXgCM",cube:"TweakCube_cube__c9JMo",changeColor:"TweakCube_changeColor__SsQtL",column0:"TweakCube_column0__0ANAL",span0:"TweakCube_span0__kaIxY",span1:"TweakCube_span1__RA+mL",span2:"TweakCube_span2__BzTLy",column1:"TweakCube_column1__9Hhyi",column2:"TweakCube_column2__EbxfC"},Tt=new Array(3).fill(0),Lt=()=>(0,f.jsxs)("div",{className:Bt.container,children:[(0,f.jsx)(c.A,{intlTitle:"page.htmlVision.interactiveDesign.pseudo3DRubikCube"}),(0,f.jsx)("div",{className:Bt.content,children:Tt.map(((e,t)=>(0,f.jsx)("div",{className:Bt.cube,children:Tt.map(((e,t)=>(0,f.jsx)("div",{className:Bt["column".concat(t)],children:Tt.map(((e,t)=>(0,f.jsx)("span",{className:Bt["span".concat(t)]},t)))},t)))},t)))})]}),St="Preserve3dBox_container__S8Nkn",It="Preserve3dBox_content__OkpkD",Et="Preserve3dBox_box__xhigG",Ht="Preserve3dBox_side1__OlfJ5",Pt="Preserve3dBox_side2__N20GX",Wt="Preserve3dBox_side3__t1Hxo",Yt="Preserve3dBox_side4__7YzMw",Ot="Preserve3dBox_side5__38WMJ",Ft="Preserve3dBox_side6__pWRYS",Vt="Preserve3dBox_light__8ms1v",Xt=()=>{const e=(0,n.useRef)(null),t=(0,n.useRef)(null),s=(0,n.useRef)(null),r=()=>{if(s.current=null,t.current){const{children:e}=t.current;Array.prototype.forEach.call(e,(e=>{Array.prototype.includes.call(e.classList,Vt)&&e.classList.remove(Vt)}));document.styleSheets[0].insertRule("@keyframes preserve3dRotate {\n            100% {\n                transform: rotate3d(1, 1, 1, 360deg);\n              }\n          }"),t.current.style.animation="preserve3dRotate 10s linear infinite"}},o=e=>{null==e||e.classList.add(Vt)};return(0,f.jsxs)("div",{className:St,onMouseDown:e=>{const{clientX:n,clientY:r}=e,{transform:c}=window.getComputedStyle(i.findDOMNode(t.current));if(c&&"none"!==c){const e=c.match(/matrix(3d)?((.+))/);if(e&&e.length>=3){const t=e[2].split(", ")||[],i=180*Math.acos(Number(t[5]))/Math.PI,c=180*Math.acos(Number(t[10]))/Math.PI;s.current={x:n,y:r,rotateX:i,rotateY:c}}}},onMouseMove:e=>{if(t.current&&s.current){const{clientX:n,clientY:r}=e,{x:i,y:c,rotateX:o,rotateY:a}=s.current,l=2*(c-r),d=(n-i)/2;t.current&&(t.current.style.animation="none"),t.current.style.transform="rotateX(".concat(o+l,"deg) rotateY(").concat(a+d,"deg)")}},onMouseUp:r,onMouseLeave:r,ref:e,children:[(0,f.jsx)(c.A,{intlTitle:"page.htmlVision.interactiveDesign.3DRubikCube"}),(0,f.jsx)("div",{className:It,children:(0,f.jsxs)("div",{className:Et,ref:t,children:[(0,f.jsx)("div",{className:Ht,onClick:e=>{t.current&&(t.current.style.transform="rotateX(360deg) rotateY(360deg)",t.current.style.animation="none",o(e.target))}}),(0,f.jsx)("div",{className:Pt,onClick:e=>{t.current&&(t.current.style.transform="rotateX(0deg) rotateY(180deg)",t.current.style.animation="none",o(e.target))}}),(0,f.jsx)("div",{className:Wt,onClick:e=>{t.current&&(t.current.style.transform="rotateX(270deg) rotateY(0deg)",t.current.style.animation="none",o(e.target))}}),(0,f.jsx)("div",{className:Yt,onClick:e=>{t.current&&(t.current.style.transform="rotateX(90deg) rotateY(180deg)",t.current.style.animation="none",o(e.target))}}),(0,f.jsx)("div",{className:Ot,onClick:e=>{t.current&&(t.current.style.transform="rotateX(0deg) rotateY(90deg)",t.current.style.animation="none",o(e.target))}}),(0,f.jsx)("div",{className:Ft,onClick:e=>{t.current&&(t.current.style.transform="rotateX(0deg) rotateY(270deg)",t.current.style.animation="none",o(e.target))}})]})})]})},Ut="OrientationSenseCard_container__wM4Og",zt="OrientationSenseCard_content__nHHlN",Gt="OrientationSenseCard_card__kb1rR",Qt=[we,Ce,De,Re,Be],qt=()=>(0,f.jsxs)("div",{className:Ut,children:[(0,f.jsx)(c.A,{intlTitle:"page.htmlVision.interactiveDesign.automaticIdentificationOfMouseDirection"}),(0,f.jsx)("div",{className:zt,children:Qt.map(((e,t)=>(0,f.jsx)("div",{className:Gt,children:(0,f.jsx)("img",{src:e,alt:""})},t)))})]}),Jt="HexagonalMesh1_container__4Mauo",Zt="HexagonalMesh1_item__uupv2",Kt=new Array(800).fill(0),$t=()=>{const e=(0,n.useRef)(null),t=()=>{if(e.current){const{width:t,height:s}=e.current.getBoundingClientRect(),n=t/2,r=s/2;e.current.style.setProperty("--xPos","".concat(n,"px")),e.current.style.setProperty("--yPos","".concat(r,"px"))}};return(0,n.useEffect)((()=>{t()}),[]),(0,f.jsx)("div",{className:Jt,onMouseMove:t=>{if(e.current){const{left:s,top:n}=e.current.getBoundingClientRect(),r=t.pageX-s,i=t.pageY-n;window.requestAnimationFrame((function(){e.current&&(e.current.style.setProperty("--xPos","".concat(r,"px")),e.current.style.setProperty("--yPos","".concat(i,"px")))}))}},onMouseLeave:t,ref:e,children:Kt.map(((e,t)=>(0,f.jsx)("div",{className:Zt},t)))})},es="HexagonalMesh2_container__7Eq5-",ts="HexagonalMesh2_item__RBkZx",ss=new Array(800).fill(0),ns=()=>{const e=(0,n.useRef)(null),t=()=>{if(e.current){const{width:t,height:s}=e.current.getBoundingClientRect(),n=t/2,r=s/2;e.current.style.setProperty("--xPos","".concat(n,"px")),e.current.style.setProperty("--yPos","".concat(r,"px"))}};return(0,n.useEffect)((()=>{t()}),[]),(0,f.jsx)("div",{className:es,onMouseMove:t=>{if(e.current){const{left:s,top:n}=e.current.getBoundingClientRect(),r=t.pageX-s,i=t.pageY-n;window.requestAnimationFrame((function(){e.current&&(e.current.style.setProperty("--xPos","".concat(r,"px")),e.current.style.setProperty("--yPos","".concat(i,"px")))}))}},onMouseLeave:t,ref:e,children:ss.map(((e,t)=>(0,f.jsx)("div",{className:ts},t)))})},rs="HexagonalMesh3_container__7cOnb",is="HexagonalMesh3_item__JnppT",cs=new Array(800).fill(0),os=()=>{const e=(0,n.useRef)(null);return(0,f.jsx)("div",{className:rs,ref:e,children:cs.map(((e,t)=>(0,f.jsx)("div",{className:is},t)))})};var as=s(70792),ls=s(75846),ds=s(69877),us=s(2266),ps=s(92136),xs=s(3766),fs=s(17122),ms=s(80002),gs=s(68456),hs=s(90580),_s=s(1399),vs=s(46061),js=s(790),ys=s(87104),Ns=s(18406),As=s(76517),Ms=s(66480),bs=s(53422),ws=s(51600),Cs=s(46221),ks=s(16125),Ds=s(58676),Rs=s(80069),Bs=s(29566),Ts=s(73576),Ls=s(6516),Ss=s(82138),Is=s(72226),Es=s(91046),Hs=s(87851),Ps=s(94131),Ws=s(11033),Ys=s(4716),Os=s(77584),Fs=s(43965),Vs=s(41546),Xs=s(86405),Us=s(25167),zs=s(73142),Gs=s(86706),Qs=s(84032),qs=s(44663),Js=s(77639),Zs=s(99328),Ks=s(31942),$s=s(13740),en=s(41723),tn=s(1372),sn=s(43348),nn=s(95718),rn=s(43450),cn=s(84145),on=s(76371),an=s(3674),ln=s(40562),dn=s(51711),un=s(83762),pn=s(97189),xn=s(66893),fn=s(142),mn=s(58937),gn=s(56679),hn=s(26362),_n=s(24089),vn=s(3105),jn=s(24423),yn=s(67345),Nn=s(82510),An=s(138),Mn=s(60227),bn=s(13255),wn=s(90888),Cn=s(30074),kn=s(82463),Dn=s(46802),Rn=s(43774),Bn=s(7079),Tn=s(48990),Ln=s(80088),Sn=s(88668),In=s(44627),En=s(53578),Hn=s(78602),Pn=s(6490);const Wn="IconScroll_container__pHJbN",Yn="IconScroll_row__ueyux",On=new Array(40).fill(0),Fn=()=>{const e=()=>(0,f.jsxs)("div",{children:[(0,f.jsx)(as.A,{}),(0,f.jsx)(ls.A,{}),(0,f.jsx)(ds.A,{}),(0,f.jsx)(us.A,{}),(0,f.jsx)(ps.A,{}),(0,f.jsx)(xs.A,{}),(0,f.jsx)(fs.A,{}),(0,f.jsx)(ms.A,{}),(0,f.jsx)(gs.A,{}),(0,f.jsx)(hs.A,{}),(0,f.jsx)(_s.A,{}),(0,f.jsx)(vs.A,{}),(0,f.jsx)(js.A,{}),(0,f.jsx)(ys.A,{}),(0,f.jsx)(Ns.A,{}),(0,f.jsx)(As.A,{}),(0,f.jsx)(Ms.A,{}),(0,f.jsx)(bs.A,{}),(0,f.jsx)(ws.A,{}),(0,f.jsx)(Cs.A,{}),(0,f.jsx)(ks.A,{}),(0,f.jsx)(Ds.A,{}),(0,f.jsx)(Rs.A,{}),(0,f.jsx)(Bs.A,{}),(0,f.jsx)(Ts.A,{}),(0,f.jsx)(Ls.A,{}),(0,f.jsx)(Ss.A,{}),(0,f.jsx)(Is.A,{}),(0,f.jsx)(Es.A,{}),(0,f.jsx)(Hs.A,{}),(0,f.jsx)(Ps.A,{}),(0,f.jsx)(Ws.A,{}),(0,f.jsx)(Ys.A,{}),(0,f.jsx)(Os.A,{}),(0,f.jsx)(Fs.A,{}),(0,f.jsx)(Vs.A,{}),(0,f.jsx)(Xs.A,{}),(0,f.jsx)(Us.A,{}),(0,f.jsx)(zs.A,{}),(0,f.jsx)(Gs.A,{}),(0,f.jsx)(Qs.A,{}),(0,f.jsx)(qs.A,{}),(0,f.jsx)(Js.A,{}),(0,f.jsx)(Zs.A,{}),(0,f.jsx)(Ks.A,{}),(0,f.jsx)($s.A,{}),(0,f.jsx)(en.A,{}),(0,f.jsx)(tn.A,{}),(0,f.jsx)(sn.A,{}),(0,f.jsx)(nn.A,{}),(0,f.jsx)(rn.A,{}),(0,f.jsx)(cn.A,{}),(0,f.jsx)(on.A,{}),(0,f.jsx)(an.A,{}),(0,f.jsx)(ln.A,{}),(0,f.jsx)(dn.A,{}),(0,f.jsx)(un.A,{}),(0,f.jsx)(pn.A,{}),(0,f.jsx)(xn.A,{}),(0,f.jsx)(fn.A,{}),(0,f.jsx)(mn.A,{}),(0,f.jsx)(gn.A,{}),(0,f.jsx)(hn.A,{}),(0,f.jsx)(_n.A,{}),(0,f.jsx)(vn.A,{}),(0,f.jsx)(jn.A,{}),(0,f.jsx)(yn.A,{}),(0,f.jsx)(Nn.A,{}),(0,f.jsx)(An.A,{}),(0,f.jsx)(Mn.A,{}),(0,f.jsx)(bn.A,{}),(0,f.jsx)(wn.A,{}),(0,f.jsx)(Cn.A,{}),(0,f.jsx)(kn.A,{}),(0,f.jsx)(Dn.A,{}),(0,f.jsx)(Rn.A,{}),(0,f.jsx)(Bn.A,{}),(0,f.jsx)(Tn.A,{}),(0,f.jsx)(Ln.A,{}),(0,f.jsx)(Sn.A,{}),(0,f.jsx)(In.A,{}),(0,f.jsx)(En.A,{}),(0,f.jsx)(Hn.A,{}),(0,f.jsx)(Pn.A,{})]});return(0,f.jsx)("div",{className:Wn,children:On.map(((t,s)=>(0,f.jsxs)("div",{className:Yn,children:[e(),e()]},s)))})};var Vn=s(50329),Xn=s(68e3);const Un="WipeSwitchover_container__zA+wD",zn="WipeSwitchover_mask1__efwWk",Gn="WipeSwitchover_mask2__bTFbb",Qn="WipeSwitchover_mask3__Gaobg",qn="WipeSwitchover_mask4__ZERnA",Jn="WipeSwitchover_mask5__MkpDg",Zn="WipeSwitchover_page1__ex092",Kn="WipeSwitchover_page2__S7sFb",$n="WipeSwitchover_page3__JtV7t",er="WipeSwitchover_page4__9G6Y9",tr="WipeSwitchover_page5__uBeX2",sr="WipeSwitchover_prevBtn__6vW6Q",nr="WipeSwitchover_icon__Z3ryB",rr="WipeSwitchover_nextBtn__sVZkG",ir=.006,cr=[8,8,8,7,30],or=[.72,.7,1,1,.32],ar=()=>{const e=(0,n.useRef)(null),t=(0,n.useRef)(null),s=(0,n.useRef)(null),[r,i]=(0,n.useState)(cr.length-1),o=(0,n.useRef)(cr.length-1),a=(0,n.useRef)(!1),l=(0,n.useRef)(0),d=(e,t)=>{if(e){a.current=!0;const{strokeDashoffset:s}=e.style;let n=0;if(s)if("0"===s)n=Number((cr[o.current]*ir).toFixed(2));else if(s.includes("px")){const r=Number(s.substring(0,s.length-2));if(t<o.current){if(r>=cr[o.current])return a.current=!1,o.current=t,void i(t);n=Number((cr[o.current]*ir+r).toFixed(2))}else if(t>o.current){if(r>=2*cr[t])return e.style.strokeDashoffset="0px",a.current=!1,o.current=t,void i(t);n=Number((cr[t]*ir+r).toFixed(2))}}else{const r=Number(s);if(t<o.current){if(r>=cr[o.current])return a.current=!1,o.current=t,void i(t);n=Number((cr[o.current]*ir+r).toFixed(2))}else if(t>o.current){if(r>=2*cr[t])return e.style.strokeDashoffset="0px",a.current=!1,o.current=t,void i(t);n=Number((cr[t]*ir+r).toFixed(2))}}else n=Number((cr[o.current]*ir).toFixed(2));e.style.strokeDashoffset="".concat(n,"px"),l.current=window.requestAnimationFrame((()=>d(e,t)))}},u=()=>{if(e.current&&s.current){const{clientWidth:n}=e.current,r=Math.ceil(600+.1*(n-1140));Array.prototype.forEach.call(s.current.children,((e,t)=>{let s=window.getComputedStyle(e.children[0],null).getPropertyValue("transform");if(s&&s.startsWith("matrix")){const e=s.split(", ");e[0]="".concat(e[0].substring(0,7)).concat(Math.ceil(or[t]*n)),s=e.join(", ")}e.children[0].style.transform=s})),t.current&&(e.current.style.height="".concat(r,"px"),Array.prototype.forEach.call(t.current.children,(e=>{if("g"===e.tagName){e.style.height="".concat(r,"px"),e.children[0].style.height="".concat(r,"px"),e.children[0].style.transform="".concat(r,"px");const t=Math.floor(n/2-240-40),s=Math.floor((r-340)/2);e.children[1].style.transform="translate(".concat(t,"px, ").concat(s,"px)")}})))}};return(0,n.useEffect)((()=>(u(),()=>{l.current&&cancelAnimationFrame(l.current)})),[]),(0,n.useEffect)((()=>(window.addEventListener("resize",u),()=>{window.removeEventListener("resize",u)})),[]),(0,f.jsxs)("div",{className:Un,ref:e,children:[(0,f.jsx)(c.A,{intlTitle:"page.htmlVision.interactiveDesign.wipeTheEffect"}),(0,f.jsxs)("svg",{ref:t,children:[(0,f.jsxs)("defs",{ref:s,children:[(0,f.jsx)("mask",{id:"mask1",className:zn,children:(0,f.jsx)("path",{d:"M0.712-0.263\r c0,0-0.009,0.466-0.001,0.593c0.002,0.033,0.013,0.098-0.149,0.098c-0.157,0-0.16-0.049-0.161-0.08\r C0.398,0.245,0.395,0.04,0.399-0.063c0.001-0.035,0.009-0.105-0.162-0.102C0.088-0.163,0.091-0.093,0.09-0.059\r C0.09,0.04,0.08,0.238,0.09,0.337C0.093,0.368,0.107,0.42-0.058,0.42c-0.162,0-0.136-0.05-0.139-0.079\r C-0.21,0.234-0.207,0.033-0.2-0.069c0.002-0.035,0.015-0.103-0.16-0.102C-0.521-0.171-0.511-0.1-0.509-0.066\r C-0.502,0.046-0.51,0.379-0.51,0.379"})}),(0,f.jsx)("mask",{id:"mask2",className:Gn,children:(0,f.jsx)("path",{d:"M-0.305,0.045\r c0,0,1.262-0.007,1.36-0.007c0.231,0,0.229,0.224-0.001,0.224c-0.14,0.001-0.929-0.002-1.042,0c-0.174,0.003-0.17,0.224-0.021,0.23\r c0.288,0.011,0.87-0.005,1.055-0.011C1.223,0.475,1.228,0.71,1.071,0.71C0.779,0.723,0.09,0.705-0.038,0.712\r s-0.148,0.223,0.031,0.234s0.233,0.011,0.233,0.011"})}),(0,f.jsx)("mask",{id:"mask3",className:Qn,children:(0,f.jsx)("path",{d:"M1.15844,0.36167L1.08063,0.40111C0.95906,0.528330.94358,0.771430.87938,0.95278C0.81605,1.131660.65918,1.069850.71313,0.88778C0.75751,0.737960.89903,0.356360.93094,0.16944C0.95119,0.050820.84113,-0.056650.77563,0.12056C0.70882,0.301290.46792,1.203240.32092,0.97256C0.23658,0.840220.60869,0.261270.58134,0.05953C0.56686,-0.047280.49508,-0.06670.43749,0.0378C0.32377,0.244160.27639,0.451050.17792,0.71504C0.07944,0.979030.00295,0.842150.01094,0.75333C0.03758,0.457110.31406,0.1150.23375,-0.01111C0.15331,-0.137420.09392,0.21887-0.0325,0.23722"})}),(0,f.jsx)("mask",{id:"mask4",className:qn,children:(0,f.jsx)("path",{d:"M0.559-0.226L0.535-0.16\r c-0.196,0.171,0.09,0.27-0.022,0.436C0.49,0.31,0.384,0.312,0.344,0.202c-0.035-0.097-0.033-0.195,0.014-0.26\r c0.105-0.143,0.209-0.079,0.264,0.003c0.061,0.09,0.066,0.192,0.047,0.265c-0.093,0.35-0.537,0.162-0.49-0.159\r c0.019-0.129,0.095-0.202,0.196-0.228c0.13-0.034,0.289-0.028,0.373,0.063c0.083,0.09,0.094,0.349-0.014,0.466\r C0.64,0.452,0.178,0.502,0.077,0.256C-0.05-0.055,0.18-0.217,0.373-0.227c0.224-0.012,0.463-0.017,0.535,0.128\r C0.993,0.072,0.978,0.29,0.813,0.427"})}),(0,f.jsx)("mask",{id:"mask5",className:Jn,children:(0,f.jsx)("path",{d:"M1.854-1.746L1.537-1.042\r c0.01,0.123-1.79,0.327-2.269,0.467C-1.433-0.37-1.427,0.309-0.835,0.209c0.464-0.078,3.077-0.572,3.921-0.742\r C3.714-0.66,3.81-0.043,3.364,0.102C2.423,0.406-0.153,0.795-1.188,1.026c-0.494,0.11-0.409,0.646,0.107,0.629\r c0.76-0.025,3.983-0.752,4.594-0.793c0.399-0.045,0.967,0.403-0.091,0.66C3.028,1.685,1,2.067,0.612,2.239\r C0.225,2.411,0.27,2.982,1.007,2.833l2.979-0.615"})})]}),(0,f.jsxs)("g",{className:Zn,mask:"url(#mask1)",children:[(0,f.jsx)("rect",{fill:"#e3e4e5"}),(0,f.jsx)("image",{xlinkHref:Me}),(0,f.jsx)("text",{fill:"#757576",children:"Book5"})]}),(0,f.jsxs)("g",{className:Kn,mask:"url(#mask2)",children:[(0,f.jsx)("rect",{fill:"#7e7f83"}),(0,f.jsx)("image",{xlinkHref:be}),(0,f.jsx)("text",{fill:"#dedede",children:"Book4"})]}),(0,f.jsxs)("g",{className:$n,mask:"url(#mask3)",children:[(0,f.jsx)("rect",{fill:"#f8d3cc"}),(0,f.jsx)("image",{xlinkHref:we}),(0,f.jsx)("text",{fill:"#b0304e",children:"Book3"})]}),(0,f.jsxs)("g",{className:er,mask:"url(#mask4)",children:[(0,f.jsx)("rect",{fill:"#d2e4ce"}),(0,f.jsx)("image",{xlinkHref:Ce}),(0,f.jsx)("text",{fill:"#04756e",children:"Book2"})]}),(0,f.jsxs)("g",{className:tr,mask:"url(#mask5)",children:[(0,f.jsx)("rect",{fill:"#cad9e5"}),(0,f.jsx)("image",{xlinkHref:ke}),(0,f.jsx)("text",{fill:"#142864",children:"Book1"})]})]}),(0,f.jsx)("div",{className:sr,style:r>=cr.length-1?{pointerEvents:"none"}:{},onClick:()=>{if(!a.current&&s.current){const e=r+1,t=s.current.children[e].children[0];d(t,e)}},children:(0,f.jsx)("div",{className:nr,children:(0,f.jsx)(Vn.A,{})})}),(0,f.jsx)("div",{className:rr,style:r<=0?{pointerEvents:"none"}:{},onClick:()=>{if(!a.current&&s.current){const e=r-1,t=s.current.children[r].children[0];d(t,e)}},children:(0,f.jsx)("div",{className:nr,children:(0,f.jsx)(Xn.A,{})})})]})},lr="AutoCompletePunctuation_container__EjYmN",dr="AutoCompletePunctuation_content__PIXsh",ur={"'":"'",'"':'"',"(":")","（":"）","【":"】","[":"]","《":"》","「":"」","『":"』","{":"}","“":"”","‘":"’"},pr=()=>{const e=(0,n.useRef)(null),t=(0,n.useRef)(null),s=(0,n.useCallback)((e=>{const t=ur[e.data];if(t&&("insertText"===e.inputType||"compositionend"===e.type))if(["TEXTAREA","INPUT"].includes(e.target.tagName))e.target.setRangeText(t);else{const e=document.createTextNode(t),s=document.getSelection();if(s){const t=s.getRangeAt(0);t.insertNode(e),t.setEndBefore(e),t.commonAncestorContainer.normalize()}}}),[]);return(0,n.useEffect)((()=>(e.current&&(e.current.addEventListener("input",s),e.current.addEventListener("compositionend",s)),t.current&&(t.current.addEventListener("input",s),t.current.addEventListener("compositionend",s)),()=>{e.current&&(e.current.removeEventListener("input",s),e.current.removeEventListener("compositionend",s)),t.current&&(t.current.removeEventListener("input",s),t.current.removeEventListener("compositionend",s))})),[]),(0,f.jsxs)("div",{className:lr,children:[(0,f.jsx)(c.A,{intlTitle:"page.htmlVision.interactiveDesign.autoCompletePunctuation"}),(0,f.jsxs)("div",{className:dr,children:[(0,f.jsx)("textarea",{rows:5,placeholder:"maxLength is 100",maxLength:100,ref:e}),(0,f.jsx)("div",{contentEditable:"true",ref:t})]})]})};var xr=s(72453),fr=s(49452),mr=s(4713),gr=s(25118);const hr="StackedImages_container__Hnz74",_r="StackedImages_content__bZLt4",vr=[xr,fr,mr,gr],jr=()=>(0,f.jsxs)("div",{className:hr,children:[(0,f.jsx)(c.A,{intlTitle:"page.htmlVision.interactiveDesign.stackedImages"}),(0,f.jsx)("div",{className:_r,children:vr.map(((e,t)=>(0,f.jsx)("img",{src:e,alt:""},t)))})]}),yr="InteractiveDesign_container__oK3No",Nr="InteractiveDesign_box__+Trza",Ar=[{element:(0,f.jsx)(m,{})},{element:(0,f.jsx)(L,{})},{element:(0,f.jsx)(U,{})},{element:(0,f.jsx)(te,{})},{element:(0,f.jsx)(ce,{})},{element:(0,f.jsx)(ge,{})},{element:(0,f.jsx)(Ne,{})},{element:(0,f.jsx)(Ge,{})},{element:(0,f.jsx)(tt,{})},{element:(0,f.jsx)(Rt,{})},{element:(0,f.jsx)(Lt,{})},{element:(0,f.jsx)(Xt,{})},{element:(0,f.jsx)(qt,{})},{element:(0,f.jsx)($t,{})},{element:(0,f.jsx)(ns,{})},{element:(0,f.jsx)(os,{})},{element:(0,f.jsx)(Fn,{})},{element:(0,f.jsx)(ar,{})},{element:(0,f.jsx)(pr,{})},{element:(0,f.jsx)(jr,{})}],Mr=()=>{const{setScrollTop:e}=(0,r.S)();return(0,n.useEffect)((()=>{e(0)}),[]),(0,f.jsx)("div",{className:yr,children:Ar.map(((e,t)=>(0,f.jsx)("div",{className:Nr,children:e.element},t)))})}},55874:(e,t,s)=>{e.exports=s.p+"images/c5e4532e.jpg"},72453:(e,t,s)=>{e.exports=s.p+"images/7380e6f7.jpg"},49452:(e,t,s)=>{e.exports=s.p+"images/06a46209.jpg"},4713:(e,t,s)=>{e.exports=s.p+"images/ed6d9a11.jpg"},25118:(e,t,s)=>{e.exports=s.p+"images/271a66ed.jpg"}}]);
\ No newline at end of file
diff --git a/docs/main.js b/docs/main.js
index 69da2fa..c14eef2 100644
--- a/docs/main.js
+++ b/docs/main.js
@@ -1 +1 @@
-(()=>{"use strict";var e,a,n,t,i,o={73776:(e,a,n)=>{n.d(a,{EV:()=>s,K7:()=>c,O7:()=>i,kd:()=>t,nf:()=>r,pr:()=>o});const t=["#F2BB00","#16BA79","#2454E6","#5470c6","#ea7ccc","#91cc75","#ee6666","#73c0de","#3ba272","#9a60b4"],i=[{name:"两个跨域页面进行跳转传参的终极方案",href:"https://juejin.cn/post/7134967869326458916"},{name:"面试秘籍之手写系列",href:"https://juejin.cn/post/7134975263707758606"},{name:"一款将打包后的Chrome插件自动化加载到浏览器的webpack插件",href:"https://juejin.cn/post/7134991167095062565"},{name:"全网最全AutoIt3基础教程及实战案例",href:"https://juejin.cn/post/7134952028870017060"},{name:"两个跨域页面实现量子纠缠的终极方案",href:"https://juejin.cn/post/7312031033302614051"}],o="bIframe",s="http://localhost:3003",r="selfPageInfoList",c="bPageInfo"},46935:(e,a,n)=>{n.d(a,{D:()=>r,S:()=>c});var t=n(96540),i=n(74848);const o=t.createContext({locale:"en-us",setLocale:()=>{},headHeight:0,setHeadHeight:()=>{},menuWidth:0,setMenuWidth:()=>{},scrollTop:0,setScrollTop:()=>{},scrollContentRef:t.createRef(),setScrollContentRef:()=>{}});let s=t.createRef();const r=e=>{const a=localStorage.getItem("language")||"en-us",[n,r]=(0,t.useState)(a),[c,l]=(0,t.useState)(0),[m,g]=(0,t.useState)(0),[p,d]=(0,t.useState)(0),h=(0,t.useCallback)((function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;d(e),s.current&&s.current.scrollTop!==e&&(s.current.scrollTop=e)}),[]);return(0,i.jsx)(o.Provider,{value:{locale:n,headHeight:c,menuWidth:m,scrollTop:p,setLocale:e=>{const a=/^zh\b/.test(e.toLocaleLowerCase())?"zh-cn":"en-us";r(a),localStorage.setItem("language",a)},setHeadHeight:l,setMenuWidth:g,setScrollTop:h,scrollContentRef:s,setScrollContentRef:e=>{e&&(s=e)}},children:e.children})},c=()=>(0,t.useContext)(o)},45785:(e,a,n)=>{var t=n(96540),i=n(5338),o=n(84976),s=n(46935),r=n(47767),c=n(29970);const l={init:function(){c.Ay.initialize("G-N0W492NWD6")},sendEvent:function(e){c.Ay.event(e)},sendPageview:function(e){c.Ay.send({hitType:"pageview",page:e})}};var m=n(6442),g=n(27197),p=n(26211),d=n(13545),h=n(60227),u=n(99552);const f=e=>{const a=(0,t.useRef)({screenLeft:window.screenLeft,screenTop:window.screenTop}),n=(0,t.useRef)(0),i=()=>{if(a.current){const{screenLeft:n,screenTop:t}=a.current;if(n!==window.screenLeft||t!==window.screenTop){const n={screenLeft:window.screenLeft,screenTop:window.screenTop};a.current=n,e(n)}}n.current=window.requestAnimationFrame(i)};return(0,t.useEffect)((()=>(n.current=window.requestAnimationFrame(i),()=>{n.current&&window.cancelAnimationFrame(n.current)})),[]),a.current},y=window.location.host.includes("localhost")||window.location.host.includes("127.0.0.1"),D=(e,a,n,i,o)=>{const s=(0,t.useRef)(Math.random().toString(36).substring(2)),[r,c]=(0,t.useState)(null),l=(0,t.useRef)(""),m=(0,t.useRef)(!1),g=(0,t.useRef)(0),p=(0,t.useRef)(0),d=()=>{let e=0,a=0;if(null!=o&&o.current){const{top:n,left:t,width:i,height:s}=o.current.getBoundingClientRect();e=t+window.screenLeft+i/2,a=n+window.screenTop+s/2}else e=window.innerWidth/2+window.screenLeft,a=window.innerHeight/2+window.screenTop;return{pageId:s.current,x:e,y:a}},h=(0,t.useCallback)((()=>{const e=d(),a=window.localStorage.getItem(n);if(a){const t=JSON.parse(a);if(t&&t.length>0){const t=JSON.parse(a).filter((e=>e.pageId!==s.current));t.unshift(e),window.localStorage.setItem(n,JSON.stringify(t))}else window.localStorage.setItem(n,JSON.stringify([e]))}else window.localStorage.setItem(n,JSON.stringify([e]))}),[]),u=(0,t.useCallback)((()=>{const e=window.localStorage.getItem(n);if(e){const a=JSON.parse(e);if(a&&a.length>0){const a=JSON.parse(e).filter((e=>e.pageId===l.current));window.localStorage.setItem(n,JSON.stringify(a))}}}),[]),D=(0,t.useCallback)((()=>{if(e&&m.current){const t=document.getElementById(e);if(t){var n;const e=d();null===(n=t.contentWindow)||void 0===n||n.postMessage(JSON.stringify(e),a)}}}),[]),v=(0,t.useCallback)((()=>{if(e&&m.current){const t=document.getElementById(e);if(t){var n;g.current=0;const e={pageId:s.current,keepAlive:!0,timestamp:(new Date).getTime()};null===(n=t.contentWindow)||void 0===n||n.postMessage(JSON.stringify(e),a),p.current||(p.current=window.setTimeout((()=>{p.current=0,window.localStorage.removeItem(i),l.current="",c(null)}),1500))}}}),[]),w=e=>{if(e){const a=JSON.parse(e);if(a&&a.length>0){let e=!1;for(let n=0,t=a.length;n<t;n++){const t=a[n];if(t.pageId!==s.current){l.current=t.pageId,c(t),e=!0;break}}e||(l.current="",c(null))}else l.current="",c(null)}else l.current="",c(null)},P=e=>{if(e){const a=JSON.parse(e);a?(l.current=a.pageId,c(a)):(l.current="",c(null))}else l.current="",c(null)},b=(0,t.useCallback)((e=>{e.origin===a&&(e.data?e.data.includes("keepAlive")?window.localStorage.setItem("keepAliveInfo",e.data):window.localStorage.setItem(i,e.data):(window.localStorage.setItem("keepAliveInfo",""),window.localStorage.setItem(i,"")))}),[]),T=(0,t.useCallback)((e=>{if(e.key===n)w(e.newValue);else if("keepAliveInfo"===e.key){if(e.newValue){const a=JSON.parse(e.newValue);if(l.current)a&&a.pageId===l.current&&p.current&&(window.clearTimeout(p.current),p.current=0);else{p.current&&(window.clearTimeout(p.current),p.current=0);const e={pageId:a.pageId,x:0,y:0};l.current=a.pageId,c(e)}}}else e.key===i&&P(e.newValue)}),[]),E=(0,t.useCallback)((()=>{if(window.self===window.top)if(y){D();const e=window.localStorage.getItem(i);P(e)}else{h();const e=window.localStorage.getItem(n);w(e)}}),[]);return f(E),(0,t.useEffect)((()=>{if(window.self===window.top)if(y){if(e&&null!=o&&o.current){const n=document.createElement("iframe");n.id=e,n.style.visibility="hidden",n.onload=()=>{m.current=!0,E(),window.addEventListener("storage",T),window.addEventListener("resize",E),g.current=window.setInterval((()=>{v()}),600)},n.src=a,o.current.appendChild(n)}}else E(),window.addEventListener("storage",T),window.addEventListener("resize",E),window.addEventListener("beforeunload",u);else y&&window.addEventListener("message",b,!1);return()=>{window.self===window.top?(window.removeEventListener("storage",T),window.removeEventListener("resize",E),g.current&&window.clearInterval(g.current),p.current&&window.clearTimeout(p.current),y||u()):y&&window.removeEventListener("message",b)}}),[]),{interactPageInfo:r,resendMessage:E}};var v=n(73776);const w="InteractionEyes_container__nC6-d",P="InteractionEyes_eye__zDx2I",b="InteractionEyes_heart__G9lnP",T="InteractionEyes_eyeball__hK-+b";var E=n(74848);const S=()=>{const{locale:e}=(0,s.S)(),a=(0,t.useRef)(null),{interactPageInfo:n,resendMessage:i}=D(v.pr,v.EV,v.nf,v.K7,a);(0,t.useEffect)((()=>{i()}),[e]);const o=(0,t.useMemo)((()=>{if(a.current&&n){const{x:e,y:t}=n,{top:i,left:o,width:s,height:r}=a.current.getBoundingClientRect(),c=o+window.screenLeft+s/2,l=i+window.screenTop+r/2,m=Math.hypot(e-c,t-l);if(m>28){return{eyeballLeft:9*(e-c)/m,eyeballTop:9*(t-l)/m}}return{eyeballLeft:0,eyeballTop:0}}return null}),[n]);return(0,E.jsx)("div",{className:w,ref:a,children:o&&(0,E.jsxs)(E.Fragment,{children:[(0,E.jsx)("div",{className:P,children:0===o.eyeballLeft&&0===o.eyeballTop?(0,E.jsx)("div",{className:b}):(0,E.jsx)("div",{className:T,style:{transform:"translate(".concat(o.eyeballLeft,"px, ").concat(o.eyeballTop,"px)")}})}),(0,E.jsx)("div",{className:P,children:0===o.eyeballLeft&&0===o.eyeballTop?(0,E.jsx)("div",{className:b}):(0,E.jsx)("div",{className:T,style:{transform:"translate(".concat(o.eyeballLeft,"px, ").concat(o.eyeballTop,"px)")}})})]})})},V=n.p+"images/235f02ed.jpeg",C=e=>(0,E.jsx)("svg",{width:"1em",height:"1em",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",...e,children:(0,E.jsxs)("g",{fill:"#11142D",fillRule:"nonzero",children:[(0,E.jsx)("path",{d:"M2.324 2.323h15.12v15.12H2.324V2.323ZM1.711.999a.71.71 0 0 0-.711.71v16.347c0 .393.318.71.71.71h16.348a.71.71 0 0 0 .71-.71V1.71a.71.71 0 0 0-.71-.71H1.71Z"}),(0,E.jsx)("path",{d:"M10.097 13.383V12.36h-4.63V9.863h4.18V8.84h-4.18V6.552H9.91V5.529H4.267v7.854h5.83Zm2.277 0V9.962c.044-.462.21-.825.473-1.09.242-.241.54-.351.87-.351.88 0 1.33.484 1.33 1.452v3.41h1.166v-3.51c0-1.561-.715-2.331-2.123-2.331a1.98 1.98 0 0 0-.957.22 2.183 2.183 0 0 0-.759.638v-.704h-1.166v5.687h1.166Z"})]})}),x=e=>(0,E.jsx)("svg",{width:"1em",height:"1em",viewBox:"0 0 21 20",xmlns:"http://www.w3.org/2000/svg",...e,children:(0,E.jsxs)("g",{fill:"#11142D",fillRule:"nonzero",children:[(0,E.jsx)("path",{d:"M2.44 2.323h15.12v15.12H2.44V2.323ZM1.827.999a.71.71 0 0 0-.711.71v16.347c0 .393.318.71.71.71h16.347a.71.71 0 0 0 .711-.71V1.71a.71.71 0 0 0-.71-.71H1.826Z"}),(0,E.jsx)("path",{d:"M10.539 14.593v-3.685h2.87v.627h1.046V6.222h-3.916V4.319H9.46v1.903H5.556v5.313H6.6v-.627h2.86v3.685h1.078ZM9.46 9.885H6.6v-2.64h2.86v2.64Zm3.949 0h-2.871v-2.64h2.87v2.64Z"})]})}),F="Header_container__4tC+Z",B="Header_left__7u7-T",k="Header_title__T9B5R",A="Header_right__qQAPq",M="Header_btn__osEo4",I="Header_rewardModal__LMM8K",j="Header_closeBtn__p4OnE",L=window.location.host.includes("localhost")||window.location.host.includes("127.0.0.1"),R=()=>{const e=(0,m.A)(),{locale:a,setLocale:n,setHeadHeight:i}=(0,s.S)(),o=(0,t.useRef)(null),[r,c]=(0,t.useState)(!1);return(0,t.useEffect)((()=>{if(o.current){const{height:e}=o.current.getBoundingClientRect();i(e)}}),[]),(0,E.jsxs)("div",{className:F,ref:o,children:[(0,E.jsxs)("div",{className:B,children:[(0,E.jsx)("div",{className:k,onClick:()=>{if(L){const a=document.getElementById(v.pr);var e;if(a)null===(e=a.contentWindow)||void 0===e||e.postMessage("autoSavePassword",v.EV);window.open(v.EV,"_blank","top=200,left=100")}else window.open("https://hepengwei.cn","_blank","top=200,left=100")},children:e.formatMessage({id:"common.logoName"})}),(0,E.jsx)(S,{})]}),(0,E.jsx)(g.A,{message:(0,E.jsxs)("div",{style:{display:"flex",alignItems:"center"},children:["全新复合组件示例库已发布，赶紧",(0,E.jsx)("div",{style:{color:"#4c78fc",cursor:"pointer",marginLeft:"4px"},onClick:()=>{window.open("https://hepengwei.github.io/composite-component-library","_blank")},children:"前往体验"})]}),type:"warning",showIcon:!0,closable:!0}),(0,E.jsxs)("div",{className:A,children:[(0,E.jsx)(p.A,{placement:"bottomRight",title:e.formatMessage({id:"common.reward"}),children:(0,E.jsx)("div",{className:M,onClick:()=>{c(!0)},children:(0,E.jsx)(h.A,{})})}),(0,E.jsx)(p.A,{placement:"bottomRight",title:e.formatMessage({id:"common.LanguageSwitch"}),children:(0,E.jsx)("div",{className:M,onClick:()=>{n("zh-cn"===a?"en-us":"zh-cn")},children:"zh-cn"===a?(0,E.jsx)(x,{}):(0,E.jsx)(C,{})})})]}),(0,E.jsxs)(d.A,{wrapClassName:I,title:e.formatMessage({id:"common.reward"}),open:r,closeIcon:null,footer:null,maskClosable:!1,width:320,children:[(0,E.jsx)("div",{className:j,onClick:()=>{c(!1)},children:(0,E.jsx)(u.A,{})}),(0,E.jsx)("img",{src:V,alt:""}),(0,E.jsx)("p",{children:e.formatMessage({id:"common.reward.tip"})})]})]})};var _=n(40961),O=n(142),N=n(22630),z=n(75132),J=n(84890),H=n(32977),W=n(87942),G=n(21883),U=n(76157),q=n(31201),Z=n(79045),K=n(68777),Y=n(75816);const Q="Menus_container__dz5ma",$="Menus_topBox__EoJUd",X="Menus_top__a7CPT",ee="Menus_menuLabel__eOdiw",ae="Menus_bottom__dStLR";function ne(e,a,n,t,i){return{key:a,icon:n,children:t,label:(0,E.jsx)("p",{className:ee,children:e}),type:i}}const te=()=>{const e=(0,m.A)(),a=(0,r.Zp)(),n=(0,r.zy)(),[i,o]=(0,t.useState)(!1),{setMenuWidth:c}=(0,s.S)(),l=(0,t.useRef)(null),g=[ne(e.formatMessage({id:"menu.htmlVision"}),"html",(0,E.jsx)(O.A,{}),[ne(e.formatMessage({id:"menu.htmlVision.visualDesign"}),"visualDesign"),ne(e.formatMessage({id:"menu.htmlVision.interactiveDesign"}),"interactiveDesign"),ne(e.formatMessage({id:"menu.htmlVision.backgroundPattern"}),"backgroundEffect"),ne(e.formatMessage({id:"menu.htmlVision.complexLayout"}),"complexLayout"),ne(e.formatMessage({id:"menu.htmlVision.applicationPageFrame"}),"appPageFrame"),ne(e.formatMessage({id:"menu.htmlVision.utilitarianFunction"}),"utilitarianFunction")]),ne(e.formatMessage({id:"menu.cssDynamicEffect"}),"css",(0,E.jsx)(N.A,{}),[ne(e.formatMessage({id:"menu.cssDynamicEffect.dynamicEffectButton"}),"dynamicButtons"),ne(e.formatMessage({id:"menu.cssDynamicEffect.richDynamicEffect"}),"richDynamicEffect"),ne(e.formatMessage({id:"menu.cssDynamicEffect.generateRegularPolygon"}),"generateRegularPolygon"),ne(e.formatMessage({id:"menu.cssDynamicEffect.generateShadow"}),"generateShadow"),ne(e.formatMessage({id:"menu.cssDynamicEffect.generateScrollBar"}),"generateScrollBar")]),ne(e.formatMessage({id:"menu.canvasDynamicEffect"}),"canvas",(0,E.jsx)(z.A,{}),[ne(e.formatMessage({id:"menu.canvasDynamicEffect.sphereCollisionExample"}),"sphereCollisionExample"),ne(e.formatMessage({id:"menu.canvasDynamicEffect.dynamicClock"}),"dynamicClock"),ne(e.formatMessage({id:"menu.canvasDynamicEffect.searchlightEffect"}),"searchlight"),ne(e.formatMessage({id:"menu.canvasDynamicEffect.sphereCollisionInteraction"}),"globuleInteraction"),ne(e.formatMessage({id:"menu.canvasDynamicEffect.destroyThePlanetGame"}),"killPlanetGame"),ne(e.formatMessage({id:"menu.canvasDynamicEffect.sphereFreeFallInteraction"}),"freeFallingBody"),ne(e.formatMessage({id:"menu.canvasDynamicEffect.coolCountdownAnimation"}),"countDown"),ne(e.formatMessage({id:"menu.canvasDynamicEffect.dynamicParticleBackground"}),"particlesBg"),ne(e.formatMessage({id:"menu.canvasDynamicEffect.rippleEffect"}),"rippleFloatOnTheWater"),ne(e.formatMessage({id:"menu.canvasDynamicEffect.flowerBloomingAnimation"}),"flowerBloom"),ne(e.formatMessage({id:"menu.canvasDynamicEffect.codeBackgroundWall"}),"codeBgWall"),ne(e.formatMessage({id:"menu.canvasDynamicEffect.wordDance"}),"wordDance"),ne(e.formatMessage({id:"menu.canvasDynamicEffect.scratch"}),"scratch"),ne(e.formatMessage({id:"menu.canvasDynamicEffect.matchLine"}),"matchLine")]),ne(e.formatMessage({id:"menu.echartsInteraction"}),"echarts",(0,E.jsx)(J.A,{}),[ne(e.formatMessage({id:"menu.echartsInteraction.barCharts"}),"bar"),ne(e.formatMessage({id:"menu.echartsInteraction.pieCharts"}),"pie"),ne(e.formatMessage({id:"menu.echartsInteraction.treeCharts"}),"tree")]),ne(e.formatMessage({id:"menu.threeJs3D"}),"threejs",(0,E.jsx)(H.A,{}),[ne(e.formatMessage({id:"menu.threeJs3D.appPageFrame"}),"threejsAppPageFrame"),ne(e.formatMessage({id:"menu.threeJs3D.carShow"}),"carShow"),ne(e.formatMessage({id:"menu.threeJs3D.rubiksCube"}),"rubiksCube"),ne(e.formatMessage({id:"menu.threeJs3D.throwDice"}),"throwDice"),ne(e.formatMessage({id:"menu.threeJs3D.mapDisplay"}),"mapDisplay"),ne(e.formatMessage({id:"menu.threeJs3D.earthDisplay"}),"earthDisplay")]),ne(e.formatMessage({id:"menu.AIApplication"}),"AIApplication",(0,E.jsx)(W.A,{}),[ne(e.formatMessage({id:"menu.AIApplication.humanPostureDetection"}),"humanPostureDetection"),ne(e.formatMessage({id:"menu.AIApplication.notBlockPeopleBarrage"}),"notBlockPeopleBarrage")]),ne(e.formatMessage({id:"menu.imageProcessingTool"}),"imageProcessingTool",(0,E.jsx)(G.A,{}))],p=(0,t.useCallback)((0,Z.A)((()=>{const e=_.findDOMNode(l.current);e&&c(e.clientWidth)}),{wait:360}).run,[]),d=(0,t.useMemo)((()=>{const{pathname:e}=n,a=[];if(e){const n=e.split("/"),t=n[n.length-1];t&&a.push(t)}return a}),[n]),h=(0,t.useMemo)((()=>{const{pathname:e}=n;if(e){const a=e.split("/");if(a.length>=2&&a[1])return[a[1]]}return["html"]}),[n]);return(0,t.useEffect)((()=>{p()}),[i]),(0,t.useEffect)((()=>(window.addEventListener("resize",p),()=>{window.removeEventListener("resize",p)})),[]),(0,E.jsxs)("div",{className:Q,ref:l,children:[(0,E.jsxs)("div",{className:$,children:[(0,E.jsx)("div",{className:X,children:(0,E.jsx)(K.Ay,{type:"primary",onClick:()=>{o(!i)},style:{marginBottom:16},children:i?(0,E.jsx)(U.A,{}):(0,E.jsx)(q.A,{})})}),(0,E.jsx)(Y.A,{defaultOpenKeys:h,selectedKeys:d,mode:"inline",theme:"dark",inlineCollapsed:i,items:g,onClick:e=>{const{keyPath:n}=e,t=n.reduce(((e,a)=>e="/".concat(a).concat(e)),"");a(t)}})]}),(0,E.jsx)("div",{className:ae,children:!i&&(0,E.jsx)("span",{children:e.formatMessage({id:"common.keepUpdating"})})})]})},ie="Home_container__RMLhs",oe="Home_container_body__-OVNZ",se="Home_container_content__q7A-W",re=()=>{(function(){const e=(0,r.zy)();t.useEffect((()=>{l.init()}),[]),t.useEffect((()=>{const a=e.pathname+e.search;l.sendPageview(a)}),[e])})();const{setScrollTop:e,setScrollContentRef:a}=(0,s.S)(),n=(0,r.Ye)(le),i=(0,r.zy)(),o=(0,r.Zp)(),c=(0,t.useRef)(null);return(0,t.useEffect)((()=>{const{pathname:e}=i;e&&"/"!==e||o("/html/visualDesign")}),[i]),(0,t.useEffect)((()=>{a(c)}),[]),(0,E.jsxs)("div",{className:ie,children:[(0,E.jsx)(R,{}),(0,E.jsxs)("div",{className:oe,children:[(0,E.jsx)(te,{}),(0,E.jsx)("div",{className:se,onScroll:()=>{var a;e(null===(a=c.current)||void 0===a?void 0:a.scrollTop)},ref:c,children:n})]})]})};var ce=n(85541);const le=[{path:"/html",children:[{path:"/html/visualDesign",element:()=>Promise.all([n.e(653),n.e(6379),n.e(505),n.e(268)]).then(n.bind(n,38281))},{path:"/html/interactiveDesign",element:()=>Promise.all([n.e(8e3),n.e(1372),n.e(329),n.e(885),n.e(505),n.e(1844),n.e(8868)]).then(n.bind(n,6581))},{path:"/html/backgroundEffect",element:()=>Promise.all([n.e(505),n.e(155)]).then(n.bind(n,60155))},{path:"/html/complexLayout",element:()=>Promise.all([n.e(3874),n.e(2370),n.e(4103),n.e(3853),n.e(2320),n.e(782),n.e(653),n.e(8e3),n.e(5965),n.e(329),n.e(6679),n.e(9527),n.e(3877)]).then(n.bind(n,33877))},{path:"/html/appPageFrame",element:()=>Promise.all([n.e(5862),n.e(3666)]).then(n.bind(n,63666))},{path:"/html/utilitarianFunction",element:()=>Promise.all([n.e(3874),n.e(5234),n.e(6710),n.e(7645),n.e(2370),n.e(8491),n.e(4103),n.e(2320),n.e(782),n.e(7867),n.e(153),n.e(4959),n.e(299),n.e(9958),n.e(9527),n.e(1657),n.e(845)]).then(n.bind(n,7311))}]},{path:"/css",children:[{path:"/css/dynamicButtons",element:()=>Promise.all([n.e(1550),n.e(505),n.e(1844),n.e(2245)]).then(n.bind(n,42245))},{path:"/css/richDynamicEffect",element:()=>Promise.all([n.e(653),n.e(1956)]).then(n.bind(n,71956))},{path:"/css/generateRegularPolygon",element:()=>Promise.all([n.e(3874),n.e(8491),n.e(4103),n.e(3853),n.e(5829),n.e(5826),n.e(9903)]).then(n.bind(n,79903))},{path:"/css/generateShadow",element:()=>Promise.all([n.e(3874),n.e(8491),n.e(4103),n.e(3853),n.e(5829),n.e(2320),n.e(782),n.e(5826),n.e(7867),n.e(8e3),n.e(8732),n.e(7385)]).then(n.bind(n,17385))},{path:"/css/generateScrollBar",element:()=>Promise.all([n.e(3874),n.e(8491),n.e(4103),n.e(3853),n.e(5829),n.e(2320),n.e(782),n.e(5826),n.e(7867),n.e(8e3),n.e(8732),n.e(7675)]).then(n.bind(n,57675))}]},{path:"/canvas",children:[{path:"/canvas/sphereCollisionExample",element:()=>Promise.all([n.e(5633),n.e(3035)]).then(n.bind(n,33035))},{path:"/canvas/dynamicClock",element:()=>n.e(5873).then(n.bind(n,45873))},{path:"/canvas/searchlight",element:()=>Promise.all([n.e(5633),n.e(1562)]).then(n.bind(n,71562))},{path:"/canvas/globuleInteraction",element:()=>Promise.all([n.e(5633),n.e(2452)]).then(n.bind(n,20599))},{path:"/canvas/killPlanetGame",element:()=>Promise.all([n.e(5633),n.e(8009)]).then(n.bind(n,8009))},{path:"/canvas/freeFallingBody",element:()=>Promise.all([n.e(5633),n.e(6925)]).then(n.bind(n,79655))},{path:"/canvas/countDown",element:()=>Promise.all([n.e(5633),n.e(5005)]).then(n.bind(n,75005))},{path:"/canvas/particlesBg",element:()=>Promise.all([n.e(5346),n.e(9477)]).then(n.bind(n,9477))},{path:"/canvas/rippleFloatOnTheWater",element:()=>n.e(2975).then(n.bind(n,90623))},{path:"/canvas/flowerBloom",element:()=>n.e(108).then(n.bind(n,50108))},{path:"/canvas/codeBgWall",element:()=>n.e(5252).then(n.bind(n,45252))},{path:"/canvas/wordDance",element:()=>n.e(8782).then(n.bind(n,98782))},{path:"/canvas/scratch",element:()=>n.e(4579).then(n.bind(n,74579))},{path:"/canvas/matchLine",element:()=>Promise.all([n.e(3874),n.e(2370),n.e(1674)]).then(n.bind(n,81674))}]},{path:"/echarts",children:[{path:"/echarts/bar",element:()=>Promise.all([n.e(653),n.e(5965),n.e(4642),n.e(5938),n.e(505),n.e(2445),n.e(621)]).then(n.bind(n,60621))},{path:"/echarts/pie",element:()=>Promise.all([n.e(4642),n.e(505),n.e(2445),n.e(5647)]).then(n.bind(n,5647))},{path:"/echarts/tree",element:()=>Promise.all([n.e(5163),n.e(1010)]).then(n.bind(n,81010))}]},{path:"/threejs",children:[{path:"/threejs/threejsAppPageFrame",element:()=>Promise.all([n.e(9437),n.e(5880),n.e(7785),n.e(9169),n.e(9830),n.e(4269)]).then(n.bind(n,60095))},{path:"/threejs/carShow",element:()=>Promise.all([n.e(9437),n.e(7024),n.e(7785),n.e(9169),n.e(9830),n.e(5087)]).then(n.bind(n,95087))},{path:"/threejs/rubiksCube",element:()=>Promise.all([n.e(9437),n.e(7024),n.e(5880),n.e(3912),n.e(9169),n.e(8702)]).then(n.bind(n,18702))},{path:"/threejs/throwDice",element:()=>Promise.all([n.e(3874),n.e(2370),n.e(8491),n.e(4103),n.e(9437),n.e(3853),n.e(5829),n.e(7024),n.e(3912),n.e(4236),n.e(9169),n.e(6519)]).then(n.bind(n,6519))},{path:"/threejs/mapDisplay",element:()=>Promise.all([n.e(9437),n.e(7024),n.e(5880),n.e(7785),n.e(1372),n.e(3656),n.e(9169),n.e(9830),n.e(6283),n.e(2697)]).then(n.bind(n,64484))},{path:"/threejs/earthDisplay",element:()=>Promise.all([n.e(9437),n.e(7024),n.e(5880),n.e(7785),n.e(1372),n.e(9169),n.e(9830),n.e(6283),n.e(9363)]).then(n.bind(n,90803))}]},{path:"/AIApplication",children:[{path:"/AIApplication/humanPostureDetection",element:()=>Promise.all([n.e(3874),n.e(5234),n.e(6710),n.e(7645),n.e(2370),n.e(153),n.e(660),n.e(6651)]).then(n.bind(n,6621))},{path:"/AIApplication/notBlockPeopleBarrage",element:()=>Promise.all([n.e(3874),n.e(5234),n.e(6710),n.e(7645),n.e(2370),n.e(8491),n.e(2320),n.e(7867),n.e(153),n.e(9958),n.e(9527),n.e(3872)]).then(n.bind(n,49856))}]},{path:"/imageProcessingTool",element:()=>Promise.all([n.e(3874),n.e(2370),n.e(8491),n.e(4103),n.e(3853),n.e(5829),n.e(5826),n.e(5965),n.e(4959),n.e(299),n.e(8873),n.e(9527),n.e(1657),n.e(8736)]).then(n.bind(n,28736))},{path:"/pdfProcessingTool",element:()=>Promise.all([n.e(3874),n.e(2370),n.e(4959),n.e(9527),n.e(6006)]).then(n.bind(n,26006))}];(0,ce.kY)(le);const me=[{path:"/*",element:(0,E.jsx)(re,{})}];var ge=n(80445);const pe={"zh-cn":{"common.logoName":"视觉效果集合","common.reward":"打赏","common.reward.tip":"如果觉得网站不错，内容对你有所帮助，再打赏也不迟","common.LanguageSwitch":"中英文切换","common.keepUpdating":"持续更新, 敬请期待","common.comingSoon":"敬请期待","common.comingSoon.text":"该项目持续更新，敬请期待！！！","common.workHard":"正在努力工作，请稍后","common.tryingToLoad":"努力加载中，请稍等","common.start":"开始","common.end":"结束","common.operationFailure":"操作失败","common.noData":"暂无","common.unknown":"未知","common.confirm":"确定","common.cancel":"取消","common.clear":"清空","common.play":"播放","common.pause":"暂停","common.download":"下载","common.get":"获取","common.failedToObtain":"获取失败","common.failedToObtain2":"获取失败，浏览器不支持","common.pleaseEnterText":"请输入文本","common.getText":"获取文本","common.save":"保存","common.saveSuccessfully":"保存成功","common.saveFailed":"保存失败，浏览器不支持","common.parsingDataFailure":"解析数据失败，请更换其他文件","common.uploadFile":"上传文件","common.dragTheFileHere":"或将文件拖到此处","common.supportedImageType":"支持jpg、jpeg、png格式","common.supportedPdfType":"支持pdf格式","common.supportedVideoType":"支持webm、mp4格式","common.pleaseUploadPicture":"请先上传图片","common.deviceNotFound":"请求的设备未找到","common.impowerOpenMicrophone":"授权失败，请点击设置->隐私设置和安全->网站设置->麦克风，打开允许使用","common.impowerOpenCamera":"授权失败，请点击设置->隐私设置和安全->网站设置->摄像头，打开允许使用","common.notSupportGetUserMedia":"浏览器不支持getUserMedia","common.notSupportGetDisplayMedia":"浏览器不支持getDisplayMedia","common.browserTooLow":"您的浏览器版本过低，请更新浏览器","common.backgroundColor":"背景色","common.filename":"文件名","common.format":"格式","common.dimension":"尺寸","common.size":"大小","common.width":"宽度","common.height":"高度","common.duration":"时长","common.transparency":"透明色","common.red":"红色","common.blue":"蓝色","common.white":"白色","common.watermarkSizeLimit":"请选择20x20以上尺寸的水印图片","common.watermarkSizeTooLarge":"请选择小于目标图片尺寸的水印图片","common.uploadWatermark":"上传水印","common.distanceLeft":"距离左侧","common.distanceTop":"距离顶部","common.clippingWidth":"裁剪宽度","common.clippingHeight":"裁剪高度","common.flipSideToSide":"左右翻转","common.flipTopToBottom":"上下翻转","common.rotateLeft":"左旋转","common.rotateRight":"右旋转","common.graying":"灰化","common.vampix":"黑白化","common.mosaicGrainSize":"马赛克颗粒大小","common.parsingData":"解析数据中","common.whetherMaintainOriginalProportion":"是否保持原比例","common.pleaseEnterWidthOrHeight":"请输入宽度或高度","common.reset":"重置","common.backout":"撤销","common.delete":"删除","common.inquire":"查询","common.checkout":"校验","common.moduleTitle":"模块标题","common.customizeContent":"自定义内容","menu.htmlVision":"Html视觉","menu.htmlVision.visualDesign":"视觉设计","menu.htmlVision.interactiveDesign":"交互设计","menu.htmlVision.backgroundPattern":"背景图案","menu.htmlVision.complexLayout":"复杂布局","menu.htmlVision.applicationPageFrame":"应用页面框架","menu.htmlVision.utilitarianFunction":"实用功能","menu.cssDynamicEffect":"Css动效","menu.cssDynamicEffect.dynamicEffectButton":"动效按钮","menu.cssDynamicEffect.richDynamicEffect":"丰富动效","menu.cssDynamicEffect.generateRegularPolygon":"生成正多边形","menu.cssDynamicEffect.generateShadow":"生成阴影","menu.cssDynamicEffect.generateScrollBar":"生成滚动条","menu.cssDynamicEffect.musicVisualization":"音乐可视化","menu.canvasDynamicEffect":"Canvas动效","menu.canvasDynamicEffect.sphereCollisionExample":"sphere-collision库示例","menu.canvasDynamicEffect.dynamicClock":"动态时钟","menu.canvasDynamicEffect.searchlightEffect":"探照灯效果","menu.canvasDynamicEffect.sphereCollisionInteraction":"球体碰撞交互","menu.canvasDynamicEffect.destroyThePlanetGame":"消灭行星小游戏","menu.canvasDynamicEffect.sphereFreeFallInteraction":"球体自由落体交互","menu.canvasDynamicEffect.coolCountdownAnimation":"炫酷倒计时动画","menu.canvasDynamicEffect.dynamicParticleBackground":"动态粒子背景","menu.canvasDynamicEffect.rippleEffect":"水波荡漾效果","menu.canvasDynamicEffect.flowerBloomingAnimation":"花卉绽放动画","menu.canvasDynamicEffect.codeBackgroundWall":"代码背景墙","menu.canvasDynamicEffect.wordDance":"文字跳舞","menu.canvasDynamicEffect.scratch":"刮刮乐","menu.canvasDynamicEffect.matchLine":"连接线","menu.echartsInteraction":"Echarts交互","menu.echartsInteraction.barCharts":"柱状图","menu.echartsInteraction.pieCharts":"饼图","menu.echartsInteraction.treeCharts":"树状图","menu.threeJs3D":"Three.js3D","menu.threeJs3D.appPageFrame":"炫酷3D应用页面","menu.threeJs3D.carShow":"汽车展览","menu.threeJs3D.rubiksCube":"3阶魔方","menu.threeJs3D.throwDice":"投骰子","menu.threeJs3D.mapDisplay":"地图展示","menu.threeJs3D.earthDisplay":"地球展示","menu.AIApplication":"人工智能应用","menu.AIApplication.humanPostureDetection":"人体姿态检测","menu.AIApplication.notBlockPeopleBarrage":"不挡人像的弹幕","menu.imageProcessingTool":"图片处理工具","menu.imageProcessingTool.basicOperation":"基础操作","menu.imageProcessingTool.rectangularClipping":"矩形裁剪","menu.imageProcessingTool.roundedCornerClipping":"圆角裁剪","menu.imageProcessingTool.modifyTheSize":"修改尺寸","menu.imageProcessingTool.modifyBrightness":"修改亮度","menu.imageProcessingTool.modifyTransparency":"修改透明度","menu.imageProcessingTool.addWatermark":"添加水印","menu.imageProcessingTool.coverWithMosaics":"打马赛克","menu.imageProcessingTool.imageCompression":"图片压缩","menu.pdfProcessingTool":"PDF处理工具","menu.pdfProcessingTool.overview":"查看","menu.pdfProcessingTool.edit":"编辑","page.htmlVision.visualDesign.displaysCustomRows":"该组件为超出时显示省略号的文本组件, 还可动态获取文字是否超出。","page.htmlVision.visualDesign.displaysCustomRows2":"该组件为可显示自定义行数，超出时显示省略号的文本组件，还支持在最后面出现省略号时显示自定义的文字按钮。","page.htmlVision.visualDesign.thisIsText":"这是文字。","page.htmlVision.visualDesign.quantumEntanglementTip":"该站中有隐藏款量子纠缠效果等待你发现哦。","page.htmlVision.visualDesign.brighten":"变亮","page.htmlVision.visualDesign.grayed":"变灰","page.htmlVision.visualDesign.textShadow":"文字阴影","page.htmlVision.interactiveDesign.magnifyingGlass":"放大镜交互效果","page.htmlVision.interactiveDesign.dragAndDropClipBox":"可拖拽裁剪框交互效果","page.htmlVision.interactiveDesign.dragAndDropShopping":"拖拽式购物交互效果","page.htmlVision.interactiveDesign.swipeTab":"左右滑动Tab切换交互效果","page.htmlVision.interactiveDesign.flipBoook":"翻书交互效果","page.htmlVision.interactiveDesign.switchButton":"左右滑动开关按钮","page.htmlVision.interactiveDesign.pseudo3DRubikCube":"伪3D魔方交互效果","page.htmlVision.interactiveDesign.3DRubikCube":"3D魔方交互效果","page.htmlVision.interactiveDesign.automaticIdentificationOfMouseDirection":"自动辨别鼠标方向交互效果","page.htmlVision.interactiveDesign.wipeTheEffect":"擦除切换页面效果","page.htmlVision.interactiveDesign.title":"书名","page.htmlVision.interactiveDesign.price":"价格","page.htmlVision.interactiveDesign.count":"数量","page.htmlVision.interactiveDesign.total":"总计","page.htmlVision.interactiveDesign.addingToCart":"放开添加到购物车","page.htmlVision.interactiveDesign.dragToThisToBuy":"拖拽到此区域进行购买","page.htmlVision.interactiveDesign.previousPage":"前一页","page.htmlVision.interactiveDesign.nextPage":"后一页","page.htmlVision.interactiveDesign.personalArticle":"个人文章","page.htmlVision.interactiveDesign.autoCompletePunctuation":"自动补全标点输入框","page.htmlVision.interactiveDesign.stackedImages":"堆叠图片的悬停效果","page.htmlVision.interactiveDesign.autoTagNum":"CSS自动计算标签数量","page.htmlVision.utilitarianFunction.operatingShears":"操作剪切板","page.htmlVision.utilitarianFunction.saveTextToClipboard":"保存文本到剪切板","page.htmlVision.utilitarianFunction.pleaseEnterText":"请先输入文本","page.htmlVision.utilitarianFunction.getsTextFromClipboard":"从剪切板获取文本","page.htmlVision.utilitarianFunction.saveImageToClipboard":"保存图片到剪切板","page.htmlVision.utilitarianFunction.getImageFromClipboard":"从剪切板获取图片","page.htmlVision.utilitarianFunction.pasteTheImage":"Ctrl+V粘贴图片","page.htmlVision.utilitarianFunction.recordAudio":"录制音频","page.htmlVision.utilitarianFunction.startRecording":"开始录制","page.htmlVision.utilitarianFunction.whileRecording":"录制中，点击结束","page.htmlVision.utilitarianFunction.rerecord":"重新录制","page.htmlVision.utilitarianFunction.recordScreen":"录制屏幕","page.htmlVision.utilitarianFunction.recordVideo":"录制视频","page.htmlVision.utilitarianFunction.takeIDPhotos":"拍证件照","page.htmlVision.utilitarianFunction.clickToTakeAPhoto":"点击拍照","page.htmlVision.utilitarianFunction.readyToTakeAPhoto":"准备拍照","page.htmlVision.utilitarianFunction.backPhoto":"重新拍照","page.htmlVision.utilitarianFunction.oneInch":"1寸","page.htmlVision.utilitarianFunction.twoInch":"2寸","page.cssDynamicEffect.richDynamicEffect.SVGCircularClock":"SVG圆形时钟动效","page.cssDynamicEffect.richDynamicEffect.upAndDownCard":"上下翻转卡片时钟动效","page.cssDynamicEffect.richDynamicEffect.charging":"充电动效","page.cssDynamicEffect.richDynamicEffect.zongziLoading":"粽子Loading动效","page.cssDynamicEffect.richDynamicEffect.borderRotation":"边框旋转动效","page.cssDynamicEffect.richDynamicEffect.luminousText":"发光文字动效","page.cssDynamicEffect.richDynamicEffect.searchlightText":"探照灯文字动效","page.cssDynamicEffect.richDynamicEffect.wavyText":"波浪文字动效","page.cssDynamicEffect.richDynamicEffect.textLineDisplay":"文字线条显示动效","page.cssDynamicEffect.richDynamicEffect.textLineLoop":"文字线条循环动效","page.cssDynamicEffect.richDynamicEffect.mobiusLoopBar":"莫比乌斯环循环条动效","page.cssDynamicEffect.richDynamicEffect.mobiusRingsCircleDots":"莫比乌斯环循环圆点动效","page.cssDynamicEffect.richDynamicEffect.tankShaking":"水罐摇晃动效","page.cssDynamicEffect.generateRegularPolygon.numberOfSides":"边数","page.cssDynamicEffect.generateRegularPolygon.rotation":"旋转","page.cssDynamicEffect.generateShadow.horizontalOffset":"水平偏移","page.cssDynamicEffect.generateShadow.verticalOffset":"垂直偏移","page.cssDynamicEffect.generateShadow.blurLength":"模糊程度","page.cssDynamicEffect.generateShadow.shadowSize":"阴影大小","page.cssDynamicEffect.generateShadow.borderRadius":"边框半径","page.cssDynamicEffect.generateShadow.shadowColor":"阴影颜色","page.cssDynamicEffect.generateScrollBar.scrollBarWidth":"纵向滚动条宽度","page.cssDynamicEffect.generateScrollBar.scrollBarHeight":"横向滚动条高度","page.cssDynamicEffect.generateScrollBar.scrollBarBgColor":"滚动条背景色","page.cssDynamicEffect.generateScrollBar.slidingBlockBgColor":"滑块背景色","page.cssDynamicEffect.generateScrollBar.slidingBlockRadius":"滑块圆角","page.cssDynamicEffect.generateScrollBar.slidingBlockHoverBgColor":"滑块Hover背景色","page.cssDynamicEffect.generateScrollBar.rightBottomBgColor":"右下角背景色","page.canvasDynamicEffect.sphereCollisionExample":"sphere-collision库示例","page.canvasDynamicEffect.dynamicClock":"动态时钟效果","page.canvasDynamicEffect.searchlight":"探照灯效果","page.canvasDynamicEffect.startGame":"开 始 游 戏","page.canvasDynamicEffect.continueTheGame":"继 续 游 戏","page.canvasDynamicEffect.restart":"重 新 开 始","page.canvasDynamicEffect.pause":"暂停","page.canvasDynamicEffect.gameHasPaused":"游戏已暂停","page.canvasDynamicEffect.score":"分数","page.canvasDynamicEffect.videoIsSlowToLoad":"视频加载比较慢，请耐心等待","page.canvasDynamicEffect.matchLineQuestion":"连线题","page.canvasDynamicEffect.fruit":"水果","page.canvasDynamicEffect.animal":"动物","page.canvasDynamicEffect.car":"汽车","page.canvasDynamicEffect.vegetable":"蔬菜","page.canvasDynamicEffect.pleaseReset":"当前已校验，请重置","page.canvasDynamicEffect.noVerifiableAnswer":"没有可校验的答案","page.threeJs3D.abrazine":"磨砂","page.threeJs3D.cryolite":"冰晶","page.threeJs3D.ordinary":"普通","page.threeJs3D.transparent":"透亮","page.threeJs3D.carDisplayAndMatching":"汽车展示与选配","page.threeJs3D.bodyColor":"车身颜色","page.threeJs3D.anteriorFaceColor":"前脸颜色","page.threeJs3D.hoodColor":"引擎盖颜色","page.threeJs3D.hubColor":"轮毂颜色","page.threeJs3D.filmMaterial":"贴膜材质","page.threeJs3D.windshieldMaterial":"挡风玻璃材质","page.threeJs3D.diceNum":"骰子数量","page.threeJs3D.enterDiceNum":"请先输入骰子数量","page.threeJs3D.visualizationPlatform":"大屏可视化平台","page.AIApplication.humanPostureDetection":"实时人体姿势检测(必须要有摄像头)","page.AIApplication.send":"发送","page.AIApplication.sendBarrage":"发送弹幕","page.imageProcessingTool.extensionTipFront":"如果你想在离线时也使用该工具，或者是你有大于1350x1350尺寸的图片需要处理，那么推荐你使用","page.imageProcessingTool.extensionTipBehind":"浏览器插件，将该项目中的extension文件夹加载到浏览器中即可使用。","page.imageProcessingTool.imageTooSmall":"请选择20x20以上尺寸的图片","page.imageProcessingTool.imageTooLarge":"请选择1350x1350以下尺寸的图片","page.imageProcessingTool.shmpch":"锐化","page.imageProcessingTool.edgeSharpening":"边缘锐化","page.imageProcessingTool.filterContrast":"反色滤镜","page.imageProcessingTool.redFilter":"红色滤镜","page.imageProcessingTool.greenFilter":"绿色滤镜","page.imageProcessingTool.blueFilter":"蓝色滤镜","page.imageProcessingTool.redGreenFilter":"红绿色滤镜","page.imageProcessingTool.redBlueFilter":"红蓝色滤镜","page.imageProcessingTool.blueGreenFilter":"蓝绿色滤镜","page.imageProcessingTool.redGreyFilter":"红灰色滤镜","page.imageProcessingTool.greenGreyFilter":"绿灰色滤镜","page.imageProcessingTool.blueGreyFilter":"蓝灰色滤镜","page.imageProcessingTool.gaussianBlur":"高斯模糊","page.imageProcessingTool.jpgToPng":"JPG转PNG","page.imageProcessingTool.pngToJpg":"PNG转JPG","page.imageProcessingTool.pleaseEnterBrightness":"请输入亮度值","page.imageProcessingTool.darken":"变暗","page.imageProcessingTool.lighten":"变亮","page.imageProcessingTool.pleaseEnterDiaphaneity":"请输入透明度值","page.imageProcessingTool.pleaseUploadPng":"请上传PNG格式的图片","page.imageProcessingTool.whetherValueFixed":"是否统一为固定值","page.imageProcessingTool.becomeTransparent":"变透明","page.imageProcessingTool.becomeOpaque":"变不透","page.imageProcessingTool.compressibility":"压缩率","page.imageProcessingTool.pleaseEnterFilletRadius":"请输入圆角半径","page.imageProcessingTool.filletRadius":"圆角半径","page.imageProcessingTool.clippedAndConvertedToPng":"裁剪后转成PNG格式","page.imageProcessingTool.WhetherRetainOriginalDimension":"是否保留原尺寸","page.htmlVision.applicationPageFrame.secondPage":"第二页","page.htmlVision.applicationPageFrame.thirdPage":"第三页","page.htmlVision.applicationPageFrame.lastPage":"最后一页","page.htmlVision.applicationPageFrame.title":"两个跨域页面进行跳转传参的终极方案","page.htmlVision.applicationPageFrame.author":"作者","page.htmlVision.applicationPageFrame.pageA":"A页面","page.htmlVision.applicationPageFrame.pageB":"B页面","page.htmlVision.applicationPageFrame.appoint":"本文约定","page.htmlVision.applicationPageFrame.appointText1":"A页面：跳转前的原来页面，假设为a.com","page.htmlVision.applicationPageFrame.appointText2":"B页面：将要跳转的目标页面，假设为b.com","page.htmlVision.applicationPageFrame.subTitle1":"一、简单方案","page.htmlVision.applicationPageFrame.des1":"说到页面跳转，首先想到的就是用a标签","page.htmlVision.applicationPageFrame.codeBox1.text":"在A页面点击链接，并将参数data传到B页面","page.htmlVision.applicationPageFrame.codeBox2.text":"在B页面接收A页面传过来的参数","page.htmlVision.applicationPageFrame.des2":"还可以使用window.open方法跳转页面","page.htmlVision.applicationPageFrame.des3":"弊端：通过URL的方式传参是有字符数量限制的，只能传递较少的数据。","page.htmlVision.applicationPageFrame.subTitle2":"二、传递长数据方案","page.htmlVision.applicationPageFrame.des4":"想要传递大量数据就不能使用将数据放在URL中这种方式进行传递，这里我使用了HTML5中新引入的window.postMessage方法进行数据传递。","page.htmlVision.applicationPageFrame.des5":"如果是在A页面中使用iframe标签嵌入B页面的情况下，方法如下：","page.htmlVision.applicationPageFrame.des6":"弊端","page.htmlVision.applicationPageFrame.des7":"1. 使用postMessage发送消息时要保证B页面已加载，由于A和B两个页面是跨域的，所以使用popup.onload是无效的，只能使用setTimeout延迟发送，这种做法比较low，不能保证稳定性。","page.htmlVision.applicationPageFrame.des8":"2. 使用iframe标签只能嵌入页面，不能打开新窗口，使用window.open可以打开新窗口，但是，当B页面刚被加载时是没有数据传递的，数据是在窗口打开后才被发送，所以B页面会有延迟。","page.htmlVision.applicationPageFrame.subTitle3":"三、终极方案：iframe+postMessage+localStorage","page.htmlVision.applicationPageFrame.des9":"在A页面中使用iframe标签加载B页面并隐藏，当点击跳转时，使用postMessage发送消息给B页面，在B页面中监听A页面发过来的数据，然后保存到localStorage中，然后当A页面使用window.open打开B页面时，B页面直接去localStorage中取数据，这样就完成了页面跳转并传参","page.htmlVision.applicationPageFrame.codeBox3.text":"当能获取到数据时就说明是从A页面跳转过来的","page.htmlVision.applicationPageFrame.des10":"总结","page.htmlVision.applicationPageFrame.des11":"1. iframe和postMessage都是可以跨域的，而localStorage是不能跨域共享数据的。","page.htmlVision.applicationPageFrame.des12":"2. window.postMessage中的window始终是指将要跳转的目标页面的window对象。"},"en-us":{"common.logoName":"Visualization Collection","common.reward":"Reward","common.reward.tip":"If you find the site good and the content helpful, it's not too late to reward","common.LanguageSwitch":"Chinese-English Switch","common.keepUpdating":"Keep updating, stay tuned","common.comingSoon":"Coming soon","common.comingSoon.text":"The project is continuously updated, coming soon！！！","common.workHard":"Hard at work, please hold on","common.tryingToLoad":"Trying to load, please hold on","common.start":"Start","common.end":"End","common.operationFailure":"Operation failure","common.noData":"No data","common.unknown":"Unknown","common.confirm":"Confirm","common.cancel":"Cancel","common.clear":"Clear","common.play":"Play","common.pause":"Pause","common.download":"Download","common.get":"Get","common.failedToObtain":"Failed to obtain","common.failedToObtain2":"Failed to obtain, the browser does not support","common.pleaseEnterText":"Please enter text","common.getText":"Get text","common.save":"Save","common.saveSuccessfully":"Save successfully","common.saveFailed":"Failed to save, the browser does not support","common.parsingDataFailure":"Data parsing failed. Please replace it with another file","common.uploadFile":"Upload File","common.dragTheFileHere":"Or drag the file here","common.supportedImageType":"jpg, jpeg, and png are supported","common.supportedPdfType":"pdf are supported","common.supportedVideoType":"webm and mp4 are supported","common.pleaseUploadPicture":"Please upload the picture first","common.deviceNotFound":"Requested device not found","common.impowerOpenMicrophone":"Authorization failed, please click Settings -> Privacy Settings and Security -> Website Settings -> Microphone to open Allow use","common.impowerOpenCamera":"Authorization failed, please click Settings -> Privacy Settings and Security -> Website Settings -> Camera to open Allow use","common.notSupportGetUserMedia":"Browsers do not support getUserMedia","common.notSupportGetDisplayMedia":"Browsers do not support getDisplayMedia","common.browserTooLow":"Your browser version is too low, please update your browser","common.backgroundColor":"Background Color","common.filename":"Filename","common.format":"Format","common.dimension":"Dimension","common.size":"Size","common.width":"Width","common.height":"Height","common.duration":"Duration","common.transparency":"Transparency","common.red":"Red","common.blue":"Blue","common.white":"White","common.watermarkSizeLimit":"Please select watermark images of 20x20 and above","common.watermarkSizeTooLarge":"Please select a watermark image that is smaller than the size of the target image","common.uploadWatermark":"Upload watermark","common.distanceLeft":"Distance left","common.distanceTop":"Distance Top","common.clippingWidth":"Clipping width","common.clippingHeight":"Clipping height","common.flipSideToSide":"Flip Side To Side","common.flipTopToBottom":"Flip Top To Bottom","common.rotateLeft":"Rotate Left","common.rotateRight":"Rotate Right","common.graying":"Graying","common.vampix":"Vampix","common.mosaicGrainSize":"Mosaic grain size","common.parsingData":"Parsing data","common.whetherMaintainOriginalProportion":"Whether to maintain the original proportion","common.pleaseEnterWidthOrHeight":"Please enter width or height","common.reset":"Reset","common.backout":"Backout","common.delete":"Delete","common.inquire":"Inquire","common.checkout":"Checkout","common.moduleTitle":"Module Title","common.customizeContent":"Customize content","menu.htmlVision":"Html Vision","menu.htmlVision.visualDesign":"Visual Design","menu.htmlVision.interactiveDesign":"Interactive Design","menu.htmlVision.backgroundPattern":"Background Pattern","menu.htmlVision.complexLayout":"Complex Layout","menu.htmlVision.applicationPageFrame":"Application Page Frame","menu.htmlVision.utilitarianFunction":"Utilitarian Function","menu.cssDynamicEffect":"Css Dynamic Effect","menu.cssDynamicEffect.dynamicEffectButton":"Dynamic Effect Button","menu.cssDynamicEffect.richDynamicEffect":"Rich Dynamic Effect","menu.cssDynamicEffect.generateRegularPolygon":"Generate Regular Polygon","menu.cssDynamicEffect.generateShadow":"Generate Shadow","menu.cssDynamicEffect.generateScrollBar":"Generate Scroll Bar","menu.cssDynamicEffect.musicVisualization":"Music Visualization","menu.canvasDynamicEffect":"Canvas Dynamic Effect","menu.canvasDynamicEffect.sphereCollisionExample":"sphere-collision Example","menu.canvasDynamicEffect.dynamicClock":"Dynamic Clock","menu.canvasDynamicEffect.searchlightEffect":"Searchlight Effect","menu.canvasDynamicEffect.sphereCollisionInteraction":"Sphere Collision Interaction","menu.canvasDynamicEffect.destroyThePlanetGame":"Destroy The Planet Game","menu.canvasDynamicEffect.sphereFreeFallInteraction":"Sphere Free Fall Interaction","menu.canvasDynamicEffect.coolCountdownAnimation":"Cool Countdown Animation","menu.canvasDynamicEffect.dynamicParticleBackground":"Dynamic Particle Background","menu.canvasDynamicEffect.rippleEffect":"Ripple Effect","menu.canvasDynamicEffect.flowerBloomingAnimation":"Flower Blooming Animation","menu.canvasDynamicEffect.codeBackgroundWall":"Code Background Wall","menu.canvasDynamicEffect.wordDance":"Word Dance","menu.canvasDynamicEffect.scratch":"Scratch","menu.canvasDynamicEffect.matchLine":"Match Line","menu.echartsInteraction":"Echarts Interaction","menu.echartsInteraction.barCharts":"Bar Charts","menu.echartsInteraction.pieCharts":"Pie Charts","menu.echartsInteraction.treeCharts":"Tree Charts","menu.threeJs3D":"Three.js3D","menu.threeJs3D.appPageFrame":"Cool 3D Application page","menu.threeJs3D.carShow":"Car Show","menu.threeJs3D.rubiksCube":"Level 3 Rubik's Cube","menu.threeJs3D.throwDice":"Throw Dice","menu.threeJs3D.mapDisplay":"Map Display","menu.threeJs3D.earthDisplay":"Earth Display","menu.AIApplication":"AI Application","menu.AIApplication.humanPostureDetection":"Human Posture Detection","menu.AIApplication.notBlockPeopleBarrage":"Not Block The People Of The Barrage","menu.imageProcessingTool":"Image Processing Tool","menu.imageProcessingTool.basicOperation":"Basic Operation","menu.imageProcessingTool.rectangularClipping":"Rectangular Clipping","menu.imageProcessingTool.roundedCornerClipping":"Rounded Corner Clipping","menu.imageProcessingTool.modifyTheSize":"Modify The Size","menu.imageProcessingTool.modifyBrightness":"Modify Brightness","menu.imageProcessingTool.modifyTransparency":"Modify Transparency","menu.imageProcessingTool.addWatermark":"Add Watermark","menu.imageProcessingTool.coverWithMosaics":"Cover With Mosaics","menu.imageProcessingTool.imageCompression":"Image Compression","menu.pdfProcessingTool":"PDF Processing Tool","menu.pdfProcessingTool.overview":"Overview","menu.pdfProcessingTool.edit":"Edit","page.htmlVision.visualDesign.displaysCustomRows":"This component is a text component that displays ellipses when exceeded, and can also dynamically obtain whether text is exceeded.","page.htmlVision.visualDesign.displaysCustomRows2":"This component is a text component that displays the number of user-defined lines, and displays ellipses when the number exceeds. It also supports the display of user-defined text buttons when ellipses appear at the end.","page.htmlVision.visualDesign.thisIsText":"This is the text.","page.htmlVision.visualDesign.quantumEntanglementTip":"There are hidden quantum entanglement effects in this station waiting for you to discover oh.","page.htmlVision.visualDesign.brighten":"Brighten","page.htmlVision.visualDesign.grayed":"Grayed","page.htmlVision.visualDesign.textShadow":"Text Shadow","page.htmlVision.interactiveDesign.magnifyingGlass":"Magnifying glass interaction effect","page.htmlVision.interactiveDesign.dragAndDropClipBox":"Drag-and-drop clip-box interaction effect","page.htmlVision.interactiveDesign.dragAndDropShopping":"Drag-and-drop shopping interaction effect","page.htmlVision.interactiveDesign.swipeTab":"Swipe Tab left and right to change the interaction","page.htmlVision.interactiveDesign.flipBoook":"Flip the book interactive effect","page.htmlVision.interactiveDesign.switchButton":"Slide the switch button left and right","page.htmlVision.interactiveDesign.pseudo3DRubikCube":"Pseudo 3D Rubik's Cube interaction effect","page.htmlVision.interactiveDesign.3DRubikCube":"3D Rubik's Cube interaction effect","page.htmlVision.interactiveDesign.automaticIdentificationOfMouseDirection":"Automatic identification of mouse direction interaction effect","page.htmlVision.interactiveDesign.wipeTheEffect":"Wipe the effect of switching pages","page.htmlVision.interactiveDesign.title":"Title","page.htmlVision.interactiveDesign.price":"Price","page.htmlVision.interactiveDesign.count":"Count","page.htmlVision.interactiveDesign.total":"Total","page.htmlVision.interactiveDesign.addingToCart":"Let go of adding to cart","page.htmlVision.interactiveDesign.dragToThisToBuy":"Drag to this area to buy","page.htmlVision.interactiveDesign.previousPage":"Previous Page","page.htmlVision.interactiveDesign.nextPage":"Next Page","page.htmlVision.interactiveDesign.personalArticle":"Personal Article","page.htmlVision.interactiveDesign.autoCompletePunctuation":"Automatically complete the punctuation input box","page.htmlVision.interactiveDesign.stackedImages":"Hover effect for stacked images","page.htmlVision.interactiveDesign.autoTagNum":"CSS automatically count the number of tags","page.htmlVision.utilitarianFunction.operatingShears":"Operating Shears","page.htmlVision.utilitarianFunction.saveTextToClipboard":"Save the text to the clipboard","page.htmlVision.utilitarianFunction.pleaseEnterText":"Please enter text first","page.htmlVision.utilitarianFunction.getsTextFromClipboard":"Gets text from the clipboard","page.htmlVision.utilitarianFunction.saveImageToClipboard":"Save the image to the clipboard","page.htmlVision.utilitarianFunction.getImageFromClipboard":"Get the image from the clipboard","page.htmlVision.utilitarianFunction.pasteTheImage":"Ctrl+V Paste the image","page.htmlVision.utilitarianFunction.recordAudio":"Record Audio","page.htmlVision.utilitarianFunction.startRecording":"Start Recording","page.htmlVision.utilitarianFunction.whileRecording":"While recording, click End","page.htmlVision.utilitarianFunction.rerecord":"Rerecord","page.htmlVision.utilitarianFunction.recordScreen":"Record Screen","page.htmlVision.utilitarianFunction.recordVideo":"Record Video","page.htmlVision.utilitarianFunction.takeIDPhotos":"Take ID Photos","page.htmlVision.utilitarianFunction.clickToTakeAPhoto":"Click To Take a Photo","page.htmlVision.utilitarianFunction.readyToTakeAPhoto":"Ready To take a Photo","page.htmlVision.utilitarianFunction.backPhoto":"Back Photo","page.htmlVision.utilitarianFunction.oneInch":"1 inch","page.htmlVision.utilitarianFunction.twoInch":"2 inch","page.cssDynamicEffect.richDynamicEffect.SVGCircularClock":"SVG Circular clock dynamic effect","page.cssDynamicEffect.richDynamicEffect.upAndDownCard":"Up-and-down card dynamic effect","page.cssDynamicEffect.richDynamicEffect.charging":"Charging dynamic effect","page.cssDynamicEffect.richDynamicEffect.zongziLoading":"Zongzi loading dynamic effect","page.cssDynamicEffect.richDynamicEffect.borderRotation":"Border rotation dynamic effect","page.cssDynamicEffect.richDynamicEffect.luminousText":"Luminous text dynamic effect","page.cssDynamicEffect.richDynamicEffect.searchlightText":"Searchlight text dynamic effect","page.cssDynamicEffect.richDynamicEffect.wavyText":"Wavy text dynamic effect","page.cssDynamicEffect.richDynamicEffect.textLineDisplay":"Text line display dynamic effect","page.cssDynamicEffect.richDynamicEffect.textLineLoop":"Text line loop dynamic effect","page.cssDynamicEffect.richDynamicEffect.mobiusLoopBar":"Mobius loop bar dynamic effect","page.cssDynamicEffect.richDynamicEffect.mobiusRingsCircleDots":"Mobius loop circle dots dynamic effect","page.cssDynamicEffect.richDynamicEffect.tankShaking":"Tank shaking dynamic effect","page.cssDynamicEffect.generateRegularPolygon.numberOfSides":"Number of sides","page.cssDynamicEffect.generateRegularPolygon.rotation":"Rotation","page.cssDynamicEffect.generateShadow.horizontalOffset":"Horizontal Offset","page.cssDynamicEffect.generateShadow.verticalOffset":"Vertical Offset","page.cssDynamicEffect.generateShadow.blurLength":"Blur Length","page.cssDynamicEffect.generateShadow.shadowSize":"Shadow Size","page.cssDynamicEffect.generateShadow.borderRadius":"Border Radius","page.cssDynamicEffect.generateShadow.shadowColor":"Shadow Color","page.cssDynamicEffect.generateScrollBar.scrollBarWidth":"Vertical Width","page.cssDynamicEffect.generateScrollBar.scrollBarHeight":"Horizontal Height","page.cssDynamicEffect.generateScrollBar.scrollBarBgColor":"Background Color","page.cssDynamicEffect.generateScrollBar.slidingBlockBgColor":"Sliding Block Background Color","page.cssDynamicEffect.generateScrollBar.slidingBlockRadius":"Sliding Block Radius","page.cssDynamicEffect.generateScrollBar.slidingBlockHoverBgColor":"Sliding Block Hover Background Color","page.cssDynamicEffect.generateScrollBar.rightBottomBgColor":"Right Bottom Background Color","page.canvasDynamicEffect.sphereCollisionExample":"sphere-collision example","page.canvasDynamicEffect.dynamicClock":"Dynamic clock effect","page.canvasDynamicEffect.searchlight":"Searchlight effect","page.canvasDynamicEffect.startGame":"Start Game","page.canvasDynamicEffect.continueTheGame":"Continue The Game","page.canvasDynamicEffect.restart":"Restart","page.canvasDynamicEffect.pause":"Pause","page.canvasDynamicEffect.gameHasPaused":"The game has been paused","page.canvasDynamicEffect.score":"Score","page.canvasDynamicEffect.videoIsSlowToLoad":"The video is slow to load, please wait patiently","page.canvasDynamicEffect.matchLineQuestion":"Match line question","page.canvasDynamicEffect.fruit":"Fruit","page.canvasDynamicEffect.animal":"Animal","page.canvasDynamicEffect.car":"Car","page.canvasDynamicEffect.vegetable":"Vegetable","page.canvasDynamicEffect.pleaseReset":"Currently verified, please reset","page.canvasDynamicEffect.noVerifiableAnswer":"There is no verifiable answer","page.threeJs3D.abrazine":"Abrazine","page.threeJs3D.cryolite":"Cryolite","page.threeJs3D.ordinary":"Ordinary","page.threeJs3D.transparent":"Transparent","page.threeJs3D.carDisplayAndMatching":"Car display and matching","page.threeJs3D.bodyColor":"Body Color","page.threeJs3D.anteriorFaceColor":"Anterior Face Color","page.threeJs3D.hoodColor":"Hood Color","page.threeJs3D.hubColor":"Hub Color","page.threeJs3D.filmMaterial":"Film Material","page.threeJs3D.windshieldMaterial":"Windshield Material","page.threeJs3D.diceNum":"Number of dice","page.threeJs3D.enterDiceNum":"Please enter the number of dice first","page.threeJs3D.visualizationPlatform":"Large screen visualization platform","page.AIApplication.humanPostureDetection":"Real-time human posture detection (Camera required)","page.AIApplication.send":"Send","page.AIApplication.sendBarrage":"Send barrage","page.imageProcessingTool.extensionTipFront":"If you want to use this tool offline, or if you have images larger than 1350x1350 that need to be processed, it is recommended that you use the","page.imageProcessingTool.extensionTipBehind":"browser extension, will be the extension of the project folder is loaded into the browser can be used.","page.imageProcessingTool.imageTooSmall":"Please select the size above 20x20","page.imageProcessingTool.imageTooLarge":"Please select the size below 1350x1350","page.imageProcessingTool.shmpch":"Shmpch","page.imageProcessingTool.edgeSharpening":"Edge Sharpening","page.imageProcessingTool.filterContrast":"Filter Contrast","page.imageProcessingTool.redFilter":"Red Filter","page.imageProcessingTool.greenFilter":"Green Filter","page.imageProcessingTool.blueFilter":"Blue Filter","page.imageProcessingTool.redGreenFilter":"Red-green Filter","page.imageProcessingTool.redBlueFilter":"Red-blue Filter","page.imageProcessingTool.blueGreenFilter":"Blue-green Filter","page.imageProcessingTool.redGreyFilter":"Red-grey Filter","page.imageProcessingTool.greenGreyFilter":"Green-grey Filter","page.imageProcessingTool.blueGreyFilter":"Blue-grey Filter","page.imageProcessingTool.gaussianBlur":"Gaussian Blur","page.imageProcessingTool.jpgToPng":"JPG To PNG","page.imageProcessingTool.pngToJpg":"PNG To JPG","page.imageProcessingTool.pleaseEnterBrightness":"Please enter the brightness value","page.imageProcessingTool.darken":"Darken","page.imageProcessingTool.lighten":"Lighten","page.imageProcessingTool.pleaseEnterDiaphaneity":"Please enter a transparency value","page.imageProcessingTool.pleaseUploadPng":"Please upload the image in png format","page.imageProcessingTool.whetherValueFixed":"Whether the value is fixed","page.imageProcessingTool.becomeTransparent":"Become transparent","page.imageProcessingTool.becomeOpaque":"Become opaque","page.imageProcessingTool.compressibility":"Compressibility","page.imageProcessingTool.pleaseEnterFilletRadius":"Please enter the fillet radius","page.imageProcessingTool.filletRadius":"Fillet radius","page.imageProcessingTool.clippedAndConvertedToPng":"Clipped and converted to PNG format","page.imageProcessingTool.WhetherRetainOriginalDimension":"Whether to retain the original dimension","page.htmlVision.applicationPageFrame.secondPage":"Second Page","page.htmlVision.applicationPageFrame.thirdPage":"Third Page","page.htmlVision.applicationPageFrame.lastPage":"Last Page","page.htmlVision.applicationPageFrame.title":"The ultimate solution for two cross-domain pages to jump and pass parameters","page.htmlVision.applicationPageFrame.author":"Author","page.htmlVision.applicationPageFrame.pageA":"Page A","page.htmlVision.applicationPageFrame.pageB":"Page B","page.htmlVision.applicationPageFrame.appoint":"Article convention","page.htmlVision.applicationPageFrame.appointText1":"Page A: The original page before the jump. Assume that the page is a.com","page.htmlVision.applicationPageFrame.appointText2":"Page B: The target page to jump to. Assume that the page is b.com","page.htmlVision.applicationPageFrame.subTitle1":"First, simple scheme","page.htmlVision.applicationPageFrame.des1":"When it comes to page hopping, the first thing that comes to mind is using the a tag","page.htmlVision.applicationPageFrame.codeBox1.text":"Click the link on page A and transfer the parameter data to page B","page.htmlVision.applicationPageFrame.codeBox2.text":"The parameters sent from page A are received on page B","page.htmlVision.applicationPageFrame.des2":"You can also use the window.open method to jump to the page","page.htmlVision.applicationPageFrame.des3":"Disadvantages: Parameter passing by URL is limited by the number of characters and can only pass a small amount of data.","page.htmlVision.applicationPageFrame.subTitle2":"Second, pass long data scheme","page.htmlVision.applicationPageFrame.des4":"If you want to transfer a large amount of data, you can't use the method of putting data in the URL. Here I use the window.postMessage method introduced in HTML5 for data transfer.","page.htmlVision.applicationPageFrame.des5":"If the iframe tag is used to embed page B in page A, the method is as follows:","page.htmlVision.applicationPageFrame.des6":"Abuse","page.htmlVision.applicationPageFrame.des7":"1. When sending messages using postMessage, ensure that page B has been loaded. Since pages A and B are cross-domain, popup.onload is invalid, and only setTimeout can be used to delay sending.","page.htmlVision.applicationPageFrame.des8":"2. If you use the iframe tag, you can only embed the page and not open a new window. If you use window.open, you can open a new window. However, no data is passed when the B page is first loaded. The data is sent after the window opens, so there is a delay on page B.","page.htmlVision.applicationPageFrame.subTitle3":"Third, ultimate solution: iframe+postMessage+localStorage","page.htmlVision.applicationPageFrame.des9":"On page A, use iframe tag to load page B and hide it. When click Jump, use postMessage to send message to page B, monitor the data sent from page A on page B, and then save it to localStorage. Then, when page A uses window.open to open page B, Page B directly goes to localStorage to get data, so that the page jump and parameter pass is completed","page.htmlVision.applicationPageFrame.codeBox3.text":"When the data can be obtained, it means that it is from page A","page.htmlVision.applicationPageFrame.des10":"Summarize","page.htmlVision.applicationPageFrame.des11":"1. Both iframe and postMessage can be cross-domain, while localStorage cannot share data across domains.","page.htmlVision.applicationPageFrame.des12":"2. Window in window.postMessage always refers to the window object of the target page to be jumped to."}},de=()=>{const{locale:e}=(0,s.S)(),a=(0,r.Ye)(me);return(0,E.jsx)("div",{className:"app_container",translate:"no",children:(0,E.jsx)(ge.A,{locale:e||"en-us",messages:pe[e||"en-us"],children:a})})},he=document.getElementById("root");he&&(0,i.H)(he).render((0,E.jsx)(s.D,{children:(0,E.jsx)(o.I9,{children:(0,E.jsx)(de,{})})}))},85541:(e,a,n)=>{n.d(a,{_z:()=>l,q_:()=>c,kY:()=>p,gi:()=>m});var t=n(96540),i=n(76139);const o="SuspenseLoading_container__Ii14-";var s=n(74848);const r=()=>{const[e,a]=(0,t.useState)(!1),n=(0,t.useRef)(0);return(0,t.useEffect)((()=>(n.current=window.setTimeout((()=>{a(!0)}),400),()=>{n.current&&window.clearTimeout(n.current)})),[]),(0,s.jsx)("div",{className:o,children:e&&(0,s.jsx)(i.A,{size:"large"})})},c=function(e,a){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:400;const t=document.createElement("span");t.style.visibility="hidden",t.style.padding="0",t.style.whiteSpace="nowrap",t.style.overflow="visible",t.style.fontSize=a>12?a+"px":"12px",t.style.fontWeight=n.toString(),t.innerText=e,document.body.appendChild(t);const i=t.offsetWidth;return document.body.removeChild(t),i},l=function(e,a){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:12,t=arguments.length>3&&void 0!==arguments[3]?arguments[3]:400,i=!(arguments.length>4&&void 0!==arguments[4])||arguments[4],o="",s="",r="";if(!e||a<n||"string"!=typeof e)return o;const c=e.split(""),l=document.createElement("span");l.style.visibility="hidden",l.style.padding="0",l.style.whiteSpace="nowrap",l.style.overflow="visible",l.style.fontSize=n>12?n+"px":"12px",l.style.fontWeight=t.toString(),document.body.appendChild(l);for(let e=0,n=c.length;e<n;e++){s=r,r+=c[e],o=r,l.innerText=r;if(l.offsetWidth>a){o=i?s+"...":s;break}}return document.body.removeChild(l),o},m=(e,a)=>{let n=0,t="";if(!e||a<=0)return e;for(const i of e)n>=a?(t+="".concat(i,"\n"),n=0):(t+=i,n++);return t.endsWith("\n")&&(t=t.substring(0,t.length-1)),t},g=e=>{const{importFunc:a,path:n}=e,i=t.lazy(a);return(0,s.jsx)(t.Suspense,{fallback:(0,s.jsx)(r,{}),children:(0,s.jsx)(i,{})})},p=e=>{e&&0!==e.length&&e.forEach((e=>{"function"==typeof e.element&&(e.element=(0,s.jsx)(g,{importFunc:e.element,path:e.path})),e.children&&p(e.children)}))}}},s={};function r(e){var a=s[e];if(void 0!==a)return a.exports;var n=s[e]={id:e,loaded:!1,exports:{}};return o[e].call(n.exports,n,n.exports,r),n.loaded=!0,n.exports}r.m=o,r.amdD=function(){throw new Error("define cannot be used indirect")},r.amdO={},e=[],r.O=(a,n,t,i)=>{if(!n){var o=1/0;for(m=0;m<e.length;m++){n=e[m][0],t=e[m][1],i=e[m][2];for(var s=!0,c=0;c<n.length;c++)(!1&i||o>=i)&&Object.keys(r.O).every((e=>r.O[e](n[c])))?n.splice(c--,1):(s=!1,i<o&&(o=i));if(s){e.splice(m--,1);var l=t();void 0!==l&&(a=l)}}return a}i=i||0;for(var m=e.length;m>0&&e[m-1][2]>i;m--)e[m]=e[m-1];e[m]=[n,t,i]},r.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return r.d(a,{a}),a},n=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,r.t=function(e,t){if(1&t&&(e=this(e)),8&t)return e;if("object"==typeof e&&e){if(4&t&&e.__esModule)return e;if(16&t&&"function"==typeof e.then)return e}var i=Object.create(null);r.r(i);var o={};a=a||[null,n({}),n([]),n(n)];for(var s=2&t&&e;"object"==typeof s&&!~a.indexOf(s);s=n(s))Object.getOwnPropertyNames(s).forEach((a=>o[a]=()=>e[a]));return o.default=()=>e,r.d(i,o),i},r.d=(e,a)=>{for(var n in a)r.o(a,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:a[n]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce(((a,n)=>(r.f[n](e,a),a)),[])),r.u=e=>(({5234:"chunk-tensorflow_tfjs_core",6710:"chunk-tensorflow_tfjs_webgl",7645:"chunk-tensorflow_models"}[e]||e)+".js"),r.miniCssF=e=>"styles/pages/"+e+"."+{155:"fb21c6c1",268:"bb287c99",505:"99fc3035",621:"90d2db35",845:"4a38eb75",1010:"a698b46d",1562:"7d740766",1674:"51e421d8",1956:"548af50a",2245:"9ac5b6ed",2697:"a1e3c1bb",3035:"7d740766",3666:"1f00424c",3872:"d7ce7d3b",3877:"737e0ccb",4269:"7f40eaa8",4579:"8b63ff90",5087:"3def29df",5647:"a607e94d",5873:"7d740766",6006:"463a4622",6519:"329cf6f9",6651:"6e83a86a",7385:"63e4d1df",7675:"6535e488",8009:"d7f11df1",8702:"47cca0fc",8736:"287293c3",8782:"41da340c",8868:"e7d9d787",9363:"6d10b72c",9903:"3827d95e"}[e]+".css",r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),t={},i="visualization-collection:",r.l=(e,a,n,o)=>{if(t[e])t[e].push(a);else{var s,c;if(void 0!==n)for(var l=document.getElementsByTagName("script"),m=0;m<l.length;m++){var g=l[m];if(g.getAttribute("src")==e||g.getAttribute("data-webpack")==i+n){s=g;break}}s||(c=!0,(s=document.createElement("script")).charset="utf-8",s.timeout=120,r.nc&&s.setAttribute("nonce",r.nc),s.setAttribute("data-webpack",i+n),s.src=e),t[e]=[a];var p=(a,n)=>{s.onerror=s.onload=null,clearTimeout(d);var i=t[e];if(delete t[e],s.parentNode&&s.parentNode.removeChild(s),i&&i.forEach((e=>e(n))),a)return a(n)},d=setTimeout(p.bind(null,void 0,{type:"timeout",target:s}),12e4);s.onerror=p.bind(null,s.onerror),s.onload=p.bind(null,s.onload),c&&document.head.appendChild(s)}},r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),(()=>{var e;r.g.importScripts&&(e=r.g.location+"");var a=r.g.document;if(!e&&a&&(a.currentScript&&(e=a.currentScript.src),!e)){var n=a.getElementsByTagName("script");if(n.length)for(var t=n.length-1;t>-1&&(!e||!/^http(s?):/.test(e));)e=n[t--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),r.p=e})(),(()=>{if("undefined"!=typeof document){var e=e=>new Promise(((a,n)=>{var t=r.miniCssF(e),i=r.p+t;if(((e,a)=>{for(var n=document.getElementsByTagName("link"),t=0;t<n.length;t++){var i=(s=n[t]).getAttribute("data-href")||s.getAttribute("href");if("stylesheet"===s.rel&&(i===e||i===a))return s}var o=document.getElementsByTagName("style");for(t=0;t<o.length;t++){var s;if((i=(s=o[t]).getAttribute("data-href"))===e||i===a)return s}})(t,i))return a();((e,a,n,t,i)=>{var o=document.createElement("link");o.rel="stylesheet",o.type="text/css",r.nc&&(o.nonce=r.nc),o.onerror=o.onload=n=>{if(o.onerror=o.onload=null,"load"===n.type)t();else{var s=n&&n.type,r=n&&n.target&&n.target.href||a,c=new Error("Loading CSS chunk "+e+" failed.\n("+s+": "+r+")");c.name="ChunkLoadError",c.code="CSS_CHUNK_LOAD_FAILED",c.type=s,c.request=r,o.parentNode&&o.parentNode.removeChild(o),i(c)}},o.href=a,n?n.parentNode.insertBefore(o,n.nextSibling):document.head.appendChild(o)})(e,i,null,a,n)})),a={8792:0};r.f.miniCss=(n,t)=>{a[n]?t.push(a[n]):0!==a[n]&&{155:1,268:1,505:1,621:1,845:1,1010:1,1562:1,1674:1,1956:1,2245:1,2697:1,3035:1,3666:1,3872:1,3877:1,4269:1,4579:1,5087:1,5647:1,5873:1,6006:1,6519:1,6651:1,7385:1,7675:1,8009:1,8702:1,8736:1,8782:1,8868:1,9363:1,9903:1}[n]&&t.push(a[n]=e(n).then((()=>{a[n]=0}),(e=>{throw delete a[n],e})))}}})(),(()=>{var e={8792:0};r.f.j=(a,n)=>{var t=r.o(e,a)?e[a]:void 0;if(0!==t)if(t)n.push(t[2]);else{var i=new Promise(((n,i)=>t=e[a]=[n,i]));n.push(t[2]=i);var o=r.p+r.u(a),s=new Error;r.l(o,(n=>{if(r.o(e,a)&&(0!==(t=e[a])&&(e[a]=void 0),t)){var i=n&&("load"===n.type?"missing":n.type),o=n&&n.target&&n.target.src;s.message="Loading chunk "+a+" failed.\n("+i+": "+o+")",s.name="ChunkLoadError",s.type=i,s.request=o,t[1](s)}}),"chunk-"+a,a)}},r.O.j=a=>0===e[a];var a=(a,n)=>{var t,i,o=n[0],s=n[1],c=n[2],l=0;if(o.some((a=>0!==e[a]))){for(t in s)r.o(s,t)&&(r.m[t]=s[t]);if(c)var m=c(r)}for(a&&a(n);l<o.length;l++)i=o[l],r.o(e,i)&&e[i]&&e[i][0](),e[i]=0;return r.O(m)},n=self.webpackChunkvisualization_collection=self.webpackChunkvisualization_collection||[];n.forEach(a.bind(null,0)),n.push=a.bind(null,n.push.bind(n))})();var c=r.O(void 0,[3874,4423],(()=>r(45785)));c=r.O(c)})();
\ No newline at end of file
+(()=>{"use strict";var e,a,n,t,i,o={73776:(e,a,n)=>{n.d(a,{EV:()=>s,K7:()=>c,O7:()=>i,kd:()=>t,nf:()=>r,pr:()=>o});const t=["#F2BB00","#16BA79","#2454E6","#5470c6","#ea7ccc","#91cc75","#ee6666","#73c0de","#3ba272","#9a60b4"],i=[{name:"两个跨域页面进行跳转传参的终极方案",href:"https://juejin.cn/post/7134967869326458916"},{name:"面试秘籍之手写系列",href:"https://juejin.cn/post/7134975263707758606"},{name:"一款将打包后的Chrome插件自动化加载到浏览器的webpack插件",href:"https://juejin.cn/post/7134991167095062565"},{name:"全网最全AutoIt3基础教程及实战案例",href:"https://juejin.cn/post/7134952028870017060"},{name:"两个跨域页面实现量子纠缠的终极方案",href:"https://juejin.cn/post/7312031033302614051"}],o="bIframe",s="http://localhost:3003",r="selfPageInfoList",c="bPageInfo"},46935:(e,a,n)=>{n.d(a,{D:()=>r,S:()=>c});var t=n(96540),i=n(74848);const o=t.createContext({locale:"en-us",setLocale:()=>{},headHeight:0,setHeadHeight:()=>{},menuWidth:0,setMenuWidth:()=>{},scrollTop:0,setScrollTop:()=>{},scrollContentRef:t.createRef(),setScrollContentRef:()=>{}});let s=t.createRef();const r=e=>{const a=localStorage.getItem("language")||"en-us",[n,r]=(0,t.useState)(a),[c,l]=(0,t.useState)(0),[m,g]=(0,t.useState)(0),[p,d]=(0,t.useState)(0),h=(0,t.useCallback)((function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;d(e),s.current&&s.current.scrollTop!==e&&(s.current.scrollTop=e)}),[]);return(0,i.jsx)(o.Provider,{value:{locale:n,headHeight:c,menuWidth:m,scrollTop:p,setLocale:e=>{const a=/^zh\b/.test(e.toLocaleLowerCase())?"zh-cn":"en-us";r(a),localStorage.setItem("language",a)},setHeadHeight:l,setMenuWidth:g,setScrollTop:h,scrollContentRef:s,setScrollContentRef:e=>{e&&(s=e)}},children:e.children})},c=()=>(0,t.useContext)(o)},45785:(e,a,n)=>{var t=n(96540),i=n(5338),o=n(84976),s=n(46935),r=n(47767),c=n(29970);const l={init:function(){c.Ay.initialize("G-N0W492NWD6")},sendEvent:function(e){c.Ay.event(e)},sendPageview:function(e){c.Ay.send({hitType:"pageview",page:e})}};var m=n(6442),g=n(27197),p=n(26211),d=n(13545),h=n(60227),u=n(99552);const f=e=>{const a=(0,t.useRef)({screenLeft:window.screenLeft,screenTop:window.screenTop}),n=(0,t.useRef)(0),i=()=>{if(a.current){const{screenLeft:n,screenTop:t}=a.current;if(n!==window.screenLeft||t!==window.screenTop){const n={screenLeft:window.screenLeft,screenTop:window.screenTop};a.current=n,e(n)}}n.current=window.requestAnimationFrame(i)};return(0,t.useEffect)((()=>(n.current=window.requestAnimationFrame(i),()=>{n.current&&window.cancelAnimationFrame(n.current)})),[]),a.current},y=window.location.host.includes("localhost")||window.location.host.includes("127.0.0.1"),D=(e,a,n,i,o)=>{const s=(0,t.useRef)(Math.random().toString(36).substring(2)),[r,c]=(0,t.useState)(null),l=(0,t.useRef)(""),m=(0,t.useRef)(!1),g=(0,t.useRef)(0),p=(0,t.useRef)(0),d=()=>{let e=0,a=0;if(null!=o&&o.current){const{top:n,left:t,width:i,height:s}=o.current.getBoundingClientRect();e=t+window.screenLeft+i/2,a=n+window.screenTop+s/2}else e=window.innerWidth/2+window.screenLeft,a=window.innerHeight/2+window.screenTop;return{pageId:s.current,x:e,y:a}},h=(0,t.useCallback)((()=>{const e=d(),a=window.localStorage.getItem(n);if(a){const t=JSON.parse(a);if(t&&t.length>0){const t=JSON.parse(a).filter((e=>e.pageId!==s.current));t.unshift(e),window.localStorage.setItem(n,JSON.stringify(t))}else window.localStorage.setItem(n,JSON.stringify([e]))}else window.localStorage.setItem(n,JSON.stringify([e]))}),[]),u=(0,t.useCallback)((()=>{const e=window.localStorage.getItem(n);if(e){const a=JSON.parse(e);if(a&&a.length>0){const a=JSON.parse(e).filter((e=>e.pageId===l.current));window.localStorage.setItem(n,JSON.stringify(a))}}}),[]),D=(0,t.useCallback)((()=>{if(e&&m.current){const t=document.getElementById(e);if(t){var n;const e=d();null===(n=t.contentWindow)||void 0===n||n.postMessage(JSON.stringify(e),a)}}}),[]),v=(0,t.useCallback)((()=>{if(e&&m.current){const t=document.getElementById(e);if(t){var n;g.current=0;const e={pageId:s.current,keepAlive:!0,timestamp:(new Date).getTime()};null===(n=t.contentWindow)||void 0===n||n.postMessage(JSON.stringify(e),a),p.current||(p.current=window.setTimeout((()=>{p.current=0,window.localStorage.removeItem(i),l.current="",c(null)}),1500))}}}),[]),w=e=>{if(e){const a=JSON.parse(e);if(a&&a.length>0){let e=!1;for(let n=0,t=a.length;n<t;n++){const t=a[n];if(t.pageId!==s.current){l.current=t.pageId,c(t),e=!0;break}}e||(l.current="",c(null))}else l.current="",c(null)}else l.current="",c(null)},P=e=>{if(e){const a=JSON.parse(e);a?(l.current=a.pageId,c(a)):(l.current="",c(null))}else l.current="",c(null)},b=(0,t.useCallback)((e=>{e.origin===a&&(e.data?e.data.includes("keepAlive")?window.localStorage.setItem("keepAliveInfo",e.data):window.localStorage.setItem(i,e.data):(window.localStorage.setItem("keepAliveInfo",""),window.localStorage.setItem(i,"")))}),[]),T=(0,t.useCallback)((e=>{if(e.key===n)w(e.newValue);else if("keepAliveInfo"===e.key){if(e.newValue){const a=JSON.parse(e.newValue);if(l.current)a&&a.pageId===l.current&&p.current&&(window.clearTimeout(p.current),p.current=0);else{p.current&&(window.clearTimeout(p.current),p.current=0);const e={pageId:a.pageId,x:0,y:0};l.current=a.pageId,c(e)}}}else e.key===i&&P(e.newValue)}),[]),E=(0,t.useCallback)((()=>{if(window.self===window.top)if(y){D();const e=window.localStorage.getItem(i);P(e)}else{h();const e=window.localStorage.getItem(n);w(e)}}),[]);return f(E),(0,t.useEffect)((()=>{if(window.self===window.top)if(y){if(e&&null!=o&&o.current){const n=document.createElement("iframe");n.id=e,n.style.visibility="hidden",n.onload=()=>{m.current=!0,E(),window.addEventListener("storage",T),window.addEventListener("resize",E),g.current=window.setInterval((()=>{v()}),600)},n.src=a,o.current.appendChild(n)}}else E(),window.addEventListener("storage",T),window.addEventListener("resize",E),window.addEventListener("beforeunload",u);else y&&window.addEventListener("message",b,!1);return()=>{window.self===window.top?(window.removeEventListener("storage",T),window.removeEventListener("resize",E),g.current&&window.clearInterval(g.current),p.current&&window.clearTimeout(p.current),y||u()):y&&window.removeEventListener("message",b)}}),[]),{interactPageInfo:r,resendMessage:E}};var v=n(73776);const w="InteractionEyes_container__nC6-d",P="InteractionEyes_eye__zDx2I",b="InteractionEyes_heart__G9lnP",T="InteractionEyes_eyeball__hK-+b";var E=n(74848);const S=()=>{const{locale:e}=(0,s.S)(),a=(0,t.useRef)(null),{interactPageInfo:n,resendMessage:i}=D(v.pr,v.EV,v.nf,v.K7,a);(0,t.useEffect)((()=>{i()}),[e]);const o=(0,t.useMemo)((()=>{if(a.current&&n){const{x:e,y:t}=n,{top:i,left:o,width:s,height:r}=a.current.getBoundingClientRect(),c=o+window.screenLeft+s/2,l=i+window.screenTop+r/2,m=Math.hypot(e-c,t-l);if(m>28){return{eyeballLeft:9*(e-c)/m,eyeballTop:9*(t-l)/m}}return{eyeballLeft:0,eyeballTop:0}}return null}),[n]);return(0,E.jsx)("div",{className:w,ref:a,children:o&&(0,E.jsxs)(E.Fragment,{children:[(0,E.jsx)("div",{className:P,children:0===o.eyeballLeft&&0===o.eyeballTop?(0,E.jsx)("div",{className:b}):(0,E.jsx)("div",{className:T,style:{transform:"translate(".concat(o.eyeballLeft,"px, ").concat(o.eyeballTop,"px)")}})}),(0,E.jsx)("div",{className:P,children:0===o.eyeballLeft&&0===o.eyeballTop?(0,E.jsx)("div",{className:b}):(0,E.jsx)("div",{className:T,style:{transform:"translate(".concat(o.eyeballLeft,"px, ").concat(o.eyeballTop,"px)")}})})]})})},V=n.p+"images/235f02ed.jpeg",C=e=>(0,E.jsx)("svg",{width:"1em",height:"1em",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",...e,children:(0,E.jsxs)("g",{fill:"#11142D",fillRule:"nonzero",children:[(0,E.jsx)("path",{d:"M2.324 2.323h15.12v15.12H2.324V2.323ZM1.711.999a.71.71 0 0 0-.711.71v16.347c0 .393.318.71.71.71h16.348a.71.71 0 0 0 .71-.71V1.71a.71.71 0 0 0-.71-.71H1.71Z"}),(0,E.jsx)("path",{d:"M10.097 13.383V12.36h-4.63V9.863h4.18V8.84h-4.18V6.552H9.91V5.529H4.267v7.854h5.83Zm2.277 0V9.962c.044-.462.21-.825.473-1.09.242-.241.54-.351.87-.351.88 0 1.33.484 1.33 1.452v3.41h1.166v-3.51c0-1.561-.715-2.331-2.123-2.331a1.98 1.98 0 0 0-.957.22 2.183 2.183 0 0 0-.759.638v-.704h-1.166v5.687h1.166Z"})]})}),x=e=>(0,E.jsx)("svg",{width:"1em",height:"1em",viewBox:"0 0 21 20",xmlns:"http://www.w3.org/2000/svg",...e,children:(0,E.jsxs)("g",{fill:"#11142D",fillRule:"nonzero",children:[(0,E.jsx)("path",{d:"M2.44 2.323h15.12v15.12H2.44V2.323ZM1.827.999a.71.71 0 0 0-.711.71v16.347c0 .393.318.71.71.71h16.347a.71.71 0 0 0 .711-.71V1.71a.71.71 0 0 0-.71-.71H1.826Z"}),(0,E.jsx)("path",{d:"M10.539 14.593v-3.685h2.87v.627h1.046V6.222h-3.916V4.319H9.46v1.903H5.556v5.313H6.6v-.627h2.86v3.685h1.078ZM9.46 9.885H6.6v-2.64h2.86v2.64Zm3.949 0h-2.871v-2.64h2.87v2.64Z"})]})}),F="Header_container__4tC+Z",B="Header_left__7u7-T",k="Header_title__T9B5R",A="Header_right__qQAPq",M="Header_btn__osEo4",I="Header_rewardModal__LMM8K",j="Header_closeBtn__p4OnE",L=window.location.host.includes("localhost")||window.location.host.includes("127.0.0.1"),R=()=>{const e=(0,m.A)(),{locale:a,setLocale:n,setHeadHeight:i}=(0,s.S)(),o=(0,t.useRef)(null),[r,c]=(0,t.useState)(!1);return(0,t.useEffect)((()=>{if(o.current){const{height:e}=o.current.getBoundingClientRect();i(e)}}),[]),(0,E.jsxs)("div",{className:F,ref:o,children:[(0,E.jsxs)("div",{className:B,children:[(0,E.jsx)("div",{className:k,onClick:()=>{if(L){const a=document.getElementById(v.pr);var e;if(a)null===(e=a.contentWindow)||void 0===e||e.postMessage("autoSavePassword",v.EV);window.open(v.EV,"_blank","top=200,left=100")}else window.open("https://hepengwei.cn","_blank","top=200,left=100")},children:e.formatMessage({id:"common.logoName"})}),(0,E.jsx)(S,{})]}),(0,E.jsx)(g.A,{message:(0,E.jsxs)("div",{style:{display:"flex",alignItems:"center"},children:["全新复合组件示例库已发布，赶紧",(0,E.jsx)("div",{style:{color:"#4c78fc",cursor:"pointer",marginLeft:"4px"},onClick:()=>{window.open("https://hepengwei.github.io/composite-component-library","_blank")},children:"前往体验"})]}),type:"warning",showIcon:!0,closable:!0}),(0,E.jsxs)("div",{className:A,children:[(0,E.jsx)(p.A,{placement:"bottomRight",title:e.formatMessage({id:"common.reward"}),children:(0,E.jsx)("div",{className:M,onClick:()=>{c(!0)},children:(0,E.jsx)(h.A,{})})}),(0,E.jsx)(p.A,{placement:"bottomRight",title:e.formatMessage({id:"common.LanguageSwitch"}),children:(0,E.jsx)("div",{className:M,onClick:()=>{n("zh-cn"===a?"en-us":"zh-cn")},children:"zh-cn"===a?(0,E.jsx)(x,{}):(0,E.jsx)(C,{})})})]}),(0,E.jsxs)(d.A,{wrapClassName:I,title:e.formatMessage({id:"common.reward"}),open:r,closeIcon:null,footer:null,maskClosable:!1,width:320,children:[(0,E.jsx)("div",{className:j,onClick:()=>{c(!1)},children:(0,E.jsx)(u.A,{})}),(0,E.jsx)("img",{src:V,alt:""}),(0,E.jsx)("p",{children:e.formatMessage({id:"common.reward.tip"})})]})]})};var _=n(40961),O=n(142),N=n(22630),z=n(75132),J=n(84890),H=n(32977),W=n(87942),G=n(21883),U=n(76157),q=n(31201),Z=n(79045),K=n(68777),Y=n(75816);const Q="Menus_container__dz5ma",$="Menus_topBox__EoJUd",X="Menus_top__a7CPT",ee="Menus_menuLabel__eOdiw",ae="Menus_bottom__dStLR";function ne(e,a,n,t,i){return{key:a,icon:n,children:t,label:(0,E.jsx)("p",{className:ee,children:e}),type:i}}const te=()=>{const e=(0,m.A)(),a=(0,r.Zp)(),n=(0,r.zy)(),[i,o]=(0,t.useState)(!1),{setMenuWidth:c}=(0,s.S)(),l=(0,t.useRef)(null),g=[ne(e.formatMessage({id:"menu.htmlVision"}),"html",(0,E.jsx)(O.A,{}),[ne(e.formatMessage({id:"menu.htmlVision.visualDesign"}),"visualDesign"),ne(e.formatMessage({id:"menu.htmlVision.interactiveDesign"}),"interactiveDesign"),ne(e.formatMessage({id:"menu.htmlVision.backgroundPattern"}),"backgroundEffect"),ne(e.formatMessage({id:"menu.htmlVision.complexLayout"}),"complexLayout"),ne(e.formatMessage({id:"menu.htmlVision.applicationPageFrame"}),"appPageFrame"),ne(e.formatMessage({id:"menu.htmlVision.utilitarianFunction"}),"utilitarianFunction")]),ne(e.formatMessage({id:"menu.cssDynamicEffect"}),"css",(0,E.jsx)(N.A,{}),[ne(e.formatMessage({id:"menu.cssDynamicEffect.dynamicEffectButton"}),"dynamicButtons"),ne(e.formatMessage({id:"menu.cssDynamicEffect.richDynamicEffect"}),"richDynamicEffect"),ne(e.formatMessage({id:"menu.cssDynamicEffect.generateRegularPolygon"}),"generateRegularPolygon"),ne(e.formatMessage({id:"menu.cssDynamicEffect.generateShadow"}),"generateShadow"),ne(e.formatMessage({id:"menu.cssDynamicEffect.generateScrollBar"}),"generateScrollBar")]),ne(e.formatMessage({id:"menu.canvasDynamicEffect"}),"canvas",(0,E.jsx)(z.A,{}),[ne(e.formatMessage({id:"menu.canvasDynamicEffect.sphereCollisionExample"}),"sphereCollisionExample"),ne(e.formatMessage({id:"menu.canvasDynamicEffect.dynamicClock"}),"dynamicClock"),ne(e.formatMessage({id:"menu.canvasDynamicEffect.searchlightEffect"}),"searchlight"),ne(e.formatMessage({id:"menu.canvasDynamicEffect.sphereCollisionInteraction"}),"globuleInteraction"),ne(e.formatMessage({id:"menu.canvasDynamicEffect.destroyThePlanetGame"}),"killPlanetGame"),ne(e.formatMessage({id:"menu.canvasDynamicEffect.sphereFreeFallInteraction"}),"freeFallingBody"),ne(e.formatMessage({id:"menu.canvasDynamicEffect.coolCountdownAnimation"}),"countDown"),ne(e.formatMessage({id:"menu.canvasDynamicEffect.dynamicParticleBackground"}),"particlesBg"),ne(e.formatMessage({id:"menu.canvasDynamicEffect.rippleEffect"}),"rippleFloatOnTheWater"),ne(e.formatMessage({id:"menu.canvasDynamicEffect.flowerBloomingAnimation"}),"flowerBloom"),ne(e.formatMessage({id:"menu.canvasDynamicEffect.codeBackgroundWall"}),"codeBgWall"),ne(e.formatMessage({id:"menu.canvasDynamicEffect.wordDance"}),"wordDance"),ne(e.formatMessage({id:"menu.canvasDynamicEffect.scratch"}),"scratch"),ne(e.formatMessage({id:"menu.canvasDynamicEffect.matchLine"}),"matchLine")]),ne(e.formatMessage({id:"menu.echartsInteraction"}),"echarts",(0,E.jsx)(J.A,{}),[ne(e.formatMessage({id:"menu.echartsInteraction.barCharts"}),"bar"),ne(e.formatMessage({id:"menu.echartsInteraction.pieCharts"}),"pie"),ne(e.formatMessage({id:"menu.echartsInteraction.treeCharts"}),"tree")]),ne(e.formatMessage({id:"menu.threeJs3D"}),"threejs",(0,E.jsx)(H.A,{}),[ne(e.formatMessage({id:"menu.threeJs3D.appPageFrame"}),"threejsAppPageFrame"),ne(e.formatMessage({id:"menu.threeJs3D.carShow"}),"carShow"),ne(e.formatMessage({id:"menu.threeJs3D.rubiksCube"}),"rubiksCube"),ne(e.formatMessage({id:"menu.threeJs3D.throwDice"}),"throwDice"),ne(e.formatMessage({id:"menu.threeJs3D.mapDisplay"}),"mapDisplay"),ne(e.formatMessage({id:"menu.threeJs3D.earthDisplay"}),"earthDisplay")]),ne(e.formatMessage({id:"menu.AIApplication"}),"AIApplication",(0,E.jsx)(W.A,{}),[ne(e.formatMessage({id:"menu.AIApplication.humanPostureDetection"}),"humanPostureDetection"),ne(e.formatMessage({id:"menu.AIApplication.notBlockPeopleBarrage"}),"notBlockPeopleBarrage")]),ne(e.formatMessage({id:"menu.imageProcessingTool"}),"imageProcessingTool",(0,E.jsx)(G.A,{}))],p=(0,t.useCallback)((0,Z.A)((()=>{const e=_.findDOMNode(l.current);e&&c(e.clientWidth)}),{wait:360}).run,[]),d=(0,t.useMemo)((()=>{const{pathname:e}=n,a=[];if(e){const n=e.split("/"),t=n[n.length-1];t&&a.push(t)}return a}),[n]),h=(0,t.useMemo)((()=>{const{pathname:e}=n;if(e){const a=e.split("/");if(a.length>=2&&a[1])return[a[1]]}return["html"]}),[n]);return(0,t.useEffect)((()=>{p()}),[i]),(0,t.useEffect)((()=>(window.addEventListener("resize",p),()=>{window.removeEventListener("resize",p)})),[]),(0,E.jsxs)("div",{className:Q,ref:l,children:[(0,E.jsxs)("div",{className:$,children:[(0,E.jsx)("div",{className:X,children:(0,E.jsx)(K.Ay,{type:"primary",onClick:()=>{o(!i)},style:{marginBottom:16},children:i?(0,E.jsx)(U.A,{}):(0,E.jsx)(q.A,{})})}),(0,E.jsx)(Y.A,{defaultOpenKeys:h,selectedKeys:d,mode:"inline",theme:"dark",inlineCollapsed:i,items:g,onClick:e=>{const{keyPath:n}=e,t=n.reduce(((e,a)=>e="/".concat(a).concat(e)),"");a(t)}})]}),(0,E.jsx)("div",{className:ae,children:!i&&(0,E.jsx)("span",{children:e.formatMessage({id:"common.keepUpdating"})})})]})},ie="Home_container__RMLhs",oe="Home_container_body__-OVNZ",se="Home_container_content__q7A-W",re=()=>{(function(){const e=(0,r.zy)();t.useEffect((()=>{l.init()}),[]),t.useEffect((()=>{const a=e.pathname+e.search;l.sendPageview(a)}),[e])})();const{setScrollTop:e,setScrollContentRef:a}=(0,s.S)(),n=(0,r.Ye)(le),i=(0,r.zy)(),o=(0,r.Zp)(),c=(0,t.useRef)(null);return(0,t.useEffect)((()=>{const{pathname:e}=i;e&&"/"!==e||o("/html/visualDesign")}),[i]),(0,t.useEffect)((()=>{a(c)}),[]),(0,E.jsxs)("div",{className:ie,children:[(0,E.jsx)(R,{}),(0,E.jsxs)("div",{className:oe,children:[(0,E.jsx)(te,{}),(0,E.jsx)("div",{className:se,onScroll:()=>{var a;e(null===(a=c.current)||void 0===a?void 0:a.scrollTop)},ref:c,children:n})]})]})};var ce=n(85541);const le=[{path:"/html",children:[{path:"/html/visualDesign",element:()=>Promise.all([n.e(653),n.e(6379),n.e(505),n.e(268)]).then(n.bind(n,38281))},{path:"/html/interactiveDesign",element:()=>Promise.all([n.e(8e3),n.e(1372),n.e(329),n.e(885),n.e(505),n.e(1844),n.e(825)]).then(n.bind(n,59904))},{path:"/html/backgroundEffect",element:()=>Promise.all([n.e(505),n.e(155)]).then(n.bind(n,60155))},{path:"/html/complexLayout",element:()=>Promise.all([n.e(3874),n.e(2370),n.e(4103),n.e(3853),n.e(2320),n.e(782),n.e(653),n.e(8e3),n.e(5965),n.e(329),n.e(6679),n.e(9527),n.e(3877)]).then(n.bind(n,33877))},{path:"/html/appPageFrame",element:()=>Promise.all([n.e(5862),n.e(3666)]).then(n.bind(n,63666))},{path:"/html/utilitarianFunction",element:()=>Promise.all([n.e(3874),n.e(5234),n.e(6710),n.e(7645),n.e(2370),n.e(8491),n.e(4103),n.e(2320),n.e(782),n.e(7867),n.e(153),n.e(4959),n.e(299),n.e(9958),n.e(9527),n.e(1657),n.e(845)]).then(n.bind(n,7311))}]},{path:"/css",children:[{path:"/css/dynamicButtons",element:()=>Promise.all([n.e(1550),n.e(505),n.e(1844),n.e(2245)]).then(n.bind(n,42245))},{path:"/css/richDynamicEffect",element:()=>Promise.all([n.e(653),n.e(1956)]).then(n.bind(n,71956))},{path:"/css/generateRegularPolygon",element:()=>Promise.all([n.e(3874),n.e(8491),n.e(4103),n.e(3853),n.e(5829),n.e(5826),n.e(9903)]).then(n.bind(n,79903))},{path:"/css/generateShadow",element:()=>Promise.all([n.e(3874),n.e(8491),n.e(4103),n.e(3853),n.e(5829),n.e(2320),n.e(782),n.e(5826),n.e(7867),n.e(8e3),n.e(8732),n.e(7385)]).then(n.bind(n,17385))},{path:"/css/generateScrollBar",element:()=>Promise.all([n.e(3874),n.e(8491),n.e(4103),n.e(3853),n.e(5829),n.e(2320),n.e(782),n.e(5826),n.e(7867),n.e(8e3),n.e(8732),n.e(7675)]).then(n.bind(n,57675))}]},{path:"/canvas",children:[{path:"/canvas/sphereCollisionExample",element:()=>Promise.all([n.e(5633),n.e(3035)]).then(n.bind(n,33035))},{path:"/canvas/dynamicClock",element:()=>n.e(5873).then(n.bind(n,45873))},{path:"/canvas/searchlight",element:()=>Promise.all([n.e(5633),n.e(1562)]).then(n.bind(n,71562))},{path:"/canvas/globuleInteraction",element:()=>Promise.all([n.e(5633),n.e(2452)]).then(n.bind(n,20599))},{path:"/canvas/killPlanetGame",element:()=>Promise.all([n.e(5633),n.e(8009)]).then(n.bind(n,8009))},{path:"/canvas/freeFallingBody",element:()=>Promise.all([n.e(5633),n.e(6925)]).then(n.bind(n,79655))},{path:"/canvas/countDown",element:()=>Promise.all([n.e(5633),n.e(5005)]).then(n.bind(n,75005))},{path:"/canvas/particlesBg",element:()=>Promise.all([n.e(5346),n.e(9477)]).then(n.bind(n,9477))},{path:"/canvas/rippleFloatOnTheWater",element:()=>n.e(2975).then(n.bind(n,90623))},{path:"/canvas/flowerBloom",element:()=>n.e(108).then(n.bind(n,50108))},{path:"/canvas/codeBgWall",element:()=>n.e(5252).then(n.bind(n,45252))},{path:"/canvas/wordDance",element:()=>n.e(8782).then(n.bind(n,98782))},{path:"/canvas/scratch",element:()=>n.e(4579).then(n.bind(n,74579))},{path:"/canvas/matchLine",element:()=>Promise.all([n.e(3874),n.e(2370),n.e(1674)]).then(n.bind(n,81674))}]},{path:"/echarts",children:[{path:"/echarts/bar",element:()=>Promise.all([n.e(653),n.e(5965),n.e(4642),n.e(5938),n.e(505),n.e(2445),n.e(621)]).then(n.bind(n,60621))},{path:"/echarts/pie",element:()=>Promise.all([n.e(4642),n.e(505),n.e(2445),n.e(5647)]).then(n.bind(n,5647))},{path:"/echarts/tree",element:()=>Promise.all([n.e(5163),n.e(1010)]).then(n.bind(n,81010))}]},{path:"/threejs",children:[{path:"/threejs/threejsAppPageFrame",element:()=>Promise.all([n.e(9437),n.e(5880),n.e(7785),n.e(9169),n.e(9830),n.e(4269)]).then(n.bind(n,60095))},{path:"/threejs/carShow",element:()=>Promise.all([n.e(9437),n.e(7024),n.e(7785),n.e(9169),n.e(9830),n.e(5087)]).then(n.bind(n,95087))},{path:"/threejs/rubiksCube",element:()=>Promise.all([n.e(9437),n.e(7024),n.e(5880),n.e(3912),n.e(9169),n.e(8702)]).then(n.bind(n,18702))},{path:"/threejs/throwDice",element:()=>Promise.all([n.e(3874),n.e(2370),n.e(8491),n.e(4103),n.e(9437),n.e(3853),n.e(5829),n.e(7024),n.e(3912),n.e(4236),n.e(9169),n.e(6519)]).then(n.bind(n,6519))},{path:"/threejs/mapDisplay",element:()=>Promise.all([n.e(9437),n.e(7024),n.e(5880),n.e(7785),n.e(1372),n.e(3656),n.e(9169),n.e(9830),n.e(6283),n.e(2697)]).then(n.bind(n,64484))},{path:"/threejs/earthDisplay",element:()=>Promise.all([n.e(9437),n.e(7024),n.e(5880),n.e(7785),n.e(1372),n.e(9169),n.e(9830),n.e(6283),n.e(9363)]).then(n.bind(n,90803))}]},{path:"/AIApplication",children:[{path:"/AIApplication/humanPostureDetection",element:()=>Promise.all([n.e(3874),n.e(5234),n.e(6710),n.e(7645),n.e(2370),n.e(153),n.e(660),n.e(6651)]).then(n.bind(n,6621))},{path:"/AIApplication/notBlockPeopleBarrage",element:()=>Promise.all([n.e(3874),n.e(5234),n.e(6710),n.e(7645),n.e(2370),n.e(8491),n.e(2320),n.e(7867),n.e(153),n.e(9958),n.e(9527),n.e(3872)]).then(n.bind(n,49856))}]},{path:"/imageProcessingTool",element:()=>Promise.all([n.e(3874),n.e(2370),n.e(8491),n.e(4103),n.e(3853),n.e(5829),n.e(5826),n.e(5965),n.e(4959),n.e(299),n.e(8873),n.e(9527),n.e(1657),n.e(8736)]).then(n.bind(n,28736))},{path:"/pdfProcessingTool",element:()=>Promise.all([n.e(3874),n.e(2370),n.e(4959),n.e(9527),n.e(6006)]).then(n.bind(n,26006))}];(0,ce.kY)(le);const me=[{path:"/*",element:(0,E.jsx)(re,{})}];var ge=n(80445);const pe={"zh-cn":{"common.logoName":"视觉效果集合","common.reward":"打赏","common.reward.tip":"如果觉得网站不错，内容对你有所帮助，再打赏也不迟","common.LanguageSwitch":"中英文切换","common.keepUpdating":"持续更新, 敬请期待","common.comingSoon":"敬请期待","common.comingSoon.text":"该项目持续更新，敬请期待！！！","common.workHard":"正在努力工作，请稍后","common.tryingToLoad":"努力加载中，请稍等","common.start":"开始","common.end":"结束","common.operationFailure":"操作失败","common.noData":"暂无","common.unknown":"未知","common.confirm":"确定","common.cancel":"取消","common.clear":"清空","common.play":"播放","common.pause":"暂停","common.download":"下载","common.get":"获取","common.failedToObtain":"获取失败","common.failedToObtain2":"获取失败，浏览器不支持","common.pleaseEnterText":"请输入文本","common.getText":"获取文本","common.save":"保存","common.saveSuccessfully":"保存成功","common.saveFailed":"保存失败，浏览器不支持","common.parsingDataFailure":"解析数据失败，请更换其他文件","common.uploadFile":"上传文件","common.dragTheFileHere":"或将文件拖到此处","common.supportedImageType":"支持jpg、jpeg、png格式","common.supportedPdfType":"支持pdf格式","common.supportedVideoType":"支持webm、mp4格式","common.pleaseUploadPicture":"请先上传图片","common.deviceNotFound":"请求的设备未找到","common.impowerOpenMicrophone":"授权失败，请点击设置->隐私设置和安全->网站设置->麦克风，打开允许使用","common.impowerOpenCamera":"授权失败，请点击设置->隐私设置和安全->网站设置->摄像头，打开允许使用","common.notSupportGetUserMedia":"浏览器不支持getUserMedia","common.notSupportGetDisplayMedia":"浏览器不支持getDisplayMedia","common.browserTooLow":"您的浏览器版本过低，请更新浏览器","common.backgroundColor":"背景色","common.filename":"文件名","common.format":"格式","common.dimension":"尺寸","common.size":"大小","common.width":"宽度","common.height":"高度","common.duration":"时长","common.transparency":"透明色","common.red":"红色","common.blue":"蓝色","common.white":"白色","common.watermarkSizeLimit":"请选择20x20以上尺寸的水印图片","common.watermarkSizeTooLarge":"请选择小于目标图片尺寸的水印图片","common.uploadWatermark":"上传水印","common.distanceLeft":"距离左侧","common.distanceTop":"距离顶部","common.clippingWidth":"裁剪宽度","common.clippingHeight":"裁剪高度","common.flipSideToSide":"左右翻转","common.flipTopToBottom":"上下翻转","common.rotateLeft":"左旋转","common.rotateRight":"右旋转","common.graying":"灰化","common.vampix":"黑白化","common.mosaicGrainSize":"马赛克颗粒大小","common.parsingData":"解析数据中","common.whetherMaintainOriginalProportion":"是否保持原比例","common.pleaseEnterWidthOrHeight":"请输入宽度或高度","common.reset":"重置","common.backout":"撤销","common.delete":"删除","common.inquire":"查询","common.checkout":"校验","common.moduleTitle":"模块标题","common.customizeContent":"自定义内容","menu.htmlVision":"Html视觉","menu.htmlVision.visualDesign":"视觉设计","menu.htmlVision.interactiveDesign":"交互设计","menu.htmlVision.backgroundPattern":"背景图案","menu.htmlVision.complexLayout":"复杂布局","menu.htmlVision.applicationPageFrame":"应用页面框架","menu.htmlVision.utilitarianFunction":"实用功能","menu.cssDynamicEffect":"Css动效","menu.cssDynamicEffect.dynamicEffectButton":"动效按钮","menu.cssDynamicEffect.richDynamicEffect":"丰富动效","menu.cssDynamicEffect.generateRegularPolygon":"生成正多边形","menu.cssDynamicEffect.generateShadow":"生成阴影","menu.cssDynamicEffect.generateScrollBar":"生成滚动条","menu.cssDynamicEffect.musicVisualization":"音乐可视化","menu.canvasDynamicEffect":"Canvas动效","menu.canvasDynamicEffect.sphereCollisionExample":"sphere-collision库示例","menu.canvasDynamicEffect.dynamicClock":"动态时钟","menu.canvasDynamicEffect.searchlightEffect":"探照灯效果","menu.canvasDynamicEffect.sphereCollisionInteraction":"球体碰撞交互","menu.canvasDynamicEffect.destroyThePlanetGame":"消灭行星小游戏","menu.canvasDynamicEffect.sphereFreeFallInteraction":"球体自由落体交互","menu.canvasDynamicEffect.coolCountdownAnimation":"炫酷倒计时动画","menu.canvasDynamicEffect.dynamicParticleBackground":"动态粒子背景","menu.canvasDynamicEffect.rippleEffect":"水波荡漾效果","menu.canvasDynamicEffect.flowerBloomingAnimation":"花卉绽放动画","menu.canvasDynamicEffect.codeBackgroundWall":"代码背景墙","menu.canvasDynamicEffect.wordDance":"文字跳舞","menu.canvasDynamicEffect.scratch":"刮刮乐","menu.canvasDynamicEffect.matchLine":"连接线","menu.echartsInteraction":"Echarts交互","menu.echartsInteraction.barCharts":"柱状图","menu.echartsInteraction.pieCharts":"饼图","menu.echartsInteraction.treeCharts":"树状图","menu.threeJs3D":"Three.js3D","menu.threeJs3D.appPageFrame":"炫酷3D应用页面","menu.threeJs3D.carShow":"汽车展览","menu.threeJs3D.rubiksCube":"3阶魔方","menu.threeJs3D.throwDice":"投骰子","menu.threeJs3D.mapDisplay":"地图展示","menu.threeJs3D.earthDisplay":"地球展示","menu.AIApplication":"人工智能应用","menu.AIApplication.humanPostureDetection":"人体姿态检测","menu.AIApplication.notBlockPeopleBarrage":"不挡人像的弹幕","menu.imageProcessingTool":"图片处理工具","menu.imageProcessingTool.basicOperation":"基础操作","menu.imageProcessingTool.rectangularClipping":"矩形裁剪","menu.imageProcessingTool.roundedCornerClipping":"圆角裁剪","menu.imageProcessingTool.modifyTheSize":"修改尺寸","menu.imageProcessingTool.modifyBrightness":"修改亮度","menu.imageProcessingTool.modifyTransparency":"修改透明度","menu.imageProcessingTool.addWatermark":"添加水印","menu.imageProcessingTool.coverWithMosaics":"打马赛克","menu.imageProcessingTool.imageCompression":"图片压缩","menu.pdfProcessingTool":"PDF处理工具","menu.pdfProcessingTool.overview":"查看","menu.pdfProcessingTool.edit":"编辑","page.htmlVision.visualDesign.displaysCustomRows":"该组件为超出时显示省略号的文本组件, 还可动态获取文字是否超出。","page.htmlVision.visualDesign.displaysCustomRows2":"该组件为可显示自定义行数，超出时显示省略号的文本组件，还支持在最后面出现省略号时显示自定义的文字按钮。","page.htmlVision.visualDesign.thisIsText":"这是文字。","page.htmlVision.visualDesign.quantumEntanglementTip":"该站中有隐藏款量子纠缠效果等待你发现哦。","page.htmlVision.visualDesign.brighten":"变亮","page.htmlVision.visualDesign.grayed":"变灰","page.htmlVision.visualDesign.textShadow":"文字阴影","page.htmlVision.interactiveDesign.magnifyingGlass":"放大镜交互效果","page.htmlVision.interactiveDesign.dragAndDropClipBox":"可拖拽裁剪框交互效果","page.htmlVision.interactiveDesign.dragAndDropShopping":"拖拽式购物交互效果","page.htmlVision.interactiveDesign.swipeTab":"左右滑动Tab切换交互效果","page.htmlVision.interactiveDesign.flipBoook":"翻书交互效果","page.htmlVision.interactiveDesign.switchButton":"左右滑动开关按钮","page.htmlVision.interactiveDesign.pseudo3DRubikCube":"伪3D魔方交互效果","page.htmlVision.interactiveDesign.3DRubikCube":"3D魔方交互效果","page.htmlVision.interactiveDesign.automaticIdentificationOfMouseDirection":"自动辨别鼠标方向交互效果","page.htmlVision.interactiveDesign.wipeTheEffect":"擦除切换页面效果","page.htmlVision.interactiveDesign.title":"书名","page.htmlVision.interactiveDesign.price":"价格","page.htmlVision.interactiveDesign.count":"数量","page.htmlVision.interactiveDesign.total":"总计","page.htmlVision.interactiveDesign.addingToCart":"放开添加到购物车","page.htmlVision.interactiveDesign.dragToThisToBuy":"拖拽到此区域进行购买","page.htmlVision.interactiveDesign.previousPage":"前一页","page.htmlVision.interactiveDesign.nextPage":"后一页","page.htmlVision.interactiveDesign.personalArticle":"个人文章","page.htmlVision.interactiveDesign.autoCompletePunctuation":"自动补全标点输入框","page.htmlVision.interactiveDesign.stackedImages":"堆叠图片的悬停效果","page.htmlVision.interactiveDesign.autoTagNum":"CSS自动计算标签数量","page.htmlVision.utilitarianFunction.operatingShears":"操作剪切板","page.htmlVision.utilitarianFunction.saveTextToClipboard":"保存文本到剪切板","page.htmlVision.utilitarianFunction.pleaseEnterText":"请先输入文本","page.htmlVision.utilitarianFunction.getsTextFromClipboard":"从剪切板获取文本","page.htmlVision.utilitarianFunction.saveImageToClipboard":"保存图片到剪切板","page.htmlVision.utilitarianFunction.getImageFromClipboard":"从剪切板获取图片","page.htmlVision.utilitarianFunction.pasteTheImage":"Ctrl+V粘贴图片","page.htmlVision.utilitarianFunction.recordAudio":"录制音频","page.htmlVision.utilitarianFunction.startRecording":"开始录制","page.htmlVision.utilitarianFunction.whileRecording":"录制中，点击结束","page.htmlVision.utilitarianFunction.rerecord":"重新录制","page.htmlVision.utilitarianFunction.recordScreen":"录制屏幕","page.htmlVision.utilitarianFunction.recordVideo":"录制视频","page.htmlVision.utilitarianFunction.takeIDPhotos":"拍证件照","page.htmlVision.utilitarianFunction.clickToTakeAPhoto":"点击拍照","page.htmlVision.utilitarianFunction.readyToTakeAPhoto":"准备拍照","page.htmlVision.utilitarianFunction.backPhoto":"重新拍照","page.htmlVision.utilitarianFunction.oneInch":"1寸","page.htmlVision.utilitarianFunction.twoInch":"2寸","page.cssDynamicEffect.richDynamicEffect.SVGCircularClock":"SVG圆形时钟动效","page.cssDynamicEffect.richDynamicEffect.upAndDownCard":"上下翻转卡片时钟动效","page.cssDynamicEffect.richDynamicEffect.charging":"充电动效","page.cssDynamicEffect.richDynamicEffect.zongziLoading":"粽子Loading动效","page.cssDynamicEffect.richDynamicEffect.borderRotation":"边框旋转动效","page.cssDynamicEffect.richDynamicEffect.luminousText":"发光文字动效","page.cssDynamicEffect.richDynamicEffect.searchlightText":"探照灯文字动效","page.cssDynamicEffect.richDynamicEffect.wavyText":"波浪文字动效","page.cssDynamicEffect.richDynamicEffect.textLineDisplay":"文字线条显示动效","page.cssDynamicEffect.richDynamicEffect.textLineLoop":"文字线条循环动效","page.cssDynamicEffect.richDynamicEffect.mobiusLoopBar":"莫比乌斯环循环条动效","page.cssDynamicEffect.richDynamicEffect.mobiusRingsCircleDots":"莫比乌斯环循环圆点动效","page.cssDynamicEffect.richDynamicEffect.tankShaking":"水罐摇晃动效","page.cssDynamicEffect.generateRegularPolygon.numberOfSides":"边数","page.cssDynamicEffect.generateRegularPolygon.rotation":"旋转","page.cssDynamicEffect.generateShadow.horizontalOffset":"水平偏移","page.cssDynamicEffect.generateShadow.verticalOffset":"垂直偏移","page.cssDynamicEffect.generateShadow.blurLength":"模糊程度","page.cssDynamicEffect.generateShadow.shadowSize":"阴影大小","page.cssDynamicEffect.generateShadow.borderRadius":"边框半径","page.cssDynamicEffect.generateShadow.shadowColor":"阴影颜色","page.cssDynamicEffect.generateScrollBar.scrollBarWidth":"纵向滚动条宽度","page.cssDynamicEffect.generateScrollBar.scrollBarHeight":"横向滚动条高度","page.cssDynamicEffect.generateScrollBar.scrollBarBgColor":"滚动条背景色","page.cssDynamicEffect.generateScrollBar.slidingBlockBgColor":"滑块背景色","page.cssDynamicEffect.generateScrollBar.slidingBlockRadius":"滑块圆角","page.cssDynamicEffect.generateScrollBar.slidingBlockHoverBgColor":"滑块Hover背景色","page.cssDynamicEffect.generateScrollBar.rightBottomBgColor":"右下角背景色","page.canvasDynamicEffect.sphereCollisionExample":"sphere-collision库示例","page.canvasDynamicEffect.dynamicClock":"动态时钟效果","page.canvasDynamicEffect.searchlight":"探照灯效果","page.canvasDynamicEffect.startGame":"开 始 游 戏","page.canvasDynamicEffect.continueTheGame":"继 续 游 戏","page.canvasDynamicEffect.restart":"重 新 开 始","page.canvasDynamicEffect.pause":"暂停","page.canvasDynamicEffect.gameHasPaused":"游戏已暂停","page.canvasDynamicEffect.score":"分数","page.canvasDynamicEffect.videoIsSlowToLoad":"视频加载比较慢，请耐心等待","page.canvasDynamicEffect.matchLineQuestion":"连线题","page.canvasDynamicEffect.fruit":"水果","page.canvasDynamicEffect.animal":"动物","page.canvasDynamicEffect.car":"汽车","page.canvasDynamicEffect.vegetable":"蔬菜","page.canvasDynamicEffect.pleaseReset":"当前已校验，请重置","page.canvasDynamicEffect.noVerifiableAnswer":"没有可校验的答案","page.threeJs3D.abrazine":"磨砂","page.threeJs3D.cryolite":"冰晶","page.threeJs3D.ordinary":"普通","page.threeJs3D.transparent":"透亮","page.threeJs3D.carDisplayAndMatching":"汽车展示与选配","page.threeJs3D.bodyColor":"车身颜色","page.threeJs3D.anteriorFaceColor":"前脸颜色","page.threeJs3D.hoodColor":"引擎盖颜色","page.threeJs3D.hubColor":"轮毂颜色","page.threeJs3D.filmMaterial":"贴膜材质","page.threeJs3D.windshieldMaterial":"挡风玻璃材质","page.threeJs3D.diceNum":"骰子数量","page.threeJs3D.enterDiceNum":"请先输入骰子数量","page.threeJs3D.visualizationPlatform":"大屏可视化平台","page.AIApplication.humanPostureDetection":"实时人体姿势检测(必须要有摄像头)","page.AIApplication.send":"发送","page.AIApplication.sendBarrage":"发送弹幕","page.imageProcessingTool.extensionTipFront":"如果你想在离线时也使用该工具，或者是你有大于1350x1350尺寸的图片需要处理，那么推荐你使用","page.imageProcessingTool.extensionTipBehind":"浏览器插件，将该项目中的extension文件夹加载到浏览器中即可使用。","page.imageProcessingTool.imageTooSmall":"请选择20x20以上尺寸的图片","page.imageProcessingTool.imageTooLarge":"请选择1350x1350以下尺寸的图片","page.imageProcessingTool.shmpch":"锐化","page.imageProcessingTool.edgeSharpening":"边缘锐化","page.imageProcessingTool.filterContrast":"反色滤镜","page.imageProcessingTool.redFilter":"红色滤镜","page.imageProcessingTool.greenFilter":"绿色滤镜","page.imageProcessingTool.blueFilter":"蓝色滤镜","page.imageProcessingTool.redGreenFilter":"红绿色滤镜","page.imageProcessingTool.redBlueFilter":"红蓝色滤镜","page.imageProcessingTool.blueGreenFilter":"蓝绿色滤镜","page.imageProcessingTool.redGreyFilter":"红灰色滤镜","page.imageProcessingTool.greenGreyFilter":"绿灰色滤镜","page.imageProcessingTool.blueGreyFilter":"蓝灰色滤镜","page.imageProcessingTool.gaussianBlur":"高斯模糊","page.imageProcessingTool.jpgToPng":"JPG转PNG","page.imageProcessingTool.pngToJpg":"PNG转JPG","page.imageProcessingTool.pleaseEnterBrightness":"请输入亮度值","page.imageProcessingTool.darken":"变暗","page.imageProcessingTool.lighten":"变亮","page.imageProcessingTool.pleaseEnterDiaphaneity":"请输入透明度值","page.imageProcessingTool.pleaseUploadPng":"请上传PNG格式的图片","page.imageProcessingTool.whetherValueFixed":"是否统一为固定值","page.imageProcessingTool.becomeTransparent":"变透明","page.imageProcessingTool.becomeOpaque":"变不透","page.imageProcessingTool.compressibility":"压缩率","page.imageProcessingTool.pleaseEnterFilletRadius":"请输入圆角半径","page.imageProcessingTool.filletRadius":"圆角半径","page.imageProcessingTool.clippedAndConvertedToPng":"裁剪后转成PNG格式","page.imageProcessingTool.WhetherRetainOriginalDimension":"是否保留原尺寸","page.htmlVision.applicationPageFrame.secondPage":"第二页","page.htmlVision.applicationPageFrame.thirdPage":"第三页","page.htmlVision.applicationPageFrame.lastPage":"最后一页","page.htmlVision.applicationPageFrame.title":"两个跨域页面进行跳转传参的终极方案","page.htmlVision.applicationPageFrame.author":"作者","page.htmlVision.applicationPageFrame.pageA":"A页面","page.htmlVision.applicationPageFrame.pageB":"B页面","page.htmlVision.applicationPageFrame.appoint":"本文约定","page.htmlVision.applicationPageFrame.appointText1":"A页面：跳转前的原来页面，假设为a.com","page.htmlVision.applicationPageFrame.appointText2":"B页面：将要跳转的目标页面，假设为b.com","page.htmlVision.applicationPageFrame.subTitle1":"一、简单方案","page.htmlVision.applicationPageFrame.des1":"说到页面跳转，首先想到的就是用a标签","page.htmlVision.applicationPageFrame.codeBox1.text":"在A页面点击链接，并将参数data传到B页面","page.htmlVision.applicationPageFrame.codeBox2.text":"在B页面接收A页面传过来的参数","page.htmlVision.applicationPageFrame.des2":"还可以使用window.open方法跳转页面","page.htmlVision.applicationPageFrame.des3":"弊端：通过URL的方式传参是有字符数量限制的，只能传递较少的数据。","page.htmlVision.applicationPageFrame.subTitle2":"二、传递长数据方案","page.htmlVision.applicationPageFrame.des4":"想要传递大量数据就不能使用将数据放在URL中这种方式进行传递，这里我使用了HTML5中新引入的window.postMessage方法进行数据传递。","page.htmlVision.applicationPageFrame.des5":"如果是在A页面中使用iframe标签嵌入B页面的情况下，方法如下：","page.htmlVision.applicationPageFrame.des6":"弊端","page.htmlVision.applicationPageFrame.des7":"1. 使用postMessage发送消息时要保证B页面已加载，由于A和B两个页面是跨域的，所以使用popup.onload是无效的，只能使用setTimeout延迟发送，这种做法比较low，不能保证稳定性。","page.htmlVision.applicationPageFrame.des8":"2. 使用iframe标签只能嵌入页面，不能打开新窗口，使用window.open可以打开新窗口，但是，当B页面刚被加载时是没有数据传递的，数据是在窗口打开后才被发送，所以B页面会有延迟。","page.htmlVision.applicationPageFrame.subTitle3":"三、终极方案：iframe+postMessage+localStorage","page.htmlVision.applicationPageFrame.des9":"在A页面中使用iframe标签加载B页面并隐藏，当点击跳转时，使用postMessage发送消息给B页面，在B页面中监听A页面发过来的数据，然后保存到localStorage中，然后当A页面使用window.open打开B页面时，B页面直接去localStorage中取数据，这样就完成了页面跳转并传参","page.htmlVision.applicationPageFrame.codeBox3.text":"当能获取到数据时就说明是从A页面跳转过来的","page.htmlVision.applicationPageFrame.des10":"总结","page.htmlVision.applicationPageFrame.des11":"1. iframe和postMessage都是可以跨域的，而localStorage是不能跨域共享数据的。","page.htmlVision.applicationPageFrame.des12":"2. window.postMessage中的window始终是指将要跳转的目标页面的window对象。"},"en-us":{"common.logoName":"Visualization Collection","common.reward":"Reward","common.reward.tip":"If you find the site good and the content helpful, it's not too late to reward","common.LanguageSwitch":"Chinese-English Switch","common.keepUpdating":"Keep updating, stay tuned","common.comingSoon":"Coming soon","common.comingSoon.text":"The project is continuously updated, coming soon！！！","common.workHard":"Hard at work, please hold on","common.tryingToLoad":"Trying to load, please hold on","common.start":"Start","common.end":"End","common.operationFailure":"Operation failure","common.noData":"No data","common.unknown":"Unknown","common.confirm":"Confirm","common.cancel":"Cancel","common.clear":"Clear","common.play":"Play","common.pause":"Pause","common.download":"Download","common.get":"Get","common.failedToObtain":"Failed to obtain","common.failedToObtain2":"Failed to obtain, the browser does not support","common.pleaseEnterText":"Please enter text","common.getText":"Get text","common.save":"Save","common.saveSuccessfully":"Save successfully","common.saveFailed":"Failed to save, the browser does not support","common.parsingDataFailure":"Data parsing failed. Please replace it with another file","common.uploadFile":"Upload File","common.dragTheFileHere":"Or drag the file here","common.supportedImageType":"jpg, jpeg, and png are supported","common.supportedPdfType":"pdf are supported","common.supportedVideoType":"webm and mp4 are supported","common.pleaseUploadPicture":"Please upload the picture first","common.deviceNotFound":"Requested device not found","common.impowerOpenMicrophone":"Authorization failed, please click Settings -> Privacy Settings and Security -> Website Settings -> Microphone to open Allow use","common.impowerOpenCamera":"Authorization failed, please click Settings -> Privacy Settings and Security -> Website Settings -> Camera to open Allow use","common.notSupportGetUserMedia":"Browsers do not support getUserMedia","common.notSupportGetDisplayMedia":"Browsers do not support getDisplayMedia","common.browserTooLow":"Your browser version is too low, please update your browser","common.backgroundColor":"Background Color","common.filename":"Filename","common.format":"Format","common.dimension":"Dimension","common.size":"Size","common.width":"Width","common.height":"Height","common.duration":"Duration","common.transparency":"Transparency","common.red":"Red","common.blue":"Blue","common.white":"White","common.watermarkSizeLimit":"Please select watermark images of 20x20 and above","common.watermarkSizeTooLarge":"Please select a watermark image that is smaller than the size of the target image","common.uploadWatermark":"Upload watermark","common.distanceLeft":"Distance left","common.distanceTop":"Distance Top","common.clippingWidth":"Clipping width","common.clippingHeight":"Clipping height","common.flipSideToSide":"Flip Side To Side","common.flipTopToBottom":"Flip Top To Bottom","common.rotateLeft":"Rotate Left","common.rotateRight":"Rotate Right","common.graying":"Graying","common.vampix":"Vampix","common.mosaicGrainSize":"Mosaic grain size","common.parsingData":"Parsing data","common.whetherMaintainOriginalProportion":"Whether to maintain the original proportion","common.pleaseEnterWidthOrHeight":"Please enter width or height","common.reset":"Reset","common.backout":"Backout","common.delete":"Delete","common.inquire":"Inquire","common.checkout":"Checkout","common.moduleTitle":"Module Title","common.customizeContent":"Customize content","menu.htmlVision":"Html Vision","menu.htmlVision.visualDesign":"Visual Design","menu.htmlVision.interactiveDesign":"Interactive Design","menu.htmlVision.backgroundPattern":"Background Pattern","menu.htmlVision.complexLayout":"Complex Layout","menu.htmlVision.applicationPageFrame":"Application Page Frame","menu.htmlVision.utilitarianFunction":"Utilitarian Function","menu.cssDynamicEffect":"Css Dynamic Effect","menu.cssDynamicEffect.dynamicEffectButton":"Dynamic Effect Button","menu.cssDynamicEffect.richDynamicEffect":"Rich Dynamic Effect","menu.cssDynamicEffect.generateRegularPolygon":"Generate Regular Polygon","menu.cssDynamicEffect.generateShadow":"Generate Shadow","menu.cssDynamicEffect.generateScrollBar":"Generate Scroll Bar","menu.cssDynamicEffect.musicVisualization":"Music Visualization","menu.canvasDynamicEffect":"Canvas Dynamic Effect","menu.canvasDynamicEffect.sphereCollisionExample":"sphere-collision Example","menu.canvasDynamicEffect.dynamicClock":"Dynamic Clock","menu.canvasDynamicEffect.searchlightEffect":"Searchlight Effect","menu.canvasDynamicEffect.sphereCollisionInteraction":"Sphere Collision Interaction","menu.canvasDynamicEffect.destroyThePlanetGame":"Destroy The Planet Game","menu.canvasDynamicEffect.sphereFreeFallInteraction":"Sphere Free Fall Interaction","menu.canvasDynamicEffect.coolCountdownAnimation":"Cool Countdown Animation","menu.canvasDynamicEffect.dynamicParticleBackground":"Dynamic Particle Background","menu.canvasDynamicEffect.rippleEffect":"Ripple Effect","menu.canvasDynamicEffect.flowerBloomingAnimation":"Flower Blooming Animation","menu.canvasDynamicEffect.codeBackgroundWall":"Code Background Wall","menu.canvasDynamicEffect.wordDance":"Word Dance","menu.canvasDynamicEffect.scratch":"Scratch","menu.canvasDynamicEffect.matchLine":"Match Line","menu.echartsInteraction":"Echarts Interaction","menu.echartsInteraction.barCharts":"Bar Charts","menu.echartsInteraction.pieCharts":"Pie Charts","menu.echartsInteraction.treeCharts":"Tree Charts","menu.threeJs3D":"Three.js3D","menu.threeJs3D.appPageFrame":"Cool 3D Application page","menu.threeJs3D.carShow":"Car Show","menu.threeJs3D.rubiksCube":"Level 3 Rubik's Cube","menu.threeJs3D.throwDice":"Throw Dice","menu.threeJs3D.mapDisplay":"Map Display","menu.threeJs3D.earthDisplay":"Earth Display","menu.AIApplication":"AI Application","menu.AIApplication.humanPostureDetection":"Human Posture Detection","menu.AIApplication.notBlockPeopleBarrage":"Not Block The People Of The Barrage","menu.imageProcessingTool":"Image Processing Tool","menu.imageProcessingTool.basicOperation":"Basic Operation","menu.imageProcessingTool.rectangularClipping":"Rectangular Clipping","menu.imageProcessingTool.roundedCornerClipping":"Rounded Corner Clipping","menu.imageProcessingTool.modifyTheSize":"Modify The Size","menu.imageProcessingTool.modifyBrightness":"Modify Brightness","menu.imageProcessingTool.modifyTransparency":"Modify Transparency","menu.imageProcessingTool.addWatermark":"Add Watermark","menu.imageProcessingTool.coverWithMosaics":"Cover With Mosaics","menu.imageProcessingTool.imageCompression":"Image Compression","menu.pdfProcessingTool":"PDF Processing Tool","menu.pdfProcessingTool.overview":"Overview","menu.pdfProcessingTool.edit":"Edit","page.htmlVision.visualDesign.displaysCustomRows":"This component is a text component that displays ellipses when exceeded, and can also dynamically obtain whether text is exceeded.","page.htmlVision.visualDesign.displaysCustomRows2":"This component is a text component that displays the number of user-defined lines, and displays ellipses when the number exceeds. It also supports the display of user-defined text buttons when ellipses appear at the end.","page.htmlVision.visualDesign.thisIsText":"This is the text.","page.htmlVision.visualDesign.quantumEntanglementTip":"There are hidden quantum entanglement effects in this station waiting for you to discover oh.","page.htmlVision.visualDesign.brighten":"Brighten","page.htmlVision.visualDesign.grayed":"Grayed","page.htmlVision.visualDesign.textShadow":"Text Shadow","page.htmlVision.interactiveDesign.magnifyingGlass":"Magnifying glass interaction effect","page.htmlVision.interactiveDesign.dragAndDropClipBox":"Drag-and-drop clip-box interaction effect","page.htmlVision.interactiveDesign.dragAndDropShopping":"Drag-and-drop shopping interaction effect","page.htmlVision.interactiveDesign.swipeTab":"Swipe Tab left and right to change the interaction","page.htmlVision.interactiveDesign.flipBoook":"Flip the book interactive effect","page.htmlVision.interactiveDesign.switchButton":"Slide the switch button left and right","page.htmlVision.interactiveDesign.pseudo3DRubikCube":"Pseudo 3D Rubik's Cube interaction effect","page.htmlVision.interactiveDesign.3DRubikCube":"3D Rubik's Cube interaction effect","page.htmlVision.interactiveDesign.automaticIdentificationOfMouseDirection":"Automatic identification of mouse direction interaction effect","page.htmlVision.interactiveDesign.wipeTheEffect":"Wipe the effect of switching pages","page.htmlVision.interactiveDesign.title":"Title","page.htmlVision.interactiveDesign.price":"Price","page.htmlVision.interactiveDesign.count":"Count","page.htmlVision.interactiveDesign.total":"Total","page.htmlVision.interactiveDesign.addingToCart":"Let go of adding to cart","page.htmlVision.interactiveDesign.dragToThisToBuy":"Drag to this area to buy","page.htmlVision.interactiveDesign.previousPage":"Previous Page","page.htmlVision.interactiveDesign.nextPage":"Next Page","page.htmlVision.interactiveDesign.personalArticle":"Personal Article","page.htmlVision.interactiveDesign.autoCompletePunctuation":"Automatically complete the punctuation input box","page.htmlVision.interactiveDesign.stackedImages":"Hover effect for stacked images","page.htmlVision.interactiveDesign.autoTagNum":"CSS automatically count the number of tags","page.htmlVision.utilitarianFunction.operatingShears":"Operating Shears","page.htmlVision.utilitarianFunction.saveTextToClipboard":"Save the text to the clipboard","page.htmlVision.utilitarianFunction.pleaseEnterText":"Please enter text first","page.htmlVision.utilitarianFunction.getsTextFromClipboard":"Gets text from the clipboard","page.htmlVision.utilitarianFunction.saveImageToClipboard":"Save the image to the clipboard","page.htmlVision.utilitarianFunction.getImageFromClipboard":"Get the image from the clipboard","page.htmlVision.utilitarianFunction.pasteTheImage":"Ctrl+V Paste the image","page.htmlVision.utilitarianFunction.recordAudio":"Record Audio","page.htmlVision.utilitarianFunction.startRecording":"Start Recording","page.htmlVision.utilitarianFunction.whileRecording":"While recording, click End","page.htmlVision.utilitarianFunction.rerecord":"Rerecord","page.htmlVision.utilitarianFunction.recordScreen":"Record Screen","page.htmlVision.utilitarianFunction.recordVideo":"Record Video","page.htmlVision.utilitarianFunction.takeIDPhotos":"Take ID Photos","page.htmlVision.utilitarianFunction.clickToTakeAPhoto":"Click To Take a Photo","page.htmlVision.utilitarianFunction.readyToTakeAPhoto":"Ready To take a Photo","page.htmlVision.utilitarianFunction.backPhoto":"Back Photo","page.htmlVision.utilitarianFunction.oneInch":"1 inch","page.htmlVision.utilitarianFunction.twoInch":"2 inch","page.cssDynamicEffect.richDynamicEffect.SVGCircularClock":"SVG Circular clock dynamic effect","page.cssDynamicEffect.richDynamicEffect.upAndDownCard":"Up-and-down card dynamic effect","page.cssDynamicEffect.richDynamicEffect.charging":"Charging dynamic effect","page.cssDynamicEffect.richDynamicEffect.zongziLoading":"Zongzi loading dynamic effect","page.cssDynamicEffect.richDynamicEffect.borderRotation":"Border rotation dynamic effect","page.cssDynamicEffect.richDynamicEffect.luminousText":"Luminous text dynamic effect","page.cssDynamicEffect.richDynamicEffect.searchlightText":"Searchlight text dynamic effect","page.cssDynamicEffect.richDynamicEffect.wavyText":"Wavy text dynamic effect","page.cssDynamicEffect.richDynamicEffect.textLineDisplay":"Text line display dynamic effect","page.cssDynamicEffect.richDynamicEffect.textLineLoop":"Text line loop dynamic effect","page.cssDynamicEffect.richDynamicEffect.mobiusLoopBar":"Mobius loop bar dynamic effect","page.cssDynamicEffect.richDynamicEffect.mobiusRingsCircleDots":"Mobius loop circle dots dynamic effect","page.cssDynamicEffect.richDynamicEffect.tankShaking":"Tank shaking dynamic effect","page.cssDynamicEffect.generateRegularPolygon.numberOfSides":"Number of sides","page.cssDynamicEffect.generateRegularPolygon.rotation":"Rotation","page.cssDynamicEffect.generateShadow.horizontalOffset":"Horizontal Offset","page.cssDynamicEffect.generateShadow.verticalOffset":"Vertical Offset","page.cssDynamicEffect.generateShadow.blurLength":"Blur Length","page.cssDynamicEffect.generateShadow.shadowSize":"Shadow Size","page.cssDynamicEffect.generateShadow.borderRadius":"Border Radius","page.cssDynamicEffect.generateShadow.shadowColor":"Shadow Color","page.cssDynamicEffect.generateScrollBar.scrollBarWidth":"Vertical Width","page.cssDynamicEffect.generateScrollBar.scrollBarHeight":"Horizontal Height","page.cssDynamicEffect.generateScrollBar.scrollBarBgColor":"Background Color","page.cssDynamicEffect.generateScrollBar.slidingBlockBgColor":"Sliding Block Background Color","page.cssDynamicEffect.generateScrollBar.slidingBlockRadius":"Sliding Block Radius","page.cssDynamicEffect.generateScrollBar.slidingBlockHoverBgColor":"Sliding Block Hover Background Color","page.cssDynamicEffect.generateScrollBar.rightBottomBgColor":"Right Bottom Background Color","page.canvasDynamicEffect.sphereCollisionExample":"sphere-collision example","page.canvasDynamicEffect.dynamicClock":"Dynamic clock effect","page.canvasDynamicEffect.searchlight":"Searchlight effect","page.canvasDynamicEffect.startGame":"Start Game","page.canvasDynamicEffect.continueTheGame":"Continue The Game","page.canvasDynamicEffect.restart":"Restart","page.canvasDynamicEffect.pause":"Pause","page.canvasDynamicEffect.gameHasPaused":"The game has been paused","page.canvasDynamicEffect.score":"Score","page.canvasDynamicEffect.videoIsSlowToLoad":"The video is slow to load, please wait patiently","page.canvasDynamicEffect.matchLineQuestion":"Match line question","page.canvasDynamicEffect.fruit":"Fruit","page.canvasDynamicEffect.animal":"Animal","page.canvasDynamicEffect.car":"Car","page.canvasDynamicEffect.vegetable":"Vegetable","page.canvasDynamicEffect.pleaseReset":"Currently verified, please reset","page.canvasDynamicEffect.noVerifiableAnswer":"There is no verifiable answer","page.threeJs3D.abrazine":"Abrazine","page.threeJs3D.cryolite":"Cryolite","page.threeJs3D.ordinary":"Ordinary","page.threeJs3D.transparent":"Transparent","page.threeJs3D.carDisplayAndMatching":"Car display and matching","page.threeJs3D.bodyColor":"Body Color","page.threeJs3D.anteriorFaceColor":"Anterior Face Color","page.threeJs3D.hoodColor":"Hood Color","page.threeJs3D.hubColor":"Hub Color","page.threeJs3D.filmMaterial":"Film Material","page.threeJs3D.windshieldMaterial":"Windshield Material","page.threeJs3D.diceNum":"Number of dice","page.threeJs3D.enterDiceNum":"Please enter the number of dice first","page.threeJs3D.visualizationPlatform":"Large screen visualization platform","page.AIApplication.humanPostureDetection":"Real-time human posture detection (Camera required)","page.AIApplication.send":"Send","page.AIApplication.sendBarrage":"Send barrage","page.imageProcessingTool.extensionTipFront":"If you want to use this tool offline, or if you have images larger than 1350x1350 that need to be processed, it is recommended that you use the","page.imageProcessingTool.extensionTipBehind":"browser extension, will be the extension of the project folder is loaded into the browser can be used.","page.imageProcessingTool.imageTooSmall":"Please select the size above 20x20","page.imageProcessingTool.imageTooLarge":"Please select the size below 1350x1350","page.imageProcessingTool.shmpch":"Shmpch","page.imageProcessingTool.edgeSharpening":"Edge Sharpening","page.imageProcessingTool.filterContrast":"Filter Contrast","page.imageProcessingTool.redFilter":"Red Filter","page.imageProcessingTool.greenFilter":"Green Filter","page.imageProcessingTool.blueFilter":"Blue Filter","page.imageProcessingTool.redGreenFilter":"Red-green Filter","page.imageProcessingTool.redBlueFilter":"Red-blue Filter","page.imageProcessingTool.blueGreenFilter":"Blue-green Filter","page.imageProcessingTool.redGreyFilter":"Red-grey Filter","page.imageProcessingTool.greenGreyFilter":"Green-grey Filter","page.imageProcessingTool.blueGreyFilter":"Blue-grey Filter","page.imageProcessingTool.gaussianBlur":"Gaussian Blur","page.imageProcessingTool.jpgToPng":"JPG To PNG","page.imageProcessingTool.pngToJpg":"PNG To JPG","page.imageProcessingTool.pleaseEnterBrightness":"Please enter the brightness value","page.imageProcessingTool.darken":"Darken","page.imageProcessingTool.lighten":"Lighten","page.imageProcessingTool.pleaseEnterDiaphaneity":"Please enter a transparency value","page.imageProcessingTool.pleaseUploadPng":"Please upload the image in png format","page.imageProcessingTool.whetherValueFixed":"Whether the value is fixed","page.imageProcessingTool.becomeTransparent":"Become transparent","page.imageProcessingTool.becomeOpaque":"Become opaque","page.imageProcessingTool.compressibility":"Compressibility","page.imageProcessingTool.pleaseEnterFilletRadius":"Please enter the fillet radius","page.imageProcessingTool.filletRadius":"Fillet radius","page.imageProcessingTool.clippedAndConvertedToPng":"Clipped and converted to PNG format","page.imageProcessingTool.WhetherRetainOriginalDimension":"Whether to retain the original dimension","page.htmlVision.applicationPageFrame.secondPage":"Second Page","page.htmlVision.applicationPageFrame.thirdPage":"Third Page","page.htmlVision.applicationPageFrame.lastPage":"Last Page","page.htmlVision.applicationPageFrame.title":"The ultimate solution for two cross-domain pages to jump and pass parameters","page.htmlVision.applicationPageFrame.author":"Author","page.htmlVision.applicationPageFrame.pageA":"Page A","page.htmlVision.applicationPageFrame.pageB":"Page B","page.htmlVision.applicationPageFrame.appoint":"Article convention","page.htmlVision.applicationPageFrame.appointText1":"Page A: The original page before the jump. Assume that the page is a.com","page.htmlVision.applicationPageFrame.appointText2":"Page B: The target page to jump to. Assume that the page is b.com","page.htmlVision.applicationPageFrame.subTitle1":"First, simple scheme","page.htmlVision.applicationPageFrame.des1":"When it comes to page hopping, the first thing that comes to mind is using the a tag","page.htmlVision.applicationPageFrame.codeBox1.text":"Click the link on page A and transfer the parameter data to page B","page.htmlVision.applicationPageFrame.codeBox2.text":"The parameters sent from page A are received on page B","page.htmlVision.applicationPageFrame.des2":"You can also use the window.open method to jump to the page","page.htmlVision.applicationPageFrame.des3":"Disadvantages: Parameter passing by URL is limited by the number of characters and can only pass a small amount of data.","page.htmlVision.applicationPageFrame.subTitle2":"Second, pass long data scheme","page.htmlVision.applicationPageFrame.des4":"If you want to transfer a large amount of data, you can't use the method of putting data in the URL. Here I use the window.postMessage method introduced in HTML5 for data transfer.","page.htmlVision.applicationPageFrame.des5":"If the iframe tag is used to embed page B in page A, the method is as follows:","page.htmlVision.applicationPageFrame.des6":"Abuse","page.htmlVision.applicationPageFrame.des7":"1. When sending messages using postMessage, ensure that page B has been loaded. Since pages A and B are cross-domain, popup.onload is invalid, and only setTimeout can be used to delay sending.","page.htmlVision.applicationPageFrame.des8":"2. If you use the iframe tag, you can only embed the page and not open a new window. If you use window.open, you can open a new window. However, no data is passed when the B page is first loaded. The data is sent after the window opens, so there is a delay on page B.","page.htmlVision.applicationPageFrame.subTitle3":"Third, ultimate solution: iframe+postMessage+localStorage","page.htmlVision.applicationPageFrame.des9":"On page A, use iframe tag to load page B and hide it. When click Jump, use postMessage to send message to page B, monitor the data sent from page A on page B, and then save it to localStorage. Then, when page A uses window.open to open page B, Page B directly goes to localStorage to get data, so that the page jump and parameter pass is completed","page.htmlVision.applicationPageFrame.codeBox3.text":"When the data can be obtained, it means that it is from page A","page.htmlVision.applicationPageFrame.des10":"Summarize","page.htmlVision.applicationPageFrame.des11":"1. Both iframe and postMessage can be cross-domain, while localStorage cannot share data across domains.","page.htmlVision.applicationPageFrame.des12":"2. Window in window.postMessage always refers to the window object of the target page to be jumped to."}},de=()=>{const{locale:e}=(0,s.S)(),a=(0,r.Ye)(me);return(0,E.jsx)("div",{className:"app_container",translate:"no",children:(0,E.jsx)(ge.A,{locale:e||"en-us",messages:pe[e||"en-us"],children:a})})},he=document.getElementById("root");he&&(0,i.H)(he).render((0,E.jsx)(s.D,{children:(0,E.jsx)(o.I9,{children:(0,E.jsx)(de,{})})}))},85541:(e,a,n)=>{n.d(a,{_z:()=>l,q_:()=>c,kY:()=>p,gi:()=>m});var t=n(96540),i=n(76139);const o="SuspenseLoading_container__Ii14-";var s=n(74848);const r=()=>{const[e,a]=(0,t.useState)(!1),n=(0,t.useRef)(0);return(0,t.useEffect)((()=>(n.current=window.setTimeout((()=>{a(!0)}),400),()=>{n.current&&window.clearTimeout(n.current)})),[]),(0,s.jsx)("div",{className:o,children:e&&(0,s.jsx)(i.A,{size:"large"})})},c=function(e,a){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:400;const t=document.createElement("span");t.style.visibility="hidden",t.style.padding="0",t.style.whiteSpace="nowrap",t.style.overflow="visible",t.style.fontSize=a>12?a+"px":"12px",t.style.fontWeight=n.toString(),t.innerText=e,document.body.appendChild(t);const i=t.offsetWidth;return document.body.removeChild(t),i},l=function(e,a){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:12,t=arguments.length>3&&void 0!==arguments[3]?arguments[3]:400,i=!(arguments.length>4&&void 0!==arguments[4])||arguments[4],o="",s="",r="";if(!e||a<n||"string"!=typeof e)return o;const c=e.split(""),l=document.createElement("span");l.style.visibility="hidden",l.style.padding="0",l.style.whiteSpace="nowrap",l.style.overflow="visible",l.style.fontSize=n>12?n+"px":"12px",l.style.fontWeight=t.toString(),document.body.appendChild(l);for(let e=0,n=c.length;e<n;e++){s=r,r+=c[e],o=r,l.innerText=r;if(l.offsetWidth>a){o=i?s+"...":s;break}}return document.body.removeChild(l),o},m=(e,a)=>{let n=0,t="";if(!e||a<=0)return e;for(const i of e)n>=a?(t+="".concat(i,"\n"),n=0):(t+=i,n++);return t.endsWith("\n")&&(t=t.substring(0,t.length-1)),t},g=e=>{const{importFunc:a,path:n}=e,i=t.lazy(a);return(0,s.jsx)(t.Suspense,{fallback:(0,s.jsx)(r,{}),children:(0,s.jsx)(i,{})})},p=e=>{e&&0!==e.length&&e.forEach((e=>{"function"==typeof e.element&&(e.element=(0,s.jsx)(g,{importFunc:e.element,path:e.path})),e.children&&p(e.children)}))}}},s={};function r(e){var a=s[e];if(void 0!==a)return a.exports;var n=s[e]={id:e,loaded:!1,exports:{}};return o[e].call(n.exports,n,n.exports,r),n.loaded=!0,n.exports}r.m=o,r.amdD=function(){throw new Error("define cannot be used indirect")},r.amdO={},e=[],r.O=(a,n,t,i)=>{if(!n){var o=1/0;for(m=0;m<e.length;m++){n=e[m][0],t=e[m][1],i=e[m][2];for(var s=!0,c=0;c<n.length;c++)(!1&i||o>=i)&&Object.keys(r.O).every((e=>r.O[e](n[c])))?n.splice(c--,1):(s=!1,i<o&&(o=i));if(s){e.splice(m--,1);var l=t();void 0!==l&&(a=l)}}return a}i=i||0;for(var m=e.length;m>0&&e[m-1][2]>i;m--)e[m]=e[m-1];e[m]=[n,t,i]},r.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return r.d(a,{a}),a},n=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,r.t=function(e,t){if(1&t&&(e=this(e)),8&t)return e;if("object"==typeof e&&e){if(4&t&&e.__esModule)return e;if(16&t&&"function"==typeof e.then)return e}var i=Object.create(null);r.r(i);var o={};a=a||[null,n({}),n([]),n(n)];for(var s=2&t&&e;"object"==typeof s&&!~a.indexOf(s);s=n(s))Object.getOwnPropertyNames(s).forEach((a=>o[a]=()=>e[a]));return o.default=()=>e,r.d(i,o),i},r.d=(e,a)=>{for(var n in a)r.o(a,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:a[n]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce(((a,n)=>(r.f[n](e,a),a)),[])),r.u=e=>(({5234:"chunk-tensorflow_tfjs_core",6710:"chunk-tensorflow_tfjs_webgl",7645:"chunk-tensorflow_models"}[e]||e)+".js"),r.miniCssF=e=>"styles/pages/"+e+"."+{155:"fb21c6c1",268:"bb287c99",505:"99fc3035",621:"90d2db35",825:"9f81f9c9",845:"4a38eb75",1010:"a698b46d",1562:"7d740766",1674:"51e421d8",1956:"548af50a",2245:"9ac5b6ed",2697:"a1e3c1bb",3035:"7d740766",3666:"1f00424c",3872:"d7ce7d3b",3877:"737e0ccb",4269:"7f40eaa8",4579:"8b63ff90",5087:"3def29df",5647:"a607e94d",5873:"7d740766",6006:"463a4622",6519:"329cf6f9",6651:"6e83a86a",7385:"63e4d1df",7675:"6535e488",8009:"d7f11df1",8702:"47cca0fc",8736:"287293c3",8782:"41da340c",9363:"6d10b72c",9903:"3827d95e"}[e]+".css",r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),t={},i="visualization-collection:",r.l=(e,a,n,o)=>{if(t[e])t[e].push(a);else{var s,c;if(void 0!==n)for(var l=document.getElementsByTagName("script"),m=0;m<l.length;m++){var g=l[m];if(g.getAttribute("src")==e||g.getAttribute("data-webpack")==i+n){s=g;break}}s||(c=!0,(s=document.createElement("script")).charset="utf-8",s.timeout=120,r.nc&&s.setAttribute("nonce",r.nc),s.setAttribute("data-webpack",i+n),s.src=e),t[e]=[a];var p=(a,n)=>{s.onerror=s.onload=null,clearTimeout(d);var i=t[e];if(delete t[e],s.parentNode&&s.parentNode.removeChild(s),i&&i.forEach((e=>e(n))),a)return a(n)},d=setTimeout(p.bind(null,void 0,{type:"timeout",target:s}),12e4);s.onerror=p.bind(null,s.onerror),s.onload=p.bind(null,s.onload),c&&document.head.appendChild(s)}},r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),(()=>{var e;r.g.importScripts&&(e=r.g.location+"");var a=r.g.document;if(!e&&a&&(a.currentScript&&(e=a.currentScript.src),!e)){var n=a.getElementsByTagName("script");if(n.length)for(var t=n.length-1;t>-1&&(!e||!/^http(s?):/.test(e));)e=n[t--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),r.p=e})(),(()=>{if("undefined"!=typeof document){var e=e=>new Promise(((a,n)=>{var t=r.miniCssF(e),i=r.p+t;if(((e,a)=>{for(var n=document.getElementsByTagName("link"),t=0;t<n.length;t++){var i=(s=n[t]).getAttribute("data-href")||s.getAttribute("href");if("stylesheet"===s.rel&&(i===e||i===a))return s}var o=document.getElementsByTagName("style");for(t=0;t<o.length;t++){var s;if((i=(s=o[t]).getAttribute("data-href"))===e||i===a)return s}})(t,i))return a();((e,a,n,t,i)=>{var o=document.createElement("link");o.rel="stylesheet",o.type="text/css",r.nc&&(o.nonce=r.nc),o.onerror=o.onload=n=>{if(o.onerror=o.onload=null,"load"===n.type)t();else{var s=n&&n.type,r=n&&n.target&&n.target.href||a,c=new Error("Loading CSS chunk "+e+" failed.\n("+s+": "+r+")");c.name="ChunkLoadError",c.code="CSS_CHUNK_LOAD_FAILED",c.type=s,c.request=r,o.parentNode&&o.parentNode.removeChild(o),i(c)}},o.href=a,n?n.parentNode.insertBefore(o,n.nextSibling):document.head.appendChild(o)})(e,i,null,a,n)})),a={8792:0};r.f.miniCss=(n,t)=>{a[n]?t.push(a[n]):0!==a[n]&&{155:1,268:1,505:1,621:1,825:1,845:1,1010:1,1562:1,1674:1,1956:1,2245:1,2697:1,3035:1,3666:1,3872:1,3877:1,4269:1,4579:1,5087:1,5647:1,5873:1,6006:1,6519:1,6651:1,7385:1,7675:1,8009:1,8702:1,8736:1,8782:1,9363:1,9903:1}[n]&&t.push(a[n]=e(n).then((()=>{a[n]=0}),(e=>{throw delete a[n],e})))}}})(),(()=>{var e={8792:0};r.f.j=(a,n)=>{var t=r.o(e,a)?e[a]:void 0;if(0!==t)if(t)n.push(t[2]);else{var i=new Promise(((n,i)=>t=e[a]=[n,i]));n.push(t[2]=i);var o=r.p+r.u(a),s=new Error;r.l(o,(n=>{if(r.o(e,a)&&(0!==(t=e[a])&&(e[a]=void 0),t)){var i=n&&("load"===n.type?"missing":n.type),o=n&&n.target&&n.target.src;s.message="Loading chunk "+a+" failed.\n("+i+": "+o+")",s.name="ChunkLoadError",s.type=i,s.request=o,t[1](s)}}),"chunk-"+a,a)}},r.O.j=a=>0===e[a];var a=(a,n)=>{var t,i,o=n[0],s=n[1],c=n[2],l=0;if(o.some((a=>0!==e[a]))){for(t in s)r.o(s,t)&&(r.m[t]=s[t]);if(c)var m=c(r)}for(a&&a(n);l<o.length;l++)i=o[l],r.o(e,i)&&e[i]&&e[i][0](),e[i]=0;return r.O(m)},n=self.webpackChunkvisualization_collection=self.webpackChunkvisualization_collection||[];n.forEach(a.bind(null,0)),n.push=a.bind(null,n.push.bind(n))})();var c=r.O(void 0,[3874,4423],(()=>r(45785)));c=r.O(c)})();
\ No newline at end of file
diff --git a/docs/styles/pages/825.9f81f9c9.css b/docs/styles/pages/825.9f81f9c9.css
new file mode 100644
index 0000000..284c5c2
--- /dev/null
+++ b/docs/styles/pages/825.9f81f9c9.css
@@ -0,0 +1 @@
+.ModuleTitle_container__7ZCMv{font-family:SourceHanSansCN-Bold!important;font-size:24px;left:50%;position:absolute;top:20px;transform:translateX(-50%);white-space:nowrap;z-index:11}.MagnifyingGlass_container__z7\+HK{align-items:center;display:flex;flex-direction:column;height:520px;width:100%}.MagnifyingGlass_container__z7\+HK .MagnifyingGlass_content__csBAU{display:flex;flex:1;justify-content:center;padding-top:100px;width:100%}.MagnifyingGlass_container__z7\+HK .MagnifyingGlass_content__csBAU .MagnifyingGlass_smallBox__1rC23{height:280px;position:relative;width:400px;z-index:1}.MagnifyingGlass_container__z7\+HK .MagnifyingGlass_content__csBAU .MagnifyingGlass_smallBox__1rC23 .MagnifyingGlass_mask__kbQ6H{cursor:move;display:block;height:100%;left:0;position:absolute;top:0;width:100%;z-index:10}.MagnifyingGlass_container__z7\+HK .MagnifyingGlass_content__csBAU .MagnifyingGlass_smallBox__1rC23 .MagnifyingGlass_floatBox__Msmv9{background-color:rgba(255,255,204,.314);border:1px solid #ccc;cursor:move;height:120px;position:absolute;width:160px}.MagnifyingGlass_container__z7\+HK .MagnifyingGlass_content__csBAU .MagnifyingGlass_smallBox__1rC23 img{width:100%}.MagnifyingGlass_container__z7\+HK .MagnifyingGlass_content__csBAU .MagnifyingGlass_bigBox__dtenq{height:360px;margin-left:40px;overflow:hidden;position:relative;width:480px;z-index:1}.MagnifyingGlass_container__z7\+HK .MagnifyingGlass_content__csBAU .MagnifyingGlass_bigBox__dtenq img{height:700px;left:0;position:absolute;top:0;width:1000px;z-index:5}.CropImage_container__agQZ5{align-items:center;display:flex;justify-content:center;padding:100px 0 60px;position:relative;width:100%}.CropImage_container__agQZ5 .CropImage_leftBox__rxH\+K{border:1px solid #000;height:400px;position:relative;width:400px}.CropImage_container__agQZ5 .CropImage_leftBox__rxH\+K .CropImage_img1__vvyEU{-webkit-user-drag:none!important;height:100%;left:0;opacity:.5;position:absolute;top:0;-webkit-user-select:none;user-select:none;width:100%}.CropImage_container__agQZ5 .CropImage_leftBox__rxH\+K .CropImage_img2__CuOAQ{-webkit-user-drag:none!important;clip:rect(0,150px,150px,0);height:100%;left:0;position:absolute;top:0;-webkit-user-select:none;user-select:none;width:100%}.CropImage_container__agQZ5 .CropImage_leftBox__rxH\+K .CropImage_cropBox__A4fdb{border:1px solid #fff;cursor:all-scroll;height:150px;left:0;position:absolute;top:0;width:150px}.CropImage_container__agQZ5 .CropImage_leftBox__rxH\+K .CropImage_cropBox__A4fdb .CropImage_dot__TnuYQ{background-color:#fff;height:6px;position:absolute;width:6px}.CropImage_container__agQZ5 .CropImage_leftBox__rxH\+K .CropImage_cropBox__A4fdb .CropImage_leftUp__RO\+TV{cursor:nw-resize;left:-3px;top:-3px}.CropImage_container__agQZ5 .CropImage_leftBox__rxH\+K .CropImage_cropBox__A4fdb .CropImage_up__fR18N{cursor:n-resize;left:50%;margin-left:-3px;top:-3px}.CropImage_container__agQZ5 .CropImage_leftBox__rxH\+K .CropImage_cropBox__A4fdb .CropImage_rightUp__5Btk7{cursor:ne-resize;right:-3px;top:-3px}.CropImage_container__agQZ5 .CropImage_leftBox__rxH\+K .CropImage_cropBox__A4fdb .CropImage_right__nbAwk{cursor:e-resize;margin-top:-3px;right:-3px;top:50%}.CropImage_container__agQZ5 .CropImage_leftBox__rxH\+K .CropImage_cropBox__A4fdb .CropImage_rightDown__8vsgu{bottom:-3px;cursor:se-resize;right:-3px}.CropImage_container__agQZ5 .CropImage_leftBox__rxH\+K .CropImage_cropBox__A4fdb .CropImage_down__0RD60{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.CropImage_container__agQZ5 .CropImage_leftBox__rxH\+K .CropImage_cropBox__A4fdb .CropImage_leftDown__Ssc21{bottom:-3px;cursor:sw-resize;left:-3px}.CropImage_container__agQZ5 .CropImage_leftBox__rxH\+K .CropImage_cropBox__A4fdb .CropImage_left__qEy8B{cursor:w-resize;left:-3px;margin-top:-3px;top:50%}.CropImage_container__agQZ5 .CropImage_rightBox__tH7SB{height:400px;margin-left:50px;position:relative;width:400px}.CropImage_container__agQZ5 .CropImage_rightBox__tH7SB img{-webkit-user-drag:none!important;clip:rect(0,150px,150px,0);height:100%;position:absolute;-webkit-user-select:none;user-select:none;width:100%}.DragShopping_container__IbTIV{align-items:center;display:flex;justify-content:center;padding:100px 0 60px;position:relative;width:100%}.DragShopping_container__IbTIV .DragShopping_content__VVnMY{display:flex;flex-direction:column;width:80%}.DragShopping_container__IbTIV .DragShopping_content__VVnMY .DragShopping_bookBox__SDdDi{background-color:#111;border:1px solid #666;cursor:pointer;display:flex;flex-direction:column;padding:10px;width:100%}.DragShopping_container__IbTIV .DragShopping_content__VVnMY .DragShopping_bookBox__SDdDi img{height:180px;margin:0 auto 10px;width:150px}.DragShopping_container__IbTIV .DragShopping_content__VVnMY .DragShopping_bookBox__SDdDi p{margin-top:6px}.DragShopping_container__IbTIV .DragShopping_content__VVnMY .DragShopping_shoppingBox__3DBFv{border:1px solid #666;height:500px;margin-top:40px;width:100%}.DragShopping_container__IbTIV .DragShopping_content__VVnMY .DragShopping_shoppingBox__3DBFv .DragShopping_tableHead__lYIfd{background-color:#333;display:flex;height:40px;pointer-events:none;width:100%}.DragShopping_container__IbTIV .DragShopping_content__VVnMY .DragShopping_shoppingBox__3DBFv .DragShopping_tableHead__lYIfd .DragShopping_tableCell__6tWCA{align-items:center;display:flex;flex:1;padding-left:4px}.DragShopping_container__IbTIV .DragShopping_content__VVnMY .DragShopping_shoppingBox__3DBFv .DragShopping_tableRow__6Qo3x{border-bottom:1px solid #333;display:flex;pointer-events:none}.DragShopping_container__IbTIV .DragShopping_content__VVnMY .DragShopping_shoppingBox__3DBFv .DragShopping_tableRow__6Qo3x .DragShopping_tableCell__6tWCA{align-items:center;display:flex;flex:1;padding:4px}.DragShopping_container__IbTIV .DragShopping_content__VVnMY .DragShopping_shoppingBox__3DBFv .DragShopping_total__\+sd3-{display:flex;justify-content:flex-end;padding:4px 8px;pointer-events:none}.DragShopping_container__IbTIV .DragShopping_content__VVnMY .DragShopping_shoppingBox__3DBFv .DragShopping_tip__vp\+8T{color:#999;display:flex;font-size:20px;justify-content:center;margin-top:40px;pointer-events:none;width:100%}.MouseHover1_container__D7VNa{align-items:center;color:#fff;display:flex;height:800px;justify-content:center;position:relative;width:100%}.MouseHover1_container__D7VNa .MouseHover1_content__qBPDJ{align-items:center;display:flex;flex-direction:column}.MouseHover1_container__D7VNa .MouseHover1_content__qBPDJ .MouseHover1_title__cOVT0{cursor:default;font-size:40px;font-weight:500}.MouseHover1_container__D7VNa .MouseHover1_content__qBPDJ .MouseHover1_bottom__Ua8lo{display:flex;margin-top:120px}.MouseHover1_container__D7VNa .MouseHover1_content__qBPDJ .MouseHover1_bottom__Ua8lo img{width:500px}.MouseHover1_container__D7VNa .MouseHover1_content__qBPDJ .MouseHover1_bottom__Ua8lo .MouseHover1_right__D0ca6{align-items:flex-start;display:flex;flex-direction:column;margin-left:80px}.MouseHover1_container__D7VNa .MouseHover1_content__qBPDJ .MouseHover1_bottom__Ua8lo .MouseHover1_right__D0ca6 a{color:#fff;font-size:22px}.MouseHover1_container__D7VNa .MouseHover1_content__qBPDJ .MouseHover1_bottom__Ua8lo .MouseHover1_right__D0ca6 a:not(:first-child){margin-top:44px}.MouseHover1_container__D7VNa .MouseHover1_content__qBPDJ .MouseHover1_bottom__Ua8lo .MouseHover1_right__D0ca6 a:hover{color:#4c78fc}.MouseHover1_container__D7VNa .MouseHover1_cursor__orRgp{background-color:#fff;border-radius:50%;mix-blend-mode:difference;pointer-events:none;position:absolute;transform-origin:initial;transition:width .4s,height .4s}.MouseHover2_container__HD\+sM{align-items:center;background-color:#04182c;color:#fff;display:flex;height:560px;justify-content:center;padding:0 30px;position:relative;width:100%}.MouseHover2_container__HD\+sM .MouseHover2_content__UKyly{display:flex;flex-wrap:wrap;width:100%}.MouseHover2_container__HD\+sM .MouseHover2_content__UKyly .MouseHover2_item__lglpx{--bgOpacity:1,box-sizing:border-box;border:1px solid #aaa;border-radius:12px;height:180px;margin:16px 20px;position:relative;width:calc(33.33333% - 40px)}.MouseHover2_container__HD\+sM .MouseHover2_content__UKyly .MouseHover2_item__lglpx a{color:#fff;margin-top:20px}.MouseHover2_container__HD\+sM .MouseHover2_content__UKyly .MouseHover2_item__lglpx a:hover{color:#4c78fc}.MouseHover2_container__HD\+sM .MouseHover2_content__UKyly .MouseHover2_item__lglpx:before{background:radial-gradient(140px circle at var(--x) var(--y),#f4cf47 0,#0000 100%);border-radius:12px;bottom:-3px;box-sizing:border-box;content:"";height:calc(100% + 6px);left:-3px;position:absolute;right:-3px;top:-3px;width:calc(100% + 6px);will-change:background}.MouseHover2_container__HD\+sM .MouseHover2_content__UKyly .MouseHover2_item__lglpx .MouseHover2_box__dKAMr{background-color:#04182c;border-radius:12px;bottom:0;display:flex;flex-direction:column;height:100%;justify-content:center;left:0;overflow:hidden;padding:0 16px;position:absolute;right:0;top:0;width:100%}.MouseHover2_container__HD\+sM .MouseHover2_content__UKyly .MouseHover2_item__lglpx:hover .MouseHover2_box__dKAMr{background-color:#04182c00}.card_container__5Q3kU{align-items:center;border-radius:24px;cursor:pointer;display:flex;height:396px;justify-content:center;overflow:hidden;position:relative;width:280px}.card_container__5Q3kU:before{background:conic-gradient(#03a9f4,#e91e63,#9c27b0,#ff5722,#03a9f4);border-radius:24px;bottom:0;content:"";left:0;-webkit-mask:radial-gradient(circle at var(--x) var(--y),#000,#000,#0000,#0000,#0000);mask:radial-gradient(circle at var(--x) var(--y),#000,#000,#0000,#0000,#0000);opacity:0;position:absolute;right:0;top:0;transition:opacity .6s}.card_container__5Q3kU:hover:before{opacity:1}.card_container__5Q3kU .card_content__rVMcc{border-radius:24px;bottom:3px;left:3px;overflow:hidden;position:absolute;right:3px;top:3px}.card_container__5Q3kU .card_content__rVMcc:after,.card_container__5Q3kU .card_content__rVMcc:before{background:var(--url);background-position:50%;background-size:cover;border-radius:24px;content:"";position:absolute}.card_container__5Q3kU .card_content__rVMcc:before{bottom:0;filter:blur(20px);left:0;right:0;top:0}.card_container__5Q3kU .card_content__rVMcc:after{bottom:40px;left:40px;right:40px;top:40px}.MouseHover3_container__AfDAp{align-items:center;display:flex;height:560px;justify-content:center;width:100%}.MouseHover3_container__AfDAp .MouseHover3_content__sQ9Jr{align-items:center;display:flex;justify-content:space-between;max-width:1200px;min-width:900px;width:66%}.card_container__Ego-o{align-items:center;border-radius:24px;cursor:pointer;display:flex;height:396px;justify-content:center;overflow:hidden;position:relative;width:280px}.card_container__Ego-o:before{background:conic-gradient(#03a9f4,#e91e63,#9c27b0,#ff5722,#03a9f4);border-radius:24px;bottom:0;content:"";left:0;-webkit-mask:radial-gradient(circle at var(--x) var(--y),#000,#000,#0000,#0000,#0000);mask:radial-gradient(circle at var(--x) var(--y),#000,#000,#0000,#0000,#0000);opacity:0;position:absolute;right:0;top:0}.card_container__Ego-o:hover{transform:scale(1.1)}.card_container__Ego-o:hover:before{opacity:1}.card_container__Ego-o .card_content__ZjzyA{border-radius:24px;bottom:3px;left:3px;overflow:hidden;position:absolute;right:3px;top:3px}.card_container__Ego-o .card_content__ZjzyA:after,.card_container__Ego-o .card_content__ZjzyA:before{background:var(--url);background-position:50%;background-size:cover;border-radius:24px;content:"";position:absolute}.card_container__Ego-o .card_content__ZjzyA:before{bottom:0;filter:blur(20px);left:0;right:0;top:0}.card_container__Ego-o .card_content__ZjzyA:after{bottom:40px;left:40px;right:40px;top:40px}.MouseHover4_container__ix6z4{align-items:center;display:flex;height:560px;justify-content:center;width:100%}.MouseHover4_container__ix6z4 .MouseHover4_content__zXQBZ{align-items:center;display:flex;justify-content:space-between;max-width:1200px;min-width:900px;width:66%}.SlideButtonTab_container__eT4SM{align-items:center;display:flex;height:300px;justify-content:center;perspective:500px;position:relative;width:100%}.SlideButtonTab_container__eT4SM .SlideButtonTab_content__6sIYs{background-color:#e2e6eb;border-radius:12px;box-shadow:-10px -10px 15px #343f49,10px 10px 15px #212d38;display:flex;height:80px;justify-content:space-between;overflow:hidden;padding:20px 16px;position:relative;transform:rotateY(var(--wraper-rotate));transform-origin:center;transition:transform .4s cubic-bezier(0,0,.48,1);width:600px}@property --groove-left{.SlideButtonTab_container__eT4SM .SlideButtonTab_content__6sIYs{syntax:"<length>";initial-value:16px;inherits:false}}@property --wraper-rotate{.SlideButtonTab_container__eT4SM .SlideButtonTab_content__6sIYs{syntax:"<angle>";initial-value:0deg;inherits:false}}@property --btnWidth{.SlideButtonTab_container__eT4SM .SlideButtonTab_content__6sIYs{syntax:"<length>";initial-value:0;inherits:false}}.SlideButtonTab_container__eT4SM .SlideButtonTab_content__6sIYs:before{border-radius:12px;box-shadow:inset 8px 8px 6px #d9dce6,inset -5px -5px 15px #f5f9fd,inset -5px -5px 15px #f5f9fd,inset 7px 7px 6px #d9dce6;content:"";height:calc(100% - 40px);left:16px;left:var(--groove-left,16px);position:absolute;top:20px;transition:left .8s cubic-bezier(.82,.12,.18,.88);width:var(--btnWidth)}.SlideButtonTab_container__eT4SM .SlideButtonTab_content__6sIYs .SlideButtonTab_btn__tD8IC{align-items:center;animation:SlideButtonTab_txtOutScale__5pmWX .6s linear;color:#444;cursor:pointer;display:flex;font-size:15px;font-weight:600;justify-content:center;transition:color 1.2s linear .4s;-webkit-user-select:none;user-select:none;width:var(--btnWidth)}.SlideButtonTab_container__eT4SM .SlideButtonTab_content__6sIYs .SlideButtonTab_btn__tD8IC:not(:first-child){margin-left:8px}.SlideButtonTab_container__eT4SM .SlideButtonTab_content__6sIYs .SlideButtonTab_btn__tD8IC:not(:last-child){margin-right:8px}.SlideButtonTab_container__eT4SM .SlideButtonTab_content__6sIYs .SlideButtonTab_actived__RWXqG{animation:SlideButtonTab_txtEnterScale__YsI0b 1s linear;color:#111!important;transform:scale(1.1)}@keyframes SlideButtonTab_txtEnterScale__YsI0b{0%,30%{transform:scale(1)}80%{transform:scale(1.15)}to{transform:scale(1.1)}}@keyframes SlideButtonTab_txtOutScale__5pmWX{0%,30%{transform:scale(1.1)}80%{transform:scale(.95)}to{transform:scale(1)}}.FlipBook_container__bOMio{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:100px 0 60px;position:relative;width:100%}.FlipBook_container__bOMio .FlipBook_pages__Ls1i4{display:flex;height:500px;position:relative;width:706px}.FlipBook_container__bOMio .FlipBook_pages__Ls1i4 .FlipBook_paper__qnIh0{display:flex;height:500px;left:353px;position:absolute;top:0;transform-origin:left center;transform-style:preserve-3d;width:353px}.FlipBook_container__bOMio .FlipBook_pages__Ls1i4 .FlipBook_paper__qnIh0[data-left],.FlipBook_container__bOMio .FlipBook_pages__Ls1i4 .FlipBook_paper__qnIh0[data-right]{z-index:4}.FlipBook_container__bOMio .FlipBook_pages__Ls1i4 .FlipBook_paper__qnIh0[data-right]+.FlipBook_paper__qnIh0{z-index:3}.FlipBook_container__bOMio .FlipBook_pages__Ls1i4 .FlipBook_paper__qnIh0 .FlipBook_page__5K\+Jz{height:100%;overflow:hidden;position:absolute;top:0;transform-origin:center;width:100%}.FlipBook_container__bOMio .FlipBook_pages__Ls1i4 .FlipBook_paper__qnIh0 .FlipBook_page__5K\+Jz img{height:100%;object-fit:cover;width:100%}.FlipBook_container__bOMio .FlipBook_pages__Ls1i4 .FlipBook_paper__qnIh0 .FlipBook_left-show-front-page__I3ToF,.FlipBook_container__bOMio .FlipBook_pages__Ls1i4 .FlipBook_paper__qnIh0 .FlipBook_right-show-back-page__crJO-{transform:scaleX(-1) translateZ(3px);z-index:3}.FlipBook_container__bOMio .FlipBook_pages__Ls1i4 .FlipBook_paper__qnIh0 .FlipBook_left-show-back-page__yRt8k,.FlipBook_container__bOMio .FlipBook_pages__Ls1i4 .FlipBook_paper__qnIh0 .FlipBook_right-show-front-page__pTHC0{transform:translateZ(4px);z-index:4}.FlipBook_container__bOMio .FlipBook_pages__Ls1i4 .FlipBook_paper__qnIh0 .FlipBook_left-hide-front-page__kQs3M{transform:scaleX(-1);z-index:2}.FlipBook_container__bOMio .FlipBook_pages__Ls1i4 .FlipBook_paper__qnIh0 .FlipBook_left-hide-back-page__lMGif{z-index:1}.FlipBook_container__bOMio .FlipBook_pages__Ls1i4 .FlipBook_paper__qnIh0 .FlipBook_right-hide-front-page__8XaW9{z-index:2}.FlipBook_container__bOMio .FlipBook_pages__Ls1i4 .FlipBook_paper__qnIh0 .FlipBook_right-hide-back-page__56D1v{transform:scaleX(-1);z-index:1}.FlipBook_container__bOMio .FlipBook_btns__9Cs\+L{display:flex;margin-top:50px}.FlipBook_container__bOMio .FlipBook_btns__9Cs\+L .FlipBook_btn__QmvzH:not(:first-child){margin-left:50px}.switch_container__i9Gh6{align-items:center;cursor:pointer;display:flex;position:relative}.switch_container__i9Gh6 .switch_box__M6wl2{background-color:#355dff;overflow:hidden;position:absolute;transition:all .4s}.switch_container__i9Gh6 .switch_icon__AQIrn{position:absolute;transition:all .4s}.Switchs_container__pX5RV{align-items:center;display:flex;justify-content:center;padding:110px 0 60px;position:relative;width:100%}.animation_container__bfyEi{-webkit-user-drag:none;height:920px;pointer-events:all;position:relative;-webkit-user-select:none;user-select:none;width:490px}.animation_container__bfyEi .animation_content__H8vdL{left:0;position:absolute;top:0}.animation_container__bfyEi .animation_content__H8vdL .animation_people__3G2ps{-webkit-user-drag:none;margin-top:40px;-webkit-user-select:none;user-select:none;width:420px}.animation_container__bfyEi .animation_content__H8vdL .animation_giftBox__06Ghv{cursor:pointer;height:32%;left:212px;position:absolute;top:480px;width:36%}.animation_container__bfyEi .animation_content__H8vdL .animation_giftBox__06Ghv .animation_coin__9Ei6m{-webkit-user-drag:none;height:30%;left:0;opacity:0;position:absolute;top:0;-webkit-user-select:none;user-select:none;width:30%}.animation_container__bfyEi .animation_content__H8vdL .animation_giftBox__06Ghv .animation_gift__fEEYc{-webkit-user-drag:none;height:100%;-webkit-user-select:none;user-select:none;width:100%}@media screen and (min-width:1800px)and (max-width:2300px){.animation_container__bfyEi{height:800px;width:420px}.animation_container__bfyEi .animation_content__H8vdL .animation_people__3G2ps{width:360px}.animation_container__bfyEi .animation_content__H8vdL .animation_giftBox__06Ghv{height:30%;left:185px;top:418px;width:34%}.animation_container__bfyEi .animation_content__H8vdL .animation_giftBox__06Ghv .animation_coin__9Ei6m{height:27%;width:27%}}@media screen and (min-width:1200px)and (max-width:1800px){.animation_container__bfyEi{height:650px;width:380px}.animation_container__bfyEi .animation_content__H8vdL .animation_people__3G2ps{width:300px}.animation_container__bfyEi .animation_content__H8vdL .animation_giftBox__06Ghv{height:27%;left:156px;top:358px;width:32%}.animation_container__bfyEi .animation_content__H8vdL .animation_giftBox__06Ghv .animation_coin__9Ei6m{height:26%;width:26%}}@media screen and (max-width:1200px){.animation_container__bfyEi{height:620px;width:340px}.animation_container__bfyEi .animation_content__H8vdL .animation_people__3G2ps{width:270px}.animation_container__bfyEi .animation_content__H8vdL .animation_giftBox__06Ghv{height:28%;left:140px;top:322px;width:32%}.animation_container__bfyEi .animation_content__H8vdL .animation_giftBox__06Ghv .animation_coin__9Ei6m{height:28%;width:28%}}.PeopleAnimation_container__P9IRI{align-items:center;display:flex;height:900px;justify-content:center;width:100%}.TweakCube_container__chHsQ{height:580px;padding:90px 0 60px;position:relative;width:100%}.TweakCube_container__chHsQ .TweakCube_content__rXgCM{align-items:center;display:flex;justify-content:center;position:relative;top:35%;transform:skewY(-20deg)}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo{animation:TweakCube_changeColor__SsQtL 8s linear infinite;position:relative;z-index:2}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL{display:flex;flex-direction:column;gap:30px;left:0;position:absolute;top:0;translate:-70px 0;z-index:3}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span0__kaIxY{background-color:#dcdcdc;display:inline-block;height:50px;position:relative;transition:1.5s;width:50px;z-index:0;z-index:3}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span0__kaIxY:before{background-color:#fff;content:"";height:100%;left:-40px;position:absolute;transform:skewY(45deg);transform-origin:right;transition:1.5s;width:40px}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span0__kaIxY:after{background-color:#f2f2f2;content:"";height:40px;position:absolute;top:-40px;transform:skewX(45deg);transform-origin:bottom;transition:1.5s;width:100%}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span0__kaIxY:hover{background-color:#ef4149;filter:drop-shadow(0 0 30px #ef4149);transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span0__kaIxY:hover:before{background-color:#f75d64;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span0__kaIxY:hover:after{background-color:#f14e55;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span1__RA\+mL{background-color:#dcdcdc;display:inline-block;height:50px;position:relative;transition:1.5s;width:50px;z-index:1;z-index:2}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span1__RA\+mL:before{background-color:#fff;content:"";height:100%;left:-40px;position:absolute;transform:skewY(45deg);transform-origin:right;transition:1.5s;width:40px}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span1__RA\+mL:after{background-color:#f2f2f2;content:"";height:40px;position:absolute;top:-40px;transform:skewX(45deg);transform-origin:bottom;transition:1.5s;width:100%}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span1__RA\+mL:hover{background-color:#ef4149;filter:drop-shadow(0 0 30px #ef4149);transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span1__RA\+mL:hover:before{background-color:#f75d64;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span1__RA\+mL:hover:after{background-color:#f14e55;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span2__BzTLy{background-color:#dcdcdc;display:inline-block;height:50px;position:relative;transition:1.5s;width:50px;z-index:2;z-index:1}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span2__BzTLy:before{background-color:#fff;content:"";height:100%;left:-40px;position:absolute;transform:skewY(45deg);transform-origin:right;transition:1.5s;width:40px}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span2__BzTLy:after{background-color:#f2f2f2;content:"";height:40px;position:absolute;top:-40px;transform:skewX(45deg);transform-origin:bottom;transition:1.5s;width:100%}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span2__BzTLy:hover{background-color:#ef4149;filter:drop-shadow(0 0 30px #ef4149);transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span2__BzTLy:hover:before{background-color:#f75d64;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span2__BzTLy:hover:after{background-color:#f14e55;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi{display:flex;flex-direction:column;gap:30px;left:0;position:absolute;top:0;translate:0 0;z-index:2}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span0__kaIxY{background-color:#dcdcdc;display:inline-block;height:50px;position:relative;transition:1.5s;width:50px;z-index:0;z-index:3}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span0__kaIxY:before{background-color:#fff;content:"";height:100%;left:-40px;position:absolute;transform:skewY(45deg);transform-origin:right;transition:1.5s;width:40px}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span0__kaIxY:after{background-color:#f2f2f2;content:"";height:40px;position:absolute;top:-40px;transform:skewX(45deg);transform-origin:bottom;transition:1.5s;width:100%}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span0__kaIxY:hover{background-color:#ef4149;filter:drop-shadow(0 0 30px #ef4149);transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span0__kaIxY:hover:before{background-color:#f75d64;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span0__kaIxY:hover:after{background-color:#f14e55;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span1__RA\+mL{background-color:#dcdcdc;display:inline-block;height:50px;position:relative;transition:1.5s;width:50px;z-index:1;z-index:2}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span1__RA\+mL:before{background-color:#fff;content:"";height:100%;left:-40px;position:absolute;transform:skewY(45deg);transform-origin:right;transition:1.5s;width:40px}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span1__RA\+mL:after{background-color:#f2f2f2;content:"";height:40px;position:absolute;top:-40px;transform:skewX(45deg);transform-origin:bottom;transition:1.5s;width:100%}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span1__RA\+mL:hover{background-color:#ef4149;filter:drop-shadow(0 0 30px #ef4149);transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span1__RA\+mL:hover:before{background-color:#f75d64;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span1__RA\+mL:hover:after{background-color:#f14e55;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span2__BzTLy{background-color:#dcdcdc;display:inline-block;height:50px;position:relative;transition:1.5s;width:50px;z-index:2;z-index:1}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span2__BzTLy:before{background-color:#fff;content:"";height:100%;left:-40px;position:absolute;transform:skewY(45deg);transform-origin:right;transition:1.5s;width:40px}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span2__BzTLy:after{background-color:#f2f2f2;content:"";height:40px;position:absolute;top:-40px;transform:skewX(45deg);transform-origin:bottom;transition:1.5s;width:100%}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span2__BzTLy:hover{background-color:#ef4149;filter:drop-shadow(0 0 30px #ef4149);transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span2__BzTLy:hover:before{background-color:#f75d64;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span2__BzTLy:hover:after{background-color:#f14e55;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC{display:flex;flex-direction:column;gap:30px;left:0;position:absolute;top:0;translate:70px 0;z-index:1}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span0__kaIxY{background-color:#dcdcdc;display:inline-block;height:50px;position:relative;transition:1.5s;width:50px;z-index:0;z-index:3}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span0__kaIxY:before{background-color:#fff;content:"";height:100%;left:-40px;position:absolute;transform:skewY(45deg);transform-origin:right;transition:1.5s;width:40px}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span0__kaIxY:after{background-color:#f2f2f2;content:"";height:40px;position:absolute;top:-40px;transform:skewX(45deg);transform-origin:bottom;transition:1.5s;width:100%}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span0__kaIxY:hover{background-color:#ef4149;filter:drop-shadow(0 0 30px #ef4149);transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span0__kaIxY:hover:before{background-color:#f75d64;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span0__kaIxY:hover:after{background-color:#f14e55;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span1__RA\+mL{background-color:#dcdcdc;display:inline-block;height:50px;position:relative;transition:1.5s;width:50px;z-index:1;z-index:2}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span1__RA\+mL:before{background-color:#fff;content:"";height:100%;left:-40px;position:absolute;transform:skewY(45deg);transform-origin:right;transition:1.5s;width:40px}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span1__RA\+mL:after{background-color:#f2f2f2;content:"";height:40px;position:absolute;top:-40px;transform:skewX(45deg);transform-origin:bottom;transition:1.5s;width:100%}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span1__RA\+mL:hover{background-color:#ef4149;filter:drop-shadow(0 0 30px #ef4149);transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span1__RA\+mL:hover:before{background-color:#f75d64;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span1__RA\+mL:hover:after{background-color:#f14e55;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span2__BzTLy{background-color:#dcdcdc;display:inline-block;height:50px;position:relative;transition:1.5s;width:50px;z-index:2;z-index:1}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span2__BzTLy:before{background-color:#fff;content:"";height:100%;left:-40px;position:absolute;transform:skewY(45deg);transform-origin:right;transition:1.5s;width:40px}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span2__BzTLy:after{background-color:#f2f2f2;content:"";height:40px;position:absolute;top:-40px;transform:skewX(45deg);transform-origin:bottom;transition:1.5s;width:100%}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span2__BzTLy:hover{background-color:#ef4149;filter:drop-shadow(0 0 30px #ef4149);transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span2__BzTLy:hover:before{background-color:#f75d64;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span2__BzTLy:hover:after{background-color:#f14e55;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo:nth-child(2){translate:-60px -60px;z-index:1}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo:nth-child(3){translate:60px 60px;z-index:3}@keyframes TweakCube_changeColor__SsQtL{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(1turn)}}.Preserve3dBox_container__S8Nkn{display:flex;height:580px;justify-content:center;position:relative;width:100%}.Preserve3dBox_container__S8Nkn .Preserve3dBox_content__OkpkD{display:flex;height:400px;justify-content:center;margin-top:80px;width:100%}.Preserve3dBox_container__S8Nkn .Preserve3dBox_content__OkpkD .Preserve3dBox_box__xhigG{animation:Preserve3dBox_preserve3dRotate__jcPnu 10s linear infinite;height:260px;margin-top:100px;position:relative;transform:rotate3d(1,1,1,0deg);transform-origin:center center;transform-style:preserve-3d;width:260px}.Preserve3dBox_container__S8Nkn .Preserve3dBox_content__OkpkD .Preserve3dBox_box__xhigG .Preserve3dBox_side1__OlfJ5{background-image:url(../../images/7380e6f7.jpg);background-position:50%;background-repeat:no-repeat;background-size:cover;border-color:#eee #ddd;border-style:solid;border-width:10px;box-sizing:border-box;height:260px;position:absolute;transform:translateZ(130px);width:260px}.Preserve3dBox_container__S8Nkn .Preserve3dBox_content__OkpkD .Preserve3dBox_box__xhigG .Preserve3dBox_side2__N20GX{background-image:url(../../images/ba36f098.jpg);background-position:50%;background-repeat:no-repeat;background-size:cover;border-color:#eee #ddd;border-style:solid;border-width:10px;box-sizing:border-box;height:260px;position:absolute;transform:translateZ(-130px) rotateY(180deg);width:260px}.Preserve3dBox_container__S8Nkn .Preserve3dBox_content__OkpkD .Preserve3dBox_box__xhigG .Preserve3dBox_side3__t1Hxo{background-image:url(../../images/e7c8df7d.jpg);background-position:50%;background-repeat:no-repeat;background-size:cover;border-color:#eee #ddd;border-style:solid;border-width:10px;box-sizing:border-box;height:260px;position:absolute;transform:translate3d(0,-130px,0) rotateX(90deg);width:260px}.Preserve3dBox_container__S8Nkn .Preserve3dBox_content__OkpkD .Preserve3dBox_box__xhigG .Preserve3dBox_side4__7YzMw{background-image:url(../../images/06a46209.jpg);background-position:50%;background-repeat:no-repeat;background-size:cover;border-color:#eee #ddd;border-style:solid;border-width:10px;box-sizing:border-box;height:260px;position:absolute;transform:translate3d(0,130px,0) rotateX(90deg) rotateY(180deg);width:260px}.Preserve3dBox_container__S8Nkn .Preserve3dBox_content__OkpkD .Preserve3dBox_box__xhigG .Preserve3dBox_side5__38WMJ{background-image:url(../../images/ed6d9a11.jpg);background-position:50%;background-repeat:no-repeat;background-size:cover;border-color:#eee #ddd;border-style:solid;border-width:10px;box-sizing:border-box;height:260px;position:absolute;transform:translate3d(-130px,0,0) rotateY(90deg);width:260px}.Preserve3dBox_container__S8Nkn .Preserve3dBox_content__OkpkD .Preserve3dBox_box__xhigG .Preserve3dBox_side6__pWRYS{background-image:url(../../images/271a66ed.jpg);background-position:50%;background-repeat:no-repeat;background-size:cover;border-color:#eee #ddd;border-style:solid;border-width:10px;box-sizing:border-box;height:260px;position:absolute;transform:translate3d(130px,0,0) rotateY(90deg) rotateY(180deg);width:260px}.Preserve3dBox_container__S8Nkn .Preserve3dBox_content__OkpkD .Preserve3dBox_box__xhigG .Preserve3dBox_light__8ms1v{animation:Preserve3dBox_light__8ms1v 1s infinite}@keyframes Preserve3dBox_preserve3dRotate__jcPnu{to{transform:rotate3d(1,1,1,1turn)}}@keyframes Preserve3dBox_light__8ms1v{0%{box-shadow:0 0 0 0 #ffffffb3}70%{box-shadow:0 0 0 16px #fff0}to{box-shadow:0 0 0 0 #fff0}}.OrientationSenseCard_container__wM4Og{align-items:center;display:flex;justify-content:center;padding:100px 0 60px;position:relative;width:100%}.OrientationSenseCard_container__wM4Og .OrientationSenseCard_content__nHHlN{align-items:center;display:flex;justify-content:center;perspective:900px;transform-style:preserve-3d}.OrientationSenseCard_container__wM4Og .OrientationSenseCard_content__nHHlN .OrientationSenseCard_card__kb1rR{border:5px solid #fff;border-radius:6px;cursor:pointer;height:208px;margin:20px;position:relative;transform:rotateY(0);transition:.3s;width:150px}.OrientationSenseCard_container__wM4Og .OrientationSenseCard_content__nHHlN .OrientationSenseCard_card__kb1rR img{object-fit:cover;width:100%}.OrientationSenseCard_container__wM4Og .OrientationSenseCard_content__nHHlN .OrientationSenseCard_card__kb1rR:hover{box-shadow:0 10px 20px #fff9;transform:rotateY(0) scale(1.25)!important}.OrientationSenseCard_container__wM4Og .OrientationSenseCard_content__nHHlN .OrientationSenseCard_card__kb1rR:hover~.OrientationSenseCard_card__kb1rR{transform:rotateY(-25deg)}.OrientationSenseCard_container__wM4Og .OrientationSenseCard_content__nHHlN:hover .OrientationSenseCard_card__kb1rR{transform:rotateY(25deg)}.HexagonalMesh1_container__4Mauo{background:radial-gradient(circle at var(--xPos) var(--yPos),#0000 0,#0000 50px,#000 150px,#000 1000px);cursor:pointer;flex:0 0 120%;font-size:0;height:580px;margin-bottom:-25px;overflow:hidden;position:relative;transform:translate(-10%,-25px)}.HexagonalMesh1_container__4Mauo:before{content:"";float:left;height:100%;shape-outside:repeating-linear-gradient(#0000,#0000 80px,#000 0,#000 89.6px);width:25.5px}.HexagonalMesh1_container__4Mauo:after{animation:HexagonalMesh1_change__31Nqy 8s linear infinite;background:linear-gradient(45deg,#f44336,#ff9800,#ffe607,#09d7c4,#1cbed3,#1d8ae2,#bc24d6);bottom:0;content:"";left:0;-webkit-mask:radial-gradient(circle at var(--xPos) var(--yPos),#000 0,#000 50px,#0000 150px,#0000 150px);mask:radial-gradient(circle at var(--xPos) var(--yPos),#000 0,#000 50px,#0000 150px,#0000 150px);mix-blend-mode:darken;position:absolute;right:0;top:0;z-index:1}.HexagonalMesh1_container__4Mauo .HexagonalMesh1_item__uupv2{background:#000;-webkit-clip-path:polygon(0 25%,0 75%,50% 100%,100% 75%,100% 25%,50% 0);clip-path:polygon(0 25%,0 75%,50% 100%,100% 75%,100% 25%,50% 0);display:inline-block;flex:0 0 auto;height:57.735px;margin:1px 1px -13.425px;width:50px;z-index:2}@keyframes HexagonalMesh1_change__31Nqy{to{filter:hue-rotate(1turn)}}.HexagonalMesh2_container__7Eq5-{cursor:pointer;flex:0 0 120%;font-size:0;height:580px;margin-bottom:-25px;overflow:hidden;position:relative;transform:translate(-10%,-25px)}.HexagonalMesh2_container__7Eq5-:before{content:"";float:left;height:100%;shape-outside:repeating-linear-gradient(#0000,#0000 80px,#000 0,#000 89.6px);width:25.5px}.HexagonalMesh2_container__7Eq5-:after{animation:HexagonalMesh2_change__unRwF 8s linear infinite;background:linear-gradient(45deg,#f44336,#ff9800,#ffe607,#09d7c4,#1cbed3,#1d8ae2,#bc24d6);bottom:0;content:"";left:0;-webkit-mask:radial-gradient(circle at var(--xPos) var(--yPos),#000 0,#000 50px,#0000 150px,#0000 150px);mask:radial-gradient(circle at var(--xPos) var(--yPos),#000 0,#000 50px,#0000 150px,#0000 150px);mix-blend-mode:darken;position:absolute;right:0;top:0;z-index:1}.HexagonalMesh2_container__7Eq5- .HexagonalMesh2_item__RBkZx{background:#000;-webkit-clip-path:polygon(0 25%,0 75%,50% 100%,100% 75%,100% 25%,50% 0);clip-path:polygon(0 25%,0 75%,50% 100%,100% 75%,100% 25%,50% 0);display:inline-block;flex:0 0 auto;height:57.735px;margin:1px 1px -13.425px;width:50px;z-index:2}@keyframes HexagonalMesh2_change__unRwF{to{filter:hue-rotate(1turn)}}.HexagonalMesh3_container__7cOnb{cursor:pointer;flex:0 0 120%;font-size:0;height:580px;margin-bottom:-25px;overflow:hidden;position:relative;transform:translate(-10%,-25px)}.HexagonalMesh3_container__7cOnb:before{content:"";float:left;height:100%;shape-outside:repeating-linear-gradient(#0000,#0000 80px,#000 0,#000 89.6px);width:25.5px}.HexagonalMesh3_container__7cOnb:after{animation:HexagonalMesh3_change__cxOZy 8s linear infinite;background:linear-gradient(45deg,#f44336,#ff9800,#ffe607,#09d7c4,#1cbed3,#1d8ae2,#bc24d6);bottom:0;content:"";left:0;mix-blend-mode:darken;pointer-events:none;position:absolute;right:0;top:0;z-index:1}.HexagonalMesh3_container__7cOnb .HexagonalMesh3_item__JnppT{background:#000;-webkit-clip-path:polygon(0 25%,0 75%,50% 100%,100% 75%,100% 25%,50% 0);clip-path:polygon(0 25%,0 75%,50% 100%,100% 75%,100% 25%,50% 0);display:inline-block;flex:0 0 auto;height:57.735px;margin:1px 1px -13.425px;transition:.6s;width:50px;z-index:2}.HexagonalMesh3_container__7cOnb .HexagonalMesh3_item__JnppT:hover{background:#fff;transition:0s}@keyframes HexagonalMesh3_change__cxOZy{to{filter:hue-rotate(1turn)}}.IconScroll_container__pHJbN{display:flex;flex-direction:column;height:500px;width:100%}.IconScroll_container__pHJbN .IconScroll_row__ueyux{display:flex;font-size:42px;position:relative;transform:rotate(-30deg) translate(-560px,-560px);white-space:nowrap;width:100%}.IconScroll_container__pHJbN .IconScroll_row__ueyux div{animation:IconScroll_animate1__nWCc8 150s linear infinite;animation-delay:-150s}.IconScroll_container__pHJbN .IconScroll_row__ueyux div:nth-child(2){animation:IconScroll_animate2__M45\+C 150s linear infinite;animation-delay:-75s}.IconScroll_container__pHJbN .IconScroll_row__ueyux div svg{cursor:default;padding:0 5px;transition:6s;-webkit-user-select:none;user-select:none}.IconScroll_container__pHJbN .IconScroll_row__ueyux div svg path{fill:#00000080}.IconScroll_container__pHJbN .IconScroll_row__ueyux div svg:hover{filter:drop-shadow(0 0 20px #0f0);transition:0s}.IconScroll_container__pHJbN .IconScroll_row__ueyux div svg:hover path{fill:lime}.IconScroll_container__pHJbN .IconScroll_row__ueyux:nth-child(2n) div{animation:IconScroll_animate3__CVZU5 150s linear infinite;animation-delay:-150s;font-size:1em;white-space:nowrap}.IconScroll_container__pHJbN .IconScroll_row__ueyux:nth-child(2n) div:nth-child(2){animation:IconScroll_animate4__csJ4n 150s linear infinite;animation-delay:-75s}@keyframes IconScroll_animate1__nWCc8{0%{transform:translateX(100%)}to{transform:translateX(-100%)}}@keyframes IconScroll_animate2__M45\+C{0%{transform:translateX(0)}to{transform:translateX(-200%)}}@keyframes IconScroll_animate3__CVZU5{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes IconScroll_animate4__csJ4n{0%{transform:translateX(-200%)}to{transform:translateX(0)}}.WipeSwitchover_container__zA\+wD{height:600px;position:relative;width:100%}.WipeSwitchover_container__zA\+wD svg{height:100%;left:0;position:absolute;top:0;width:100%}.WipeSwitchover_container__zA\+wD svg path{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:.5;stroke-dasharray:8 8;stroke-dashoffset:0px}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_mask1__efwWk path{transform:translate(46%,40%) scale(1500)}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_mask2__bTFbb path{transform:translate(10%) scale(1500)}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_mask3__Gaobg path{transform:translate(8%,10%) scale(2200)}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_mask4__ZERnA path{stroke-dasharray:7 11;transform:translate(10%,46%) scale(2500)}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_mask5__MkpDg path{stroke-width:1;stroke-dasharray:30 29;transform:translate(46%,32%) scale(710)}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page1__ex092{display:flex;flex:1;height:100%;left:0;position:absolute;top:0;width:100%}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page1__ex092 rect{height:100%;left:0;position:absolute;top:0;width:100%}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page1__ex092 image{height:340px;object-fit:cover;transform:translate(28%,16%);width:240px}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page1__ex092 text{font-size:56px;font-weight:600;letter-spacing:-.005em;line-height:1.07143;transform:translate(54%,50%)}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page2__S7sFb{display:flex;flex:1;height:100%;left:0;position:absolute;top:0;width:100%}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page2__S7sFb rect{height:100%;left:0;position:absolute;top:0;width:100%}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page2__S7sFb image{height:340px;object-fit:cover;transform:translate(28%,16%);width:240px}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page2__S7sFb text{font-size:56px;font-weight:600;letter-spacing:-.005em;line-height:1.07143;transform:translate(54%,50%)}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page3__JtV7t{display:flex;flex:1;height:100%;left:0;position:absolute;top:0;width:100%}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page3__JtV7t rect{height:100%;left:0;position:absolute;top:0;width:100%}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page3__JtV7t image{height:340px;object-fit:cover;transform:translate(28%,16%);width:240px}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page3__JtV7t text{font-size:56px;font-weight:600;letter-spacing:-.005em;line-height:1.07143;transform:translate(54%,50%)}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page4__9G6Y9{display:flex;flex:1;height:100%;left:0;position:absolute;top:0;width:100%}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page4__9G6Y9 rect{height:100%;left:0;position:absolute;top:0;width:100%}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page4__9G6Y9 image{height:340px;object-fit:cover;transform:translate(28%,16%);width:240px}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page4__9G6Y9 text{font-size:56px;font-weight:600;letter-spacing:-.005em;line-height:1.07143;transform:translate(54%,50%)}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page5__uBeX2{display:flex;flex:1;height:100%;left:0;position:absolute;top:0;width:100%}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page5__uBeX2 rect{height:100%;left:0;position:absolute;top:0;width:100%}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page5__uBeX2 image{height:340px;object-fit:cover;transform:translate(28%,16%);width:240px}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page5__uBeX2 text{font-size:56px;font-weight:600;letter-spacing:-.005em;line-height:1.07143;transform:translate(54%,50%)}.WipeSwitchover_container__zA\+wD .WipeSwitchover_prevBtn__6vW6Q{align-items:center;background-color:#fff3;border-radius:40px;bottom:0;cursor:pointer;display:flex;flex:1;height:200px;justify-content:flex-end;left:-100px;margin:auto 0;position:absolute;top:0;transform:translateX(-100px);transition:.6s;width:200px}.WipeSwitchover_container__zA\+wD .WipeSwitchover_prevBtn__6vW6Q .WipeSwitchover_icon__Z3ryB{height:60px;margin-right:20px;width:60px}.WipeSwitchover_container__zA\+wD .WipeSwitchover_prevBtn__6vW6Q .WipeSwitchover_icon__Z3ryB .anticon{height:60px;position:relative;width:60px}.WipeSwitchover_container__zA\+wD .WipeSwitchover_prevBtn__6vW6Q .WipeSwitchover_icon__Z3ryB .anticon svg{height:60px;width:60px}.WipeSwitchover_container__zA\+wD .WipeSwitchover_prevBtn__6vW6Q .WipeSwitchover_icon__Z3ryB .anticon svg path{fill:#fff}.WipeSwitchover_container__zA\+wD .WipeSwitchover_nextBtn__sVZkG{align-items:center;background-color:#fff3;border-radius:40px;bottom:0;cursor:pointer;display:flex;flex:1;height:200px;margin:auto 0;position:absolute;right:-100px;top:0;transform:translateX(100px);transition:.6s;width:200px}.WipeSwitchover_container__zA\+wD .WipeSwitchover_nextBtn__sVZkG .WipeSwitchover_icon__Z3ryB{font-size:20px;height:60px;margin-left:20px;width:60px}.WipeSwitchover_container__zA\+wD .WipeSwitchover_nextBtn__sVZkG .WipeSwitchover_icon__Z3ryB .anticon{height:60px;position:relative;width:60px}.WipeSwitchover_container__zA\+wD .WipeSwitchover_nextBtn__sVZkG .WipeSwitchover_icon__Z3ryB .anticon svg{height:60px;width:60px}.WipeSwitchover_container__zA\+wD .WipeSwitchover_nextBtn__sVZkG .WipeSwitchover_icon__Z3ryB .anticon svg path{fill:#fff}.WipeSwitchover_container__zA\+wD:hover .WipeSwitchover_nextBtn__sVZkG,.WipeSwitchover_container__zA\+wD:hover .WipeSwitchover_prevBtn__6vW6Q{transform:translateX(0)}.AutoCompletePunctuation_container__EjYmN{align-items:center;display:flex;height:300px;justify-content:center;position:relative;width:100%}.AutoCompletePunctuation_container__EjYmN .AutoCompletePunctuation_content__PIXsh{align-items:center;display:flex;justify-content:space-between;padding-top:50px;width:940px}.AutoCompletePunctuation_container__EjYmN .AutoCompletePunctuation_content__PIXsh textarea{border:2px solid #333;box-sizing:border-box;display:flex;font-family:SourceHanSansCN-Regular!important;font-size:14px;line-height:22px;padding:10px;width:440px}.AutoCompletePunctuation_container__EjYmN .AutoCompletePunctuation_content__PIXsh textarea:active,.AutoCompletePunctuation_container__EjYmN .AutoCompletePunctuation_content__PIXsh textarea:focus{border:2px solid #4c78fc;outline:2px #4c78fc}.AutoCompletePunctuation_container__EjYmN .AutoCompletePunctuation_content__PIXsh div{background-color:#fff;border:2px solid #333;box-sizing:border-box;color:#222;display:flex;font-size:14px;height:130px;line-height:22px;padding:10px;width:440px}.AutoCompletePunctuation_container__EjYmN .AutoCompletePunctuation_content__PIXsh div:active,.AutoCompletePunctuation_container__EjYmN .AutoCompletePunctuation_content__PIXsh div:focus{border:2px solid #4c78fc;outline:2px #4c78fc}.StackedImages_container__Hnz74{align-content:center;align-items:center;display:flex;display:grid;flex-direction:column;height:440px;justify-content:center;place-content:center;position:relative;width:100%}.StackedImages_container__Hnz74 .StackedImages_content__bZLt4{--img-width:150px;--border-width:1px;align-items:flex-end;display:flex;filter:drop-shadow(0 0 var(--border-width) #fff) drop-shadow(0 0 var(--border-width) #fff) drop-shadow(0 0 #fff) drop-shadow(0 0 #fff);gap:12px;height:calc(var(--img-width)*1.7 + var(--border-width)*4);overflow:hidden;padding:calc(var(--border-width)*2);width:calc(100% + var(--border-width)*4)}.StackedImages_container__Hnz74 .StackedImages_content__bZLt4 img{--h:0px;--t:0px;aspect-ratio:1;border-bottom:calc(var(--img-width)) solid #fff;border-radius:50%;border-top:calc(var(--img-width)) solid #fff;cursor:pointer;height:var(--img-width);margin-bottom:calc(var(--img-width)*-1);margin-top:calc(var(--img-width)*-1);-webkit-mask:radial-gradient(0 0 at 0 0,#0000 0,#000 0) padding-box;translate:0 var(--t)}.StackedImages_container__Hnz74 .StackedImages_content__bZLt4 img:not(:last-child){margin-right:-30px;-webkit-mask:radial-gradient(50% 50% at calc(150% - 18px) calc(50% - var(--h)),#0000 calc(100% + 12px),#000 calc(101% + 12px)) padding-box}.StackedImages_container__Hnz74 .StackedImages_content__bZLt4 img:hover{--h:calc(var(--img-width)*-0.7);--t:calc(var(--img-width)*-0.7)}.StackedImages_container__Hnz74 .StackedImages_content__bZLt4 img[\:has\(\%2Bimg\:hover\)]{--h:calc(var(--img-width)*0.7)}.StackedImages_container__Hnz74 .StackedImages_content__bZLt4 img:has(+img:hover){--h:calc(var(--img-width)*0.7)}.InteractiveDesign_container__oK3No{align-items:center;background-image:linear-gradient(135deg,#224141,#162a2a);box-sizing:border-box;display:flex;flex:1;flex-direction:column;flex-wrap:wrap;min-height:100%;padding:4px 0;width:100%}.InteractiveDesign_container__oK3No .InteractiveDesign_box__\+Trza{background-image:linear-gradient(90deg,#04182c,#000c17,#04182c);border:3px solid rgba(53,162,253,.267);border-radius:10px;box-sizing:border-box;display:flex;margin:4px 2px;overflow:hidden;width:calc(100% - 8px)}
\ No newline at end of file
diff --git a/docs/styles/pages/8868.e7d9d787.css b/docs/styles/pages/8868.e7d9d787.css
deleted file mode 100644
index 75d9501..0000000
--- a/docs/styles/pages/8868.e7d9d787.css
+++ /dev/null
@@ -1 +0,0 @@
-.ModuleTitle_container__7ZCMv{font-family:SourceHanSansCN-Bold!important;font-size:24px;left:50%;position:absolute;top:20px;transform:translateX(-50%);white-space:nowrap;z-index:11}.MagnifyingGlass_container__z7\+HK{align-items:center;display:flex;flex-direction:column;height:520px;width:100%}.MagnifyingGlass_container__z7\+HK .MagnifyingGlass_content__csBAU{display:flex;flex:1;justify-content:center;padding-top:100px;width:100%}.MagnifyingGlass_container__z7\+HK .MagnifyingGlass_content__csBAU .MagnifyingGlass_smallBox__1rC23{height:280px;position:relative;width:400px;z-index:1}.MagnifyingGlass_container__z7\+HK .MagnifyingGlass_content__csBAU .MagnifyingGlass_smallBox__1rC23 .MagnifyingGlass_mask__kbQ6H{cursor:move;display:block;height:100%;left:0;position:absolute;top:0;width:100%;z-index:10}.MagnifyingGlass_container__z7\+HK .MagnifyingGlass_content__csBAU .MagnifyingGlass_smallBox__1rC23 .MagnifyingGlass_floatBox__Msmv9{background-color:rgba(255,255,204,.314);border:1px solid #ccc;cursor:move;height:120px;position:absolute;width:160px}.MagnifyingGlass_container__z7\+HK .MagnifyingGlass_content__csBAU .MagnifyingGlass_smallBox__1rC23 img{width:100%}.MagnifyingGlass_container__z7\+HK .MagnifyingGlass_content__csBAU .MagnifyingGlass_bigBox__dtenq{height:360px;margin-left:40px;overflow:hidden;position:relative;width:480px;z-index:1}.MagnifyingGlass_container__z7\+HK .MagnifyingGlass_content__csBAU .MagnifyingGlass_bigBox__dtenq img{height:700px;left:0;position:absolute;top:0;width:1000px;z-index:5}.CropImage_container__agQZ5{align-items:center;display:flex;justify-content:center;padding:100px 0 60px;position:relative;width:100%}.CropImage_container__agQZ5 .CropImage_leftBox__rxH\+K{border:1px solid #000;height:400px;position:relative;width:400px}.CropImage_container__agQZ5 .CropImage_leftBox__rxH\+K .CropImage_img1__vvyEU{-webkit-user-drag:none!important;height:100%;left:0;opacity:.5;position:absolute;top:0;-webkit-user-select:none;user-select:none;width:100%}.CropImage_container__agQZ5 .CropImage_leftBox__rxH\+K .CropImage_img2__CuOAQ{-webkit-user-drag:none!important;clip:rect(0,150px,150px,0);height:100%;left:0;position:absolute;top:0;-webkit-user-select:none;user-select:none;width:100%}.CropImage_container__agQZ5 .CropImage_leftBox__rxH\+K .CropImage_cropBox__A4fdb{border:1px solid #fff;cursor:all-scroll;height:150px;left:0;position:absolute;top:0;width:150px}.CropImage_container__agQZ5 .CropImage_leftBox__rxH\+K .CropImage_cropBox__A4fdb .CropImage_dot__TnuYQ{background-color:#fff;height:6px;position:absolute;width:6px}.CropImage_container__agQZ5 .CropImage_leftBox__rxH\+K .CropImage_cropBox__A4fdb .CropImage_leftUp__RO\+TV{cursor:nw-resize;left:-3px;top:-3px}.CropImage_container__agQZ5 .CropImage_leftBox__rxH\+K .CropImage_cropBox__A4fdb .CropImage_up__fR18N{cursor:n-resize;left:50%;margin-left:-3px;top:-3px}.CropImage_container__agQZ5 .CropImage_leftBox__rxH\+K .CropImage_cropBox__A4fdb .CropImage_rightUp__5Btk7{cursor:ne-resize;right:-3px;top:-3px}.CropImage_container__agQZ5 .CropImage_leftBox__rxH\+K .CropImage_cropBox__A4fdb .CropImage_right__nbAwk{cursor:e-resize;margin-top:-3px;right:-3px;top:50%}.CropImage_container__agQZ5 .CropImage_leftBox__rxH\+K .CropImage_cropBox__A4fdb .CropImage_rightDown__8vsgu{bottom:-3px;cursor:se-resize;right:-3px}.CropImage_container__agQZ5 .CropImage_leftBox__rxH\+K .CropImage_cropBox__A4fdb .CropImage_down__0RD60{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.CropImage_container__agQZ5 .CropImage_leftBox__rxH\+K .CropImage_cropBox__A4fdb .CropImage_leftDown__Ssc21{bottom:-3px;cursor:sw-resize;left:-3px}.CropImage_container__agQZ5 .CropImage_leftBox__rxH\+K .CropImage_cropBox__A4fdb .CropImage_left__qEy8B{cursor:w-resize;left:-3px;margin-top:-3px;top:50%}.CropImage_container__agQZ5 .CropImage_rightBox__tH7SB{height:400px;margin-left:50px;position:relative;width:400px}.CropImage_container__agQZ5 .CropImage_rightBox__tH7SB img{-webkit-user-drag:none!important;clip:rect(0,150px,150px,0);height:100%;position:absolute;-webkit-user-select:none;user-select:none;width:100%}.DragShopping_container__IbTIV{align-items:center;display:flex;justify-content:center;padding:100px 0 60px;position:relative;width:100%}.DragShopping_container__IbTIV .DragShopping_content__VVnMY{display:flex;flex-direction:column;width:80%}.DragShopping_container__IbTIV .DragShopping_content__VVnMY .DragShopping_bookBox__SDdDi{background-color:#111;border:1px solid #666;cursor:pointer;display:flex;flex-direction:column;padding:10px;width:100%}.DragShopping_container__IbTIV .DragShopping_content__VVnMY .DragShopping_bookBox__SDdDi img{height:180px;margin:0 auto 10px;width:150px}.DragShopping_container__IbTIV .DragShopping_content__VVnMY .DragShopping_bookBox__SDdDi p{margin-top:6px}.DragShopping_container__IbTIV .DragShopping_content__VVnMY .DragShopping_shoppingBox__3DBFv{border:1px solid #666;height:500px;margin-top:40px;width:100%}.DragShopping_container__IbTIV .DragShopping_content__VVnMY .DragShopping_shoppingBox__3DBFv .DragShopping_tableHead__lYIfd{background-color:#333;display:flex;height:40px;pointer-events:none;width:100%}.DragShopping_container__IbTIV .DragShopping_content__VVnMY .DragShopping_shoppingBox__3DBFv .DragShopping_tableHead__lYIfd .DragShopping_tableCell__6tWCA{align-items:center;display:flex;flex:1;padding-left:4px}.DragShopping_container__IbTIV .DragShopping_content__VVnMY .DragShopping_shoppingBox__3DBFv .DragShopping_tableRow__6Qo3x{border-bottom:1px solid #333;display:flex;pointer-events:none}.DragShopping_container__IbTIV .DragShopping_content__VVnMY .DragShopping_shoppingBox__3DBFv .DragShopping_tableRow__6Qo3x .DragShopping_tableCell__6tWCA{align-items:center;display:flex;flex:1;padding:4px}.DragShopping_container__IbTIV .DragShopping_content__VVnMY .DragShopping_shoppingBox__3DBFv .DragShopping_total__\+sd3-{display:flex;justify-content:flex-end;padding:4px 8px;pointer-events:none}.DragShopping_container__IbTIV .DragShopping_content__VVnMY .DragShopping_shoppingBox__3DBFv .DragShopping_tip__vp\+8T{color:#999;display:flex;font-size:20px;justify-content:center;margin-top:40px;pointer-events:none;width:100%}.MouseHover1_container__D7VNa{align-items:center;color:#fff;display:flex;height:800px;justify-content:center;position:relative;width:100%}.MouseHover1_container__D7VNa .MouseHover1_content__qBPDJ{align-items:center;display:flex;flex-direction:column}.MouseHover1_container__D7VNa .MouseHover1_content__qBPDJ .MouseHover1_title__cOVT0{cursor:default;font-size:40px;font-weight:500}.MouseHover1_container__D7VNa .MouseHover1_content__qBPDJ .MouseHover1_bottom__Ua8lo{display:flex;margin-top:120px}.MouseHover1_container__D7VNa .MouseHover1_content__qBPDJ .MouseHover1_bottom__Ua8lo img{width:500px}.MouseHover1_container__D7VNa .MouseHover1_content__qBPDJ .MouseHover1_bottom__Ua8lo .MouseHover1_right__D0ca6{align-items:flex-start;display:flex;flex-direction:column;margin-left:80px}.MouseHover1_container__D7VNa .MouseHover1_content__qBPDJ .MouseHover1_bottom__Ua8lo .MouseHover1_right__D0ca6 a{color:#fff;font-size:22px}.MouseHover1_container__D7VNa .MouseHover1_content__qBPDJ .MouseHover1_bottom__Ua8lo .MouseHover1_right__D0ca6 a:not(:first-child){margin-top:44px}.MouseHover1_container__D7VNa .MouseHover1_content__qBPDJ .MouseHover1_bottom__Ua8lo .MouseHover1_right__D0ca6 a:hover{color:#4c78fc}.MouseHover1_container__D7VNa .MouseHover1_cursor__orRgp{background-color:#fff;border-radius:50%;mix-blend-mode:difference;pointer-events:none;position:absolute;transform-origin:initial;transition:width .4s,height .4s}.MouseHover2_container__HD\+sM{align-items:center;background-color:#04182c;color:#fff;display:flex;height:560px;justify-content:center;padding:0 30px;position:relative;width:100%}.MouseHover2_container__HD\+sM .MouseHover2_content__UKyly{display:flex;flex-wrap:wrap;width:100%}.MouseHover2_container__HD\+sM .MouseHover2_content__UKyly .MouseHover2_item__lglpx{--bgOpacity:1,box-sizing:border-box;border:1px solid #aaa;border-radius:12px;height:180px;margin:16px 20px;position:relative;width:calc(33.33333% - 40px)}.MouseHover2_container__HD\+sM .MouseHover2_content__UKyly .MouseHover2_item__lglpx a{color:#fff;margin-top:20px}.MouseHover2_container__HD\+sM .MouseHover2_content__UKyly .MouseHover2_item__lglpx a:hover{color:#4c78fc}.MouseHover2_container__HD\+sM .MouseHover2_content__UKyly .MouseHover2_item__lglpx:before{background:radial-gradient(140px circle at var(--x) var(--y),#f4cf47 0,#0000 100%);border-radius:12px;bottom:-3px;box-sizing:border-box;content:"";height:calc(100% + 6px);left:-3px;position:absolute;right:-3px;top:-3px;width:calc(100% + 6px);will-change:background}.MouseHover2_container__HD\+sM .MouseHover2_content__UKyly .MouseHover2_item__lglpx .MouseHover2_box__dKAMr{background-color:#04182c;border-radius:12px;bottom:0;display:flex;flex-direction:column;height:100%;justify-content:center;left:0;overflow:hidden;padding:0 16px;position:absolute;right:0;top:0;width:100%}.MouseHover2_container__HD\+sM .MouseHover2_content__UKyly .MouseHover2_item__lglpx:hover .MouseHover2_box__dKAMr{background-color:#04182c00}.card_container__5Q3kU{align-items:center;border-radius:24px;cursor:pointer;display:flex;height:424px;justify-content:center;overflow:hidden;position:relative;width:300px}.card_container__5Q3kU:before{background:conic-gradient(#03a9f4,#e91e63,#9c27b0,#ff5722,#03a9f4);border-radius:24px;bottom:0;content:"";left:0;-webkit-mask:radial-gradient(circle at var(--x) var(--y),#000,#000,#0000,#0000,#0000);mask:radial-gradient(circle at var(--x) var(--y),#000,#000,#0000,#0000,#0000);opacity:0;position:absolute;right:0;top:0;transition:opacity .6s}.card_container__5Q3kU:hover:before{opacity:1}.card_container__5Q3kU .card_content__rVMcc{border-radius:24px;bottom:3px;left:3px;overflow:hidden;position:absolute;right:3px;top:3px}.card_container__5Q3kU .card_content__rVMcc:after,.card_container__5Q3kU .card_content__rVMcc:before{background:var(--url);background-position:50%;background-size:cover;border-radius:24px;content:"";position:absolute}.card_container__5Q3kU .card_content__rVMcc:before{bottom:0;filter:blur(20px);left:0;right:0;top:0}.card_container__5Q3kU .card_content__rVMcc:after{bottom:40px;left:40px;right:40px;top:40px}.MouseHover3_container__AfDAp{align-items:center;display:flex;height:560px;justify-content:center;width:100%}.MouseHover3_container__AfDAp .MouseHover3_content__sQ9Jr{align-items:center;display:flex;justify-content:space-between;max-width:1300px;min-width:900px;width:70%}.SlideButtonTab_container__eT4SM{align-items:center;display:flex;height:300px;justify-content:center;perspective:500px;position:relative;width:100%}.SlideButtonTab_container__eT4SM .SlideButtonTab_content__6sIYs{background-color:#e2e6eb;border-radius:12px;box-shadow:-10px -10px 15px #343f49,10px 10px 15px #212d38;display:flex;height:80px;justify-content:space-between;overflow:hidden;padding:20px 16px;position:relative;transform:rotateY(var(--wraper-rotate));transform-origin:center;transition:transform .4s cubic-bezier(0,0,.48,1);width:600px}@property --groove-left{.SlideButtonTab_container__eT4SM .SlideButtonTab_content__6sIYs{syntax:"<length>";initial-value:16px;inherits:false}}@property --wraper-rotate{.SlideButtonTab_container__eT4SM .SlideButtonTab_content__6sIYs{syntax:"<angle>";initial-value:0deg;inherits:false}}@property --btnWidth{.SlideButtonTab_container__eT4SM .SlideButtonTab_content__6sIYs{syntax:"<length>";initial-value:0;inherits:false}}.SlideButtonTab_container__eT4SM .SlideButtonTab_content__6sIYs:before{border-radius:12px;box-shadow:inset 8px 8px 6px #d9dce6,inset -5px -5px 15px #f5f9fd,inset -5px -5px 15px #f5f9fd,inset 7px 7px 6px #d9dce6;content:"";height:calc(100% - 40px);left:16px;left:var(--groove-left,16px);position:absolute;top:20px;transition:left .8s cubic-bezier(.82,.12,.18,.88);width:var(--btnWidth)}.SlideButtonTab_container__eT4SM .SlideButtonTab_content__6sIYs .SlideButtonTab_btn__tD8IC{align-items:center;animation:SlideButtonTab_txtOutScale__5pmWX .6s linear;color:#444;cursor:pointer;display:flex;font-size:15px;font-weight:600;justify-content:center;transition:color 1.2s linear .4s;-webkit-user-select:none;user-select:none;width:var(--btnWidth)}.SlideButtonTab_container__eT4SM .SlideButtonTab_content__6sIYs .SlideButtonTab_btn__tD8IC:not(:first-child){margin-left:8px}.SlideButtonTab_container__eT4SM .SlideButtonTab_content__6sIYs .SlideButtonTab_btn__tD8IC:not(:last-child){margin-right:8px}.SlideButtonTab_container__eT4SM .SlideButtonTab_content__6sIYs .SlideButtonTab_actived__RWXqG{animation:SlideButtonTab_txtEnterScale__YsI0b 1s linear;color:#111!important;transform:scale(1.1)}@keyframes SlideButtonTab_txtEnterScale__YsI0b{0%,30%{transform:scale(1)}80%{transform:scale(1.15)}to{transform:scale(1.1)}}@keyframes SlideButtonTab_txtOutScale__5pmWX{0%,30%{transform:scale(1.1)}80%{transform:scale(.95)}to{transform:scale(1)}}.FlipBook_container__bOMio{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:100px 0 60px;position:relative;width:100%}.FlipBook_container__bOMio .FlipBook_pages__Ls1i4{display:flex;height:500px;position:relative;width:706px}.FlipBook_container__bOMio .FlipBook_pages__Ls1i4 .FlipBook_paper__qnIh0{display:flex;height:500px;left:353px;position:absolute;top:0;transform-origin:left center;transform-style:preserve-3d;width:353px}.FlipBook_container__bOMio .FlipBook_pages__Ls1i4 .FlipBook_paper__qnIh0[data-left],.FlipBook_container__bOMio .FlipBook_pages__Ls1i4 .FlipBook_paper__qnIh0[data-right]{z-index:4}.FlipBook_container__bOMio .FlipBook_pages__Ls1i4 .FlipBook_paper__qnIh0[data-right]+.FlipBook_paper__qnIh0{z-index:3}.FlipBook_container__bOMio .FlipBook_pages__Ls1i4 .FlipBook_paper__qnIh0 .FlipBook_page__5K\+Jz{height:100%;overflow:hidden;position:absolute;top:0;transform-origin:center;width:100%}.FlipBook_container__bOMio .FlipBook_pages__Ls1i4 .FlipBook_paper__qnIh0 .FlipBook_page__5K\+Jz img{height:100%;object-fit:cover;width:100%}.FlipBook_container__bOMio .FlipBook_pages__Ls1i4 .FlipBook_paper__qnIh0 .FlipBook_left-show-front-page__I3ToF,.FlipBook_container__bOMio .FlipBook_pages__Ls1i4 .FlipBook_paper__qnIh0 .FlipBook_right-show-back-page__crJO-{transform:scaleX(-1) translateZ(3px);z-index:3}.FlipBook_container__bOMio .FlipBook_pages__Ls1i4 .FlipBook_paper__qnIh0 .FlipBook_left-show-back-page__yRt8k,.FlipBook_container__bOMio .FlipBook_pages__Ls1i4 .FlipBook_paper__qnIh0 .FlipBook_right-show-front-page__pTHC0{transform:translateZ(4px);z-index:4}.FlipBook_container__bOMio .FlipBook_pages__Ls1i4 .FlipBook_paper__qnIh0 .FlipBook_left-hide-front-page__kQs3M{transform:scaleX(-1);z-index:2}.FlipBook_container__bOMio .FlipBook_pages__Ls1i4 .FlipBook_paper__qnIh0 .FlipBook_left-hide-back-page__lMGif{z-index:1}.FlipBook_container__bOMio .FlipBook_pages__Ls1i4 .FlipBook_paper__qnIh0 .FlipBook_right-hide-front-page__8XaW9{z-index:2}.FlipBook_container__bOMio .FlipBook_pages__Ls1i4 .FlipBook_paper__qnIh0 .FlipBook_right-hide-back-page__56D1v{transform:scaleX(-1);z-index:1}.FlipBook_container__bOMio .FlipBook_btns__9Cs\+L{display:flex;margin-top:50px}.FlipBook_container__bOMio .FlipBook_btns__9Cs\+L .FlipBook_btn__QmvzH:not(:first-child){margin-left:50px}.switch_container__i9Gh6{align-items:center;cursor:pointer;display:flex;position:relative}.switch_container__i9Gh6 .switch_box__M6wl2{background-color:#355dff;overflow:hidden;position:absolute;transition:all .4s}.switch_container__i9Gh6 .switch_icon__AQIrn{position:absolute;transition:all .4s}.Switchs_container__pX5RV{align-items:center;display:flex;justify-content:center;padding:110px 0 60px;position:relative;width:100%}.animation_container__bfyEi{-webkit-user-drag:none;height:920px;pointer-events:all;position:relative;-webkit-user-select:none;user-select:none;width:490px}.animation_container__bfyEi .animation_content__H8vdL{left:0;position:absolute;top:0}.animation_container__bfyEi .animation_content__H8vdL .animation_people__3G2ps{-webkit-user-drag:none;margin-top:40px;-webkit-user-select:none;user-select:none;width:420px}.animation_container__bfyEi .animation_content__H8vdL .animation_giftBox__06Ghv{cursor:pointer;height:32%;left:212px;position:absolute;top:480px;width:36%}.animation_container__bfyEi .animation_content__H8vdL .animation_giftBox__06Ghv .animation_coin__9Ei6m{-webkit-user-drag:none;height:30%;left:0;opacity:0;position:absolute;top:0;-webkit-user-select:none;user-select:none;width:30%}.animation_container__bfyEi .animation_content__H8vdL .animation_giftBox__06Ghv .animation_gift__fEEYc{-webkit-user-drag:none;height:100%;-webkit-user-select:none;user-select:none;width:100%}@media screen and (min-width:1800px)and (max-width:2300px){.animation_container__bfyEi{height:800px;width:420px}.animation_container__bfyEi .animation_content__H8vdL .animation_people__3G2ps{width:360px}.animation_container__bfyEi .animation_content__H8vdL .animation_giftBox__06Ghv{height:30%;left:185px;top:418px;width:34%}.animation_container__bfyEi .animation_content__H8vdL .animation_giftBox__06Ghv .animation_coin__9Ei6m{height:27%;width:27%}}@media screen and (min-width:1200px)and (max-width:1800px){.animation_container__bfyEi{height:650px;width:380px}.animation_container__bfyEi .animation_content__H8vdL .animation_people__3G2ps{width:300px}.animation_container__bfyEi .animation_content__H8vdL .animation_giftBox__06Ghv{height:27%;left:156px;top:358px;width:32%}.animation_container__bfyEi .animation_content__H8vdL .animation_giftBox__06Ghv .animation_coin__9Ei6m{height:26%;width:26%}}@media screen and (max-width:1200px){.animation_container__bfyEi{height:620px;width:340px}.animation_container__bfyEi .animation_content__H8vdL .animation_people__3G2ps{width:270px}.animation_container__bfyEi .animation_content__H8vdL .animation_giftBox__06Ghv{height:28%;left:140px;top:322px;width:32%}.animation_container__bfyEi .animation_content__H8vdL .animation_giftBox__06Ghv .animation_coin__9Ei6m{height:28%;width:28%}}.PeopleAnimation_container__P9IRI{align-items:center;display:flex;height:900px;justify-content:center;width:100%}.TweakCube_container__chHsQ{height:580px;padding:90px 0 60px;position:relative;width:100%}.TweakCube_container__chHsQ .TweakCube_content__rXgCM{align-items:center;display:flex;justify-content:center;position:relative;top:35%;transform:skewY(-20deg)}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo{animation:TweakCube_changeColor__SsQtL 8s linear infinite;position:relative;z-index:2}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL{display:flex;flex-direction:column;gap:30px;left:0;position:absolute;top:0;translate:-70px 0;z-index:3}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span0__kaIxY{background-color:#dcdcdc;display:inline-block;height:50px;position:relative;transition:1.5s;width:50px;z-index:0;z-index:3}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span0__kaIxY:before{background-color:#fff;content:"";height:100%;left:-40px;position:absolute;transform:skewY(45deg);transform-origin:right;transition:1.5s;width:40px}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span0__kaIxY:after{background-color:#f2f2f2;content:"";height:40px;position:absolute;top:-40px;transform:skewX(45deg);transform-origin:bottom;transition:1.5s;width:100%}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span0__kaIxY:hover{background-color:#ef4149;filter:drop-shadow(0 0 30px #ef4149);transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span0__kaIxY:hover:before{background-color:#f75d64;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span0__kaIxY:hover:after{background-color:#f14e55;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span1__RA\+mL{background-color:#dcdcdc;display:inline-block;height:50px;position:relative;transition:1.5s;width:50px;z-index:1;z-index:2}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span1__RA\+mL:before{background-color:#fff;content:"";height:100%;left:-40px;position:absolute;transform:skewY(45deg);transform-origin:right;transition:1.5s;width:40px}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span1__RA\+mL:after{background-color:#f2f2f2;content:"";height:40px;position:absolute;top:-40px;transform:skewX(45deg);transform-origin:bottom;transition:1.5s;width:100%}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span1__RA\+mL:hover{background-color:#ef4149;filter:drop-shadow(0 0 30px #ef4149);transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span1__RA\+mL:hover:before{background-color:#f75d64;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span1__RA\+mL:hover:after{background-color:#f14e55;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span2__BzTLy{background-color:#dcdcdc;display:inline-block;height:50px;position:relative;transition:1.5s;width:50px;z-index:2;z-index:1}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span2__BzTLy:before{background-color:#fff;content:"";height:100%;left:-40px;position:absolute;transform:skewY(45deg);transform-origin:right;transition:1.5s;width:40px}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span2__BzTLy:after{background-color:#f2f2f2;content:"";height:40px;position:absolute;top:-40px;transform:skewX(45deg);transform-origin:bottom;transition:1.5s;width:100%}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span2__BzTLy:hover{background-color:#ef4149;filter:drop-shadow(0 0 30px #ef4149);transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span2__BzTLy:hover:before{background-color:#f75d64;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column0__0ANAL .TweakCube_span2__BzTLy:hover:after{background-color:#f14e55;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi{display:flex;flex-direction:column;gap:30px;left:0;position:absolute;top:0;translate:0 0;z-index:2}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span0__kaIxY{background-color:#dcdcdc;display:inline-block;height:50px;position:relative;transition:1.5s;width:50px;z-index:0;z-index:3}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span0__kaIxY:before{background-color:#fff;content:"";height:100%;left:-40px;position:absolute;transform:skewY(45deg);transform-origin:right;transition:1.5s;width:40px}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span0__kaIxY:after{background-color:#f2f2f2;content:"";height:40px;position:absolute;top:-40px;transform:skewX(45deg);transform-origin:bottom;transition:1.5s;width:100%}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span0__kaIxY:hover{background-color:#ef4149;filter:drop-shadow(0 0 30px #ef4149);transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span0__kaIxY:hover:before{background-color:#f75d64;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span0__kaIxY:hover:after{background-color:#f14e55;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span1__RA\+mL{background-color:#dcdcdc;display:inline-block;height:50px;position:relative;transition:1.5s;width:50px;z-index:1;z-index:2}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span1__RA\+mL:before{background-color:#fff;content:"";height:100%;left:-40px;position:absolute;transform:skewY(45deg);transform-origin:right;transition:1.5s;width:40px}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span1__RA\+mL:after{background-color:#f2f2f2;content:"";height:40px;position:absolute;top:-40px;transform:skewX(45deg);transform-origin:bottom;transition:1.5s;width:100%}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span1__RA\+mL:hover{background-color:#ef4149;filter:drop-shadow(0 0 30px #ef4149);transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span1__RA\+mL:hover:before{background-color:#f75d64;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span1__RA\+mL:hover:after{background-color:#f14e55;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span2__BzTLy{background-color:#dcdcdc;display:inline-block;height:50px;position:relative;transition:1.5s;width:50px;z-index:2;z-index:1}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span2__BzTLy:before{background-color:#fff;content:"";height:100%;left:-40px;position:absolute;transform:skewY(45deg);transform-origin:right;transition:1.5s;width:40px}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span2__BzTLy:after{background-color:#f2f2f2;content:"";height:40px;position:absolute;top:-40px;transform:skewX(45deg);transform-origin:bottom;transition:1.5s;width:100%}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span2__BzTLy:hover{background-color:#ef4149;filter:drop-shadow(0 0 30px #ef4149);transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span2__BzTLy:hover:before{background-color:#f75d64;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column1__9Hhyi .TweakCube_span2__BzTLy:hover:after{background-color:#f14e55;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC{display:flex;flex-direction:column;gap:30px;left:0;position:absolute;top:0;translate:70px 0;z-index:1}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span0__kaIxY{background-color:#dcdcdc;display:inline-block;height:50px;position:relative;transition:1.5s;width:50px;z-index:0;z-index:3}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span0__kaIxY:before{background-color:#fff;content:"";height:100%;left:-40px;position:absolute;transform:skewY(45deg);transform-origin:right;transition:1.5s;width:40px}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span0__kaIxY:after{background-color:#f2f2f2;content:"";height:40px;position:absolute;top:-40px;transform:skewX(45deg);transform-origin:bottom;transition:1.5s;width:100%}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span0__kaIxY:hover{background-color:#ef4149;filter:drop-shadow(0 0 30px #ef4149);transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span0__kaIxY:hover:before{background-color:#f75d64;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span0__kaIxY:hover:after{background-color:#f14e55;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span1__RA\+mL{background-color:#dcdcdc;display:inline-block;height:50px;position:relative;transition:1.5s;width:50px;z-index:1;z-index:2}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span1__RA\+mL:before{background-color:#fff;content:"";height:100%;left:-40px;position:absolute;transform:skewY(45deg);transform-origin:right;transition:1.5s;width:40px}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span1__RA\+mL:after{background-color:#f2f2f2;content:"";height:40px;position:absolute;top:-40px;transform:skewX(45deg);transform-origin:bottom;transition:1.5s;width:100%}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span1__RA\+mL:hover{background-color:#ef4149;filter:drop-shadow(0 0 30px #ef4149);transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span1__RA\+mL:hover:before{background-color:#f75d64;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span1__RA\+mL:hover:after{background-color:#f14e55;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span2__BzTLy{background-color:#dcdcdc;display:inline-block;height:50px;position:relative;transition:1.5s;width:50px;z-index:2;z-index:1}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span2__BzTLy:before{background-color:#fff;content:"";height:100%;left:-40px;position:absolute;transform:skewY(45deg);transform-origin:right;transition:1.5s;width:40px}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span2__BzTLy:after{background-color:#f2f2f2;content:"";height:40px;position:absolute;top:-40px;transform:skewX(45deg);transform-origin:bottom;transition:1.5s;width:100%}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span2__BzTLy:hover{background-color:#ef4149;filter:drop-shadow(0 0 30px #ef4149);transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span2__BzTLy:hover:before{background-color:#f75d64;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo .TweakCube_column2__EbxfC .TweakCube_span2__BzTLy:hover:after{background-color:#f14e55;transition:0s}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo:nth-child(2){translate:-60px -60px;z-index:1}.TweakCube_container__chHsQ .TweakCube_content__rXgCM .TweakCube_cube__c9JMo:nth-child(3){translate:60px 60px;z-index:3}@keyframes TweakCube_changeColor__SsQtL{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(1turn)}}.Preserve3dBox_container__S8Nkn{display:flex;height:580px;justify-content:center;position:relative;width:100%}.Preserve3dBox_container__S8Nkn .Preserve3dBox_content__OkpkD{display:flex;height:400px;justify-content:center;margin-top:80px;width:100%}.Preserve3dBox_container__S8Nkn .Preserve3dBox_content__OkpkD .Preserve3dBox_box__xhigG{animation:Preserve3dBox_preserve3dRotate__jcPnu 10s linear infinite;height:260px;margin-top:100px;position:relative;transform:rotate3d(1,1,1,0deg);transform-origin:center center;transform-style:preserve-3d;width:260px}.Preserve3dBox_container__S8Nkn .Preserve3dBox_content__OkpkD .Preserve3dBox_box__xhigG .Preserve3dBox_side1__OlfJ5{background-image:url(../../images/7380e6f7.jpg);background-position:50%;background-repeat:no-repeat;background-size:cover;border-color:#eee #ddd;border-style:solid;border-width:10px;box-sizing:border-box;height:260px;position:absolute;transform:translateZ(130px);width:260px}.Preserve3dBox_container__S8Nkn .Preserve3dBox_content__OkpkD .Preserve3dBox_box__xhigG .Preserve3dBox_side2__N20GX{background-image:url(../../images/ba36f098.jpg);background-position:50%;background-repeat:no-repeat;background-size:cover;border-color:#eee #ddd;border-style:solid;border-width:10px;box-sizing:border-box;height:260px;position:absolute;transform:translateZ(-130px) rotateY(180deg);width:260px}.Preserve3dBox_container__S8Nkn .Preserve3dBox_content__OkpkD .Preserve3dBox_box__xhigG .Preserve3dBox_side3__t1Hxo{background-image:url(../../images/e7c8df7d.jpg);background-position:50%;background-repeat:no-repeat;background-size:cover;border-color:#eee #ddd;border-style:solid;border-width:10px;box-sizing:border-box;height:260px;position:absolute;transform:translate3d(0,-130px,0) rotateX(90deg);width:260px}.Preserve3dBox_container__S8Nkn .Preserve3dBox_content__OkpkD .Preserve3dBox_box__xhigG .Preserve3dBox_side4__7YzMw{background-image:url(../../images/06a46209.jpg);background-position:50%;background-repeat:no-repeat;background-size:cover;border-color:#eee #ddd;border-style:solid;border-width:10px;box-sizing:border-box;height:260px;position:absolute;transform:translate3d(0,130px,0) rotateX(90deg) rotateY(180deg);width:260px}.Preserve3dBox_container__S8Nkn .Preserve3dBox_content__OkpkD .Preserve3dBox_box__xhigG .Preserve3dBox_side5__38WMJ{background-image:url(../../images/ed6d9a11.jpg);background-position:50%;background-repeat:no-repeat;background-size:cover;border-color:#eee #ddd;border-style:solid;border-width:10px;box-sizing:border-box;height:260px;position:absolute;transform:translate3d(-130px,0,0) rotateY(90deg);width:260px}.Preserve3dBox_container__S8Nkn .Preserve3dBox_content__OkpkD .Preserve3dBox_box__xhigG .Preserve3dBox_side6__pWRYS{background-image:url(../../images/271a66ed.jpg);background-position:50%;background-repeat:no-repeat;background-size:cover;border-color:#eee #ddd;border-style:solid;border-width:10px;box-sizing:border-box;height:260px;position:absolute;transform:translate3d(130px,0,0) rotateY(90deg) rotateY(180deg);width:260px}.Preserve3dBox_container__S8Nkn .Preserve3dBox_content__OkpkD .Preserve3dBox_box__xhigG .Preserve3dBox_light__8ms1v{animation:Preserve3dBox_light__8ms1v 1s infinite}@keyframes Preserve3dBox_preserve3dRotate__jcPnu{to{transform:rotate3d(1,1,1,1turn)}}@keyframes Preserve3dBox_light__8ms1v{0%{box-shadow:0 0 0 0 #ffffffb3}70%{box-shadow:0 0 0 16px #fff0}to{box-shadow:0 0 0 0 #fff0}}.OrientationSenseCard_container__wM4Og{align-items:center;display:flex;justify-content:center;padding:100px 0 60px;position:relative;width:100%}.OrientationSenseCard_container__wM4Og .OrientationSenseCard_content__nHHlN{align-items:center;display:flex;justify-content:center;perspective:900px;transform-style:preserve-3d}.OrientationSenseCard_container__wM4Og .OrientationSenseCard_content__nHHlN .OrientationSenseCard_card__kb1rR{border:5px solid #fff;border-radius:6px;cursor:pointer;height:208px;margin:20px;position:relative;transform:rotateY(0);transition:.3s;width:150px}.OrientationSenseCard_container__wM4Og .OrientationSenseCard_content__nHHlN .OrientationSenseCard_card__kb1rR img{object-fit:cover;width:100%}.OrientationSenseCard_container__wM4Og .OrientationSenseCard_content__nHHlN .OrientationSenseCard_card__kb1rR:hover{box-shadow:0 10px 20px #fff9;transform:rotateY(0) scale(1.25)!important}.OrientationSenseCard_container__wM4Og .OrientationSenseCard_content__nHHlN .OrientationSenseCard_card__kb1rR:hover~.OrientationSenseCard_card__kb1rR{transform:rotateY(-25deg)}.OrientationSenseCard_container__wM4Og .OrientationSenseCard_content__nHHlN:hover .OrientationSenseCard_card__kb1rR{transform:rotateY(25deg)}.HexagonalMesh1_container__4Mauo{background:radial-gradient(circle at var(--xPos) var(--yPos),#0000 0,#0000 50px,#000 150px,#000 1000px);cursor:pointer;flex:0 0 120%;font-size:0;height:580px;margin-bottom:-25px;overflow:hidden;position:relative;transform:translate(-10%,-25px)}.HexagonalMesh1_container__4Mauo:before{content:"";float:left;height:100%;shape-outside:repeating-linear-gradient(#0000,#0000 80px,#000 0,#000 89.6px);width:25.5px}.HexagonalMesh1_container__4Mauo:after{animation:HexagonalMesh1_change__31Nqy 8s linear infinite;background:linear-gradient(45deg,#f44336,#ff9800,#ffe607,#09d7c4,#1cbed3,#1d8ae2,#bc24d6);bottom:0;content:"";left:0;-webkit-mask:radial-gradient(circle at var(--xPos) var(--yPos),#000 0,#000 50px,#0000 150px,#0000 150px);mask:radial-gradient(circle at var(--xPos) var(--yPos),#000 0,#000 50px,#0000 150px,#0000 150px);mix-blend-mode:darken;position:absolute;right:0;top:0;z-index:1}.HexagonalMesh1_container__4Mauo .HexagonalMesh1_item__uupv2{background:#000;-webkit-clip-path:polygon(0 25%,0 75%,50% 100%,100% 75%,100% 25%,50% 0);clip-path:polygon(0 25%,0 75%,50% 100%,100% 75%,100% 25%,50% 0);display:inline-block;flex:0 0 auto;height:57.735px;margin:1px 1px -13.425px;width:50px;z-index:2}@keyframes HexagonalMesh1_change__31Nqy{to{filter:hue-rotate(1turn)}}.HexagonalMesh2_container__7Eq5-{cursor:pointer;flex:0 0 120%;font-size:0;height:580px;margin-bottom:-25px;overflow:hidden;position:relative;transform:translate(-10%,-25px)}.HexagonalMesh2_container__7Eq5-:before{content:"";float:left;height:100%;shape-outside:repeating-linear-gradient(#0000,#0000 80px,#000 0,#000 89.6px);width:25.5px}.HexagonalMesh2_container__7Eq5-:after{animation:HexagonalMesh2_change__unRwF 8s linear infinite;background:linear-gradient(45deg,#f44336,#ff9800,#ffe607,#09d7c4,#1cbed3,#1d8ae2,#bc24d6);bottom:0;content:"";left:0;-webkit-mask:radial-gradient(circle at var(--xPos) var(--yPos),#000 0,#000 50px,#0000 150px,#0000 150px);mask:radial-gradient(circle at var(--xPos) var(--yPos),#000 0,#000 50px,#0000 150px,#0000 150px);mix-blend-mode:darken;position:absolute;right:0;top:0;z-index:1}.HexagonalMesh2_container__7Eq5- .HexagonalMesh2_item__RBkZx{background:#000;-webkit-clip-path:polygon(0 25%,0 75%,50% 100%,100% 75%,100% 25%,50% 0);clip-path:polygon(0 25%,0 75%,50% 100%,100% 75%,100% 25%,50% 0);display:inline-block;flex:0 0 auto;height:57.735px;margin:1px 1px -13.425px;width:50px;z-index:2}@keyframes HexagonalMesh2_change__unRwF{to{filter:hue-rotate(1turn)}}.HexagonalMesh3_container__7cOnb{cursor:pointer;flex:0 0 120%;font-size:0;height:580px;margin-bottom:-25px;overflow:hidden;position:relative;transform:translate(-10%,-25px)}.HexagonalMesh3_container__7cOnb:before{content:"";float:left;height:100%;shape-outside:repeating-linear-gradient(#0000,#0000 80px,#000 0,#000 89.6px);width:25.5px}.HexagonalMesh3_container__7cOnb:after{animation:HexagonalMesh3_change__cxOZy 8s linear infinite;background:linear-gradient(45deg,#f44336,#ff9800,#ffe607,#09d7c4,#1cbed3,#1d8ae2,#bc24d6);bottom:0;content:"";left:0;mix-blend-mode:darken;pointer-events:none;position:absolute;right:0;top:0;z-index:1}.HexagonalMesh3_container__7cOnb .HexagonalMesh3_item__JnppT{background:#000;-webkit-clip-path:polygon(0 25%,0 75%,50% 100%,100% 75%,100% 25%,50% 0);clip-path:polygon(0 25%,0 75%,50% 100%,100% 75%,100% 25%,50% 0);display:inline-block;flex:0 0 auto;height:57.735px;margin:1px 1px -13.425px;transition:.6s;width:50px;z-index:2}.HexagonalMesh3_container__7cOnb .HexagonalMesh3_item__JnppT:hover{background:#fff;transition:0s}@keyframes HexagonalMesh3_change__cxOZy{to{filter:hue-rotate(1turn)}}.IconScroll_container__pHJbN{display:flex;flex-direction:column;height:500px;width:100%}.IconScroll_container__pHJbN .IconScroll_row__ueyux{display:flex;font-size:42px;position:relative;transform:rotate(-30deg) translate(-560px,-560px);white-space:nowrap;width:100%}.IconScroll_container__pHJbN .IconScroll_row__ueyux div{animation:IconScroll_animate1__nWCc8 150s linear infinite;animation-delay:-150s}.IconScroll_container__pHJbN .IconScroll_row__ueyux div:nth-child(2){animation:IconScroll_animate2__M45\+C 150s linear infinite;animation-delay:-75s}.IconScroll_container__pHJbN .IconScroll_row__ueyux div svg{cursor:default;padding:0 5px;transition:6s;-webkit-user-select:none;user-select:none}.IconScroll_container__pHJbN .IconScroll_row__ueyux div svg path{fill:#00000080}.IconScroll_container__pHJbN .IconScroll_row__ueyux div svg:hover{filter:drop-shadow(0 0 20px #0f0);transition:0s}.IconScroll_container__pHJbN .IconScroll_row__ueyux div svg:hover path{fill:lime}.IconScroll_container__pHJbN .IconScroll_row__ueyux:nth-child(2n) div{animation:IconScroll_animate3__CVZU5 150s linear infinite;animation-delay:-150s;font-size:1em;white-space:nowrap}.IconScroll_container__pHJbN .IconScroll_row__ueyux:nth-child(2n) div:nth-child(2){animation:IconScroll_animate4__csJ4n 150s linear infinite;animation-delay:-75s}@keyframes IconScroll_animate1__nWCc8{0%{transform:translateX(100%)}to{transform:translateX(-100%)}}@keyframes IconScroll_animate2__M45\+C{0%{transform:translateX(0)}to{transform:translateX(-200%)}}@keyframes IconScroll_animate3__CVZU5{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes IconScroll_animate4__csJ4n{0%{transform:translateX(-200%)}to{transform:translateX(0)}}.WipeSwitchover_container__zA\+wD{height:600px;position:relative;width:100%}.WipeSwitchover_container__zA\+wD svg{height:100%;left:0;position:absolute;top:0;width:100%}.WipeSwitchover_container__zA\+wD svg path{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:.5;stroke-dasharray:8 8;stroke-dashoffset:0px}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_mask1__efwWk path{transform:translate(46%,40%) scale(1500)}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_mask2__bTFbb path{transform:translate(10%) scale(1500)}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_mask3__Gaobg path{transform:translate(8%,10%) scale(2200)}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_mask4__ZERnA path{stroke-dasharray:7 11;transform:translate(10%,46%) scale(2500)}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_mask5__MkpDg path{stroke-width:1;stroke-dasharray:30 29;transform:translate(46%,32%) scale(710)}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page1__ex092{display:flex;flex:1;height:100%;left:0;position:absolute;top:0;width:100%}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page1__ex092 rect{height:100%;left:0;position:absolute;top:0;width:100%}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page1__ex092 image{height:340px;object-fit:cover;transform:translate(28%,16%);width:240px}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page1__ex092 text{font-size:56px;font-weight:600;letter-spacing:-.005em;line-height:1.07143;transform:translate(54%,50%)}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page2__S7sFb{display:flex;flex:1;height:100%;left:0;position:absolute;top:0;width:100%}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page2__S7sFb rect{height:100%;left:0;position:absolute;top:0;width:100%}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page2__S7sFb image{height:340px;object-fit:cover;transform:translate(28%,16%);width:240px}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page2__S7sFb text{font-size:56px;font-weight:600;letter-spacing:-.005em;line-height:1.07143;transform:translate(54%,50%)}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page3__JtV7t{display:flex;flex:1;height:100%;left:0;position:absolute;top:0;width:100%}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page3__JtV7t rect{height:100%;left:0;position:absolute;top:0;width:100%}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page3__JtV7t image{height:340px;object-fit:cover;transform:translate(28%,16%);width:240px}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page3__JtV7t text{font-size:56px;font-weight:600;letter-spacing:-.005em;line-height:1.07143;transform:translate(54%,50%)}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page4__9G6Y9{display:flex;flex:1;height:100%;left:0;position:absolute;top:0;width:100%}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page4__9G6Y9 rect{height:100%;left:0;position:absolute;top:0;width:100%}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page4__9G6Y9 image{height:340px;object-fit:cover;transform:translate(28%,16%);width:240px}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page4__9G6Y9 text{font-size:56px;font-weight:600;letter-spacing:-.005em;line-height:1.07143;transform:translate(54%,50%)}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page5__uBeX2{display:flex;flex:1;height:100%;left:0;position:absolute;top:0;width:100%}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page5__uBeX2 rect{height:100%;left:0;position:absolute;top:0;width:100%}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page5__uBeX2 image{height:340px;object-fit:cover;transform:translate(28%,16%);width:240px}.WipeSwitchover_container__zA\+wD svg .WipeSwitchover_page5__uBeX2 text{font-size:56px;font-weight:600;letter-spacing:-.005em;line-height:1.07143;transform:translate(54%,50%)}.WipeSwitchover_container__zA\+wD .WipeSwitchover_prevBtn__6vW6Q{align-items:center;background-color:#fff3;border-radius:40px;bottom:0;cursor:pointer;display:flex;flex:1;height:200px;justify-content:flex-end;left:-100px;margin:auto 0;position:absolute;top:0;transform:translateX(-100px);transition:.6s;width:200px}.WipeSwitchover_container__zA\+wD .WipeSwitchover_prevBtn__6vW6Q .WipeSwitchover_icon__Z3ryB{height:60px;margin-right:20px;width:60px}.WipeSwitchover_container__zA\+wD .WipeSwitchover_prevBtn__6vW6Q .WipeSwitchover_icon__Z3ryB .anticon{height:60px;position:relative;width:60px}.WipeSwitchover_container__zA\+wD .WipeSwitchover_prevBtn__6vW6Q .WipeSwitchover_icon__Z3ryB .anticon svg{height:60px;width:60px}.WipeSwitchover_container__zA\+wD .WipeSwitchover_prevBtn__6vW6Q .WipeSwitchover_icon__Z3ryB .anticon svg path{fill:#fff}.WipeSwitchover_container__zA\+wD .WipeSwitchover_nextBtn__sVZkG{align-items:center;background-color:#fff3;border-radius:40px;bottom:0;cursor:pointer;display:flex;flex:1;height:200px;margin:auto 0;position:absolute;right:-100px;top:0;transform:translateX(100px);transition:.6s;width:200px}.WipeSwitchover_container__zA\+wD .WipeSwitchover_nextBtn__sVZkG .WipeSwitchover_icon__Z3ryB{font-size:20px;height:60px;margin-left:20px;width:60px}.WipeSwitchover_container__zA\+wD .WipeSwitchover_nextBtn__sVZkG .WipeSwitchover_icon__Z3ryB .anticon{height:60px;position:relative;width:60px}.WipeSwitchover_container__zA\+wD .WipeSwitchover_nextBtn__sVZkG .WipeSwitchover_icon__Z3ryB .anticon svg{height:60px;width:60px}.WipeSwitchover_container__zA\+wD .WipeSwitchover_nextBtn__sVZkG .WipeSwitchover_icon__Z3ryB .anticon svg path{fill:#fff}.WipeSwitchover_container__zA\+wD:hover .WipeSwitchover_nextBtn__sVZkG,.WipeSwitchover_container__zA\+wD:hover .WipeSwitchover_prevBtn__6vW6Q{transform:translateX(0)}.AutoCompletePunctuation_container__EjYmN{align-items:center;display:flex;height:300px;justify-content:center;position:relative;width:100%}.AutoCompletePunctuation_container__EjYmN .AutoCompletePunctuation_content__PIXsh{align-items:center;display:flex;justify-content:space-between;padding-top:50px;width:940px}.AutoCompletePunctuation_container__EjYmN .AutoCompletePunctuation_content__PIXsh textarea{border:2px solid #333;box-sizing:border-box;display:flex;font-family:SourceHanSansCN-Regular!important;font-size:14px;line-height:22px;padding:10px;width:440px}.AutoCompletePunctuation_container__EjYmN .AutoCompletePunctuation_content__PIXsh textarea:active,.AutoCompletePunctuation_container__EjYmN .AutoCompletePunctuation_content__PIXsh textarea:focus{border:2px solid #4c78fc;outline:2px #4c78fc}.AutoCompletePunctuation_container__EjYmN .AutoCompletePunctuation_content__PIXsh div{background-color:#fff;border:2px solid #333;box-sizing:border-box;color:#222;display:flex;font-size:14px;height:130px;line-height:22px;padding:10px;width:440px}.AutoCompletePunctuation_container__EjYmN .AutoCompletePunctuation_content__PIXsh div:active,.AutoCompletePunctuation_container__EjYmN .AutoCompletePunctuation_content__PIXsh div:focus{border:2px solid #4c78fc;outline:2px #4c78fc}.StackedImages_container__Hnz74{align-content:center;align-items:center;display:flex;display:grid;flex-direction:column;height:440px;justify-content:center;place-content:center;position:relative;width:100%}.StackedImages_container__Hnz74 .StackedImages_content__bZLt4{--img-width:150px;--border-width:1px;align-items:flex-end;display:flex;filter:drop-shadow(0 0 var(--border-width) #fff) drop-shadow(0 0 var(--border-width) #fff) drop-shadow(0 0 #fff) drop-shadow(0 0 #fff);gap:12px;height:calc(var(--img-width)*1.7 + var(--border-width)*4);overflow:hidden;padding:calc(var(--border-width)*2);width:calc(100% + var(--border-width)*4)}.StackedImages_container__Hnz74 .StackedImages_content__bZLt4 img{--h:0px;--t:0px;aspect-ratio:1;border-bottom:calc(var(--img-width)) solid #fff;border-radius:50%;border-top:calc(var(--img-width)) solid #fff;cursor:pointer;height:var(--img-width);margin-bottom:calc(var(--img-width)*-1);margin-top:calc(var(--img-width)*-1);-webkit-mask:radial-gradient(0 0 at 0 0,#0000 0,#000 0) padding-box;translate:0 var(--t)}.StackedImages_container__Hnz74 .StackedImages_content__bZLt4 img:not(:last-child){margin-right:-30px;-webkit-mask:radial-gradient(50% 50% at calc(150% - 18px) calc(50% - var(--h)),#0000 calc(100% + 12px),#000 calc(101% + 12px)) padding-box}.StackedImages_container__Hnz74 .StackedImages_content__bZLt4 img:hover{--h:calc(var(--img-width)*-0.7);--t:calc(var(--img-width)*-0.7)}.StackedImages_container__Hnz74 .StackedImages_content__bZLt4 img[\:has\(\%2Bimg\:hover\)]{--h:calc(var(--img-width)*0.7)}.StackedImages_container__Hnz74 .StackedImages_content__bZLt4 img:has(+img:hover){--h:calc(var(--img-width)*0.7)}.InteractiveDesign_container__oK3No{align-items:center;background-image:linear-gradient(135deg,#224141,#162a2a);box-sizing:border-box;display:flex;flex:1;flex-direction:column;flex-wrap:wrap;min-height:100%;padding:4px 0;width:100%}.InteractiveDesign_container__oK3No .InteractiveDesign_box__\+Trza{background-image:linear-gradient(90deg,#04182c,#000c17,#04182c);border:3px solid rgba(53,162,253,.267);border-radius:10px;box-sizing:border-box;display:flex;margin:4px 2px;overflow:hidden;width:calc(100% - 8px)}
\ No newline at end of file
diff --git a/src/pages/html/InteractiveDesign/components/MouseHover3/card.module.scss b/src/pages/html/InteractiveDesign/components/MouseHover3/card.module.scss
index 16f0543..3763286 100644
--- a/src/pages/html/InteractiveDesign/components/MouseHover3/card.module.scss
+++ b/src/pages/html/InteractiveDesign/components/MouseHover3/card.module.scss
@@ -1,7 +1,7 @@
 .container {
   $borderRadius: 24px;
-  width: 300px;
-  height: 424px;
+  width: 280px;
+  height: 396px;
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/src/pages/html/InteractiveDesign/components/MouseHover3/index.module.scss b/src/pages/html/InteractiveDesign/components/MouseHover3/index.module.scss
index e4c6f42..45eaad1 100644
--- a/src/pages/html/InteractiveDesign/components/MouseHover3/index.module.scss
+++ b/src/pages/html/InteractiveDesign/components/MouseHover3/index.module.scss
@@ -6,8 +6,8 @@
   align-items: center;
 
   .content {
-    width: 70%;
-    max-width: 1300px;
+    width: 66%;
+    max-width: 1200px;
     min-width: 900px;
     display: flex;
     justify-content: space-between;
diff --git a/src/pages/html/InteractiveDesign/components/MouseHover3/index.tsx b/src/pages/html/InteractiveDesign/components/MouseHover3/index.tsx
index 2ee46e1..f2fab7b 100644
--- a/src/pages/html/InteractiveDesign/components/MouseHover3/index.tsx
+++ b/src/pages/html/InteractiveDesign/components/MouseHover3/index.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useCallback } from "react";
+import React from "react";
 import Card from "./Card";
 import car1 from "images/html/car1.png";
 import car2 from "images/html/car2.png";
diff --git a/src/pages/html/InteractiveDesign/components/MouseHover4/Card.tsx b/src/pages/html/InteractiveDesign/components/MouseHover4/Card.tsx
new file mode 100644
index 0000000..69f7a9d
--- /dev/null
+++ b/src/pages/html/InteractiveDesign/components/MouseHover4/Card.tsx
@@ -0,0 +1,115 @@
+import React, { useRef, useEffect, useCallback } from "react";
+import styles from "./card.module.scss";
+
+interface CardProps {
+  url: string;
+}
+
+const SPEED = 36;
+
+const Card = (props: CardProps) => {
+  const { url } = props;
+  const containerRef = useRef<HTMLDivElement>(null);
+  const frameId = useRef<number>(0);
+  const xRef = useRef<number>(0);
+  const yRef = useRef<number>(0);
+
+  const rotateLoop = () => {
+    if (containerRef.current) {
+      const { clientWidth, clientHeight } = containerRef.current;
+      let nextX = xRef.current;
+      let nextY = yRef.current;
+      if (yRef.current <= 0) {
+        if (xRef.current >= clientWidth) {
+          nextX = clientWidth;
+          nextY = SPEED;
+        } else if (nextX + SPEED > clientWidth) {
+          nextY = nextX + SPEED - clientWidth;
+          nextX = clientWidth;
+        } else {
+          nextX += SPEED;
+          nextY = 0;
+        }
+      } else if (xRef.current >= clientWidth) {
+        if (yRef.current >= clientHeight) {
+          nextX = clientWidth - SPEED;
+          nextY = clientHeight;
+        } else if (nextY + SPEED > clientHeight) {
+          nextX = clientWidth - (nextY + SPEED - clientHeight);
+          nextY = clientHeight;
+        } else {
+          nextX = clientWidth;
+          nextY += SPEED;
+        }
+      } else if (yRef.current >= clientHeight) {
+        if (xRef.current <= 0) {
+          nextX = 0;
+          nextY = clientHeight - SPEED;
+        } else if (nextX - SPEED < 0) {
+          nextY = clientHeight - (SPEED - nextX);
+          nextX = 0;
+        } else {
+          nextX -= SPEED;
+          nextY = clientHeight;
+        }
+      } else {
+        if (yRef.current <= 0) {
+          nextX = SPEED;
+          nextY = 0;
+        } else if (nextY - SPEED < 0) {
+          nextX = SPEED - nextY;
+          nextY = 0;
+        } else {
+          nextX = 0;
+          nextY = Math.max(nextY - SPEED, 0);
+        }
+      }
+      xRef.current = nextX;
+      yRef.current = nextY;
+      containerRef.current.setAttribute(
+        "style",
+        `--url: url("${url}"); --x: ${nextX}px; --y: ${nextY}px`
+      );
+      frameId.current = window.requestAnimationFrame(rotateLoop);
+    }
+  };
+
+  const onMouseEnter = useCallback(() => {
+    if (containerRef.current) {
+      frameId.current = window.requestAnimationFrame(rotateLoop);
+    }
+  }, []);
+
+  const onMouseLeave = useCallback(() => {
+    if (containerRef.current) {
+      frameId.current && window.cancelAnimationFrame(frameId.current);
+      containerRef.current.setAttribute(
+        "style",
+        `--url: url("${url}"); --x: 0px; --y: 0px`
+      );
+    }
+  }, []);
+
+  useEffect(() => {
+    if (containerRef.current && url) {
+      containerRef.current.setAttribute("style", `--url: url("${url}")`);
+    }
+
+    return () => {
+      frameId.current && window.cancelAnimationFrame(frameId.current);
+    };
+  }, []);
+
+  return (
+    <div
+      className={styles.container}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      ref={containerRef}
+    >
+      <div className={styles.content} />
+    </div>
+  );
+};
+
+export default Card;
diff --git a/src/pages/html/InteractiveDesign/components/MouseHover4/card.module.scss b/src/pages/html/InteractiveDesign/components/MouseHover4/card.module.scss
new file mode 100644
index 0000000..6cba612
--- /dev/null
+++ b/src/pages/html/InteractiveDesign/components/MouseHover4/card.module.scss
@@ -0,0 +1,62 @@
+.container {
+  $borderRadius: 24px;
+  width: 280px;
+  height: 396px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: $borderRadius;
+  cursor: pointer;
+  overflow: hidden;
+  position: relative;
+
+  &::before {
+    content: "";
+    opacity: 0;
+    position: absolute;
+    inset: 0;
+    border-radius: $borderRadius;
+    background: conic-gradient(#03a9f4, #e91e63, #9c27b0, #ff5722, #03a9f4);
+    mask: radial-gradient(
+      circle at var(--x) var(--y),
+      #000,
+      #000,
+      transparent,
+      transparent,
+      transparent
+    );
+  }
+
+  &:hover {
+    transform: scale(1.1);
+    &::before {
+      opacity: 1;
+    }
+  }
+
+  .content {
+    border-radius: $borderRadius;
+    overflow: hidden;
+    position: absolute;
+    inset: 3px;
+
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      background: var(--url);
+      background-size: cover;
+      background-position: center;
+      border-radius: $borderRadius;
+    }
+
+    &::before {
+      inset: 0;
+      filter: blur(20px);
+    }
+
+    &::after {
+      inset: 40px;
+    }
+  }
+}
diff --git a/src/pages/html/InteractiveDesign/components/MouseHover4/index.module.scss b/src/pages/html/InteractiveDesign/components/MouseHover4/index.module.scss
new file mode 100644
index 0000000..45eaad1
--- /dev/null
+++ b/src/pages/html/InteractiveDesign/components/MouseHover4/index.module.scss
@@ -0,0 +1,16 @@
+.container {
+  width: 100%;
+  height: 560px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .content {
+    width: 66%;
+    max-width: 1200px;
+    min-width: 900px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
diff --git a/src/pages/html/InteractiveDesign/components/MouseHover4/index.tsx b/src/pages/html/InteractiveDesign/components/MouseHover4/index.tsx
new file mode 100644
index 0000000..eec3982
--- /dev/null
+++ b/src/pages/html/InteractiveDesign/components/MouseHover4/index.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import Card from "./Card";
+import car1 from "images/html/car1.png";
+import car2 from "images/html/car2.png";
+import car3 from "images/html/car3.png";
+import styles from "./index.module.scss";
+
+const cardList = [car1, car2, car3];
+
+const MouseHover4 = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.content}>
+        {cardList.map((url: string, index: number) => (
+          <Card url={url} key={index} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default MouseHover4;
diff --git a/src/pages/html/InteractiveDesign/index.tsx b/src/pages/html/InteractiveDesign/index.tsx
index 8a992cc..ad9cf50 100644
--- a/src/pages/html/InteractiveDesign/index.tsx
+++ b/src/pages/html/InteractiveDesign/index.tsx
@@ -9,6 +9,7 @@ import DragShopping from "./components/DragShopping";
 import MouseHover1 from "./components/MouseHover1";
 import MouseHover2 from "./components/MouseHover2";
 import MouseHover3 from "./components/MouseHover3";
+import MouseHover4 from "./components/MouseHover4";
 import SlideButtonTab from "./components/SlideButtonTab";
 import FlipBook from "./components/FlipBook";
 import Switchs from "./components/Switchs";
@@ -34,6 +35,7 @@ const boxList = [
   { element: <MouseHover1 /> },
   { element: <MouseHover2 /> },
   { element: <MouseHover3 /> },
+  { element: <MouseHover4 /> },
   { element: <SlideButtonTab /> },
   { element: <FlipBook /> },
   { element: <Switchs /> },