Input Template

[nobr]
  [div=display: none;][font=Titillium Web]@fluticasone[/font][/div]
  [div=display: flex; /* main container */
  &Overall Variables \ group&--bgcolor: &Background Color \ text \ white&;
  --border: &Border Color \ text \ gainsboro&;
  --txtcolor: &Text Color \ text \ dimgray&;
  --iconcolor: &Button Color \ text \ darkgray&;
  --filter: &Filter \ select \ saturate(60%) brightness(60%) \ none&; 
  --font: 'Titillium Web', sans-serif;&end&
  box-sizing: border-box;
  font-size: 1rem;
  font-family: var(--font);
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  padding: 1rem 1rem calc(1rem + 20px) 1rem;
  container: main / inline-size;
  gap: calc(1rem + 20px) 1rem;]
    &Character \ group \ repeat&
    [div=flex: 1 0 300px; /* start of cs copy paste */
    --bannerimg: url(&URL of Banner IMG \ text \ https://i.imgur.com/fgIGLkw.jpeg&);
    --iconimg: url(&URL of Character Icon \ text \ https://i.imgur.com/NrKzzAD.jpeg&);
    width: (300px,100%,450px);
    max-width: 450px;
    aspect-ratio: 3/4;
    box-sizing: border-box;
    background: var(--bgcolor);
    border: 1px solid var(--border);
    border-top: 10px solid var(--border);
    border-bottom: 5px solid var(--border);
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;]
      [div=flex: 1 0 60px;
      width: 100%;
      background: var(--bannerimg) center center/cover no-repeat; /* adjust as necessary */
      filter: var(--filter);]
        [div=display: none;]banner area[/div]
      [/div]
      [div=flex: 0 0 auto;
      width: calc(100% - 2rem);
      color: var(--iconcolor);
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-evenly;
      font-size: 1.25rem;
      align-items: flex-end;
      --paddingbtn: 1rem 1rem 1.5rem 1rem;]
        [div=flex: 0 0 auto;
        padding: var(--paddingbtn);]
          [fa]fa-phone[/fa]
        [/div]
        [div=flex: 0 0 auto;
        padding: var(--paddingbtn);]
          [fa]fa-envelope[/fa]
        [/div]
        [div=flex: 1 0 110px;
        background: green;
        max-width: 130px;
        position: relative;]
          [div=position: absolute;
          bottom: -5%;
          width: 100%;
          aspect-ratio: 1;
          box-sizing: border-box;
          border: 5px solid var(--bgcolor);
          border-radius: 50%;
          overflow: hidden;
          background: var(--iconimg) center center/cover no-repeat;]
            [div=display: none;]icon area[/div]
          [/div]
        [/div]
        [div=flex: 0 0 auto;
        padding: var(--paddingbtn);]
          [fa]fa-user[/fa]
        [/div]
        [div=flex: 0 0 auto;
        padding: var(--paddingbtn);]
          [fa]fa-star[/fa]
        [/div]
      [/div]
      [div=flex: 2 0 110px;
      width: 100%;
      overflow: hidden;
      position: relative;]
        [div=position: absolute;
        top: 1.5rem;
        left: 2rem;
        width: calc(100% - 4rem);
        height: calc(100% - 2rem);
        color: var(--txtcolor);
        font-size: .93rem;
        text-align: justify;
        overflow-x: hidden;
        overflow-y: scroll;
        scrollbar-width: none;]
          &Content Area \ content&
        [/div]
      [/div]
      [div=flex: 0 0 56px;
      width: calc(100% - 2.5rem);
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      gap: 5px;
      pointer-events: none;
      font-size: 0px;
      line-height: 0px; 
      position: relative;
      top: 28px;]
        &Pokemon \ group \ repeat&[div=flex: 0 0 56px; /* pokemon slot */
        aspect-ratio: 1;
        box-sizing: border-box;
        background: var(--border);
        border-radius: 50%;
        display: flex;
        padding: 2.5px;
        flex-flow: row wrap;
        align-items: center;
        justify-content: center;]
          [img]&URL of Pokemon Sprite (small) \ text \ https://i.imgur.com/8XFn1qY.png&[/img]
        [/div]
        &end&
      [/div]
    [/div]
    &end&
  [/div]
[/nobr]

Debug Mode

[
  "[nobr]\r\n  [div=display: none;][font=Titillium Web]@fluticasone[/font][/div]\r\n  [div=display: flex; /* main container */\r\n  ",
  {
    "type": "group",
    "description": "Overall Variables",
    "markerStart": {
      "type": "group",
      "description": "Overall Variables",
      "original": "&Overall Variables \\ group&",
      "repeat": false,
      "indices": [
        123,
        149
      ]
    },
    "repeat": false,
    "originalChildren": [
      "--bgcolor: ",
      {
        "type": "text",
        "description": "Background Color",
        "marker": {
          "type": "text",
          "description": "Background Color",
          "defaultValue": "white",
          "original": "&Background Color \\ text \\ white&",
          "indices": [
            161,
            193
          ]
        },
        "value": "white"
      },
      ";\r\n  --border: ",
      {
        "type": "text",
        "description": "Border Color",
        "marker": {
          "type": "text",
          "description": "Border Color",
          "defaultValue": "gainsboro",
          "original": "&Border Color \\ text \\ gainsboro&",
          "indices": [
            209,
            241
          ]
        },
        "value": "gainsboro"
      },
      ";\r\n  --txtcolor: ",
      {
        "type": "text",
        "description": "Text Color",
        "marker": {
          "type": "text",
          "description": "Text Color",
          "defaultValue": "dimgray",
          "original": "&Text Color \\ text \\ dimgray&",
          "indices": [
            259,
            287
          ]
        },
        "value": "dimgray"
      },
      ";\r\n  --iconcolor: ",
      {
        "type": "text",
        "description": "Button Color",
        "marker": {
          "type": "text",
          "description": "Button Color",
          "defaultValue": "darkgray",
          "original": "&Button Color \\ text \\ darkgray&",
          "indices": [
            306,
            337
          ]
        },
        "value": "darkgray"
      },
      ";\r\n  --filter: ",
      {
        "type": "select",
        "description": "Filter",
        "marker": {
          "type": "select",
          "description": "Filter",
          "options": [
            "saturate(60%) brightness(60%)",
            "none"
          ],
          "original": "&Filter \\ select \\ saturate(60%) brightness(60%) \\ none&",
          "indices": [
            353,
            408
          ]
        }
      },
      "; \r\n  --font: 'Titillium Web', sans-serif;"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        451,
        455
      ]
    }
  },
  "\r\n  box-sizing: border-box;\r\n  font-size: 1rem;\r\n  font-family: var(--font);\r\n  flex-flow: row wrap;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 1rem 1rem calc(1rem + 20px) 1rem;\r\n  container: main / inline-size;\r\n  gap: calc(1rem + 20px) 1rem;]\r\n    ",
  {
    "type": "group",
    "description": "Character",
    "markerStart": {
      "type": "group",
      "description": "Character",
      "original": "&Character \\ group \\ repeat&",
      "repeat": true,
      "indices": [
        727,
        754
      ]
    },
    "repeat": true,
    "originalChildren": [
      "\r\n    [div=flex: 1 0 300px; /* start of cs copy paste */\r\n    --bannerimg: url(",
      {
        "type": "text",
        "description": "URL of Banner IMG",
        "marker": {
          "type": "text",
          "description": "URL of Banner IMG",
          "defaultValue": "https://i.imgur.com/fgIGLkw.jpeg",
          "original": "&URL of Banner IMG \\ text \\ https://i.imgur.com/fgIGLkw.jpeg&",
          "indices": [
            834,
            894
          ]
        },
        "value": "https://i.imgur.com/fgIGLkw.jpeg"
      },
      ");\r\n    --iconimg: url(",
      {
        "type": "text",
        "description": "URL of Character Icon",
        "marker": {
          "type": "text",
          "description": "URL of Character Icon",
          "defaultValue": "https://i.imgur.com/NrKzzAD.jpeg",
          "original": "&URL of Character Icon \\ text \\ https://i.imgur.com/NrKzzAD.jpeg&",
          "indices": [
            918,
            982
          ]
        },
        "value": "https://i.imgur.com/NrKzzAD.jpeg"
      },
      ");\r\n    width: (300px,100%,450px);\r\n    max-width: 450px;\r\n    aspect-ratio: 3/4;\r\n    box-sizing: border-box;\r\n    background: var(--bgcolor);\r\n    border: 1px solid var(--border);\r\n    border-top: 10px solid var(--border);\r\n    border-bottom: 5px solid var(--border);\r\n    display: flex;\r\n    flex-flow: column nowrap;\r\n    justify-content: center;\r\n    align-items: center;]\r\n      [div=flex: 1 0 60px;\r\n      width: 100%;\r\n      background: var(--bannerimg) center center/cover no-repeat; /* adjust as necessary */\r\n      filter: var(--filter);]\r\n        [div=display: none;]banner area[/div]\r\n      [/div]\r\n      [div=flex: 0 0 auto;\r\n      width: calc(100% - 2rem);\r\n      color: var(--iconcolor);\r\n      display: flex;\r\n      flex-flow: row nowrap;\r\n      justify-content: space-evenly;\r\n      font-size: 1.25rem;\r\n      align-items: flex-end;\r\n      --paddingbtn: 1rem 1rem 1.5rem 1rem;]\r\n        [div=flex: 0 0 auto;\r\n        padding: var(--paddingbtn);]\r\n          [fa]fa-phone[/fa]\r\n        [/div]\r\n        [div=flex: 0 0 auto;\r\n        padding: var(--paddingbtn);]\r\n          [fa]fa-envelope[/fa]\r\n        [/div]\r\n        [div=flex: 1 0 110px;\r\n        background: green;\r\n        max-width: 130px;\r\n        position: relative;]\r\n          [div=position: absolute;\r\n          bottom: -5%;\r\n          width: 100%;\r\n          aspect-ratio: 1;\r\n          box-sizing: border-box;\r\n          border: 5px solid var(--bgcolor);\r\n          border-radius: 50%;\r\n          overflow: hidden;\r\n          background: var(--iconimg) center center/cover no-repeat;]\r\n            [div=display: none;]icon area[/div]\r\n          [/div]\r\n        [/div]\r\n        [div=flex: 0 0 auto;\r\n        padding: var(--paddingbtn);]\r\n          [fa]fa-user[/fa]\r\n        [/div]\r\n        [div=flex: 0 0 auto;\r\n        padding: var(--paddingbtn);]\r\n          [fa]fa-star[/fa]\r\n        [/div]\r\n      [/div]\r\n      [div=flex: 2 0 110px;\r\n      width: 100%;\r\n      overflow: hidden;\r\n      position: relative;]\r\n        [div=position: absolute;\r\n        top: 1.5rem;\r\n        left: 2rem;\r\n        width: calc(100% - 4rem);\r\n        height: calc(100% - 2rem);\r\n        color: var(--txtcolor);\r\n        font-size: .93rem;\r\n        text-align: justify;\r\n        overflow-x: hidden;\r\n        overflow-y: scroll;\r\n        scrollbar-width: none;]\r\n          ",
      {
        "type": "content",
        "description": "Content Area",
        "marker": {
          "type": "content",
          "description": "Content Area",
          "original": "&Content Area \\ content&",
          "indices": [
            3310,
            3333
          ]
        }
      },
      "\r\n        [/div]\r\n      [/div]\r\n      [div=flex: 0 0 56px;\r\n      width: calc(100% - 2.5rem);\r\n      display: flex;\r\n      flex-flow: row nowrap;\r\n      justify-content: center;\r\n      gap: 5px;\r\n      pointer-events: none;\r\n      font-size: 0px;\r\n      line-height: 0px; \r\n      position: relative;\r\n      top: 28px;]\r\n        ",
      {
        "type": "group",
        "description": "Pokemon",
        "markerStart": {
          "type": "group",
          "description": "Pokemon",
          "original": "&Pokemon \\ group \\ repeat&",
          "repeat": true,
          "indices": [
            3662,
            3687
          ]
        },
        "repeat": true,
        "originalChildren": [
          "[div=flex: 0 0 56px; /* pokemon slot */\r\n        aspect-ratio: 1;\r\n        box-sizing: border-box;\r\n        background: var(--border);\r\n        border-radius: 50%;\r\n        display: flex;\r\n        padding: 2.5px;\r\n        flex-flow: row wrap;\r\n        align-items: center;\r\n        justify-content: center;]\r\n          [img]",
          {
            "type": "text",
            "description": "URL of Pokemon Sprite (small)",
            "marker": {
              "type": "text",
              "description": "URL of Pokemon Sprite (small)",
              "defaultValue": "https://i.imgur.com/8XFn1qY.png",
              "original": "&URL of Pokemon Sprite (small) \\ text \\ https://i.imgur.com/8XFn1qY.png&",
              "indices": [
                4012,
                4083
              ]
            },
            "value": "https://i.imgur.com/8XFn1qY.png"
          },
          "[/img]\r\n        [/div]\r\n        "
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            4116,
            4120
          ]
        }
      },
      "\r\n      [/div]\r\n    [/div]\r\n    "
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        4153,
        4157
      ]
    }
  },
  "\r\n  [/div]\r\n[/nobr]"
]

[]

biri-biri.template 1.0

By glucoseguardian

Overall Variables

Background Color

Border Color

Text Color

Button Color

Filter

saturate(60%) brightness(60%)

none

Character

URL of Banner IMG

URL of Character Icon

Content Area

Pokemon

URL of Pokemon Sprite (small)

Output