Progress update

index.html

@@ -5,7 +5,6 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="/favicon.png">
-    <script src="https://kit.fontawesome.com/6ac6394f85.js" crossorigin="anonymous"></script>
     <title>PhaseWeb 3</title>
 
   </head>

package-lock.json

@@ -1,18 +1,19 @@
 {
-  "name": "phaseweb",
-  "version": "3.0.0",
+  "name": "phaseweb3",
+  "version": "1.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "phaseweb",
-      "version": "3.0.0",
+      "name": "phaseweb3",
+      "version": "1.0.0",
       "dependencies": {
         "@mdi/js": "^7.0.96",
         "@rushstack/eslint-patch": "^1.1.4",
         "axios": "^0.27.0",
         "chart.js": "^3.6.0",
         "numeral": "^2.0.6",
+        "particles.js": "^2.0.0",
         "pinia": "^2.0.13",
         "vue": "^3.0.0",
         "vue-router": "^4.0.0"
@@ -2112,6 +2113,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/particles.js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/particles.js/-/particles.js-2.0.0.tgz",
+      "integrity": "sha512-8e0JIqkRbMMPlFBnF9f+92hX1s07jdkd3tqB8uHE9L+cwGGjIYjQM7QLgt0FQ5MZp6SFFYYDm/Y48pqK3ZvJOQ=="
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -4430,6 +4436,11 @@
         "callsites": "^3.0.0"
       }
     },
+    "particles.js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/particles.js/-/particles.js-2.0.0.tgz",
+      "integrity": "sha512-8e0JIqkRbMMPlFBnF9f+92hX1s07jdkd3tqB8uHE9L+cwGGjIYjQM7QLgt0FQ5MZp6SFFYYDm/Y48pqK3ZvJOQ=="
+    },
     "path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",

package.json

@@ -13,6 +13,7 @@
     "axios": "^0.27.0",
     "chart.js": "^3.6.0",
     "numeral": "^2.0.6",
+    "particles.js": "^2.0.0",
     "pinia": "^2.0.13",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0"

public/data-sources/particles.json

@@ -0,0 +1,110 @@
+{
+  "particles": {
+    "number": {
+      "value": 14,
+      "density": {
+        "enable": true,
+        "value_area": 800
+      }
+    },
+    "color": {
+      "value": "#4d5022"
+    },
+    "shape": {
+      "type": "circle",
+      "stroke": {
+        "width": 0,
+        "color": "#000"
+      },
+      "polygon": {
+        "nb_sides": 6
+      },
+      "image": {
+        "src": "img/github.svg",
+        "width": 100,
+        "height": 100
+      }
+    },
+    "opacity": {
+      "value": 0.3,
+      "random": true,
+      "anim": {
+        "enable": false,
+        "speed": 1,
+        "opacity_min": 0.1,
+        "sync": false
+      }
+    },
+    "size": {
+      "value": 142.0465754938091,
+      "random": true,
+      "anim": {
+        "enable": true,
+        "speed": 10,
+        "size_min": 40,
+        "sync": false
+      }
+    },
+    "line_linked": {
+      "enable": false,
+      "distance": 200,
+      "color": "#ffffff",
+      "opacity": 1,
+      "width": 2
+    },
+    "move": {
+      "enable": true,
+      "speed": 8,
+      "direction": "none",
+      "random": false,
+      "straight": false,
+      "out_mode": "out",
+      "bounce": false,
+      "attract": {
+        "enable": false,
+        "rotateX": 600,
+        "rotateY": 1200
+      }
+    }
+  },
+  "interactivity": {
+    "detect_on": "canvas",
+    "events": {
+      "onhover": {
+        "enable": false,
+        "mode": "repulse"
+      },
+      "onclick": {
+        "enable": false,
+        "mode": "remove"
+      },
+      "resize": true
+    },
+    "modes": {
+      "grab": {
+        "distance": 400,
+        "line_linked": {
+          "opacity": 1
+        }
+      },
+      "bubble": {
+        "distance": 400,
+        "size": 40,
+        "duration": 2,
+        "opacity": 8,
+        "speed": 3
+      },
+      "repulse": {
+        "distance": 200,
+        "duration": 0.4
+      },
+      "push": {
+        "particles_nb": 4
+      },
+      "remove": {
+        "particles_nb": 2
+      }
+    }
+  },
+  "retina_detect": true
+}

src/components/BaseButton.vue

@@ -41,14 +41,20 @@ const props = defineProps({
     type: String,
     default: null,
   },
-  small: Boolean,
+  small: {
+    type: Boolean,
+    default: true,
+  },
   outline: {
     type: Boolean,
     default: true,
   },
   active: Boolean,
   disabled: Boolean,
-  roundedFull: Boolean,
+  roundedFull: {
+    type: Boolean,
+    default: true,
+  },
 });
 
 const is = computed(() => {

src/components/Cards/CardBoxNews.vue

@@ -1,5 +1,6 @@
 <script setup>
 import CardBox from "@/components/CardBox.vue";
+import { useRouter } from "vue-router";
 
 const props = defineProps({
   title: {
@@ -18,22 +19,41 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  id: {
+    type: Number,
+    required: true,
+  },
 });
+
+const router = useRouter();
+
+function getCardStyle(cover) {
+  if (cover !== null) {
+    return `
+    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .6)),
+    url('${props.cover}');
+    background-size: cover;
+    background-repeat: no-repeat;
+    `;
+  }
+}
+
+function openNewsView() {
+  router.push(`/news/${props.id}`); // Navigate to the dedicated news view with the news title as the route parameter
+}
 </script>
 
 <template>
-  <CardBox class="mb-2" is-hoverable has-table>
-    <img :src="props.cover" class="w-auto rounded-t-xl" />
-    <div class="p-3">
-      <h2 class="text-xl pb-2">{{ props.title }}</h2>
-
-      <hr class="pb-2" />
-      <p class="pb-2">{{ props.content }}</p>
-
-      <footer>
-        <hr class="pb-2" />
-        <p>{{ props.date }}</p>
-      </footer>
-    </div>
-  </CardBox>
+  <button class="text-left" @click="openNewsView">
+    <CardBox class="mb-2" :style="getCardStyle(props.cover)" has-table>
+      <div
+        class="outline outline-green-900/50 hover:outline hover:outline-blue-500/50 hover:bg-slate-500 hover:dark:bg-slate-950/90 bg-white dark:bg-slate-900/90 rounded-xl p-4 h-full w-full transition-all duration-50"
+      >
+        <p class="text-sm font-bold">Unread</p>
+        <p class="text-sm">{{ props.date }}</p>
+        <hr class="pb-1" />
+        <h2 class="text-xl pb-2">{{ props.title }}</h2>
+      </div>
+    </CardBox>
+  </button>
 </template>

src/components/SectionFullScreen.vue

@@ -36,6 +36,6 @@ const colorClass = computed(() => {
     class="flex min-h-screen items-center justify-center"
     :class="colorClass"
   >
-    <slot card-class="w-11/12 md:w-7/12 lg:w-6/12 xl:w-4/12 shadow-2xl" />
+    <slot card-class="shadow-2xl" />
   </div>
 </template>

src/components/Tables/TableRivalsFull.vue

@@ -61,7 +61,7 @@ function getCardStyle(game) {
       <tr v-for="client in itemsPaginated" :key="client.id">
         <td
           class="border-b-0 lg:w-6 before:hidden"
-          :style="getCardStyle('ddr')"
+          :style="getCardStyle('pride')"
         >
           <UserAvatar username="" class="w-24 h-24 mx-auto lg:w-6 lg:h-6" />
         </td>

src/components/UserAvatar.vue

@@ -28,7 +28,7 @@ const username = computed(() => props.username);
         class="w-full h-auto bg-gray-100 dark:bg-slate-800 rounded-full overflow-hidden"
       />
       <img
-        src="/assets/border/test.png"
+        src="/assets/border/trans.png"
         alt="border"
         class="absolute inset-0 w-full h-full overflow-hidden"
         style="object-fit: fill; transform: scale(1.02)"

src/components/UserCard.vue

@@ -11,6 +11,14 @@ import UserAvatarCurrentUser from "@/components/UserAvatarCurrentUser.vue";
 import CardBox from "@/components/CardBox.vue";
 import PillTag from "@/components/PillTag.vue";
 
+defineProps({
+  useSmall: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+});
+
 import { GetRandomMessage } from "@/constants";
 
 const mainStore = useMainStore();
@@ -29,7 +37,7 @@ function getCardStyle(game) {
 </script>
 
 <template>
-  <CardBox :style="getCardStyle('sdvx')">
+  <CardBox :style="getCardStyle('iidx')">
     <BaseLevel
       type="justify-around lg:justify-center md:space-x-4 lg:space-x-0"
       class="bg-white dark:bg-slate-900/90 rounded-2xl p-3"
@@ -37,10 +45,13 @@ function getCardStyle(game) {
       <UserAvatarCurrentUser class="w-28 md:w-32 lg:w-44 lg:mx-12" />
       <div class="space-y-3 text-center md:text-left lg:mx-12">
         <div class="space-y-2 md:space-y-0">
-          <h1 class="text-2xl md:text-xl lg:text-2xl">
+          <h1 v-if="!useSmall" class="text-2xl md:text-xl lg:text-2xl">
             {{ greeting.header[0] }}
             <b>{{ mainStore.userName }} </b>{{ greeting.header[1] }}
           </h1>
+          <h1 v-if="useSmall" class="text-3xl md:text-4xl">
+            <b>{{ mainStore.userName }}</b>
+          </h1>
         </div>
         <div
           class="md:grid md:grid-flow-col md:auto-cols-max md:grid-rows-2 flex flex-wrap gap-4 md:place-content-start place-content-center"
@@ -51,7 +62,7 @@ function getCardStyle(game) {
           <PillTag label="Active Dev" color="info" :icon="mdiCodeBraces" />
         </div>
       </div>
-      <div>
+      <div v-if="!useSmall">
         <p class="text-xl md:text-lg lg:text-2lg">{{ greeting.comment }}</p>
         <p class="text-xs italic">Greeting by: {{ greeting.author }}</p>
       </div>

src/constants/index.js

@@ -263,9 +263,21 @@ export class VersionConstants {
 }
 
 export function GetRandomMessage() {
-  const key = Math.floor(Math.random() * Greetings.length);
-  const selected = Greetings[key];
-  selected.header = selected.header.split("<username>");
+  const greetings = Greetings; // Assuming Greetings is a promise
+
+  const key = Math.floor(Math.random() * greetings.length);
+  const selected = greetings[key];
+
+  if (typeof selected.header !== "string") {
+    selected.comment = "Show me your moves.";
+    selected.author = "PhaseII server";
+  }
+
+  selected.header =
+    typeof selected.header === "string"
+      ? selected.header.split("<username>")
+      : ["Heyo, ", "!"];
+
   return selected;
 }
 

src/constants/news.json

@@ -0,0 +1,16 @@
+[
+    {
+      "id": 0,
+      "title": "GITADORA HIGH-VOLTAGE Now Supported!",
+      "content": "Gitadora High-Voltage is now FULLY supported!\nI finally bit the bullet, sat down for 14 hours straight, and completely rewrote my Gitadora backend.\nFor the time being this has broken all Gitadora ORIGINAL profiles, but these will be migrated over soon!\nExpect Nex+age and older to come soon. Enjoy!",
+      "cover": "https://i.imgur.com/WPRlNo6.png",
+      "timestamp": "2022.11.20 5:48:10 PM"
+    },
+    {
+      "id": 1,
+      "title": "FutureTomTom Now Supported!",
+      "content": "This weird drumming game now has support on PhaseII! Ver.1 and Ver.2 are both fully working, though there aren't any events set up currently.",
+      "cover": "https://i.imgur.com/UWtUAd5.png",
+      "timestamp": "2022.11.20 5:48:10 PM"
+    }
+]

src/menuNavBar.js

@@ -1,7 +1,6 @@
 import {
   mdiCogs,
   mdiAccount,
-  mdiEmail,
   mdiLogout,
   mdiServerNetwork,
   mdiBrushOutline,
@@ -13,20 +12,18 @@ export default [
     menu: [
       {
         icon: mdiAccount,
-        label: "Profile",
+        label: "Settings",
         to: "/profile",
       },
       {
         icon: mdiBrushOutline,
         label: "Customizations",
+        to: "/profile/customize",
       },
       {
         icon: mdiServerNetwork,
         label: "Integrations",
-      },
-      {
-        icon: mdiEmail,
-        label: "Notifications",
+        to: "/profile/integrate",
       },
     ],
   },

src/router/index.js

@@ -18,13 +18,29 @@ const routes = [
     name: "news",
     component: () => import("@/views/NewsView.vue"),
   },
+  {
+    meta: {
+      title: "News Post",
+    },
+    path: "/news/:id",
+    name: "news_post",
+    component: () => import("@/views/PostView.vue"),
+  },
   {
     meta: {
       title: "Login",
     },
-    path: "/login",
+    path: "/auth/login",
     name: "login",
-    component: () => import("@/views/LoginView.vue"),
+    component: () => import("@/views/Auth/LoginView.vue"),
+  },
+  {
+    meta: {
+      title: "Register",
+    },
+    path: "/auth/register",
+    name: "register",
+    component: () => import("@/views/Auth/RegisterView.vue"),
   },
   {
     meta: {
@@ -32,13 +48,37 @@ const routes = [
     },
     path: "/profile",
     name: "profile",
-    component: () => import("@/views/ProfileView.vue"),
+    component: () => import("@/views/Profile/ProfileView.vue"),
+  },
+  {
+    meta: {
+      title: "Customizations",
+    },
+    path: "/profile/customize",
+    name: "profile_customizations",
+    component: () => import("@/views/Profile/CustomizeView.vue"),
+  },
+  {
+    meta: {
+      title: "Integrations",
+    },
+    path: "/profile/integrate",
+    name: "profile_integrations",
+    component: () => import("@/views/Profile/IntegrationView.vue"),
+  },
+  {
+    meta: {
+      title: "View Profile",
+    },
+    path: "/profiles/:id",
+    name: "profile_viewer",
+    component: () => import("@/views/Profile/PublicView.vue"),
   },
   {
     meta: {
       title: "Test Arcade",
     },
-    path: "/arcade/0",
+    path: "/arcade/:id",
     name: "arcade",
     component: () => import("@/views/ArcadeView.vue"),
   },

src/views/Auth/LoginView.vue

@@ -2,13 +2,11 @@
 import { reactive } from "vue";
 import { useRouter } from "vue-router";
 import { mdiAccount, mdiAsterisk } from "@mdi/js";
-import SectionFullScreen from "@/components/SectionFullScreen.vue";
 import CardBox from "@/components/CardBox.vue";
 import FormCheckRadio from "@/components/FormCheckRadio.vue";
 import FormField from "@/components/FormField.vue";
 import FormControl from "@/components/FormControl.vue";
 import BaseButton from "@/components/BaseButton.vue";
-import BaseButtons from "@/components/BaseButtons.vue";
 import LayoutGuest from "@/layouts/LayoutGuest.vue";
 
 const form = reactive({
@@ -20,47 +18,68 @@ const form = reactive({
 const router = useRouter();
 
 const submit = () => {
-  router.push("/dashboard");
+  router.push("/");
 };
 </script>
 
 <template>
   <LayoutGuest>
-    <SectionFullScreen v-slot="{ cardClass }" bg="purplePink">
-      <CardBox :class="cardClass" is-form @submit.prevent="submit">
-        <FormField label="Login" help="Please enter your login">
-          <FormControl
-            v-model="form.login"
-            :icon="mdiAccount"
-            name="login"
-            autocomplete="username"
-          />
-        </FormField>
+    <div class="flex min-h-screen items-center justify-center">
+      <CardBox class="w-auto" has-table>
+        <div
+          class="p-4 flex flex-col md:flex-row w-full space-y-2 md:space-y-0 md:space-x-4"
+        >
+          <div class="flex flex-col items-center text-wrap h-full">
+            <img src="/favicon.png" class="rounded-full shadow-lg mb-2" />
+            <h1 class="text-xl"><samp>PhaseII</samp></h1>
+            <p class="text-sm text-white/75">Growing since 2021</p>
+            <hr class="border-t border-1 my-1 w-full" />
+            <p class="text-lg relative bottom-0">Please log in.</p>
+          </div>
+          <div class="md:border-r md:border-1"></div>
+          <div>
+            <FormField label="Username">
+              <FormControl
+                v-model="form.login"
+                :icon="mdiAccount"
+                name="login"
+                autocomplete="username"
+              />
+            </FormField>
 
-        <FormField label="Password" help="Please enter your password">
-          <FormControl
-            v-model="form.pass"
-            :icon="mdiAsterisk"
-            type="password"
-            name="password"
-            autocomplete="current-password"
-          />
-        </FormField>
+            <FormField label="Password">
+              <FormControl
+                v-model="form.pass"
+                :icon="mdiAsterisk"
+                type="password"
+                name="password"
+                autocomplete="current-password"
+              />
+            </FormField>
 
-        <FormCheckRadio
-          v-model="form.remember"
-          name="remember"
-          label="Remember"
-          :input-value="true"
-        />
+            <FormCheckRadio
+              v-model="form.remember"
+              name="remember"
+              label="Remember Me"
+              :input-value="true"
+            />
 
-        <template #footer>
-          <BaseButtons>
-            <BaseButton type="submit" color="info" label="Login" />
-            <BaseButton to="/dashboard" color="info" outline label="Back" />
-          </BaseButtons>
-        </template>
+            <div class="flex flex-col gap-2 mt-4">
+              <BaseButton label="Log In" color="success" @click="submit()" />
+            </div>
+
+            <hr class="border-t border-1 my-4 w-full" />
+
+            <div class="flex flex-col gap-2 my-4">
+              <h2>New Here?</h2>
+              <BaseButton label="Register" color="info" />
+
+              <h2>Forgot Password?</h2>
+              <BaseButton label="Password Reset" color="warning" />
+            </div>
+          </div>
+        </div>
       </CardBox>
-    </SectionFullScreen>
+    </div>
   </LayoutGuest>
 </template>

src/views/HomeView.vue

@@ -82,19 +82,19 @@ onMounted(() => {
         class="grid grid-flow-row auto-rows-auto grid-cols-1 md:grid-cols-2 gap-5 mb-5"
       >
         <CardBoxGameStat
-          :game="GameConstants.IIDX"
+          :game="GameConstants.DDR"
           value="#10 out of 132"
           profile-name="DJ. TRMAZI"
           type="ranking"
         />
         <CardBoxGameStat
-          :game="GameConstants.DRUMMANIA"
+          :game="GameConstants.POPN_MUSIC"
           :value="300"
           profile-name="TRMAZI"
           type="plays"
         />
         <CardBoxGameStat
-          :game="GameConstants.DDRCLASS"
+          :game="GameConstants.JUBEAT"
           :value="392"
           profile-name="TRMAZI"
           type="scores"

src/views/NewsView.vue

@@ -5,25 +5,9 @@ import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
 import SectionTitleLine from "@/components/SectionTitleLine.vue";
 import CardBoxComponentEmpty from "@/components/CardBoxComponentEmpty.vue";
 import CardBoxNews from "@/components/Cards/CardBoxNews.vue";
+import testNews from "@/constants/news.json";
 
-const testNews = [
-  {
-    id: 0,
-    title: "GITADORA HIGH-VOLTAGE Now Supported!",
-    content:
-      "I finally bit the bullet, sat down for 14 hours straight, and completely rewrote my Gitadora backend. Gitadora High-Voltage is now FULLY supported! For the time being this has broken all Gitadora ORIGINAL profiles, but these will be migrated over soon! Expect Nex+age and older to come soon. Enjoy!",
-    cover: "https://i.imgur.com/WPRlNo6.png",
-    timestamp: "2022.11.20 5:48:10 PM",
-  },
-  {
-    id: 1,
-    title: "FutureTomTom Now Supported!",
-    content:
-      "This weird drumming game now has support on PhaseII! Ver.1 and Ver.2 are both fully working, though there aren't any events set up currently.",
-    cover: "https://i.imgur.com/UWtUAd5.png",
-    timestamp: "2022.11.20 5:48:10 PM",
-  },
-];
+const newsData = testNews;
 </script>
 
 <template>
@@ -31,17 +15,19 @@ const testNews = [
     <SectionMain>
       <SectionTitleLine :icon="mdiNewspaperVariant" title="Network News" main />
 
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      <div class="grid gap-4 grid-cols-1 w-full">
         <CardBoxNews
-          v-for="news of testNews"
+          v-for="news of newsData"
+          :id="news.id"
           :key="news.id"
           :title="news.title"
           :content="news.content"
           :date="news.timestamp"
           :cover="news.cover"
+          class="w-full h-full"
         />
       </div>
-      <CardBoxComponentEmpty v-if="!testNews || !testNews.length" />
+      <CardBoxComponentEmpty v-if="!newsData || !newsData.length" />
     </SectionMain>
   </LayoutAuthenticated>
 </template>

src/views/PostView.vue

@@ -0,0 +1,67 @@
+<script setup>
+import { useRoute, useRouter } from "vue-router";
+import { mdiBackburger } from "@mdi/js";
+import SectionMain from "@/components/SectionMain.vue";
+import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
+import CardBox from "@/components/CardBox.vue";
+import BaseButtons from "@/components/BaseButtons.vue";
+import BaseButton from "@/components/BaseButton.vue";
+import testNews from "@/constants/news.json";
+const $route = useRoute();
+const $router = useRouter();
+const newsID = parseInt($route.params.id);
+
+const NewsData = testNews;
+const thisNews = NewsData.find((x) => x.id === newsID);
+
+const newsBody = thisNews.content.split("\n");
+
+function goBack() {
+  $router.push("/news");
+}
+</script>
+
+<template>
+  <LayoutAuthenticated>
+    <SectionMain>
+      <transition>
+        <CardBox has-table>
+          <div class="flex flex-col items-center">
+            <img
+              :src="thisNews.cover"
+              class="rounded-t-2xl md:rounded-2xl md:w-1/2 md:m-4"
+            />
+          </div>
+          <div
+            v-if="thisNews"
+            :key="thisNews.id"
+            class="flex flex-col items-center p-4"
+          >
+            <div class="text-left md:text-center">
+              <h1 class="text-2xl">{{ thisNews.title }}</h1>
+              <hr class="pb-1 my-2" />
+              <div v-for="body of newsBody" :key="body">
+                <p>{{ body }}</p>
+                <br />
+              </div>
+            </div>
+          </div>
+          <div v-else>
+            <h1 class="text-2xl">News not found...</h1>
+          </div>
+          <template #footer>
+            <BaseButtons>
+              <BaseButton
+                label="News"
+                color="info"
+                :icon="mdiBackburger"
+                icon-size="20"
+                @click="goBack"
+              />
+            </BaseButtons>
+          </template>
+        </CardBox>
+      </transition>
+    </SectionMain>
+  </LayoutAuthenticated>
+</template>

src/views/Profile/CustomizeView.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { mdiAccountTieHat } from "@mdi/js";
+import SectionMain from "@/components/SectionMain.vue";
+import CardBox from "@/components/CardBox.vue";
+import BaseButton from "@/components/BaseButton.vue";
+import UserCard from "@/components/UserCard.vue";
+import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
+import SectionTitleLine from "@/components/SectionTitleLine.vue";
+import FormControl from "@/components/FormControl.vue";
+</script>
+
+<template>
+  <LayoutAuthenticated>
+    <SectionMain>
+      <UserCard class="mb-6" use-small />
+      <SectionTitleLine
+        :icon="mdiAccountTieHat"
+        title="Profile Customizations"
+        main
+      />
+
+      <div>
+        <CardBox>
+          <div class="grid grid-cols-3 gap-6">
+            <div>
+              <h2 class="text-lg mb-2">Avatar Source</h2>
+              <FormControl
+                :options="['Discord', 'Gravatar', 'Kamaitachi']"
+                model-value="Gravatar"
+                name="border"
+              />
+            </div>
+            <div>
+              <h2 class="text-lg mb-2">Avatar Border</h2>
+              <FormControl
+                :options="['Trans Flag', 'Pride Flag']"
+                model-value="Trans Flag"
+                name="border"
+              />
+            </div>
+            <div>
+              <h2 class="text-lg mb-2">Profile Background</h2>
+              <FormControl
+                :options="['Trans Flag', 'Pride Flag']"
+                model-value="Trans Flag"
+                name="border"
+              />
+            </div>
+          </div>
+
+          <template #footer>
+            <div class="space-x-2">
+              <BaseButton type="submit" color="success" label="Save" />
+              <BaseButton type="submit" color="danger" label="Revert" />
+            </div>
+          </template>
+        </CardBox>
+      </div>
+    </SectionMain>
+  </LayoutAuthenticated>
+</template>

src/views/Profile/IntegrationView.vue

@@ -0,0 +1,90 @@
+<script setup>
+import {
+  mdiServerNetwork,
+  mdiMessage,
+  mdiScoreboard,
+  mdiTournament,
+} from "@mdi/js";
+import SectionMain from "@/components/SectionMain.vue";
+import CardBox from "@/components/CardBox.vue";
+import BaseButton from "@/components/BaseButton.vue";
+import UserCard from "@/components/UserCard.vue";
+import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
+import SectionTitleLine from "@/components/SectionTitleLine.vue";
+import PillTag from "@/components/PillTag.vue";
+</script>
+
+<template>
+  <LayoutAuthenticated>
+    <SectionMain>
+      <UserCard class="mb-6" use-small />
+      <SectionTitleLine
+        :icon="mdiServerNetwork"
+        title="Server Integrations"
+        main
+      />
+
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <CardBox>
+          <PillTag
+            color="info"
+            :icon="mdiMessage"
+            label="Discord"
+            class="mb-2"
+          />
+
+          <h1 class="text-lg">Discord is linked to <b>@trmazi</b></h1>
+          <h1 class="text-lg">Discord isn't linked!</h1>
+
+          <template #footer>
+            <div class="space-x-2">
+              <BaseButton type="submit" color="success" label="Link Now" />
+              <BaseButton type="submit" color="info" label="Relink" />
+              <BaseButton type="submit" color="danger" label="Unlink" />
+            </div>
+          </template>
+        </CardBox>
+
+        <CardBox>
+          <PillTag
+            :icon="mdiScoreboard"
+            color="info"
+            label="Kamaitachi"
+            class="mb-2"
+          />
+
+          <h1 class="text-lg">Kamaitachi is linked to <b>@trmazi</b></h1>
+          <h1 class="text-lg">Kamaitachi isn't linked!</h1>
+
+          <template #footer>
+            <div class="space-x-2">
+              <BaseButton type="submit" color="success" label="Link Now" />
+              <BaseButton type="submit" color="info" label="Relink" />
+              <BaseButton type="submit" color="danger" label="Unlink" />
+            </div>
+          </template>
+        </CardBox>
+
+        <CardBox>
+          <PillTag
+            :icon="mdiTournament"
+            color="info"
+            label="Start.GG"
+            class="mb-2"
+          />
+
+          <h1 class="text-lg">Start.GG is linked to <b>@trmazi</b></h1>
+          <h1 class="text-lg">Start.GG isn't linked!</h1>
+
+          <template #footer>
+            <div class="space-x-2">
+              <BaseButton type="submit" color="success" label="Link Now" />
+              <BaseButton type="submit" color="info" label="Relink" />
+              <BaseButton type="submit" color="danger" label="Unlink" />
+            </div>
+          </template>
+        </CardBox>
+      </div>
+    </SectionMain>
+  </LayoutAuthenticated>
+</template>

src/views/Profile/ProfileView.vue

@@ -11,6 +11,7 @@ import SectionMain from "@/components/SectionMain.vue";
 import CardBox from "@/components/CardBox.vue";
 import BaseDivider from "@/components/BaseDivider.vue";
 import FormField from "@/components/FormField.vue";
+import FormCheckRadio from "@/components/FormCheckRadio.vue";
 import FormControl from "@/components/FormControl.vue";
 import BaseButton from "@/components/BaseButton.vue";
 import UserCard from "@/components/UserCard.vue";
@@ -44,12 +45,42 @@ const submitPass = () => {
 <template>
   <LayoutAuthenticated>
     <SectionMain>
-      <SectionTitleLine
-        :icon="mdiAccount"
-        title="General Profile Settings"
-        main
-      />
-      <UserCard class="mb-6" />
+      <UserCard class="mb-6" use-small />
+      <SectionTitleLine :icon="mdiAccount" title="Profile Settings" main />
+
+      <CardBox is-form class="mb-6" @submit.prevent="">
+        <PillTag color="info" label="Discord Notifications" class="mb-4" />
+        <div class="grid gap-4 grid-cols-2 md:grid-cols-4">
+          <FormCheckRadio
+            name="scorecards"
+            :model-value="true"
+            type="switch"
+            label="Goal Alerts"
+            class="outline outline-gray-400 rounded-xl outline-1 p-2"
+          />
+          <FormCheckRadio
+            name="scorecards"
+            :model-value="true"
+            type="switch"
+            label="Tournament Status"
+            class="outline outline-gray-400 rounded-xl outline-1 p-2"
+          />
+          <FormCheckRadio
+            name="scorecards"
+            :model-value="true"
+            type="switch"
+            label="PASELI Transactions"
+            class="outline outline-gray-400 rounded-xl outline-1 p-2"
+          />
+          <FormCheckRadio
+            name="scorecards"
+            :model-value="true"
+            type="switch"
+            label="System Alerts"
+            class="outline outline-gray-400 rounded-xl outline-1 p-2"
+          />
+        </div>
+      </CardBox>
 
       <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
         <CardBox is-form class="row-span-1" @submit.prevent="submitProfile">

src/views/Profile/PublicView.vue

@@ -0,0 +1,70 @@
+<script setup>
+import {
+  mdiAccount,
+  mdiAccountPlusOutline,
+  mdiAccountMinusOutline,
+  mdiGamepad,
+} from "@mdi/js";
+import SectionMain from "@/components/SectionMain.vue";
+import CardBox from "@/components/CardBox.vue";
+import CardBoxGameStat from "@/components/CardBoxGameStat.vue";
+import UserCard from "@/components/UserCard.vue";
+import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
+import SectionTitleLine from "@/components/SectionTitleLine.vue";
+import BaseButton from "@/components/BaseButton.vue";
+import { GameConstants } from "@/constants";
+</script>
+
+<template>
+  <LayoutAuthenticated>
+    <SectionMain>
+      <SectionTitleLine :icon="mdiAccount" title="Trmazi's Profile" main />
+      <UserCard class="mb-6" use-small />
+
+      <CardBox is-form class="mb-6">
+        <div class="flex gap-4">
+          <BaseButton
+            color="success"
+            label="Add Friend"
+            :icon="mdiAccountPlusOutline"
+          />
+          <BaseButton
+            color="danger"
+            label="Remove Friend"
+            :icon="mdiAccountMinusOutline"
+          />
+        </div>
+      </CardBox>
+
+      <SectionTitleLine :icon="mdiGamepad" title="Game Stats" main />
+      <div
+        class="grid grid-flow-row auto-rows-auto grid-cols-1 md:grid-cols-2 gap-5 mb-5"
+      >
+        <CardBoxGameStat
+          :game="GameConstants.DDR"
+          value="#10 out of 132"
+          profile-name="DJ. TRMAZI"
+          type="ranking"
+        />
+        <CardBoxGameStat
+          :game="GameConstants.POPN_MUSIC"
+          :value="300"
+          profile-name="TRMAZI"
+          type="plays"
+        />
+        <CardBoxGameStat
+          :game="GameConstants.JUBEAT"
+          :value="392"
+          profile-name="TRMAZI"
+          type="scores"
+        />
+        <CardBoxGameStat
+          :game="GameConstants.SDVX"
+          value="#15 out of 200"
+          profile-name="TRMAZI"
+          type="ranking"
+        />
+      </div>
+    </SectionMain>
+  </LayoutAuthenticated>
+</template>