Input Template

[nobr]
    [div=display: none;]
      &Font Call \ group&[font=&Title Font Call \ text \ BIZ UDMincho&]fontcall[/font]
      [font=&Title Font Call \ text \ BIZ UDPGothic&]fontcall[/font]&end&
    [/div]
    [div=&Variable Set-Up \ group&--aColor: &Accent Color \ text \ #ffffff&;
    --bColor: &Background Color \ text \ #000000&;
    --serifFont: '&Title Font Call \ text \ BIZ UDMincho&', serif; /* if changing font please remember to also update the fontcall on top*/
    --ssFont: '&Title Font Call \ text \ BIZ UDPGothic&', sans-serif;
    --imgAdjust: &Image Filter \ text \ grayscale(100%) contrast(110%)&; /* edit as necessary for your pics */
    --largeIMG: url(&Main Large Image URL \ text \ https://placehold.co/400x600/000000/ffffff&); /* these sizes are guesstimates as almost any image size should work */
    --iconIMG: url(&Smaller Top Image \ text \ https://placehold.co/200x400/000000/ffffff&);
    --leftIMG1: url(&Left IMG 1 URL \ text \ https://placehold.co/200/000000/ffffff&);
    --leftIMG2: url(&Left IMG 2 URL \ text \ https://placehold.co/200/000000/ffffff&);
    --leftIMG3: url(&Left IMG 3 URL \ text \ https://placehold.co/200/000000/ffffff&);
    --rightIMG1: url(&Right IMG 1 URL \ text \ https://placehold.co/250x125/000000/ffffff&);
    --rightIMG2: url(&Right IMG 2 URL \ text \ https://placehold.co/250x125/000000/ffffff&);&end&
    display: block;
    position: relative;
    width: clamp(300px,100%,1000px);
    height: auto;
    margin: auto;
    box-sizing: border-box;
    overflow: hidden;
    box-sizing: border-box;
    padding: 10px 10px 20px 0px;]
      [div=display: flex;
      flex-flow: row wrap;
      justify-content: stretch;
      align-content: stretch;
      gap: 1px;
      box-sizing: border-box;
      align-items: stretch;
      width: 100%;
      border: 1px solid var(--bColor);
      background: var(--bColor);
      box-shadow: 10px 10px 0px var(--bColor);]
        [div=flex: 0 100%;
        font-family: var(--serifFont);
        font-size: 1.75rem;
        color: var(--aColor);
        text-transform: uppercase;
        box-sizing: border-box;
        padding: 8px 3% 3px 3%;
        width: 100%;
        text-align: left;]
          &Character Name \ text \ name here&
        [/div]
        &Top Left Area \ group&[div=flex: 1 250px;]
          [div=width: 100%;
          height: 100%;
          display: flex;
          flex-flow: column nowrap;
          justify-content: stretch;
          align-items: stretch;
          align-content: stretch;
          gap: 1px;
          color: var(--bColor);
          font-family: var(--ssFont);]
            &Information Line \ group \ repeat&[div=flex: 0 auto; display: flex; flex-flow: row wrap; justify-content: space-between; width: 100%; box-sizing: border-box; padding: .6rem 1rem; background: var(--aColor);]
              &Information Answer \ text \ info ans&
              [div=display: inline-block; font-family: var(--serifFont); font-size: .85rem;]&Information Detail \ text \ info&[/div]
            [/div]&end&
            [div=flex: 1 auto; padding: 2rem; box-sizing: border-box; display: flex; flex-flow: row wrap; align-content: center; align-items: center;]
              [div=flex: 0 100%; width: 100%; position: relative; box-sizing: border-box; border: 1px solid var(--aColor); padding: 1rem; font-family: var(--serifFont); text-align: center; color: var(--aColor); font-size: .85rem;]
                &Quote or Lyric \ content&
                [div=position: absolute; left: 15px; top: -1px; height: 1px; width: calc(100% - 30px); background: var(--bColor); z-index: 3;] [/div]
                [div=position: absolute; left: 15px; bottom: -1px; height: 1px; width: calc(100% - 30px); background: var(--bColor); z-index: 3;] [/div]
              [/div]
            [/div]
          [/div]
        [/div]&end&
        &Top Middle Area \ group&[div=flex: 2 300px; display: flex; flex-flow: column nowrap; gap: 1px;]
          [div=box-sizing: border-box;
          display: flex;
          flex-flow: row wrap;
          align-items: stretch;
          justify-content: center;
          text-align: center;
          gap: 1px;
          font-size: .5rem;
          line-height: 1;
          font-family: var(--ssFont);
          color: var(--bColor);]
            &Information Line \ group \ repeat&[comment]start of copypaste area --][/comment][div=flex: 1 3rem; background: var(--aColor); height: 100%; box-sizing: border-box; padding: .4rem; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; gap: 2px; padding: 1rem 0px;]
              [div=flex: 0 auto; font-size: 1.2rem; font-family: var(--serifFont);]&Info Top \ text \ top text (avoid more than 6 info lines)&[/div]
              [div=flex: 0 auto; text-transform: uppercase;]&Info Bottom \ text \ bottom text&[/div]
            [/div][comment][-- end of copypaste area. dont go past 6 of these for best results/[/comment]&end&
          [/div]
          [div=display: flex;
          flex-flow: row wrap;
          align-items: stretch;
          justify-content: center;
          gap: 1px;
          width: 100%;
          height: 100%;]
            [div=flex: 2 6rem; display: flex; flex-flow: column wrap;]
              [div=flex: 1 auto; background: var(--bColor); color: var(--aColor); box-sizing: border-box; padding: 1rem; font-size: 2rem; display: flex; flex-flow: row wrap; align-items: center; justify-content: center;] [fa]&FA Code \ text \ fa-question&[/fa][/div]
              [div=flex: 4 100px; filter: var(--imgAdjust); background: var(--iconIMG) no-repeat center center/cover;] [/div]
            [/div]
            [div=flex: 4 12rem;
            display: flex;
            flex-flow: column nowrap;
            justify-content: flex-start;
            gap: 1px;
            color: var(--bColor);
            font-family: var(--ssFont);
            font-size: .8rem;
            text-align: justify;]
              [div=flex: 1 auto; height: 100%; display: flex; flex-flow: row wrap; background: var(--aColor); padding: 1rem; justify-content: center; align-content: center;]
                [div=flex: 0 100%; width: 100%;]&Short Appearance Description \ content&[/div]
              [/div]
              &Features \ group \ repeat&[div=flex: 0 auto; display: block; background: var(--aColor); padding: .6rem 1rem;]
                &Feature \ text \ feature detail&
              [/div]&end&
            [/div]
          [/div]
        [/div]&end&
        [div=flex: 1 250px;
        background: var(--bColor) var(--largeIMG) no-repeat center center/cover;
        min-height: 250px;
        filter: var(--imgAdjust);] [/div]
        [div=flex: 1 200px; display: flex; flex-flow: column nowrap; gap: 1px; ]
          [div=flex: 1 88px; background: var(--leftIMG1) no-repeat center center/cover; filter: var(--imgAdjust);] [/div]
          [div=flex: 1 85px; background: var(--leftIMG2) no-repeat center center/cover; filter: var(--imgAdjust);] [/div]
          [div=flex: 1 85px; background: var(--leftIMG3) no-repeat center center/cover; filter: var(--imgAdjust);] [/div]
        [/div]
        &Personality Section \ group&[div=flex: 3 300px; display: flex; flex-flow: column nowrap; gap: 1px;]
          [div=flex: 1 auto; padding: 1rem .85rem; color: var(--aColor); font-family: var(--serifFont); text-transform: uppercase; font-size: 1.1rem; display: flex; flex-flow: row wrap; align-items: center;]&Section Name \ text \ personality&[/div]
          [div=flex: 2 auto; background: var(--aColor); text-align: justify; box-sizing: border-box; padding: 1.5rem; font-family: var(--ssFont); font-size: .85rem; max-height: 500px; overflow-x: hidden; overflow-y: auto; color: var(--bColor);]
            &Personality (add manual linebreaks) \ content&
          [/div]
        [/div]&end&
        &Preferences, Skills, etc. \ group&[div=flex: 3 300px; display: flex; flex-flow: column nowrap; gap: 1px;]
          &Section \ group \ repeat&[div=flex: 2 auto; display: flex; flex-flow: row wrap; align-items: stretch;]
            [div=flex: 3 100px; background: var(--bColor); color: var(--aColor); box-sizing: border-box; padding: 1.5rem; display: flex; flex-flow: row wrap; align-content: center; align-items: center; font-size: .75rem; font-family: var(--ssFont);]
              [div=flex: 0 auto]&Section Content \ content&[/div]
            [/div]
            [div=flex: 0 auto; box-sizing: border-box; padding: 1rem .65rem; text-transform: uppercase; font-family: var(--serifFont); writing-mode: vertical-rl; background: var(--aColor); color: var(--bColor); font-size: .85rem;]&Section Name \ text&[/div]
          [/div]&end&
          [div=flex: 1 85px; display: flex; flex-flow: row wrap; width: 100%; gap: 1px;]
            [div=flex: 1 50px; background: var(--rightIMG1) center center/cover; filter: var(--imgAdjust);] [/div]
            [div=flex: 1 50px; background: var(--rightIMG2) center center/cover; filter: var(--imgAdjust);] [/div]
          [/div]
        [/div]&end&
        &Backstory Area \ group&[div=flex: 0 100%; display: flex; flex-flow: row wrap; align-items: stretch; gap: 1px;] 
          [div=flex: 1 100px; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; background: var(--bColor); color: var(--aColor); font-family: var(--serifFont); padding: 2rem; text-transform: uppercase; text-align: center; font-size: 1.5rem;]
            &Section Name \ text \ history&
          [/div]
          [div=flex: 2 300px; background: var(--aColor); padding: 2rem; text-align: justify; font-family: var(--ssFont); font-size: .85rem; max-height: 375px; overflow-x: hidden; overflow-y: auto; color: var(--bColor);]
            &Backstory Content \ content&
          [/div]
        [/div]&end&
        &Relationship Area \ group&&Relationship \ group \ repeat&[comment]start of copypaste area --][/comment][div=--relIMG1: url(&Image URL \ text \ https://placehold.co/125/000000/ffffff&); flex: 1 275px; display: flex; flex-flow: row wrap; align-items: stretch; gap: 1px;]
          [div=flex: 1 85px; background: var(--relIMG1) center center/cover; filter: var(--imgAdjust);] [/div]
          [div=flex: 3 90px; display: flex; flex-flow: column nowrap; gap: 1px; height: 100%;]
            [div=flex: 0 auto; font-family: var(--serifFont); color: var(--aColor); text-transform: uppercase; padding: .85rem;]
              &Nickname \ text \ nickname&[div=display: inline-block; font-size: .85rem; margin-left: .5rem;]&Rating \ text \ [fa]fas fa-star[/fa][fa]fas fa-star[/fa][fa]fas fa-star-half-alt[/fa][fa]far fa-star[/fa][fa]far fa-star[/fa]&[/div]
            [/div]
            [div=flex: 1 auto; background: var(--aColor); color: var(--bColor); box-sizing: border-box; padding: 1rem; text-align: justify; font-family: var(--ssFont); font-size: .75rem;]&Relationship Description \ content&[/div]
          [/div]
        [/div][comment][-- end of copypaste area[/comment]&end&&end&
      [/div]
    [/div]
  [/nobr]

Debug Mode

[
  "[nobr]\r\n    [div=display: none;]\r\n      ",
  {
    "type": "group",
    "description": "Font Call",
    "markerStart": {
      "type": "group",
      "description": "Font Call",
      "original": "&Font Call \\ group&",
      "repeat": false,
      "indices": [
        40,
        58
      ]
    },
    "repeat": false,
    "originalChildren": [
      "[font=",
      {
        "type": "text",
        "description": "Title Font Call",
        "marker": {
          "type": "text",
          "description": "Title Font Call",
          "defaultValue": "BIZ UDMincho",
          "original": "&Title Font Call \\ text \\ BIZ UDMincho&",
          "indices": [
            65,
            103
          ]
        },
        "value": "BIZ UDMincho"
      },
      "]fontcall[/font]\r\n      [font=",
      {
        "type": "text",
        "description": "Title Font Call",
        "marker": {
          "type": "text",
          "description": "Title Font Call",
          "defaultValue": "BIZ UDPGothic",
          "original": "&Title Font Call \\ text \\ BIZ UDPGothic&",
          "indices": [
            134,
            173
          ]
        },
        "value": "BIZ UDPGothic"
      },
      "]fontcall[/font]"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        190,
        194
      ]
    }
  },
  "\r\n    [/div]\r\n    [div=",
  {
    "type": "group",
    "description": "Variable Set-Up",
    "markerStart": {
      "type": "group",
      "description": "Variable Set-Up",
      "original": "&Variable Set-Up \\ group&",
      "repeat": false,
      "indices": [
        218,
        242
      ]
    },
    "repeat": false,
    "originalChildren": [
      "--aColor: ",
      {
        "type": "text",
        "description": "Accent Color",
        "marker": {
          "type": "text",
          "description": "Accent Color",
          "defaultValue": "#ffffff",
          "original": "&Accent Color \\ text \\ #ffffff&",
          "indices": [
            253,
            283
          ]
        },
        "value": "#ffffff"
      },
      ";\r\n    --bColor: ",
      {
        "type": "text",
        "description": "Background Color",
        "marker": {
          "type": "text",
          "description": "Background Color",
          "defaultValue": "#000000",
          "original": "&Background Color \\ text \\ #000000&",
          "indices": [
            301,
            335
          ]
        },
        "value": "#000000"
      },
      ";\r\n    --serifFont: '",
      {
        "type": "text",
        "description": "Title Font Call",
        "marker": {
          "type": "text",
          "description": "Title Font Call",
          "defaultValue": "BIZ UDMincho",
          "original": "&Title Font Call \\ text \\ BIZ UDMincho&",
          "indices": [
            357,
            395
          ]
        },
        "value": "BIZ UDMincho"
      },
      "', serif; /* if changing font please remember to also update the fontcall on top*/\r\n    --ssFont: '",
      {
        "type": "text",
        "description": "Title Font Call",
        "marker": {
          "type": "text",
          "description": "Title Font Call",
          "defaultValue": "BIZ UDPGothic",
          "original": "&Title Font Call \\ text \\ BIZ UDPGothic&",
          "indices": [
            495,
            534
          ]
        },
        "value": "BIZ UDPGothic"
      },
      "', sans-serif;\r\n    --imgAdjust: ",
      {
        "type": "text",
        "description": "Image Filter",
        "marker": {
          "type": "text",
          "description": "Image Filter",
          "defaultValue": "grayscale(100%) contrast(110%)",
          "original": "&Image Filter \\ text \\ grayscale(100%) contrast(110%)&",
          "indices": [
            568,
            621
          ]
        },
        "value": "grayscale(100%) contrast(110%)"
      },
      "; /* edit as necessary for your pics */\r\n    --largeIMG: url(",
      {
        "type": "text",
        "description": "Main Large Image URL",
        "marker": {
          "type": "text",
          "description": "Main Large Image URL",
          "defaultValue": "https://placehold.co/400x600/000000/ffffff",
          "original": "&Main Large Image URL \\ text \\ https://placehold.co/400x600/000000/ffffff&",
          "indices": [
            683,
            756
          ]
        },
        "value": "https://placehold.co/400x600/000000/ffffff"
      },
      "); /* these sizes are guesstimates as almost any image size should work */\r\n    --iconIMG: url(",
      {
        "type": "text",
        "description": "Smaller Top Image",
        "marker": {
          "type": "text",
          "description": "Smaller Top Image",
          "defaultValue": "https://placehold.co/200x400/000000/ffffff",
          "original": "&Smaller Top Image \\ text \\ https://placehold.co/200x400/000000/ffffff&",
          "indices": [
            852,
            922
          ]
        },
        "value": "https://placehold.co/200x400/000000/ffffff"
      },
      ");\r\n    --leftIMG1: url(",
      {
        "type": "text",
        "description": "Left IMG 1 URL",
        "marker": {
          "type": "text",
          "description": "Left IMG 1 URL",
          "defaultValue": "https://placehold.co/200/000000/ffffff",
          "original": "&Left IMG 1 URL \\ text \\ https://placehold.co/200/000000/ffffff&",
          "indices": [
            947,
            1010
          ]
        },
        "value": "https://placehold.co/200/000000/ffffff"
      },
      ");\r\n    --leftIMG2: url(",
      {
        "type": "text",
        "description": "Left IMG 2 URL",
        "marker": {
          "type": "text",
          "description": "Left IMG 2 URL",
          "defaultValue": "https://placehold.co/200/000000/ffffff",
          "original": "&Left IMG 2 URL \\ text \\ https://placehold.co/200/000000/ffffff&",
          "indices": [
            1035,
            1098
          ]
        },
        "value": "https://placehold.co/200/000000/ffffff"
      },
      ");\r\n    --leftIMG3: url(",
      {
        "type": "text",
        "description": "Left IMG 3 URL",
        "marker": {
          "type": "text",
          "description": "Left IMG 3 URL",
          "defaultValue": "https://placehold.co/200/000000/ffffff",
          "original": "&Left IMG 3 URL \\ text \\ https://placehold.co/200/000000/ffffff&",
          "indices": [
            1123,
            1186
          ]
        },
        "value": "https://placehold.co/200/000000/ffffff"
      },
      ");\r\n    --rightIMG1: url(",
      {
        "type": "text",
        "description": "Right IMG 1 URL",
        "marker": {
          "type": "text",
          "description": "Right IMG 1 URL",
          "defaultValue": "https://placehold.co/250x125/000000/ffffff",
          "original": "&Right IMG 1 URL \\ text \\ https://placehold.co/250x125/000000/ffffff&",
          "indices": [
            1212,
            1280
          ]
        },
        "value": "https://placehold.co/250x125/000000/ffffff"
      },
      ");\r\n    --rightIMG2: url(",
      {
        "type": "text",
        "description": "Right IMG 2 URL",
        "marker": {
          "type": "text",
          "description": "Right IMG 2 URL",
          "defaultValue": "https://placehold.co/250x125/000000/ffffff",
          "original": "&Right IMG 2 URL \\ text \\ https://placehold.co/250x125/000000/ffffff&",
          "indices": [
            1306,
            1374
          ]
        },
        "value": "https://placehold.co/250x125/000000/ffffff"
      },
      ");"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        1377,
        1381
      ]
    }
  },
  "\r\n    display: block;\r\n    position: relative;\r\n    width: clamp(300px,100%,1000px);\r\n    height: auto;\r\n    margin: auto;\r\n    box-sizing: border-box;\r\n    overflow: hidden;\r\n    box-sizing: border-box;\r\n    padding: 10px 10px 20px 0px;]\r\n      [div=display: flex;\r\n      flex-flow: row wrap;\r\n      justify-content: stretch;\r\n      align-content: stretch;\r\n      gap: 1px;\r\n      box-sizing: border-box;\r\n      align-items: stretch;\r\n      width: 100%;\r\n      border: 1px solid var(--bColor);\r\n      background: var(--bColor);\r\n      box-shadow: 10px 10px 0px var(--bColor);]\r\n        [div=flex: 0 100%;\r\n        font-family: var(--serifFont);\r\n        font-size: 1.75rem;\r\n        color: var(--aColor);\r\n        text-transform: uppercase;\r\n        box-sizing: border-box;\r\n        padding: 8px 3% 3px 3%;\r\n        width: 100%;\r\n        text-align: left;]\r\n          ",
  {
    "type": "text",
    "description": "Character Name",
    "marker": {
      "type": "text",
      "description": "Character Name",
      "defaultValue": "name here",
      "original": "&Character Name \\ text \\ name here&",
      "indices": [
        2251,
        2285
      ]
    },
    "value": "name here"
  },
  "\r\n        [/div]\r\n        ",
  {
    "type": "group",
    "description": "Top Left Area",
    "markerStart": {
      "type": "group",
      "description": "Top Left Area",
      "original": "&Top Left Area \\ group&",
      "repeat": false,
      "indices": [
        2312,
        2334
      ]
    },
    "repeat": false,
    "originalChildren": [
      "[div=flex: 1 250px;]\r\n          [div=width: 100%;\r\n          height: 100%;\r\n          display: flex;\r\n          flex-flow: column nowrap;\r\n          justify-content: stretch;\r\n          align-items: stretch;\r\n          align-content: stretch;\r\n          gap: 1px;\r\n          color: var(--bColor);\r\n          font-family: var(--ssFont);]\r\n            ",
      {
        "type": "group",
        "description": "Information Line",
        "markerStart": {
          "type": "group",
          "description": "Information Line",
          "original": "&Information Line \\ group \\ repeat&",
          "repeat": true,
          "indices": [
            2685,
            2719
          ]
        },
        "repeat": true,
        "originalChildren": [
          "[div=flex: 0 auto; display: flex; flex-flow: row wrap; justify-content: space-between; width: 100%; box-sizing: border-box; padding: .6rem 1rem; background: var(--aColor);]\r\n              ",
          {
            "type": "text",
            "description": "Information Answer",
            "marker": {
              "type": "text",
              "description": "Information Answer",
              "defaultValue": "info ans",
              "original": "&Information Answer \\ text \\ info ans&",
              "indices": [
                2908,
                2945
              ]
            },
            "value": "info ans"
          },
          "\r\n              [div=display: inline-block; font-family: var(--serifFont); font-size: .85rem;]",
          {
            "type": "text",
            "description": "Information Detail",
            "marker": {
              "type": "text",
              "description": "Information Detail",
              "defaultValue": "info",
              "original": "&Information Detail \\ text \\ info&",
              "indices": [
                3040,
                3073
              ]
            },
            "value": "info"
          },
          "[/div]\r\n            [/div]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            3100,
            3104
          ]
        }
      },
      "\r\n            [div=flex: 1 auto; padding: 2rem; box-sizing: border-box; display: flex; flex-flow: row wrap; align-content: center; align-items: center;]\r\n              [div=flex: 0 100%; width: 100%; position: relative; box-sizing: border-box; border: 1px solid var(--aColor); padding: 1rem; font-family: var(--serifFont); text-align: center; color: var(--aColor); font-size: .85rem;]\r\n                ",
      {
        "type": "content",
        "description": "Quote or Lyric",
        "marker": {
          "type": "content",
          "description": "Quote or Lyric",
          "original": "&Quote or Lyric \\ content&",
          "indices": [
            3507,
            3532
          ]
        }
      },
      "\r\n                [div=position: absolute; left: 15px; top: -1px; height: 1px; width: calc(100% - 30px); background: var(--bColor); z-index: 3;] [/div]\r\n                [div=position: absolute; left: 15px; bottom: -1px; height: 1px; width: calc(100% - 30px); background: var(--bColor); z-index: 3;] [/div]\r\n              [/div]\r\n            [/div]\r\n          [/div]\r\n        [/div]"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        3914,
        3918
      ]
    }
  },
  "\r\n        ",
  {
    "type": "group",
    "description": "Top Middle Area",
    "markerStart": {
      "type": "group",
      "description": "Top Middle Area",
      "original": "&Top Middle Area \\ group&",
      "repeat": false,
      "indices": [
        3929,
        3953
      ]
    },
    "repeat": false,
    "originalChildren": [
      "[div=flex: 2 300px; display: flex; flex-flow: column nowrap; gap: 1px;]\r\n          [div=box-sizing: border-box;\r\n          display: flex;\r\n          flex-flow: row wrap;\r\n          align-items: stretch;\r\n          justify-content: center;\r\n          text-align: center;\r\n          gap: 1px;\r\n          font-size: .5rem;\r\n          line-height: 1;\r\n          font-family: var(--ssFont);\r\n          color: var(--bColor);]\r\n            ",
      {
        "type": "group",
        "description": "Information Line",
        "markerStart": {
          "type": "group",
          "description": "Information Line",
          "original": "&Information Line \\ group \\ repeat&",
          "repeat": true,
          "indices": [
            4387,
            4421
          ]
        },
        "repeat": true,
        "originalChildren": [
          "[comment]start of copypaste area --][/comment][div=flex: 1 3rem; background: var(--aColor); height: 100%; box-sizing: border-box; padding: .4rem; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; gap: 2px; padding: 1rem 0px;]\r\n              [div=flex: 0 auto; font-size: 1.2rem; font-family: var(--serifFont);]",
          {
            "type": "text",
            "description": "Info Top",
            "marker": {
              "type": "text",
              "description": "Info Top",
              "defaultValue": "top text (avoid more than 6 info lines)",
              "original": "&Info Top \\ text \\ top text (avoid more than 6 info lines)&",
              "indices": [
                4769,
                4827
              ]
            },
            "value": "top text (avoid more than 6 info lines)"
          },
          "[/div]\r\n              [div=flex: 0 auto; text-transform: uppercase;]",
          {
            "type": "text",
            "description": "Info Bottom",
            "marker": {
              "type": "text",
              "description": "Info Bottom",
              "defaultValue": "bottom text",
              "original": "&Info Bottom \\ text \\ bottom text&",
              "indices": [
                4896,
                4929
              ]
            },
            "value": "bottom text"
          },
          "[/div]\r\n            [/div][comment][-- end of copypaste area. dont go past 6 of these for best results/[/comment]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            5043,
            5047
          ]
        }
      },
      "\r\n          [/div]\r\n          [div=display: flex;\r\n          flex-flow: row wrap;\r\n          align-items: stretch;\r\n          justify-content: center;\r\n          gap: 1px;\r\n          width: 100%;\r\n          height: 100%;]\r\n            [div=flex: 2 6rem; display: flex; flex-flow: column wrap;]\r\n              [div=flex: 1 auto; background: var(--bColor); color: var(--aColor); box-sizing: border-box; padding: 1rem; font-size: 2rem; display: flex; flex-flow: row wrap; align-items: center; justify-content: center;] [fa]",
      {
        "type": "text",
        "description": "FA Code",
        "marker": {
          "type": "text",
          "description": "FA Code",
          "defaultValue": "fa-question",
          "original": "&FA Code \\ text \\ fa-question&",
          "indices": [
            5568,
            5597
          ]
        },
        "value": "fa-question"
      },
      "[/fa][/div]\r\n              [div=flex: 4 100px; filter: var(--imgAdjust); background: var(--iconIMG) no-repeat center center/cover;] [/div]\r\n            [/div]\r\n            [div=flex: 4 12rem;\r\n            display: flex;\r\n            flex-flow: column nowrap;\r\n            justify-content: flex-start;\r\n            gap: 1px;\r\n            color: var(--bColor);\r\n            font-family: var(--ssFont);\r\n            font-size: .8rem;\r\n            text-align: justify;]\r\n              [div=flex: 1 auto; height: 100%; display: flex; flex-flow: row wrap; background: var(--aColor); padding: 1rem; justify-content: center; align-content: center;]\r\n                [div=flex: 0 100%; width: 100%;]",
      {
        "type": "content",
        "description": "Short Appearance Description",
        "marker": {
          "type": "content",
          "description": "Short Appearance Description",
          "original": "&Short Appearance Description \\ content&",
          "indices": [
            6288,
            6327
          ]
        }
      },
      "[/div]\r\n              [/div]\r\n              ",
      {
        "type": "group",
        "description": "Features",
        "markerStart": {
          "type": "group",
          "description": "Features",
          "original": "&Features \\ group \\ repeat&",
          "repeat": true,
          "indices": [
            6372,
            6398
          ]
        },
        "repeat": true,
        "originalChildren": [
          "[div=flex: 0 auto; display: block; background: var(--aColor); padding: .6rem 1rem;]\r\n                ",
          {
            "type": "text",
            "description": "Feature",
            "marker": {
              "type": "text",
              "description": "Feature",
              "defaultValue": "feature detail",
              "original": "&Feature \\ text \\ feature detail&",
              "indices": [
                6500,
                6532
              ]
            },
            "value": "feature detail"
          },
          "\r\n              [/div]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            6555,
            6559
          ]
        }
      },
      "\r\n            [/div]\r\n          [/div]\r\n        [/div]"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        6614,
        6618
      ]
    }
  },
  "\r\n        [div=flex: 1 250px;\r\n        background: var(--bColor) var(--largeIMG) no-repeat center center/cover;\r\n        min-height: 250px;\r\n        filter: var(--imgAdjust);] [/div]\r\n        [div=flex: 1 200px; display: flex; flex-flow: column nowrap; gap: 1px; ]\r\n          [div=flex: 1 88px; background: var(--leftIMG1) no-repeat center center/cover; filter: var(--imgAdjust);] [/div]\r\n          [div=flex: 1 85px; background: var(--leftIMG2) no-repeat center center/cover; filter: var(--imgAdjust);] [/div]\r\n          [div=flex: 1 85px; background: var(--leftIMG3) no-repeat center center/cover; filter: var(--imgAdjust);] [/div]\r\n        [/div]\r\n        ",
  {
    "type": "group",
    "description": "Personality Section",
    "markerStart": {
      "type": "group",
      "description": "Personality Section",
      "original": "&Personality Section \\ group&",
      "repeat": false,
      "indices": [
        7278,
        7306
      ]
    },
    "repeat": false,
    "originalChildren": [
      "[div=flex: 3 300px; display: flex; flex-flow: column nowrap; gap: 1px;]\r\n          [div=flex: 1 auto; padding: 1rem .85rem; color: var(--aColor); font-family: var(--serifFont); text-transform: uppercase; font-size: 1.1rem; display: flex; flex-flow: row wrap; align-items: center;]",
      {
        "type": "text",
        "description": "Section Name",
        "marker": {
          "type": "text",
          "description": "Section Name",
          "defaultValue": "personality",
          "original": "&Section Name \\ text \\ personality&",
          "indices": [
            7587,
            7621
          ]
        },
        "value": "personality"
      },
      "[/div]\r\n          [div=flex: 2 auto; background: var(--aColor); text-align: justify; box-sizing: border-box; padding: 1.5rem; font-family: var(--ssFont); font-size: .85rem; max-height: 500px; overflow-x: hidden; overflow-y: auto; color: var(--bColor);]\r\n            ",
      {
        "type": "content",
        "description": "Personality (add manual linebreaks)",
        "marker": {
          "type": "content",
          "description": "Personality (add manual linebreaks)",
          "original": "&Personality (add manual linebreaks) \\ content&",
          "indices": [
            7888,
            7934
          ]
        }
      },
      "\r\n          [/div]\r\n        [/div]"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        7969,
        7973
      ]
    }
  },
  "\r\n        ",
  {
    "type": "group",
    "description": "Preferences, Skills, etc.",
    "markerStart": {
      "type": "group",
      "description": "Preferences, Skills, etc.",
      "original": "&Preferences, Skills, etc. \\ group&",
      "repeat": false,
      "indices": [
        7984,
        8018
      ]
    },
    "repeat": false,
    "originalChildren": [
      "[div=flex: 3 300px; display: flex; flex-flow: column nowrap; gap: 1px;]\r\n          ",
      {
        "type": "group",
        "description": "Section",
        "markerStart": {
          "type": "group",
          "description": "Section",
          "original": "&Section \\ group \\ repeat&",
          "repeat": true,
          "indices": [
            8102,
            8127
          ]
        },
        "repeat": true,
        "originalChildren": [
          "[div=flex: 2 auto; display: flex; flex-flow: row wrap; align-items: stretch;]\r\n            [div=flex: 3 100px; background: var(--bColor); color: var(--aColor); box-sizing: border-box; padding: 1.5rem; display: flex; flex-flow: row wrap; align-content: center; align-items: center; font-size: .75rem; font-family: var(--ssFont);]\r\n              [div=flex: 0 auto]",
          {
            "type": "content",
            "description": "Section Content",
            "marker": {
              "type": "content",
              "description": "Section Content",
              "original": "&Section Content \\ content&",
              "indices": [
                8490,
                8516
              ]
            }
          },
          "[/div]\r\n            [/div]\r\n            [div=flex: 0 auto; box-sizing: border-box; padding: 1rem .65rem; text-transform: uppercase; font-family: var(--serifFont); writing-mode: vertical-rl; background: var(--aColor); color: var(--bColor); font-size: .85rem;]",
          {
            "type": "text",
            "description": "Section Name",
            "marker": {
              "type": "text",
              "description": "Section Name",
              "defaultValue": "",
              "original": "&Section Name \\ text&",
              "indices": [
                8775,
                8795
              ]
            }
          },
          "[/div]\r\n          [/div]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            8820,
            8824
          ]
        }
      },
      "\r\n          [div=flex: 1 85px; display: flex; flex-flow: row wrap; width: 100%; gap: 1px;]\r\n            [div=flex: 1 50px; background: var(--rightIMG1) center center/cover; filter: var(--imgAdjust);] [/div]\r\n            [div=flex: 1 50px; background: var(--rightIMG2) center center/cover; filter: var(--imgAdjust);] [/div]\r\n          [/div]\r\n        [/div]"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        9181,
        9185
      ]
    }
  },
  "\r\n        ",
  {
    "type": "group",
    "description": "Backstory Area",
    "markerStart": {
      "type": "group",
      "description": "Backstory Area",
      "original": "&Backstory Area \\ group&",
      "repeat": false,
      "indices": [
        9196,
        9219
      ]
    },
    "repeat": false,
    "originalChildren": [
      "[div=flex: 0 100%; display: flex; flex-flow: row wrap; align-items: stretch; gap: 1px;] \r\n          [div=flex: 1 100px; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; background: var(--bColor); color: var(--aColor); font-family: var(--serifFont); padding: 2rem; text-transform: uppercase; text-align: center; font-size: 1.5rem;]\r\n            ",
      {
        "type": "text",
        "description": "Section Name",
        "marker": {
          "type": "text",
          "description": "Section Name",
          "defaultValue": "history",
          "original": "&Section Name \\ text \\ history&",
          "indices": [
            9597,
            9627
          ]
        },
        "value": "history"
      },
      "\r\n          [/div]\r\n          [div=flex: 2 300px; background: var(--aColor); padding: 2rem; text-align: justify; font-family: var(--ssFont); font-size: .85rem; max-height: 375px; overflow-x: hidden; overflow-y: auto; color: var(--bColor);]\r\n            ",
      {
        "type": "content",
        "description": "Backstory Content",
        "marker": {
          "type": "content",
          "description": "Backstory Content",
          "original": "&Backstory Content \\ content&",
          "indices": [
            9881,
            9909
          ]
        }
      },
      "\r\n          [/div]\r\n        [/div]"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        9944,
        9948
      ]
    }
  },
  "\r\n        ",
  {
    "type": "group",
    "description": "Relationship Area",
    "markerStart": {
      "type": "group",
      "description": "Relationship Area",
      "original": "&Relationship Area \\ group&",
      "repeat": false,
      "indices": [
        9959,
        9985
      ]
    },
    "repeat": false,
    "originalChildren": [
      "",
      {
        "type": "group",
        "description": "Relationship",
        "markerStart": {
          "type": "group",
          "description": "Relationship",
          "original": "&Relationship \\ group \\ repeat&",
          "repeat": true,
          "indices": [
            9986,
            10016
          ]
        },
        "repeat": true,
        "originalChildren": [
          "[comment]start of copypaste area --][/comment][div=--relIMG1: url(",
          {
            "type": "text",
            "description": "Image URL",
            "marker": {
              "type": "text",
              "description": "Image URL",
              "defaultValue": "https://placehold.co/125/000000/ffffff",
              "original": "&Image URL \\ text \\ https://placehold.co/125/000000/ffffff&",
              "indices": [
                10083,
                10141
              ]
            },
            "value": "https://placehold.co/125/000000/ffffff"
          },
          "); flex: 1 275px; display: flex; flex-flow: row wrap; align-items: stretch; gap: 1px;]\r\n          [div=flex: 1 85px; background: var(--relIMG1) center center/cover; filter: var(--imgAdjust);] [/div]\r\n          [div=flex: 3 90px; display: flex; flex-flow: column nowrap; gap: 1px; height: 100%;]\r\n            [div=flex: 0 auto; font-family: var(--serifFont); color: var(--aColor); text-transform: uppercase; padding: .85rem;]\r\n              ",
          {
            "type": "text",
            "description": "Nickname",
            "marker": {
              "type": "text",
              "description": "Nickname",
              "defaultValue": "nickname",
              "original": "&Nickname \\ text \\ nickname&",
              "indices": [
                10582,
                10609
              ]
            },
            "value": "nickname"
          },
          "[div=display: inline-block; font-size: .85rem; margin-left: .5rem;]",
          {
            "type": "text",
            "description": "Rating",
            "marker": {
              "type": "text",
              "description": "Rating",
              "defaultValue": "[fa]fas fa-star[/fa][fa]fas fa-star[/fa][fa]fas fa-star-half-alt[/fa][fa]far fa-star[/fa][fa]far fa-star[/fa]",
              "original": "&Rating \\ text \\ [fa]fas fa-star[/fa][fa]fas fa-star[/fa][fa]fas fa-star-half-alt[/fa][fa]far fa-star[/fa][fa]far fa-star[/fa]&",
              "indices": [
                10677,
                10803
              ]
            },
            "value": "[fa]fas fa-star[/fa][fa]fas fa-star[/fa][fa]fas fa-star-half-alt[/fa][fa]far fa-star[/fa][fa]far fa-star[/fa]"
          },
          "[/div]\r\n            [/div]\r\n            [div=flex: 1 auto; background: var(--aColor); color: var(--bColor); box-sizing: border-box; padding: 1rem; text-align: justify; font-family: var(--ssFont); font-size: .75rem;]",
          {
            "type": "content",
            "description": "Relationship Description",
            "marker": {
              "type": "content",
              "description": "Relationship Description",
              "original": "&Relationship Description \\ content&",
              "indices": [
                11019,
                11054
              ]
            }
          },
          "[/div]\r\n          [/div]\r\n        [/div][comment][-- end of copypaste area[/comment]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            11139,
            11143
          ]
        }
      },
      ""
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        11144,
        11148
      ]
    }
  },
  "\r\n      [/div]\r\n    [/div]\r\n  [/nobr]"
]

[]

moonnight.template 1.0

By glucoseguardian

Font Call

Title Font Call

Variable Set-Up

Accent Color

Background Color

Title Font Call

Image Filter

Main Large Image URL

Smaller Top Image

Left IMG 1 URL

Left IMG 2 URL

Left IMG 3 URL

Right IMG 1 URL

Right IMG 2 URL

Character Name

Top Left Area

Information Line

Information Answer

Information Detail

Quote or Lyric

Top Middle Area

Information Line

Info Top

Info Bottom

FA Code

Short Appearance Description

Features

Feature

Personality Section

Section Name

Personality (add manual linebreaks)

Preferences, Skills, etc.

Section

Section Content

Section Name

Backstory Area

Section Name

Backstory Content

Relationship Area

Relationship

Image URL

Nickname

Rating

Relationship Description

Output