First commit
This commit is contained in:
Lorem Ipsum
commit
8118c7e551
5 changed files with 1077 additions and 0 deletions
5
README.md
Normal file
5
README.md
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
# And embed visualizer
|
||||||
|
|
||||||
|
Visualizes embed or message content from JSON input.
|
||||||
|
This can be used for bot embed commands commands, although I understand that not every one understands JSON thus will add a GUI later.
|
||||||
|
You can look into the [project boards](https://github.com/Glitchii/embedbuilder/projects/3) if you want to see what I'm currently working on or want to contribute
|
||||||
784
assets/css/index.css
Normal file
784
assets/css/index.css
Normal file
|
|
@ -0,0 +1,784 @@
|
||||||
|
* {
|
||||||
|
outline: none;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--link: #00b0f4;
|
||||||
|
--embedTextColor: #dcddde;
|
||||||
|
--embedTextColor2: #72767d;
|
||||||
|
--embedBackground: #2f3136;
|
||||||
|
--fullEmbedBackground: #36393f;
|
||||||
|
--side1Background: #2c2e33;
|
||||||
|
--side1Background: #2f3136;
|
||||||
|
--background-secondary: #2f3136;
|
||||||
|
--background-tertiary: #202225;
|
||||||
|
--header-secondary: #b9bbbe;
|
||||||
|
--interactive-muted: #4f545c;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
line-height: 1;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
font-family: Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: var(--fullEmbedBackground);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 45% 55%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top pre>code .hltChars {
|
||||||
|
color: #b96a97;
|
||||||
|
color: #b36391;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top pre>code .hltInt {
|
||||||
|
color: #a474e8;
|
||||||
|
color: #7658c8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top pre>code .hltBool {
|
||||||
|
color: #d679c6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top pre>code .hltStr1 {
|
||||||
|
color: #68b7c8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top pre>code .hltStr2 {
|
||||||
|
color: #b58900;
|
||||||
|
color: #aab060;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main section {
|
||||||
|
min-height: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main .side1 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--side1Background);
|
||||||
|
border-right: 1px solid var(--background-tertiary);
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side1 .bottom .box {
|
||||||
|
background-color: #27282d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top {
|
||||||
|
width: 100%;
|
||||||
|
height: 55%;
|
||||||
|
border: none;
|
||||||
|
padding: 5px;
|
||||||
|
outline: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: #292b2f;
|
||||||
|
color: rgb(228, 225, 225);
|
||||||
|
border: 1px solid var(--background-tertiary);
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
height: 30%;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side1 .item.top {
|
||||||
|
background-color: #292b2f;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item~.item {
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main .side2 {
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--fullEmbedBackground);
|
||||||
|
justify-content: center;
|
||||||
|
vertical-align: center;
|
||||||
|
overflow: auto;
|
||||||
|
scrollbar-color: #26272d #36393f;
|
||||||
|
scrollbar-width: thin;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 7px;
|
||||||
|
background: #36393f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main .side2::-webkit-scrollbar-thumb {
|
||||||
|
background: #26272d;
|
||||||
|
}
|
||||||
|
|
||||||
|
a, abbr, acronym, address, applet, big, blockquote, body, caption, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, html, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, table, tbody, td, tfoot, th, thead, tr, tt, ul, var {
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
border: 0px;
|
||||||
|
font-weight: inherit;
|
||||||
|
font-style: inherit;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 100%;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-comment, .hljs-quote {
|
||||||
|
color: var(--interactive-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-addition, .hljs-keyword, .hljs-selector-tag {
|
||||||
|
color: #859900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-doctag, .hljs-literal, .hljs-meta .hljs-meta-string, .hljs-number, .hljs-regexp, .hljs-string {
|
||||||
|
color: #2aa198;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-name, .hljs-section, .hljs-selector-class, .hljs-selector-id, .hljs-title {
|
||||||
|
color: #268bd2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-attr, .hljs-attribute, .hljs-class .hljs-title, .hljs-template-variable, .hljs-type, .hljs-variable {
|
||||||
|
color: #b58900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-bullet, .hljs-link, .hljs-meta, .hljs-meta .hljs-keyword, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-subst, .hljs-symbol {
|
||||||
|
color: #cb4b16;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-built_in, .hljs-deletion {
|
||||||
|
color: #dc322f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-formula {
|
||||||
|
background: #073642;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-emphasis {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-strong {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cm-string {
|
||||||
|
color: #92deea!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cm-string~.cm-string {
|
||||||
|
color: #c3e88d!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cm-number {
|
||||||
|
color: #d19a66!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
code, [class^="cm-"] {
|
||||||
|
font-family: Consolas, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Monaco, Courier New, Courier, monospace;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a img {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-input-placeholder, body, button, input, select, textarea {
|
||||||
|
font-family: Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
|
text-rendering: optimizelegibility;
|
||||||
|
}
|
||||||
|
|
||||||
|
::placeholder, body, button, input, select, textarea {
|
||||||
|
font-family: Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
|
text-rendering: optimizelegibility;
|
||||||
|
}
|
||||||
|
|
||||||
|
a, button, div, input, label, select, span, strong, textarea {
|
||||||
|
outline: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img[alt] {
|
||||||
|
text-indent: -9999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.msgEmbed {
|
||||||
|
min-height: 2.75rem;
|
||||||
|
padding: 0.125rem 0 20px 72px;
|
||||||
|
position: absolute;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
user-select: text;
|
||||||
|
width: 96%;
|
||||||
|
margin: 10px 20px 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.embedTitle>* {
|
||||||
|
line-height: 1.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contents {
|
||||||
|
position: static;
|
||||||
|
margin-left: 0px;
|
||||||
|
padding-left: 0px;
|
||||||
|
text-indent: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
position: absolute;
|
||||||
|
left: 16px;
|
||||||
|
margin-top: calc(4px - 0.125rem);
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeText {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
line-height: 1.375rem;
|
||||||
|
color: var(--embedTextColor2);
|
||||||
|
vertical-align: baseline;
|
||||||
|
margin-left: 0.25rem;
|
||||||
|
display: inline-block;
|
||||||
|
height: 1.25rem;
|
||||||
|
cursor: default;
|
||||||
|
pointer-events: none;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.botTag {
|
||||||
|
height: 0.9375rem;
|
||||||
|
padding: 0px 0.275rem;
|
||||||
|
margin-top: 0.075em;
|
||||||
|
border-radius: 0.1875rem;
|
||||||
|
background: rgb(114, 137, 218);
|
||||||
|
font-size: 0.625rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
vertical-align: top;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
text-indent: 0px;
|
||||||
|
position: relative;
|
||||||
|
top: 0.1rem;
|
||||||
|
margin-left: 0.25rem;
|
||||||
|
line-height: 1.375rem;
|
||||||
|
white-space: break-spaces;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.botText {
|
||||||
|
position: relative;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 15px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-indent: 0px;
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.username {
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.375rem;
|
||||||
|
color: #fff;
|
||||||
|
display: inline;
|
||||||
|
vertical-align: baseline;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imageWrapper {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
user-select: text;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imageWrapper img {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clickable {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.embed {
|
||||||
|
position: relative;
|
||||||
|
display: grid;
|
||||||
|
max-width: 520px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 4px;
|
||||||
|
border-left: 4px solid var(--fullEmbedBackground);
|
||||||
|
background: var(--embedBackground);
|
||||||
|
border-color: #1e2327;
|
||||||
|
}
|
||||||
|
|
||||||
|
.embedAuthorName, .embedAuthorNameLink, .embedDescription, .embedFieldName, .embedFieldValue, .embedFooterText, .embedLink, .embedProvider-3k5pfl, .embedTitle, .embedTitleLink-1Zla9e {
|
||||||
|
unicode-bidi: plaintext;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji {
|
||||||
|
object-fit: contain;
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
margin: 0 .05em 0 .1em !important;
|
||||||
|
vertical-align: -.4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.embedGrid {
|
||||||
|
overflow: hidden;
|
||||||
|
max-width: 516px;
|
||||||
|
padding: 0.5rem 1rem 1rem 0.75rem;
|
||||||
|
display: inline-grid;
|
||||||
|
grid-template-columns: auto;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
grid-template-columns: auto min-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.embedMargin {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.embedLink {
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.embedAuthor {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
grid-column: 1 / 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.embedAuthorName {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.embedAuthorIcon {
|
||||||
|
margin-right: 8px;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
object-fit: contain;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.embedTitle {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
display: inline-block;
|
||||||
|
grid-column: 1 / 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.embedDescription {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1.125rem;
|
||||||
|
font-weight: 400;
|
||||||
|
white-space: pre-line;
|
||||||
|
grid-column: 1 / 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.embedImage {
|
||||||
|
margin-top: 16px;
|
||||||
|
grid-column: 1 / 1;
|
||||||
|
border-radius: 4px;
|
||||||
|
contain: paint;
|
||||||
|
grid-column: 1 / 3;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.embedImage, .embedThumbnail {
|
||||||
|
display: block;
|
||||||
|
object-fit: fill;
|
||||||
|
}
|
||||||
|
|
||||||
|
.embedImage, .embedThumbnail {
|
||||||
|
display: block;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.embedThumbnail {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.embedThumbnail {
|
||||||
|
grid-area: 1 / 2 / 8 / 2;
|
||||||
|
margin-left: 16px;
|
||||||
|
margin-top: 8px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
justify-self: end;
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.embedFooter {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
grid-area: auto / 1 / auto / 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.embedFooter {
|
||||||
|
grid-column: 1 / 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.embedFooterText {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
line-height: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--embedTextColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
.embedFooterSeparator {
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--embedTextColor);
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.embedFooterIcon {
|
||||||
|
margin-right: 8px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
object-fit: contain;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.embedFields {
|
||||||
|
display: grid;
|
||||||
|
grid-column: 1 / 1;
|
||||||
|
margin-top: 8px;
|
||||||
|
gap: 8px;
|
||||||
|
min-width: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.embedField {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1.125rem;
|
||||||
|
min-width: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.embedFieldName {
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.embedFieldValue {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1.125rem;
|
||||||
|
font-weight: 400;
|
||||||
|
white-space: pre-line;
|
||||||
|
min-width: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.embedDescription, .embedFieldValue {
|
||||||
|
color: var(--embedTextColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
.embedAuthorName, .embedFieldName, .embedTitle {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.embedGrid>* {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.embedGrid.empty {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.messageContent {
|
||||||
|
user-select: text;
|
||||||
|
margin-left: -72px;
|
||||||
|
padding-left: 72px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.messageContent.markup {
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.375rem;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
white-space: break-spaces;
|
||||||
|
word-wrap: break-word;
|
||||||
|
user-select: text;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
u {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markup em {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markup strong {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markup {
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.375rem;
|
||||||
|
user-select: text;
|
||||||
|
color: var(--embedTextColor);
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markup a {
|
||||||
|
word-break: break-word;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anchor {
|
||||||
|
color: var(--link);
|
||||||
|
}
|
||||||
|
|
||||||
|
.markup a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markup code {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1.125rem;
|
||||||
|
text-indent: 0;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: var(--background-tertiary) var(--background-secondary);
|
||||||
|
background: #2f3136;
|
||||||
|
border: 1px solid #202225;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markup pre>code {
|
||||||
|
display: block;
|
||||||
|
overflow-x: auto;
|
||||||
|
padding: .5em;
|
||||||
|
border-radius: 4px;
|
||||||
|
color: var(--header-secondary);
|
||||||
|
text-size-adjust: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: grid;
|
||||||
|
grid-auto-flow: row;
|
||||||
|
row-gap: 0.25rem;
|
||||||
|
text-indent: 0px;
|
||||||
|
min-height: 0px;
|
||||||
|
min-width: 0px;
|
||||||
|
padding-top: 0.125rem;
|
||||||
|
padding-bottom: 0.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container>* {
|
||||||
|
place-self: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markup code {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1.125rem;
|
||||||
|
text-indent: 0;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
background: var(--background-secondary);
|
||||||
|
border: 1px solid var(--background-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.markup code.inline {
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
padding: .2em;
|
||||||
|
margin: -.2em 0;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 85%;
|
||||||
|
font-family: Consolas, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Monaco, Courier New, Courier, monospace;
|
||||||
|
text-indent: 0;
|
||||||
|
border: none;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markup pre {
|
||||||
|
max-width: 90%;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 0;
|
||||||
|
font-family: Consolas, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Monaco, Courier New, Courier, monospace;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
line-height: 1rem;
|
||||||
|
margin-top: 6px;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
background-clip: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markup pre.embeded {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markup pre.embeded>code {
|
||||||
|
border: none;
|
||||||
|
background: var(--background-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.CodeMirror {
|
||||||
|
background-color: #212121;
|
||||||
|
color: #eff;
|
||||||
|
width: 100%!important;
|
||||||
|
height: 100%!important;
|
||||||
|
background-color: inherit!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CodeMirror-lint-marker-error, .CodeMirror-lint-message-error {
|
||||||
|
background-image: none!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CodeMirror-lint-marker-error:after, .CodeMirror-lint-message-error:before {
|
||||||
|
content: "!";
|
||||||
|
color: #f45711;
|
||||||
|
font-size: 20px;
|
||||||
|
position: relative;
|
||||||
|
left: -2px;
|
||||||
|
top: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CodeMirror-lint-message-error:before {
|
||||||
|
content: "!";
|
||||||
|
color: #f45711;
|
||||||
|
font-size: 20px;
|
||||||
|
position: relative;
|
||||||
|
left: -15px!important;
|
||||||
|
top: 1px!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CodeMirror-lint-tooltip {
|
||||||
|
box-shadow: 1px 10px 15px rgb(0 0 0 / 17%);
|
||||||
|
background-color: #202225!important;
|
||||||
|
border: 1px solid #373a40!important;
|
||||||
|
color: #cacaca!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CodeMirror-lint-message {
|
||||||
|
padding: 5px 5px 10px 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CodeMirror-code .CodeMirror-gutter-wrapper .CodeMirror-gutter-elt {
|
||||||
|
left: 0px!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CodeMirror-gutters {
|
||||||
|
background: #292b2f!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CodeMirror-foldmarker {
|
||||||
|
color: #e5ecff!important;
|
||||||
|
text-shadow: none!important;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CodeMirror-cursor {
|
||||||
|
border-left: 2px solid #6ba6ff !important;
|
||||||
|
height: 17px!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CodeMirror-scrollbar-filler {
|
||||||
|
display: none!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CodeMirror-overlayscroll-horizontal div, .CodeMirror-overlayscroll-vertical div {
|
||||||
|
background: #202225!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cm-s-material-darker .cm-comment {
|
||||||
|
color: #5d616b!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cm-s-material-darker .CodeMirror-matchingbracket {
|
||||||
|
text-decoration: none!important;
|
||||||
|
background-color: rgb(173 192 212 / 3%)!important;
|
||||||
|
color: #b9c3d6 !important;
|
||||||
|
border-bottom: 1px solid #c2d6ff!important;
|
||||||
|
/* border: 1px solid #bacdf347; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification {
|
||||||
|
position: relative;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
text-align: center;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification .inline {
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
padding: .2em;
|
||||||
|
margin: -.2em 0;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 85%;
|
||||||
|
font-family: Consolas, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Monaco, Courier New, Courier, monospace;
|
||||||
|
text-indent: 0;
|
||||||
|
border: none;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
background-color: #4a3535;
|
||||||
|
color: white;
|
||||||
|
color: inherit;
|
||||||
|
background-color: inherit;
|
||||||
|
border: 1px dashed;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes notifAn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
bottom: -50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification {
|
||||||
|
margin-top: 5px;
|
||||||
|
animation: notifAn .5s ease;
|
||||||
|
background-color: #202225;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
color: #8c4949;
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1015px) {
|
||||||
|
.main {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.side1 .item.top {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.notification .inline {
|
||||||
|
display: block;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
163
assets/js/index.js
Normal file
163
assets/js/index.js
Normal file
|
|
@ -0,0 +1,163 @@
|
||||||
|
|
||||||
|
// Want to use or contribute to this? https://github.com/Glitchii/embedbuilder
|
||||||
|
// If you found an issue, please report it, make a P.R, or use the discussion page. Thanks
|
||||||
|
|
||||||
|
var colNum = 1, num = 0;
|
||||||
|
window.onload = () => {
|
||||||
|
document.querySelectorAll('img.clickable')
|
||||||
|
.forEach(e => e.addEventListener('click', el => window.open(el.target.src)));
|
||||||
|
let textarea = document.querySelector('textarea');
|
||||||
|
window.editor = CodeMirror(elt => textarea.parentNode.replaceChild(elt, textarea), {
|
||||||
|
value: textarea.value,
|
||||||
|
theme: 'material-darker',
|
||||||
|
scrollbarStyle: "overlay",
|
||||||
|
mode: "application/json",
|
||||||
|
// lineNumbers: true,
|
||||||
|
foldGutter: true,
|
||||||
|
gutters: ["CodeMirror-foldgutter", "CodeMirror-lint-markers"],
|
||||||
|
matchBrackets: true,
|
||||||
|
lint: true
|
||||||
|
});
|
||||||
|
|
||||||
|
editor.focus();
|
||||||
|
let notif = document.querySelector('.notification'),
|
||||||
|
url = (url) => /^(https?:)?\/\//g.exec(url) ? url : '//' + url,
|
||||||
|
makeShort = (txt, length, mediaWidth) => {
|
||||||
|
if (mediaWidth && window.matchMedia(`(max-width:${mediaWidth}px)`).matches)
|
||||||
|
return txt.length > (length - 3) ? txt.substring(0, length - 3) + '...' : txt;
|
||||||
|
return txt;
|
||||||
|
}, error = (msg, html) => {
|
||||||
|
if (html) notif.innerHTML = msg;
|
||||||
|
else notif.innerText = msg;
|
||||||
|
notif.style.display = 'block';
|
||||||
|
// err && console.log(err);
|
||||||
|
}, markup = (txt, isEmbed) => {
|
||||||
|
txt = txt
|
||||||
|
// Custom Emojis
|
||||||
|
.replace(/<a?:[^:]+?:(\d+)>/g, '<img class="emoji" src="https://cdn.discordapp.com/emojis/$1.png"/>') // .replace(/<a?:[^:]+?:(\d+)>/g, '<img class="emoji" src="https://cdn.discordapp.com/emojis/$1.gif" onerror="this.src=\'https://cdn.discordapp.com/emojis/$1.png\'"/>') // This will keep logging failed GET request errors in console
|
||||||
|
// MD
|
||||||
|
.replace(/~~(.+?)~~/g, '<s>$1</s>')
|
||||||
|
.replace(/\`(?!\`)([^\`]+?)\`(?!\`)/g, '<code class="inline">$1</code>')
|
||||||
|
.replace(/\`\`(?!\`)([^\`]+?)\`\`(?!\`)/g, '<code class="inline">$1</code>')
|
||||||
|
.replace(/\*\*\*(.+?)\*\*\*/g, '<em><strong>$1</strong></em>')
|
||||||
|
.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
|
||||||
|
.replace(/__(.+?)__/g, '<u>$1</u>')
|
||||||
|
.replace(/\*(.+?)\*/g, '<em>$1</em>')
|
||||||
|
.replace(/_(.+?)_/g, '<em>$1</em>')
|
||||||
|
// Block
|
||||||
|
.replace(/\n/g, '<br>')
|
||||||
|
.replace(/\`\`\`(\w{1,15})<br>((\n|.)+?)\`\`\`/g, isEmbed ? '<pre class="embeded"><code class="$1">$2</code></pre>' : '<pre><code class="$1">$2</code></pre>')
|
||||||
|
.replace(/\`\`\`(\w{1,15})<br>((\n|.)+?)\`\`\`/g, isEmbed ? '<pre class="embeded"><code class="$1">$2</code></pre>' : '<pre><code class="$1">$2</code></pre>')
|
||||||
|
.replace(/\`\`\`(<br>)?((\n|.)+?)\`\`\`/g, isEmbed ? '<pre class="embeded"><code class="hljs nohighlight">$2</code></pre>' : '<pre><code class="hljs nohighlight">$2</code></pre>')
|
||||||
|
if (isEmbed) txt = txt
|
||||||
|
.replace(/\[(.+)\]\((.+)\)/g, `<a title="$1" target="_blank" class="anchor" href="$2">$1</a>`);
|
||||||
|
return txt;
|
||||||
|
},
|
||||||
|
content = document.querySelector('.messageContent'),
|
||||||
|
embed = document.querySelector('.embedGrid'),
|
||||||
|
msgEmbed = document.querySelector('.msgEmbed'),
|
||||||
|
embedTitle = document.querySelector('.embedTitle'),
|
||||||
|
embedDescription = document.querySelector('.embedDescription'),
|
||||||
|
embedAuthor = document.querySelector('.embedAuthor'),
|
||||||
|
embedFooter = document.querySelector('.embedFooter'),
|
||||||
|
embedImage = document.querySelector('.embedImage'),
|
||||||
|
embedThumbnail = document.querySelector('.embedThumbnail'),
|
||||||
|
fields = embed.querySelector('.embedFields'),
|
||||||
|
tstamp = stringISO => {
|
||||||
|
let date = stringISO ? new Date(stringISO) : new Date(),
|
||||||
|
dateArray = date.toLocaleString('en-US', { hour: 'numeric', hour12: true, minute: 'numeric' }),
|
||||||
|
today = new Date(),
|
||||||
|
yesterday = new Date(new Date().setDate(today.getDate() - 1));
|
||||||
|
|
||||||
|
return today.toDateString() === date.toDateString() ? `Today at ${dateArray}` :
|
||||||
|
yesterday.toDateString() === date.toDateString() ? `Yesterday at ${dateArray}` :
|
||||||
|
`${String(date.getMonth() + 1).padStart(2, '0')}/${String(date.getDate()).padStart(2, '0')}/${date.getFullYear()}`;
|
||||||
|
}, display = (el, data, displayType) => {
|
||||||
|
if (data) el.innerHTML = data;
|
||||||
|
el.style.display = displayType || "unset";
|
||||||
|
|
||||||
|
}, hide = el => el.style.removeProperty('display'),
|
||||||
|
toObj = jsonString => JSON.parse(jsonString.replace(/\\"|"(?:\\"|[^"])*"|(\/\/.*|\/\*[\s\S]*?\*\/)/g, (x, y) => y ? "" : x)),
|
||||||
|
update = data => {
|
||||||
|
try {
|
||||||
|
content.innerHTML = data.content ? markup(data.content) : '';
|
||||||
|
if (data.embed) {
|
||||||
|
let e = data.embed;
|
||||||
|
if (e.title) display(embedTitle, markup(`${e.url ? '<a class="anchor" target="_blank" href="' + url(e.url) + '">' + e.title + '</a>' : e.title}`));
|
||||||
|
else hide(embedTitle);
|
||||||
|
if (e.description) display(embedDescription, markup(e.description, true));
|
||||||
|
else hide(embedDescription);
|
||||||
|
if (e.color) embed.closest('.embed').style.borderColor = (typeof e.color === 'number' ? '#' + e.color.toString(16) : e.color);
|
||||||
|
else embed.closest('.embed').style.removeProperty('border-color');
|
||||||
|
if (e.author && e.author.name) display(embedAuthor, `
|
||||||
|
${e.author.icon_url ? '<img class="embedAuthorIcon" src="' + url(e.author.icon_url) + '">' : ''}
|
||||||
|
${e.author.url ? '<a class="embedAuthorNameLink embedLink embedAuthorName" href="' + url(e.author.url) + '" target="_blank">' + e.author.name + '</a>' : '<span class="embedAuthorName">' + e.author.name + '</span>'}`, 'flex');
|
||||||
|
else hide(embedAuthor);
|
||||||
|
if (e.thumbnail && e.thumbnail.url) embedThumbnail.src = e.thumbnail.url, embedThumbnail.style.display = 'block';
|
||||||
|
else hide(embedThumbnail);
|
||||||
|
if (e.image && e.image.url) embedImage.src = e.image.url, embedImage.style.display = 'block';
|
||||||
|
else hide(embedImage);
|
||||||
|
if (e.footer && e.footer.text) display(embedFooter, `
|
||||||
|
${e.footer.icon_url ? '<img class="embedFooterIcon" src="' + url(e.footer.icon_url) + '">' : ''}<span class="embedFooterText">
|
||||||
|
${e.footer.text}
|
||||||
|
${e.timestamp ? '<span class="embedFooterSeparator">•</span>' + tstamp(e.timestamp) : ''}</span></div>`, 'flex');
|
||||||
|
else if (e.timestamp) display(embedFooter, `<span class="embedFooterText">${tstamp(e.timestamp)}</span></div>`, 'flex');
|
||||||
|
else hide(embedFooter);
|
||||||
|
if (e.fields) {
|
||||||
|
fields.innerHTML = '';
|
||||||
|
e.fields.forEach(f => {
|
||||||
|
if (!f.inline) {
|
||||||
|
let el = fields.insertBefore(document.createElement('div'), null);
|
||||||
|
el.outerHTML = `
|
||||||
|
<div class="embedField" style="grid-column: 1 / 13;">
|
||||||
|
<div class="embedFieldName">${markup(f.name)}</div>
|
||||||
|
<div class="embedFieldValue">${markup(f.value)}</div>
|
||||||
|
</div>`;
|
||||||
|
} else {
|
||||||
|
el = fields.insertBefore(document.createElement('div'), null);
|
||||||
|
el.outerHTML = `
|
||||||
|
<div class="embedField ${num}" style="grid-column: ${colNum} / ${colNum + 4};">
|
||||||
|
<div class="embedFieldName">${markup(f.name)}</div>
|
||||||
|
<div class="embedFieldValue">${markup(f.value)}</div>
|
||||||
|
</div>`;
|
||||||
|
colNum = (colNum === 9 ? 1 : colNum + 4);
|
||||||
|
num++;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
colNum = 1;
|
||||||
|
let len = e.fields.filter(f => f.inline).length;
|
||||||
|
if (len === 2 || (len > 3 && len % 2 !== 0)) {
|
||||||
|
let children = Array.from(fields.children),
|
||||||
|
arr = children.filter(x => x === children[len] || x === children[len - 1]);
|
||||||
|
arr[0].style.gridColumn = '1 / 7', arr[1].style.gridColumn = '7 / 13';
|
||||||
|
}
|
||||||
|
display(fields, undefined, 'grid');
|
||||||
|
} else hide(fields);
|
||||||
|
embed.classList.remove('empty');
|
||||||
|
let re = /"((icon_)?url")(: *)("(?!\w+?:\/\/).+?")/g.exec(editor.getValue())
|
||||||
|
if (re) error(`URLs should have a valid protocol (eg. https://) on this line <span class="inline">${makeShort(re[0], 30, 600)}</span>`, true);
|
||||||
|
else notif.animate({ opacity: '0', bottom: '-50px', offset: 1 }, { easing: 'ease', duration: 500 }).onfinish = () => notif.style.removeProperty('display');
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
error(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
editor.on('change', editor => {
|
||||||
|
try { update(toObj(editor.getValue())); }
|
||||||
|
catch (e) {
|
||||||
|
if (editor.getValue()) return; // error("Couldn't parse JSON; Invalid JSON syntax", e)
|
||||||
|
embed.classList.add('empty');
|
||||||
|
content.innerHTML = '';
|
||||||
|
}
|
||||||
|
document.querySelectorAll('.markup pre > code').forEach((block) => hljs.highlightBlock(block));
|
||||||
|
twemoji.parse(msgEmbed);
|
||||||
|
});
|
||||||
|
|
||||||
|
update(toObj(editor.getValue()));
|
||||||
|
twemoji.parse(msgEmbed);
|
||||||
|
document.querySelector('.timeText').innerText = tstamp()
|
||||||
|
document.querySelectorAll('.markup pre > code').forEach((block) => hljs.highlightBlock(block))
|
||||||
|
!window.navigator.userAgent.match(/Firefox\/[\d\.]+$/g) && // Firefox pushes the text up a little
|
||||||
|
document.querySelector('.botText').style.removeProperty('top');
|
||||||
|
};
|
||||||
BIN
assets/media/layout.png
Normal file
BIN
assets/media/layout.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 245 KiB |
125
index.html
Normal file
125
index.html
Normal file
|
|
@ -0,0 +1,125 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="icon" href="data:;base64,iVBORw0KGgo=" />
|
||||||
|
<title>Embed Builder</title>
|
||||||
|
<link rel="stylesheet" href="./assets/css/index.css" />
|
||||||
|
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.1/highlight.min.js"></script>
|
||||||
|
<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/codemirror.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/codemirror.min.css" />
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/mode/javascript/javascript.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/theme/material-darker.min.css" />
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/addon/scroll/simplescrollbars.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/addon/scroll/simplescrollbars.min.css" />
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/addon/edit/matchbrackets.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/addon/fold/brace-fold.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/addon/fold/foldgutter.min.css" />
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/addon/fold/foldgutter.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/addon/fold/foldcode.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/addon/lint/json-lint.min.js"></script>
|
||||||
|
<script src="https://unpkg.com/jsonlint@1.6.3/web/jsonlint.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/addon/lint/lint.min.css" />
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/addon/lint/lint.min.js"></script>
|
||||||
|
<script src="./assets/js/index.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="main">
|
||||||
|
<section class="side1">
|
||||||
|
<div class="top item">
|
||||||
|
<textarea style="display: none;">
|
||||||
|
{
|
||||||
|
"content": "You can~~not~~ do `this`.```py\nAnd this.\nprint('Hi')```\n*italics* or _italics_ __*underline italics*__\n**bold** __**underline bold**__\n***bold italics*** __***underline bold italics***__\n__underline__ ~~Strikethrough~~",
|
||||||
|
"embed": {
|
||||||
|
"title": "Hello ~~people~~ world",
|
||||||
|
"description": "A description. You can use [links](https://discord.com).\nAnd also emojis 🙂\n```\nAlso code blocks```",
|
||||||
|
"color": 4321431,
|
||||||
|
"timestamp": "2020-12-08T13:37:35.401Z",
|
||||||
|
"url": "https://discord.com",
|
||||||
|
"author": {
|
||||||
|
"name": "Name",
|
||||||
|
"url": "https://discord.com",
|
||||||
|
"icon_url": "https://unsplash.it/100"
|
||||||
|
},
|
||||||
|
"thumbnail": {
|
||||||
|
"url": "https://unsplash.it/200"
|
||||||
|
},
|
||||||
|
"image": {
|
||||||
|
"url": "https://unsplash.it/380/200"
|
||||||
|
},
|
||||||
|
"footer": {
|
||||||
|
"text": "Footer text",
|
||||||
|
"icon_url": "https://unsplash.it/100"
|
||||||
|
},
|
||||||
|
"fields": [
|
||||||
|
{
|
||||||
|
"name": "Field 1, *lorem* **ipsum**, ~~dolor~~",
|
||||||
|
"value": "Field value"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Field 2",
|
||||||
|
"value": "You can use custom emojis <:Kekwlaugh:722088222766923847>. <:GangstaBlob:742256196295065661>",
|
||||||
|
"inline": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Inline field",
|
||||||
|
"value": "Fields can be inline",
|
||||||
|
"inline": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Inline field",
|
||||||
|
"value": "*Lorem ipsum*",
|
||||||
|
"inline": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Inline field",
|
||||||
|
"value": "value",
|
||||||
|
"inline": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Inline field",
|
||||||
|
"value": "value",
|
||||||
|
"inline": true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</textarea>
|
||||||
|
</div>
|
||||||
|
<div class="bottom item"></div>
|
||||||
|
</section>
|
||||||
|
<section class="side2">
|
||||||
|
<div class="msgEmbed">
|
||||||
|
<div class="contents">
|
||||||
|
<img src="https://cdn.discordapp.com/embed/avatars/1.png" class="avatar" alt=" " />
|
||||||
|
<h2>
|
||||||
|
<span class="username" role="button">Discord Bot</span><span class="botTag"><span class="botText" style="top: 1.12px;">BOT</span></span>
|
||||||
|
<span class="timeText"></span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div class="markup messageContent"></div>
|
||||||
|
<div class="container">
|
||||||
|
<div class="embed markup">
|
||||||
|
<div class="embedGrid empty">
|
||||||
|
<div class="embedAuthor embedMargin"></div>
|
||||||
|
<div class="embedTitle embedMargin"></div>
|
||||||
|
<div class="embedDescription embedMargin"></div>
|
||||||
|
<div class="embedFields"></div>
|
||||||
|
<img class="imageWrapper clickable embedMedia embedImage" />
|
||||||
|
<img class="imageWrapper clickable embedThumbnail" />
|
||||||
|
<div class="embedFooter embedMargin"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottomSide">
|
||||||
|
<div class="notification">There is an error</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Add table
Reference in a new issue