Add svg background to login page

frontend/assets/auth_background.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="560" preserveAspectRatio="none" viewBox="0 0 1440 560"><style>@keyframes leftMove{0%,to{transform:translate(50px,10px)}50%{transform:translate(-50px,-10px)}}@keyframes rightMove{0%,to{transform:translate(35px,-10px)}50%{transform:translate(-35px,10px)}}</style><g fill="none" mask="url(#a)"><path id="center" fill="#553E98" d="M0 0h1440v560H0z"/><path fill="#371f69" d="M0 597.788c110.134 6.269 166.289-135.042 257.828-196.599 88.908-59.788 205.963-74.721 271.585-159.414 73.271-94.566 139.964-217.83 110.558-333.789-29.389-115.891-157.335-173.294-256.2-240.526-77.723-52.854-162.809-87.31-254.732-106.925-86.136-18.38-174.438-27.767-258.861-2.668-84.249 25.048-159.774 74.976-214.823 143.496-53.858 67.037-63.372 154.409-90.164 236.121-33.096 100.936-129.151 203.295-85.699 300.224 43.381 96.771 193.663 74.83 280.878 135.164C-147.675 436.485-111.633 591.434 0 597.788" style="animation:leftMove 15s ease-in-out infinite"/><path fill="#FF9B85" d="M1440 1083.915c104.99 26.724 236.162 41.45 316.945-30.739 82.164-73.423 33.115-212.531 71.052-315.984 33.704-91.909 129.157-155.211 137.508-252.748 9.14-106.755-11.121-229.303-90.031-301.784-78.34-71.958-201.518-44.44-306.375-62.329-90.913-15.51-179.996-61.011-268.703-35.779-88.973 25.307-144.212 107.564-210.499 172.082-72.876 70.932-190.597 123.198-197.145 224.684-6.626 102.698 105.275 169.802 166.35 252.632 47.795 64.819 93.763 126.075 153.067 180.563 71.129 65.352 134.223 145.576 227.831 169.402" style="animation:rightMove 15s ease-in-out infinite;animation-delay:-3s"/></g><defs><mask id="a"><path fill="#fff" d="M0 0h1440v560H0z"/></mask></defs></svg>

frontend/src/RomM.vue

@@ -17,6 +17,7 @@ const selectedLanguage = ref(
 locale.value = selectedLanguage.value.value;
 storeLanguage.setLanguage(selectedLanguage.value);
 </script>
+
 <template>
   <v-app>
     <v-main height="100dvh">

frontend/src/layouts/Auth.vue

@@ -8,7 +8,7 @@ const heartbeatStore = storeHeartbeat();
 
 <template>
   <notification />
-  <v-container class="fill-height justify-center">
+  <v-container id="container" class="fill-height justify-center">
     <router-view />
   </v-container>
   <div id="version" class="position-absolute">
@@ -26,4 +26,10 @@ const heartbeatStore = storeHeartbeat();
   bottom: 0.3rem;
   right: 0.5rem;
 }
+
+#container {
+  background-image: url("/assets/auth_background.svg");
+  background-size: cover;
+  max-width: 100vw;
+}
 </style>

frontend/src/styles/themes.ts

@@ -9,19 +9,16 @@ const commonColors = {
 export const dark = {
   dark: true,
   colors: {
-    primary: "#8B74E8", // Slightly desaturated for better readability
-    secondary: "#9E8CD6", // Better contrast with primary
-    tertiary: "#C5B6AE", // Lightened for better visibility
-    accent: "#FF9B85", // Slightly muted to reduce visual harshness
+    primary: "#8B74E8",
+    secondary: "#9E8CD6",
+    accent: "#E1A38D",
     background: "#0D1117",
     surface: "#161B22",
-    toplayer: "#1C2330", // Slightly darker for better depth
-    "primary-lighten": "#A18FFF", // More vibrant for interactive elements
-    "primary-darken": "#6043C8", // Deeper purple for emphasis
-    "secondary-lighten": "#EBE7FA", // More saturated for better contrast
-    "secondary-darken": "#7A6BB4", // Darker for better hierarchy
-    "tertiary-lighten": "#E5D6CC", // Warmer tone
-    "tertiary-darken": "#A69589", // More neutral dark tone
+    toplayer: "#1C2330",
+    "primary-lighten": "#A18FFF",
+    "primary-darken": "#6043C8",
+    "secondary-lighten": "#EBE7FA",
+    "secondary-darken": "#7A6BB4",
     ...commonColors,
   },
 };
@@ -29,19 +26,16 @@ export const dark = {
 export const light = {
   dark: false,
   colors: {
-    primary: "#371f69", // Slightly darker for better contrast on light
+    primary: "#371f69",
     secondary: "#553e98",
-    tertiary: "#8A7A71", // Darker for better readability
-    accent: "#FF7A5C", // More vibrant for better visibility
+    accent: "#E1A38D",
     surface: "#FFFFFF",
-    background: "#F2F4F8", // Darker to create more separation from background
+    background: "#F2F4F8",
     toplayer: "#E4E9F0",
-    "primary-lighten": "#7850E6", // More saturated for interactive states
+    "primary-lighten": "#7850E6",
     "primary-darken": "#452788",
-    "secondary-lighten": "#F0EBFA", // Slightly warmer purple tint
-    "secondary-darken": "#9B8BD0", // More saturated for emphasis
-    "tertiary-lighten": "#CFC2B8",
-    "tertiary-darken": "#766961", // Darker for better contrast
+    "secondary-lighten": "#F0EBFA",
+    "secondary-darken": "#9B8BD0",
     ...commonColors,
   },
 };