Added new demonic pacts images and theme.

2026-01-16 13:29:04 +08:00
parent ea8484fca7
commit e807d3c380
16 changed files with 1849 additions and 893 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -54,3 +54,4 @@ os-league-tools-master/.env
 os-league-tools-master//.vscode

 .claude/settings.local.json
+nul
--- a/os-league-tools-master/config/webpackDevServer.config.js
+++ b/os-league-tools-master/config/webpackDevServer.config.js
@@ -6,8 +6,6 @@ const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMi
 const ignoredFiles = require('react-dev-utils/ignoredFiles');
 const redirectServedPath = require('react-dev-utils/redirectServedPathMiddleware');
 const paths = require('./paths');
-const getHttpsConfig = require('./getHttpsConfig');
-
 const host = process.env.HOST || '0.0.0.0';
 const sockHost = process.env.WDS_SOCKET_HOST;
 const sockPath = process.env.WDS_SOCKET_PATH; // default: '/ws'
@@ -90,7 +88,6 @@ module.exports = function (proxy, allowedHost) {
      publicPath: paths.publicUrlOrPath.slice(0, -1),
    },

-    https: getHttpsConfig(),
    host,
    historyApiFallback: {
      // Paths with dots should still use the history fallback.
@@ -100,7 +97,8 @@ module.exports = function (proxy, allowedHost) {
    },
    // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
    proxy,
-    onBeforeSetupMiddleware(devServer) {
+    // webpack-dev-server v5 uses setupMiddlewares instead of onBeforeSetupMiddleware/onAfterSetupMiddleware
+    setupMiddlewares(middlewares, devServer) {
      // Keep `evalSourceMapMiddleware`
      // middlewares before `redirectServedPath` otherwise will not have any effect
      // This lets us fetch source contents from webpack for the error overlay
@@ -110,17 +108,18 @@ module.exports = function (proxy, allowedHost) {
        // This registers user provided middleware for proxy reasons
        require(paths.proxySetup)(devServer.app);
      }
-    },
-    onAfterSetupMiddleware(devServer) {
+
      // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
-      devServer.app.use(redirectServedPath(paths.publicUrlOrPath));
+      middlewares.push(redirectServedPath(paths.publicUrlOrPath));

      // This service worker file is effectively a 'no-op' that will reset any
      // previous service worker registered for the same host:port combination.
      // We do this in development to avoid hitting the production cache if
      // it used the same host and port.
      // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
-      devServer.app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
+      middlewares.push(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
+
+      return middlewares;
    },
  };
 };
--- a/os-league-tools-master/package-lock.json
+++ b/os-league-tools-master/package-lock.json
--- a/os-league-tools-master/package.json
+++ b/os-league-tools-master/package.json
@@ -66,7 +66,7 @@
    "postcss": "^8.4.4",
    "postcss-cli": "^11.0.0",
    "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-import-url": "^7.2.0",
+    "postcss-import-url": "^1.0.0",
    "postcss-loader": "^6.2.1",
    "postcss-normalize": "^10.0.1",
    "postcss-preset-env": "^7.0.1",
@@ -74,7 +74,7 @@
    "query-string": "^7.0.1",
    "react": "^18.3.1",
    "react-app-polyfill": "^3.0.0",
-    "react-charts": "^3.0.0-beta.54",
+    "react-charts": "^0.0.1",
    "react-checkbox-tree": "^1.8.0",
    "react-dev-utils": "^12.0.1",
    "react-device-detect": "^2.2.3",
@@ -102,7 +102,7 @@
    "tailwindcss": "^3.0.2",
    "terser-webpack-plugin": "^5.2.5",
    "webpack": "^5.64.4",
-    "webpack-dev-server": "^4.6.0",
+    "webpack-dev-server": "^5.2.3",
    "webpack-manifest-plugin": "^4.0.2",
    "workbox-webpack-plugin": "^6.4.1"
  },
--- a/os-league-tools-master/src/assets/img/icon-dp-dark.png
+++ b/os-league-tools-master/src/assets/img/icon-dp-dark.png
--- a/os-league-tools-master/src/assets/img/icon-dp-light.png
+++ b/os-league-tools-master/src/assets/img/icon-dp-light.png
--- a/os-league-tools-master/src/assets/img/icon-dp-split.png
+++ b/os-league-tools-master/src/assets/img/icon-dp-split.png
--- a/os-league-tools-master/src/components/ThemeProvider.js
+++ b/os-league-tools-master/src/components/ThemeProvider.js
@@ -17,6 +17,7 @@ const PROGRESS_BAR = {
  tr: 'linear-gradient(to right, #dc8B36, #edad69)',
  re: 'linear-gradient(to right, #034f92, #20c3fe)',
  mono: 'linear-gradient(to right, #f9fafb, #374151)',
+  dp: 'linear-gradient(to right, #6b1c23, #c41e3a)',
 };

 export function ThemedProgressBar(props) {
--- a/os-league-tools-master/src/pages/Settings.js
+++ b/os-league-tools-master/src/pages/Settings.js
@@ -94,6 +94,7 @@ export default function Settings() {
                  <ThemeSelectCard label='Reloaded' theme='tr' />
                  <ThemeSelectCard label='Echoes' theme='re' />
                  <ThemeSelectCard label='Mono' theme='mono' />
+                  <ThemeSelectCard label='Demonic' theme='dp' />
                </div>
              </div>
            </div>
--- a/os-league-tools-master/src/styles/compiled.css
+++ b/os-league-tools-master/src/styles/compiled.css
@@ -1,12 +1,9 @@
-/* fallback */
@font-face {
  font-family: 'Material Icons Sharp';
  font-style: normal;
  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/materialiconssharp/v110/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvR.woff2) format('woff2');
-}
-
-.material-icons-sharp {
+  src: url(https://fonts.gstatic.com/s/materialiconssharp/v110/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvS.otf) format('opentype');
+}.material-icons-sharp {
  font-family: 'Material Icons Sharp';
  font-weight: normal;
  font-style: normal;
@@ -18,15 +15,12 @@
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
 }
-/* fallback */
@font-face {
  font-family: 'Material Icons Outlined';
  font-style: normal;
  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v110/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');
+  src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v110/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUcd.otf) format('opentype');
 }
 .material-icons-outlined {
  font-family: 'Material Icons Outlined';
@@ -40,38 +34,14 @@
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
 }
-/* vietnamese */
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 400;
-  font-stretch: 100%;
+  font-stretch: normal;
  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/inconsolata/v37/QldgNThLqRwH-OJ1UHjlKENVzkWGVkL3GZQmAwLYxYWI2qfdm7Lpp4U8WRL2l2eY.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Inconsolata';
-  font-style: normal;
-  font-weight: 400;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/inconsolata/v37/QldgNThLqRwH-OJ1UHjlKENVzkWGVkL3GZQmAwLYxYWI2qfdm7Lpp4U8WRP2l2eY.woff2) format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Inconsolata';
-  font-style: normal;
-  font-weight: 400;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/inconsolata/v37/QldgNThLqRwH-OJ1UHjlKENVzkWGVkL3GZQmAwLYxYWI2qfdm7Lpp4U8WR32lw.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  src: url(https://fonts.gstatic.com/s/inconsolata/v37/QldgNThLqRwH-OJ1UHjlKENVzkWGVkL3GZQmAwLYxYWI2qfdm7Lpp4U8aRo.ttf) format('truetype');
 }
@import 'react-checkbox-tree/lib/react-checkbox-tree.css';

@@ -183,7 +153,9 @@
  --tw-contain-style:  ;
 }

-/* ! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com */
+/*
+! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com
+*/

 /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
@@ -687,6 +659,16 @@ body:is(.dark *) {
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
 }

+.theme-dp-dark .bg-accent {
+  --tw-bg-opacity: 1;
+  background-color: rgb(235 78 104 / var(--tw-bg-opacity, 1));
+}
+
+.theme-dp-light .bg-accent {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 28 35 / var(--tw-bg-opacity, 1));
+}
+
 .bg-subdued {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
@@ -827,6 +809,16 @@ body:is(.dark *) {
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
 }

+.theme-dp-dark .text-accent {
+  --tw-text-opacity: 1;
+  color: rgb(235 78 104 / var(--tw-text-opacity, 1));
+}
+
+.theme-dp-light .text-accent {
+  --tw-text-opacity: 1;
+  color: rgb(107 28 35 / var(--tw-text-opacity, 1));
+}
+
 .text-success {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
@@ -935,6 +927,16 @@ body:is(.dark *) {
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
 }

+.theme-dp-dark .border-accent {
+  --tw-border-opacity: 1;
+  border-color: rgb(235 78 104 / var(--tw-border-opacity, 1));
+}
+
+.theme-dp-light .border-accent {
+  --tw-border-opacity: 1;
+  border-color: rgb(107 28 35 / var(--tw-border-opacity, 1));
+}
+
 .border-subdued {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
@@ -1007,8 +1009,6 @@ body:is(.dark *) {
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
  font-size: 0.75rem;
  line-height: 1rem;
 }
@@ -1025,8 +1025,6 @@ body:is(.dark *) {
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
  font-size: 0.875rem;
  line-height: 1.25rem;
 }
@@ -1043,8 +1041,6 @@ body:is(.dark *) {
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
  font-size: 1rem;
  line-height: 1.5rem;
 }
@@ -1061,8 +1057,6 @@ body:is(.dark *) {
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
  font-size: 1.125rem;
  line-height: 1.75rem;
 }
@@ -1079,8 +1073,6 @@ body:is(.dark *) {
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
  font-size: 1.25rem;
  line-height: 1.75rem;
 }
@@ -1097,8 +1089,6 @@ body:is(.dark *) {
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
  font-size: 1.5rem;
  line-height: 2rem;
 }
@@ -1115,8 +1105,6 @@ body:is(.dark *) {
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
  font-size: 2.25rem;
  line-height: 2.5rem;
 }
@@ -1133,34 +1121,27 @@ body:is(.dark *) {
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
 }
 .container {
  width: 100%;
 }
-@media (min-width: 640px) {
-  .container {
+@media (min-width: 640px) {.container {
    max-width: 640px;
  }
 }
-@media (min-width: 768px) {
-  .container {
+@media (min-width: 768px) {.container {
    max-width: 768px;
  }
 }
-@media (min-width: 1024px) {
-  .container {
+@media (min-width: 1024px) {.container {
    max-width: 1024px;
  }
 }
-@media (min-width: 1280px) {
-  .container {
+@media (min-width: 1280px) {.container {
    max-width: 1280px;
  }
 }
-@media (min-width: 1536px) {
-  .container {
+@media (min-width: 1536px) {.container {
    max-width: 1536px;
  }
 }
@@ -1240,13 +1221,11 @@ body:is(.dark *) {
 .sidebar-wrapper {
  width: 100%;
 }
-@media (min-width: 768px) {
-  .sidebar-wrapper {
+@media (min-width: 768px) {.sidebar-wrapper {
    max-width: 20rem;
  }
 }
-@media (min-width: 1024px) {
-  .sidebar-wrapper {
+@media (min-width: 1024px) {.sidebar-wrapper {
    max-width: 24rem;
  }
 }
@@ -1259,8 +1238,7 @@ body:is(.dark *) {
  width: 100%;
  padding: 0.5rem;
 }
-@media (min-width: 640px) {
-  .navbar {
+@media (min-width: 640px) {.navbar {
    padding: 1rem;
  }
 }
@@ -1276,8 +1254,7 @@ body:is(.dark *) {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
 }
-@media (min-width: 768px) {
-  .navbar-content {
+@media (min-width: 768px) {.navbar-content {
    padding-left: 2.25rem;
    padding-right: 2.25rem;
  }
@@ -1285,16 +1262,14 @@ body:is(.dark *) {
 .navbar-brand-logo {
  height: 1.5rem;
 }
-@media (min-width: 768px) {
-  .navbar-brand-logo {
+@media (min-width: 768px) {.navbar-brand-logo {
    height: 2rem;
  }
 }
 .navbar-brand-logo {
  width: 1.5rem;
 }
-@media (min-width: 768px) {
-  .navbar-brand-logo {
+@media (min-width: 768px) {.navbar-brand-logo {
    width: 2rem;
  }
 }
@@ -1302,8 +1277,7 @@ body:is(.dark *) {
  font-size: 1.125rem;
  line-height: 1.75rem;
 }
-@media (min-width: 768px) {
-  .navbar-brand {
+@media (min-width: 768px) {.navbar-brand {
    font-size: 1.5rem;
    line-height: 2rem;
  }
@@ -1316,8 +1290,7 @@ body:is(.dark *) {
  font-size: 0.875rem;
  line-height: 1.25rem;
 }
-@media (min-width: 768px) {
-  .navbar-link {
+@media (min-width: 768px) {.navbar-link {
    font-size: 1rem;
    line-height: 1.5rem;
  }
@@ -1375,12 +1348,19 @@ body:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
 }
+.theme-dp-dark a.active {
+  --tw-text-opacity: 1;
+  color: rgb(235 78 104 / var(--tw-text-opacity, 1));
+}
+.theme-dp-light a.active {
+  --tw-text-opacity: 1;
+  color: rgb(107 28 35 / var(--tw-text-opacity, 1));
+}
 .navbar-link-alt {
  font-size: 0.875rem;
  line-height: 1.25rem;
 }
-@media (min-width: 768px) {
-  .navbar-link-alt {
+@media (min-width: 768px) {.navbar-link-alt {
    font-size: 1rem;
    line-height: 1.5rem;
  }
@@ -1470,6 +1450,14 @@ body:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
 }
+.theme-dp-dark .heading-accent-md {
+  --tw-text-opacity: 1;
+  color: rgb(235 78 104 / var(--tw-text-opacity, 1));
+}
+.theme-dp-light .heading-accent-md {
+  --tw-text-opacity: 1;
+  color: rgb(107 28 35 / var(--tw-text-opacity, 1));
+}
 .heading-accent-md {
  font-size: 0.875rem;
  line-height: 1.25rem;
@@ -1586,6 +1574,14 @@ body:is(.dark *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity, 1));
 }
+.theme-dp-dark .button-filled:active {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(235 78 104 / var(--tw-ring-opacity, 1));
+}
+.theme-dp-light .button-filled:active {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(107 28 35 / var(--tw-ring-opacity, 1));
+}
 .button-filled:active {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1639,6 +1635,14 @@ body:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
 }
+.theme-dp-dark .button-filled {
+  --tw-bg-opacity: 1;
+  background-color: rgb(235 78 104 / var(--tw-bg-opacity, 1));
+}
+.theme-dp-light .button-filled {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 28 35 / var(--tw-bg-opacity, 1));
+}
 .button-filled {
  --tw-text-opacity: 1;
  color: rgb(249 250 251 / var(--tw-text-opacity, 1));
@@ -1695,6 +1699,14 @@ body:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
 }
+.theme-dp-dark .content-outline {
+  --tw-border-opacity: 1;
+  border-color: rgb(235 78 104 / var(--tw-border-opacity, 1));
+}
+.theme-dp-light .content-outline {
+  --tw-border-opacity: 1;
+  border-color: rgb(107 28 35 / var(--tw-border-opacity, 1));
+}
 .content-outline {
  border-width: 1px;
 }
@@ -1749,6 +1761,14 @@ body:is(.dark *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity, 1));
 }
+.theme-dp-dark .button-outline:active {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(235 78 104 / var(--tw-ring-opacity, 1));
+}
+.theme-dp-light .button-outline:active {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(107 28 35 / var(--tw-ring-opacity, 1));
+}
 .button-outline:active {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1802,6 +1822,14 @@ body:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
 }
+.theme-dp-dark .button-outline {
+  --tw-text-opacity: 1;
+  color: rgb(235 78 104 / var(--tw-text-opacity, 1));
+}
+.theme-dp-light .button-outline {
+  --tw-text-opacity: 1;
+  color: rgb(107 28 35 / var(--tw-text-opacity, 1));
+}
 .theme-tl-dark .button-outline {
  --tw-border-opacity: 1;
  border-color: rgb(164 206 39 / var(--tw-border-opacity, 1));
@@ -1850,6 +1878,14 @@ body:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
 }
+.theme-dp-dark .button-outline {
+  --tw-border-opacity: 1;
+  border-color: rgb(235 78 104 / var(--tw-border-opacity, 1));
+}
+.theme-dp-light .button-outline {
+  --tw-border-opacity: 1;
+  border-color: rgb(107 28 35 / var(--tw-border-opacity, 1));
+}
 .button-outline {
  border-width: 1px;
 }
@@ -1932,6 +1968,14 @@ body:is(.dark *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity, 1));
 }
+.theme-dp-dark .button-group-active:active {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(235 78 104 / var(--tw-ring-opacity, 1));
+}
+.theme-dp-light .button-group-active:active {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(107 28 35 / var(--tw-ring-opacity, 1));
+}
 .button-group-active:active {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1985,6 +2029,14 @@ body:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
 }
+.theme-dp-dark .button-group-selected {
+  --tw-bg-opacity: 1;
+  background-color: rgb(235 78 104 / var(--tw-bg-opacity, 1));
+}
+.theme-dp-light .button-group-selected {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 28 35 / var(--tw-bg-opacity, 1));
+}
 .button-group-selected {
  font-weight: 600;
  --tw-text-opacity: 1;
@@ -2070,6 +2122,12 @@ body:is(.dark *) {
 .theme-mono-light .checkbox-primary {
  accent-color: #374151;
 }
+.theme-dp-dark .checkbox-primary {
+  accent-color: #eb4e68;
+}
+.theme-dp-light .checkbox-primary {
+  accent-color: #6b1c23;
+}
 .checkbox-primary {
  border-radius: 0.25rem;
 }
@@ -2122,8 +2180,8 @@ select[multiple]:focus option:checked {
    box-shadow: inset 0px -7px 5px -5px var(--tw-shadow-color), 3px -3px 3px -3px var(--tw-shadow-color),
      -3px -3px 3px -3px var(--tw-shadow-color);
  }
-.pointer-events-none {
-  pointer-events: none;
+.\!visible {
+  visibility: visible !important;
 }
 .visible {
  visibility: visible;
@@ -2134,25 +2192,15 @@ select[multiple]:focus option:checked {
 .static {
  position: static;
 }
+.fixed {
+  position: fixed;
+}
 .absolute {
  position: absolute;
 }
 .relative {
  position: relative;
 }
-.inset-0 {
-  inset: 0px;
-}
-.inset-y-0 {
-  top: 0px;
-  bottom: 0px;
-}
-.left-0 {
-  left: 0px;
-}
-.left-full {
-  left: 100%;
-}
 .right-0 {
  right: 0px;
 }
@@ -2315,15 +2363,9 @@ select[multiple]:focus option:checked {
 .hidden {
  display: none;
 }
-.h-10 {
-  height: 2.5rem;
-}
 .h-12 {
  height: 3rem;
 }
-.h-2 {
-  height: 0.5rem;
-}
 .h-24 {
  height: 6rem;
 }
@@ -2345,9 +2387,6 @@ select[multiple]:focus option:checked {
 .h-5 {
  height: 1.25rem;
 }
-.h-6 {
-  height: 1.5rem;
-}
 .h-8 {
  height: 2rem;
 }
@@ -2396,18 +2435,12 @@ select[multiple]:focus option:checked {
 .min-h-screen {
  min-height: 100vh;
 }
-.w-10 {
-  width: 2.5rem;
-}
 .w-11\/12 {
  width: 91.666667%;
 }
 .w-12 {
  width: 3rem;
 }
-.w-16 {
-  width: 4rem;
-}
 .w-24 {
  width: 6rem;
 }
@@ -2459,18 +2492,12 @@ select[multiple]:focus option:checked {
 .w-px {
  width: 1px;
 }
-.min-w-0 {
-  min-width: 0px;
-}
 .min-w-\[100px\] {
  min-width: 100px;
 }
 .min-w-\[26rem\] {
  min-width: 26rem;
 }
-.min-w-max {
-  min-width: max-content;
-}
 .max-w-5xl {
  max-width: 64rem;
 }
@@ -2495,12 +2522,6 @@ select[multiple]:focus option:checked {
 .max-w-\[90\%\] {
  max-width: 90%;
 }
-.max-w-fit {
-  max-width: fit-content;
-}
-.max-w-xs {
-  max-width: 20rem;
-}
 .flex-1 {
  flex: 1 1 0%;
 }
@@ -2546,8 +2567,10 @@ select[multiple]:focus option:checked {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-@keyframes spin {
-  to {
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+@keyframes spin {to {
    transform: rotate(360deg);
  }
 }
@@ -2604,6 +2627,9 @@ select[multiple]:focus option:checked {
 .content-center {
  align-content: center;
 }
+.items-start {
+  align-items: flex-start;
+}
 .items-end {
  align-items: flex-end;
 }
@@ -2745,9 +2771,6 @@ select[multiple]:focus option:checked {
 .border-b-2 {
  border-bottom-width: 2px;
 }
-.border-l {
-  border-left-width: 1px;
-}
 .border-l-2 {
  border-left-width: 2px;
 }
@@ -2789,10 +2812,6 @@ select[multiple]:focus option:checked {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
 }
-.bg-blue-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
-}
 .bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
@@ -2809,43 +2828,20 @@ select[multiple]:focus option:checked {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
 }
-.bg-gray-950 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(3 7 18 / var(--tw-bg-opacity, 1));
-}
 .bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
 }
-.bg-green-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
-}
 .bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
 }
-.bg-red-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
-}
 .bg-red-900\/90 {
  background-color: rgb(127 29 29 / 0.9);
 }
-.bg-yellow-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
-}
-.bg-yellow-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(202 138 4 / var(--tw-bg-opacity, 1));
-}
 .bg-opacity-10 {
  --tw-bg-opacity: 0.1;
 }
-.object-contain {
-  object-fit: contain;
-}
 .object-cover {
  object-fit: cover;
 }
@@ -2920,9 +2916,6 @@ select[multiple]:focus option:checked {
 .pb-1 {
  padding-bottom: 0.25rem;
 }
-.pb-2 {
-  padding-bottom: 0.5rem;
-}
 .pb-3 {
  padding-bottom: 0.75rem;
 }
@@ -2941,9 +2934,6 @@ select[multiple]:focus option:checked {
 .pt-0 {
  padding-top: 0px;
 }
-.pt-1 {
-  padding-top: 0.25rem;
-}
 .pt-2 {
  padding-top: 0.5rem;
 }
@@ -3058,10 +3048,6 @@ select[multiple]:focus option:checked {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
 }
-.text-orange-400 {
-  --tw-text-opacity: 1;
-  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
-}
 .text-red-100 {
  --tw-text-opacity: 1;
  color: rgb(254 226 226 / var(--tw-text-opacity, 1));
@@ -3078,10 +3064,6 @@ select[multiple]:focus option:checked {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
-.text-yellow-400 {
-  --tw-text-opacity: 1;
-  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
-}
 .underline {
  text-decoration-line: underline;
 }
@@ -3089,9 +3071,6 @@ select[multiple]:focus option:checked {
  --tw-placeholder-opacity: 1;
  color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1));
 }
-.opacity-20 {
-  opacity: 0.2;
-}
 .opacity-25 {
  opacity: 0.25;
 }
@@ -3118,10 +3097,6 @@ select[multiple]:focus option:checked {
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-.drop-shadow-\[0_1px_1px_rgba\(0\2c 0\2c 0\2c 0\.8\)\] {
-  --tw-drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.8));
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
 .filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -3130,19 +3105,11 @@ select[multiple]:focus option:checked {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
 }
-.transition-all {
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
 .transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
 }
-.duration-300 {
-  transition-duration: 300ms;
-}
 .odd\:bg-primary:nth-child(odd) {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
@@ -3185,32 +3152,21 @@ select[multiple]:focus option:checked {
    background-color: rgb(63 63 70 / var(--tw-bg-opacity, 1));
  }
 }
-@media (min-width: 1536px) {
-  .\32xl\:container {
+@media (min-width: 1536px) {.\32xl\:container {
    width: 100%;
-  }
-  @media (min-width: 640px) {
-    .\32xl\:container {
+  }@media (min-width: 640px) {.\32xl\:container {
      max-width: 640px;
    }
-  }
-  @media (min-width: 768px) {
-    .\32xl\:container {
+  }@media (min-width: 768px) {.\32xl\:container {
      max-width: 768px;
    }
-  }
-  @media (min-width: 1024px) {
-    .\32xl\:container {
+  }@media (min-width: 1024px) {.\32xl\:container {
      max-width: 1024px;
    }
-  }
-  @media (min-width: 1280px) {
-    .\32xl\:container {
+  }@media (min-width: 1280px) {.\32xl\:container {
      max-width: 1280px;
    }
-  }
-  @media (min-width: 1536px) {
-    .\32xl\:container {
+  }@media (min-width: 1536px) {.\32xl\:container {
      max-width: 1536px;
    }
  }
@@ -3219,10 +3175,6 @@ select[multiple]:focus option:checked {
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
 }
-.hover\:border-gray-500:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
-}
 .hover\:bg-blue-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
@@ -3253,147 +3205,100 @@ select[multiple]:focus option:checked {
 .disabled\:opacity-50:disabled {
  opacity: 0.5;
 }
-@media (min-width: 640px) {
-  .sm\:flex {
+@media (min-width: 640px) {.sm\:flex {
    display: flex;
-  }
-  .sm\:hidden {
+  }.sm\:hidden {
    display: none;
  }
 }
-@media (min-width: 768px) {
-  .md\:mx-2 {
+@media (min-width: 768px) {.md\:mx-2 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
-  }
-  .md\:inline {
+  }.md\:inline {
    display: inline;
-  }
-  .md\:flex {
+  }.md\:flex {
    display: flex;
-  }
-  .md\:hidden {
+  }.md\:hidden {
    display: none;
-  }
-  .md\:h-full {
+  }.md\:h-full {
    height: 100%;
-  }
-  .md\:h-px {
+  }.md\:h-px {
    height: 1px;
-  }
-  .md\:w-32 {
+  }.md\:w-32 {
    width: 8rem;
-  }
-  .md\:w-40 {
+  }.md\:w-40 {
    width: 10rem;
-  }
-  .md\:w-48 {
+  }.md\:w-48 {
    width: 12rem;
-  }
-  .md\:w-full {
+  }.md\:w-full {
    width: 100%;
-  }
-  .md\:w-px {
+  }.md\:w-px {
    width: 1px;
-  }
-  .md\:max-w-\[75\%\] {
+  }.md\:max-w-\[75\%\] {
    max-width: 75%;
-  }
-  .md\:flex-shrink-0 {
+  }.md\:flex-shrink-0 {
    flex-shrink: 0;
-  }
-  .md\:grid-cols-4 {
+  }.md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-  .md\:flex-row {
+  }.md\:flex-row {
    flex-direction: row;
-  }
-  .md\:gap-1 {
+  }.md\:gap-1 {
    gap: 0.25rem;
-  }
-  .md\:text-right {
+  }.md\:text-right {
    text-align: right;
-  }
-  .md\:align-top {
+  }.md\:align-top {
    vertical-align: top;
  }
 }
-@media (min-width: 1024px) {
-  .lg\:order-1 {
+@media (min-width: 1024px) {.lg\:order-1 {
    order: 1;
-  }
-  .lg\:order-3 {
+  }.lg\:order-3 {
    order: 3;
-  }
-  .lg\:col-span-1 {
+  }.lg\:col-span-1 {
    grid-column: span 1 / span 1;
-  }
-  .lg\:col-span-3 {
+  }.lg\:col-span-3 {
    grid-column: span 3 / span 3;
-  }
-  .lg\:h-full {
+  }.lg\:h-full {
    height: 100%;
-  }
-  .lg\:h-px {
+  }.lg\:h-px {
    height: 1px;
-  }
-  .lg\:w-full {
+  }.lg\:w-full {
    width: 100%;
-  }
-  .lg\:w-px {
+  }.lg\:w-px {
    width: 1px;
-  }
-  .lg\:max-w-\[60\%\] {
+  }.lg\:max-w-\[60\%\] {
    max-width: 60%;
-  }
-  .lg\:max-w-\[768px\] {
+  }.lg\:max-w-\[768px\] {
    max-width: 768px;
-  }
-  .lg\:basis-1\/2 {
+  }.lg\:basis-1\/2 {
    flex-basis: 50%;
-  }
-  .lg\:basis-1\/4 {
+  }.lg\:basis-1\/4 {
    flex-basis: 25%;
-  }
-  .lg\:grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-  .lg\:grid-cols-3 {
+  }.lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-  .lg\:grid-cols-4 {
+  }.lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-  .lg\:flex-col {
+  }.lg\:flex-col {
    flex-direction: column;
-  }
-  .lg\:flex-nowrap {
+  }.lg\:flex-nowrap {
    flex-wrap: nowrap;
  }
 }
-@media (min-width: 1280px) {
-  .xl\:ml-1 {
+@media (min-width: 1280px) {.xl\:ml-1 {
    margin-left: 0.25rem;
-  }
-  .xl\:mt-3 {
+  }.xl\:mt-3 {
    margin-top: 0.75rem;
-  }
-  .xl\:grid-cols-1 {
+  }.xl\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
-  }
-  .xl\:grid-cols-2 {
+  }.xl\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-  .xl\:flex-row {
+  }.xl\:flex-row {
    flex-direction: row;
-  }
-  .xl\:border-l {
+  }.xl\:border-l {
    border-left-width: 1px;
-  }
-  .xl\:border-t-0 {
+  }.xl\:border-t-0 {
    border-top-width: 0px;
-  }
-  .xl\:pt-\[0\] {
+  }.xl\:pt-\[0\] {
    padding-top: 0;
  }
 }
--- a/os-league-tools-master/src/styles/index.css
+++ b/os-league-tools-master/src/styles/index.css
@@ -31,6 +31,7 @@
    @apply tr-light:bg-tr-umber tr-dark:bg-tr-orange;
    @apply re-light:bg-re-ocean re-dark:bg-re-sky;
    @apply mono-light:bg-mono-white mono-dark:bg-mono-dark;
+    @apply dp-light:bg-dp-blood dp-dark:bg-dp-crimson;
  }
  .bg-subdued {
    @apply bg-gray-300 dark:bg-zinc-500;
@@ -63,6 +64,7 @@
    @apply tr-light:text-tr-umber tr-dark:text-tr-orange;
    @apply re-light:text-re-ocean re-dark:text-re-sky;
    @apply mono-light:text-mono-white mono-dark:text-mono-dark;
+    @apply dp-light:text-dp-blood dp-dark:text-dp-crimson;
  }
  .text-success {
    @apply text-green-600 dark:text-green-500;
@@ -86,6 +88,7 @@
    @apply tr-light:border-tr-umber tr-dark:border-tr-orange;
    @apply re-light:border-re-ocean re-dark:border-re-sky;
    @apply mono-light:border-mono-white mono-dark:border-mono-dark;
+    @apply dp-light:border-dp-blood dp-dark:border-dp-crimson;
  }
  .border-subdued {
    @apply border-gray-300 dark:border-zinc-500;
@@ -106,6 +109,7 @@
    @apply tr-light:ring-tr-umber tr-dark:ring-tr-orange;
    @apply re-light:ring-re-ocean re-dark:ring-re-sky;
    @apply mono-light:ring-mono-white mono-dark:ring-mono-dark;
+    @apply dp-light:ring-dp-blood dp-dark:ring-dp-crimson;
  }
  .ring-error {
    @apply ring-red-600 dark:ring-red-500;
@@ -117,6 +121,7 @@
    @apply tr-light:accent-tr-umber tr-dark:accent-tr-orange;
    @apply re-light:accent-re-ocean re-dark:accent-re-sky;
    @apply mono-light:accent-mono-white mono-dark:accent-mono-dark;
+    @apply dp-light:accent-dp-blood dp-dark:accent-dp-crimson;
  }
  /* Compatibility classes for applying text colors to svg images */
  /* Generate with https://isotropic.co/tool/hex-color-to-css-filter */
@@ -159,6 +164,12 @@
  .mono-white-img-compat {
    filter: invert(20%) sepia(20%) saturate(705%) hue-rotate(178deg) brightness(101%) contrast(86%);
  }
+  .dp-crimson-img-compat {
+    filter: invert(22%) sepia(95%) saturate(3000%) hue-rotate(340deg) brightness(90%) contrast(95%);
+  }
+  .dp-blood-img-compat {
+    filter: invert(15%) sepia(70%) saturate(2500%) hue-rotate(340deg) brightness(70%) contrast(100%);
+  }
  .img-primary {
    @apply dark:dark-mode-img-compat;
  }
@@ -169,6 +180,7 @@
    @apply tr-light:tr-umber-img-compat tr-dark:tr-orange-img-compat;
    @apply re-light:re-ocean-img-compat re-dark:re-sky-img-compat;
    @apply mono-light:mono-white-img-compat mono-dark:mono-dark-img-compat;
+    @apply dp-light:dp-blood-img-compat dp-dark:dp-crimson-img-compat;
  }
  /* TYPOGRAPHY */
  .small-caps {
--- a/os-league-tools-master/src/util/colors.js
+++ b/os-league-tools-master/src/util/colors.js
@@ -24,6 +24,10 @@ export default function getAccentColorForTheme(theme) {
      return 'rgb(76 33 54)';
    case 'mono-light':
      return 'rgb(55 65 81)';
+    case 'dp-dark':
+      return 'rgb(196 30 58)';
+    case 'dp-light':
+      return 'rgb(107 28 35)';
    default:
      return 'rgb(19 213 145)';
  }
--- a/os-league-tools-master/tailwind.config.js
+++ b/os-league-tools-master/tailwind.config.js
@@ -19,6 +19,8 @@ module.exports = {
        're-ocean': '#034f92',
        'mono-dark': '#f9fafb',
        'mono-white': '#374151',
+        'dp-crimson': '#eb4e68',
+        'dp-blood': '#6b1c23',
        gray: {
          150: '#f1f2f5',
        },
@@ -47,12 +49,14 @@ module.exports = {
        'tr-dark',
        're-dark',
        'mono-dark',
+        'dp-dark',
        'tl-light',
        'tb-light',
        'tr-light',
        'sl-light',
        're-light',
        'mono-light',
+        'dp-light',
      ];
      themes.forEach(theme => {
        addVariant(theme, `.theme-${theme} &`);
--- a/run-backend.bat
+++ b/run-backend.bat
@@ -0,0 +1,34 @@
+@echo off
+REM Run the Spring Boot backend server
+
+echo Starting Group Ironmen Backend...
+echo.
+
+REM Change to the backend directory
+cd /d "%~dp0spring-backend"
+
+REM Load environment variables from .env file
+if exist ".env" (
+    echo Loading environment from .env file...
+    for /f "usebackq tokens=1,* delims==" %%a in (".env") do (
+        REM Skip comments and empty lines
+        echo %%a | findstr /r "^#" >nul
+        if errorlevel 1 (
+            if not "%%a"=="" (
+                set "%%a=%%b"
+            )
+        )
+    )
+    echo.
+    echo Database: %DB_USER%@%DB_HOST%:%DB_PORT%/%DB_NAME%
+    echo Server Port: %SERVER_PORT%
+    echo.
+) else (
+    echo Warning: No .env file found in spring-backend directory
+    echo.
+)
+
+REM Run the application
+call gradlew.bat bootRun
+
+pause
--- a/run-frontend.bat
+++ b/run-frontend.bat
@@ -0,0 +1,28 @@
+@echo off
+REM Run the os-league-tools React frontend development server
+
+echo Starting OS League Tools Frontend...
+echo.
+
+REM Change to the frontend directory
+cd /d "%~dp0os-league-tools-master"
+
+REM Check if node_modules exists
+if not exist "node_modules" (
+    echo node_modules not found. Running npm install...
+    npm install
+    if errorlevel 1 (
+        echo npm install failed!
+        pause
+        exit /b 1
+    )
+)
+
+echo Starting development server on http://localhost:3000
+echo Press Ctrl+C to stop the server
+echo.
+
+REM Run the development server
+npm run dev
+
+pause
--- a/spring-backend/src/main/resources/application.yml
+++ b/spring-backend/src/main/resources/application.yml
@@ -3,7 +3,7 @@ spring:
    name: group-ironmen-backend

  datasource:
-    url: jdbc:mariadb://${DB_HOST:localhost}:${DB_PORT:3306}/${DB_NAME:groupironman}?useSSL=false&allowPublicKeyRetrieval=true
+    url: jdbc:mariadb://${DB_HOST:localhost}:${DB_PORT:3307}/${DB_NAME:groupironman}?useSSL=false&allowPublicKeyRetrieval=true
    username: ${DB_USER:root}
    password: ${DB_PASSWORD:password}
    driver-class-name: org.mariadb.jdbc.Driver