Use material UI

.gitignore

@@ -164,4 +164,5 @@ node_modules
 
 
 assets/*
-templates/*
+templates/*
+.DS_Store

doc/USAGE.md

@@ -1,45 +1,82 @@
 # How to Use the Web Page
 
-> **Note:** Currently, only the desktop version is fully supported. However, it can be used on mobile devices with minor issues.
-
 ## Login
+
+PC:
+
 ![Login Screenshot](/doc/images/screenshots/login.png)
 
+Mobile:
+
+![Login Screenshot mobile](/doc/images/screenshots/login_mobile.png)
+
 ## Status Page
 The status page allows you to view the current download statuses for the selected device.
 
+PC:
+
 ![Status Screenshot](/doc/images/screenshots/status.png)
 
+Mobile:
+
+![Status Screenshot mobile](/doc/images/screenshots/status_mobile.png)
+
 ## Settings Page
-1. Click on your username and select **Settings** from the dropdown menu.
+In the settings, you can configure your Ncore credentials if you want and change the login password for this page.
+
+PC:
 
-   ![User Dropdown Screenshot](/doc/images/screenshots/user_dropdown.png)
+![Settings Screenshot](/doc/images/screenshots/settings.png)
 
-2. In the settings, you can configure your Ncore credentials if you want and change the login password for this page.
+Mobile:
 
-   ![Settings Screenshot](/doc/images/screenshots/settings.png)
+![Settings Screenshot mobile](/doc/images/screenshots/settings_mobile.png)
 
 ## Devices Page
 On the devices page, you can add or delete devices. Each device corresponds to one client (1 device ↔ 1 client).
 
 > **Note:** device name should be unique
 
+PC:
+
 ![Devices Screenshot](/doc/images/screenshots/devices.png)
 
+Mobile:
+
+![Devices Screenshot mobile](/doc/images/screenshots/devices_mobile.png)
+
 - The **Active** badge indicates that the client is connected to the server. It can send download statuses and download torrents from the server.
-- Clicking on the token will copy it to your clipboard. This token is required for configuring the client.
+- Click the copy button on the device card to copy the token to your clipboard. This token is required for configuring the client.
+
+   PC:
 
    ![Device Token Screenshot](/doc/images/screenshots/devices_token.png)
 
-- To configure device settings, click the gear icon in the top-right corner. Here, you can define the download path for each category and share the device with multiple users.
+   Mobile:
+
+   ![Device Token Screenshot mobile](/doc/images/screenshots/devices_token_mobile.png)
+
+- To configure device settings, click the gear icon in the left-bottom corner. Here, you can define the download path for each category and share the device with multiple users.
+
+   PC:
 
    ![Device Settings Screenshot](/doc/images/screenshots/device_setting.png)
 
+   Mobile:
+
+   ![Device Settings Screenshot mobile](/doc/images/screenshots/device_setting_mobile.png)
+
 ## Download Page
 The download page allows you to search Ncore content and filter results by category.
 
+PC:
+
 ![Download Screenshot](/doc/images/screenshots/download.png)
 
+Mobile:
+
+![Download Screenshot mobile](/doc/images/screenshots/download_mobile.png)
+
 - If you have only one device, clicking the **Download** button will add the item to the download queue.
 - If you have multiple devices, a dropdown menu will appear, allowing you to select the target device.
 
@@ -48,10 +85,22 @@ The download page allows you to search Ncore content and filter results by categ
 ## IMDb Integration
 You can search for movies on IMDb (via OMDb). In the search results, clicking the **Download** button will redirect you to the download page, pre-filtered by the selected movie's IMDb ID.
 
+PC:
+
 ![IMDb Screenshot](/doc/images/screenshots/imdb.png)
 
+Mobile:
+
+![IMDb Screenshot mobile](/doc/images/screenshots/imdb_mobile.png)
+
 ## Admin Page
 
 Admins have the ability to create and delete users. Only administrators are permitted to create new users.
 
-![Admin Screenshot](/doc/images/screenshots/admin.png)
+PC:
+
+![Admin Screenshot](/doc/images/screenshots/admin.png)
+
+Mobile:
+
+![Admin Screenshot mobile](/doc/images/screenshots/admin_mobile.png)

frontend/index.html

@@ -1,6 +1,12 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <style>
+      html, body, #root {
+        height: 100%;
+      }
+    </style>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta charset="utf-8" />
     <link rel="icon" href="favicon.png" />
     <title>CDM</title>

frontend/package.json

@@ -3,17 +3,22 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^7.1.0",
+    "@mui/material": "^7.1.0",
+    "@mui/types": "^7.4.2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "bootstrap": "^5.3.6",
     "i18next": "^24.2.3",
+    "icons-material,": "link:@mui/icons-material,",
+    "material,": "link:@mui/material,",
     "react": "^19.1.0",
-    "react-bootstrap": "^2.10.9",
-    "react-bootstrap-icons": "^1.11.5",
     "react-dom": "^19.1.0",
     "react-i18next": "^15.5.1",
     "react-router": "^7.6.0",
+    "styled,": "link:@emotion/styled,",
     "web-vitals": "^4.2.4"
   },
   "devDependencies": {