From e50370e6ca69fec402cb8fb6545e482c34f06e9c Mon Sep 17 00:00:00 2001 From: River <1007941801@qq.com> Date: Fri, 20 Dec 2024 16:04:28 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=87=A0=E4=B8=AA=E8=83=8C?= =?UTF-8?q?=E6=99=AF=E5=9B=BE=E6=A1=88=E6=A1=88=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/155.js | 2 +- docs/main.js | 2 +- .../{155.fb21c6c1.css => 155.99c3b787.css} | 2 +- .../html/BackgroundEffect/index.module.scss | 40 +++++++++++++++++++ src/pages/html/BackgroundEffect/index.tsx | 2 +- 5 files changed, 44 insertions(+), 4 deletions(-) rename docs/styles/pages/{155.fb21c6c1.css => 155.99c3b787.css} (93%) diff --git a/docs/155.js b/docs/155.js index cdcb46b..1be48ae 100644 --- a/docs/155.js +++ b/docs/155.js @@ -1 +1 @@ -"use strict";(self.webpackChunkvisualization_collection=self.webpackChunkvisualization_collection||[]).push([[155],{60155:(c,_,g)=>{g.r(_),g.d(_,{default:()=>t});var f=g(96540),b=g(46935),e=g(60505);const o={container:"BackgroundEffect_container__u+IDp",box:"BackgroundEffect_box__k+mFh",bg1:"BackgroundEffect_bg1__klRoc",bg2:"BackgroundEffect_bg2__kPZ6M",bg3:"BackgroundEffect_bg3__82UV-",bg4:"BackgroundEffect_bg4__z430k",bg5:"BackgroundEffect_bg5__YkL6Y",bg6:"BackgroundEffect_bg6__zUQqR",bg7:"BackgroundEffect_bg7__thgM1",bg8:"BackgroundEffect_bg8__YdGMF",bg9:"BackgroundEffect_bg9__19R3E",bg10:"BackgroundEffect_bg10__htocf",bg11:"BackgroundEffect_bg11__CcLwl",bg12:"BackgroundEffect_bg12__eJxJM",bg13:"BackgroundEffect_bg13__mpoDJ",bg14:"BackgroundEffect_bg14__xnExu",bg15:"BackgroundEffect_bg15__F3Wrj",bg16:"BackgroundEffect_bg16__OBNeN",bg17:"BackgroundEffect_bg17__pb8bY",bg18:"BackgroundEffect_bg18__UKapy",bg19:"BackgroundEffect_bg19__obRK1",bg20:"BackgroundEffect_bg20__mnQic",bg21:"BackgroundEffect_bg21__qF-7f",bg22:"BackgroundEffect_bg22__Fcy+J",bg23:"BackgroundEffect_bg23__HJ4I5",bg24:"BackgroundEffect_bg24__qQdYv",bg25:"BackgroundEffect_bg25__h4HDo",bg26:"BackgroundEffect_bg26__PsQZC",bg27:"BackgroundEffect_bg27__U89Ls",bg28:"BackgroundEffect_bg28__2fShs",bg29:"BackgroundEffect_bg29__hiev7"};var n=g(74848);const{GridBox:a}=e.A,r=new Array(29).fill("1"),t=()=>{const{setScrollTop:c}=(0,b.S)();return(0,f.useEffect)((()=>{c(0)}),[]),(0,n.jsx)("div",{className:o.container,children:(0,n.jsx)(e.A,{differentScreenCols:[4,3,3,2,2],rowSpace:8,colSpace:8,children:r.map(((c,_)=>(0,n.jsx)(a,{children:(0,n.jsx)("div",{className:o.box,children:(0,n.jsx)("div",{className:o["bg".concat(_+1)]})})},_)))})})}}}]); \ No newline at end of file +"use strict";(self.webpackChunkvisualization_collection=self.webpackChunkvisualization_collection||[]).push([[155],{60155:(_,g,c)=>{c.r(g),c.d(g,{default:()=>t});var f=c(96540),b=c(46935),e=c(60505);const o={container:"BackgroundEffect_container__u+IDp",box:"BackgroundEffect_box__k+mFh",bg1:"BackgroundEffect_bg1__klRoc",bg2:"BackgroundEffect_bg2__kPZ6M",bg3:"BackgroundEffect_bg3__82UV-",bg4:"BackgroundEffect_bg4__z430k",bg5:"BackgroundEffect_bg5__YkL6Y",bg6:"BackgroundEffect_bg6__zUQqR",bg7:"BackgroundEffect_bg7__thgM1",bg8:"BackgroundEffect_bg8__YdGMF",bg9:"BackgroundEffect_bg9__19R3E",bg10:"BackgroundEffect_bg10__htocf",bg11:"BackgroundEffect_bg11__CcLwl",bg12:"BackgroundEffect_bg12__eJxJM",bg13:"BackgroundEffect_bg13__mpoDJ",bg14:"BackgroundEffect_bg14__xnExu",bg15:"BackgroundEffect_bg15__F3Wrj",bg16:"BackgroundEffect_bg16__OBNeN",bg17:"BackgroundEffect_bg17__pb8bY",bg18:"BackgroundEffect_bg18__UKapy",bg19:"BackgroundEffect_bg19__obRK1",bg20:"BackgroundEffect_bg20__mnQic",bg21:"BackgroundEffect_bg21__qF-7f",bg22:"BackgroundEffect_bg22__Fcy+J",bg23:"BackgroundEffect_bg23__HJ4I5",bg24:"BackgroundEffect_bg24__qQdYv",bg25:"BackgroundEffect_bg25__h4HDo",bg26:"BackgroundEffect_bg26__PsQZC",bg27:"BackgroundEffect_bg27__U89Ls",bg28:"BackgroundEffect_bg28__2fShs",bg29:"BackgroundEffect_bg29__hiev7",bg30:"BackgroundEffect_bg30__DvjX2",bg31:"BackgroundEffect_bg31__iXvbC",bg32:"BackgroundEffect_bg32__J+PvU",bg33:"BackgroundEffect_bg33__5wkj+",bg34:"BackgroundEffect_bg34__5h6kD"};var n=c(74848);const{GridBox:a}=e.A,r=new Array(34).fill("1"),t=()=>{const{setScrollTop:_}=(0,b.S)();return(0,f.useEffect)((()=>{_(0)}),[]),(0,n.jsx)("div",{className:o.container,children:(0,n.jsx)(e.A,{differentScreenCols:[4,3,3,2,2],rowSpace:8,colSpace:8,children:r.map(((_,g)=>(0,n.jsx)(a,{children:(0,n.jsx)("div",{className:o.box,children:(0,n.jsx)("div",{className:o["bg".concat(g+1)]})})},g)))})})}}}]); \ No newline at end of file diff --git a/docs/main.js b/docs/main.js index c14eef2..d5597bd 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{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||a12?n+"px":"12px",l.style.fontWeight=t.toString(),document.body.appendChild(l);for(let e=0,n=c.length;ea){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=i)&&Object.keys(r.O).every((e=>r.O[e](n[c])))?n.splice(c--,1):(s=!1,i0&&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{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{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);lr(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{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||a12?n+"px":"12px",l.style.fontWeight=t.toString(),document.body.appendChild(l);for(let e=0,n=c.length;ea){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=i)&&Object.keys(r.O).every((e=>r.O[e](n[c])))?n.splice(c--,1):(s=!1,i0&&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:"99c3b787",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{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{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);lr(45785)));c=r.O(c)})(); \ No newline at end of file diff --git a/docs/styles/pages/155.fb21c6c1.css b/docs/styles/pages/155.99c3b787.css similarity index 93% rename from docs/styles/pages/155.fb21c6c1.css rename to docs/styles/pages/155.99c3b787.css index db0ad1e..f90e333 100644 --- a/docs/styles/pages/155.fb21c6c1.css +++ b/docs/styles/pages/155.99c3b787.css @@ -1 +1 @@ -.BackgroundEffect_container__u\+IDp{background-image:linear-gradient(135deg,#224141,#162a2a);box-sizing:border-box;display:flex;min-height:100%;padding:2px 6px 4px;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_box__k\+mFh{align-items:center;border:3px solid rgba(53,162,253,.267);display:flex;height:420px;justify-content:center;overflow:hidden}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg1__klRoc{background-image:repeating-linear-gradient(107deg,#0d0d0d26,#0d0d0d26 0,#0000 0,#0000 1px,#0d0d0d26 0,#0d0d0d26 3px,#0000 0,#0000 4px,#0d0d0d26 0,#0d0d0d26 7px),repeating-linear-gradient(191deg,#0d0d0d26,#0d0d0d26 0,#0000 0,#0000 1px,#0d0d0d26 0,#0d0d0d26 3px,#0000 0,#0000 4px,#0d0d0d26 0,#0d0d0d26 7px),repeating-linear-gradient(0deg,#0d0d0d26,#0d0d0d26 0,#0000 0,#0000 1px,#0d0d0d26 0,#0d0d0d26 3px,#0000 0,#0000 4px,#0d0d0d26 0,#0d0d0d26 7px),repeating-linear-gradient(90deg,#0d0d0d26,#0d0d0d26 0,#0000 0,#0000 1px,#0d0d0d26 0,#0d0d0d26 3px,#0000 0,#0000 4px,#0d0d0d26 0,#0d0d0d26 7px),linear-gradient(90deg,#2d2d2d,#2d2d2d);height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg2__kPZ6M{background-color:#fff;background-image:linear-gradient(90deg,#42424280 50%,#0000 0);background-size:50px 100%;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg3__82UV-{background-color:#fff;background-image:linear-gradient(#42424280 50%,#0000 0),linear-gradient(90deg,#42424280 50%,#0000 0);background-size:50px 50px;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg4__z430k{background-color:#fff;background-image:repeating-linear-gradient(60deg,#42424280 5%,#0000 0,#0000 10%,#42424280 0,#42424280 15%);background-image:repeating-linear-gradient(60deg,#42424280 5%,#0000 0 10%,#42424280 0 15%);height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg5__YkL6Y{background-color:#fff;background-image:repeating-linear-gradient(60deg,#42424280 5%,#0000 10%,#42424280 15%);background-size:50px 50px;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg6__zUQqR{background-color:#55f;background-image:linear-gradient(#fff 2px,#0000 0),linear-gradient(90deg,#fff 2px,#0000 0),linear-gradient(#ffffff4d 1px,#0000 0),linear-gradient(90deg,#ffffff4d 1px,#0000 0);background-size:60px 60px,60px 60px,20px 20px,20px 20px;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg7__thgM1{background:repeating-linear-gradient(-45deg,#0000,#0000 25%,#f55 0,#f55 50%),repeating-linear-gradient(45deg,#0000,#0000 25%,#55f 0,#55f 50%),#efb;background-blend-mode:multiply;background-size:200px 200px;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg8__YdGMF{background-image:repeating-conic-gradient(#000 0,#000 5%,#fff 5%,#fff 10%);background-image:repeating-conic-gradient(#000 0 5%,#fff 5% 10%);height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg9__19R3E{background-color:#fff;background-image:repeating-conic-gradient(#000 0,#000 1%,#0000 0,#0000 2%);background-image:repeating-conic-gradient(#000 0 1%,#0000 0 2%);height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg10__htocf{background-image:repeating-conic-gradient(red 0deg,red 30deg,#ff0 30deg,#ff0 60deg,blue 60deg,blue 90deg);background-image:repeating-conic-gradient(red 0deg 30deg,#ff0 30deg 60deg,blue 60deg 90deg);height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg11__CcLwl{background:repeating-radial-gradient(#000 0,#000 .0001%,#fff 0,#fff .0002%) 60% 60%/1000px 1000px,repeating-conic-gradient(#000 0,#000 .0001%,#fff 0,#fff .0002%) 40% 40%/1000px 1000px;background:repeating-radial-gradient(#000 0 .0001%,#fff 0 .0002%) 60% 60%/1000px 1000px,repeating-conic-gradient(#000 0 .0001%,#fff 0 .0002%) 40% 40%/1000px 1000px;background-blend-mode:difference;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg12__eJxJM{background:repeating-conic-gradient(#bf4d28 0,#bf4d28 .00005%,#e1f5c4 0,#e1f5c4 .00017%) 0 0/5000px 4000px;background:repeating-conic-gradient(#bf4d28 0 .00005%,#e1f5c4 0 .00017%) 0 0/5000px 4000px;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg13__mpoDJ{background:linear-gradient(90deg,#0000 59px,#aec8ee 0),linear-gradient(180deg,#0000 59px,#aec8ee 0),conic-gradient(from 270deg at 5px 20px,#31c2ec 90deg,#0000 0deg),conic-gradient(from 270deg at 20px 5px,#31c2ec 90deg,#0000 0deg),#0e284d;background-position:0 0,0 0,-2.5px -10px,-10px -2.5px;background-size:60px 100%,100% 60px,60px 60px,60px 60px;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg14__xnExu{background:linear-gradient(90deg,#0000 59px,#aec8ee 0),linear-gradient(180deg,#0000 59px,#aec8ee 0),radial-gradient(closest-side at 7px 7px,#31c2ec 0,#31c2ec 7px,#0000 0,#0000 100%),#0e284d;background-position:0 0,0 0,-8px -8px;background-size:60px 100%,100% 60px,60px 60px;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg15__F3Wrj{background:linear-gradient(#0000 50%,rgba(0,0,0,.267) 0),conic-gradient(from -30deg at 90%,#fff 240deg,#0000 0),conic-gradient(from -30deg at 75%,#71e9a0 240deg,#0000 0),conic-gradient(from -30deg at 25%,#0000 240deg,#fff 0),conic-gradient(from -30deg at 40%,#fff 240deg,#2a6a9b 0);background-size:126px 84px;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg16__OBNeN{background:linear-gradient(-45deg,#0000 75%,#f67280 0),linear-gradient(45deg,#0000 75%,#f67280 0) 0 35px #355c7d;background-size:70px 70px;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg17__pb8bY{background:linear-gradient(225deg,#0000 3.125%,#987f69 0,#987f69 9.375%,#0000 0,#0000 78.125%,#987f69 0,#987f69 84.375%,#0000 0) 0 6px,linear-gradient(45deg,#fdf1cc 3.125%,#987f69 0,#987f69 9.375%,#fdf1cc 0,#fdf1cc 15.625%,#987f69 0,#987f69 21.875%,#fdf1cc 0,#fdf1cc 28.125%,#0000 0) 0 12px,linear-gradient(45deg,#fdf1cc 3.125%,#987f69 0,#987f69 9.375%,#fdf1cc 0,#fdf1cc 15.625%,#987f69 0,#987f69 21.875%,#fdf1cc 0,#fdf1cc 28.125%,#0000 0) -6px -6px,linear-gradient(225deg,#fdf1cc 3.125%,#987f69 0,#987f69 9.375%,#fdf1cc 0,#fdf1cc 15.625%,#987f69 0,#987f69 21.875%,#fdf1cc 0,#fdf1cc 28.125%,#0000 0) 12px 0,linear-gradient(225deg,#fdf1cc 3.125%,#987f69 0,#987f69 9.375%,#fdf1cc 0,#fdf1cc 15.625%,#987f69 0,#987f69 21.875%,#fdf1cc 0,#fdf1cc 28.125%,#0000 0) 6px 12px,repeating-linear-gradient(-45deg,#fdf1cc -3.125%,#fdf1cc 3.125%,#987f69 0,#987f69 9.375%);background:linear-gradient(225deg,#0000 3.125%,#987f69 0 9.375%,#0000 0 78.125%,#987f69 0 84.375%,#0000 0) 0 6px,linear-gradient(45deg,#fdf1cc 3.125%,#987f69 0 9.375%,#fdf1cc 0 15.625%,#987f69 0 21.875%,#fdf1cc 0 28.125%,#0000 0) 0 12px,linear-gradient(45deg,#fdf1cc 3.125%,#987f69 0 9.375%,#fdf1cc 0 15.625%,#987f69 0 21.875%,#fdf1cc 0 28.125%,#0000 0) -6px -6px,linear-gradient(225deg,#fdf1cc 3.125%,#987f69 0 9.375%,#fdf1cc 0 15.625%,#987f69 0 21.875%,#fdf1cc 0 28.125%,#0000 0) 12px 0,linear-gradient(225deg,#fdf1cc 3.125%,#987f69 0 9.375%,#fdf1cc 0 15.625%,#987f69 0 21.875%,#fdf1cc 0 28.125%,#0000 0) 6px 12px,repeating-linear-gradient(-45deg,#fdf1cc -3.125% 3.125%,#987f69 0 9.375%);background-size:24px 24px;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg18__UKapy{background:repeating-linear-gradient(60deg,#fff3,#fff3 2px,#000 0,#000 3px,#0000 0,#0000 20px),repeating-linear-gradient(300deg,#000,#000 1px,#fff3 0,#fff3 3px,#0000 0,#0000 20px),linear-gradient(45deg,#0003,#40404033 15%,#4d4d4d33 40%,#26262633 60%,#1a1a1a33 80%,#03030333),linear-gradient(180deg,#324d67,#1c2b4a 35%,#151837 65%,#060d13);height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg19__obRK1{background:repeating-linear-gradient(0deg,#ffffff80,#fff3 2px,#0003 0,#00000080 10px,#ffffff40 0,#ffffff4d 0,#0000 11px,#0000 25px),linear-gradient(135deg,#4c5e6740,#8f97a340 15%,#87b0c540 40%,#80808040 60%,#6d747840 80%,#406a7740),linear-gradient(135deg,#26282480,#33402680 0,#6d7e6780 30%,#55625080 50%,#72786d80 70%,#4d584180),linear-gradient(180deg,#3a5978,#23365c 35%,#1c204a 65%,#0d1a26);height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg20__mnQic{background:repeating-linear-gradient(-1deg,#0000001a,#0000001a 1px,#ffffff1a 0,#ffffff1a 2px,#0000 0,#0000 10px),repeating-linear-gradient(1deg,#0000,#0000 7px,#ffffff1a 0,#ffffff1a 8px),repeating-linear-gradient(0deg,#0000,#0000 12px,#fff3 0,#ffffff1a 13px),repeating-linear-gradient(0deg,#0000,#0000 17px,#0006 0,#0006 18px),linear-gradient(135deg,#1d293080,#1c3b4a80 0,#506d9580 30%,#3e557480 50%,#56788f80 70%,#32556780),linear-gradient(180deg,#55585e,#363949 35%,#2d2b3b 65%,#14181f);height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg21__qF-7f{background:repeating-linear-gradient(-1deg,#0000001a,#0000001a 1px,#ffffff1a 0,#ffffff1a 2px,#0000 0,#0000 10px),repeating-linear-gradient(1deg,#0000,#0000 7px,#ffffff1a 0,#ffffff1a 8px),repeating-linear-gradient(0deg,#0000,#0000 12px,#fff3 0,#ffffff1a 13px),repeating-linear-gradient(0deg,#0000,#0000 17px,#0006 0,#0006 18px),linear-gradient(135deg,#315981,#1f5093 0,#3473b2 25%,#385e94 50%,#24628f 75%,#2a4d6f);height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg22__Fcy\+J{background:radial-gradient(circle farthest-side at 50% 50%,#2c2c21 0,#2c2c21 15%,#0000 0,#0000 100%),radial-gradient(circle farthest-side at 50% 50%,#2c2c21 0,#2c2c21 15%,#0000 0,#0000 100%),radial-gradient(circle farthest-side at 50% 50%,#fff6 0,#fff6 15%,#0000 0,#0000 100%),radial-gradient(circle farthest-side at 50% 50%,#fff6 0,#fff6 15%,#0000 0,#0000 100%),linear-gradient(145deg,#2c2c2180,#6b705c80 15%,#9b9b4b80 40%,#4d4d4d80 60%,#42433d80 80%,#35331d80),linear-gradient(50deg,#2c2c21,#3e4026 10%,#575c3d 25%,#30301d 40%,#565841 60%,#2d301d 70%,#404224 90%,#363617);background-position:0 0,20px 20px,0 -2px,20px 22px,0 0,0 0;background-size:40px 40px,40px 40px,40px 40px,40px 40px,100% 100%,100% 100%;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg23__HJ4I5{background:linear-gradient(120deg,#5c0a0a80,#990d0080 15%,#b31e0080 25%,#ff400080 35%,#c7460580 40%,#a5270d80 50%,#8e160b80 65%,#8e160b80 70%,#7c030380 85%,#66000080),linear-gradient(60deg,#16040480,#2e090580 10%,#59190d80 25%,#17030380 40%,#57150f80 60%,#17060380 70%,#2f070480 90%,#19010180),linear-gradient(120deg,#333,#18191b 35%,#0c0c0d 65%,#000);height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg24__qQdYv{background:radial-gradient(ellipse 150% 150% at 80% 80%,#0000 40%,#ffffff40 60%,#0000 100%),radial-gradient(ellipse 150% 150% at 20% 20%,#0000 40%,#00000040 60%,#0000 100%),radial-gradient(ellipse 100% 100% at 50% 50%,#0000 25%,#00000080 75%),linear-gradient(100deg,#60202040,#9c211640 15%,#b3331a40 25%,#e2613640 35%,#bd5a2840 40%,#9e412e40 50%,#8a302840 65%,#8a302840 70%,#7e1b1b40 85%,#70101040),linear-gradient(180deg,#2b333b80,#13172080 35%,#0a0a1080 65%,#00000080),linear-gradient(180deg,#0f618a,#229bc3 7%,#75f0f0 25%,#3ff 35%,#3cc2dd 55%,#0086b3 75%,#0a5276);height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg25__h4HDo{background:radial-gradient(farthest-side at -33.33% 50%,#0000 52%,#170409 54%,#170409 57%,#0000 59%) 0 50px,radial-gradient(farthest-side at 50% 133.33%,#0000 52%,#170409 54%,#170409 57%,#0000 59%) 50px 0,radial-gradient(farthest-side at 133.33% 50%,#0000 52%,#170409 54%,#170409 57%,#0000 59%),radial-gradient(farthest-side at 50% -33.33%,#0000 52%,#170409 54%,#170409 57%,#0000 59%),#67917a;background:radial-gradient(farthest-side at -33.33% 50%,#0000 52%,#170409 54% 57%,#0000 59%) 0 50px,radial-gradient(farthest-side at 50% 133.33%,#0000 52%,#170409 54% 57%,#0000 59%) 50px 0,radial-gradient(farthest-side at 133.33% 50%,#0000 52%,#170409 54% 57%,#0000 59%),radial-gradient(farthest-side at 50% -33.33%,#0000 52%,#170409 54% 57%,#0000 59%),#67917a;background-size:21.4270409256px 100px,100px 21.4270409256px;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg26__PsQZC{background:conic-gradient(at 20px calc(100% - 20px),#0000 270deg,#c02942 0) 35px 0,linear-gradient(#53777a 20px,#0000 0) 0 15px,conic-gradient(at 20px calc(100% - 20px),#0000 90deg,#53777a 0,#53777a 180deg,#c02942 0),#ecd078;background:conic-gradient(at 20px calc(100% - 20px),#0000 270deg,#c02942 0) 35px 0,linear-gradient(#53777a 20px,#0000 0) 0 15px,conic-gradient(at 20px calc(100% - 20px),#0000 90deg,#53777a 0 180deg,#c02942 0),#ecd078;background-size:70px 70px;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg27__U89Ls{background:conic-gradient(at 62.5% 12.5%,#72e21f 25%,#0000 0) -5px 20px,conic-gradient(at 62.5% 12.5%,#72e21f 25%,#0000 0) -15px 10px,conic-gradient(at 87.5% 62.5%,#72e21f 25%,#0000 0) 15px 10px,conic-gradient(at 87.5% 62.5%,#72e21f 25%,#0000 0) -5px 0,conic-gradient(at 25% 12.5%,#72e21f 25%,#0000 0) 0 -10px,conic-gradient(at 25% 12.5%,#72e21f 25%,#0000 0) -10px 0,conic-gradient(at 87.5% 87.5%,#72e21f 25%,#0000 0) 5px 0 #044012;background-size:40px 40px;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg28__2fShs{background:radial-gradient(27% 29% at right,#0000 83%,#b09f79 85%,#b09f79 99%,#0000 101%) 10px 20px,radial-gradient(27% 29% at left,#0000 83%,#b09f79 85%,#b09f79 99%,#0000 101%) -10px 20px,radial-gradient(29% 27% at top,#0000 83%,#b09f79 85%,#b09f79 99%,#0000 101%) 0 10px,radial-gradient(29% 27% at bottom,#0000 83%,#b09f79 85%,#b09f79 99%,#0000 101%) 0 -10px #476074;background:radial-gradient(27% 29% at right,#0000 83%,#b09f79 85% 99%,#0000 101%) 10px 20px,radial-gradient(27% 29% at left,#0000 83%,#b09f79 85% 99%,#0000 101%) -10px 20px,radial-gradient(29% 27% at top,#0000 83%,#b09f79 85% 99%,#0000 101%) 0 10px,radial-gradient(29% 27% at bottom,#0000 83%,#b09f79 85% 99%,#0000 101%) 0 -10px #476074;background-size:40px 40px;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg29__hiev7{background:radial-gradient(28.968px at 0 0,#0000 calc(100% - 5px),#615375 calc(100% - 4px) calc(100% - 1px),#0000) 28.968px 28.968px,radial-gradient(12px at 0 0,#0000 calc(100% - 5px),#615375 calc(100% - 4px) calc(100% - 1px),#0000) 16.968px 16.968px,radial-gradient(28.968px at 0 100%,#0000 calc(100% - 5px),#615375 calc(100% - 4px) calc(100% - 1px),#0000) 0 16.968px,radial-gradient(12px at 0 100%,#0000 calc(100% - 5px),#615375 calc(100% - 4px) calc(100% - 1px),#0000) -12px 28.968px,radial-gradient(28.968px at 100% 0,#0000 calc(100% - 5px),#615375 calc(100% - 4px) calc(100% - 1px),#0000) 16.968px 0,radial-gradient(12px at 100% 0,#0000 calc(100% - 5px),#615375 calc(100% - 4px) calc(100% - 1px),#0000) 28.968px -12px,radial-gradient(28.968px at 100% 100%,#0000 calc(100% - 5px),#615375 calc(100% - 4px) calc(100% - 1px),#0000) -12px -12px,radial-gradient(12px at 100% 100%,#0000 calc(100% - 5px),#615375 calc(100% - 4px) calc(100% - 1px),#0000) #8eb2c5;background-size:57.936px 57.936px;height:100%;width:100%} \ No newline at end of file +.BackgroundEffect_container__u\+IDp{background-image:linear-gradient(135deg,#224141,#162a2a);box-sizing:border-box;display:flex;min-height:100%;padding:2px 6px 4px;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_box__k\+mFh{align-items:center;border:3px solid rgba(53,162,253,.267);display:flex;height:420px;justify-content:center;overflow:hidden}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg1__klRoc{background-image:repeating-linear-gradient(107deg,#0d0d0d26,#0d0d0d26 0,#0000 0,#0000 1px,#0d0d0d26 0,#0d0d0d26 3px,#0000 0,#0000 4px,#0d0d0d26 0,#0d0d0d26 7px),repeating-linear-gradient(191deg,#0d0d0d26,#0d0d0d26 0,#0000 0,#0000 1px,#0d0d0d26 0,#0d0d0d26 3px,#0000 0,#0000 4px,#0d0d0d26 0,#0d0d0d26 7px),repeating-linear-gradient(0deg,#0d0d0d26,#0d0d0d26 0,#0000 0,#0000 1px,#0d0d0d26 0,#0d0d0d26 3px,#0000 0,#0000 4px,#0d0d0d26 0,#0d0d0d26 7px),repeating-linear-gradient(90deg,#0d0d0d26,#0d0d0d26 0,#0000 0,#0000 1px,#0d0d0d26 0,#0d0d0d26 3px,#0000 0,#0000 4px,#0d0d0d26 0,#0d0d0d26 7px),linear-gradient(90deg,#2d2d2d,#2d2d2d);height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg2__kPZ6M{background-color:#fff;background-image:linear-gradient(90deg,#42424280 50%,#0000 0);background-size:50px 100%;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg3__82UV-{background-color:#fff;background-image:linear-gradient(#42424280 50%,#0000 0),linear-gradient(90deg,#42424280 50%,#0000 0);background-size:50px 50px;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg4__z430k{background-color:#fff;background-image:repeating-linear-gradient(60deg,#42424280 5%,#0000 0,#0000 10%,#42424280 0,#42424280 15%);background-image:repeating-linear-gradient(60deg,#42424280 5%,#0000 0 10%,#42424280 0 15%);height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg5__YkL6Y{background-color:#fff;background-image:repeating-linear-gradient(60deg,#42424280 5%,#0000 10%,#42424280 15%);background-size:50px 50px;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg6__zUQqR{background-color:#55f;background-image:linear-gradient(#fff 2px,#0000 0),linear-gradient(90deg,#fff 2px,#0000 0),linear-gradient(#ffffff4d 1px,#0000 0),linear-gradient(90deg,#ffffff4d 1px,#0000 0);background-size:60px 60px,60px 60px,20px 20px,20px 20px;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg7__thgM1{background:repeating-linear-gradient(-45deg,#0000,#0000 25%,#f55 0,#f55 50%),repeating-linear-gradient(45deg,#0000,#0000 25%,#55f 0,#55f 50%),#efb;background-blend-mode:multiply;background-size:200px 200px;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg8__YdGMF{background-image:repeating-conic-gradient(#000 0,#000 5%,#fff 5%,#fff 10%);background-image:repeating-conic-gradient(#000 0 5%,#fff 5% 10%);height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg9__19R3E{background-color:#fff;background-image:repeating-conic-gradient(#000 0,#000 1%,#0000 0,#0000 2%);background-image:repeating-conic-gradient(#000 0 1%,#0000 0 2%);height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg10__htocf{background-image:repeating-conic-gradient(red 0deg,red 30deg,#ff0 30deg,#ff0 60deg,blue 60deg,blue 90deg);background-image:repeating-conic-gradient(red 0deg 30deg,#ff0 30deg 60deg,blue 60deg 90deg);height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg11__CcLwl{background:repeating-radial-gradient(#000 0,#000 .0001%,#fff 0,#fff .0002%) 60% 60%/1000px 1000px,repeating-conic-gradient(#000 0,#000 .0001%,#fff 0,#fff .0002%) 40% 40%/1000px 1000px;background:repeating-radial-gradient(#000 0 .0001%,#fff 0 .0002%) 60% 60%/1000px 1000px,repeating-conic-gradient(#000 0 .0001%,#fff 0 .0002%) 40% 40%/1000px 1000px;background-blend-mode:difference;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg12__eJxJM{background:repeating-conic-gradient(#bf4d28 0,#bf4d28 .00005%,#e1f5c4 0,#e1f5c4 .00017%) 0 0/5000px 4000px;background:repeating-conic-gradient(#bf4d28 0 .00005%,#e1f5c4 0 .00017%) 0 0/5000px 4000px;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg13__mpoDJ{background:linear-gradient(90deg,#0000 59px,#aec8ee 0),linear-gradient(180deg,#0000 59px,#aec8ee 0),conic-gradient(from 270deg at 5px 20px,#31c2ec 90deg,#0000 0deg),conic-gradient(from 270deg at 20px 5px,#31c2ec 90deg,#0000 0deg),#0e284d;background-position:0 0,0 0,-2.5px -10px,-10px -2.5px;background-size:60px 100%,100% 60px,60px 60px,60px 60px;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg14__xnExu{background:linear-gradient(90deg,#0000 59px,#aec8ee 0),linear-gradient(180deg,#0000 59px,#aec8ee 0),radial-gradient(closest-side at 7px 7px,#31c2ec 0,#31c2ec 7px,#0000 0,#0000 100%),#0e284d;background-position:0 0,0 0,-8px -8px;background-size:60px 100%,100% 60px,60px 60px;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg15__F3Wrj{background:linear-gradient(#0000 50%,rgba(0,0,0,.267) 0),conic-gradient(from -30deg at 90%,#fff 240deg,#0000 0),conic-gradient(from -30deg at 75%,#71e9a0 240deg,#0000 0),conic-gradient(from -30deg at 25%,#0000 240deg,#fff 0),conic-gradient(from -30deg at 40%,#fff 240deg,#2a6a9b 0);background-size:126px 84px;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg16__OBNeN{background:linear-gradient(-45deg,#0000 75%,#f67280 0),linear-gradient(45deg,#0000 75%,#f67280 0) 0 35px #355c7d;background-size:70px 70px;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg17__pb8bY{background:linear-gradient(225deg,#0000 3.125%,#987f69 0,#987f69 9.375%,#0000 0,#0000 78.125%,#987f69 0,#987f69 84.375%,#0000 0) 0 6px,linear-gradient(45deg,#fdf1cc 3.125%,#987f69 0,#987f69 9.375%,#fdf1cc 0,#fdf1cc 15.625%,#987f69 0,#987f69 21.875%,#fdf1cc 0,#fdf1cc 28.125%,#0000 0) 0 12px,linear-gradient(45deg,#fdf1cc 3.125%,#987f69 0,#987f69 9.375%,#fdf1cc 0,#fdf1cc 15.625%,#987f69 0,#987f69 21.875%,#fdf1cc 0,#fdf1cc 28.125%,#0000 0) -6px -6px,linear-gradient(225deg,#fdf1cc 3.125%,#987f69 0,#987f69 9.375%,#fdf1cc 0,#fdf1cc 15.625%,#987f69 0,#987f69 21.875%,#fdf1cc 0,#fdf1cc 28.125%,#0000 0) 12px 0,linear-gradient(225deg,#fdf1cc 3.125%,#987f69 0,#987f69 9.375%,#fdf1cc 0,#fdf1cc 15.625%,#987f69 0,#987f69 21.875%,#fdf1cc 0,#fdf1cc 28.125%,#0000 0) 6px 12px,repeating-linear-gradient(-45deg,#fdf1cc -3.125%,#fdf1cc 3.125%,#987f69 0,#987f69 9.375%);background:linear-gradient(225deg,#0000 3.125%,#987f69 0 9.375%,#0000 0 78.125%,#987f69 0 84.375%,#0000 0) 0 6px,linear-gradient(45deg,#fdf1cc 3.125%,#987f69 0 9.375%,#fdf1cc 0 15.625%,#987f69 0 21.875%,#fdf1cc 0 28.125%,#0000 0) 0 12px,linear-gradient(45deg,#fdf1cc 3.125%,#987f69 0 9.375%,#fdf1cc 0 15.625%,#987f69 0 21.875%,#fdf1cc 0 28.125%,#0000 0) -6px -6px,linear-gradient(225deg,#fdf1cc 3.125%,#987f69 0 9.375%,#fdf1cc 0 15.625%,#987f69 0 21.875%,#fdf1cc 0 28.125%,#0000 0) 12px 0,linear-gradient(225deg,#fdf1cc 3.125%,#987f69 0 9.375%,#fdf1cc 0 15.625%,#987f69 0 21.875%,#fdf1cc 0 28.125%,#0000 0) 6px 12px,repeating-linear-gradient(-45deg,#fdf1cc -3.125% 3.125%,#987f69 0 9.375%);background-size:24px 24px;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg18__UKapy{background:repeating-linear-gradient(60deg,#fff3,#fff3 2px,#000 0,#000 3px,#0000 0,#0000 20px),repeating-linear-gradient(300deg,#000,#000 1px,#fff3 0,#fff3 3px,#0000 0,#0000 20px),linear-gradient(45deg,#0003,#40404033 15%,#4d4d4d33 40%,#26262633 60%,#1a1a1a33 80%,#03030333),linear-gradient(180deg,#324d67,#1c2b4a 35%,#151837 65%,#060d13);height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg19__obRK1{background:repeating-linear-gradient(0deg,#ffffff80,#fff3 2px,#0003 0,#00000080 10px,#ffffff40 0,#ffffff4d 0,#0000 11px,#0000 25px),linear-gradient(135deg,#4c5e6740,#8f97a340 15%,#87b0c540 40%,#80808040 60%,#6d747840 80%,#406a7740),linear-gradient(135deg,#26282480,#33402680 0,#6d7e6780 30%,#55625080 50%,#72786d80 70%,#4d584180),linear-gradient(180deg,#3a5978,#23365c 35%,#1c204a 65%,#0d1a26);height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg20__mnQic{background:repeating-linear-gradient(-1deg,#0000001a,#0000001a 1px,#ffffff1a 0,#ffffff1a 2px,#0000 0,#0000 10px),repeating-linear-gradient(1deg,#0000,#0000 7px,#ffffff1a 0,#ffffff1a 8px),repeating-linear-gradient(0deg,#0000,#0000 12px,#fff3 0,#ffffff1a 13px),repeating-linear-gradient(0deg,#0000,#0000 17px,#0006 0,#0006 18px),linear-gradient(135deg,#1d293080,#1c3b4a80 0,#506d9580 30%,#3e557480 50%,#56788f80 70%,#32556780),linear-gradient(180deg,#55585e,#363949 35%,#2d2b3b 65%,#14181f);height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg21__qF-7f{background:repeating-linear-gradient(-1deg,#0000001a,#0000001a 1px,#ffffff1a 0,#ffffff1a 2px,#0000 0,#0000 10px),repeating-linear-gradient(1deg,#0000,#0000 7px,#ffffff1a 0,#ffffff1a 8px),repeating-linear-gradient(0deg,#0000,#0000 12px,#fff3 0,#ffffff1a 13px),repeating-linear-gradient(0deg,#0000,#0000 17px,#0006 0,#0006 18px),linear-gradient(135deg,#315981,#1f5093 0,#3473b2 25%,#385e94 50%,#24628f 75%,#2a4d6f);height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg22__Fcy\+J{background:radial-gradient(circle farthest-side at 50% 50%,#2c2c21 0,#2c2c21 15%,#0000 0,#0000 100%),radial-gradient(circle farthest-side at 50% 50%,#2c2c21 0,#2c2c21 15%,#0000 0,#0000 100%),radial-gradient(circle farthest-side at 50% 50%,#fff6 0,#fff6 15%,#0000 0,#0000 100%),radial-gradient(circle farthest-side at 50% 50%,#fff6 0,#fff6 15%,#0000 0,#0000 100%),linear-gradient(145deg,#2c2c2180,#6b705c80 15%,#9b9b4b80 40%,#4d4d4d80 60%,#42433d80 80%,#35331d80),linear-gradient(50deg,#2c2c21,#3e4026 10%,#575c3d 25%,#30301d 40%,#565841 60%,#2d301d 70%,#404224 90%,#363617);background-position:0 0,20px 20px,0 -2px,20px 22px,0 0,0 0;background-size:40px 40px,40px 40px,40px 40px,40px 40px,100% 100%,100% 100%;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg23__HJ4I5{background:linear-gradient(120deg,#5c0a0a80,#990d0080 15%,#b31e0080 25%,#ff400080 35%,#c7460580 40%,#a5270d80 50%,#8e160b80 65%,#8e160b80 70%,#7c030380 85%,#66000080),linear-gradient(60deg,#16040480,#2e090580 10%,#59190d80 25%,#17030380 40%,#57150f80 60%,#17060380 70%,#2f070480 90%,#19010180),linear-gradient(120deg,#333,#18191b 35%,#0c0c0d 65%,#000);height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg24__qQdYv{background:radial-gradient(ellipse 150% 150% at 80% 80%,#0000 40%,#ffffff40 60%,#0000 100%),radial-gradient(ellipse 150% 150% at 20% 20%,#0000 40%,#00000040 60%,#0000 100%),radial-gradient(ellipse 100% 100% at 50% 50%,#0000 25%,#00000080 75%),linear-gradient(100deg,#60202040,#9c211640 15%,#b3331a40 25%,#e2613640 35%,#bd5a2840 40%,#9e412e40 50%,#8a302840 65%,#8a302840 70%,#7e1b1b40 85%,#70101040),linear-gradient(180deg,#2b333b80,#13172080 35%,#0a0a1080 65%,#00000080),linear-gradient(180deg,#0f618a,#229bc3 7%,#75f0f0 25%,#3ff 35%,#3cc2dd 55%,#0086b3 75%,#0a5276);height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg25__h4HDo{background:radial-gradient(farthest-side at -33.33% 50%,#0000 52%,#170409 54%,#170409 57%,#0000 59%) 0 50px,radial-gradient(farthest-side at 50% 133.33%,#0000 52%,#170409 54%,#170409 57%,#0000 59%) 50px 0,radial-gradient(farthest-side at 133.33% 50%,#0000 52%,#170409 54%,#170409 57%,#0000 59%),radial-gradient(farthest-side at 50% -33.33%,#0000 52%,#170409 54%,#170409 57%,#0000 59%),#67917a;background:radial-gradient(farthest-side at -33.33% 50%,#0000 52%,#170409 54% 57%,#0000 59%) 0 50px,radial-gradient(farthest-side at 50% 133.33%,#0000 52%,#170409 54% 57%,#0000 59%) 50px 0,radial-gradient(farthest-side at 133.33% 50%,#0000 52%,#170409 54% 57%,#0000 59%),radial-gradient(farthest-side at 50% -33.33%,#0000 52%,#170409 54% 57%,#0000 59%),#67917a;background-size:21.4270409256px 100px,100px 21.4270409256px;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg26__PsQZC{background:conic-gradient(at 20px calc(100% - 20px),#0000 270deg,#c02942 0) 35px 0,linear-gradient(#53777a 20px,#0000 0) 0 15px,conic-gradient(at 20px calc(100% - 20px),#0000 90deg,#53777a 0,#53777a 180deg,#c02942 0),#ecd078;background:conic-gradient(at 20px calc(100% - 20px),#0000 270deg,#c02942 0) 35px 0,linear-gradient(#53777a 20px,#0000 0) 0 15px,conic-gradient(at 20px calc(100% - 20px),#0000 90deg,#53777a 0 180deg,#c02942 0),#ecd078;background-size:70px 70px;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg27__U89Ls{background:conic-gradient(at 62.5% 12.5%,#72e21f 25%,#0000 0) -5px 20px,conic-gradient(at 62.5% 12.5%,#72e21f 25%,#0000 0) -15px 10px,conic-gradient(at 87.5% 62.5%,#72e21f 25%,#0000 0) 15px 10px,conic-gradient(at 87.5% 62.5%,#72e21f 25%,#0000 0) -5px 0,conic-gradient(at 25% 12.5%,#72e21f 25%,#0000 0) 0 -10px,conic-gradient(at 25% 12.5%,#72e21f 25%,#0000 0) -10px 0,conic-gradient(at 87.5% 87.5%,#72e21f 25%,#0000 0) 5px 0 #044012;background-size:40px 40px;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg28__2fShs{background:radial-gradient(27% 29% at right,#0000 83%,#b09f79 85%,#b09f79 99%,#0000 101%) 10px 20px,radial-gradient(27% 29% at left,#0000 83%,#b09f79 85%,#b09f79 99%,#0000 101%) -10px 20px,radial-gradient(29% 27% at top,#0000 83%,#b09f79 85%,#b09f79 99%,#0000 101%) 0 10px,radial-gradient(29% 27% at bottom,#0000 83%,#b09f79 85%,#b09f79 99%,#0000 101%) 0 -10px #476074;background:radial-gradient(27% 29% at right,#0000 83%,#b09f79 85% 99%,#0000 101%) 10px 20px,radial-gradient(27% 29% at left,#0000 83%,#b09f79 85% 99%,#0000 101%) -10px 20px,radial-gradient(29% 27% at top,#0000 83%,#b09f79 85% 99%,#0000 101%) 0 10px,radial-gradient(29% 27% at bottom,#0000 83%,#b09f79 85% 99%,#0000 101%) 0 -10px #476074;background-size:40px 40px;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg29__hiev7{background:radial-gradient(28.968px at 0 0,#0000 calc(100% - 5px),#615375 calc(100% - 4px) calc(100% - 1px),#0000) 28.968px 28.968px,radial-gradient(12px at 0 0,#0000 calc(100% - 5px),#615375 calc(100% - 4px) calc(100% - 1px),#0000) 16.968px 16.968px,radial-gradient(28.968px at 0 100%,#0000 calc(100% - 5px),#615375 calc(100% - 4px) calc(100% - 1px),#0000) 0 16.968px,radial-gradient(12px at 0 100%,#0000 calc(100% - 5px),#615375 calc(100% - 4px) calc(100% - 1px),#0000) -12px 28.968px,radial-gradient(28.968px at 100% 0,#0000 calc(100% - 5px),#615375 calc(100% - 4px) calc(100% - 1px),#0000) 16.968px 0,radial-gradient(12px at 100% 0,#0000 calc(100% - 5px),#615375 calc(100% - 4px) calc(100% - 1px),#0000) 28.968px -12px,radial-gradient(28.968px at 100% 100%,#0000 calc(100% - 5px),#615375 calc(100% - 4px) calc(100% - 1px),#0000) -12px -12px,radial-gradient(12px at 100% 100%,#0000 calc(100% - 5px),#615375 calc(100% - 4px) calc(100% - 1px),#0000) #8eb2c5;background-size:57.936px 57.936px;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg30__DvjX2{background-image:repeating-radial-gradient(hsla(0,33%,96%,.933) 88%,#963fdd 90%);background-size:50px 50px;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg31__iXvbC{background:linear-gradient(45deg,#0000 33.33%,#3990b31a 0,#0000001a 66.66%,#0000 0),#add8e6;background-size:20px 20px;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg32__J\+PvU{background-image:repeating-radial-gradient(hsla(0,33%,96%,.933) 87%,#3fa7b4 90%);background-size:50px 50px;height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg33__5wkj\+{background:repeating-radial-gradient(red 55%,#fff 56%);height:100%;width:100%}.BackgroundEffect_container__u\+IDp .BackgroundEffect_bg34__5h6kD{background-image:repeating-radial-gradient(#e2d1d1 50%,hsla(0,30%,86%,.933) 70%,#f5c7a1 95%);background-size:50px 50px;height:100%;width:100%} \ No newline at end of file diff --git a/src/pages/html/BackgroundEffect/index.module.scss b/src/pages/html/BackgroundEffect/index.module.scss index b4ac05e..1cfa75a 100644 --- a/src/pages/html/BackgroundEffect/index.module.scss +++ b/src/pages/html/BackgroundEffect/index.module.scss @@ -677,4 +677,44 @@ radial-gradient($size at 100% 100%, $g) $color2; background-size: calc(2 * $r) calc(2 * $r); } + + .bg30 { + @include bg; + background-image: repeating-radial-gradient(#f8f1f1ee 88%, #963fdd 90%); + background-size: 50px 50px; + } + + .bg31 { + @include bg; + background: linear-gradient( + 45deg, + transparent 33.33%, + rgba(57, 144, 179, 0.1) 33.33%, + rgba(0, 0, 0, 0.1) 66.66%, + transparent 66.66% + ), + lightblue; + background-size: 20px 20px; + } + + .bg32 { + @include bg; + background-image: repeating-radial-gradient(#f8f1f1ee 87%, #3fa7b4 90%); + background-size: 50px 50px; + } + + .bg33 { + @include bg; + background: repeating-radial-gradient(red 55%, white 56%); + } + + .bg34 { + @include bg; + background-image: repeating-radial-gradient( + #e2d1d1 50%, + #e7d2d2ee 70%, + #f5c7a1 95% + ); + background-size: 50px 50px; + } } diff --git a/src/pages/html/BackgroundEffect/index.tsx b/src/pages/html/BackgroundEffect/index.tsx index 8bdb2dd..694dbc2 100644 --- a/src/pages/html/BackgroundEffect/index.tsx +++ b/src/pages/html/BackgroundEffect/index.tsx @@ -7,7 +7,7 @@ import GridContent from "components/GridContent"; import styles from "./index.module.scss"; const { GridBox } = GridContent; -const gridboxList = new Array(29).fill("1"); +const gridboxList = new Array(34).fill("1"); const BackgroundEffect = () => { const { setScrollTop } = useGlobalContext();