Minor format changes + initial settings page

multistream-alerts/index.html

@@ -21,8 +21,15 @@
 					<span id="attribute">to nutty</span>
 				</div>
 			</div>
-			<div id="message">
+			<div id="theContentThatShowsLastInsteadOfFirst">
+				<div style="display: inline-flex; align-items: center;">
+					<img id="avatarButItsSmallerThanTheOneFromBeforeForPrettinessPurposes" src="https://static-cdn.jtvnw.net/jtv_user_pictures/272e643e-4d43-415f-9ee1-18916e825411-profile_image-300x300.png" class="square">
+					<span id="usernameTheSecond"></span>
+				</div>
+				<br>
+				<span id="message">
 					I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum 
+				</span>
 			</div>
 		</div>
 	</div>

multistream-alerts/script.js

@@ -11,10 +11,14 @@ const avatarMap = new Map();
 
 const alertBox = document.getElementById('alertBox');
 const avatarElement = document.getElementById('avatar');
+const avatarSmallElement = document.getElementById('avatarButItsSmallerThanTheOneFromBeforeForPrettinessPurposes');
 const usernameLabel = document.getElementById('username');
+const usernameTheSecondLabel = document.getElementById('usernameTheSecond');
 const descriptionLabel = document.getElementById('description');
 const attributeLabel = document.getElementById('attribute');
 const theContentThatShowsFirstInsteadOfSecond = document.getElementById('theContentThatShowsFirstInsteadOfSecond');
+const theContentThatShowsLastInsteadOfFirst = document.getElementById('theContentThatShowsLastInsteadOfFirst');
+
 const messageLabel = document.getElementById('message');
 
 let widgetLocked = false;						// Needed to lock animation from overlapping
@@ -63,7 +67,7 @@ const showKofiDonations = GetBooleanParam("showKofiDonations", true);
 const showTipeeeStreamDonations = GetBooleanParam("showTipeeeStreamDonations", true);
 const showFourthwallAlerts = GetBooleanParam("showFourthwallAlerts", true);
 
-const animationSpeed = GetIntParam("showTwitchSharedChat", 8000);
+const animationSpeed = GetIntParam("animationSpeed", 8000);
 
 const furryMode = GetBooleanParam("furryMode", false);
 
@@ -257,9 +261,25 @@ async function TwitchSub(data) {
 	const avatarURL = await GetAvatar(username);
 
 	if (!isPrime)
-		UpdateAlertBox('twitch', avatarURL, `${username}`, `subscribed with Tier ${subTier.charAt(0)}`);
+		UpdateAlertBox(
+			'twitch',
+			avatarURL,
+			`${username}`,
+			`subscribed with Tier ${subTier.charAt(0)}`,
+			'',
+			username,
+			''
+		);
 	else
-		UpdateAlertBox('twitch', avatarURL, `${username}`, `used their Prime Sub`);
+		UpdateAlertBox(
+			'twitch',
+			avatarURL,
+			`${username}`,
+			`used their Prime Sub`,
+			'',
+			username,
+			''
+		);
 }
 
 async function TwitchResub(data) {
@@ -283,6 +303,7 @@ async function TwitchResub(data) {
 			`${username}`,
 			`resubscribed with Tier ${subTier.charAt(0)}`,
 			`${cumulativeMonths} months`,
+			username,
 			message
 		);
 	else
@@ -292,6 +313,7 @@ async function TwitchResub(data) {
 			`${username}`,
 			`used their Prime Sub`,
 			`${cumulativeMonths} months`,
+			username,
 			message
 		);
 }
@@ -319,6 +341,7 @@ async function TwitchGiftSub(data) {
 		`${username}`,
 		`gifted a Tier ${subTier.charAt(0)} subscription`,
 		`to ${recipient}`,
+		username,
 		messageText
 	);
 }
@@ -342,6 +365,7 @@ async function TwitchRewardRedemption(data) {
 		`${username} redeemed`,
 		`${rewardName} ${channelPointIcon} ${cost}`,
 		'',
+		username,
 		userInput
 	);
 }
@@ -363,6 +387,7 @@ async function TwitchRaid(data) {
 		`${username}`,
 		`is raiding with a party of ${viewers}`,
 		'',
+		username,
 		''
 	);
 }
@@ -377,9 +402,10 @@ function YouTubeSuperChat(data) {
 	UpdateAlertBox(
 		'youtube',
 		avatarURL,
-		`🪙 ${data.user.name}`,
+		`${data.user.name}`,
 		`sent a Super Chat (${data.amount})`,
 		'',
+		data.user.name,
 		data.message
 	);
 }
@@ -397,6 +423,7 @@ function YouTubeSuperSticker(data) {
 		`${data.user.name}`,
 		`sent a Super Sticker (${data.amount})`,
 		'',
+		data.user.name,
 		''
 	);
 }
@@ -414,6 +441,7 @@ function YouTubeNewSponsor(data) {
 		`⭐ New ${data.levelName}`,
 		`Welcome ${data.user.name}!`,
 		'',
+		data.user.name,
 		''
 	);
 }
@@ -431,6 +459,7 @@ function YouTubeGiftMembershipReceived(data) {
 		`${data.gifter.name}`,
 		`gifted a membership`,
 		`to ${data.user.name} (${data.tier})!`,
+		data.gifter.name,
 		''
 	);
 }
@@ -451,6 +480,7 @@ async function StreamlabsDonation(data) {
 		`${donater}`,
 		`donated ${currency}${formattedAmount}`,
 		``,
+		donater,
 		message
 	);
 }
@@ -471,6 +501,7 @@ async function StreamElementsTip(data) {
 		`${donater}`,
 		`donated ${currency}${formattedAmount}`,
 		``,
+		donater,
 		message
 	);
 }
@@ -492,6 +523,7 @@ function PatreonPledgeCreated(data) {
 		`${user}`,
 		`joined Patreon ($${amount})`,
 		``,
+		user,
 		``
 	);
 }
@@ -516,6 +548,7 @@ function KofiDonation(data) {
 			`${user}`,
 			`donated $${amount}`,
 			``,
+			user,
 			message
 		);
 	else
@@ -524,6 +557,7 @@ function KofiDonation(data) {
 			`${user}`,
 			`donated ${currency} ${amount}`,
 			``,
+			user,
 			message
 		);
 }
@@ -548,6 +582,7 @@ function KofiSubscription(data) {
 			`${user}`,
 			`subscribed ($${amount})`,
 			``,
+			user,
 			message
 		);
 	else
@@ -556,6 +591,7 @@ function KofiSubscription(data) {
 			`${user}`,
 			`subscribed (${currency} ${amount})`,
 			``,
+			user,
 			message
 		);
 }
@@ -578,6 +614,7 @@ function KofiResubscription(data) {
 		`${user}`,
 		`subscribed (${tier})`,
 		``,
+		user,
 		message
 	);
 }
@@ -610,6 +647,7 @@ function KofiShopOrder(data) {
 		`${user}`,
 		`ordered ${itemTotal} item(s) on Ko-fi `,
 		`${formattedAmount}`,
+		user,
 		message
 	);
 }
@@ -634,6 +672,7 @@ function TipeeeStreamDonation(data) {
 			`${user}`,
 			`donated $${amount}`,
 			``,
+			user,
 			message
 		);
 	else
@@ -643,6 +682,7 @@ function TipeeeStreamDonation(data) {
 			`${user}`,
 			`donated ${currency} ${amount}`,
 			``,
+			user,
 			message
 		);
 }
@@ -684,6 +724,7 @@ function FourthwallOrderPlaced(data) {
 		`${user}`,
 		`ordered ${item}`,
 		attributeText,
+		user,
 		message
 	);
 }
@@ -712,6 +753,7 @@ function FourthwallDonation(data) {
 		`${user}`,
 		`donated ${formattedAmount}`,
 		'',
+		user,
 		message
 	);
 }
@@ -739,6 +781,7 @@ function FourthwallSubscriptionPurchased(data) {
 		`${user}`,
 		`subscribed ${formattedAmount}`,
 		'',
+		user,
 		''
 	);
 }
@@ -779,6 +822,7 @@ function FourthwallGiftPurchase(data) {
 		`${user}`,
 		`gifted ${contents}`,
 		attributesText,
+		user,
 		message
 	);
 }
@@ -797,6 +841,7 @@ function FourthwallGiftDrawStarted(data) {
 		`<span style="font-size: 1.2em">🎁 ${itemName} Giveaway!</span>`,
 		`Type !join in the next ${durationSeconds} seconds for your chance to win!`,
 		'',
+		'',
 		''
 	);
 }
@@ -815,6 +860,7 @@ function FourthwallGiftDrawEnded(data) {
 		`<span style="font-size: 1.2em">🥳 GIVEAWAY ENDED 🥳</span>`,
 		`Congratulations ${GetWinnersList(data.gifts)}!`,
 		'',
+		'',
 		''
 	);
 }
@@ -1096,12 +1142,12 @@ function GetWinnersList(gifts) {
 // 	return furryWords.join('');
 // }
 
-function UpdateAlertBox(platform, avatarURL, usernameText, descriptionText, attributeText, message) {
+function UpdateAlertBox(platform, avatarURL, headerText, descriptionText, attributeText, username, message) {
 	// Check if the widget is in the middle of an animation
 	// If any alerts are requested while the animation is playing, it should be added to the alert queue
 	if (widgetLocked) {
 		console.debug("Animation is progress, added alert to queue");
-		let data = { platform: platform, avatarURL: avatarURL, usernameText: usernameText, descriptionText: descriptionText, attributeText: attributeText, message: message };
+		let data = { platform: platform, avatarURL: avatarURL, headerText: headerText, descriptionText: descriptionText, attributeText: attributeText, message: message };
 		alertQueue.push(data);
 		return;
 	}
@@ -1116,14 +1162,16 @@ function UpdateAlertBox(platform, avatarURL, usernameText, descriptionText, attr
 	// Render avatars
 	if (showAvatar) {
 		avatarElement.src = avatarURL;
+		avatarSmallElement.src = avatarURL;
 	}
 
 	// Set labels
-	usernameLabel.innerHTML = usernameText != null ? usernameText : '';
+	usernameLabel.innerHTML = headerText != null ? headerText : '';
+	usernameTheSecondLabel.innerHTML = username != null ? username : '';
 	descriptionLabel.innerHTML = descriptionText != null ? descriptionText : '';
 	attributeLabel.innerHTML = attributeText != null ? attributeText : '';
 	messageLabel.innerHTML = message != null ? `${message}` : '';
-	messageLabel.style.opacity = 0;
+	theContentThatShowsLastInsteadOfFirst.style.opacity = 0;
 
 	alertBox.style.height = theContentThatShowsFirstInsteadOfSecond.offsetHeight + 40 + "px";
 	alertBox.style.animation = 'slideInFromTop 0.5s ease-out forwards';
@@ -1133,13 +1181,11 @@ function UpdateAlertBox(platform, avatarURL, usernameText, descriptionText, attr
 	// (3) Calculate the height of message label
 	// (4) Set the height of alertBox
 	//		(a) Add in the CSS animation when this is working
-
 	setTimeout(() => {
-
 		alertBox.style.transition = 'all 0.5s ease-in-out';
-		alertBox.style.height = messageLabel.offsetHeight + 40 + "px";
+		alertBox.style.height = theContentThatShowsLastInsteadOfFirst.offsetHeight + 40 + "px";
 		theContentThatShowsFirstInsteadOfSecond.style.opacity = 0;
-		messageLabel.style.opacity = 1;
+		theContentThatShowsLastInsteadOfFirst.style.opacity = 1;
 
 		setTimeout(() => {
 			alertBox.style.animation = 'slideBackUp 0.5s ease-out forwards';
@@ -1147,13 +1193,13 @@ function UpdateAlertBox(platform, avatarURL, usernameText, descriptionText, attr
 			setTimeout(() => {
 				alertBox.style.transition = '';
 				theContentThatShowsFirstInsteadOfSecond.style.opacity = 1;
-				messageLabel.style.opacity = 0;
+				theContentThatShowsLastInsteadOfFirst.style.opacity = 0;
 				alertBox.style.height = '0px';
 				widgetLocked = false;
 				if (alertQueue.length > 0) {
 					console.debug("Pulling next alert from the queue");
 					let data = alertQueue.shift();
-					UpdateAlertBox(data.platform, data.avatarURL, data.usernameText, data.descriptionText, data.attributeText, data.message)
+					UpdateAlertBox(data.platform, data.avatarURL, data.headerText, data.descriptionText, data.attributeText, data.message)
 				}
 			}, 1000);
 		}, messageLabel.innerText.trim() != '' ? animationSpeed : 0);

multistream-alerts/settings/settings.json

@@ -1,13 +1,5 @@
 {
 	"settings": [
-		{
-			"id": "showPlatform",
-			"label": "Show Platform",
-			"description": "",
-			"type": "checkbox",
-			"defaultValue": true,
-			"group": "Appearance"
-		},
 		{
 			"id": "showAvatar",
 			"label": "Show Avatar",
@@ -16,46 +8,6 @@
 			"defaultValue": true,
 			"group": "Appearance"
 		},
-		{
-			"id": "showTimestamps",
-			"label": "Show Timestamps",
-			"description": "",
-			"type": "checkbox",
-			"defaultValue": true,
-			"group": "Appearance"
-		},
-		{
-			"id": "showBadges",
-			"label": "Show Badges",
-			"description": "",
-			"type": "checkbox",
-			"defaultValue": true,
-			"group": "Appearance"
-		},
-		{
-			"id": "showPronouns",
-			"label": "Show Pronouns",
-			"description": "",
-			"type": "checkbox",
-			"defaultValue": true,
-			"group": "Appearance"
-		},
-		{
-			"id": "showUsername",
-			"label": "Show Username",
-			"description": "",
-			"type": "checkbox",
-			"defaultValue": true,
-			"group": "Appearance"
-		},
-		{
-			"id": "showMessage",
-			"label": "Show Message",
-			"description": "Honestly, if you turn this off, you're stupid lmao",
-			"type": "checkbox",
-			"defaultValue": true,
-			"group": "Appearance"
-		},
 		{
 			"id": "font",
 			"label": "Font",
@@ -75,13 +27,19 @@
 			"group": "Appearance"
 		},
 		{
-			"id": "lineSpacing",
+			"id": "showAvatar",
-			"label": "Line Spacing",
+			"label": "Show Avatar",
 			"description": "",
-			"type": "number",
+			"type": "checkbox",
-			"min": 0,
+			"defaultValue": true,
-			"defaultValue": 1.7,
+			"group": "Appearance"
-			"step": ".1",
+		},
+		{
+			"id": "useCustomBackground",
+			"label": "Use Custom Background",
+			"description": "",
+			"type": "checkbox",
+			"defaultValue": true,
 			"group": "Appearance"
 		},
 		{
@@ -106,254 +64,90 @@
 		{
 			"id": "hideAfter",
 			"label": "Hide After",
-			"description": "Messages fade after X seconds (0 to disable)",
+			"description": "Alerts will show for X seconds",
 			"type": "number",
-			"min": 0,
+			"min": 1,
 			"max": 120,
 			"defaultValue": 0,
 			"group": "General"
 		},
 		{
-			"id": "excludeCommands",
+			"id": "showAnimation",
-			"label": "Exclude Commands",
+			"label": "Show Animation",
-			"description": "Hide messages starting with \"!\"",
-			"type": "checkbox",
-			"defaultValue": true,
-			"group": "General"
-		},
-		{
-			"id": "ignoreChatters",
-			"label": "Ignore Chatters",
-			"description": "Ignored chatters will not be shown",
-			"type": "text",
-			"defaultValue": "StreamElements,Streamlabs",
-			"group": "General"
-		},
-		{
-			"id": "scrollDirection",
-			"label": "Scroll Direction",
 			"description": "",
 			"type": "select",
 			"options": [
 				{
-					"value": 1,
+					"value": "fade-in",
-					"label": "Normal"
+					"label": "Fade In"
 				},
 				{
-					"value": 2,
+					"value": "slide-from-top",
-					"label": "Reversed"
+					"label": "Slide From Top"
+				},
+				{
+					"value": "slide-from-bottom",
+					"label": "Slide From Bottom"
+				},
+				{
+					"value": "slide-from-left",
+					"label": "Slide From Left"
+				},
+				{
+					"value": "slide-from-right",
+					"label": "Slide From Right"
 				}
 			],
-			"defaultValue": 1,
+			"defaultValue": "fade-in",
 			"group": "General"
 		},
 		{
-			"id": "inlineChat",
+			"id": "hideAnimation",
-			"label": "In-line Chat",
+			"label": "Hide Animation",
-			"description": "Remove the line space after the username",
-			"type": "checkbox",
-			"defaultValue": false,
-			"group": "General"
-		},
-		{
-			"id": "imageEmbedPermissionLevel",
-			"label": "Embed Images",
-			"description": "Automatically embed images for these users",
-			"type": "select",
-			"options": [
-				{
-					"value": 40,
-					"label": "Broadcaster"
-				},
-				{
-					"value": 30,
-					"label": "Mods & Broadcaster"
-				},
-				{
-					"value": 20,
-					"label": "VIPs, Mods & Broadcaster"
-				},
-				{
-					"value": 15,
-					"label": "Subs, VIPs, Mods & Broadcaster"
-				},
-				{
-					"value": 10,
-					"label": "Everyone"
-				},
-				{
-					"value": 69420,
-					"label": "Nobody"
-				}
-			],
-			"defaultValue": 20,
-			"group": "General"
-		},
-		{
-			"id": "showTwitchMessages",
-			"label": "Chat Messages",
-			"description": "",
-			"type": "checkbox",
-			"defaultValue": true,
-			"group": "Which Twitch messages do you want to see?"
-		},
-		{
-			"id": "showTwitchAnnouncements",
-			"label": "Announcements",
-			"description": "",
-			"type": "checkbox",
-			"defaultValue": true,
-			"group": "Which Twitch messages do you want to see?"
-		},
-		{
-			"id": "showTwitchSubs",
-			"label": "New Subscribers",
-			"description": "",
-			"type": "checkbox",
-			"defaultValue": true,
-			"group": "Which Twitch messages do you want to see?"
-		},
-		{
-			"id": "showTwitchChannelPointRedemptions",
-			"label": "Channel Point Redemptions",
-			"description": "",
-			"type": "checkbox",
-			"defaultValue": true,
-			"group": "Which Twitch messages do you want to see?"
-		},
-		{
-			"id": "showTwitchRaids",
-			"label": "Raids",
-			"description": "",
-			"type": "checkbox",
-			"defaultValue": true,
-			"group": "Which Twitch messages do you want to see?"
-		},
-		{
-			"id": "showTwitchSharedChat",
-			"label": "Shared Chat Messages",
 			"description": "",
 			"type": "select",
 			"options": [
 				{
-					"value":  2,
+					"value": "fade-out",
-					"label": "Show & Highlight"
+					"label": "Fade Out"
 				},
 				{
-					"value": 1,
+					"value": "slide-top",
-					"label": "Show but do not highlight"
+					"label": "Slide Top"
 				},
 				{
-					"value": 0,
+					"value": "slide-bottom",
-					"label": "Do not show"
+					"label": "Slide Bottom"
+				},
+				{
+					"value": "slide-left",
+					"label": "Slide Left"
+				},
+				{
+					"value": "slide-right",
+					"label": "Slide Right"
 				}
 			],
-			"defaultValue": 2,
+			"defaultValue": "fade-in",
-			"group": "Which Twitch messages do you want to see?"
+			"group": "General"
 		},
 		{
-			"id": "showYouTubeMessages",
+			"id": "alignment",
-			"label": "Chat Messages",
+			"label": "Alignment",
 			"description": "",
-			"type": "checkbox",
+			"type": "select",
-			"defaultValue": true,
+			"options": [
-			"group": "Which YouTube messages do you want to see?"
+				{
+					"value": "align-to-bottom",
+					"label": "Align To Bottom"
 				},
 				{
-			"id": "showYouTubeSuperChats",
+					"value": "align-to-top",
-			"label": "Super Chats",
+					"label": "Align To Top"
-			"description": "",
+				}
-			"type": "checkbox",
+			],
-			"defaultValue": true,
+			"defaultValue": "align-to-bottom",
-			"group": "Which YouTube messages do you want to see?"
+			"group": "General"
-		},
-		{
-			"id": "showYouTubeSuperStickers",
-			"label": "Super Stickers",
-			"description": "",
-			"type": "checkbox",
-			"defaultValue": true,
-			"group": "Which YouTube messages do you want to see?"
-		},
-		{
-			"id": "showYouTubeMemberships",
-			"label": "Memberships",
-			"description": "",
-			"type": "checkbox",
-			"defaultValue": true,
-			"group": "Which YouTube messages do you want to see?"
-		},
-		{
-			"id": "showStreamlabsDonations",
-			"label": "Streamlabs Tips",
-			"description": "<a href=\"https://docs.streamer.bot/guide/integrations/streamlabs\" target=\"_blank\">Click to connect</a>",
-			"type": "checkbox",
-			"defaultValue": true,
-			"group": "Which donation messages do you want to see?"
-		},
-		{
-			"id": "showStreamElementsTips",
-			"label": "StreamElements Tips",
-			"description": "<a href=\"https://docs.streamer.bot/guide/integrations/streamelements\" target=\"_blank\">Click to connect</a>",
-			"type": "checkbox",
-			"defaultValue": true,
-			"group": "Which donation messages do you want to see?"
-		},
-		{
-			"id": "showPatreonMemberships",
-			"label": "Patreon Memberships",
-			"description": "<a href=\"https://docs.streamer.bot/guide/integrations/patreon\" target=\"_blank\">Click to connect</a>",
-			"type": "checkbox",
-			"defaultValue": true,
-			"group": "Which donation messages do you want to see?"
-		},
-		{
-			"id": "showKofiDonations",
-			"label": "Ko-fi Donations",
-			"description": "<a href=\"https://docs.streamer.bot/guide/integrations/ko-fi\" target=\"_blank\">Click to connect</a>",
-			"type": "checkbox",
-			"defaultValue": true,
-			"group": "Which donation messages do you want to see?"
-		},
-		{
-			"id": "showTipeeeStreamDonations",
-			"label": "TipeeeStream Donations",
-			"description": "<a href=\"https://docs.streamer.bot/guide/integrations/tipeee-stream\" target=\"_blank\">Click to connect</a>",
-			"type": "checkbox",
-			"defaultValue": true,
-			"group": "Which donation messages do you want to see?"
-		},
-		{
-			"id": "showFourthwallAlerts",
-			"label": "Fourthwall Alerts",
-			"description": "<a href=\"https://docs.streamer.bot/guide/integrations/fourthwall\" target=\"_blank\">Click to connect</a>",
-			"type": "checkbox",
-			"defaultValue": true,
-			"group": "Which donation messages do you want to see?"
-		},
-		{
-			"id": "furryMode",
-			"label": "Furry Mode",
-			"description": "Meow",
-			"type": "checkbox",
-			"defaultValue": false,
-			"group": "Very Important Stuff"
-		},
-		{
-			"id": "address",
-			"label": "Address",
-			"description": "Streamer.bot Websocket Server Address",
-			"type": "text",
-			"defaultValue": "127.0.0.1",
-			"group": "Advanced"
-		},
-		{
-			"id": "port",
-			"label": "Port",
-			"description": "Streamer.bot Websocket Server Port",
-			"type": "text",
-			"defaultValue": "8080",
-			"group": "Advanced"
 		}
 	]
 }

multistream-alerts/style.css

@@ -40,6 +40,7 @@ html {
 	display: block;
 	position: absolute;
 	width: 100%;
+	height: 100%;
 	padding: calc(2 * var(--margin));
 	box-sizing: border-box;
 }
@@ -84,6 +85,17 @@ html {
 	transition: inherit;
 }
 
+#theContentThatShowsLastInsteadOfFirst {
+	position: absolute;
+	display: block;
+	align-items: center;
+	z-index: 0;
+	position: absolute;
+	left: var(--margin);
+	top: var(--margin);
+	transition: inherit;
+}
+
 #avatar {
 	display: inline;
 	max-width: 100%;
@@ -93,6 +105,15 @@ html {
 	margin-right: 0.75em;
 }
 
+#avatarButItsSmallerThanTheOneFromBeforeForPrettinessPurposes {
+	display: inline;
+	max-width: 100%;
+	height: 2em;
+	filter: drop-shadow(0px 0px 7px rgba(0, 0, 0, 0.5));
+	object-fit: cover;
+	margin-right: 0.75em;
+}
+
 #contents {
 	flex-grow: 1;
 }
@@ -102,6 +123,11 @@ html {
 	font-weight: 600;
 }
 
+#usernameTheSecond {
+	font-size: 1em;
+	font-weight: 600;
+}
+
 #description {
 	font-size: 1em;
 	font-weight: 400;
@@ -121,7 +147,6 @@ html {
 }
 
 #message {
-	position: absolute;
 	width: calc(100% - 2 * var(--margin));
 	z-index: 0;
 	left: var(--margin);
@@ -154,6 +179,78 @@ html {
 	}
 }
 
+@keyframes slideInFromBottom {
+	0% {
+		transform: translateY(100%);
+		opacity: 0;
+	}
+
+	100% {
+		transform: translateY(0);
+		opacity: 1;
+	}
+}
+
+@keyframes slideBackDown {
+	0% {
+		transform: translateY(0);
+		opacity: 1;
+	}
+
+	100% {
+		transform: translateY(100%);
+		opacity: 0;
+	}
+}
+
+@keyframes slideInFromLeft {
+	0% {
+		transform: translateX(-100%);
+		opacity: 0;
+	}
+
+	100% {
+		transform: translateX(0);
+		opacity: 1;
+	}
+}
+
+@keyframes slideBackLeft {
+	0% {
+		transform: translateX(0);
+		opacity: 1;
+	}
+
+	100% {
+		transform: translateX(-100%);
+		opacity: 0;
+	}
+}
+
+@keyframes slideInFromRight {
+	0% {
+		transform: translateX(100%);
+		opacity: 0;
+	}
+
+	100% {
+		transform: translateX(0);
+		opacity: 1;
+	}
+}
+
+@keyframes slideBackRight {
+	0% {
+		transform: translateX(0);
+		opacity: 1;
+	}
+
+	100% {
+		transform: translateX(100%);
+		opacity: 0;
+	}
+}
+
 /*****************/
 /** CARD COLORS **/
 /*****************/