From f83d22c09ef9ed9d8110c0d610b7eba706d24af5 Mon Sep 17 00:00:00 2001 From: voldemort <5692900+yell0wsuit@users.noreply.github.com> Date: Thu, 24 Jul 2025 11:43:01 +0700 Subject: [PATCH] UI overhaul --- cdrm-frontend/.prettierrc.json | 3 +- cdrm-frontend/package-lock.json | 137 +++++++ cdrm-frontend/package.json | 4 + cdrm-frontend/src/App.jsx | 53 +-- .../assets/fonts/InterVariable-Italic.woff2 | Bin 0 -> 387976 bytes .../src/assets/fonts/InterVariable.woff2 | Bin 0 -> 352240 bytes cdrm-frontend/src/assets/fonts/font-face.css | 15 + cdrm-frontend/src/components/Container.jsx | 9 + cdrm-frontend/src/components/NavBar.jsx | 302 +++++++-------- cdrm-frontend/src/components/Pages/API.jsx | 202 +++++++--- .../src/components/Pages/Account.jsx | 27 +- cdrm-frontend/src/components/Pages/Cache.jsx | 151 +++++--- .../src/components/Pages/HomePage.jsx | 244 ++++++------ .../src/components/Pages/MyAccount.jsx | 353 ++++++++++-------- .../src/components/Pages/Register.jsx | 198 +++++----- .../src/components/Pages/TestPlayer.jsx | 172 +++++---- cdrm-frontend/src/index.css | 27 ++ cdrm-frontend/src/main.jsx | 11 +- 18 files changed, 1164 insertions(+), 744 deletions(-) create mode 100644 cdrm-frontend/src/assets/fonts/InterVariable-Italic.woff2 create mode 100644 cdrm-frontend/src/assets/fonts/InterVariable.woff2 create mode 100644 cdrm-frontend/src/assets/fonts/font-face.css create mode 100644 cdrm-frontend/src/components/Container.jsx diff --git a/cdrm-frontend/.prettierrc.json b/cdrm-frontend/.prettierrc.json index eb0d496..13040da 100644 --- a/cdrm-frontend/.prettierrc.json +++ b/cdrm-frontend/.prettierrc.json @@ -4,5 +4,6 @@ "semi": true, "singleQuote": false, "useTabs": false, - "printWidth": 100 + "printWidth": 100, + "plugins": ["prettier-plugin-tailwindcss"] } diff --git a/cdrm-frontend/package-lock.json b/cdrm-frontend/package-lock.json index 5d0ec6d..caeddcf 100644 --- a/cdrm-frontend/package-lock.json +++ b/cdrm-frontend/package-lock.json @@ -12,8 +12,10 @@ "axios": "^1.10.0", "react": "^19.1.0", "react-dom": "^19.1.0", + "react-icons": "^5.5.0", "react-router-dom": "^7.7.0", "shaka-player": "^4.15.8", + "sonner": "^2.0.6", "tailwindcss": "^4.1.11" }, "devDependencies": { @@ -22,10 +24,12 @@ "@types/react-dom": "^19.1.6", "@vitejs/plugin-react": "^4.7.0", "@vitejs/plugin-react-swc": "^3.11.0", + "daisyui": "^5.0.46", "eslint": "^9.31.0", "eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-refresh": "^0.4.20", "globals": "^16.3.0", + "prettier-plugin-tailwindcss": "^0.6.14", "vite": "^7.0.5" } }, @@ -2137,6 +2141,16 @@ "dev": true, "license": "MIT" }, + "node_modules/daisyui": { + "version": "5.0.46", + "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.0.46.tgz", + "integrity": "sha512-vMDZK1tI/bOb2Mc3Mk5WpquBG3ZqBz1YKZ0xDlvpOvey60dOS4/5Qhdowq1HndbQl7PgDLDYysxAjjUjwR7/eQ==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/saadeghi/daisyui?sponsor=1" + } + }, "node_modules/debug": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz", @@ -3479,6 +3493,110 @@ "node": ">= 0.8.0" } }, + "node_modules/prettier": { + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz", + "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==", + "dev": true, + "license": "MIT", + "peer": true, + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, + "node_modules/prettier-plugin-tailwindcss": { + "version": "0.6.14", + "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.14.tgz", + "integrity": "sha512-pi2e/+ZygeIqntN+vC573BcW5Cve8zUB0SSAGxqpB4f96boZF4M3phPVoOFCeypwkpRYdi7+jQ5YJJUwrkGUAg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14.21.3" + }, + "peerDependencies": { + "@ianvs/prettier-plugin-sort-imports": "*", + "@prettier/plugin-hermes": "*", + "@prettier/plugin-oxc": "*", + "@prettier/plugin-pug": "*", + "@shopify/prettier-plugin-liquid": "*", + "@trivago/prettier-plugin-sort-imports": "*", + "@zackad/prettier-plugin-twig": "*", + "prettier": "^3.0", + "prettier-plugin-astro": "*", + "prettier-plugin-css-order": "*", + "prettier-plugin-import-sort": "*", + "prettier-plugin-jsdoc": "*", + "prettier-plugin-marko": "*", + "prettier-plugin-multiline-arrays": "*", + "prettier-plugin-organize-attributes": "*", + "prettier-plugin-organize-imports": "*", + "prettier-plugin-sort-imports": "*", + "prettier-plugin-style-order": "*", + "prettier-plugin-svelte": "*" + }, + "peerDependenciesMeta": { + "@ianvs/prettier-plugin-sort-imports": { + "optional": true + }, + "@prettier/plugin-hermes": { + "optional": true + }, + "@prettier/plugin-oxc": { + "optional": true + }, + "@prettier/plugin-pug": { + "optional": true + }, + "@shopify/prettier-plugin-liquid": { + "optional": true + }, + "@trivago/prettier-plugin-sort-imports": { + "optional": true + }, + "@zackad/prettier-plugin-twig": { + "optional": true + }, + "prettier-plugin-astro": { + "optional": true + }, + "prettier-plugin-css-order": { + "optional": true + }, + "prettier-plugin-import-sort": { + "optional": true + }, + "prettier-plugin-jsdoc": { + "optional": true + }, + "prettier-plugin-marko": { + "optional": true + }, + "prettier-plugin-multiline-arrays": { + "optional": true + }, + "prettier-plugin-organize-attributes": { + "optional": true + }, + "prettier-plugin-organize-imports": { + "optional": true + }, + "prettier-plugin-sort-imports": { + "optional": true + }, + "prettier-plugin-style-order": { + "optional": true + }, + "prettier-plugin-svelte": { + "optional": true + } + } + }, "node_modules/proxy-from-env": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", @@ -3516,6 +3634,15 @@ "react": "^19.1.0" } }, + "node_modules/react-icons": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz", + "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-refresh": { "version": "0.17.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz", @@ -3667,6 +3794,16 @@ "node": ">=8" } }, + "node_modules/sonner": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.6.tgz", + "integrity": "sha512-yHFhk8T/DK3YxjFQXIrcHT1rGEeTLliVzWbO0xN8GberVun2RiBnxAjXAYpZrqwEVHBG9asI/Li8TAAhN9m59Q==", + "license": "MIT", + "peerDependencies": { + "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc", + "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc" + } + }, "node_modules/source-map-js": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", diff --git a/cdrm-frontend/package.json b/cdrm-frontend/package.json index fd98c46..515869a 100644 --- a/cdrm-frontend/package.json +++ b/cdrm-frontend/package.json @@ -14,8 +14,10 @@ "axios": "^1.10.0", "react": "^19.1.0", "react-dom": "^19.1.0", + "react-icons": "^5.5.0", "react-router-dom": "^7.7.0", "shaka-player": "^4.15.8", + "sonner": "^2.0.6", "tailwindcss": "^4.1.11" }, "devDependencies": { @@ -24,10 +26,12 @@ "@types/react-dom": "^19.1.6", "@vitejs/plugin-react": "^4.7.0", "@vitejs/plugin-react-swc": "^3.11.0", + "daisyui": "^5.0.46", "eslint": "^9.31.0", "eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-refresh": "^0.4.20", "globals": "^16.3.0", + "prettier-plugin-tailwindcss": "^0.6.14", "vite": "^7.0.5" } } diff --git a/cdrm-frontend/src/App.jsx b/cdrm-frontend/src/App.jsx index ed2c71b..1921f7e 100644 --- a/cdrm-frontend/src/App.jsx +++ b/cdrm-frontend/src/App.jsx @@ -1,48 +1,19 @@ -import { useState } from "react"; -import Home from "./components/Pages/HomePage"; -import Cache from "./components/Pages/Cache"; -import API from "./components/Pages/API"; -import TestPlayer from "./components/Pages/TestPlayer"; -import NavBar from "./components/NavBar"; -import NavBarMain from "./components/NavBarMain"; -import SideMenu from "./components/SideMenu"; // Add this import +import { Route, Routes } from "react-router-dom"; import Account from "./components/Pages/Account"; -import { Routes, Route } from "react-router-dom"; +import API from "./components/Pages/API"; +import Cache from "./components/Pages/Cache"; +import Home from "./components/Pages/HomePage"; +import TestPlayer from "./components/Pages/TestPlayer"; function App() { - const [isMenuOpen, setIsMenuOpen] = useState(false); // Track if the menu is open - return ( -
+#H?eno9ZYK}k7-{0G&a8~;wOYhB#SGLD{D^MNR7%C_5hq^ySD@sPcZbW+^OuW
zM&1J}vhRLnx0ciX=~8Hp{bP_KuPhk|S?n8M{Q7E8mnNrDEBnDi`~~7B0uQl-A!b3B
zWb(Q6OCZz7wm~+fd}@c7!USuIg~$#SrlDv)dBW2VLPb-^t3x*MLf}906S3k y@+s?Ye`aXmvk^sW? -%TC4umzP=1j
zbOfej7Up6Rma5b$gKADSuUb;QQh7b#8xxKFf!V*TA5G9BCC2CZ2U@a^1jF~a>oXIx
z(N$e@J|HyiG%~}Q>6}r*Cm4}WYo{MiTc#JLoztH1O*H-mf$?RGU>uiOy)!fxdAf9o
zAVLZ|8WAQ Huw_G7kFdC&ElI
z<5cM)0&`InV!k!>)yP93eiahMQ21zCN`)RHIbp&dHsK>!%0&&KiiS`}OK74!fi_m-
ziY`870$2Pe2zNrt1i^frZ-f$2L@ZGsk$B=K!OJ8~vRBENTvEv|h5YOD_Y`7mpp;+g
zX=?1Cl`g(9?etDRoea(h{frNiaTaHrP4?!5`|I!b*2dq(?c)3&@-AZ5X87ZB5c`A-
zlC7Ub>iiHHo8e&CEDy^f{OpS%P)p$OOVOn*GC$(dHf=BCm&WHcU;Pzsad>cDT_$)m
z+#N9USolIIJp1N5U&(X9JeF7GoiW)am&fL938uw++G2yx;)rJO`I`+4@MWZsucIR0
z#Lk=e7KBCZpoC_pM@xO53Bxg(Ue7 r=Y_>PE|0
z;nR`7;NWW1=xf^)rA9xByG8MQWsfQInR$he>BuA<(KHE1=4Y0~sDutXu36XzX7as<
zPYXEABuEwcDntyw#vGzk!$;&wMdAT3hwsQK){umRz#swHw>dwtAECqSM88*X1ovu}
z^Du}~ef4L6py?tm?VS>uE8sDSLzS#mv6`2+ewNA?V821h<5fZja?i)HO_LFF0>F7O
zW&=1OB=8<0B<=0%XSiaOE7nibx5mBaeduLmB+R8#@Y6nYY8;T?&nMuO-N3b$05IY+
z5PtQUATa`vv*3V!JrdKs5u2BI!nFLmsQ*e1xanytl4@4$?`W^cxUKUN+{th60De$5
zoF3eXF63O*kIMA+mWvavc
dY
zG+}Vmzv+>op=tIhv5NM&QA8qIa*wQ-T);s%N;Pk|`5xBJcl1ElMpu%(3~~q@QWGPd
z7xvcZ|M{+{(+345HA)-ZEP^j^r`VEuB}k4jXnq63gKD78jm*2JPK|D@Vg!5<{IpX0
zhM+^w6crmn9?2{l5kUMNmpzpWYpK2FI87uAFY|lU-f|M{L0i|pHn~N&u7)Q62Sq@-
zzm4w
#;BU?McxrxmSJb=do_;Wwv_zDl;@xb@UX-|sVj%kjvrdG{B
zLAR&C{j82#@T@!6M<*fDg|%63JRRD(+9(RL*ozlNpjJTmA}t}E0W$Vx;>jFVu;aiP
zt|M+d_!4%#BqgQMQfqxsOYQS8C&O*AnExg!6e#^@7jDy8c6wO5{k39%8_VY&g2F=(
zLOV9kJq|eG#R_X|u*Cr3X$U0Gy77oM`a19nee3}b
z+G2O~Wg+XCIboj72}{bIf$EOHnG@>GZQu&v+5Pq<7vm31HT$8gIekc&^ppXX;#kiY<8p}_%CzBmOPQ%p4oMVa6H
z^5SZsV4?)_CNOBh
a$lT0opQSU>1@r)a