vuvuzela | Code

Code

Responsive Two-to-one Character Chart

Character Name

A blurb can go here. You can also take any of the sections below and move it into this section instead, if you don't want to have an OOC blurb here.

"Maybe life is random, but I doubt it."

Love

Neutral

Dislike

Hate

Crush

Annoying

Amusing

Loyal

Complicated

Curious

Protective

Lovers

Friends

Acquaintances

Enemies

Familiarity

Loyalty

Attraction

Character Name

A blurb can go here. You can also take any of the sections below and move it into this section instead, if you don't want to have an OOC blurb here.

"Self-control means wanting to be effective at some random point in the infinite radiations of my spiritual existence."

Love

Neutral

Dislike

Hate

Crush

Annoying

Amusing

Loyal

Complicated

Curious

Protective

Lovers

Friends

Acquaintances

Enemies

Trust

Friendship

Romance

• Mobile responsive. On narrower screens (or journal layouts) the chart will change its lockup to be a one-column layout.
• Per the preview, the different sections can be moved around.
• Also works in the comments section

Flat | Top-Level Comments Only

Character Name

A blurb can go here. You can also take any of the sections below and move it into this section instead, if you don't want to have an OOC blurb here.

"Maybe life is random, but I doubt it."

Love

Neutral

Dislike

Hate

Crush

Annoying

Amusing

Loyal

Complicated

Curious

Protective

Lovers

Friends

Acquaintances

Enemies

Familiarity

Loyalty

Attraction

Edited 2026-03-04 04:00 (UTC)

<raw-code><div style="color:#000000;font-family:verdana;display: flex;flex-wrap: wrap;gap: 20px;">

<div style="width: 45%;min-width: 300px;background-color: #ffffff;border: 1px solid lightgray;text-align: left;flex-grow: 1;padding:15px;"><div style="display:grid;gap:10px;grid-template-columns: min-content auto;align-items:center;">

<div style=""><img src="https://v2.dreamwidth.org/5599891/1159816"></div>

<div style="">
 
<h3 style="color:#000000;font-size:11px;border-bottom:1px solid lightgray;padding-bottom:5px;margin-bottom:5px;">Character Name</h3>

<div style="font-size:11px;">
A blurb can go here. You can also take any of the sections below and move it into this section instead, if you don't want to have an OOC blurb here.
</div>

 
</div>
 
 
<div style="color:#000000;font-weight:500;grid-column: span 2;border-left:3px solid #d2d2d2;padding:0 0 0 8px;">

<div style="font-size:9px;letter-spacing:.5px;padding:10px;font-style: italic;text-align:center;">
"Maybe life is random, but I doubt it."
</div>

</div>

<div style="grid-column: span 2;border-left:3px solid #d2d2d2;padding:0 0 0 8px;">

<div style="background-color:#89b215;padding:1px 10px;border-radius:30px;">Neutral</div>

<div style="background-color:#0051b9;padding:1px 10px;border-radius:30px;">Dislike</div>

<div style="background-color:#ff82e6;padding:1px 10px;border-radius:30px;">Crush</div>

<div style="background-color:#ffa700;padding:1px 10px;border-radius:30px;">Annoying</div>

<div style="background-color:#06aa65;padding:1px 10px;border-radius:30px;">Amusing</div>

<div style="background-color:#b374ff;padding:1px 10px;border-radius:30px;">Loyal</div>

<div style="background-color:#b0f;padding:1px 10px;border-radius:30px;">Complicated</div>

<div style="background-color:#d98e00;padding:1px 10px;border-radius:30px;">Curious</div>

<div style="background-color:#007cff;padding:1px 10px;border-radius:30px;">Protective</div>

<div style="background-color:#f00f00;padding:1px 10px;border-radius:30px;">Lovers</div>

<div style="background-color:#3cbf9a;padding:1px 10px;border-radius:30px;">Friends</div>

<div style="background-color:#959595;padding:1px 10px;border-radius:30px;">Acquaintances</div>

<div style="background-color:#1700bb;padding:1px 10px;border-radius:30px;">Enemies</div>

</div>

</div>

<div style="grid-column: span 2;border-left:3px solid #d2d2d2;padding:0 0 0 8px;">

<div style="text-align:right;">Familiarity</div>
<div style="border:1px solid #62cc44;border-radius:20px;overflow:hidden;"><div style="width:50%;padding-top:8px;background:#62cc44;"></div></div>

<div style="text-align:right;">Loyalty</div>
<div style="border:1px solid #b374ff;border-radius:20px;overflow:hidden;"><div style="width:50%;padding-top:8px;background:#b374ff;"></div></div>

<div style="text-align:right;">Attraction</div>
<div style="border:1px solid #f00f00;border-radius:20px;overflow:hidden;"><div style="width:50%;padding-top:8px;background:#f00f00;"></div></div>

</div>

</div>

</div></div>

<div style="width: 45%;min-width: 300px;flex-grow: 1;padding:15px;"></div>

</div></raw-code>

Character Name

A blurb can go here. You can also take any of the sections below and move it into this section instead, if you don't want to have an OOC blurb here.

"Self-control means wanting to be effective at some random point in the infinite radiations of my spiritual existence."

Love

Neutral

Dislike

Hate

Crush

Annoying

Amusing

Loyal

Complicated

Curious

Protective

Lovers

Friends

Acquaintances

Enemies

Trust

Friendship

Romance

<raw-code><div style="color:#000000;font-family:verdana;display: flex;flex-wrap: wrap;gap: 20px;">

<div style="font-size:11px;">
A blurb can go here. You can also take any of the sections below and move it into this section instead, if you don't want to have an OOC blurb here. 
</div>

 
</div>
 

<div style="color:#000000;font-weight:500;grid-column: span 2;border-left:3px solid #d2d2d2;padding:0 0 0 8px;">

<div style="font-size:9px;letter-spacing:.5px;padding:10px;font-style: italic;text-align:center;">
"Self-control means wanting to be effective at some random point in the infinite radiations of my spiritual existence."
</div>

</div>

<div style="color:#000000;font-size:9px;text-transform:uppercase;font-weight:400;letter-spacing:1px;grid-column: span 2;border-left:3px solid #d2d2d2;padding:0 0 0 8px;display:flex;flex-wrap:wrap;gap:5px 7px;">

<div style="background-color:#b9ca89;padding:1px 10px;border-radius:30px;">Neutral</div>

<div style="background-color:#96a2e3;padding:1px 10px;border-radius:30px;">Dislike</div>

<div style="background-color:#f3c6ff;padding:1px 10px;border-radius:30px;">Crush</div>

<div style="background-color:#f4b596;padding:1px 10px;border-radius:30px;">Annoying</div>

<div style="background-color:#a3e1c7;padding:1px 10px;border-radius:30px;">Amusing</div>

<div style="background-color:#dec3ff;padding:1px 10px;border-radius:30px;">Loyal</div>

<div style="background-color:#b5d7d7;padding:1px 10px;border-radius:30px;">Complicated</div>

<div style="background-color:#ffd88f;padding:1px 10px;border-radius:30px;">Curious</div>

<div style="background-color:#98caff;padding:1px 10px;border-radius:30px;">Protective</div>

<div style="background-color:#ff98f4;padding:1px 10px;border-radius:30px;">Lovers</div>

<div style="background-color:#3cbf9a;padding:1px 10px;border-radius:30px;">Friends</div>

<div style="background-color:#d0d0d0;padding:1px 10px;border-radius:30px;">Acquaintances</div>

<div style="background-color:#ffc4a8;padding:1px 10px;border-radius:30px;">Enemies</div>

</div>

<div style="font-size:9px;grid-column: span 2;display: grid;  grid-template-columns: min-content auto;align-items: center;gap: 2px 5px;color:#000000;text-transform:uppercase;font-weight:400;letter-spacing:1px;grid-column: span 2;border-left:3px solid #d2d2d2;padding:0 0 0 8px;">

<div style="text-align:right;">Trust</div>
<div style="border:1px solid #ffd88f;border-radius:20px;overflow:hidden;"><div style="width:50%;padding-top:8px;background:#ffd88f;"></div></div>

<div style="text-align:right;">Friendship</div>
<div style="border:1px solid #3cbf9a;border-radius:20px;overflow:hidden;"><div style="width:50%;padding-top:8px;background:#3cbf9a;"></div></div>

<div style="text-align:right;">Romance</div>
<div style="border:1px solid #ff98f4;border-radius:20px;overflow:hidden;"><div style="width:50%;padding-top:8px;background:#ff98f4;"></div></div>

</div>

</div></div>

<div style="width: 45%;min-width: 300px;flex-grow: 1;padding:15px;"></div>

</div></raw-code>

Flat | Top-Level Comments Only

Code

Character Name

Character Name

(frozen comment) Codes

(frozen comment) Dark colors

Character Name

(frozen comment) no subject

(frozen comment) Light Colors

Character Name

(frozen comment) no subject