Input Template

[nobr]
  [div=display: none;]
    [font=Special Elite]@fluticasone[/font]
    [font=Inter V]@fluticasone[/font]
  [/div]
  [div=display: block; /* root container */
  &Variables \ group&--conbgcolor: &Main Container BG Color \ text \ #292929&; /* bg color of main container */
  --maincolor: &Main or Theme Color \ text \ #b9689d&; /* color of img, paper, name */
  --framecolor: &Frame Color \ text \ #e5e1b6&; /* color of frame */
  --bodycolor: &Body Text Color \ text \#313131&; /* body text color */
  --tagcolor: &Tape Text Color \ text \ #424242&; /* tag text color */
  --tagbgcolor: &Tape Color \ text \ #ebe4d2&; /* tag bg color */
  --namefont: 'Times New Roman', serif;
  --tagsfont: 'Special Elite', serif;
  --bodyfont: 'Inter V', sans-serif;
  --mainIMG: url(&Character Image URL \ text&); /* image inside frame */
  --bgIMG: var(--mainIMG); /* bg IMG of main container */&end&
  position: relative;
  width: clamp(300px,100%,675px);
  margin: auto;
  --frameIMG: url(https://i.imgur.com/iI46CPk.png);
  --leavesIMG: url(https://i.imgur.com/7WiqsjX.png);
  --bodyIMG: url(https://i.imgur.com/2GusAkO.jpeg);
  --tagsIMG: url(https://i.imgur.com/Ff0gbZi.jpeg);]
    [div=display: block; /* main container */
    position: relative;
    margin-left: 3.85%;
    z-index: 1;
    width: 96.15%;
    background: var(--conbgcolor);
    padding-top: 2rem;
    container-type: inline-size;
    overflow: hidden;]
      [div=position: absolute; /* name */
      right: 0px;
      top: 0px;
      z-index: 1;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      transform-origin: center center;
      font-family: var(--namefont);
      font-size: 48cqw;
      line-height: .75;
      letter-spacing: -.07em;
      font-weight: bold;
      font-style: italic;
      color: var(--maincolor);
      padding-bottom: .07em;
      mix-blend-mode: difference;]
        &Sideways Text \ group&&Character Role or Name \ text \ name&
      [/div]
      [div=position: absolute; /* name stroke */
      right: 0px;
      top: 0px;
      z-index: 1;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      transform-origin: center center;
      font-family: var(--namefont);
      font-size: 48cqw;
      line-height: .75;
      letter-spacing: -.07em;
      font-weight: bold;
      font-style: italic;
      padding-bottom: calc(.07em + 3px);
      color: rgba(255, 255, 255, 0);
      text-stroke: 2px var(--conbgcolor);
      -webkit-text-stroke: 1px var(--conbgcolor);]
        &Repeat Above \ text \ name&&end&
      [/div]
      [div=position: absolute; /* body text bg */
      width: clamp(275px,75%,500px);
      left: 0%;
      height: 75%;
      bottom: 0px;
      background: var(--maincolor) var(--bodyIMG) center center/cover;
      background-blend-mode: multiply;
      z-index: 2;]
        [div=display: none;]body text bg[/div]
      [/div]
      [div=position: absolute; /* main container bg */
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background: var(--bgIMG) no-repeat center center/150% auto;
      filter: saturate(0%) contrast(50%) brightness(150%);
      mix-blend-mode: multiply;
      opacity: .5;]
        [div=display: none;]???[/div]
      [/div]
      [div=display: block; /* frame container */
      width: clamp(200px,55%,450px);
      aspect-ratio: 800/923;
      position: relative;
      margin: auto;
      margin-right: 13cqw;
      z-index: 4;]
        [div=position: absolute;
        background: var(--maincolor);
        width: 100%;
        left: 0px;
        height: 100%;
        top: 0px;
        font-size: 0px;
        border-radius: 50%;
        overflow: hidden;]
          [div=display: block;
          height: 100%;
          width: 100%;
          background: var(--mainIMG) no-repeat scroll 60% 10%/190% auto;
          filter: saturate(0%) contrast(75%) brightness(140%);
          mix-blend-mode: multiply;]
          [/div]
        [/div]
        [div=position: absolute;
        font-size: 0px;
        width: 100%;
        height: 100%;
        left: 0px;
        top: 0px;
        background: var(--framecolor) var(--frameIMG) no-repeat scroll 0 0/cover;
        background-blend-mode: multiply;
        -webkit-mask: var(--frameIMG) 0 0/cover;
        mask: var(--frameIMG) 0 0/cover;]
          frame
        [/div]
      [/div]
      [div=display: flex; /* user tags container */
      flex-flow: row wrap;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 2px;
      width: clamp(275px,75%,500px);
      box-sizing: border-box;
      padding: 0px clamp(2.5rem,8%,100px);
      position: relative;
      top: -1rem;
      z-index: 3;
      font-size: 0px;
      mix-blend-mode: multiply;]
        &User Tag \ group \ repeat&[div=flex: 0 auto;
        filter: saturate(0%) brightness(80%);]
          @&Username w/o @ \ text \ fluticasone&
        [/div]&end&
      [/div]
      [div=display: block; /* text container */
      width: clamp(275px,75%,500px);
      height: calc(500px - 3cqw);
      overflow: hidden;
      padding: 0px clamp(2rem,5%,100px);
      color: var(--bodycolor);
      margin-bottom: 4rem;
      position: relative;
      z-index: 3;
      box-sizing: border-box;
      font-family: var(--bodyfont);
      line-height: 1.25;
      font-size: .9rem;
      text-align: justify;]
        [div=display: block;
        height: 100%;
        box-sizing: border-box;
        width: calc(100% + 250px);
        overflow-x: hidden;
        overflow-y: scroll;
        scrollbar-gutter: both;
        scrollbar-width: none;
        padding-right: 250px;]
          &Main Content Area \ group&&Post Content \ content&&end&
        [/div]
      [/div]
    [/div]
    [div=display: block; /* leaves */
    position: absolute;
    z-index: 2;
    top: 18%;
    left: 0px;
    width: clamp(200px,55%,600px);
    pointer-events: none;
    aspect-ratio: 1000/755;
    background: var(--leavesIMG) center center/cover;]
      [div=display: none;]leaves[/div]
    [/div]
    [div=display: flex; /* info container */
    flex-flow: row wrap;
    align-items: center;
    position: absolute;
    z-index: 3;
    aspect-ratio: 1000/755;
    width: clamp(200px,55%,600px);
    top: 18%;
    left: 0px;
    overflow: hidden;
    box-sizing: border-box;
    pointer-events: none;]
      [div=display: block;
      position: relative;
      width: 100%;
      max-height: 100%; 
      box-sizing: border-box;
      font-size: 1.25rem;
      font-family: var(--tagsfont);
      color: var(--tagcolor);
      overflow-x: hidden;
      overflow-y: scroll;
      scrollbar-width: none;
      line-height: .95;]
        [div=display: flex;
        align-content: center;
        justify-content: flex-end;
        flex-flow: row wrap;
        gap: .55em;
        padding: .75rem;
        width: 100%;
        box-sizing: border-box;]
          &Tape Tag \ group \ repeat&[div=transform: rotate(&Tape Angle (accepts decimal) \ number \ 0 \ -6 \ 6&deg); /* insert random number */
          transform-origin: center center;
          flex: 0 auto;
          box-sizing: border-box;
          padding: .7em 1em .4em 1em;
          background: var(--tagbgcolor) var(--tagsIMG);
          background-blend-mode: multiply;
          box-shadow: 3px 2px 1px rgba(0, 0, 0, 0.65);
          pointer-events: auto;]
            &Info \ text \ info&
          [/div]&end&
          [div=display: none;]insert copy paste info section before this div[/div]
        [/div]
      [/div]
    [/div]
  [/div]
[/nobr]

Debug Mode

[
  "[nobr]\r\n  [div=display: none;]\r\n    [font=Special Elite]@fluticasone[/font]\r\n    [font=Inter V]@fluticasone[/font]\r\n  [/div]\r\n  [div=display: block; /* root container */\r\n  ",
  {
    "type": "group",
    "description": "Variables",
    "markerStart": {
      "type": "group",
      "description": "Variables",
      "original": "&Variables \\ group&",
      "repeat": false,
      "indices": [
        173,
        191
      ]
    },
    "repeat": false,
    "originalChildren": [
      "--conbgcolor: ",
      {
        "type": "text",
        "description": "Main Container BG Color",
        "marker": {
          "type": "text",
          "description": "Main Container BG Color",
          "defaultValue": "#292929",
          "original": "&Main Container BG Color \\ text \\ #292929&",
          "indices": [
            206,
            247
          ]
        },
        "value": "#292929"
      },
      "; /* bg color of main container */\r\n  --maincolor: ",
      {
        "type": "text",
        "description": "Main or Theme Color",
        "marker": {
          "type": "text",
          "description": "Main or Theme Color",
          "defaultValue": "#b9689d",
          "original": "&Main or Theme Color \\ text \\ #b9689d&",
          "indices": [
            299,
            336
          ]
        },
        "value": "#b9689d"
      },
      "; /* color of img, paper, name */\r\n  --framecolor: ",
      {
        "type": "text",
        "description": "Frame Color",
        "marker": {
          "type": "text",
          "description": "Frame Color",
          "defaultValue": "#e5e1b6",
          "original": "&Frame Color \\ text \\ #e5e1b6&",
          "indices": [
            388,
            417
          ]
        },
        "value": "#e5e1b6"
      },
      "; /* color of frame */\r\n  --bodycolor: ",
      {
        "type": "text",
        "description": "Body Text Color",
        "marker": {
          "type": "text",
          "description": "Body Text Color",
          "defaultValue": "#313131",
          "original": "&Body Text Color \\ text \\#313131&",
          "indices": [
            457,
            489
          ]
        },
        "value": "#313131"
      },
      "; /* body text color */\r\n  --tagcolor: ",
      {
        "type": "text",
        "description": "Tape Text Color",
        "marker": {
          "type": "text",
          "description": "Tape Text Color",
          "defaultValue": "#424242",
          "original": "&Tape Text Color \\ text \\ #424242&",
          "indices": [
            529,
            562
          ]
        },
        "value": "#424242"
      },
      "; /* tag text color */\r\n  --tagbgcolor: ",
      {
        "type": "text",
        "description": "Tape Color",
        "marker": {
          "type": "text",
          "description": "Tape Color",
          "defaultValue": "#ebe4d2",
          "original": "&Tape Color \\ text \\ #ebe4d2&",
          "indices": [
            603,
            631
          ]
        },
        "value": "#ebe4d2"
      },
      "; /* tag bg color */\r\n  --namefont: 'Times New Roman', serif;\r\n  --tagsfont: 'Special Elite', serif;\r\n  --bodyfont: 'Inter V', sans-serif;\r\n  --mainIMG: url(",
      {
        "type": "text",
        "description": "Character Image URL",
        "marker": {
          "type": "text",
          "description": "Character Image URL",
          "defaultValue": "",
          "original": "&Character Image URL \\ text&",
          "indices": [
            789,
            816
          ]
        }
      },
      "); /* image inside frame */\r\n  --bgIMG: var(--mainIMG); /* bg IMG of main container */"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        903,
        907
      ]
    }
  },
  "\r\n  position: relative;\r\n  width: clamp(300px,100%,675px);\r\n  margin: auto;\r\n  --frameIMG: url(https://i.imgur.com/iI46CPk.png);\r\n  --leavesIMG: url(https://i.imgur.com/7WiqsjX.png);\r\n  --bodyIMG: url(https://i.imgur.com/2GusAkO.jpeg);\r\n  --tagsIMG: url(https://i.imgur.com/Ff0gbZi.jpeg);]\r\n    [div=display: block; /* main container */\r\n    position: relative;\r\n    margin-left: 3.85%;\r\n    z-index: 1;\r\n    width: 96.15%;\r\n    background: var(--conbgcolor);\r\n    padding-top: 2rem;\r\n    container-type: inline-size;\r\n    overflow: hidden;]\r\n      [div=position: absolute; /* name */\r\n      right: 0px;\r\n      top: 0px;\r\n      z-index: 1;\r\n      writing-mode: vertical-rl;\r\n      transform: rotate(180deg);\r\n      transform-origin: center center;\r\n      font-family: var(--namefont);\r\n      font-size: 48cqw;\r\n      line-height: .75;\r\n      letter-spacing: -.07em;\r\n      font-weight: bold;\r\n      font-style: italic;\r\n      color: var(--maincolor);\r\n      padding-bottom: .07em;\r\n      mix-blend-mode: difference;]\r\n        ",
  {
    "type": "group",
    "description": "Sideways Text",
    "markerStart": {
      "type": "group",
      "description": "Sideways Text",
      "original": "&Sideways Text \\ group&",
      "repeat": false,
      "indices": [
        1934,
        1956
      ]
    },
    "repeat": false,
    "originalChildren": [
      "",
      {
        "type": "text",
        "description": "Character Role or Name",
        "marker": {
          "type": "text",
          "description": "Character Role or Name",
          "defaultValue": "name",
          "original": "&Character Role or Name \\ text \\ name&",
          "indices": [
            1957,
            1994
          ]
        },
        "value": "name"
      },
      "\r\n      [/div]\r\n      [div=position: absolute; /* name stroke */\r\n      right: 0px;\r\n      top: 0px;\r\n      z-index: 1;\r\n      writing-mode: vertical-rl;\r\n      transform: rotate(180deg);\r\n      transform-origin: center center;\r\n      font-family: var(--namefont);\r\n      font-size: 48cqw;\r\n      line-height: .75;\r\n      letter-spacing: -.07em;\r\n      font-weight: bold;\r\n      font-style: italic;\r\n      padding-bottom: calc(.07em + 3px);\r\n      color: rgba(255, 255, 255, 0);\r\n      text-stroke: 2px var(--conbgcolor);\r\n      -webkit-text-stroke: 1px var(--conbgcolor);]\r\n        ",
      {
        "type": "text",
        "description": "Repeat Above",
        "marker": {
          "type": "text",
          "description": "Repeat Above",
          "defaultValue": "name",
          "original": "&Repeat Above \\ text \\ name&",
          "indices": [
            2578,
            2605
          ]
        },
        "value": "name"
      },
      ""
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        2606,
        2610
      ]
    }
  },
  "\r\n      [/div]\r\n      [div=position: absolute; /* body text bg */\r\n      width: clamp(275px,75%,500px);\r\n      left: 0%;\r\n      height: 75%;\r\n      bottom: 0px;\r\n      background: var(--maincolor) var(--bodyIMG) center center/cover;\r\n      background-blend-mode: multiply;\r\n      z-index: 2;]\r\n        [div=display: none;]body text bg[/div]\r\n      [/div]\r\n      [div=position: absolute; /* main container bg */\r\n      top: 0px;\r\n      left: 0px;\r\n      width: 100%;\r\n      height: 100%;\r\n      background: var(--bgIMG) no-repeat center center/150% auto;\r\n      filter: saturate(0%) contrast(50%) brightness(150%);\r\n      mix-blend-mode: multiply;\r\n      opacity: .5;]\r\n        [div=display: none;]???[/div]\r\n      [/div]\r\n      [div=display: block; /* frame container */\r\n      width: clamp(200px,55%,450px);\r\n      aspect-ratio: 800/923;\r\n      position: relative;\r\n      margin: auto;\r\n      margin-right: 13cqw;\r\n      z-index: 4;]\r\n        [div=position: absolute;\r\n        background: var(--maincolor);\r\n        width: 100%;\r\n        left: 0px;\r\n        height: 100%;\r\n        top: 0px;\r\n        font-size: 0px;\r\n        border-radius: 50%;\r\n        overflow: hidden;]\r\n          [div=display: block;\r\n          height: 100%;\r\n          width: 100%;\r\n          background: var(--mainIMG) no-repeat scroll 60% 10%/190% auto;\r\n          filter: saturate(0%) contrast(75%) brightness(140%);\r\n          mix-blend-mode: multiply;]\r\n          [/div]\r\n        [/div]\r\n        [div=position: absolute;\r\n        font-size: 0px;\r\n        width: 100%;\r\n        height: 100%;\r\n        left: 0px;\r\n        top: 0px;\r\n        background: var(--framecolor) var(--frameIMG) no-repeat scroll 0 0/cover;\r\n        background-blend-mode: multiply;\r\n        -webkit-mask: var(--frameIMG) 0 0/cover;\r\n        mask: var(--frameIMG) 0 0/cover;]\r\n          frame\r\n        [/div]\r\n      [/div]\r\n      [div=display: flex; /* user tags container */\r\n      flex-flow: row wrap;\r\n      align-items: flex-start;\r\n      justify-content: flex-start;\r\n      gap: 2px;\r\n      width: clamp(275px,75%,500px);\r\n      box-sizing: border-box;\r\n      padding: 0px clamp(2.5rem,8%,100px);\r\n      position: relative;\r\n      top: -1rem;\r\n      z-index: 3;\r\n      font-size: 0px;\r\n      mix-blend-mode: multiply;]\r\n        ",
  {
    "type": "group",
    "description": "User Tag",
    "markerStart": {
      "type": "group",
      "description": "User Tag",
      "original": "&User Tag \\ group \\ repeat&",
      "repeat": true,
      "indices": [
        4894,
        4920
      ]
    },
    "repeat": true,
    "originalChildren": [
      "[div=flex: 0 auto;\r\n        filter: saturate(0%) brightness(80%);]\r\n          @",
      {
        "type": "text",
        "description": "Username w/o @",
        "marker": {
          "type": "text",
          "description": "Username w/o @",
          "defaultValue": "fluticasone",
          "original": "&Username w/o @ \\ text \\ fluticasone&",
          "indices": [
            5000,
            5036
          ]
        },
        "value": "fluticasone"
      },
      "\r\n        [/div]"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        5053,
        5057
      ]
    }
  },
  "\r\n      [/div]\r\n      [div=display: block; /* text container */\r\n      width: clamp(275px,75%,500px);\r\n      height: calc(500px - 3cqw);\r\n      overflow: hidden;\r\n      padding: 0px clamp(2rem,5%,100px);\r\n      color: var(--bodycolor);\r\n      margin-bottom: 4rem;\r\n      position: relative;\r\n      z-index: 3;\r\n      box-sizing: border-box;\r\n      font-family: var(--bodyfont);\r\n      line-height: 1.25;\r\n      font-size: .9rem;\r\n      text-align: justify;]\r\n        [div=display: block;\r\n        height: 100%;\r\n        box-sizing: border-box;\r\n        width: calc(100% + 250px);\r\n        overflow-x: hidden;\r\n        overflow-y: scroll;\r\n        scrollbar-gutter: both;\r\n        scrollbar-width: none;\r\n        padding-right: 250px;]\r\n          ",
  {
    "type": "group",
    "description": "Main Content Area",
    "markerStart": {
      "type": "group",
      "description": "Main Content Area",
      "original": "&Main Content Area \\ group&",
      "repeat": false,
      "indices": [
        5804,
        5830
      ]
    },
    "repeat": false,
    "originalChildren": [
      "",
      {
        "type": "content",
        "description": "Post Content",
        "marker": {
          "type": "content",
          "description": "Post Content",
          "original": "&Post Content \\ content&",
          "indices": [
            5831,
            5854
          ]
        }
      },
      ""
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        5855,
        5859
      ]
    }
  },
  "\r\n        [/div]\r\n      [/div]\r\n    [/div]\r\n    [div=display: block; /* leaves */\r\n    position: absolute;\r\n    z-index: 2;\r\n    top: 18%;\r\n    left: 0px;\r\n    width: clamp(200px,55%,600px);\r\n    pointer-events: none;\r\n    aspect-ratio: 1000/755;\r\n    background: var(--leavesIMG) center center/cover;]\r\n      [div=display: none;]leaves[/div]\r\n    [/div]\r\n    [div=display: flex; /* info container */\r\n    flex-flow: row wrap;\r\n    align-items: center;\r\n    position: absolute;\r\n    z-index: 3;\r\n    aspect-ratio: 1000/755;\r\n    width: clamp(200px,55%,600px);\r\n    top: 18%;\r\n    left: 0px;\r\n    overflow: hidden;\r\n    box-sizing: border-box;\r\n    pointer-events: none;]\r\n      [div=display: block;\r\n      position: relative;\r\n      width: 100%;\r\n      max-height: 100%; \r\n      box-sizing: border-box;\r\n      font-size: 1.25rem;\r\n      font-family: var(--tagsfont);\r\n      color: var(--tagcolor);\r\n      overflow-x: hidden;\r\n      overflow-y: scroll;\r\n      scrollbar-width: none;\r\n      line-height: .95;]\r\n        [div=display: flex;\r\n        align-content: center;\r\n        justify-content: flex-end;\r\n        flex-flow: row wrap;\r\n        gap: .55em;\r\n        padding: .75rem;\r\n        width: 100%;\r\n        box-sizing: border-box;]\r\n          ",
  {
    "type": "group",
    "description": "Tape Tag",
    "markerStart": {
      "type": "group",
      "description": "Tape Tag",
      "original": "&Tape Tag \\ group \\ repeat&",
      "repeat": true,
      "indices": [
        7109,
        7135
      ]
    },
    "repeat": true,
    "originalChildren": [
      "[div=transform: rotate(",
      {
        "type": "number",
        "description": "Tape Angle (accepts decimal)",
        "marker": {
          "type": "number",
          "description": "Tape Angle (accepts decimal)",
          "defaultValue": 0,
          "min": -6,
          "max": 6,
          "original": "&Tape Angle (accepts decimal) \\ number \\ 0 \\ -6 \\ 6&",
          "indices": [
            7159,
            7210
          ]
        }
      },
      "deg); /* insert random number */\r\n          transform-origin: center center;\r\n          flex: 0 auto;\r\n          box-sizing: border-box;\r\n          padding: .7em 1em .4em 1em;\r\n          background: var(--tagbgcolor) var(--tagsIMG);\r\n          background-blend-mode: multiply;\r\n          box-shadow: 3px 2px 1px rgba(0, 0, 0, 0.65);\r\n          pointer-events: auto;]\r\n            ",
      {
        "type": "text",
        "description": "Info",
        "marker": {
          "type": "text",
          "description": "Info",
          "defaultValue": "info",
          "original": "&Info \\ text \\ info&",
          "indices": [
            7591,
            7610
          ]
        },
        "value": "info"
      },
      "\r\n          [/div]"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        7629,
        7633
      ]
    }
  },
  "\r\n          [div=display: none;]insert copy paste info section before this div[/div]\r\n        [/div]\r\n      [/div]\r\n    [/div]\r\n  [/div]\r\n[/nobr]"
]

[]

roc.template 1.0

By glucoseguardian

Variables

Main Container BG Color

Main or Theme Color

Frame Color

Body Text Color

Tape Text Color

Tape Color

Character Image URL

Sideways Text

Character Role or Name

Repeat Above

User Tag

Username w/o @

Main Content Area

Post Content

Tape Tag

Tape Angle (accepts decimal)

Minimum: -6 Maximum: 6

Info

Output