brand-digitalbooting
Version:
A footer component for indicate if another website is developed of designed for digital booting
98 lines (92 loc) • 6.34 kB
JavaScript
typeof window !== "undefined" &&
window.customElements.define(
"make-digital",
class Brand extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({ mode: "open" });
const url = this.getAttribute("href") || "https://digitalbooting.com";
shadowRoot.innerHTML = `
<style>
:host {
display:flex;
width: 100%;
align-items: center;
align-content: center;
justify-content: center;
flex-wrap: nowrap;
padding: var(--brand-padding, 0.75rem 1rem);
font-family: inherit;
user-select: none;
}
:host * {
color:inherit;
text-decoration: none;
}
:host img {
width: 25px;
height: 25px;
min-width: 25px;
min-height: 25px;
object-fit: contain;
margin-right: 0.5rem;
}
:host .primary {
color: var(--brand-primary, #38c172);
}
:host span {
width: 28px;
height: 28px;
min-width: 28px;
min-height: 28px;
margin-right: 16px;
}
</style>
<span>
<svg width="28" height="28" viewBox="0 0 57 57" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="29" cy="28" r="27" fill="#091C2F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.0263 36.4362C23.0263 35.0011 21.8611 33.8359 20.426 33.8359H13.4987C12.0636 33.8359 10.8984 35.0011 10.8984 36.4362C10.8984 37.8714 12.0636 39.0365 13.4987 39.0365H20.426C21.8611 39.0365 23.0263 37.8714 23.0263 36.4362Z" fill="url(#paint0_linear_2115_405)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.0261 20.5544C23.0261 19.1193 21.861 17.9541 20.4258 17.9541H13.4011C11.9659 17.9541 10.8008 19.1193 10.8008 20.5544C10.8008 21.9896 11.9659 23.1547 13.4011 23.1547H20.4258C21.861 23.1547 23.0261 21.9896 23.0261 20.5544Z" fill="url(#paint1_linear_2115_405)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M35.5024 28.4953C35.5024 27.0602 34.3373 25.895 32.9021 25.895H28.9626C27.5275 25.895 26.3623 27.0602 26.3623 28.4953C26.3623 29.9305 27.5275 31.0956 28.9626 31.0956H32.9021C34.3373 31.0956 35.5024 29.9305 35.5024 28.4953Z" fill="url(#paint2_linear_2115_405)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.0262 28.4953C23.0262 27.0602 21.861 25.895 20.4259 25.895H7.36202C5.92689 25.895 4.76172 27.0602 4.76172 28.4953C4.76172 29.9305 5.92689 31.0956 7.36202 31.0956H20.4259C21.861 31.0956 23.0262 29.9305 23.0262 28.4953Z" fill="url(#paint3_linear_2115_405)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.0266 44.3772C23.0266 42.942 21.8615 41.7769 20.4263 41.7769H20.4187C18.9835 41.7769 17.8184 42.942 17.8184 44.3772C17.8184 45.8123 18.9835 46.9775 20.4187 46.9775H20.4263C21.8615 46.9775 23.0266 45.8123 23.0266 44.3772Z" fill="url(#paint4_linear_2115_405)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.0266 12.6135C23.0266 11.1783 21.8615 10.0132 20.4263 10.0132H20.4187C18.9835 10.0132 17.8184 11.1783 17.8184 12.6135C17.8184 14.0486 18.9835 15.2138 20.4187 15.2138H20.4263C21.8615 15.2138 23.0266 14.0486 23.0266 12.6135Z" fill="url(#paint5_linear_2115_405)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M34.4329 48.3143C34.2776 48.3445 34.1177 48.3604 33.9541 48.3604H28.779C27.3509 48.3604 26.1914 47.1549 26.1914 45.6702V38.2544C26.1914 36.7696 27.3509 35.5642 28.779 35.5642H33.2344C36.9349 35.5024 39.9213 32.3594 39.9213 28.4969C39.9213 24.622 36.9156 21.4711 33.198 21.4291H33.0501L33.0235 21.4294V21.4291H28.7183C27.3277 21.4291 26.1987 20.2553 26.1987 18.8096V11.2499C26.1987 9.80415 27.3277 8.63037 28.7183 8.63037H33.7576C33.8903 8.63037 34.0205 8.64106 34.1477 8.66168C44.2165 9.216 52.2283 17.8914 52.2283 28.4969C52.2283 39.0016 44.3681 47.6125 34.4328 48.3143L34.4329 48.3143Z" fill="white"/>
<defs>
<linearGradient id="paint0_linear_2115_405" x1="10.8985" y1="36.4362" x2="23.0263" y2="36.4362" gradientUnits="userSpaceOnUse">
<stop stop-color="#00E0FF"/>
<stop offset="0.58" stop-color="#00F5C1"/>
<stop offset="1" stop-color="#00FFA5"/>
</linearGradient>
<linearGradient id="paint1_linear_2115_405" x1="10.8008" y1="20.5544" x2="23.0261" y2="20.5544" gradientUnits="userSpaceOnUse">
<stop stop-color="#00E0FF"/>
<stop offset="0.58" stop-color="#00F5C1"/>
<stop offset="1" stop-color="#00FFA5"/>
</linearGradient>
<linearGradient id="paint2_linear_2115_405" x1="26.3624" y1="28.4953" x2="35.5025" y2="28.4953" gradientUnits="userSpaceOnUse">
<stop stop-color="#00FDFF"/>
<stop offset="1" stop-color="#00FF92"/>
</linearGradient>
<linearGradient id="paint3_linear_2115_405" x1="4.76175" y1="28.4953" x2="23.0263" y2="28.4953" gradientUnits="userSpaceOnUse">
<stop stop-color="#00E0FF"/>
<stop offset="0.58" stop-color="#00F5C1"/>
<stop offset="1" stop-color="#00FFA5"/>
</linearGradient>
<linearGradient id="paint4_linear_2115_405" x1="17.8183" y1="44.3772" x2="23.0266" y2="44.3772" gradientUnits="userSpaceOnUse">
<stop stop-color="#00E0FF"/>
<stop offset="0.58" stop-color="#00F5C1"/>
<stop offset="1" stop-color="#00FFA5"/>
</linearGradient>
<linearGradient id="paint5_linear_2115_405" x1="17.8183" y1="12.6135" x2="23.0266" y2="12.6135" gradientUnits="userSpaceOnUse">
<stop stop-color="#00E0FF"/>
<stop offset="0.58" stop-color="#00F5C1"/>
<stop offset="1" stop-color="#00FFA5"/>
</linearGradient>
</defs>
</svg>
</span>
<small>Designed by <a href="${url}">Digital <strong class="primary">Booting</strong></a></small>
`;
}
}
);