From 3da8608cf187cb6c7b547819c157166a472ea8aa Mon Sep 17 00:00:00 2001 From: DungTT Date: Wed, 22 Jul 2026 10:13:19 +0700 Subject: [PATCH] UI Phenikaa --- web-client/index.html | 6 - web-client/package-lock.json | 115 +++++- web-client/package.json | 8 +- web-client/src/main.jsx | 121 +++--- web-client/src/styles.css | 407 +++++++++++++++++-- web-server/package-lock.json | 17 + web-server/package.json | 2 + web-server/public/css/styles.css | 480 ++++++++++++++++++++--- web-server/public/js/app.js | 89 ++++- web-server/server.js | 2 + web-server/views/auth.ejs | 5 +- web-server/views/confirm-email-sent.ejs | 5 +- web-server/views/partials/page-start.ejs | 5 +- 13 files changed, 1079 insertions(+), 183 deletions(-) diff --git a/web-client/index.html b/web-client/index.html index c5b13fc..62a6a28 100644 --- a/web-client/index.html +++ b/web-client/index.html @@ -5,12 +5,6 @@ Robot Installer - - -
diff --git a/web-client/package-lock.json b/web-client/package-lock.json index e3161e8..9a6d22b 100644 --- a/web-client/package-lock.json +++ b/web-client/package-lock.json @@ -8,13 +8,13 @@ "name": "robot-installer-web-client", "version": "1.0.0", "dependencies": { + "@fluentui/react-icons": "^2.0.333", + "@fontsource-variable/montserrat": "^5.3.0", "@vitejs/plugin-react": "^5.0.0", - "lucide-react": "^0.468.0", "react": "^19.0.0", "react-dom": "^19.0.0", "vite": "^7.0.0" - }, - "devDependencies": {} + } }, "node_modules/@babel/code-frame": { "version": "7.29.0", @@ -234,6 +234,15 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/runtime": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz", + "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==", + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/template": { "version": "7.28.6", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz", @@ -279,6 +288,12 @@ "node": ">=6.9.0" } }, + "node_modules/@emotion/hash": { + "version": "0.9.2", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz", + "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==", + "license": "MIT" + }, "node_modules/@esbuild/aix-ppc64": { "version": "0.27.7", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.7.tgz", @@ -695,6 +710,64 @@ "node": ">=18" } }, + "node_modules/@fluentui/react-icons": { + "version": "2.0.333", + "resolved": "https://registry.npmjs.org/@fluentui/react-icons/-/react-icons-2.0.333.tgz", + "integrity": "sha512-HvS5kKw9tGweI3Poy6OGAiFqrt6HGElO46DFhNBeoIQRK/q35mZ2ep0u762MFuvOfLX3bVGSB8frORFTjh1E7A==", + "license": "MIT", + "dependencies": { + "@griffel/react": "^1.6.1", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "react": ">=16.8.0 <20.0.0" + } + }, + "node_modules/@fontsource-variable/montserrat": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/@fontsource-variable/montserrat/-/montserrat-5.3.0.tgz", + "integrity": "sha512-7PaZoxaxrWLAyrhO46v65An9LhUhfkTExWLhfbywYZCnZEgg/W1rEHnlNmZKjNZ3nJTVYyicqxlJt10z/26yTA==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, + "node_modules/@griffel/core": { + "version": "1.21.3", + "resolved": "https://registry.npmjs.org/@griffel/core/-/core-1.21.3.tgz", + "integrity": "sha512-FMnlwhtmCRWvXEg2j/6W90wzvW+PFqdrsWFslfmxwS6l9X73gO0dnndKphht9ZOsJODvmLdqlnU1Lh8igg2mKw==", + "license": "MIT", + "dependencies": { + "@emotion/hash": "^0.9.0", + "@griffel/style-types": "^1.4.2", + "csstype": "^3.2.3", + "rtl-css-js": "^1.16.1", + "stylis": "^4.4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@griffel/react": { + "version": "1.7.6", + "resolved": "https://registry.npmjs.org/@griffel/react/-/react-1.7.6.tgz", + "integrity": "sha512-hqkbKRfSN/jKvPFzMoaA+gzoA9INfDyDqt7ypHOJP3KjZWp+n5f/QxLpmvqE3ssqDDS7YsFKN6qPmYBRC2SA7w==", + "license": "MIT", + "dependencies": { + "@griffel/core": "^1.21.3", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "react": ">=16.14.0 <20.0.0" + } + }, + "node_modules/@griffel/style-types": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/@griffel/style-types/-/style-types-1.4.2.tgz", + "integrity": "sha512-MsSghfpyxR2MpTrYdcCozISsSLkmFjNw94wNPi4bDBRLW8W43718W/ZjmUdVkoM0KXMtJPYuEkx8Mzibqb03qA==", + "license": "MIT", + "dependencies": { + "csstype": "^3.2.3" + } + }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.13", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz", @@ -1248,6 +1321,12 @@ "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", "license": "MIT" }, + "node_modules/csstype": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz", + "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==", + "license": "MIT" + }, "node_modules/debug": { "version": "4.4.3", "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz", @@ -1400,15 +1479,6 @@ "yallist": "^3.0.2" } }, - "node_modules/lucide-react": { - "version": "0.468.0", - "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.468.0.tgz", - "integrity": "sha512-6koYRhnM2N0GGZIdXzSeiNwguv1gt/FAjZOiPl76roBi3xKEXa4WmfpxgQwTTL4KipXjefrnf3oV4IsYhi4JFA==", - "license": "ISC", - "peerDependencies": { - "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc" - } - }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", @@ -1562,6 +1632,15 @@ "fsevents": "~2.3.2" } }, + "node_modules/rtl-css-js": { + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz", + "integrity": "sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.1.2" + } + }, "node_modules/scheduler": { "version": "0.27.0", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz", @@ -1586,6 +1665,12 @@ "node": ">=0.10.0" } }, + "node_modules/stylis": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.4.0.tgz", + "integrity": "sha512-5Z9ZpRzfuH6l/UAvCPAPUo3665Nk2wLaZU3x+TLHKVzIz33+sbJqbtrYoC3KD4/uVOr2Zp+L0LySezP9OHV9yA==", + "license": "MIT" + }, "node_modules/tinyglobby": { "version": "0.2.16", "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz", @@ -1602,6 +1687,12 @@ "url": "https://github.com/sponsors/SuperchupuDev" } }, + "node_modules/tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", + "license": "0BSD" + }, "node_modules/update-browserslist-db": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz", diff --git a/web-client/package.json b/web-client/package.json index 45eba9f..08d00a8 100644 --- a/web-client/package.json +++ b/web-client/package.json @@ -10,11 +10,11 @@ "preview": "vite preview --host 0.0.0.0" }, "dependencies": { + "@fluentui/react-icons": "^2.0.333", + "@fontsource-variable/montserrat": "^5.3.0", "@vitejs/plugin-react": "^5.0.0", - "vite": "^7.0.0", "react": "^19.0.0", "react-dom": "^19.0.0", - "lucide-react": "^0.468.0" - }, - "devDependencies": {} + "vite": "^7.0.0" + } } diff --git a/web-client/src/main.jsx b/web-client/src/main.jsx index 478e6b0..452bb26 100644 --- a/web-client/src/main.jsx +++ b/web-client/src/main.jsx @@ -1,30 +1,31 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { createRoot } from 'react-dom/client'; import { - Activity, - AlertCircle, - Box, - CheckCircle2, - Clipboard, - Cpu, - Download, - ExternalLink, - HardDrive, - Loader2, - PackageCheck, - Play, - PlugZap, - RefreshCcw, - RotateCcw, - Search, - Server, - Settings, - ShieldCheck, - Trash2, - WifiOff, - X, - XCircle -} from 'lucide-react'; + ArrowCounterclockwise20Regular as RotateCcw, + ArrowDownload20Regular as Download, + ArrowSync20Regular as RefreshCcw, + Board20Regular as Cpu, + Bot24Filled as PackageCheck, + Box20Regular as Box, + CheckmarkCircle20Filled as CheckCircle2, + Clipboard20Regular as Clipboard, + Delete20Regular as Trash2, + Dismiss20Regular as X, + ErrorCircle20Filled as XCircle, + HardDrive20Regular as HardDrive, + Open20Regular as ExternalLink, + Play20Filled as Play, + PlugConnected20Regular as PlugZap, + Pulse20Regular as Activity, + Search20Regular as Search, + Server20Regular as Server, + Settings20Regular as Settings, + ShieldCheckmark20Filled as ShieldCheck, + SpinnerIos20Regular as Loader2, + Warning20Filled as AlertCircle, + WifiOff20Regular as WifiOff +} from '@fluentui/react-icons'; +import '@fontsource-variable/montserrat'; import { DEFAULT_AGENT_BASE_URL, DEFAULT_PACKAGE_BASE_URL, @@ -755,7 +756,7 @@ function App() {