js+css实现炫酷医疗ui交互系统界面代码
代码语言:html
所属分类:布局界面
代码描述:js+css实现炫酷医疗ui交互系统界面代码
代码标签: js css 炫酷 医疗 ui 交互 系统 界面 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet"><link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css"> <style> @layer tokens { :root { --color-primary: #9871be; --color-secondary: #9db092; --color-tertiary: #deee75; --color-quaternary: #9375ee; --color-surface: #eaf6f1; } @media (max-height: 800px) { :root { font-size: 80%; } } } @layer background { @property --bg-x { syntax: "<number>"; inherits: true; initial-value: 0; } @property --bg-x2 { syntax: "<number>"; inherits: true; initial-value: 0; } @property --bg-y { syntax: "<number>"; inherits: true; initial-value: 0; } @-webkit-keyframes bg { from { --bg-x: 0; --bg-x2: 0; --bg-y: 0; } 30% { --bg-x2: 1; } 50% { --bg-x: 1; --bg-y: 1; } to { --bg-x: 0; --bg-x2: 0; --bg-y: 0; } } @keyframes bg { from { --bg-x: 0; --bg-x2: 0; --bg-y: 0; } 30% { --bg-x2: 1; } 50% { --bg-x: 1; --bg-y: 1; } to { --bg-x: 0; --bg-x2: 0; --bg-y: 0; } } .background { position: absolute; inset: 0; display: grid; place-items: center; -webkit-animation: bg 3.6s ease-in-out infinite; animation: bg 3.6s ease-in-out infinite; pointer-events: none; } @media (prefers-reduced-motion) { .background { -webkit-animation: unset; animation: unset; } } .background::before { z-index: 0; content: ""; background: radial-gradient(30vmax at 1rem 100%, #e3edec 40%, transparent), radial-gradient(40vmax at 1rem 1rem, #e3edec 40%, transparent); -webkit-backdrop-filter: blur(5.5rem) brightness(1.05); backdrop-filter: blur(5.5rem) brightness(1.05); position: absolute; inset: 0; } .background::after { z-index: 0; content: ""; position: absolute; inset: 0; background: linear-gradient(to right, #e3edec 0%, transparent 90%) repeat 0 0/0.9rem 0.9rem, radial-gradient(#e3edec, transparent 70%) repeat 0 0/1rem 1rem; opacity: 0.15; } .background > div { z-index: -1; position: absolute; opacity: 0.9; } .r1 { background: #93c9cc; width: 25vmax; border-radius: 50%; aspect-ratio: 4/2; translate: calc(-4vmax + (-4vmax * var(--bg-x))) calc(-30vmax + (-3rem * var(--bg-y))); rotate: calc(45deg * var(--bg-x2)); } .r2 { background: #aab896; width: 35vmax; border-radius: 50%; aspect-ratio: 1.5/3; translate: calc(-35vmax + (-2vmax * var(--bg-x))) calc(-25vmax + (2rem * var(--bg-y))); rotate: calc(15deg * var(--bg-x)); } .r3 { background: radial-gradient(#334c74, transparent); width: 35vmax; border-radius: 20%; aspect-ratio: 2/3; translate: calc(-5vmax + (-5vmax * var(--bg-x))) calc(5vmax + (-2vmax * var(--bg-y))); rotate: -35deg; opacity: calc(var(--bg-x)); } .r4 { background: #d7cbc7; width: 25vmax; border-radius: 50%; aspect-ratio: 2/3; translate: calc(10vmax + (7vmax * var(--bg-x))) calc(7vmax + (-5vmax * var(--bg-y))); rotate: 35deg; } .r5 { background: rgba(105, 133, 87, 0.54); width: calc(35vmax + 2vmax * var(--bg-x2)); border-radius: 50%; aspect-ratio: 5/3; translate: calc(22vmax + (2vmax * var(--bg-x2))) calc(-9vmax + (-2vmax * var(--bg-x2))); rotate: calc(-35deg * var(--bg-x)); } .r6 { background: rgba(127, 190, 192, 0.64); width: 65vmax; border-radius: 50%; aspect-ratio: 6/2; translate: -35vmax 35vmax; rotate: calc(-35deg * var(--bg-x2)); } .r7 { background: rgba(217, 193, 247, 0.72); width: calc(30vmax - 5vmax * var(--bg-x)); border-radius: 50%; aspect-ratio: 1; translate: calc(-15vmax + (3vmax * var(--bg-x))) calc(-30vmax + (-1vmax * var(--bg-y))); rotate: 35deg; } .r8 { background: rgba(217, 193, 247, 0.52); width: 40vmax; border-radius: 50%; aspect-ratio: 2/1; translate: calc(24vmax + (5vmax * var(--bg-x))) calc(30vmax + (5vmax * var(--bg-y))); rotate: calc(35deg * var(--bg-x)); } .r9 { background: rgba(105, 133, 87, 0.59); width: 30vmax; border-radius: 50%; aspect-ratio: 1/1.2; translate: calc(44vmax + (-4vmax * var(--bg-x))) calc(-10vmax + (1vmax * var(--bg-y))); rotate: calc(35deg * var(--bg-x2)); } .r10 { background: white; width: 10vmax; border-radius: 50%; aspect-ratio: 1/1.2; translate: calc(12vmax + (-4vmax * var(--bg-x))) calc(14vmax + (5vmax * var(--bg-y))); rotate: calc(42deg * var(--bg-x2)); } .r11 { background: rgba(255, 255, 255, 0.7); width: 20vmax; border-radius: 50%; aspect-ratio: 1/1.2; translate: calc(-12vmax + (4vmax * var(--bg-x))) calc(-14vmax + (5vmax * var(--bg-y))); rotate: calc(42deg * var(--bg-x2)); } } @layer card { @-webkit-keyframes card-enter { from { opacity: 0.01; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes card-enter { from { opacity: 0.01; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } .card { -webkit-backdrop-filter: blur(2rem) brightness(1.054) saturate(1); backdrop-filter: blur(2rem) brightness(1.054); border-radius: 1rem; -webkit-animation: card-enter 0.45s ease-in forwards; animation: card-enter 0.45s ease-in forwards; display: grid; place-items: center; color: white; font-size: 2rem; border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.04), 1px 1px 0 1px rgba(0, 0, 0, 0.01); z-index: 100; --size: 2rem; --s: 36%; --d: 3deg; --x: calc(100% - var(--size)); --y: 0; --s2: 28%; --d2: -148deg; --x2: var(--size); --y2: 100%; --mask: exclude; -webkit-mask: conic-gradient(from var(--d2) at var(--x2) var(--y2), black var(--s2), transparent var(--s2)), conic-gradient(from var(--d) at var(--x) var(--y), transparent var(--s), black var(--s)); mask: conic-gradient(from var(--d2) at var(--x2) var(--y2), black var(--s2), transparent var(--s2)), conic-gradient(from var(--d) at var(--x) var(--y), transparent var(--s), black var(--s)); -webkit-mask-composite: var(--mask); mask-composite: var(--mask); } .card::before { content: ""; --c: rgba(0, 0, 0, 0.05); background: radial-gradient(0.09rem 2rem at 0 2.5rem, var(--c), transparent), radial-gradient(2rem 0.09rem at 2.5rem 0, var(--c), transparent); position: absolute; inset: 0; z-index: 1; } .card.full-shape { -webkit-mask: unset; mask: unset; } } @layer avatar { .card.avatar { --size: max(1.8vmin, 1rem); width: max(9vmin, 5rem); height: max(11vmin, 6rem); justify-self: flex-end; overflow: hidden; -webkit-backdrop-filter: unset; backdrop-filter: unset; position: absolute; border-radius: 0; top: 2rem; right: 2rem; } .card.avatar .image { margin-bottom: 1rem; overflow: hidden; height: 140%; } .card.avatar .image img { width: 100%; -o-object-fit: cover; object-fit: cover; } .card.avatar .actions { position: absolute; bottom: 0; left: 0; right: 0; height: 2.5vmin; -webkit-backdrop-filter: blur(0.2rem) saturate(0.5) brightness(1); backdrop-filter: blur(0.2rem) saturate(0.5) brightness(1); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.82); font-size: 1.6vmin; gap: 1.5vmin; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); } .card.avatar .actions .action { padding: 0.5vmin; } .card.avatar::after { content: ""; position: absolute; inset: 0; --c: rgba(255, 255, 255, 0.6); background: linear-gradient(-135deg, var(--c), transparent 70%), radial-gradient(0.5rem at 95% 10%, var(--c), transparent), radial-gradient(3rem at 90% 10%, var(--c), transparent); } } @layer hexagon { @property --index { syntax: "<number>"; initial-value: 0; inherits: true; } :root { --hexagon-size: 8vmin; --gap: 0.1vmin; } .hexagon { --mix-percentage: calc(var(--column) * var(--index) * 3%); width: var(--hexagon-size); aspect-ratio: 1; position: relative; -webkit-backdrop-filter: blur(1rem) brightness(1.054); backdrop-filter: blur(1rem) brightness(1.054); color: transparent; -webkit-clip-path: polygon(98.66024% 45%, 99.39693% 46.5798%, 99.84808% 48.26352%, 100% 50%, 99.84808% 51.73648%, 99.39693% 53.4202%, 98.66025% 55%, 78.66025% 89.64102%, 77.66044% 91.06889%, 76.42788% 92.30146%, 75% 93.30127%, 73.4202% 94.03794%, 71.73648% 94.48909%, 70% 94.64102%, 30% 94.64102%, 28.26352% 94.48909%, 26.5798% 94.03794%, 25% 93.30127%, 23.57212% 92.30146%, 22.33956% 91.06889%, 21.33975% 89.64102%, 1.33975% 55%, 0.60307% 53.4202%, 0.15192% 51.73648%, 0% 50%, 0.15192% 48.26352%, 0.60307% 46.5798%, 1.33975% 45%, 21.33975% 10.35898%, 22.33956% 8.93111%, 23.57212% 7.69854%, 25% 6.69873%, 26.5798% 5.96206%, 28.26352% 5.51091%, 30% 5.35898%, 70% 5.35898%, 71.73648% 5.51091%, 73.4202% 5.96206%, 75% 6.69873%, 76.42788% 7.69854%, 77.66044% 8.93111%, 78.66025% 10.35898%); clip-path: polygon(98.66024% 45%, 99.39693% 46.5798%, 99.84808% 48.26352%, 100% 50%, 99.84808% 51.73648%, 99.39693% 53.4202%, 98.66025% 55%, 78.66025% 89.64102%, 77.66044% 91.06889%, 76.42788% 92.30146%, 75% 93.30127%, 73.4202% 94.03794%, 71.73648% 94.48909%, 70% 94.64102%, 30% 94.64102%, 28.26352% 94.48909%, 26.5798% 94.03794%, 25% 93.30127%, 23.57212% 92.30146%, 22.33956% 91.06889%, 21.33975% 89.64102%, 1.33975% 55%, 0.60307% 53.4202%, 0.15192% 51.73648%, 0% 50%, 0.15192% 48.26352%, 0.60307% 46.5798%, 1.33975% 45%, 21.33975% 10.35898%, 22.33956% 8.93111%, 23.57212% 7.69854%, 25% 6.69873%, 26.5798% 5.96206%, 28.26352% 5.51091%, 30% 5.35898%, 70% 5.35898%, 71.73648% 5.51091%, 73.4202% 5.96206%, 75% 6.69873%, 76.42788% 7.69854%, 77.66044% 8.93111%, 78.66025% 10.35898%); cursor: pointer; } @media (hover) { .hexagon:hover { -webkit-backdrop-filter: blur(1rem) brightness(0.54); backdrop-filter: blur(1rem) brightness(0.54); } } .hexagon:after { content: var(--icon); display: grid; place-items: center; position: absolute; filter: var(--icon-filter, invert(1) saturate(0.5) brightness(1.5)); font-size: 6vmin; inset: 0; transform: scale(0.25); text-shadow: 2px 2px 1px black; } @-webkit-keyframes grid-container-enter { from { transform: scale(0.01) rotate(-145deg); } to { transform: scale(1) rotate(0); } } @keyframes grid-container-enter { from { transform: scale(0.01) rotate(-145deg); } to { transform: scale(1) rotate(0); } } .grid-container { display: flex; position: relative; align-items: center; -webkit-animation: grid-container-enter 0.6s ease-in-out forwards; animation: grid-container-enter 0.6s ease-in-out forwards; } .grid-container .column { margin: 0 -0.2vmin; display: flex; flex-direction: column; align-items: center; } .grid-container .column:nth-of-type(4) .hexagon:nth-of-type(n + 3):nth-of-type(-n + 6) { opacity: 0; } .grid-container .column:nth-of-type(5) .hexagon:nth-of-type(n + 4):nth-of-type(-n + 6) { opacity: 0; } .grid-container .column:nth-of-type(6) .hexagon:nth-of-type(n + 3):nth-of-type(-n + 6) { opacity: 0; } @property --reflection-size { syntax: "<number>"; inherits: true; initial-value: 0; } @-webkit-keyframes sphere-enter { from { opacity: 0.01; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes sphere-enter { from { opacity: 0.01; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } .sphere { -webkit-clip-path: polygon(98.66024% 45%, 99.39693% 46.5798%, 99.84808% 48.26352%, 100% 50%, 99.84808% 51.73648%, 99.39693% 53.4202%, 98.66025% 55%, 78.66025% 89.64102%, 77.66044% 91.06889%, 76.42788% 92.30146%, 75% 93.30127%, 73.4202% 94.03794%, 71.73648% 94.48909%, 70% 94.64102%, 30% 94.64102%, 28.26352% 94.48909%, 26.5798% 94.03794%, 25% 93.30127%, 23.57212% 92.30146%, 22.33956% 91.06889%, 21.33975% 89.64102%, 1.33975% 55%, 0.60307% 53.4202%, 0.15192% 51.73648%, 0% 50%, 0.15192% 48.26352%, 0.60307% 46.5798%, 1.33975% 45%, 21.33975% 10.35898%, 22.33956% 8.93111%, 23.57212% 7.69854%, 25% 6.69873%, 26.5798% 5.96206%, 28.26352% 5.51091%, 30% 5.35898%, 70% 5.35898%, 71.73648% 5.51091%, 73.4202% 5.96206%, 75% 6.69873%, 76.42788% 7.69854%, 77.66044% 8.93111%, 78.66025% 10.35898%); clip-path: polygon(98.66024% 45%, 99.39693% 46.5798%, 99.84808% 48.26352%, 100% 50%, 99.84808% 51.73648%, 99.39693% 53.4202%, 98.66025% 55%, 78.66025% 89.64102%, 77.66044% 91.06889%, 76.42788% 92.30146%, 75% 93.30127%, 73.4202% 94.03794%, 71.73648% 94.48909%, 70% 94.64102%, 30% 94.64102%, 28.26352% 94.48909%, 26.5798% 94.03794%, 25% 93.30127%, 23.57212% 92.30146%, 22.33956% 91.06889%, 21.33975% 89.64102%, 1.33975% 55%, 0.60307% 53.4202%, 0.15192% 51.73648%, 0% 50%, 0.15192% 48.26352%, 0.60307% 46.5798%, 1.33975% 45%, 21.33975% 10.35898%, 22.33956% 8.93111%, 23.57212% 7.69854%, 25% 6.69873%, 26.5798% 5.96206%, 28.26352% 5.51091%, 30% 5.35898%, 70% 5.35898%, 71.73648% 5.51091%, 73.4202% 5.96206%, 75% 6.69873%, 76.42788% 7.69854%, 77.66044% 8.93111%, 78.66025% 10.35898%); display: grid; place-items: center; position: absolute; width: 40vmin; aspect-ratio: 1; -webkit-backdrop-filter: blur(5rem) brightness(1.05); backdrop-filter: blur(5rem) brightness(1.05); z-index: 1; border-radius: 50%; -webkit-animation: sphere-enter 0.5s ease-in; animation: sphere-enter 0.5s ease-in; --c: rgba(255, 255, 255, 0.5); box-shadow: -0.0625rem -0.0625rem 0.0625rem var(--c), 0.0625rem 0.0625rem 0.0625rem var(--c); } .sphere::before { -webkit-clip-path: polygon(98.66024% 45%, 99.39693% 46.5798%, 99.84808% 48.26352%, 100% 50%, 99.84808% 51.73648%, 99.39693% 53.4202%, 98.66025% 55%, 78.66025% 89.64102%, 77.66044% 91.06889%, 76.42788% 92.30146%, 75% 93.30127%, 73.4202% 94.03794%, 71.73648% 94.48909%, 70% 94.64102%, 30% 94.64102%, 28.26352% 94.48909%, 26.5798% 94.03794%, 25% 93.30127%, 23.57212% 92.30146%, 22.33956% 91.06889%, 21.33975% 89.64102%, 1.33975% 55%, 0.60307% 53.4202%, 0.15192% 51.73648%, 0% 50%, 0.15192% 48.26352%, 0.60307% 46.5798%, 1.33975% 45%, 21.33975% 10.35898%, 22.33956% 8.93111%, 23.57212% 7.69854%, 25% 6.69873%, 26.5798% 5.96206%, 28.26352% 5.51091%, 30% 5.35898%, 70% 5.35898%, 71.73648% 5.51091%, 73.4202% 5.96206%, 75% 6.69873%, 76.42788% 7.69854%, 77.66044% 8.93111%, 78.66025% 10.35898%); clip-path: polygon(98.66024% 45%, 99.39693% 46.5798%, 99.84808% 48.26352%, 100% 50%, 99.84808% 51.73648%, 99.39693% 53.4202%, 98.66025% 55%, 78.66025% 89.64102%, 77.66044% 91.06889%, 76.42788% 92.30146%, 75% 93.30127%, 73.4202% 94.03794%, 71.73648% 94.48909%, 70% 94.64102%, 30% 94.64102%, 28.26352% 94.48909%, 26.5798% 94.03794%, 25% 93.30127%, 23.57212% 92.30146%, 22.33956% 91.06889%, 21.33975% 89.64102%, 1.33975% 55%, 0.60307% 53.4202%, 0.15192% 51.73648%, 0% 50%, 0.15192% 48.26352%, 0.60307% 46.5798%, 1.33975% 45%, 21.33975% 10.35898%, 22.33956% 8.93111%, 23.57212% 7.69854%, 25% 6.69873%, 26.5798% 5.96206%, 28.26352% 5.51091%, 30% 5.35898%, 70% 5.35898%, 71.73648% 5.51091%, 73.4202% 5.96206%, 75% 6.69873%, 76.42788% 7.69854%, 77.66044% 8.93111%, 78.66025% 10.35898%); content: ""; background: rgba(255, 255, 255, 0.1); box-shadow: -0.0625rem -0.0625rem 0.0625rem var(--c), 0.0625rem 0.0625rem 0.0625rem var(--c); position: absolute; inset: 6vmin; border-radius: inherit; pointer-events: none; } @-webkit-keyframes glass { from { --reflection-size: 1; } 50% { --reflection-size: 1.5; } to { --reflection-size: 1; } } @keyframes glass { from { --reflection-size: 1; } 50% { --reflection-size: 1.5; } to { --reflection-size: 1; } } .sphere .glass { -webkit-animation: glass 4s ease-in-out infinite; animation: glass 4s ease-in-out infinite; border-radius: inherit; background: radial-gradient(calc(0.9vmin * var(--reflection-size)) at 70% 20%, rgba(255, 255, 255, 0.1), transparent), radial-gradient(calc(1.7vmin * var(--reflection-size)) at 70% 20%, rgba(255, 255, 255, 0.1), transparent), radial-gradient(calc(2.1vmin * var(--reflection-size)) 2vmin at 75% 30%, rgba(255, 255, 255, 0.4), transparent), radial-gradient(calc(10vmin * var(--reflection-size)) at 72% 24%, rgba(255, 255, 255, 0.6), transparent), radial-gradient(calc(4vmin * var(--reflection-size)) at 70% 20%, rgba(255, 255, 255, 0.4), transparent), radial-gradient(calc(10vmin * var(--reflection-size)) at 20% 95%, rgba(255, 255, 255, 0.4), transparent); position: absolute; inset: 0; z-index: 11; } @property --line-thickness { syntax: "<percentage>"; inherits: false; initial-value: 0%; } @property --line-1-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; } @property --line-2-p { syntax: "<percentage>"; inherits: false; initial-value: 0%; } .sphere-highlighting { -webkit-clip-path: polygon(98.66024% 45%, 99.39693% 46.5798%, 99.84808% 48.26352%, 100% 50%, 99.84808% 51.73648%, 99.39693% 53.4202%, 98.66025% 55%, 78.66025% 89.64102%, 77.66044% 91.06889%, 76.42788% 92.30146%, 75% 93.30127%, 73.4202% 94.03794%, 71.73648% 94.48909%, 70% 94.64102%, 30% 94.64102%, 28.26352% 94.48909%, 26.5798% 94.03794%, 25% 93.30127%, 23.57212% 92.30146%, 22.33956% 91.06889%, 21.33975% 89.64102%, 1.33975% 55%, 0.60307% 53.4202%, 0.15192% 51.73648%, 0% 50%, 0.15192% 48.26352%, 0.60307% 46.5798%, 1.33975% 45%, 21.33975% 10.35898%, 22.33956% 8.93111%, 23.57212% 7.69854%, 25% 6.69873%, 26.5798% 5.96206%, 28.26352% 5.51091%, 30% 5.35898%, 70% 5.35898%, 71.73648% 5.51091%, 73.4202% 5.96206%, 75% 6.69873%, 76.42788% 7.69854%, 77.66044% 8.93111%, 78.66025% 10.35898%); clip-path: polygon(98.66024% 45%, 99.39693% 46.5798%, 99.84808% 48.26352%, 100% 50%, 99.84808% 51.73648%, 99.39693% 53.4202%, 98.66025% 55%, 78.66025% 89.64102%, 77.66044% 91.06889%, 76.42788% 92.30146%, 75% 93.30127%, 73.4202% 94.03794%, 71.73648% 94.48909%, 70% 94.64102%, 30% 94.64102%, 28.26352% 94.48909%, 26.5798% 94.03794%, 25% 93.30127%, 23.57212% 92.30146%, 22.33956% 91.06889%, 21.33975% 89.64102%, 1.33975% 55%, 0.60307% 53.4202%, 0.15192% 51.73648%, 0% 50%, 0.15192% 48.26352%, 0.60307% 46.5798%, 1.33975% 45%, 21.33975% 10.35898%, 22.33956% 8.93111%, 23.57212% 7.69854%, 25% 6.69873%, 26.5798% 5.96206%, 28.26352% 5.51091%, 30% 5.35898%, 70% 5.35898%, 71.73648% 5.51091%, 73.4202% 5.96206%, 75% 6.69873%, 76.42788% 7.69854%, 77.66044% 8.93111%, 78.66025% 10.35898%); position: absolute; width: 55vmin; aspect-ratio: 1; border-radius: 50%; filter: blur(0.5rem); pointer-events: none; } .sphere-highlighting:after { -webkit-clip-path: polygon(98.66024% 45%, 99.39693% 46.5798%, 99.84808% 48.26352%, 100% 50%, 99.84808% 51.73648%, 99.39693% 53.4202%, 98.66025% 55%, 78.66025% 89.64102%, 77.66044% 91.06889%, 76.42788% 92.30146%, 75% 93.30127%, 73.4202% 94.03794%, 71.73648% 94.48909%, 70% 94.64102%, 30% 94.64102%, 28.26352% 94.48909%, 26.5798% 94.03794%, 25% 93.30127%, 23.57212% 92.30146%, 22.33956% 91.06889%, 21.33975% 89.64102%, 1.33975% 55%, 0.60307% 53.4202%, 0.15192% 51.73648%, 0% 50%, 0.15192% 48.26352%, 0.60307% 46.5798%, 1.33975% 45%, 21.33975% 10.35898%, 22.33956% 8.93111%, 23.57212% 7.69854%, 25% 6.69873%, 26.5798% 5.96206%, 28.26352% 5.51091%, 30% 5.35898%, 70% 5.35898%, 71.73648% 5.51091%, 73.4202% 5.96206%, 75% 6.69873%, 76.42788% 7.69854%, 77.66044% 8.93111%, 78.66025% 10.35898%); clip-path: polygon(98.66024% 45%, 99.39693% 46.5798%, 99.84808% 48.26352%, 100% 50%, 99.84808% 51.73648%, 99.39693% 53.4202%, 98.66025% 55%, 78.66025% 89.64102%, 77.66044% 91.06889%, 76.42788% 92.30146%, 75% 93.30127%, 73.4202% 94.03794%, 71.73648% 94.48909%, 70% 94.64102%, 30% 94.64102%, 28.26352% 94.48909%, 26.5798% 94.03794%, 25% 93.30127%, 23.57212% 92.30146%, 22.33956% 91.06889%, 21.33975% 89.64102%, 1.33975% 55%, 0.60307% 53.4202%, 0.15192% 51.73648%, 0% 50%, 0.15192% 48.26352%, 0.60307% 46.5798%, 1.33975% 45%, 21.33975% 10.35898%, 22.33956% 8.93111%, 23.57212% 7.69854%, 25% 6.69873%, 26.5798% 5.96206%, 28.26352% 5.51091%, 30% 5.35898%, 70% 5.35898%, 71.73648% 5.51091%, 73.4202% 5.96206%, 75% 6.69873%, 76.42788% 7.69854%, 77.66044% 8.93111%, 78.66025% 10.35898%); content: ""; box-shadow: inset 0 0 8vmin rgba(255, 255, 255, 0.5); position: absolute; inset: 3rem; filter: blur(0.5rem); } .sphere-blur { position: absolute; inset: 0; -webkit-backdrop-filter: blur(4rem) saturate(1.1); backdrop-filter: blur(4rem); -webkit-mask-image: radial-gradient(100vmin 100vmin at center, black 22%, transparent 30%); mask-image: radial-gradient(100vmin 100vmin at center, black 22%, transparent 30%); pointer-events: none; z-index: 1; -webkit-animation: sphere-blur-enter 0.7s ease-in forwards; animation: sphere-blur-enter 0.7s ease-in forwards; } @-webkit-keyframes sphere-blur-enter { from { transform: scale(0.5); } to { transform: scale(1); } } @keyframes sphere-blur-enter { from { transform: scale(0.5); } to { transform: scale(1); } } .sphere-lines { --c: rgba(255, 255, 255, 0.25); border-radius: 50%; position: absolute; width: 75vmin; aspect-ratio: 1; --line-1-a: -45deg; --line-thickness: 69.5%; --line-2-p: 10%; -webkit-mask-image: radial-gradient(transparent var(--line-thickness), black var(--line-thickness)); mask-image: radial-gradient(transparent var(--line-thickness), black var(--line-thickness)); background: conic-gradient(from var(--line-1-a), var(--c), var(--c) 10%, transparent 12%), conic-gradient(from 50deg, var(--c), var(--c) var(--line-2-p), transparent calc(var(--line-2-p) + 5%)), conic-gradient(from 200deg, var(--c), var(--c) 10%, transparent 15%); -webkit-animation: circle-lines-enter 0.3s 0.1s ease-in-out, circle-lines 6s 0.6s ease-in-out infinite; animation: circle-lines-enter 0.3s 0.1s ease-in-out, circle-lines 6s 0.6s ease-in-out infinite; } @media (prefers-reduced-motion) { .sphere-lines { -webkit-animation: unset; animation: unset; } } @-webkit-keyframes circle-lines-enter { from { transform: scale(0.5); opacity: 0; } 70% { opacity: 1; } to { transform: scale(1); opacity: 1; } } @keyframes circle-lines-enter { from { transform: scale(0.5); opacity: 0; } 70% { opacity: 1; } to { transform: scale(1); opacity: 1; } } @-webkit-keyframes circle-lines { from { --line-1-a: -50deg; --line-thickness: 69.5%; --line-2-p: 10%; transform: scale(1); } 20% { --line-thickness: 69%; } 50% { --line-thickness: 68%; --line-1-a: 300deg; --line-2-p: 0%; transform: scale(0.99) rotate(199deg); } 60% { --line-thickness: 69.6%; } 70% { transform: scale(0.99) rotate(-199deg); } to { --line-thickness: 69.5%; --line-1-a: -50deg; --line-2-p: 10%; transform: scale(1); } } @keyframes circle-lines { from { --line-1-a: -50deg; --line-thickness: 69.5%; --line-2-p: 10%; transform: scale(1); } 20% { --line-thickness: 69%; } 50% { --line-thickness: 68%; --line-1-a: 300deg; --line-2-p: 0%; transform: scale(0.99) rotate(199deg); } 60% { --line-thickness: 69.6%; } 70% { transform: scale(0.99) rotate(-199deg); } to { --line-thickness: 69.5%; --line-1-a: -50deg; --line-2-p: 10%; transform: scale(1); } } } @layer bars { @property --target { syntax: "<percentage>"; inherits: true; initial-value: 0; } .bars { width: 19vmax; z-index: 0; display: flex; flex-direction: column; gap: 0.5rem; justify-content: center; color: white; position: absolute; } .bars .bar { width: 100%; height: 0.25rem; -webkit-animation: bars 2.5s ease-in-out infinite; animation: bars 2.5s ease-in-out infinite; -webkit-backdrop-filter: blur(2rem) brightness(1.06) saturate(1); backdrop-filter: blur(2rem) brightness(1.06) saturate(1); } .bars .bar:after { content: "42-2024-123-123-42"; font-size: 0.4rem; } .bars .bar:first-of-type { width: 46%; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; --target: 120%; } .bars .bar:last-of-type { width: 57%; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; -webkit-animation-duration: 2.4s; animation-duration: 2.4s; } .bars.left { left: 0; } .bars.left .bar { transform-origin: left; } .bars.right { right: 0; align-items: flex-end; } .bars.right .bar { transform-origin: right; } @-webkit-keyframes bars { from { transform: scaleX(100%); } 30% { transform: scaleX(120%); } 50% { transform: scaleX(var(--target, 90%)); } to { transform: scaleX(100%); } } @keyframes bars { from { transform: scaleX(100%); } 30% { transform: scaleX(120%); } 50% { transform: scaleX(var(--target, 90%)); } to { transform: scaleX(100%); } } } @layer dna { @property --rotate-y { syntax: "<angle>"; inherits: true; initial-value: 0deg; } @-webkit-keyframes dna { from { --rotate-y: 0deg; } to { --rotate-y: 360deg; } } @keyframes dna { from { --rotate-y: 0deg; } to { --rotate-y: 360deg; } } @property --rotate-container { syntax: "<angle>"; inherits: true; initial-value: 0deg; } @-webkit-keyframes rotate-container { from { --rotate-container: 42deg; } 50% { --rotate-container: 142deg; } to { --rotate-container: 42deg; } } @keyframes rotate-container { from { --rotate-container: 42deg; } 50% { --rotate-container: 142deg; } to { --rotate-container: 42deg; } } .dna-container { filter: url(#blurFilter) contrast(1.5) brightness(1.5) saturate(0.6); position: absolute; transform: scale(0.55); } @media (max-width: 1000px) { .dna-container { transform: scale(0.25); } } @media (max-height: 1000px) { .dna-container { transform: scale(0.25); } } .dna { --width: 14rem; --count: 50; display: flex; flex-direction: column; z-index: 1111; perspective: 45rem; -webkit-animation: dna 4s linear infinite, rotate-container 30s ease-in-out infinite; animation: dna 4s linear infinite, rotate-container 30s ease-in-out infinite; transform-style: preserve-3d; rotate: var(--rotate-container); transform: rotateY(var(--rotate-y, 0deg)); } @media (prefers-reduced-motion) { .dna { -webkit-animation: unset; animation: unset; } } .dna .item { display: flex; align-items: center; transform-style: preserve-3d; --a: calc(360deg / var(--count) * (var(--i))); transform: rotateY(var(--a)); } .dna .item > div { width: var(--width); height: 0.42rem; background: white; background: conic-gradient(color-mix(in oklch, color-mix(in oklch, var(--color-primary), white 6%), transparent 10%), color-mix(in oklch, var(--color-secondary), black 6%)); transform-style: preserve-3d; } .dna .item > div:first-of-type, .dna .item > div:last-of-type { --thickness: 0.9rem; width: var(--thickness); height: var(--thickness); background: var(--color-secondary); border-radius: 50%; } @-webkit-keyframes dot-scale { from { transform: scale(1); } 50% { transform: scale(0.6); } to { transform: scale(1); } } @keyframes dot-scale { from { transform: scale(1); } 50% { transform: scale(0.6); } to { transform: scale(1); } } .dna .item > div:first-of-type::before, .dna .item > div:first-of-type::after, .dna .item > div:last-of-type::before, .dna .item > div:last-of-type::after { content: ""; position: absolute; width: calc(var(--thickness) * 0.5); border-radius: 50%; aspect-ratio: 1; transform-style: preserve-3d; } .dna .item > div:first-of-type::before, .dna .item > div:last-of-type::before { background: white; width: calc(var(--thickness) * 0.9); left: -0.4rem; top: -0.4rem; -webkit-animation: dot-scale 2s ease-in-out infinite; animation: dot-scale 2s ease-in-out infinite; } .dna .item > div:first-of-type::after, .dna .item > div:last-of-type::after { background: rgba(0, 0, 0, 0.09); right: 0.3rem; bottom: 0.3rem; } .dna .item > div:last-of-type { background: var(--color-primary); } .dna .item > div:first-of-type, .dna .item > div:last-of-type { transform: rotateY(calc(360deg / var(--count) * -1 * var(--i) - var(--rotate-y))); } .dna .item:nth-child(1) { --i: 0; } .dna .item:nth-child(2) { --i: 1; } .dna .item:nth-child(3) { --i: 2; } .dna .item:nth-child(4) { --i: 3; } .dna .item:nth-child(5) { --i: 4; } .dna .item:nth-child(6) { --i: 5; } .dna .item:nth-child(7) { --i: 6; } .dna .item:nth-child(8) { --i: 7; } .dna .item:nth-child(9) { --i: 8; } .dna .item:nth-child(10) { --i: 9; } .dna .item:nth-child(11) { --i: 10; } .dna .item:nth-child(12) { --i: 11; } .dna .item:nth-child(13) { --i: 12; } .dna .item:nth-child(14) { --i: 13; } .dna .item:nth-child(15) { --i: 14; } .dna .item:nth-child(16) { --i: 15; } .dna .item:nth-child(17) { --i: 16; } .dna .item:nth-child(18) { --i: 17; } .dna .item:nth-child(19) { --i: 18; } .dna .item:nth-child(20) { --i: 19; } .dna .item:nth-child(21) { --i: 20; } .dna .item:nth-child(22) { --i: 21; } .dna .item:nth-child(23) { --i: 22; } .dna .item:nth-child(24) { --i: 23; } .dna .item:nth-child(25) { --i: 24; } .dna .item:nth-child(26) { --i: 25; } .dna .item:nth-child(27) { --i: 26; } .dna .item:nth-child(28) { --i: 27; } .dna .item:nth-child(29) { --i: 28; } .dna .item:nth-child(30) { --i: 29; } .dna .item:nth-child(31) { --i: 30; } .dna .item:nth-child(32) { --i: 31; } .dna .item:nth-child(33) { --i: 32; } .dna .item:nth-child(34) { --i: 33; } .dna .item:nth-child(35) { --i: 34; } .dna .item:nth-child(36) { --i: 35; } .dna .item:nth-child(37) { --i: 36; } .dna .item:nth-child(38) { --i: 37; } .dna .item:nth-child(39) { --i: 38; } .dna .item:nth-child(40) { --i: 39; } .dna .item:nth-child(41) { --i: 40; } .dna .item:nth-child(42) { --i: 41; } .dna .item:nth-child(43) { --i: 42; } .dna .item:nth-child(44) { --i: 43; } .dna .item:nth-child(45) { --i: 44; } .dna .item:nth-child(46) { --i: 45; } .dna .item:nth-child(47) { --i: 46; } .dna .item:nth-child(48) { --i: 47; } .dna .item:nth-child(49) { --i: 48; } .dna .item:nth-child(50) { --i: 49; } .dna .item:nth-child(51) { --i: 50; } .dna-shadow { width: 12rem; height: 100%; filter: blur(3.5rem); background: radial-gradient(8rem 66% at 50% 40%, var(--color-primary), transparent 90%) center top/14rem 33%; -webkit-animation: rotate-container 30s ease-in-out infinite; animation: rotate-container 30s ease-in-out infinite; rotate: var(--rotate-container); opacity: 1; } @media (max-width: 1000px) { .dna-shadow { transform: scale(0.5); } } @media (max-height: 1000px) { .dna-shadow { transform: scale(0.5); } } } @layer dashboard { .dashboard { position: absolute; inset: 0; display: grid; place-items: center; perspective: 100px; transform: rotateY(0deg); translate: 0 0; } .dashboard.show { -webkit-animation: dashboard-enter 0.5s ease-in-out forwards, dashboard-rotation 5s 0.5s ease-in-out infinite; animation: dashboard-enter 0.5s ease-in-out forwards, dashboard-rotation 5s 0.5s ease-in-out infinite; } .dashboard.hide { -webkit-animation: dashboard-leave 0.5s ease-in-out forwards; animation: dashboard-leave 0.5s ease-in-out forwards; } @-webkit-keyframes dashboard-rotation { from { transform: rotateY(59deg) rotateX(0); } 50% { transform: rotateY(65deg) rotateX(-2deg); } to { transform: rotateY(59deg) rotateX(0); } } @keyframes dashboard-rotation { from { transform: rotateY(59deg) rotateX(0); } 50% { transform: rotateY(65deg) rotateX(-2deg); } to { transform: rotateY(59deg) rotateX(0); } } @-webkit-keyframes dashboard-enter { 80% { transform: rotateY(0); } to { transform: rotateY(59deg); translate: -50% 0; } } @keyframes dashboard-enter { 80% { transform: rotateY(0); } to { transform: rotateY(59deg); translate: -50% 0; } } @-webkit-keyframes dashboard-leave { 0% { transform: rotateY(59deg); translate: -50% 0; } 20% { transform: rotateY(0deg); } to { transform: rotateY(0deg); translate: 0 0; } } @keyframes dashboard-leave { 0% { transform: rotateY(59deg); translate: -50% 0; } 20% { transform: rotateY(0deg); } to { transform: rotateY(0deg); translate: 0 0; } } } @layer detail { .detail { position: absolute; inset: 0; display: grid; place-items: center; translate: 100% 0; } .detail .grid { position: absolute; left: 22vw; width: calc(68vw - 2vmin); display: grid; translate: 0 -10rem; height: 40vmin; gap: 2vmin; grid-template-columns: repeat(auto-fill, minmax(25vmin, 1fr)); } @media (max-width: 1000px) { .detail .grid { translate: 0 -20rem; } } .detail .grid .card { --size: 1.5vmin; border-radius: 0; min-height: 20vmin; translate: 100% 0; opacity: 0; } .detail .grid .card:nth-child(1) { --i: 0; } .detail .grid .card:nth-child(2) { --i: 1; } .detail .grid .card:nth-child(3) { --i: 2; } .detail .grid .card:nth-child(4) { --i: 3; } .detail .grid .card:nth-child(5) { --i: 4; } .detail .grid .card:nth-child(6) { --i: 5; } .detail .grid .card:nth-child(7) { --i: 6; } .detail .grid .card:nth-child(8) { --i: 7; } .detail .grid .card:nth-child(9) { --i: 8; } .detail .grid .card:nth-child(10) { --i: 9; } .detail .grid .card:nth-child(11) { --i: 10; } .detail .grid .card:nth-child(12) { --i: 11; } .detail .grid .card:nth-child(13) { --i: 12; } .detail .grid .card:nth-child(14) { --i: 13; } .detail .grid .card:nth-child(15) { --i: 14; } .detail .grid .card:nth-child(16) { --i: 15; } .detail .grid .card:nth-child(17) { --i: 16; } .detail .grid .card:nth-child(18) { --i: 17; } .detail .grid .card:nth-child(19) { --i: 18; } .detail .grid .card:nth-child(20) { --i: 19; } .detail .grid .card:nth-child(21) { --i: 20; } .detail.show { -webkit-animation: detail-enter 0.3s 0.2s linear forwards; animation: detail-enter 0.3s 0.2s linear forwards; } .detail.show .grid .card { -webkit-animation: card-item-enter 0.3s calc(var(--i) * .10s) ease-in-out forwards; animation: card-item-enter 0.3s calc(var(--i) * .10s) ease-in-out forwards; } .detail.hide { -webkit-animation: detail-leave 0.3s linear forwards; animation: detail-leave 0.3s linear forwards; } .detail.hide .grid .card { -webkit-animation: card-item-leave 0.3s ease-in-out forwards; animation: card-item-leave 0.3s ease-in-out forwards; } @-webkit-keyframes detail-enter { from { translate: 50% 0; } to { translate: 0 0; } } @keyframes detail-enter { from { translate: 50% 0; } to { translate: 0 0; } } @-webkit-keyframes detail-leave { from { translate: 0 0; } to { translate: 50% 0; } } @keyframes detail-leave { from { translate: 0 0; } to { translate: 50% 0; } } @-webkit-keyframes card-item-enter { from { translate: 100% 0; opacity: 0; } to { translate: 0; opacity: 1; } } @keyframes card-item-enter { from { translate: 100% 0; opacity: 0; } to { translate: 0; opacity: 1; } } @-webkit-keyframes card-item-leave { from { translate: 0; opacity: 1; } to { translate: 100% 0; opacity: 0; } } @keyframes card-item-leave { from { translate: 0; opacity: 1; } to { translate: 100% 0; opacity: 0; } } .detail-card { display: flex; flex-direction: column; align-items: flex-start; padding: 1.5vmin; gap: 1.5vmin; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); } .detail-card .title { font-size: 2vmin; } .detail-card .description { font-size: 1.1vmin; overflow: hidden; overflow-y: auto; -webkit-line-clamp: 4; -webkit-box-orient: vertical; text-overflow: ellipsis; } @media (hover) { .detail-card { cursor: pointer; } .detail-card:hover { -webkit-backdrop-filter: blur(2rem) brightness(0.9); backdrop-filter: blur(2rem) brightness(0.9); } } } @layer global { .filter { position: absolute; visibility: hidden; pointer-events: none; } .card.page-title { --size: 1rem; position: absolute; width: -webkit-min-content; width: -moz-min-content; width: min-content; padding: 0.4rem 4rem; border-radius: 0; top: 4rem; color: rgba(0, 0, 0, 0.24); white-space: nowrap; font-size: 0.6rem; } body { width: 100vw; height: 100vh; font-family: "Rajdhani"; background-color: var(--color-surface); color: var(--color-primary); overflow: hidden; position: relative; margin: 0; } body:after { content: ""; position: absolute; background: url(//repo.bfw.wiki/bfwrepo/image/6114545572f7e.png); mix-blend-mode: overlay; inset: 0; pointer-events: none; opacity: 1; filter: invert(1) brightness(0.2); z-index: 1000; } body:before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 1rem; background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6) 0.0625rem, transparent 0.0625rem, transparent 2rem) repeat-y; z-index: 11; pointer-events: none; opacity: 0.7; } body > label { position: absolute; inset: 0; display: grid; place-items: center; } body > label > input { position: absolute; visibility: hidden; } body > label::after { content: ""; position: absolute; inset: 0; pointer-events: none; -webkit-backdrop-filter: blur(10rem); backdrop-filter: blur(10rem); -webkit-mask: linear-gradient(to top, black 5%, transparent 15%); mask: linear-gradient(to top, black 5%, transparent 15%); } * { box-sizing: border-box; } } a.labs-follow-me { left: 2rem; right: 2rem; bottom: 1rem; top: unset; text-align: center; } </style> </head> <body> <label> <div class="background"> <div class="r2"></div> <div class="r3"></div> <div class="r4"></div> <div class="r5"></div> <div class="r6"></div> <div class="r7"></div> <div class="r8"></div> <div class="r1"></div> <div class="r9"></div> <div class="r10"></div> <div class="r11"></div> </div> <div class="bars left"> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> </div> <div class="bars right"> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> </div> <div id="dashboard" class="dashboard"> <div class="sphere-highlighting"></div> <div class="sphere-lines"></div> <div class="sphere-blur"></div> <div class="sphere"> <div class="dna-shadow"></div> <div class="dna-container"> <div class="dna"> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> <div class="item"> <div></div> <div></div> <div></div> </div> </div> </div> <div class="glass"></div> </div> <div class="grid-container" id="container"> <div class="column" style="--column: 0"> <div class="hexagon" style="--index: 1; --icon: '🔬';"></div> <div class="hexagon" style="--index: 2; --icon: '🧪';"></div> <div class="hexagon" style="--index: 3; --icon: '⚛︎';"></div> <div class="hexagon" style="--index: 4; --icon: '🧪';"></div> <div class="hexagon" style="--index: 5; --icon: '🧬';"></div> </div> <div class="column" style="--column: 1"> <div class="hexagon" style="--index: 1; --icon: '🧪';"></div> <div class="hexagon" style="--index: 2; --icon: '🧪';"></div> <div class="hexagon" style="--index: 3; --icon: '🧪';"></div> <div class="hexagon" style="--index: 4; --icon: '🔬';"></div> <div class="hexagon" style="--index: 5; --icon: '🧬';"></div> <div class="hexagon" style="--index: 6; --icon: '🧬';"></div> </div> <div class="column" style="--column: 2"> <div class="hexagon" style="--index: 1; --icon: '🧬';"></div> <div class="hexagon" style="--index: 2; --icon: '🧬';"></div> <div class="hexagon" style="--index: 3; --icon: '⚛︎';"></div> <div class="hexagon" style="--index: 4; --icon: '🧬';"></div> <div class="hexagon" style="--index: 5; --icon: '⚛︎';"></div> <div class="hexagon" style="--index: 6; --icon: '🔬';"></div> <div class="hexagon" style="--index: 7; --icon: '🔬';"></div> </div> <div class="column" style="--column: 3"> <div class="hexagon" style="--index: 1; --icon: '🧪';"></div> <div class="hexagon" style="--index: 2; --icon: '🔬';"></div> <div class="hexagon" style="--index: 3; --icon: '🧬';"></div> <div class="hexagon" style="--index: 4; --icon: '🧬';"></div> <div class="hexagon" style="--index: 5; --icon: '⚛︎';"></div> <div class="hexagon" style="--index: 6; --icon: '🔬';"></div> <div class="hexagon" style="--index: 7; --icon: '🧪';"></div> <div class="hexagon" style="--index: 8; --icon: '🧪';"></div> </div> <div class="column" style="--column: 4"> <div class="hexagon" style="--index: 1; --icon: '🧪';"></div> <div class="hexagon" style="--index: 2; --icon: '⚛︎';"></div> <div class="hexagon" style="--index: 3; --icon: '⚛︎';"></div> <div class="hexagon" style="--index: 4; --icon: '⚛︎';"></div> <div class="hexagon" style="--index: 5; --icon: '🔬';"></div> <div class="hexagon" style="--index: 6; --icon: '🔬';"></div> <div class="hexagon" style="--index: 7; --icon: '🧬';"></div> <div class="hexagon" style="--index: 8; --icon: '🧪';"></div> <div class="hexagon" style="--index: 9; --icon: '🧪';"></div> </div> <div class="column" style="--column: 5"> <div class="hexagon" style="--index: 1; --icon: '🔬';"></div> <div class="hexagon" style="--index: 2; --icon: '🧪';"></div> <div class="hexagon" style="--index: 3; --icon: '⚛︎';"></div> <div class="hexagon" style="--index: 4; --icon: '🧬';"></div> <div class="hexagon" style="--index: 5; --icon: '🧪';"></div> <div class="hexagon" style="--index: 6; --icon: '🧪';"></div> <div class="hexagon" style="--index: 7; --icon: '🧪';"></div> <div class="hexagon" style="--index: 8; --icon: '🧪';"></div> </div> <div class="column" style="--column: 6"> <div class="hexagon" style="--index: 1; --icon: '🔬';"></div> <div class="hexagon" style="--index: 2; --icon: '🧪';"></div> <div class="hexagon" style="--index: 3; --icon: '🔬';"></div> <div class="hexagon" style="--index: 4; --icon: '🧪';"></div> <div class="hexagon" style="--index: 5; --icon: '🧪';"></div> <div class="hexagon" style="--index: 6; --icon: '🔬';"></div> <div class="hexagon" style="--index: 7; --icon: '🧪';"></div> </div> <div class="column" style="--column: 7"> <div class="hexagon" style="--index: 1; --icon: '🧬';"></div> <div class="hexagon" style="--index: 2; --icon: '🧪';"></div> <div class="hexagon" style="--index: 3; --icon: '🔬';"></div> <div class="hexagon" style="--index: 4; --icon: '⚛︎';"></div> <div class="hexagon" style="--index: 5; --icon: '🔬';"></div> <div class="hexagon" style="--index: 6; --icon: '🔬';"></div> </div> <div class="column" style="--column: 8"> <div class="hexagon" style="--index: 1; --icon: '🔬';"></div> <div class="hexagon" style="--index: 2; --icon: '🧬';"></div> <div class="hexagon" style="--index: 3; --icon: '🧪';"></div> <div class="hexagon" style="--index: 4; --icon: '⚛︎';"></div> <div class="hexagon" style="--index: 5; --icon: '🧪';"></div> </div> </div> </div> <div id="detail" class="detail"> <div class="grid"> <div class="card detail-card"> <div class="title">Title</div> <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis bibendum elit commodo porttitor. Praesent vehicula tristique lobortis. Maecenas sed ligula sit amet dui porta pretium. Praesent vel dolor nec purus egestas scelerisque. Nulla sed nisl ultricies, venenatis diam at, dignissim ex. Ut non quam enim. Donec gravida augue quis sapien ultricies efficitur. Nulla pulvinar ex sed turpis malesuada, vel vulputate augue dictum. Donec non condimentum nulla. Nullam malesuada ornare eleifend. Curabitur consequat leo id rutrum eleifend. Aliquam egestas justo felis, sit amet volutpat eros rhoncus lacinia. Suspendisse vulputate tristique eros, vel efficitur dolor tincidunt in.</div> </div> <div class="card detail-card"> <div class="title">Title</div> <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis bibendum elit commodo porttitor. Praesent vehicula tristique lobortis. Maecenas sed ligula sit amet dui porta pretium. Praesent vel dolor nec purus egestas scelerisque. Nulla sed nisl ultricies, venenatis diam at, dignissim ex. Ut non quam enim. Donec gravida augue quis sapien ultricies efficitur. Nulla pulvinar ex sed turpis malesuada, vel vulputate augue dictum. Donec non condimentum nulla. Nullam malesuada ornare eleifend. Curabitur consequat leo id rutrum eleifend. Aliquam egestas justo felis, sit amet volutpat eros rhoncus lacinia. Suspendisse vulputate tristique eros, vel efficitur dolor tincidunt in.</div> </div> <div class="card detail-card"> <div class="title">Title</div> <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis bibendum elit commodo porttitor. Praesent vehicula tristique lobortis. Maecenas sed ligula sit amet dui porta pretium. Praesent vel dolor nec purus egestas scelerisque. Nulla sed nisl ultricies, venenatis diam at, dignissim ex. Ut non quam enim. Donec gravida augue quis sapien ultricies efficitur. Nulla pulvinar ex sed turpis malesuada, vel vulputate augue dictum. Donec non condimentum nulla. Nullam malesuada ornare eleifend. Curabitur consequat leo id rutrum eleifend. Aliquam egestas justo felis, sit amet volutpat eros rhoncus lacinia. Suspendisse vulputate tristique eros, vel efficitur dolor tincidunt in.</div> </div> <div class="card detail-card"> <div class="title">Title</div> <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis bibendum elit commodo porttitor. Praesent vehicula tristique lobortis. Maecenas sed ligula sit amet dui porta pretium. Praesent vel dolor nec purus egestas scelerisque. Nulla sed nisl ultricies, venenatis diam at, dignissim ex. Ut non quam enim. Donec gravida augue quis sapien ultricies efficitur. Nulla pulvinar ex sed turpis malesuada, vel vulputate augue dictum. Donec non condimentum nulla. Nullam malesuada ornare eleifend. Curabitur consequat leo id rutrum eleifend. Aliquam egestas justo felis, sit amet volutpat eros rhoncus lacinia. Suspendisse vulputate tristique eros, vel efficitur dolor tincidunt in.</div> </div> <div class="card detail-card"> <div class="title">Title</div> <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis bibendum elit commodo porttitor. Praesent vehicula tristique lobortis. Maecenas sed ligula sit amet dui porta pretium. Praesent vel dolor nec purus egestas scelerisque. Nulla sed nisl ultricies, venenatis diam at, dignissim ex. Ut non quam enim. Donec gravida augue quis sapien ultricies efficitur. Nulla pulvinar ex sed turpis malesuada, vel vulputate augue dictum. Donec non condimentum nulla. Nullam malesuada ornare eleifend. Curabitur consequat leo id rutrum eleifend. Aliquam egestas justo felis, sit amet volutpat eros rhoncus lacinia. Suspendisse vulputate tristique eros, vel efficitur dolor tincidunt in.</div> </div> <div class="card detail-card"> <div class="title">Title</div> <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis bibendum elit commodo porttitor. Praesent vehicula tristique lobortis. Maecenas sed ligula sit amet dui porta pretium. Praesent vel dolor nec purus egestas scelerisque. Nulla sed nisl ultricies, venenatis diam at, dignissim ex. Ut non quam enim. Donec gravida augue quis sapien ultricies efficitur. Nulla pulvinar ex sed turpis malesuada, vel vulputate augue dictum. Donec non condimentum nulla. Nullam malesuada ornare eleifend. Curabitur consequat leo id rutrum eleifend. Aliquam egestas justo felis, sit amet volutpat eros rhoncus lacinia. Suspendisse vulputate tristique eros, vel efficitur dolor tincidunt in.</div> </div> <div class="card detail-card"> <div class="title">Title</div> <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis bibendum elit commodo porttitor. Praesent vehicula tristique lobortis. Maecenas sed ligula sit amet dui porta pretium. Praesent vel dolor nec purus egestas scelerisque. Nulla sed nisl ultricies, venenatis diam at, dignissim ex. Ut non quam enim. Donec gravida augue quis sapien ultricies efficitur. Nulla pulvinar ex sed turpis malesuada, vel vulputate augue dictum. Donec non condimentum nulla. Nullam malesuada ornare eleifend. Curabitur consequat leo id rutrum eleifend. Aliquam egestas justo felis, sit amet volutpat eros rhoncus lacinia. Suspendisse vulputate tristique eros, vel efficitur dolor tincidunt in.</div> </div> <div class="card detail-card"> <div class="title">Title</div> <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis bibendum elit commodo porttitor. Praesent vehicula tristique lobortis. Maecenas sed ligula sit amet dui porta pretium. Praesent vel dolor nec purus egestas scelerisque. Nulla sed nisl ultricies, venenatis diam at, dignissim ex. Ut non quam enim. Donec gravida augue quis sapien ultricies efficitur. Nulla pulvinar ex sed turpis malesuada, vel vulputate augue dictum. Donec non condimentum nulla. Nullam malesuada ornare eleifend. Curabitur consequat leo id rutrum eleifend. Aliquam egestas justo felis, sit amet volutpat eros rhoncus lacinia. Suspendisse vulputate tristique eros, vel efficitur dolor tincidunt in.</div> </div> <div class="card detail-card"> <div class="title">Title</div> <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis bibendum elit commodo porttitor. Praesent vehicula tristique lobortis. Maecenas sed ligula sit amet dui porta pretium. Praesent vel dolor nec purus egestas scelerisque. Nulla sed nisl ultricies, venenatis diam at, dignissim ex. Ut non quam enim. Donec gravida augue quis sapien ultricies efficitur. Nulla pulvinar ex sed turpis malesuada, vel vulputate augue dictum. Donec non condimentum nulla. Nullam malesuada ornare eleifend. Curabitur consequat leo id rutrum eleifend. Aliquam egestas justo felis, sit amet volutpat eros rhoncus lacinia. Suspendisse vulputate tristique eros, vel efficitur dolor tincidunt in.</div> </div> <div class="card detail-card"> <div class="title">Title</div> <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis bibendum elit commodo porttitor. Praesent vehicula tristique lobortis. Maecenas sed ligula sit amet dui porta pretium. Praesent vel dolor nec purus egestas scelerisque. Nulla sed nisl ultricies, venenatis diam at, dignissim ex. Ut non quam enim. Donec gravida augue quis sapien ultricies efficitur. Nulla pulvinar ex sed turpis malesuada, vel vulputate augue dictum. Donec non condimentum nulla. Nullam malesuada ornare eleifend. Curabitur consequat leo id rutrum eleifend. Aliquam egestas justo felis, sit amet volutpat eros rhoncus lacinia. Suspendisse vulputate tristique eros, vel efficitur dolor tincidunt in.</div> </div> <div class="card detail-card"> <div class="title">Title</div> <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis bibendum elit commodo porttitor. Praesent vehicula tristique lobortis. Maecenas sed ligula sit amet dui porta pretium. Praesent vel dolor nec purus egestas scelerisque. Nulla sed nisl ultricies, venenatis diam at, dignissim ex. Ut non quam enim. Donec gravida augue quis sapien ultricies efficitur. Nulla pulvinar ex sed turpis malesuada, vel vulputate augue dictum. Donec non condimentum nulla. Nullam malesuada ornare eleifend. Curabitur consequat leo id rutrum eleifend. Aliquam egestas justo felis, sit amet volutpat eros rhoncus lacinia. Suspendisse vulputate tristique eros, vel efficitur dolor tincidunt in.</div> </div> <div class="card detail-card"> <div class="title">Title</div> <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis bibendum elit commodo porttitor. Praesent vehicula tristique lobortis. Maecenas sed ligula sit amet dui porta pretium. Praesent vel dolor nec purus egestas scelerisque. Nulla sed nisl ultricies, venenatis diam at, dignissim ex. Ut non quam enim. Donec gravida augue quis sapien ultricies efficitur. Nulla pulvinar ex sed turpis malesuada, vel vulputate augue dictum. Donec non condimentum nulla. Nullam malesuada ornare eleifend. Curabitur consequat leo id rutrum eleifend. Aliquam egestas justo felis, sit amet volutpat eros rhoncus lacinia. Suspendisse vulputate tristique eros, vel efficitur dolor tincidunt in.</div> </div> <div class="card detail-card"> <div class="title">Title</div> <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis bibendum elit commodo porttitor. Praesent vehicula tristique lobortis. Maecenas sed ligula sit amet dui porta pretium. Praesent vel dolor nec purus egestas scelerisque. Nulla sed nisl ultricies, venenatis diam at, dignissim ex. Ut non quam enim. Donec gravida augue quis sapien ultricies efficitur. Nulla pulvinar ex sed turpis malesuada, vel vulputate augue dictum. Donec non condimentum nulla. Nullam malesuada ornare eleifend. Curabitur consequat leo id rutrum eleifend. Aliquam egestas justo felis, sit amet volutpat eros rhoncus lacinia. Suspendisse vulputate tristique eros, vel efficitur dolor tincidunt in.</div> </div> <div class="card detail-card"> <div class="title">Title</div> <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis bibendum elit commodo porttitor. Praesent vehicula tristique lobortis. Maecenas sed ligula sit amet dui porta pretium. Praesent vel dolor nec purus egestas scelerisque. Nulla sed nisl ultricies, venenatis diam at, dignissim ex. Ut non quam enim. Donec gravida augue quis sapien ultricies efficitur. Nulla pulvinar ex sed turpis malesuada, vel vulputate augue dictum. Donec non condimentum nulla. Nullam malesuada ornare eleifend. Curabitur consequat leo id rutrum eleifend. Aliquam egestas justo felis, sit amet volutpat eros rhoncus lacinia. Suspendisse vulputate tristique eros, vel efficitur dolor tincidunt in.</div> </div> <div class="card detail-card"> <div class="title">Title</div> <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis bibendum elit commodo porttitor. Praesent vehicula tristique lobortis. Maecenas sed ligula sit amet dui porta pretium. Praesent vel dolor nec purus egestas scelerisque. Nulla sed nisl ultricies, venenatis diam at, dignissim ex. Ut non quam enim. Donec gravida augue quis sapien ultricies efficitur. Nulla pulvinar ex sed turpis malesuada, vel vulputate augue dictum. Donec non condimentum nulla. Nullam malesuada ornare eleifend. Curabitur consequat leo id rutrum eleifend. Aliquam egestas justo felis, sit amet volutpat eros rhoncus lacinia. Suspendisse vulputate tristique eros, vel efficitur dolor tincidunt in.</div> </div> <div class="card detail-card"> <div class="title">Title</div> <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis bibendum elit commodo porttitor. Praesent vehicula tristique lobortis. Maecenas sed ligula sit amet dui porta pretium. Praesent vel dolor nec purus egestas scelerisque. Nulla sed nisl ultricies, venenatis diam at, dignissim ex. Ut non quam enim. Donec gravida augue quis sapien ultricies efficitur. Nulla pulvinar ex sed turpis malesuada, vel vulputate augue dictum. Donec non condimentum nulla. Nullam malesuada ornare eleifend. Curabitur consequat leo id rutrum eleifend. Aliquam egestas justo felis, sit amet volutpat eros rhoncus lacinia. Suspendisse vulputate tristique eros, vel efficitur dolor tincidunt in.</div> </div> <div class="card detail-card"> <div class="title">Title</div> <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis bibendum elit commodo porttitor. Praesent vehicula tristique lobortis. Maecenas sed ligula sit amet dui porta pretium. Praesent vel dolor nec purus egestas scelerisque. Nulla sed nisl ultricies, venenatis diam at, dignissim ex. Ut non quam enim. Donec gravida augue quis sapien ultricies efficitur. Nulla pulvinar ex sed turpis malesuada, vel vulputate augue dictum. Donec non condimentum nulla. Nullam malesuada ornare eleifend. Curabitur consequat leo id rutrum eleifend. Aliquam egestas justo felis, sit amet volutpat eros rhoncus lacinia. Suspendisse vulputate tristique eros, vel efficitur dolor tincidunt in.</div> </div> <div class="card detail-card"> <div class="title">Title</div> <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis bibendum elit commodo porttitor. Praesent vehicula tristique lobortis. Maecenas sed ligula sit amet dui porta pretium. Praesent vel dolor nec purus egestas scelerisque. Nulla sed nisl ultricies, venenatis diam at, dignissim ex. Ut non quam enim. Donec gravida augue quis sapien ultricies efficitur. Nulla pulvinar ex sed turpis malesuada, vel vulputate augue dictum. Donec non condimentum nulla. Nullam malesuada ornare eleifend. Curabitur consequat leo id rutrum eleifend. Aliquam egestas justo felis, sit amet volutpat eros rhoncus lacinia. Suspendisse vulputate tristique eros, vel efficitur dolor tincidunt in.</div> </div> <div class="card detail-card"> <div class="title">Title</div> <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis bibendum elit commodo porttitor. Praesent vehicula tristique lobortis. Maecenas sed ligula sit amet dui porta pretium. Praesent vel dolor nec purus egestas scelerisque. Nulla sed nisl ultricies, venenatis diam at, dignissim ex. Ut non quam enim. Donec gravida augue quis sapien ultricies efficitur. Nulla pulvinar ex sed turpis malesuada, vel vulputate augue dictum. Donec non condimentum nulla. Nullam malesuada ornare eleifend. Curabitur consequat leo id rutrum eleifend. Aliquam egestas justo felis, sit amet volutpat eros rhoncus lacinia. Suspendisse vulputate tristique eros, vel efficitur dolor tincidunt in.</div> </div> <div class="card detail-card"> <div class="title">Title</div> <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis bibendum elit commodo porttitor. Praesent vehicula tristique lobortis. Maecenas sed ligula sit amet dui porta pretium. Praesent vel dolor nec purus egestas scelerisque. Nulla sed nisl ultricies, venenatis diam at, dignissim ex. Ut non quam enim. Donec gravida augue quis sapien ultricies efficitur. Nulla pulvinar ex sed turpis malesuada, vel vulputate augue dictum. Donec non condimentum nulla. Nullam malesuada ornare eleifend. Curabitur consequat leo id rutrum eleifend. Aliquam egestas justo felis, sit amet volutpat eros rhoncus lacinia. Suspendisse vulputate tristique eros, vel efficitur dolor tincidunt in.</div> </div> </div> </div> <div class="card page-title">LABS 42</div> <div class="card avatar"> <div class="image"> <img src="//repo.bfw.wiki/bfwrepo/image/66134d2c8679c.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_500,/quality,q_90" alt=""> </div> <div class="actions"> <div class="action">⚕︎</div> </div> </div> </label> <svg class=filter xmlns="http://www.w3.org/2000/svg" version="1.1"> <filter id="blurFilter"> <feGaussianBlur stdDeviation="4.5"></feGaussianBlur> <feColorMatrix type="matrix" values=" 1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9"></feColorMatrix> </filter> </svg> <!-- partial --> <script > (()=>{ const styleContent = `.labs-follow-me-twitter, .labs-follow-me { transform: scale(1); position: fixed; transition: background 0.3s ease; padding: 1rem; right: .25rem; top: .25rem; color: currentColor !important; z-index: 1000000; &:visited, &:active { color: currentColor; } @media (hover) { &:hover { background: rgba(255, 255, 255, 0.04); } } } `; const hide = `.labs-follow-me{display: none !important}`; const disableAnimations = ` *, *:before, *:after {animation-play-state: paused !important; --base-speed: 0s; } `; const embed = new URLSearchParams(window.location.search).has("labs-embed"); const style = document.createElement("style"); if (embed) { style.innerHTML = hide; } else { style.innerHTML = styleContent; } document.head.appendChild(style); if (embed) { setTimeout(()=>{ const style2 = document.createElement("style"); style2.innerHTML = disableAnimations; document.head.appendChild(style2); window.clearInterval(0); window.clearInterval(1); window.clearInterval(2); window.setTimeout = window.setInterval = window.requestAnimationFrame = ()=>{} ; document.querySelectorAll("animate").forEach((node)=>node.setAttribute("dur", "0s")); } , 5000); } let followMeButton = document.createElement("a"); followMeButton.classList.add("labs-follow-me-twitter"); followMeButton.classList.add("labs-follow-me"); document.body.appendChild(followMeButton); followMeButton.href = "https://twitter.com/kdenerz"; followMeButton.target = "_top"; followMeButton.setAttribute('title', 'Follow me on twitter to see more cool stuff about CSS, JS, Material, Angular and UX/UI design.'); followMeButton.innerHTML = `<svg width="74" height="23" viewBox="0 0 74 23" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M25.1017 7.37034C25.1017 7.28985 25.0011 7.44076 24.9911 7.45082L24.8301 7.55143C24.8301 7.62186 24.7295 7.63192 24.7295 7.67216C24.7295 7.68222 24.7396 7.69228 24.7496 7.70234C24.7396 7.72246 24.7194 7.74259 24.6993 7.74259C24.6792 7.74259 24.6792 7.7124 24.6792 7.70234C24.6591 7.70234 24.649 7.7124 24.649 7.72246C24.649 7.74259 24.6591 7.76271 24.6691 7.78283L24.6389 7.86331H24.5886L24.5585 7.90356L24.488 7.93374H24.4478L24.4176 7.97398C24.3774 7.97398 24.2667 7.9941 24.2667 8.04441C24.2063 8.05447 23.9146 8.12489 23.9146 8.21544C23.9146 8.23556 23.9246 8.23556 23.9448 8.23556C24.0353 8.23556 24.2566 8.12489 24.3371 8.07459C24.3472 8.06453 24.3572 8.03435 24.3673 8.03435C24.3774 8.03435 24.3774 8.07459 24.3774 8.07459C24.3874 8.10477 24.4277 8.11483 24.4579 8.11483H24.5182L24.5283 8.04441C24.5484 8.04441 24.5987 8.04441 24.5987 8.01423C24.6389 8.03435 24.6792 8.02429 24.6792 7.97398H24.8301C24.8301 7.92368 25.2225 7.83313 25.2728 7.83313C25.2929 7.83313 25.313 7.83313 25.313 7.86331C25.313 7.88344 25.2929 7.91362 25.2828 7.93374H25.142L25.0816 8.01423L24.9508 8.07459C24.9408 8.08465 24.9408 8.08465 24.9307 8.08465C24.8804 8.08465 24.8703 8.04441 24.8703 8.13496L24.81 8.23556L24.7194 8.27581C24.7194 8.29593 24.7094 8.31605 24.6792 8.31605C24.5182 8.31605 24.6591 8.4066 24.5383 8.4066H24.5182C24.4981 8.43678 24.488 8.47702 24.488 8.5072C24.5383 8.5072 24.5283 8.54745 24.5886 8.54745C24.6289 8.54745 24.6591 8.53739 24.6893 8.5072C24.6993 8.5072 24.7496 8.5072 24.7496 8.51726C24.7496 8.53739 24.7295 8.54745 24.7194 8.54745C24.7194 8.58769 24.7798 8.58769 24.81 8.58769H24.8603C24.8905 8.56757 24.9307 8.53739 24.9508 8.5072H25.0514L25.1621 8.42672C25.2023 8.42672 25.2225 8.38647 25.2627 8.38647C25.2325 8.49714 25.2325 8.51726 25.1017 8.54745C25.1017 8.62793 24.7496 8.7386 24.7496 8.75872C24.7496 8.82915 24.6691 8.87945 24.6088 8.87945L24.3271 9.10079C24.2063 9.10079 24.0353 9.2517 23.9146 9.2517C23.9146 9.29194 23.6228 9.43279 23.5926 9.43279L23.5222 9.51328C23.4317 9.51328 23.482 9.50322 23.4317 9.55352C23.3814 9.55352 23.3612 9.51328 23.3109 9.51328L23.2304 9.47304C23.2204 9.47304 23.2003 9.47304 23.2003 9.4831C23.2003 9.50322 23.3411 9.55352 23.3612 9.56358C23.3612 9.59377 23.3411 9.62395 23.3109 9.62395C23.2908 9.64407 23.1399 9.8151 23.1097 9.8151C23.0997 9.8151 23.0997 9.79498 23.0997 9.78492C23.0795 9.75474 23.0292 9.74468 22.989 9.74468C22.9487 9.80504 22.828 9.83522 22.828 9.85534C22.828 9.91571 22.7777 9.90565 22.7173 9.91571L22.6369 9.9962C22.6369 10.0163 22.6268 10.0163 22.6067 10.0163C22.5866 10.0163 22.5161 9.9962 22.5161 10.0364L22.4859 10.1169C22.5362 10.1169 22.4759 10.1471 22.4658 10.1572L22.4055 10.0867L22.3954 10.127C22.3954 10.1471 22.4155 10.1572 22.4356 10.1572L22.4457 10.2678L22.5061 10.2377C22.5362 10.2377 22.5664 10.2276 22.5765 10.1974C22.6067 10.1974 22.6469 10.1873 22.657 10.1572C22.6872 10.1471 22.7073 10.137 22.7375 10.137C22.7676 10.137 22.7878 10.1471 22.7878 10.1773L22.7274 10.2377C22.7073 10.2377 22.667 10.2377 22.657 10.2678C22.6067 10.2678 22.5564 10.3081 22.5161 10.3483C22.4658 10.3483 22.4155 10.3886 22.3853 10.4288L22.2847 10.4691C22.2545 10.5093 22.1338 10.5294 22.0936 10.5395C22.0936 10.5395 22.0634 10.5395 22.0634 10.5495C22.0634 10.5697 22.0936 10.5898 22.1137 10.5998C22.0332 10.6401 21.9427 10.6904 21.8521 10.7004C21.8521 10.7105 21.8521 10.7206 21.8421 10.7206C21.8219 10.7206 21.8018 10.7004 21.7918 10.6904L21.7213 10.7206C21.7918 10.8916 21.5905 10.7809 21.5905 10.9017C21.5302 10.9318 21.4799 11.0023 21.4597 11.0626H21.4296C21.3994 11.0626 21.3994 11.0425 21.3994 11.0123C21.3793 11.0023 21.3591 10.9922 21.339 10.9922C21.329 10.9922 21.3189 11.0023 21.3189 11.0224C21.2988 11.0224 21.1881 11.1029 21.1177 11.1029L21.0875 11.1733C21.1479 11.1733 21.1277 11.2236 21.0875 11.2337L20.9165 11.294C20.9466 11.4449 20.997 11.616 21.0774 11.7468C21.1177 11.7468 21.1378 11.7669 21.1378 11.8071V11.8273C21.2485 11.948 21.3491 12.109 21.3994 12.2699L21.4799 12.3303C21.4799 12.3504 21.4799 12.3907 21.5101 12.4007C21.5101 12.451 21.5503 12.5013 21.5905 12.5416C21.5905 12.5717 21.6006 12.6019 21.6308 12.612C21.6509 12.6925 21.7414 12.783 21.7414 12.8635C21.7616 12.9138 21.8018 12.9541 21.8421 12.9842L21.9024 13.1352C21.9527 13.1352 21.993 13.2559 22.003 13.2961C22.0533 13.2961 22.0735 13.3364 22.1137 13.3364C22.1036 13.3665 22.0936 13.447 22.1439 13.447V13.5476C22.1841 13.608 22.2445 13.6784 22.3049 13.7187C22.3049 13.7489 22.3149 13.7891 22.3451 13.7992C22.3451 13.8193 22.3552 13.8696 22.3853 13.8696L22.3451 13.9098C22.3451 13.9501 22.3853 13.93 22.3853 13.9702C22.496 14.0708 22.6067 14.2418 22.7173 14.3123V14.4129C22.7676 14.4732 22.818 14.5235 22.8783 14.5738C22.9689 14.5738 23.0393 14.7348 23.0695 14.8052C23.0795 14.8052 23.0896 14.8052 23.0896 14.8153C23.0896 14.8354 23.0695 14.8656 23.0594 14.8757C23.1399 14.8757 23.2204 15.0266 23.2405 15.097C23.321 15.1372 23.4015 15.1473 23.4015 15.258C23.4719 15.258 23.4719 15.258 23.4719 15.3284C23.5423 15.3888 23.6127 15.4391 23.6932 15.4894C23.6932 15.4894 23.7033 15.4994 23.7033 15.5095C23.7033 15.5296 23.5826 15.5296 23.5624 15.5296L23.4719 15.4894C23.4417 15.4894 23.3914 15.4793 23.3713 15.4491L23.2807 15.4089L23.2304 15.3385C23.1701 15.3385 23.0594 15.2882 23.0594 15.2177H23.0091C22.9588 15.1272 22.8381 15.0467 22.7777 14.9461C22.7073 14.9461 22.6771 14.8455 22.5966 14.8455C22.5262 14.7751 22.4457 14.7046 22.3954 14.6141C22.325 14.5738 22.2545 14.5235 22.2143 14.4531L22.1942 14.4934L22.2244 14.6141C22.2344 14.6141 22.2646 14.6141 22.2646 14.6241C22.2646 14.6543 22.2244 14.6543 22.2042 14.6543C22.1539 14.5738 22.0936 14.4732 22.0131 14.4129C22.003 14.4129 21.993 14.4229 21.993 14.433C21.993 14.4632 22.0131 14.5034 22.0332 14.5336L22.1137 14.5738C22.1137 14.7046 22.2042 14.7248 22.3049 14.8052C22.3954 14.8052 22.3954 14.9461 22.4859 14.9461L22.6369 15.1071C22.6369 15.1674 22.7375 15.2378 22.7878 15.268C22.7878 15.3183 22.9085 15.3686 22.9487 15.3888L23.0091 15.4491C23.0493 15.4491 23.0795 15.4692 23.0795 15.5095V15.5296C23.2304 15.6302 23.4417 15.7912 23.5524 15.932C23.4719 15.932 23.4317 15.8616 23.3914 15.8113C23.3512 15.8113 23.3109 15.8013 23.2807 15.7711C23.2807 15.8415 23.2506 15.8013 23.2304 15.7711C23.0896 15.7711 22.7676 15.6302 22.6771 15.5699C22.6771 15.59 22.6771 15.6302 22.657 15.6503C22.6167 15.6503 22.5463 15.6202 22.5463 15.5799C22.5463 15.5598 22.5664 15.5196 22.5866 15.5196C22.5966 15.5196 22.5966 15.5296 22.5966 15.5397L22.6369 15.5497L22.5966 15.4894C22.5765 15.5196 22.5161 15.5598 22.5161 15.4894L22.4859 15.5095V15.5699C22.5362 15.6202 22.6872 15.8113 22.7777 15.8113C22.7475 15.922 22.8683 15.8616 22.8683 15.922C22.8683 15.9522 23.0192 16.0427 23.0594 16.0427C23.1097 16.0729 23.16 16.1232 23.2103 16.1634C23.3109 16.1634 23.2707 16.2339 23.4719 16.2339L23.5021 16.264C23.5323 16.264 23.5524 16.2741 23.5524 16.3043C23.5524 16.3244 23.5524 16.3445 23.5826 16.3445C23.6429 16.3647 23.7033 16.4049 23.7435 16.4552C23.7737 16.4552 23.8341 16.4753 23.8341 16.5156C23.8341 16.5357 23.7838 16.5357 23.7737 16.5357C23.7134 16.5357 23.6127 16.4954 23.5121 16.4954C23.5121 16.4653 23.482 16.4552 23.4518 16.4552C23.321 16.4552 23.1902 16.3445 23.0594 16.3445C23.0594 16.3244 23.0594 16.3043 23.0292 16.3043C22.999 16.3043 22.989 16.3043 22.989 16.264C22.8481 16.264 22.6771 16.1131 22.5161 16.083C22.5161 16.0628 22.5161 16.0427 22.4859 16.0427C22.4658 16.0427 22.4457 16.0427 22.4457 16.0125C22.3149 15.9522 22.1841 15.8214 22.0735 15.7308C22.003 15.7308 21.5201 15.2982 21.4799 15.2982C21.4094 15.2077 21.2787 15.097 21.168 15.0568C21.168 15.0366 21.1579 15.0266 21.1378 15.0266C21.1076 15.0266 21.0875 15.0266 21.0875 14.9863C20.997 14.926 20.9265 14.8455 20.8561 14.765C20.7756 14.765 20.7656 14.6141 20.675 14.6141C20.675 14.4632 20.4134 14.4732 20.4134 14.3424C20.343 14.2418 20.2826 14.1412 20.2223 14.0406C20.1921 14.0406 20.1619 14.0306 20.1619 14.0004V13.9803C20.0814 13.9199 20.011 13.8394 19.9607 13.7589L19.9506 13.6684L19.8903 13.6483C19.8198 13.5175 19.7897 13.437 19.6589 13.3364C19.6388 13.3364 19.6086 13.3263 19.6086 13.2961L19.6186 13.2559C19.5482 13.2559 19.5583 13.105 19.4979 13.105L19.4375 13.0245L19.4778 12.9842C19.3571 13.0144 19.3973 12.8736 19.3973 12.8031C19.347 12.8031 19.3269 12.7629 19.2766 12.7629C19.2766 12.8333 19.2061 12.8836 19.2061 12.9541C19.2061 13.0144 19.1055 13.0245 19.1055 13.0748C19.1055 13.0848 19.1156 13.0949 19.1257 13.105L19.015 13.2659C18.9546 13.3062 19.015 13.4068 18.9446 13.437L18.9043 13.5074C18.9043 13.5476 18.8741 13.5577 18.8741 13.5979L18.8339 13.6684C18.8339 13.7589 18.7534 13.769 18.7534 13.8495C18.7534 13.8796 18.7433 13.9199 18.7132 13.93C18.7132 14.0004 18.6729 14.0507 18.6729 14.1312L18.6327 14.1613C18.5623 14.3123 18.4415 14.4833 18.4214 14.6543C18.5119 14.6543 18.3711 14.8354 18.351 14.8757C18.351 14.8958 18.351 14.9159 18.3309 14.9159C18.3007 14.9159 18.2805 14.8958 18.2604 14.8757C18.2202 14.926 18.1598 14.9964 18.1598 15.0668C18.1397 15.0668 18.1196 15.0668 18.1196 15.097C18.1196 15.1171 18.1196 15.1372 18.0894 15.1372H18.0391L18.0089 15.097C18.0592 15.097 18.0894 14.9561 18.0995 14.9159H18.1196C18.1196 14.9058 18.0492 14.8857 18.0391 14.8857L17.9687 14.9863C17.9687 15.0568 17.9184 15.1272 17.8781 15.1775C17.858 15.1775 17.8479 15.1875 17.8479 15.1976C17.8479 15.2278 17.858 15.258 17.8178 15.258C17.7976 15.2781 17.7675 15.3083 17.7473 15.3083C17.7272 15.3083 17.7272 15.2882 17.7272 15.2781C17.7272 15.2077 17.7675 15.1372 17.7675 15.0668C17.7876 15.0668 17.8379 15.0568 17.8379 15.0266C17.8781 15.0266 17.8882 14.9763 17.8882 14.9461V14.9159C17.9184 14.9159 17.9385 14.8958 17.9385 14.8656V14.8455L17.9988 14.7549L18.0089 14.6543L18.0793 14.5638L17.9787 14.5336C17.9385 14.594 17.9083 14.6543 17.8882 14.7248C17.9485 14.7248 17.9083 14.7751 17.8882 14.7952L17.8479 14.8757L17.7675 14.9159L17.687 15.097C17.697 15.1372 17.6668 15.1775 17.6165 15.1775L17.5361 15.2177C17.526 15.2781 17.5059 15.3485 17.5159 15.4089H17.4354C17.4354 15.2982 17.355 15.4692 17.3449 15.4894C17.3348 15.4894 17.3147 15.4894 17.3147 15.5095C17.3147 15.5397 17.3348 15.5598 17.2845 15.5598L17.2443 15.6302L17.1638 15.6403L17.204 15.5497C17.204 15.4994 17.2141 15.3686 17.2845 15.3686C17.2845 15.3083 17.2644 15.1574 17.3248 15.1071C17.3248 14.9964 17.3751 14.7751 17.4153 14.6845C17.365 14.6845 17.4254 14.6443 17.4354 14.6342C17.4455 14.604 17.5059 14.4632 17.5059 14.433C17.5059 14.3927 17.5059 14.3424 17.4958 14.3022C17.4857 14.2921 17.4656 14.262 17.4556 14.262C17.4354 14.262 17.4354 14.2921 17.4354 14.3022C17.526 14.3022 17.4455 14.3424 17.4053 14.3424C17.3851 14.3424 17.355 14.3424 17.355 14.3123C17.355 14.262 17.4053 14.2117 17.4354 14.1815C17.4354 14.1714 17.4354 14.1211 17.4153 14.1211C17.3751 14.1211 17.355 14.1915 17.355 14.2217C17.3147 14.2519 17.2443 14.3022 17.2443 14.3626C17.2342 14.3827 17.1437 14.6845 17.0934 14.6845C17.0733 14.6845 17.0531 14.6946 17.0531 14.7147C17.0531 14.7449 17.0531 14.765 17.023 14.765C17.023 14.8153 16.9525 14.9863 16.872 14.9863C16.8821 14.9461 16.9425 14.6845 16.8922 14.6845C16.8016 14.6845 16.8016 14.8555 16.8016 14.9159C16.7413 14.9461 16.7614 15.0467 16.7614 15.097L16.7211 15.1272L16.6809 15.1976C16.6809 15.2882 16.5803 15.3787 16.53 15.4491C16.53 15.5397 16.4495 15.59 16.4495 15.6805C16.3791 15.7912 16.3288 15.922 16.2885 16.0427H16.2785C16.2181 16.0427 16.2282 15.9622 16.2181 15.9622C16.208 15.9622 16.1779 16.0327 16.1779 16.0427C16.0873 16.0427 16.1577 16.1232 16.0772 16.1232C16.037 16.1232 16.037 16.0628 16.037 16.0327C16.037 15.9421 16.0772 15.9119 16.0772 15.8113L16.1175 15.7711C16.1175 15.7409 16.1275 15.7006 16.1477 15.6705C16.1477 15.6403 16.1175 15.4894 16.1879 15.4894C16.1879 15.4391 16.2986 15.0668 16.3086 15.0467C16.3388 15.0165 16.3489 14.9763 16.3489 14.936C16.2483 14.8857 16.3489 14.8052 16.3489 14.765L16.3791 14.7147C16.3791 14.6443 16.3791 14.5638 16.3891 14.4934C16.4092 14.4934 16.4193 14.4833 16.4193 14.4632C16.4193 14.433 16.3992 14.4028 16.3791 14.3827C16.3791 14.3223 16.4495 14.2519 16.4495 14.1915L16.53 14.1513L16.5702 14.0708C16.5702 13.9601 16.6105 13.8696 16.6105 13.779C16.5501 13.779 16.5501 13.6483 16.6306 13.6483C16.7815 13.6483 16.7614 13.437 16.7614 13.3162L16.8016 13.276C16.8016 13.2458 16.8217 13.2156 16.8519 13.2156H16.862C16.8519 13.1251 16.9022 12.9842 16.9425 12.9038C16.9928 12.9038 17.0129 12.8031 17.023 12.7629C17.0531 12.7126 17.0833 12.6522 17.0833 12.6019C17.0833 12.5818 17.0833 12.5717 17.0632 12.5717C16.9425 12.5717 16.8419 12.6925 16.7312 12.6925L16.6406 12.7629H16.4998L16.4495 12.6724L16.5099 12.612C16.5803 12.612 16.6507 12.5516 16.6507 12.4812L16.8016 12.3605C16.7714 12.3404 16.7614 12.29 16.7614 12.2599L16.6809 12.1995C16.6809 12.0989 16.8821 11.9882 16.9425 11.948L16.9827 11.8574L17.0632 11.8273L17.204 11.6763C17.204 11.5456 17.2242 11.5959 17.2845 11.5154C17.4053 11.5858 17.3147 11.3544 17.3851 11.3544H17.3952C17.3952 11.3041 17.355 11.294 17.355 11.2437C17.3952 11.2236 17.4354 11.1834 17.4354 11.1431C17.5059 11.1431 17.5562 11.1029 17.6266 11.1029C17.6668 11.0626 17.7171 11.0224 17.7675 11.0224L17.8077 10.9318C17.8077 10.9117 17.8178 10.9017 17.8379 10.9017C17.9184 10.9017 17.8882 10.8614 17.8882 10.7809L17.9284 10.7407C17.9284 10.7105 17.9284 10.6501 17.9687 10.63C17.9687 10.5898 18.1095 10.298 18.1196 10.288L18.1498 10.1572L18.2001 10.1069C18.2001 10.0666 18.2202 10.0364 18.2604 10.0364H18.2705C18.2805 9.9962 18.2906 9.70443 18.361 9.70443C18.4818 9.42273 18.6729 9.08067 18.6729 8.75872L18.7534 8.70842L18.8138 8.61787C18.8339 8.61787 18.844 8.59775 18.844 8.57763L18.8339 8.5072C18.8741 8.52732 18.9043 8.5072 18.9043 8.46696L18.8741 8.38647C18.9043 8.36635 18.9244 8.33617 18.9446 8.30599C18.9446 8.25568 18.9848 8.27581 18.9848 8.2255C19.015 8.19532 19.015 8.14502 19.015 8.11483L19.0854 8.07459L19.1257 7.9941L19.2061 7.92368L19.2162 7.82307L19.2766 7.74259C19.2766 7.6621 19.3973 7.65204 19.3973 7.57155C19.4476 7.53131 19.4174 7.41058 19.4778 7.40052L19.518 7.33009L19.5683 7.37034L19.6086 7.33009L19.6186 7.28985L19.5784 7.33009C19.5583 7.33009 19.5482 7.32003 19.5482 7.29991C19.5482 7.26973 19.6086 7.1993 19.6287 7.17918C19.6287 7.15906 19.6388 7.149 19.6589 7.149C19.6891 7.149 19.6991 7.149 19.6991 7.10876L19.7394 7.02827L19.8098 7.00815L19.9205 7.02827C19.9205 6.95785 19.9205 6.95785 19.9909 6.95785L20.0412 6.83712L20.1217 6.78681C20.1217 6.72645 20.182 6.66608 20.2323 6.6359C20.2323 6.54536 20.2927 6.56548 20.3329 6.50511L20.5241 6.61578V6.46487L20.6348 6.52523C20.6348 6.57554 20.5945 6.57554 20.5945 6.62584L20.675 6.67615L20.7555 6.61578C20.7555 6.53529 20.8058 6.50511 20.8662 6.46487C20.8662 6.45481 20.8662 6.42463 20.8863 6.42463C20.9064 6.42463 20.9265 6.44475 20.9466 6.46487C20.9466 6.49505 20.9567 6.52523 20.9869 6.53529C20.9265 6.53529 20.9567 6.66608 20.9668 6.69627H21.0372L21.0674 6.72645C21.178 6.72645 21.2284 6.8673 21.3088 6.8673C21.3189 6.8673 21.3189 6.85724 21.3189 6.84718L21.4799 6.94779C21.4497 7.07858 21.3994 7.21943 21.3994 7.36028C21.3994 7.42064 21.5 7.44076 21.5503 7.45082C21.5101 7.50113 21.4899 7.58161 21.4799 7.64198C21.4497 7.6621 21.4396 7.7124 21.4396 7.74259C21.4094 7.74259 21.3994 7.77277 21.3994 7.80295V7.83313C21.339 7.93374 21.3189 8.04441 21.2887 8.15508C21.3591 8.15508 21.2988 8.20538 21.2787 8.2255L21.178 8.42672C21.1881 8.4569 21.1479 8.46696 21.1277 8.46696L21.0875 8.56757L21.1277 8.64805C21.1277 8.74866 20.9869 8.79897 20.9869 8.87945C21.007 8.90963 21.0171 8.94988 21.0171 8.98006C21.007 8.98006 20.9869 8.98006 20.9869 9.00018C20.9869 9.01024 21.0171 9.0203 21.0271 9.0203C21.0473 9.0203 21.0573 9.01024 21.0573 8.99012C21.178 8.94988 21.2887 8.89957 21.3994 8.83921C21.4195 8.83921 21.4497 8.82915 21.4497 8.80903V8.79897C21.4799 8.79897 21.5201 8.7889 21.5302 8.75872C21.5402 8.75872 21.5905 8.75872 21.5905 8.72854L21.6811 8.69836C21.7213 8.65811 21.7918 8.58769 21.8521 8.58769C21.9326 8.55751 21.993 8.39653 22.0936 8.39653C22.1137 8.39653 22.1137 8.41666 22.1137 8.42672C22.1238 8.44684 22.1439 8.46696 22.164 8.46696C22.1841 8.46696 22.1841 8.43678 22.1841 8.42672C22.2344 8.42672 22.2646 8.38647 22.325 8.38647C22.4155 8.25568 22.5664 8.19532 22.657 8.07459H22.7475C22.7576 8.06453 22.7676 8.03435 22.7777 8.03435C22.7878 8.03435 22.7878 8.07459 22.7878 8.07459C22.8079 8.06453 23.2003 7.86331 23.2405 7.86331L23.3914 7.78283C23.3914 7.77277 23.4115 7.74259 23.4216 7.74259C23.4317 7.74259 23.4317 7.78283 23.4317 7.78283C23.5121 7.78283 23.5121 7.78283 23.5121 7.70234C23.5624 7.70234 23.5423 7.6621 23.5926 7.6621L23.6631 7.74259L23.9347 7.59167C23.9347 7.56149 23.9749 7.55143 23.9951 7.55143C24.0252 7.55143 24.1258 7.47095 24.146 7.47095L24.2265 7.40052C24.3572 7.3804 25.1219 7.12888 25.2225 7.06851C25.2426 7.03833 25.2929 7.02827 25.3331 7.02827C25.3331 7.02827 25.9066 6.83712 26.0072 6.75663C26.0374 6.75663 26.0776 6.75663 26.0978 6.76669C26.0978 6.78681 26.0475 6.80693 26.0273 6.80693C26.0273 6.89748 25.9267 6.9176 25.8563 6.9176L25.8161 6.95785C25.7658 6.95785 25.7859 6.99809 25.7356 6.99809L25.5847 7.06851C25.5042 7.06851 25.3834 7.18924 25.3834 7.18924L25.2527 7.24961C25.1621 7.24961 25.1722 7.37034 25.1017 7.37034ZM21.671 10.5495C21.6107 10.5797 21.5704 10.6602 21.5 10.6602C21.4799 10.6602 21.4799 10.63 21.4799 10.62C21.4597 10.6099 21.4396 10.5898 21.4195 10.5898C21.3994 10.5898 21.3994 10.5998 21.3994 10.6099L21.339 10.6904C21.3189 10.6602 21.2787 10.63 21.2787 10.6904L21.168 10.7306L21.0875 10.8312C21.0875 10.8715 21.1479 10.8715 21.168 10.8715C21.168 10.8614 21.168 10.8312 21.1881 10.8312C21.2082 10.8312 21.2082 10.8514 21.2082 10.8715C21.329 10.8715 21.661 10.6803 21.7314 10.62C21.7414 10.62 21.7817 10.62 21.7817 10.6099C21.7817 10.5898 21.6911 10.5596 21.671 10.5495ZM20.9466 11.8977L20.9869 11.9782C20.9869 11.9882 20.9869 12.0184 21.007 12.0184C21.0271 12.0184 21.0473 11.9882 21.0573 11.9782L21.0171 11.9077L20.9668 11.8977L20.9466 11.8574L20.8662 11.8273C20.8762 11.8172 20.9366 11.7468 20.8863 11.7468C20.8662 11.6864 20.846 11.4751 20.7454 11.4751C20.7253 11.4751 20.7153 11.5053 20.7153 11.5254L20.7555 11.5657C20.7555 11.5858 20.7454 11.5858 20.7354 11.5858C20.7052 11.5858 20.675 11.5858 20.675 11.626C20.675 11.6965 20.7052 11.787 20.7857 11.787C20.7756 11.8273 20.7957 11.8574 20.836 11.8574C20.836 11.8876 20.8762 11.8977 20.9064 11.8977H20.9466ZM22.2244 10.1974C22.1439 10.2678 21.993 10.3383 21.8823 10.3483C21.8622 10.3684 21.8421 10.3886 21.8421 10.4087C21.8421 10.4288 21.8722 10.4288 21.8823 10.4288H22.0332L22.1841 10.3483C22.1841 10.3383 22.1841 10.3081 22.2042 10.3081C22.2344 10.3081 22.2143 10.3986 22.2344 10.3986C22.2545 10.3986 22.2646 10.3584 22.2747 10.3483L22.4155 10.2678C22.4055 10.2678 22.3552 10.2477 22.3552 10.2477C22.3552 10.2377 22.3853 10.2377 22.3853 10.2377L22.325 10.1572C22.2747 10.1572 22.2747 10.1974 22.2244 10.1974ZM18.8339 13.1352C18.8339 13.1352 18.7936 13.1352 18.7936 13.1452C18.7936 13.1553 18.8238 13.1653 18.8339 13.1653C18.8339 13.115 18.8842 13.1553 18.9043 13.1754C18.9848 13.1754 18.9345 13.0245 19.015 13.0245L19.0854 12.8635C19.1156 12.8434 19.1558 12.8031 19.0854 12.8031V12.7025L19.1257 12.6221C19.1257 12.612 19.1257 12.5717 19.1055 12.5717C19.0854 12.5717 19.0854 12.612 19.0854 12.6221C19.0653 12.6422 19.0552 12.6724 19.0552 12.7025C19.0552 12.8031 18.8339 12.9742 18.8339 13.1352ZM21.6308 12.4208C21.7012 12.4208 21.6911 12.5013 21.7414 12.5315C21.7213 12.5617 21.7213 12.612 21.7716 12.612C21.8119 12.6623 21.993 12.8736 21.993 12.9641C21.993 12.9742 21.993 12.9842 21.9728 12.9842L21.8823 12.9742C21.8421 12.9038 21.8219 12.8132 21.8119 12.7327C21.7716 12.7025 21.7113 12.6422 21.7113 12.5818C21.6811 12.5315 21.6308 12.4913 21.6308 12.4208ZM21.2787 13.3766C21.2183 13.3766 21.2082 13.3665 21.2082 13.437L21.2988 13.4873C21.3491 13.5678 21.5201 13.779 21.6408 13.779C21.661 13.779 21.671 13.769 21.671 13.7489L21.5503 13.6986L21.5201 13.5879C21.5201 13.5979 21.5 13.6784 21.4799 13.6784V13.6483C21.4799 13.6181 21.4698 13.5778 21.4396 13.5577L21.4799 13.5175L21.4396 13.5376C21.4195 13.5175 21.2787 13.4169 21.2787 13.3867C21.2787 13.3766 21.2887 13.3766 21.2988 13.3766C21.2988 13.3665 21.2887 13.3364 21.2887 13.3364C21.2787 13.3364 21.2787 13.3766 21.2787 13.3766ZM22.7173 9.14103C22.7073 9.12091 22.7173 9.07061 22.7475 9.06054C22.6167 9.07061 22.6771 9.14103 22.5966 9.14103C22.4859 9.18127 22.3652 9.26176 22.3049 9.36237L22.4457 9.32212L22.5463 9.22152C22.6469 9.22152 22.6469 9.14103 22.7173 9.14103ZM20.7957 8.83921C20.7656 8.86939 20.7153 8.91969 20.7153 8.97C20.7153 8.98006 20.7253 8.98006 20.7354 8.98006C20.7756 8.98006 20.8058 9.01024 20.8259 9.01024C20.836 9.01024 20.836 8.93982 20.836 8.92975C20.8662 8.89957 20.9064 8.84927 20.9064 8.80903C20.9064 8.79897 20.8963 8.79897 20.8863 8.79897L20.836 8.72854C20.8159 8.72854 20.7857 8.7386 20.7857 8.75872L20.7957 8.83921ZM23.4417 9.70443C23.4618 9.70443 23.5021 9.71449 23.5021 9.74468L23.4719 9.82516L23.4015 9.88553C23.331 9.88553 23.2606 9.89559 23.2003 9.91571C23.2003 9.83522 23.3109 9.8151 23.3713 9.78492L23.4417 9.70443ZM23.0292 9.89559L23.0896 9.95595C23.0896 9.98613 23.0594 10.0163 23.0292 10.0163C22.999 10.0566 22.9689 10.0968 22.9286 10.1169H22.8481C22.818 10.1169 22.7878 10.1169 22.7878 10.0867V10.0465H22.8984L22.9487 9.97607C22.989 9.97607 23.0192 9.93583 23.0292 9.89559ZM22.1137 13.3364C22.1137 13.2961 22.1338 13.2156 22.0735 13.2156L22.0332 13.105H22.0735C22.1238 13.105 22.1137 13.1352 22.1137 13.1754L22.1942 13.2559C22.2545 13.2559 22.2445 13.3364 22.3049 13.3364V13.4068L22.2244 13.3867L22.1841 13.3263C22.1841 13.3162 22.1841 13.2961 22.164 13.2961C22.1439 13.2961 22.1238 13.3263 22.1137 13.3364ZM20.7756 9.05048C20.7454 9.05048 20.7253 9.11085 20.7153 9.13097L20.6549 9.12091C20.6448 9.15109 20.5945 9.27182 20.5945 9.29194C20.5945 9.302 20.5945 9.32212 20.6046 9.32212C20.6247 9.32212 20.7756 9.17121 20.7957 9.15109C20.7957 9.14103 20.7957 9.05048 20.7756 9.05048ZM17.8077 13.4169C17.8077 13.4772 17.7675 13.5175 17.7675 13.5778L17.7775 13.6684L17.8479 13.6281C17.8479 13.5778 17.8882 13.5577 17.8882 13.5074C17.8882 13.4672 17.8479 13.4269 17.8077 13.4169ZM21.3591 14.4632L21.3994 14.5437C21.3994 14.5638 21.4195 14.5839 21.4396 14.5839L21.4799 14.5738C21.5101 14.6141 21.5402 14.6744 21.5503 14.7248H21.6308C21.6308 14.6443 21.5101 14.6141 21.5101 14.5437L21.3591 14.4632ZM22.3049 13.7086C22.3049 13.6583 22.2948 13.5879 22.2244 13.5879V13.4973L22.2847 13.5175C22.3149 13.5476 22.3451 13.5879 22.3451 13.6281C22.3552 13.6281 22.3853 13.6281 22.3853 13.6483C22.3853 13.6885 22.335 13.7086 22.3049 13.7086ZM24.3472 8.19532L24.317 8.23556L24.2667 8.26574C24.2466 8.26574 24.156 8.26574 24.156 8.28587C24.156 8.32611 24.2466 8.34623 24.2667 8.34623C24.2667 8.25568 24.4176 8.28587 24.4176 8.26574C24.4176 8.24562 24.3673 8.20538 24.3472 8.19532ZM18.5623 13.7891V13.94H18.5924C18.6327 13.94 18.6327 13.9098 18.6327 13.8796C18.6528 13.8595 18.683 13.8293 18.683 13.7992C18.683 13.7891 18.6729 13.779 18.6629 13.779L18.5623 13.7891ZM17.7071 13.7086L17.6568 13.8595C17.6467 13.8998 17.7071 13.8998 17.7272 13.8998C17.7272 13.8495 17.7675 13.8293 17.7675 13.779L17.7071 13.7086ZM22.8683 15.7711C22.9387 15.7711 22.9689 15.8516 23.0393 15.8516L23.1298 15.9723C23.0594 15.922 22.9789 15.8817 22.8984 15.8516L22.8683 15.7711ZM23.4719 8.61787V8.65811L23.492 8.61787C23.5423 8.61787 23.5725 8.58769 23.6228 8.58769C23.6329 8.57763 23.6329 8.56757 23.6329 8.55751C23.6329 8.52732 23.5826 8.51726 23.5624 8.5072L23.4719 8.61787ZM18.0793 12.8736C18.0793 12.9239 18.0391 12.944 18.0391 12.9943C18.0391 13.0044 18.0693 13.0949 18.0793 13.0949V13.0748C18.0793 13.0446 18.0693 12.9842 18.1196 12.9842V12.9138L18.0793 12.8736ZM21.7113 14.0909L21.7716 14.1714L21.8823 14.1815L21.8119 14.1211C21.8119 14.0909 21.7817 14.0809 21.7616 14.0809L21.7113 14.0909ZM23.5926 8.65811C23.5624 8.65811 23.3814 8.75872 23.3814 8.76878C23.3814 8.77884 23.3814 8.7889 23.3914 8.7889C23.4015 8.7889 23.4015 8.75872 23.4015 8.75872C23.4518 8.75872 23.5021 8.7386 23.5323 8.69836C23.5624 8.69836 23.6127 8.6883 23.6228 8.65811C23.6228 8.64805 23.6127 8.61787 23.6027 8.61787C23.5926 8.61787 23.5926 8.64805 23.5926 8.65811ZM21.5905 12.3806C21.5704 12.3605 21.4899 12.3102 21.4899 12.28C21.4899 12.2699 21.5 12.2699 21.5101 12.2699C21.5101 12.2599 21.5101 12.2297 21.5302 12.2297C21.5604 12.2297 21.5905 12.3705 21.5905 12.3806ZM24.7194 7.90356C24.7194 7.83313 24.8301 7.82307 24.8804 7.82307V7.86331C24.8301 7.87337 24.7697 7.88344 24.7194 7.90356ZM18.2001 14.9863C18.2504 14.9863 18.3107 15.0065 18.3107 15.0668H18.2705C18.2101 15.0668 18.2001 15.0467 18.2001 14.9863ZM22.989 8.91969C22.9387 8.91969 22.9085 8.94988 22.8683 8.94988C22.8683 8.95994 22.8683 8.99012 22.8884 8.99012C22.9487 8.99012 22.9588 8.91969 23.0493 8.91969C23.0393 8.90963 23.0192 8.86939 23.0091 8.86939C22.989 8.86939 22.989 8.90963 22.989 8.91969ZM22.5564 13.8595H22.496C22.4457 13.8595 22.4457 13.8193 22.4457 13.779C22.496 13.779 22.5564 13.8092 22.5564 13.8595ZM17.3952 15.2177C17.3952 15.2982 17.3952 15.2982 17.4757 15.2982V15.2177H17.3952ZM21.9628 14.9863C21.9628 15.0165 22.003 15.1071 22.0232 15.1071C22.0332 15.1071 22.0735 15.097 22.0735 15.0769C22.0735 15.0668 22.0634 15.0668 22.0533 15.0668L21.9326 14.9461L21.9628 14.9863ZM21.9628 10.1572V10.2276C21.9628 10.2678 21.993 10.2678 22.0332 10.2678L22.0131 10.1974L21.9628 10.1572ZM19.8903 13.5175L19.8098 13.3766C19.7997 13.3766 19.7695 13.3766 19.7695 13.3967C19.7695 13.4169 19.7997 13.437 19.8098 13.447C19.8299 13.447 19.85 13.447 19.85 13.4772C19.85 13.5074 19.85 13.5175 19.8903 13.5175ZM21.7616 14.8757C21.7716 14.9159 21.7616 14.9763 21.7918 15.0165C21.8119 15.0165 21.8119 14.936 21.8119 14.926L21.7616 14.8757ZM22.5564 13.8595L22.6369 13.94L22.5866 13.9803L22.5564 13.8595ZM18.4516 14.0507V14.1412L18.4918 14.1513V14.0708L18.4516 14.0507ZM20.836 9.33219C20.8259 9.33219 20.7957 9.33219 20.7957 9.34225C20.7957 9.35231 20.8259 9.36237 20.836 9.36237L20.8762 9.29194L20.8662 9.2517C20.836 9.2517 20.836 9.31206 20.836 9.33219ZM22.2646 15.3686L22.3049 15.4491L22.325 15.4089L22.2646 15.3385C22.2545 15.3385 22.2244 15.3485 22.2244 15.3586C22.2244 15.3686 22.2646 15.3686 22.2646 15.3686ZM21.0171 9.14103C20.997 9.14103 20.9668 9.15109 20.9668 9.18127C20.9668 9.19133 20.9668 9.21146 20.9768 9.21146C20.9869 9.21146 20.9869 9.19133 20.9869 9.18127C21.0171 9.18127 21.0372 9.16115 21.0372 9.13097C21.0372 9.12091 21.0372 9.10079 21.0271 9.10079C21.0171 9.10079 21.0171 9.14103 21.0171 9.14103ZM21.8823 15.0668V15.1372L21.9628 15.1272L21.8823 15.0668ZM24.0655 8.38647C24.0353 8.38647 24.0353 8.43678 24.0252 8.46696L24.0554 8.42672C24.0655 8.42672 24.1057 8.42672 24.1057 8.4066C24.1057 8.38647 24.0755 8.38647 24.0655 8.38647ZM19.6991 13.2559L19.7695 13.3364L19.7293 13.2559C19.679 13.2559 19.7293 13.1754 19.6689 13.1754L19.6991 13.2559ZM22.7576 9.71449C22.7576 9.72455 22.7676 9.74468 22.7777 9.74468C22.7978 9.74468 22.818 9.73462 22.828 9.72455C22.828 9.71449 22.818 9.70443 22.8079 9.70443C22.7878 9.70443 22.7676 9.70443 22.7576 9.71449ZM17.4757 15.1473C17.4757 15.1574 17.4857 15.1875 17.4958 15.1875C17.5159 15.1875 17.5159 15.1674 17.5159 15.1574C17.5159 15.1473 17.5059 15.1372 17.4958 15.1372C17.4857 15.1372 17.4857 15.1473 17.4757 15.1473ZM21.7716 10.4288V10.4691C21.7716 10.4992 21.7817 10.5093 21.8119 10.5093L21.7716 10.4288ZM23.16 8.80903C23.16 8.81909 23.1701 8.84927 23.1801 8.84927C23.2003 8.84927 23.2003 8.82915 23.2003 8.81909C23.2003 8.80903 23.1902 8.79897 23.1801 8.79897C23.1701 8.79897 23.1701 8.80903 23.16 8.80903ZM19.85 7.07858C19.85 7.08864 19.8601 7.11882 19.8701 7.11882C19.8903 7.11882 19.8903 7.0987 19.8903 7.08864C19.8903 7.07858 19.8802 7.06851 19.8701 7.06851C19.8601 7.06851 19.8601 7.07858 19.85 7.07858ZM21.0875 11.948C21.0875 11.958 21.0976 11.9882 21.1076 11.9882C21.1277 11.9882 21.1277 11.9681 21.1277 11.958C21.1277 11.948 21.1177 11.9379 21.1076 11.9379C21.0976 11.9379 21.0976 11.948 21.0875 11.948ZM21.671 14.7751C21.671 14.7851 21.6811 14.8153 21.6911 14.8153C21.7113 14.8153 21.7113 14.7952 21.7113 14.7851C21.7113 14.7751 21.7012 14.765 21.6911 14.765C21.6811 14.765 21.6811 14.7751 21.671 14.7751ZM21.0171 10.9922C21.0171 11.0023 21.0271 11.0325 21.0372 11.0325C21.0573 11.0325 21.0573 11.0123 21.0573 11.0023C21.0573 10.9922 21.0473 10.9821 21.0372 10.9821C21.0271 10.9821 21.0271 10.9922 21.0171 10.9922ZM23.7335 8.46696C23.7335 8.48708 23.7435 8.5072 23.7637 8.5072C23.7737 8.5072 23.7737 8.49714 23.7737 8.48708C23.7737 8.46696 23.7637 8.46696 23.7435 8.46696H23.7335ZM18.4918 13.94C18.4918 13.9601 18.5019 13.9803 18.522 13.9803C18.5321 13.9803 18.5321 13.9702 18.5321 13.9601C18.5321 13.94 18.522 13.94 18.5019 13.94H18.4918ZM20.4839 9.26176C20.4839 9.28188 20.4939 9.302 20.514 9.302C20.5241 9.302 20.5241 9.29194 20.5241 9.28188C20.5241 9.26176 20.514 9.26176 20.4939 9.26176H20.4839ZM20.4436 9.33219C20.4436 9.35231 20.4537 9.37243 20.4738 9.37243C20.4839 9.37243 20.4839 9.36237 20.4839 9.35231C20.4839 9.33219 20.4738 9.33219 20.4537 9.33219H20.4436ZM19.1257 12.5013C19.1257 12.5416 19.186 12.5214 19.2061 12.5114L19.1257 12.5013ZM21.3994 13.7086V13.7489C21.3994 13.779 21.4195 13.779 21.4396 13.779L21.3994 13.7086ZM18.5623 14.0507V14.0909C18.5623 14.111 18.5824 14.1211 18.6025 14.1211L18.5623 14.0507ZM22.1439 15.2982C22.1439 15.3284 22.1539 15.3385 22.1841 15.3385C22.1841 15.3183 22.164 15.2982 22.1439 15.2982ZM21.168 7.75265V7.77277C21.168 7.80295 21.178 7.82307 21.2082 7.82307L21.168 7.75265ZM18.2705 14.7751V14.7952C18.2705 14.8254 18.2805 14.8455 18.3107 14.8455L18.2705 14.7751ZM21.3994 8.94988C21.3994 8.95994 21.4094 8.99012 21.4195 8.99012C21.4396 8.99012 21.4396 8.97 21.4396 8.95994L21.3994 8.94988ZM21.1277 12.0184C21.1277 12.0285 21.1378 12.0587 21.1479 12.0587C21.168 12.0587 21.168 12.0385 21.168 12.0285L21.1277 12.0184ZM21.0875 13.105C21.0875 13.115 21.0976 13.1452 21.1076 13.1452C21.1277 13.1452 21.1277 13.1251 21.1277 13.115L21.0875 13.105ZM19.5884 13.0647C19.5884 13.0748 19.5985 13.105 19.6086 13.105C19.6287 13.105 19.6287 13.0848 19.6287 13.0748L19.5884 13.0647ZM21.2384 12.1995C21.2384 12.2096 21.2485 12.2397 21.2585 12.2397C21.2787 12.2397 21.2787 12.2196 21.2787 12.2096L21.2384 12.1995ZM23.16 9.59376C23.16 9.60383 23.1701 9.63401 23.1801 9.63401C23.2003 9.63401 23.2003 9.61389 23.2003 9.60383L23.16 9.59376ZM18.7534 12.8736C18.7534 12.8836 18.7635 12.9138 18.7735 12.9138C18.7936 12.9138 18.7936 12.8937 18.7936 12.8836L18.7534 12.8736ZM22.7878 8.99012C22.7878 9.00018 22.7978 9.03036 22.8079 9.03036C22.828 9.03036 22.828 9.01024 22.828 9.00018L22.7878 8.99012ZM18.0391 12.7327C18.0391 12.7428 18.0492 12.773 18.0592 12.773C18.0793 12.773 18.0793 12.7528 18.0793 12.7428L18.0391 12.7327ZM18.7132 12.9943C18.7132 13.0044 18.7232 13.0245 18.7333 13.0245C18.7433 13.0245 18.7534 13.0144 18.7534 13.0044C18.7534 12.9943 18.7433 12.9842 18.7333 12.9842C18.7333 12.9842 18.7232 12.9943 18.7132 12.9943ZM22.9487 8.99012C22.9487 9.00018 22.9588 9.03036 22.9689 9.03036C22.989 9.03036 22.989 9.01024 22.989 9.00018L22.9487 8.99012ZM18.8339 13.3364C18.8339 13.3464 18.844 13.3766 18.854 13.3766C18.8741 13.3766 18.8741 13.3565 18.8741 13.3464L18.8339 13.3364ZM18.1598 14.3424C18.1598 14.3525 18.1699 14.3827 18.1799 14.3827C18.2001 14.3827 18.2001 14.3626 18.2001 14.3525L18.1598 14.3424ZM16.2282 15.8616V15.8817C16.2282 15.9019 16.2382 15.932 16.2684 15.932L16.2282 15.8616ZM18.1196 14.7751V14.7952C18.1196 14.8153 18.1296 14.8455 18.1598 14.8455L18.1196 14.7751ZM18.5321 13.4873V13.5074C18.5321 13.5275 18.5421 13.5476 18.5623 13.5476C18.5623 13.5376 18.5421 13.4873 18.5321 13.4873ZM18.2302 14.1915C18.2302 14.2016 18.2604 14.2921 18.2705 14.2921V14.272L18.2302 14.1915ZM20.836 9.11085C20.836 9.14103 20.836 9.14103 20.8662 9.14103C20.8662 9.13097 20.8561 9.10079 20.836 9.10079V9.11085ZM20.1619 12.4208C20.1619 12.4309 20.1619 12.4611 20.182 12.4611C20.1921 12.4611 20.1921 12.451 20.1921 12.441C20.1921 12.4309 20.182 12.4208 20.172 12.4208H20.1619ZM23.6631 8.5072C23.6631 8.53739 23.6631 8.54745 23.6932 8.54745C23.6932 8.52732 23.6832 8.5072 23.6631 8.5072ZM23.0292 8.94988C23.0292 8.95994 23.0292 8.99012 23.0493 8.99012C23.0594 8.99012 23.0594 8.97 23.0594 8.95994L23.0292 8.94988ZM23.6631 8.58769C23.6631 8.59775 23.6631 8.62793 23.6832 8.62793C23.6932 8.62793 23.6932 8.60781 23.6932 8.59775L23.6631 8.58769ZM23.8039 8.43678C23.8039 8.44684 23.814 8.46696 23.824 8.46696C23.8341 8.46696 23.8341 8.4569 23.8341 8.44684C23.8341 8.43678 23.8341 8.42672 23.824 8.42672C23.814 8.42672 23.8039 8.43678 23.8039 8.43678ZM21.3591 12.3806C21.3591 12.4007 21.3692 12.4108 21.3893 12.4108H21.3994C21.3994 12.3907 21.3793 12.3806 21.3591 12.3806ZM23.16 15.7107C23.16 15.7208 23.1701 15.7409 23.1801 15.7409C23.1902 15.7409 23.2003 15.7308 23.2003 15.7208L23.16 15.7107ZM24.5585 7.79289C24.5585 7.81301 24.5685 7.81301 24.5886 7.81301H24.5987C24.5987 7.79289 24.5886 7.79289 24.5685 7.79289H24.5585ZM22.8683 9.03036C22.8683 9.05048 22.8783 9.05048 22.8984 9.05048H22.9085C22.9085 9.03036 22.8984 9.03036 22.8783 9.03036H22.8683ZM21.168 13.2257C21.168 13.2458 21.178 13.2458 21.1982 13.2458H21.2082C21.2082 13.2257 21.1982 13.2257 21.178 13.2257H21.168ZM23.0997 9.67425C23.0997 9.68431 23.1097 9.70443 23.119.........完整代码请登录后点击上方下载按钮下载查看
网友评论0