unavailable cards

build is fixed
display multiple copies of a card in one components
2025-08-23 23:38:37 +03:00 · 2025-08-23 23:17:27 +03:00 · 2025-08-23 23:04:50 +03:00 · 2025-08-23 18:54:57 +03:00 · 2025-08-23 14:02:28 +03:00 · 2025-08-15 23:25:10 +03:00
9 changed files with 465 additions and 134 deletions
--- a/fab-ui/fab-puzzle-grid.ts
+++ b/fab-ui/fab-puzzle-grid.ts
--- a/fab-ui/index.html
+++ b/fab-ui/index.html
@ -2,7 +2,6 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FaB Cards</title>
    <link rel="stylesheet" href="./src/index.css" />
@ -10,7 +9,47 @@
  </head>
  <body>
    <h2>Card Printings</h2>
-    <h3>Standard Printings</h3>
+  
+    <h3>Simple list</h3>
+      <ul>
+        <li>
+          <fab-card-title
+              setId="ROS152"
+              name="Arcane Cussing"
+              color="Red"
+              rarity="C">
+            </fab-card-title>
+        </li>
+        <li>
+          <fab-card-title
+            setId="ROS153"
+            name="Arcane Cussing"
+            color="Yellow"
+            foiling="R"
+            rarity="C"
+          ></fab-card-title>
+        </li>
+        <li>
+          <fab-card-title
+            setId="ROS154"
+            name="Arcane Cussing"
+            color="Blue"
+            foiling="C"
+            rarity="C"
+          ></fab-card-title>
+        </li>
+        <li>
+          <fab-card-title
+            setId="HNT076"
+            name="Art of the Dragon: Scale"
+            comment="Longer name"
+            color="Red"
+            rarity="R"
+          ></fab-card-title>
+        </li>
+      </ul>
+
+    <h3>Standard Printings: Cards view</h3>
    <div class="cards-list">
      <fab-card-printing
        setId="ROS152"
@ -40,11 +79,82 @@
        rarity="R"
      ></fab-card-printing>
    </div>
+  
+    <h3>Foiling</h3>
+    <div class="cards-list">
+      <fab-card-printing
+      setId="HNT076"
+      name="Art of the Dragon: Scale"
+      color="Red"
+      rarity="R"
+      foiling="R"
+      ></fab-card-printing>
+      <fab-card-printing
+      setId="HNT076"
+      name="Art of the Dragon: Scale"
+      color="Red"
+      rarity="R"
+      foiling="C"
+      ></fab-card-printing>
+    </div>
+
+    <h3>Multiple Copies of a Card</h3>
+    <div class="cards-list">
+      <fab-card-printing-multiplied
+        num="3"
+        setId="ROS152"
+        name="Arcane Cussing"
+        color="Red"
+        rarity="C"
+      ></fab-card-printing-multiplied>
+    </div>
+
+    <h3>Card not Available</h3>
+    <div class="cards-list">
+      <fab-card-printing
+        setId="ROS155"
+        name="Deadwood Dirge"
+        color="Red"
+        rarity="C"
+        available=0
+      ></fab-card-printing>
+      <fab-card-printing
+        setId="ROS155"
+        name="Deadwood Dirge"
+        color="Red"
+        rarity="C"
+        num=3
+        available=1
+      ></fab-card-printing>
+    </div>
+
    <h3>Dual Printings</h3>
    <div class="cards-list"></div>
+  
    <h2>Cards Unique Visually</h2>
+  
+    <p>Basic images</p>
    <div class="cards-list">
-      <fab-card-image setId="ROS152" name="Arcane Cussing"></fab-card-image>
+      <fab-card-image-block setId="ROS152" name="Arcane Cussing"></fab-card-image-block>
+      <fab-card-image-block setId="ROS153" name="Arcane Cussing"></fab-card-image-block>
+      <fab-card-image-block setId="ROS154" name="Arcane Cussing"></fab-card-image-block>
+      <fab-card-image-block setId="HNT076" name="Art of the Dragon: Scale"></fab-card-image-block>
    </div>
+
+    <p>Multiplied</p>
+    <div class="cards-list">
+      <fab-card-image-block setId="ROS152" name="Arcane Cussing" num="3"></fab-card-image-block>
+      <fab-card-image-block setId="ROS153" name="Arcane Cussing" num="2"></fab-card-image-block>
+      <fab-card-image-block setId="ROS154" name="Arcane Cussing" num="5"></fab-card-image-block>
+      <fab-card-image-block setId="HNT076" name="Art of the Dragon: Scale"></fab-card-image-block>
+    </div>
+
+    </div>
+  
+    <p>Marvels and Alternate Arts</p>
+    <div class="cards-list">
+    </div>
+    <h3>Macro Puzzle Grid</h3>
+    <fab-puzzle-grid></fab-puzzle-grid>
  </body>
 </html>
--- a/fab-ui/public/vite.svg
+++ b/fab-ui/public/vite.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/fab-ui/src/enums.ts
+++ b/fab-ui/src/enums.ts
@ -0,0 +1,21 @@
+
+export const FabCardColor = {
+    RED: "Red",
+    YELLOW: "Yellow",
+    BLUE: "Blue",
+} as const;
+
+export function colorToNumber(color: typeof FabCardColor[keyof typeof FabCardColor]): number {
+    switch (color) {
+        case FabCardColor.RED:
+            return 1;
+        case FabCardColor.YELLOW:
+            return 2;
+        case FabCardColor.BLUE:
+            return 3;
+        default:
+            return 0;
+    }
+}
+
+// export type FabCardColor = typeof FabCardColor[keyof typeof FabCardColor];
--- a/fab-ui/src/fab-card-image.ts
+++ b/fab-ui/src/fab-card-image.ts
@ -0,0 +1,111 @@
+import { LitElement, css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+@customElement('fab-card-image')
+export class FabCardImage extends LitElement {
+    @property({ type: String })
+    setId = '';
+    @property({ type: String })
+    name = '';
+    @property({ type: String })
+    is_available = "true";
+
+    render() {
+        return html`
+            <div class="fab-card-image ${this.is_available == "true" ? '' : 'not-available'}">
+                <img
+                 class="single-card-img"
+                 src="http://localhost:8000/p/${this.setId}/w400"
+                 alt="${this.name}"
+                 title="${this.name}"
+            ></div>
+        `;
+    }
+
+    static styles = css`
+    .fab-card-image {
+        position: relative;
+        width: 100%;
+        height: auto;
+        padding-bottom: 140%;
+    }
+    .fab-card-image img {
+        position: absolute;
+        left: 0;
+        top: 0;
+        border-radius: 8px;
+        box-shadow: rgba(0,0,0,0.18) 0px 2px 8px;
+        transition: box-shadow 0.2s, z-index 0.2s, opacity 0.2s;
+    }
+    .fab-card-image.not-available img {
+        filter: grayscale(90%) opacity(100%);
+    }
+    .fab-card-image img.single-card-img {
+        width: 100%;
+        left: 0;
+        position: absolute;
+        transform: none;
+        z-index: 2;
+    }
+    `;
+}
+
+@customElement('fab-card-image-multiplied')
+export class FabCardImageMultiplied extends FabCardImage {
+    @property({ type: String })
+    setId = '';
+    @property({ type: String })
+    name = '';
+    @property({ type: Number })
+    num = 1;
+    @property({ type: Number })
+    available = 100;
+
+    render() {
+        let cardImages = [];
+
+        for (let i = 0; i < this.num; i++) {
+            // Just to ensure reactivity
+            cardImages.push(html`
+                <fab-card-image
+                    setId="${this.setId}"
+                    name="${this.name}"
+                    is_available="${i < this.available}"
+                    style="display: flex; box-sizing: border-box; margin: ${i == 0 ? 0 : -124}% 0px 0px;"
+                ></fab-card-image>
+            `);
+        }
+
+        return html`
+            <div class="fab-card-image-multiplied" style="box-sizing: border-box;">
+                ${cardImages}
+            </div>
+        `;
+    }
+}
+
+@customElement('fab-card-image-block')
+export class FabCardImageBlock extends LitElement {
+    @property({ type: String })
+    setId = '';
+    @property({ type: String })
+    name = '';
+    @property({ type: Number })
+    num = 1;
+
+    render() {
+        return html`
+            <div class="fab-card-image-block">
+                <fab-card-image-multiplied setId="${this.setId}" name="${this.name}" num="${this.num}"></fab-card-image>
+            </div>
+        `;
+    }
+
+    static styles = css`
+    .fab-card-image-block {
+        width: 220px;
+        border-radius: 10px;
+        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+    }
+    `
+}
--- a/fab-ui/src/fab-card-title.ts
+++ b/fab-ui/src/fab-card-title.ts
@ -0,0 +1,168 @@
+import { LitElement, css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { FabCardColor, colorToNumber } from './enums';
+
+@customElement("fab-pitch-circles")
+export class FabPitchCircles extends LitElement {
+    static SYMBOL = '●️';
+
+    @property({ type: FabCardColor })
+    color = null;
+
+    render() {
+        let num: number;
+        if (this.color !== null) {
+            num = colorToNumber(this.color);
+        } else {
+            num = 0;
+        }
+        return html`
+            <span class="pitch-circles pitch-circles-${this.color ? String(this.color).toLowerCase() : 'none'}">
+                ${FabPitchCircles.SYMBOL.repeat(num)}
+            </span>
+        `;
+    }
+
+    static styles = css`
+        .pitch-circles {
+            display: inline-block;
+        }
+        .pitch-circles-red {
+            color: red;
+        }
+        .pitch-circles-yellow {
+            color: #FFD600;
+        }
+        .pitch-circles-blue {
+            color: blue;
+        }
+    `;
+}
+
+@customElement("fab-rarity-symbol")
+export class FabRaritySymbol extends LitElement {
+    @property({ type: String })
+    rarity = '';
+
+    render() {
+        return html`
+            <code class="fab-rarity-icon fab-rarity-${this.rarity.toLowerCase()}">${this.rarity}</code>
+        `;
+    }
+
+    static styles = css`
+    .fab-rarity-icon {
+        font-family: monospace;
+        display: inline-block;
+        width: 1.2em;
+        height: 1.2em;
+        line-height: 1.1em;
+        text-align: center;
+        border-radius: 50%;
+        color: #fff;
+        font-size: 0.7em;
+    }
+
+    .fab-rarity-icon.fab-rarity-m {
+        background-color: red;
+    }
+
+    .fab-rarity-icon.fab-rarity-r {
+        background-color: blue;
+    }
+
+    .fab-rarity-icon.fab-rarity-p {
+        background-color: green;
+    }
+
+    .fab-rarity-icon.fab-rarity-c {
+        background-color: gray;
+    }
+
+    .fab-rarity-icon.fab-rarity-l {
+        background-color: orange;
+    }
+    `;
+}
+
+@customElement('fab-printing-id')
+export class FabPrintingId extends LitElement {
+    @property({ type: String })
+    setId = '';
+    @property({ type: Number })
+    number = 0;
+
+    render() {
+        return html`
+            <span class="printing-id">
+                <span class="set-id">${this.setId}</span><span class="set-number">${String(this.number).padStart(3, '0')}</span></span>
+        `;
+    }
+
+    static styles = css`
+    .printing-id {
+        font-family: "Geist Mono", monospace;
+        font-weight: bold;
+        color: #666;
+    }
+    `;
+}
+
+@customElement('fab-card-title')
+export class FabCardTitle extends LitElement {
+    @property({ type: String })
+    setId = '';
+    @property({ type: String })
+    name = '';
+    @property({ type: String })
+    color = '';
+    @property({ type: String })
+    rarity = '';
+    @property({ type: String })
+    comment = '';
+    @property({ type: String })
+    foiling = 'S';
+
+    render() {
+        return html`
+            <span class="card-title   ${this.foiling != 'S' ? (this.foiling == 'R' ? 'rainbow-foiling' : 'cold-foiling') : ''}">
+                <fab-rarity-symbol rarity="${this.rarity}"></fab-rarity-symbol>
+                <fab-printing-id setId="${this.setId.slice(0, 3)}" number="${this.setId.slice(3)}"></fab-printing-id>
+                <span class="card-name">${this.name}</span>
+                <span class="card-color color-${this.color.toLowerCase()}">(${this.color})</span>
+                <span class="card-foiling">${this.foiling == "S" ? '' : this.foiling }</span>
+                <fab-pitch-circles color="${this.color}"></fab-pitch-circles>
+                <!--<span class="comment">${this.comment}</span>-->
+            </span>
+        `;
+    }
+
+    static styles = css`
+    .rainbow-foiling .card-name {
+        background: linear-gradient(90deg, #ffb347, #ffcc33, #b4ffb3, #b3d1ff, #e0b3ff, #ffb3d1, #ffb347);
+        background-size: 200% 200%;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        text-shadow: 0 1px 2px rgba(0,0,0,0.08);
+        animation: rainbow-move 3s linear infinite alternate;
+        font-weight: bold;
+    }
+    @keyframes rainbow-move {
+        0% { background-position: 0% 50%; }
+        100% { background-position: 100% 50%; }
+    }
+    .cold-foiling .card-name {
+        background: linear-gradient(90deg, #b3e0ff, #e6e6e6, #b3e0ff, #e6e6e6, #b3e0ff);
+        background-size: 200% 200%;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        text-shadow: 0 1px 2px rgba(0,0,0,0.08);
+        animation: cold-move 2.5s linear infinite alternate;
+        font-weight: bold;
+    }
+    @keyframes cold-move {
+        0% { background-position: 0% 50%; }
+        100% { background-position: 100% 50%; }
+    }
+    `;
+}
--- a/fab-ui/src/fab-card.ts
+++ b/fab-ui/src/fab-card.ts
@ -1,52 +1,5 @@
 import { LitElement, css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
-import { FabCardImage } from './fab-image';
-
-@customElement("fab-rarity-symbol")
-export class FabRaritySymbol extends LitElement {
-    @property({ type: String })
-    rarity = '';
-
-    render() {
-        return html`
-            <code class="fab-rarity-icon fab-rarity-${this.rarity.toLowerCase()}">${this.rarity}</code>
-        `;
-    }
-
-    static styles = css`
-    .fab-rarity-icon {
-        font-family: monospace;
-        display: inline-block;
-        width: 1.2em;
-        height: 1.2em;
-        line-height: 1.1em;
-        text-align: center;
-        border-radius: 50%;
-        color: #fff;
-        font-size: 0.7em;
-    }
-
-    .fab-rarity-icon.fab-rarity-m {
-        background-color: red;
-    }
-
-    .fab-rarity-icon.fab-rarity-r {
-        background-color: blue;
-    }
-
-    .fab-rarity-icon.fab-rarity-p {
-        background-color: green;
-    }
-
-    .fab-rarity-icon.fab-rarity-c {
-        background-color: gray;
-    }
-
-    .fab-rarity-icon.fab-rarity-l {
-        background-color: orange;
-    }
-    `;
-}

@customElement('fab-card-printing')
 export class FabCardPrinting extends LitElement {
@ -62,18 +15,24 @@ export class FabCardPrinting extends LitElement {
    comment = '';
    @property({ type: String })
    foiling = 'S';
+    @property({ type: Number })
+    num = 1;
+    @property({ type: Number })
+    available = 100;

    render() {
        return html`
-    <div class="card  ${this.foiling != 'S' ? (this.foiling == 'R' ? 'rainbow-foiling' : 'cold-foiling') : ''}">
-        <fab-card-image setId="${this.setId}" name="${this.name}"></fab-card-image>
+    <div class="card ${this.available ? '' : 'not-available'} ${this.foiling != 'S' ? (this.foiling == 'R' ? 'rainbow-foiling' : 'cold-foiling') : ''}">
+        <fab-card-image-multiplied setId="${this.setId}" name="${this.name}" num="${this.num}" available="${this.available}"></fab-card-image-multiplied>
        <div class="card-details">
-            <fab-rarity-symbol rarity="${this.rarity}"></fab-rarity-symbol>
-            <span class="printing-id">${this.setId}</span>
-            <span class="card-name">${this.name}</span>
-            <span class="card-color color-${this.color.toLowerCase()}">(${this.color})</span>
-            <span class="card-foiling">${this.foiling == "S" ? '' : this.foiling }</span>
-            <!--<span class="comment">${this.comment}</span>-->
+            <fab-card-title
+                setId="${this.setId}"
+                name="${this.name}"
+                color="${this.color}"
+                rarity="${this.rarity}"
+                foiling="${this.foiling}"
+                comment="${this.comment}"
+            ></fab-card-title>
        </div>
    </div>
        `;
@ -89,36 +48,41 @@ export class FabCardPrinting extends LitElement {
        padding: 10px;
        font-size: 12px;
    }
-    .printing-id {
-        font-family: "Geist Mono", monospace;
-        font-weight: bold;
-        color: #666;
-    }
-    .rainbow-foiling .card-name {
-        background: linear-gradient(90deg, #ffb347, #ffcc33, #b4ffb3, #b3d1ff, #e0b3ff, #ffb3d1, #ffb347);
-        background-size: 200% 200%;
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        text-shadow: 0 1px 2px rgba(0,0,0,0.08);
-        animation: rainbow-move 3s linear infinite alternate;
-        font-weight: bold;
-    }
-    @keyframes rainbow-move {
-        0% { background-position: 0% 50%; }
-        100% { background-position: 100% 50%; }
-    }
-    .cold-foiling .card-name {
-        background: linear-gradient(90deg, #b3e0ff, #e6e6e6, #b3e0ff, #e6e6e6, #b3e0ff);
-        background-size: 200% 200%;
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        text-shadow: 0 1px 2px rgba(0,0,0,0.08);
-        animation: cold-move 2.5s linear infinite alternate;
-        font-weight: bold;
-    }
-    @keyframes cold-move {
-        0% { background-position: 0% 50%; }
-        100% { background-position: 100% 50%; }
-    }
    `;
+}
+
+@customElement('fab-card-printing-multiplied')
+export class FabCardPrintingMultiplied extends LitElement {
+    @property({ type: String })
+    setId = '';
+    @property({ type: String })
+    name = '';
+    @property({ type: String })
+    color = '';
+    @property({ type: String })
+    rarity = '';
+    @property({ type: String })
+    comment = '';
+    @property({ type: String })
+    foiling = 'S';
+    @property({ type: Number })
+    num = 1;
+
+    render() {
+        return html`
+    <div class="card  ${this.foiling != 'S' ? (this.foiling == 'R' ? 'rainbow-foiling' : 'cold-foiling') : ''}">
+        <fab-card-image-multiplied setId="${this.setId}" name="${this.name}" num="${this.num}"></fab-card-image-multiplied>
+        <div class="card-details">
+            <fab-card-title
+                setId="${this.setId}"
+                name="${this.name}"
+                color="${this.color}"
+                rarity="${this.rarity}"
+                foiling="${this.foiling}"
+                comment="${this.comment}"
+            ></fab-card-title>
+        </div>
+    </div>
+        `;
+    }
 }
--- a/fab-ui/src/fab-image.ts
+++ b/fab-ui/src/fab-image.ts
@ -1,43 +0,0 @@
-import { LitElement, css, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-@customElement('fab-card-image')
-export class FabCardImage extends LitElement {
-    @property({ type: String })
-    setId = '';
-    @property({ type: String })
-    name = '';
-
-    render() {
-        return html`
-            <div class="card-img">
-                <img class="single-card-img" src="http://localhost:8000/p/${this.setId}/w400" alt="${this.name}">
-            </div>
-        `;
-    }
-
-    static styles = css`
-    .card-img {
-        position: relative;
-        width: 100%;
-        height: auto;
-        padding-bottom: 140%;
-    }
-    .card-img img {
-        position: absolute;
-        top: 0;
-        left: 0;
-        border-radius: 8px;
-        box-shadow: rgba(0,0,0,0.18) 0px 2px 8px;
-        transition: box-shadow 0.2s, z-index 0.2s, opacity 0.2s;
-    }
-    .card-img img.single-card-img {
-        width: 100%;
-        left: 0;
-        top: 0;
-        position: absolute;
-        transform: none;
-        z-index: 2;
-    }
-    `;
-}
--- a/fab-ui/src/main.ts
+++ b/fab-ui/src/main.ts
@ -1,3 +1,4 @@
 // Main entry for Vite. Import all custom elements here.
 import './fab-card.ts';
-import './fab-image.ts'
+import './fab-card-image.ts'
+import './fab-card-title.ts'
Author	SHA1	Message	Date
Alexandr Andreyev	092b6d1022	unavailable cards	2025-08-23 23:38:37 +03:00
Alexandr Andreyev	6406c8072b	build is fixed	2025-08-23 23:17:27 +03:00
Alexandr Andreyev	2fc102aaf2	display multiple copies of a card in one components	2025-08-23 23:04:50 +03:00
Alexandr Andreyev	8108dbc2e4	sync	2025-08-23 18:54:57 +03:00
Alexandr Andreyev	ffa03b5a27	sync	2025-08-23 14:02:28 +03:00
Alexandr Andreyev	8c460a1819	remove extra whitespace from title	2025-08-15 23:25:10 +03:00
Alexandr Andreyev	6c6428e525	add pitch circles	2025-08-15 22:50:13 +03:00
Alexandr Andreyev	9c72e20e94	add fab-printing-id component	2025-08-15 16:45:37 +03:00
Alexandr Andreyev	ab02c3b8c4	add card title component	2025-08-15 16:11:30 +03:00
Alexandr Andreyev	3de3c42427	remove icon	2025-08-15 15:22:37 +03:00
				`@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>