add dummy message

friend_list/friendlist.js

@@ -130,4 +130,20 @@ image.onload = () => {
   requestAnimationFrame(animate);
 };
 
-animateLoadingCanvas();
+animateLoadingCanvas();
+
+//todo: actually make it useful..
+function friendsbox() {
+    const infoBox = document.createElement('div');
+    infoBox.className = 'splat-info-box';
+    
+    infoBox.innerHTML = `
+        <p>In Splatoon, you can join online matches that your friends are participating in. Here will show your friends that are online. Register your friends on Wii U and play Splatoon!</p>
+    `;
+    const contentArea = document.querySelector('.content');
+    if (contentArea) {
+        contentArea.appendChild(infoBox);
+    }
+}
+
+friendsbox();

friend_list/styles.css

@@ -166,4 +166,37 @@ body {
     font-family: "Regular", sans-serif;
     font-size: 24px;
     line-height: 1.3;
+}
+
+.main-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+}
+
+.content {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.splat-info-box {
+    background-color: rgba(0, 0, 0, 0.6);
+    border-radius: 10px;
+    padding: 25px 40px;
+    max-width: 700px;
+    margin: 40px auto; 
+    z-index: 5;
+    box-sizing: border-box;
+}
+
+.splat-info-box p {
+    color: #ffffff;
+    font-family: "Regular", sans-serif;
+    font-size: 20px;
+    line-height: 1.6;
+    margin: 0;
+    text-align: left; 
 }