diff --git a/.eslintrc.json b/.eslintrc.json
deleted file mode 100644
index 59badc2..0000000
--- a/.eslintrc.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "extends": "eslint-config-manzdev",
- "rules": {
- }
-}
diff --git a/.gitignore b/.gitignore
deleted file mode 100644
index 98fa24d..0000000
--- a/.gitignore
+++ /dev/null
@@ -1,25 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-!.vscode/settings.json
diff --git a/.stylelintrc b/.stylelintrc
deleted file mode 100644
index d2b7345..0000000
--- a/.stylelintrc
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "extends": "stylelint-config-manzdev",
- "rules": {
- }
-}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
deleted file mode 100644
index 9ba46cb..0000000
--- a/.vscode/extensions.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
- "recommendations": [
- "dbaeumer.vscode-eslint",
- "stylelint.vscode-stylelint",
- "esbenp.prettier-vscode"
- ]
-}
diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index f129583..0000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,55 +0,0 @@
-// updated 2022-03-08 07:16
-// https://github.com/antfu/vscode-file-nesting-config
-{
- "[javascript]": {
- "editor.defaultFormatter": "dbaeumer.vscode-eslint"
- },
- "[html]": {
- "editor.defaultFormatter": "vscode.html-language-features"
- },
- "[css]": {
- "editor.defaultFormatter": "stylelint.vscode-stylelint"
- },
- "editor.codeActionsOnSave": {
- "source.fixAll.eslint": "explicit",
- "source.fixAll.stylelint": "explicit"
- },
- "editor.formatOnSave": true,
- "eslint.enable": true,
- "stylelint.enable": true,
- "css.validate": false,
- "scss.validate": false,
- "less.validate": false,
- "explorer.compactFolders": false,
- "javascript.validate.enable": false,
- "emmet.includeLanguages": {
- "jsx": "html",
- "vue": "html",
- "html": "html",
- "javascript": "html"
- },
- "explorer.fileNesting.enabled": true,
- "explorer.fileNesting.expand": false,
- "explorer.fileNesting.patterns": {
- ".gitignore": ".gitattributes, .gitmodules, .gitmessage, .mailmap, .git-blame*",
- "*.js": "$(capture).js.map, $(capture).min.js, $(capture).d.ts",
- "*.jsx": "$(capture).js",
- "*.ts": "$(capture).js, $(capture).*.ts",
- "*.tsx": "$(capture).ts",
- "index.d.ts": "*.d.ts",
- "shims.d.ts": "*.d.ts",
- "go.mod": ".air*, go.sum",
- ".env": "*.env, .env*, env.d.ts",
- "dockerfile": ".dockerignore, dockerfile*",
- "package.json": ".browserslist*, .circleci*, .codecov, .editorconfig, .flowconfig, .gitlab*, .gitpod*, .huskyrc*, .jshintrc, .mocha*, .node-version, .nodemon*, .npm*, .nvmrc, .pm2*, .pnpm*, .prettier*, .releaserc*, .sentry*, .stackblitz*, .tazerc*, .travis*, .vscode*, .watchman*, .yarnrc*, api-extractor.json, appveyor*, ava.config.*, azure-pipelines*, build.config.*, crowdin*, cypress.json, dangerfile*, gulp*, jasmine.*, jenkins*, jest.config.*, jsconfig.*, karma*, lerna*, nest-cli.*, netlify*, nodemon*, nx.*, package-lock.json, playwright.config.*, pm2.*, pnpm*, prettier*, pullapprove*, puppeteer.config.*, renovate*, rollup.config.*, tsdoc.*, tsup.config.*, turbo*, vercel*, vetur.config.*, vitest.config.*, webpack.config.*, workspace.json, yarn*",
- "readme.md": "authors, backers.md, changelog*.md, code_of_conduct.md, codeowners, contributing.md, contributors, copying, credits, governance.md, history.md, license*, maintainers, readme*, security.md, sponsors.md",
- "cargo.toml": "cargo.lock, rust-toolchain.toml, rustfmt.toml",
- "gemfile": ".ruby-version, gemfile.lock",
- "vite.config.*": "*.env, .babelrc, .codecov, .env*, .mocha*, .postcssrc.*, api-extractor.json, ava.config.*, babel.config.*, cypress.json, env.d.ts, index.html, jasmine.*, jest.config.*, jsconfig.*, karma*, playwright.config.*, postcss.config.*, puppeteer.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*",
- "vue.config.*": "*.env, .babelrc, .codecov, .env*, .mocha*, .postcssrc.*, api-extractor.json, ava.config.*, babel.config.*, cypress.json, env.d.ts, jasmine.*, jest.config.*, jsconfig.*, karma*, playwright.config.*, postcss.config.*, puppeteer.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*",
- "nuxt.config.*": "*.env, .babelrc, .codecov, .env*, .mocha*, .postcssrc.*, api-extractor.json, ava.config.*, babel.config.*, cypress.json, env.d.ts, jasmine.*, jest.config.*, jsconfig.*, karma*, playwright.config.*, postcss.config.*, puppeteer.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*",
- "next.config.*": "*.env, .babelrc, .codecov, .env*, .mocha*, .postcssrc.*, api-extractor.json, ava.config.*, babel.config.*, cypress.json, env.d.ts, jasmine.*, jest.config.*, jsconfig.*, karma*, next-env.d.ts, playwright.config.*, postcss.config.*, puppeteer.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*",
- "svelte.config.*": "*.env, .babelrc, .codecov, .env*, .mocha*, .postcssrc.*, api-extractor.json, ava.config.*, babel.config.*, cypress.json, env.d.ts, jasmine.*, jest.config.*, jsconfig.*, karma*, playwright.config.*, postcss.config.*, puppeteer.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*",
- "remix.config.*": "*.env, .babelrc, .codecov, .env*, .mocha*, .postcssrc.*, api-extractor.json, ava.config.*, babel.config.*, cypress.json, env.d.ts, jasmine.*, jest.config.*, jsconfig.*, karma*, playwright.config.*, postcss.config.*, puppeteer.config.*, remix.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*"
- }
-}
diff --git a/index-mRL9dJ-7.js b/index-mRL9dJ-7.js
new file mode 100644
index 0000000..02f9dbd
--- /dev/null
+++ b/index-mRL9dJ-7.js
@@ -0,0 +1,710 @@
+(function(){const i=document.createElement("link").relList;if(i&&i.supports&&i.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))f(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const s of t.addedNodes)s.tagName==="LINK"&&s.rel==="modulepreload"&&f(s)}).observe(document,{childList:!0,subtree:!0});function g(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?t.credentials="include":e.crossOrigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function f(e){if(e.ep)return;e.ep=!0;const t=g(e);fetch(e.href,t)}})();class r extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}static get styles(){return`
+ :host {
+ --size: 26px;
+ --pin-size: calc(var(--size) * 0.25);
+ --path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
+ }
+
+ :host([flip]) .container {
+ transform: rotate(180deg);
+ }
+
+ .container {
+ max-width: var(--size);
+ }
+
+ .pin-box {
+ width: var(--size);
+ height: calc(var(--size) * 0.85);
+ background: #4d4648;
+ display: grid;
+ place-items: center;
+ clip-path: var(--path);
+
+ & .pin {
+ width: var(--pin-size);
+ height: var(--pin-size);
+ background: #ec8831;
+ border-radius: 50%;
+ }
+ }
+
+ .text {
+ font-family: Jost, sans-serif;
+ font-size: 0.7rem;
+ text-align: center;
+ color: #aaa;
+ }
+ `}connectedCallback(){this.text=this.getAttribute("text")??"??",this.render()}render(){this.shadowRoot.innerHTML=`
+
+ `}}customElements.define("electro-pin",r);class o extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}static get styles(){return`
+ :host {
+ --width: 115px;
+ --height: 175px;
+ }
+
+ .container {
+ width: var(--width);
+ height: var(--height);
+ background: #000000;
+ display: grid;
+ place-items: end start;
+ }
+
+ path {
+ stroke: #bb9038;
+ stroke-width: 1px;
+ }
+ `}connectedCallback(){this.render()}render(){this.shadowRoot.innerHTML=`
+
+ `}}customElements.define("wifi-antenna",o);class a extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}static get styles(){return`
+ :host {
+ --size: 175px;
+ }
+
+ .chip {
+ background: #464142;
+ width: var(--size);
+ height: var(--size);
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ position: relative;
+
+ & section.right {
+ position: absolute;
+ right: -12px;
+ bottom: 0;
+ transform-origin: 100% 0%;
+ transform: rotate(90deg);
+ z-index: -1;
+ }
+
+ & section {
+ padding: 0 0.5rem;
+ display: flex;
+ justify-content: center;
+ gap: 5px;
+ }
+
+ & section.top {
+ transform: translateY(-20px);
+ }
+
+ & section.bottom {
+ transform: translateY(20px);
+ }
+ }
+
+ .cast-pin {
+ width: 16px;
+ height: 20px;
+ background: #f3d6b5;
+ border-radius: 2px 2px 0 0;
+ mask-image:
+ radial-gradient(circle 12px at 50% 60%, transparent 0 4px, white 4.5px),
+ radial-gradient(circle 12px at 50% 0%, transparent 0 4px, white 4.5px);
+ -webkit-mask-composite: source-in;
+
+ &.flip {
+ transform: scaleY(-1);
+ }
+ }
+
+ svg.fcc {
+ position: absolute;
+ width: 65px;
+ height: auto;
+ left: 10px;
+ bottom: 5px;
+
+ & path {
+ fill: #e0e0de;
+ }
+ }
+
+ .wifi-logo {
+ position: absolute;
+ width: 65px;
+ height: 30px;
+ background: #afafaf;
+ top: 10px;
+ right: 10px;
+ border-radius: 10px;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ place-items: end end;
+ padding-right: 3px;
+ padding-bottom: 3px;
+
+ &::before {
+ content: "";
+ display: block;
+ background: #3f3f3f;
+ width: 6px;
+ height: 8px;
+ clip-path: polygon(105% 0, 0 105%, 105% 105%);
+ transform: translateX(2px);
+ }
+
+ &::after {
+ content: "";
+ display: block;
+ background: #3f3f3f;
+ width: 32px;
+ height: 26px;
+ border-radius: 9px 9px 9px 0;
+ box-sizing: border-box;
+ }
+ }
+ `}connectedCallback(){this.render()}render(){this.shadowRoot.innerHTML=`
+
+ `}}customElements.define("system-on-chip",a);class c extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}static get styles(){return`
+ .container {
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-rows: 17px 35px 20px;
+ }
+
+ .heatsink {
+ width: 50%;
+ height: 100%;
+ margin: auto;
+ background: var(--pin-color);
+ }
+
+ .chip {
+ background: var(--chip-color);
+ border: 4px solid #2a2a2a;
+ border-right-color: #555;
+ font-family: Jost, sans-serif;
+ font-size: 0.8rem;
+ color: #999;
+ display: grid;
+ place-items: center;
+ }
+
+ .pin-container {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ margin: 0 0.5rem;
+ gap: 0.5rem;
+
+ & .pin {
+ background: var(--pin-color);
+ border-bottom: 4px solid var(--dark-pin-color);
+ }
+ }
+ `}connectedCallback(){this.render()}render(){this.shadowRoot.innerHTML=`
+
+ `}}customElements.define("esp32-transistor",c);class d extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}static get styles(){return`
+ .container {
+ --size: 70px;
+ --end-size: clamp(3px, calc(var(--size) * 0.15), 4px);
+ --dark-size: clamp(3px, calc(var(--size) * 0.15), 10px);
+
+ display: grid;
+ grid-template-columns:
+ var(--end-size) var(--dark-size) 1fr var(--end-size);
+ grid-template-rows: 1fr;
+ width: var(--size);
+ height: calc(var(--size) * 0.5);
+ }
+
+ :host(.small) .container {
+ --size: 30px;
+ }
+
+ .end {
+ height: 40%;
+ margin: auto 0;
+ background: #e0babb;
+ }
+
+ .dark {
+ background: #fd803f;
+ }
+
+ .light {
+ background: #c4c392;
+ }
+ `}connectedCallback(){this.render()}render(){this.shadowRoot.innerHTML=`
+
+ `}}customElements.define("diodo-rect",d);class n extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}static get styles(){return`
+ .container {
+ background: var(--color, #e5c2a2);
+ border-top: 3px solid var(--pin-color);
+ border-bottom: 3px solid var(--pin-color);
+ width: 15px;
+ height: 20px;
+ }
+ `}connectedCallback(){this.render()}render(){this.shadowRoot.innerHTML=`
+
+
+
`}}customElements.define("capacitor-smd",n);class l extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}static get styles(){return`
+ :host {
+ }
+
+ .container {
+ display: grid;
+ grid-template-rows: 1fr 1fr;
+ gap: 3px;
+ width: 100%;
+ height: 20px;
+ place-items: center;
+ }
+
+ .resistance {
+ background: var(--color, #111);
+ border-left: 3px solid var(--pin-color);
+ border-right: 3px solid var(--pin-color);
+ width: 15px;
+ height: 10px;
+ }
+ `}connectedCallback(){this.render()}render(){this.shadowRoot.innerHTML=`
+
+ `}}customElements.define("resistance-smd",l);class p extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}static get styles(){return`
+ .container {
+ display: grid;
+ place-items: center;
+ width: 100%;
+ height: 100%;
+ }
+
+ .serial-converter {
+ width: 80%;
+ height: 80%;
+ background: black;
+ position: relative;
+
+ &::after {
+ content: "";
+ background: var(--pin-color);
+ display: block;
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ transform: translate(8px, 8px);
+ }
+ }
+
+ :is(.top, .bottom, .left, .right) {
+ --size: 7px;
+
+ display: grid;
+ grid-template-columns: repeat(8, var(--size));
+ grid-template-rows: var(--size);
+ gap: 4px;
+ position: absolute;
+ width: 100%;
+ justify-content: space-evenly;
+
+ & > div {
+ background: var(--pin-color);
+ }
+ }
+
+ :is(.left, .right) {
+ width: auto;
+ height: 100%;
+ grid-template-columns: var(--size);
+ grid-template-rows: repeat(8, var(--size));
+ align-content: space-evenly;
+ }
+
+ .left { left: calc(var(--size) * -1); }
+ .right { right: calc(var(--size) * -1); }
+ .top { top: calc(var(--size) * -1); }
+ .bottom { bottom: calc(var(--size) * -1); }
+ `}connectedCallback(){this.render()}render(){this.shadowRoot.innerHTML=`
+
+ `}}customElements.define("serial-converter",p);class v extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}static get styles(){return`
+ .container {
+ transform: rotate(-90deg);
+ display: grid;
+ justify-items: center;
+ }
+
+ .text {
+ font-family: Jost, sans-serif;
+ font-size: 0.75rem;
+ color: var(--pin-color);
+ }
+
+ .button-container {
+ --size: 35px;
+
+ background: var(--pin-color);
+ width: var(--size);
+ height: var(--size);
+ display: grid;
+ place-items: center;
+
+ & .button {
+ border-radius: 50%;
+ background: #121212;
+ width: 75%;
+ height: 75%;
+ }
+ }
+ `}connectedCallback(){this.text=this.getAttribute("text")||"UNKNOWN",this.render()}render(){this.shadowRoot.innerHTML=`
+
+ `}}customElements.define("switch-button",v);class h extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}static get styles(){return`
+ :host {
+ --height: 90px;
+
+ position: absolute;
+ right: -10px;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+
+ .container {
+ --r: 10px;
+
+ width: 65px;
+ height: var(--height);
+ background: var(--pin-color);
+ display: grid;
+ place-items: center;
+ border-radius: var(--r) 0 0 var(--r) / calc(var(--r) * 2) 0 0 calc(var(--r) * 2);
+ overflow: hidden;
+
+ &::before, &::after {
+ content: "";
+ width: 5px;
+ height: 10px;
+ display: block;
+ border-bottom: 7px solid #777;
+ border-right: 7px solid #777;
+ position: absolute;
+ place-self: center start;
+ }
+
+ &::before { transform: translateY(-75%) scaleY(-1); }
+ &::after { transform: translateY(75%) }
+
+ & .surface {
+ width: 100%;
+ height: 70%;
+ border-top: 4px solid #6e6b6b;
+ border-bottom: 4px solid #a0a0a0;
+ /* border-radius: var(--r) 0 0 var(--r) / calc(var(--r) * 0) 0 0 calc(var(--r) * 0);*/
+
+ display: grid;
+ place-items: center start;
+
+ &::before, &::after {
+ content: "";
+ display: block;
+ background: #555;
+ width: 7px;
+ height: 15px;
+ transform: translateX(20px);
+ }
+ }
+ }
+ `}connectedCallback(){this.render()}render(){this.shadowRoot.innerHTML=`
+
+ `}}customElements.define("usb-connector",h);class m extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}static get styles(){return`
+ :host {
+ --width: 600px;
+ --height: calc(var(--width) * 0.57);
+ --background-color: #202020;
+
+ --pin-color: #8d898c;
+ --dark-pin-color: color-mix(in srgb, var(--pin-color), black 30%);
+ --chip-color: #3d3b3c;
+
+ display: block;
+ width: var(--width);
+ position: relative;
+ }
+
+ .container {
+ --hole-offset: 30px;
+ --hole-size: 16px;
+ --mask-color-list: transparent 0 var(--hole-size), white calc(var(--hole-size) + 0.75px);
+
+ width: var(--width);
+ height: var(--height);
+ background: var(--background-color);
+ mask-image:
+ radial-gradient(circle var(--hole-size) at top var(--hole-offset) left var(--hole-offset), var(--mask-color-list)),
+ radial-gradient(circle var(--hole-size) at bottom var(--hole-offset) left var(--hole-offset), var(--mask-color-list)),
+ radial-gradient(circle var(--hole-size) at top var(--hole-offset) right var(--hole-offset), var(--mask-color-list)),
+ radial-gradient(circle var(--hole-size) at bottom var(--hole-offset) right var(--hole-offset), var(--mask-color-list));
+ -webkit-mask-composite: source-in;
+ border-radius: 25px;
+
+ display: grid;
+ grid-template-rows: 60px 1fr 60px;
+ }
+
+ :is(.top, .bottom) {
+ display: flex;
+ justify-content: center;
+
+ & .pins-header {
+ width: calc(var(--width) - ((var(--hole-size) + (var(--hole-offset) * 2)) * 2));
+ height: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+ }
+
+ .middle {
+ display: grid;
+ grid-template-columns: 6fr 2.5fr 3.25fr 1.75fr;
+
+ & .wifi-soc-container {
+ display: flex;
+ align-items: center;
+ }
+
+ & .smd-circuit {
+ width: 10px;
+ height: 12px;
+ background: var(--chip-color);
+ border-top: 4px solid var(--pin-color);
+ border-bottom: 4px solid var(--pin-color);
+ }
+
+ & .col-2 {
+ padding-left: 2rem;
+ display: grid;
+ grid-template-rows: 5.5fr 1.5fr 3fr;
+
+ & .col-top {
+ display: grid;
+ align-items: center;
+ }
+
+ & .col-middle {
+ display: grid;
+ grid-template-columns: 0.8fr 1fr;
+ place-items: center;
+ }
+ }
+
+ & .col-3 {
+ padding-left: 1rem;
+ display: grid;
+ grid-template-rows: 0.5fr 1.15fr 0.5fr;
+
+ & :is(.col-top, .col-bottom) {
+ display: grid;
+ justify-items: center;
+ align-items: center;
+ grid-template-columns: 1fr 1fr 1fr 1fr;
+ gap: 5px;
+ margin: 0 5px;
+ }
+ }
+
+ & .col-4 {
+ display: grid;
+ grid-template-rows: 1fr 2fr 1fr;
+ align-items: center;
+ }
+ }
+ `}connectedCallback(){this.render()}render(){this.shadowRoot.innerHTML=`
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
`;
- }
-}
-
-customElements.define("capacitor-smd", CapacitorSMD);
diff --git a/src/components/DevBoard.js b/src/components/DevBoard.js
deleted file mode 100644
index 11003fd..0000000
--- a/src/components/DevBoard.js
+++ /dev/null
@@ -1,218 +0,0 @@
-import "@/components/ElectroPin.js";
-import "@/components/WifiAntenna.js";
-import "@/components/SystemOnChip.js";
-import "@/components/Esp32Transistor.js";
-import "@/components/DiodoRect.js";
-import "@/components/CapacitorSMD.js";
-import "@/components/ResistanceSMD.js";
-import "@/components/SerialConverter.js";
-import "@/components/SwitchButton.js";
-import "@/components/USBConnector.js";
-
-class DevBoard extends HTMLElement {
- constructor() {
- super();
- this.attachShadow({ mode: "open" });
- }
-
- static get styles() {
- return /* css */`
- :host {
- --width: 600px;
- --height: calc(var(--width) * 0.57);
- --background-color: #202020;
-
- --pin-color: #8d898c;
- --dark-pin-color: color-mix(in srgb, var(--pin-color), black 30%);
- --chip-color: #3d3b3c;
-
- display: block;
- width: var(--width);
- position: relative;
- }
-
- .container {
- --hole-offset: 30px;
- --hole-size: 16px;
- --mask-color-list: transparent 0 var(--hole-size), white calc(var(--hole-size) + 0.75px);
-
- width: var(--width);
- height: var(--height);
- background: var(--background-color);
- mask-image:
- radial-gradient(circle var(--hole-size) at top var(--hole-offset) left var(--hole-offset), var(--mask-color-list)),
- radial-gradient(circle var(--hole-size) at bottom var(--hole-offset) left var(--hole-offset), var(--mask-color-list)),
- radial-gradient(circle var(--hole-size) at top var(--hole-offset) right var(--hole-offset), var(--mask-color-list)),
- radial-gradient(circle var(--hole-size) at bottom var(--hole-offset) right var(--hole-offset), var(--mask-color-list));
- -webkit-mask-composite: source-in;
- border-radius: 25px;
-
- display: grid;
- grid-template-rows: 60px 1fr 60px;
- }
-
- :is(.top, .bottom) {
- display: flex;
- justify-content: center;
-
- & .pins-header {
- width: calc(var(--width) - ((var(--hole-size) + (var(--hole-offset) * 2)) * 2));
- height: 100%;
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
- }
-
- .middle {
- display: grid;
- grid-template-columns: 6fr 2.5fr 3.25fr 1.75fr;
-
- & .wifi-soc-container {
- display: flex;
- align-items: center;
- }
-
- & .smd-circuit {
- width: 10px;
- height: 12px;
- background: var(--chip-color);
- border-top: 4px solid var(--pin-color);
- border-bottom: 4px solid var(--pin-color);
- }
-
- & .col-2 {
- padding-left: 2rem;
- display: grid;
- grid-template-rows: 5.5fr 1.5fr 3fr;
-
- & .col-top {
- display: grid;
- align-items: center;
- }
-
- & .col-middle {
- display: grid;
- grid-template-columns: 0.8fr 1fr;
- place-items: center;
- }
- }
-
- & .col-3 {
- padding-left: 1rem;
- display: grid;
- grid-template-rows: 0.5fr 1.15fr 0.5fr;
-
- & :is(.col-top, .col-bottom) {
- display: grid;
- justify-items: center;
- align-items: center;
- grid-template-columns: 1fr 1fr 1fr 1fr;
- gap: 5px;
- margin: 0 5px;
- }
- }
-
- & .col-4 {
- display: grid;
- grid-template-rows: 1fr 2fr 1fr;
- align-items: center;
- }
- }
- `;
- }
-
- connectedCallback() {
- this.render();
- }
-
- render() {
- this.shadowRoot.innerHTML = /* html */`
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-