Profile
Discord Page
About
This code is designed to look like the UI for Discord. Features a page for "Friends" with links to to other pages, and multiple different customizable chats, including groups and private chats. Also includes different types of messages including regular messages, messages with images, and links (to tweets, Youtube videos, and other websites).
The example chat features some of my original characters (1, 2, 3).
Changelog
-
5/1/21:
It only took like 3 days to make, but its finally posted.
So, I went on vacation and long story short, I didn't check TH a lot. When I got back I started working on this page and it's only after I finished that I realized that someone else out there has already made a mock-up Discord page.
I guess I did not have an original thought, huh. Well, nevertheless, I looked at what that person made, and I feel like our codes are different enough because I've added different things, so I can justify posting this. If you feel like it, you could probably check out their code tho.
Terms Of Use
- Do not remove the credit from the code. You can move it around to a different location, but keep it visible and do not remove it completely.
- The code is only for the purchaser's use. Do not redistribute it.
- Feel free to Frankenstein my code into others' codes so long as they're okay with it too. Make sure to credit me, and follow the other person's credit rules as well.
- Please have some knowledge of how HTML works. I'm happy to help if there are any bugs, or something breaks, but I will not edit the whole thing for you if you don't know HTML. If you need help installing it, follow these instructions.
- All purchases are final. There wil not be refunds.
- By purchasing you agree to these terms.
Live Preview
Find or start a conversation
#1234
Friends | Online All Pending Blocked Add Friend |
Username
Today at ##:## XM
This is a chat with another user. This one features examples of a basic message with text and a message featuring an image. All of these chats will scroll if you add enough content to them.
If you want to add more messages, you can copy and paste code for the message and add them.
Username
Today at ##:## XM
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum suscipit ex et interdum. Proin suscipit mollis odio, ut congue diam. Praesent elementum pretium lacus vitae dictum. Sed leo nulla, semper nec quam et, efficitur bibendum odio. Phasellus vel pulvinar nisl. Nullam efficitur sagittis augue.
Username
Today at ##:## XM
Message @ Username
Username is typing...
Username
Today at ##:## XM
This is a chat with another user. This one features examples of a different kinds of links.
If you want to add more messages, you can copy and paste code for the message and add them.
Username
Today at ##:## XM
https://placeholder.com/
Name (@ Handle)
This is a link to a tweet! Lorem ipsum dolor sit amet, consectetur adipiscing elit.
123
123
Twitter • 00/00/0000
Username
Today at ##:## XM
https://placeholder.com/
Name (@ Handle)
This is a link to a tweet with an image! Lorem ipsum dolor sit amet, consectetur adipiscing elit.
123
123
Twitter • 00/00/0000
Username
Today at ##:## XM
https://placeholder.com/
Username
Today at ##:## XM
https://placeholder.com/
Website
This is a link to a website! Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Message @ Username
Username is typing...
Username
Today at ##:## XM
This is an example of a group chat. As with the other pages, this tab will scroll if you add enough content.
The members list on the left is customizable. Add or remove users as you like. You can add up to 10.
The users generally go in alphabetical order. The user with the crown is the owner/creator of the chat.
This page also shows some examples of how images will resize to fit.
Username
Today at ##:## XM
This is an example of a very tall image.
Username
Today at ##:## XM
This is an example of a very wide image.
Message Chat Room Name
Username is typing...
Members — 3
Username
Status Message
Username
Status Message
Username
Status Message
Username
Today at ##:## XM
This is another example of a group chat.
This page lists some of the different actions performed in a group chat such as adding and removing members, changing the group name, etc.
Username added Username to the group. Today at ##:## XM
Username removed Username from the group. Today at ##:## XM
Username left the group. Today at ##:## XM
Username pinned a message to this channel. See all the pins. Today at ##:## XM
Username changed the channel icon. Today at ##:## XM
Username changed the channel name: Group Chat Name Today at ##:## XM
Username started a call that lasted # hours. Today at ##:## XM
You missed a call from Username that lasted # hours. Today at ##:## XM
Message Chat Room Name
Username is typing...
Members — 3
Username
Status Message
Username
Status Message
Username
Status Message
carlote
Today at 6:11 PM
Shion
Today at 6:11 PM
Stop sending me pictutes of that asshole I'll kill you.
carlote
Today at 6:13 PM
lol youll have to find me first
actually hold on i have a great idea
carlote added ! Akuro / 12 to the group. Today at 6:14 PM
Shion
Today at 6:14 PM
absolutely not.
Shion left the group. Today at 6:14 PM
carlote
Today at 6:15 PM
BAHAHAHA LMAO
shitai
Today at 6:15 PM
rip our beloved crimson magician. gone from this chat too soon
shitai removed ! Akuro / 12 from the group. Today at 6:15 PM
shitai
Today at 6:16 PM
good thing he wasn't online lol or we'd have problem
should we add shion back or nah
carlote
Today at 6:17 PM
nah leave him. its the price he pays for abandoning us
shitai added Shion to the group. Today at 6:17 PM
shitai
Today at 6:18 PM
oh oops
carlote
Today at 6:17 PM
oh no
Shion
Today at 6:17 PM
Why am I even friends with you?
Message Chat Room Name
carlote is typing...
Members — 3
carlote
stay outof my room im...
shitai
Listening to Spotify
Shion
someone kill me already
