[init]初始化項目

2024-04-27 16:27:48 +08:00 · 2024-04-27 16:27:48 +08:00 · e9ffac3f1b
commit e9ffac3f1b
66 changed files with 6301 additions and 0 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1,4 @@
+node_modules
+dist
+out
+.gitignore
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -0,0 +1,9 @@
+module.exports = {
+  plugins: ['solid'],
+  extends: [
+    'eslint:recommended',
+    'plugin:solid/recommended',
+    '@electron-toolkit',
+    '@electron-toolkit/eslint-config-prettier'
+  ]
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,5 @@
+node_modules
+dist
+out
+.DS_Store
+*.log*
--- a/.idea/.gitignore
+++ b/.idea/.gitignore
@ -0,0 +1,5 @@
+# 默认忽略的文件
+/shelf/
+/workspace.xml
+# 基于编辑器的 HTTP 客户端请求
+/httpRequests/
--- a/.idea/codeStyles/Project.xml
+++ b/.idea/codeStyles/Project.xml
@ -0,0 +1,68 @@
+<component name="ProjectCodeStyleConfiguration">
+  <code_scheme name="Project" version="173">
+    <HTMLCodeStyleSettings>
+      <option name="HTML_ATTRIBUTE_WRAP" value="0" />
+      <option name="HTML_TEXT_WRAP" value="0" />
+      <option name="HTML_ALIGN_TEXT" value="true" />
+      <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
+    </HTMLCodeStyleSettings>
+    <JSCodeStyleSettings version="0">
+      <option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="USE_DOUBLE_QUOTES" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </JSCodeStyleSettings>
+    <TypeScriptCodeStyleSettings version="0">
+      <option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="USE_DOUBLE_QUOTES" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </TypeScriptCodeStyleSettings>
+    <VueCodeStyleSettings>
+      <option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
+      <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
+    </VueCodeStyleSettings>
+    <editorconfig>
+      <option name="ENABLED" value="false" />
+    </editorconfig>
+    <codeStyleSettings language="HTML">
+      <option name="SOFT_MARGINS" value="100" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="JavaScript">
+      <option name="SOFT_MARGINS" value="100" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+        <option name="SMART_TABS" value="true" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="TypeScript">
+      <option name="SOFT_MARGINS" value="100" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="Vue">
+      <option name="SOFT_MARGINS" value="100" />
+      <indentOptions>
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+  </code_scheme>
+</component>
--- a/.idea/codeStyles/codeStyleConfig.xml
+++ b/.idea/codeStyles/codeStyleConfig.xml
@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
+  </state>
+</component>
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/zph.iml" filepath="$PROJECT_DIR$/.idea/zph.iml" />
+    </modules>
+  </component>
+</project>
--- a/.idea/runConfigurations/Dev.xml
+++ b/.idea/runConfigurations/Dev.xml
@ -0,0 +1,13 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="Dev" type="js.build_tools.npm" activateToolWindowBeforeRun="false">
+    <package-json value="$PROJECT_DIR$/package.json" />
+    <command value="run" />
+    <scripts>
+      <script value="dev" />
+    </scripts>
+    <node-interpreter value="project" />
+    <package-manager value="pnpm" />
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>
--- a/.idea/zph.iml
+++ b/.idea/zph.iml
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
--- a/.npmrc
+++ b/.npmrc
@ -0,0 +1 @@
+shamefully-hoist=true
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1,6 @@
+out
+dist
+pnpm-lock.yaml
+LICENSE.md
+tsconfig.json
+tsconfig.*.json
--- a/.prettierrc.yaml
+++ b/.prettierrc.yaml
@ -0,0 +1,4 @@
+singleQuote: true
+semi: false
+printWidth: 100
+trailingComma: none
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,3 @@
+{
+  "recommendations": ["dbaeumer.vscode-eslint"]
+}
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@ -0,0 +1,39 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug Main Process",
+      "type": "node",
+      "request": "launch",
+      "cwd": "${workspaceRoot}",
+      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-vite",
+      "windows": {
+        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-vite.cmd"
+      },
+      "runtimeArgs": ["--sourcemap"],
+      "env": {
+        "REMOTE_DEBUGGING_PORT": "9222"
+      }
+    },
+    {
+      "name": "Debug Renderer Process",
+      "port": 9222,
+      "request": "attach",
+      "type": "chrome",
+      "webRoot": "${workspaceFolder}/src/renderer",
+      "timeout": 60000,
+      "presentation": {
+        "hidden": true
+      }
+    }
+  ],
+  "compounds": [
+    {
+      "name": "Debug All",
+      "configurations": ["Debug Main Process", "Debug Renderer Process"],
+      "presentation": {
+        "order": 1
+      }
+    }
+  ]
+}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,11 @@
+{
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}
--- a/README.md
+++ b/README.md
@ -0,0 +1,3 @@
+# zph
+
+ZygoPresentationHelper
--- a/build/entitlements.mac.plist
+++ b/build/entitlements.mac.plist
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+  <dict>
+    <key>com.apple.security.cs.allow-jit</key>
+    <true/>
+    <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
+    <true/>
+    <key>com.apple.security.cs.allow-dyld-environment-variables</key>
+    <true/>
+  </dict>
+</plist>
--- a/build/icon.icns
+++ b/build/icon.icns
--- a/build/icon.ico
+++ b/build/icon.ico
--- a/build/icon.png
+++ b/build/icon.png
--- a/dev-app-update.yml
+++ b/dev-app-update.yml
@ -0,0 +1,3 @@
+provider: generic
+url: https://example.com/auto-updates
+updaterCacheDirName: zph-updater
--- a/electron-builder.yml
+++ b/electron-builder.yml
@ -0,0 +1,42 @@
+appId: com.electron.app
+productName: zph
+directories:
+  buildResources: build
+files:
+  - '!**/.vscode/*'
+  - '!src/*'
+  - '!electron.vite.config.{js,ts,mjs,cjs}'
+  - '!{.eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}'
+  - '!{.env,.env.*,.npmrc,pnpm-lock.yaml}'
+asarUnpack:
+  - resources/**
+win:
+  executableName: zph
+nsis:
+  artifactName: ${name}-${version}-setup.${ext}
+  shortcutName: ${productName}
+  uninstallDisplayName: ${productName}
+  createDesktopShortcut: always
+mac:
+  entitlementsInherit: build/entitlements.mac.plist
+  extendInfo:
+    - NSCameraUsageDescription: Application requests access to the device's camera.
+    - NSMicrophoneUsageDescription: Application requests access to the device's microphone.
+    - NSDocumentsFolderUsageDescription: Application requests access to the user's Documents folder.
+    - NSDownloadsFolderUsageDescription: Application requests access to the user's Downloads folder.
+  notarize: false
+dmg:
+  artifactName: ${name}-${version}.${ext}
+linux:
+  target:
+    - AppImage
+    - snap
+    - deb
+  maintainer: electronjs.org
+  category: Utility
+appImage:
+  artifactName: ${name}-${version}.${ext}
+npmRebuild: false
+publish:
+  provider: generic
+  url: https://example.com/auto-updates
--- a/electron.vite.config.mjs
+++ b/electron.vite.config.mjs
@ -0,0 +1,21 @@
+import { resolve } from 'path'
+import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
+import solid from 'vite-plugin-solid'
+import UnoCSS from 'unocss/vite'
+
+export default defineConfig({
+  main: {
+    plugins: [externalizeDepsPlugin()]
+  },
+  preload: {
+    plugins: [externalizeDepsPlugin()]
+  },
+  renderer: {
+    resolve: {
+      alias: {
+        '@renderer': resolve('src/renderer/src')
+      }
+    },
+    plugins: [solid(),UnoCSS(),]
+  }
+})
--- a/package.json
+++ b/package.json
@ -0,0 +1,44 @@
+{
+  "name": "zph",
+  "version": "1.0.0",
+  "description": "An Electron application with Solid",
+  "main": "./out/main/index.js",
+  "author": "example.com",
+  "homepage": "https://electron-vite.org",
+  "scripts": {
+    "format": "prettier --write .",
+    "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
+    "start": "electron-vite preview",
+    "dev": "electron-vite dev",
+    "build": "electron-vite build",
+    "postinstall": "electron-builder install-app-deps",
+    "build:unpack": "npm run build && electron-builder --dir",
+    "build:win": "npm run build && electron-builder --win",
+    "build:mac": "npm run build && electron-builder --mac",
+    "build:linux": "npm run build && electron-builder --linux"
+  },
+  "dependencies": {
+    "@electron-toolkit/preload": "^3.0.0",
+    "@electron-toolkit/utils": "^3.0.0",
+    "@unocss/reset": "^0.59.2",
+    "electron-updater": "^6.1.7",
+    "koffi": "^2.8.6"
+  },
+  "devDependencies": {
+    "@electron-toolkit/eslint-config": "^1.0.2",
+    "@electron-toolkit/eslint-config-prettier": "^2.0.0",
+    "@electron/rebuild": "^3.6.0",
+    "@unocss/transformer-directives": "^0.59.2",
+    "@unocss/transformer-variant-group": "^0.59.2",
+    "electron": "^28.2.0",
+    "electron-builder": "^24.9.1",
+    "electron-vite": "^2.0.0",
+    "eslint": "^8.56.0",
+    "eslint-plugin-solid": "^0.13.1",
+    "prettier": "^3.2.4",
+    "solid-js": "^1.8.12",
+    "unocss": "^0.59.2",
+    "vite": "^5.0.12",
+    "vite-plugin-solid": "^2.9.1"
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/resources/icon.png
+++ b/resources/icon.png
--- a/src/main/helpers/bufferCastInt32.js
+++ b/src/main/helpers/bufferCastInt32.js
@ -0,0 +1,12 @@
+import * as os from "os";
+
+/**
+ * 獲取系統的字節序，並輸出為32為整形
+ * @param buf{Buffer}
+ * @return number
+* */
+const bufferCastInt32 = function (buf) {
+	return os.endianness() === "LE" ? buf.readInt32LE() : buf.readInt32BE();
+};
+
+export { bufferCastInt32 };
--- a/src/main/index.js
+++ b/src/main/index.js
@ -0,0 +1,92 @@
+import {app, BrowserWindow, ipcMain, shell} from 'electron';
+import {join} from 'path';
+import {electronApp, is, optimizer} from '@electron-toolkit/utils';
+import icon from '../../resources/icon.png?asset';
+
+import {bufferCastInt32} from "./helpers/bufferCastInt32";
+import koffi from "koffi";
+
+const user32 = koffi.load('user32.dll');
+const SetFocus = user32.func('__stdcall', 'SetFocus', 'void *', ['void *'])
+
+function createWindow() {
+  // Create the browser window.
+  const mainWindow = new BrowserWindow({
+    width: 900,
+    height: 670,
+    show: false,
+    autoHideMenuBar: true,
+    transparent: true,
+    frame: false,
+    ...(process.platform === 'linux' ? { icon } : {}),
+    webPreferences: {
+      preload: join(__dirname, '../preload/index.js'),
+      sandbox: false,
+      backgroundThrottling: true,
+    },
+  })
+
+  mainWindow.once('ready-to-show', () => {
+    mainWindow.webContents.zoomFactor = 1.0
+  })
+
+  mainWindow.on('ready-to-show', () => {
+    mainWindow.show()
+  })
+
+  mainWindow.webContents.setWindowOpenHandler((details) => {
+    shell.openExternal(details.url)
+    return { action: 'deny' }
+  })
+
+  // HMR for renderer base on electron-vite cli.
+  // Load the remote URL for development or the local html file for production.
+  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
+    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
+  } else {
+    mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
+  }
+
+  mainWindow.on('show', () => {
+    mainWindow.webContents.zoomFactor = 1.0
+  })
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.whenReady().then(() => {
+
+  // Set app user model id for windows
+  electronApp.setAppUserModelId('com.electron')
+
+  // Default open or close DevTools by F12 in development
+  // and ignore CommandOrControl + R in production.
+  // see https://github.com/alex8088/electron-toolkit/tree/master/packages/utils
+  app.on('browser-window-created', (_, window) => {
+    optimizer.watchWindowShortcuts(window)
+  })
+
+  // IPC test
+  ipcMain.on('ping', () => console.log('pong'))
+
+  createWindow()
+
+  app.on('activate', function () {
+    // On macOS it's common to re-create a window in the app when the
+    // dock icon is clicked and there are no other windows open.
+    if (BrowserWindow.getAllWindows().length === 0) createWindow()
+  })
+})
+
+// Quit when all windows are closed, except on macOS. There, it's common
+// for applications and their menu bar to stay active until the user quits
+// explicitly with Cmd + Q.
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+// In this file you can include the rest of your app"s specific main process
+// code. You can also put them in separate files and require them here.
--- a/src/preload/index.js
+++ b/src/preload/index.js
@ -0,0 +1,20 @@
+import { contextBridge } from 'electron'
+import { electronAPI } from '@electron-toolkit/preload'
+
+// Custom APIs for renderer
+const api = {}
+
+// Use `contextBridge` APIs to expose Electron APIs to
+// renderer only if context isolation is enabled, otherwise
+// just add to the DOM global.
+if (process.contextIsolated) {
+  try {
+    contextBridge.exposeInMainWorld('electron', electronAPI)
+    contextBridge.exposeInMainWorld('api', api)
+  } catch (error) {
+    console.error(error)
+  }
+} else {
+  window.electron = electronAPI
+  window.api = api
+}
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Electron</title>
+    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
+    />
+  </head>
+
+  <body style="background-color: transparent;">
+    <div id="root" style="background-color: transparent;"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/src/renderer/src/App.jsx
+++ b/src/renderer/src/App.jsx
@ -0,0 +1,246 @@
+import {
+    iconCursor,
+    iconPen,
+    iconEraser,
+    iconClock,
+    iconMore,
+    iconTrash,
+    iconUndo,
+    iconRedo,
+    iconLassoSelect,
+    iconShapes,
+    iconScissors,
+    iconWandSparkles,
+    iconBlackBoard,
+    iconRuler,
+    iconAddPictures,
+    iconHistory,
+    iconDianming,
+    iconMonitorX,
+    iconGrid,
+    iconEyeOff,
+    iconText,
+    iconHand, iconArrowLeft, iconArrowRight, iconListDetails, iconSolidCursor, iconSolidPen, brandTransparentWatermark
+} from "./Imports";
+import {createSignal, For} from "solid-js";
+import gest from "./utils/gest"
+import "./styles/index.css"
+
+/**
+ * 根據傳入的工具欄圖標Array計算工具欄的絕對width
+ * @param toolbarItems{Array<{
+ *         name:string, icon, solidIcon,
+ *         type: "button" | "separator" | "pagination-indicator",
+ *         action: string,
+ *     }>} 傳入工具欄圖標Array
+ * @param paddingX{number} 傳入工具欄兩側的tailwind Padding（1=0.25rem）量
+* */
+function caculateToolbarIconsWidthREM(toolbarItems,paddingX) {
+    const total = toolbarItems.map((toolbarItem) => {
+        if (toolbarItem.type==="button") {
+            return 8;
+        } else if (toolbarItem.type==="separator") {
+            return 1.5;
+        } else if (toolbarItem.type==="pagination-indicator") {
+            return 18;
+        }
+    })
+    return (total.reduce((a,b)=>(a+b))+(paddingX*2))/4;
+}
+
+/**
+ * 定義單個工具欄按鈕的Solid組件
+ * @param props{{
+ *     item: {
+ *         name:string, icon, solidIcon,
+ *         type: "button" | "separator" | "pagination-indicator",
+ *         action: string,
+ *     }, toolbarSignal, setToolbarSignal,
+ * }} 傳入工具欄按鈕的相關選項。
+* */
+function ToolBarButton(props) {
+    const v = props.item;
+    const toolbarSignal = props.toolbarSignal;
+    const setToolbarSignal = props.setToolbarSignal;
+    return (
+        <div onClick={() => {
+            if (v.action === "drawer") {
+                setToolbarSignal({
+                    ...toolbarSignal(),
+                    isDrawerOpen: !toolbarSignal().isDrawerOpen
+                });
+            } else if (v.action){
+                setToolbarSignal({
+                    ...toolbarSignal(),
+                    activeTool: v.action,
+                })
+            }
+        }}
+             classList={{
+                 "toolbar-item": v.type !== "pagination-indicator",
+                 "toolbar-item-separator": v.type === "separator",
+                 "toolbar-item-pagination-indicator": v.type === "pagination-indicator",
+                 "toolbar-item-active": toolbarSignal().activeTool===v.action
+             }} use:gest={null}>
+            {v.type === "separator" ? <div/> : v.type === 'button' ? (
+                <>
+                    {v.action === "drawer" && toolbarSignal().isDrawerOpen === true ? (
+                        <div class="drawer-open-button-state">
+                            <img class="h-5 w-5" src={v.icon} alt={v.name}/>
+                        </div>
+                    ) : <>
+                        <img class="icon" src={v.icon} alt={v.name}/>
+                        <img class="icon-solid" src={v.solidIcon??v.icon} alt={v.name}/>
+                    </>}
+                    <div class="tb-animate-bg"><div/></div>
+                </>
+            ) : v.type === "pagination-indicator" ? <>
+                <div class="pagination-indicator">
+                    <div class="now-page-text">123</div>
+                    <div class="total-page-text">/500</div>
+                </div>
+            </> : void 0}
+        </div>
+    )
+}
+function App() {
+
+    const [toolbarSignal, setToolbarSignal] = createSignal({
+        isDrawerOpen: false,
+        activeTool: "mouse",
+        backgroundColor: ""
+    });
+
+    const [toolbarItems, setToolbarItems] = createSignal([
+        {type: 'button', icon: iconCursor, solidIcon: iconSolidCursor, name: "鼠標模式", action: "mouse"},
+        {type: 'button', icon: iconPen, solidIcon: iconSolidPen, name: "批註模式", action: "pen"},
+        {type: 'button', icon: iconEraser, name: "橡皮擦模式"},
+        {type: 'button', icon: iconTrash, name: "清空畫布"},
+        {type: "separator"},
+        {type: "button", icon: iconBlackBoard, name: "小黑板"},
+        {type: "button", icon: iconShapes, name: "形狀與幾何工具"},
+        {type: "button", icon: iconUndo, name: "撤銷操作"},
+        {type: "button", icon: iconRedo, name: "重做操作"},
+        {type: "separator"},
+        {type: "button", action: "hidden", icon: iconEyeOff, name: "隱藏"},
+        {type: "button", action: "drawer", icon: iconMore}
+    ])
+
+    const [leftBottomSidebarItems, setLeftBottomSidebarItems] = createSignal([
+        {type: 'button', icon: iconArrowLeft, name: "上一頁"},
+        {type: "separator"},
+        {type: "pagination-indicator"},
+        {type: "separator"},
+        {type: 'button', icon: iconArrowRight, name: "下一頁"},
+    ])
+    const [rightBottomSidebarItems, setRightBottomSidebarItems] = createSignal([
+        {type: 'button', icon: iconListDetails, name: "頁面列表"},
+        {type: "separator"},
+        {type: 'button', icon: iconArrowLeft, name: "上一頁"},
+        {type: 'button', icon: iconArrowRight, name: "下一頁"},
+    ])
+
+    const [drawerItems, setDrawerItems] = createSignal([
+        {icon: iconClock, name: "計時器"},
+        {icon: iconLassoSelect, name: "套索選擇"},
+        {icon: iconWandSparkles, name: "魔法棒"},
+        {icon: iconScissors, name: "截圖"},
+        {icon: iconRuler, name: "尺規"},
+        {icon: iconAddPictures, name: "加圖片"},
+        {icon: iconText, name: "加文本"},
+        {icon: iconHistory, name: "歷史記錄"},
+        {icon: iconDianming, name: "隨機點名"},
+        {icon: iconHand, name: "漫遊"}
+    ])
+
+  return (
+    <>
+        <div class="zph-container window-border window-black">
+            {/*Main Toolbar*/}
+            <div class="main-toolbar-container" data-mode={toolbarSignal().isDrawerOpen ? "drawer" : "default"}>
+                <div classList={{
+                    "bg-zinc-900/80": !(["red","green"].includes(toolbarSignal().backgroundColor)),
+                    "bg-red-900/85": toolbarSignal().backgroundColor==="red",
+                    "bg-green-900/85": toolbarSignal().backgroundColor==="green",
+                }} style={{"width": caculateToolbarIconsWidthREM(toolbarItems(), 1) + "rem"}}>
+                    <div class="absolute-toolbar-space">
+                        <div class="drawer-container">
+                            <div class="drawer-items">
+                                <For each={drawerItems()}>
+                                    {(v, _) => (
+                                        <div class="drawer-item">
+                                            <img class="h-6.15 w-6.15" src={v.icon} alt={v.name}/>
+                                            <div class="drawer-item-text">{v.name}</div>
+                                        </div>
+                                    )}
+                                </For>
+                            </div>
+                            <div class="drawer-bottom-separator">
+                                <div/>
+                            </div>
+                        </div>
+                        <div class="toolbar-buttons relative">
+                            <For each={toolbarItems()}>
+                                {(v, _) => (<ToolBarButton item={v} toolbarSignal={toolbarSignal} setToolbarSignal={setToolbarSignal}/>)}
+                            </For>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {/*Main Toolbar Right Container*/}
+            <div class="toolbar-right-container">
+                <div style={{"width": (caculateToolbarIconsWidthREM(toolbarItems(), 1) + 2.8) + "rem"}}/>
+                <div class="end-slideshow-button">
+                    <img class="h-5 w-5" src={iconMonitorX} alt=""/>
+                </div>
+            </div>
+            {/*Main Toolbar Left Container*/}
+            <div class="toolbar-left-container">
+                <div classList={{
+                    "mainmenu-button": true,
+                    "bg-zinc-900/75": !(["red","green"].includes(toolbarSignal().backgroundColor)),
+                    "bg-red-900/75": toolbarSignal().backgroundColor==="red",
+                    "bg-green-900/75": toolbarSignal().backgroundColor==="green",
+                }}>
+                    <img class="h-5 w-5" src={iconGrid} alt=""/>
+                </div>
+                <div style={{"width": (caculateToolbarIconsWidthREM(toolbarItems(), 1) + 2.8) + "rem"}}/>
+            </div>
+            <div class="bottom-sidebar-container _left">
+                <div classList={{
+                    "bg-zinc-900/80": !(["red","green"].includes(toolbarSignal().backgroundColor)),
+                    "bg-red-900/85": toolbarSignal().backgroundColor==="red",
+                    "bg-green-900/85": toolbarSignal().backgroundColor==="green",
+                }} style={{"width": caculateToolbarIconsWidthREM(leftBottomSidebarItems(), 1) + "rem"}}>
+                    <div class="absolute-bottom-sidebar-space">
+                        <div class="toolbar-buttons relative">
+                            <For each={leftBottomSidebarItems()}>
+                                {(v, _) => (<ToolBarButton item={v} toolbarSignal={toolbarSignal} setToolbarSignal={setToolbarSignal}/>)}
+                            </For>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="bottom-sidebar-container _right">
+                <div classList={{
+                    "bg-zinc-900/80": !(["red","green"].includes(toolbarSignal().backgroundColor)),
+                    "bg-red-900/85": toolbarSignal().backgroundColor==="red",
+                    "bg-green-900/85": toolbarSignal().backgroundColor==="green",
+                }} style={{"width": caculateToolbarIconsWidthREM(rightBottomSidebarItems(), 1) + "rem"}}>
+                    <div class="absolute-bottom-sidebar-space">
+                        <div class="toolbar-buttons relative">
+                            <For each={rightBottomSidebarItems()}>
+                                {(v, _) => (<ToolBarButton item={v} toolbarSignal={toolbarSignal} setToolbarSignal={setToolbarSignal}/>)}
+                            </For>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {/*Watermark*/}
+            <img src={brandTransparentWatermark} class="brand-watermark" alt="watermark"/>
+        </div>
+    </>
+  )
+}
+
+export default App
--- a/src/renderer/src/Imports.js
+++ b/src/renderer/src/Imports.js
@ -0,0 +1,32 @@
+import iconCursor from './assets/icons/lined/cursor.svg';
+import iconPen from './assets/icons/lined/pen.svg';
+import iconEraser from './assets/icons/lined/eraser.svg';
+import iconTrash from './assets/icons/lined/trash.svg';
+import iconLassoSelect from './assets/icons/lined/lasso-select.svg';
+import iconWandSparkles from './assets/icons/lined/wand-sparkles.svg';
+import iconScissors from './assets/icons/lined/scissors.svg';
+import iconShapes from './assets/icons/lined/shapes.svg';
+import iconUndo from './assets/icons/lined/undo.svg';
+import iconRedo from './assets/icons/lined/redo.svg';
+import iconMore from './assets/icons/lined/more.svg';
+import iconClock from './assets/icons/lined/clock.svg';
+import iconBlackBoard from './assets/icons/lined/blackboard.svg';
+import iconRuler from './assets/icons/lined/ruler.svg';
+import iconAddPictures from './assets/icons/lined/add-pictures.svg';
+import iconHistory from './assets/icons/lined/history.svg';
+import iconDianming from './assets/icons/lined/dianming.svg';
+import iconMonitorX from './assets/icons/lined/monitor-x.svg';
+import iconGrid from './assets/icons/lined/grid.svg';
+import iconEyeOff from './assets/icons/lined/eye-off.svg';
+import iconText from './assets/icons/lined/text.svg';
+import iconHand from './assets/icons/lined/hand.svg';
+import iconArrowLeft from './assets/icons/lined/arrow-left.svg';
+import iconArrowRight from './assets/icons/lined/arrow-right.svg';
+import iconListDetails from './assets/icons/lined/list-details.svg';
+import iconSolidCursor from "./assets/icons/solid/cursor.svg"
+import iconSolidPen from './assets/icons/solid/pen.svg';
+
+import brandTransparentWatermark from './assets/brand/transparent.watermark.svg';
+
+export {brandTransparentWatermark};
+export {iconCursor, iconPen, iconEraser, iconTrash, iconArrowRight, iconSolidPen, iconSolidCursor, iconListDetails, iconArrowLeft, iconMonitorX, iconHand, iconText, iconEyeOff, iconGrid, iconUndo, iconHistory, iconDianming, iconAddPictures, iconRuler, iconBlackBoard, iconLassoSelect, iconClock, iconMore, iconShapes, iconScissors, iconWandSparkles, iconRedo};
--- a/src/renderer/src/assets/brand/transparent.watermark.svg
+++ b/src/renderer/src/assets/brand/transparent.watermark.svg
@ -0,0 +1,24 @@
+<svg width="3658" height="325" viewBox="0 0 3658 325" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0.387939 239.74L98.8399 49.0301H8.86394C7.55994 42.5101 6.90794 35.8814 6.90794 29.1441C6.90794 21.9721 7.55994 15.1261 8.86394 8.60605H165.996L168.604 12.5181L71.1299 202.576H163.714C165.018 209.096 165.67 215.725 165.67 222.462C165.67 229.634 165.018 236.48 163.714 243H2.66994L0.387939 239.74Z" fill="#888888" fill-opacity="0.5"/>
+    <path d="M180.365 74.4581C185.364 73.3714 189.711 72.8281 193.405 72.8281C197.317 72.6107 200.903 72.5021 204.163 72.5021C208.51 72.5021 212.965 72.6107 217.529 72.8281C222.093 73.0454 226.223 73.5887 229.917 74.4581L265.125 221.484L304.897 74.4581C312.069 73.1541 319.459 72.5021 327.065 72.5021C330.325 72.5021 333.803 72.6107 337.497 72.8281C341.192 72.8281 345.756 73.3714 351.189 74.4581L288.271 282.772C285.663 291.031 282.512 297.877 278.817 303.31C275.34 308.743 271.319 312.981 266.755 316.024C262.191 319.067 257.084 321.131 251.433 322.218C245.783 323.522 239.697 324.174 233.177 324.174C227.092 324.174 221.55 323.739 216.551 322.87C211.77 322.218 206.989 321.24 202.207 319.936C201.99 318.849 201.881 317.871 201.881 317.002C201.881 316.35 201.881 315.589 201.881 314.72C201.881 309.504 202.425 304.505 203.511 299.724C204.815 295.16 206.337 290.705 208.075 286.358C210.031 287.01 212.639 287.553 215.899 287.988C219.159 288.64 222.419 288.966 225.679 288.966C228.287 288.966 230.895 288.749 233.503 288.314C236.111 288.097 238.611 287.119 241.001 285.38C243.609 283.859 246 281.359 248.173 277.882C250.347 274.405 252.303 269.515 254.041 263.212L259.583 243C257.193 243.217 254.476 243.326 251.433 243.326C248.608 243.543 245.674 243.652 242.631 243.652C240.241 243.652 237.959 243.652 235.785 243.652C233.612 243.652 231.656 243.435 229.917 243L180.365 74.4581Z" fill="#888888" fill-opacity="0.5"/>
+    <path d="M471.155 214.964C490.932 215.399 505.494 219.854 514.839 228.33C524.184 236.589 528.857 248.433 528.857 263.864C528.857 272.992 526.466 281.251 521.685 288.64C516.904 296.247 510.384 302.658 502.125 307.874C493.866 313.09 484.086 317.111 472.785 319.936C461.484 322.761 449.313 324.174 436.273 324.174C423.233 324.174 412.149 323.087 403.021 320.914C393.893 318.958 386.395 316.133 380.527 312.438C374.876 308.743 370.747 304.179 368.139 298.746C365.748 293.313 364.553 287.336 364.553 280.816C364.553 271.036 366.835 262.995 371.399 256.692C376.18 250.389 382.483 244.847 390.307 240.066C385.308 237.023 381.288 233.329 378.245 228.982C375.42 224.418 374.007 218.659 374.007 211.704C374.007 203.445 375.746 196.708 379.223 191.492C382.7 186.276 387.808 181.277 394.545 176.496C386.938 171.063 381.07 164.434 376.941 156.61C372.812 148.786 370.747 140.093 370.747 130.53C370.747 122.054 372.377 114.23 375.637 107.058C378.897 99.6687 383.57 93.3661 389.655 88.1501C395.958 82.7167 403.564 78.4787 412.475 75.4361C421.386 72.3934 431.383 70.8721 442.467 70.8721C453.334 70.8721 463.331 72.6107 472.459 76.0881C481.587 79.3481 489.194 83.5861 495.279 88.8021C499.408 83.3687 504.516 79.348 510.601 76.74C516.686 73.9147 524.945 72.5021 535.377 72.5021C535.812 75.3274 536.138 78.1527 536.355 80.9781C536.79 83.5861 537.007 86.4114 537.007 89.4541C537.007 92.9314 536.898 96.4087 536.681 99.8861C536.464 103.363 536.029 106.949 535.377 110.644H508.971C510.058 112.817 511.036 115.425 511.905 118.468C512.774 121.511 513.209 125.531 513.209 130.53C513.209 139.006 511.579 146.939 508.319 154.328C505.276 161.5 500.712 167.694 494.627 172.91C488.542 178.126 481.044 182.255 472.133 185.298C463.44 188.341 453.551 189.862 442.467 189.862C433.122 189.862 424.754 188.884 417.365 186.928C413.67 189.319 411.388 191.927 410.519 194.752C409.65 197.36 409.215 199.859 409.215 202.25C409.215 205.727 410.302 208.553 412.475 210.726C414.866 212.899 419.538 214.095 426.493 214.312L471.155 214.964ZM429.427 248.868C424.646 248.651 420.625 249.194 417.365 250.498C414.322 251.802 411.823 253.432 409.867 255.388C408.128 257.561 406.824 259.843 405.955 262.234C405.303 264.842 404.977 267.341 404.977 269.732C404.977 277.991 408.02 283.533 414.105 286.358C420.408 289.401 428.775 290.922 439.207 290.922C452.899 290.922 463.874 288.749 472.133 284.402C480.609 280.055 484.847 274.187 484.847 266.798C484.847 264.625 484.521 262.56 483.869 260.604C483.434 258.648 482.456 256.801 480.935 255.062C479.414 253.541 477.24 252.237 474.415 251.15C471.807 250.063 468.221 249.52 463.657 249.52L429.427 248.868ZM442.793 159.87C451.921 159.87 458.441 157.262 462.353 152.046C466.482 146.83 468.547 139.658 468.547 130.53C468.547 121.402 466.482 114.23 462.353 109.014C458.441 103.581 451.921 100.864 442.793 100.864C433.448 100.864 426.71 103.581 422.581 109.014C418.452 114.23 416.387 121.402 416.387 130.53C416.387 139.658 418.452 146.83 422.581 152.046C426.71 157.262 433.448 159.87 442.793 159.87Z" fill="#888888" fill-opacity="0.5"/>
+    <path d="M629.474 246.912C615.782 246.912 603.828 244.739 593.614 240.392C583.616 235.828 575.249 229.634 568.512 221.81C561.992 213.769 556.993 204.423 553.516 193.774C550.256 183.125 548.626 171.606 548.626 159.218C548.626 146.83 550.256 135.203 553.516 124.336C556.993 113.469 561.992 104.124 568.512 96.3001C575.249 88.2587 583.616 81.9561 593.614 77.3921C603.828 72.828 615.782 70.546 629.474 70.546C643.166 70.546 655.119 72.828 665.334 77.3921C675.548 81.9561 684.024 88.2587 690.762 96.3001C697.499 104.124 702.498 113.469 705.758 124.336C709.018 135.203 710.648 146.83 710.648 159.218C710.648 171.606 709.018 183.125 705.758 193.774C702.498 204.423 697.499 213.769 690.762 221.81C684.024 229.634 675.548 235.828 665.334 240.392C655.119 244.739 643.166 246.912 629.474 246.912ZM629.474 211.704C641.644 211.704 650.338 207.249 655.554 198.338C660.987 189.21 663.704 176.17 663.704 159.218C663.704 142.266 660.987 129.335 655.554 120.424C650.338 111.296 641.644 106.732 629.474 106.732C617.52 106.732 608.827 111.296 603.394 120.424C598.178 129.335 595.57 142.266 595.57 159.218C595.57 176.17 598.178 189.21 603.394 198.338C608.827 207.249 617.52 211.704 629.474 211.704Z" fill="#888888" fill-opacity="0.5"/>
+    <path d="M747.185 7.62804C757.183 6.75872 767.289 6.10672 777.503 5.67205C787.718 5.02005 798.041 4.69406 808.473 4.69406C819.34 4.69406 830.315 5.78072 841.399 7.95406C852.701 10.1274 862.806 14.2567 871.717 20.3421C880.845 26.2101 888.235 34.4687 893.885 45.118C899.536 55.7674 902.361 69.5681 902.361 86.5201C902.361 103.472 899.536 117.273 893.885 127.922C888.235 138.354 880.954 146.613 872.043 152.698C863.132 158.783 853.135 162.913 842.051 165.086C831.185 167.259 820.426 168.346 809.777 168.346C806.952 168.346 804.235 168.346 801.627 168.346C799.237 168.129 796.955 167.911 794.781 167.694V243C790.652 243.652 786.631 244.087 782.719 244.304C778.807 244.521 775.004 244.63 771.309 244.63C767.832 244.63 764.029 244.521 759.899 244.304C755.77 244.087 751.532 243.652 747.185 243V7.62804ZM794.781 128.248C797.389 128.683 799.78 128.9 801.953 128.9C804.344 128.9 807.169 128.9 810.429 128.9C815.863 128.9 821.187 128.248 826.403 126.944C831.619 125.423 836.183 123.032 840.095 119.772C844.224 116.512 847.485 112.274 849.875 107.058C852.266 101.625 853.461 94.9961 853.461 87.1721C853.461 79.1307 852.266 72.3934 849.875 66.9601C847.485 61.3094 844.224 56.854 840.095 53.5941C836.183 50.1167 831.619 47.7261 826.403 46.422C821.187 44.9007 815.863 44.1401 810.429 44.1401C808.039 44.1401 805.757 44.2487 803.583 44.4661C801.627 44.4661 798.693 44.6834 794.781 45.118V128.248Z" fill="#888888" fill-opacity="0.5"/>
+    <path d="M937.246 74.4581C940.506 73.806 943.548 73.3714 946.374 73.1541C949.416 72.7194 952.676 72.5021 956.154 72.5021C959.414 72.5021 962.565 72.7194 965.608 73.1541C968.868 73.5887 972.019 74.132 975.062 74.784C975.714 75.8707 976.257 77.5007 976.692 79.674C977.344 81.63 977.887 83.8034 978.322 86.194C978.756 88.3674 979.082 90.6494 979.3 93.0401C979.734 95.2134 980.06 97.0607 980.278 98.5821C985.059 91.8447 990.927 85.8681 997.882 80.6521C1004.84 75.2187 1013.53 72.5021 1023.96 72.5021C1026.14 72.5021 1028.63 72.6107 1031.46 72.8281C1034.29 73.0454 1036.35 73.3714 1037.65 73.806C1038.09 75.9794 1038.41 78.4787 1038.63 81.3041C1038.85 84.1294 1038.96 87.0634 1038.96 90.1061C1038.96 93.8007 1038.74 97.8214 1038.31 102.168C1038.09 106.515 1037.55 110.644 1036.68 114.556C1034.29 114.121 1031.57 113.904 1028.53 113.904C1025.7 113.904 1023.96 113.904 1023.31 113.904C1019.62 113.904 1015.49 114.339 1010.92 115.208C1006.36 115.86 1002.01 117.816 997.882 121.076C993.752 124.336 990.275 129.226 987.45 135.746C984.842 142.266 983.538 151.394 983.538 163.13V243.326C979.626 243.978 975.714 244.413 971.802 244.63C967.89 244.847 964.086 244.956 960.392 244.956C956.697 244.956 952.894 244.847 948.982 244.63C945.287 244.413 941.375 243.978 937.246 243.326V74.4581Z" fill="#888888" fill-opacity="0.5"/>
+    <path d="M1100.47 172.91C1101.34 185.95 1105.91 195.404 1114.16 201.272C1122.42 207.14 1133.29 210.074 1146.76 210.074C1154.15 210.074 1161.65 209.422 1169.26 208.118C1177.08 206.597 1184.47 204.532 1191.43 201.924C1193.82 206.271 1195.88 211.487 1197.62 217.572C1199.36 223.657 1200.34 230.177 1200.55 237.132C1183.6 243.652 1164.48 246.912 1143.18 246.912C1127.53 246.912 1114.06 244.739 1102.75 240.392C1091.67 236.045 1082.54 230.069 1075.37 222.462C1068.42 214.638 1063.2 205.401 1059.72 194.752C1056.46 184.103 1054.83 172.475 1054.83 159.87C1054.83 147.482 1056.57 135.855 1060.05 124.988C1063.53 114.121 1068.63 104.667 1075.37 96.6261C1082.33 88.5847 1090.8 82.282 1100.8 77.718C1111.01 72.9367 1122.86 70.546 1136.33 70.546C1148.07 70.546 1158.5 72.6107 1167.63 76.74C1176.76 80.8694 1184.47 86.52 1190.77 93.692C1197.29 100.864 1202.18 109.449 1205.44 119.446C1208.7 129.226 1210.33 139.767 1210.33 151.068C1210.33 155.197 1210.12 159.327 1209.68 163.456C1209.47 167.368 1209.14 170.519 1208.7 172.91H1100.47ZM1166.65 140.636C1166.22 130.204 1163.28 121.837 1157.85 115.534C1152.63 109.014 1145.24 105.754 1135.68 105.754C1124.81 105.754 1116.56 108.797 1110.9 114.882C1105.25 120.967 1101.89 129.552 1100.8 140.636H1166.65Z" fill="#888888" fill-opacity="0.5"/>
+    <path d="M1279.29 169.65C1267.12 166.173 1257.56 161.065 1250.6 154.328C1243.87 147.373 1240.5 137.05 1240.5 123.358C1240.5 106.841 1246.37 93.9094 1258.1 84.564C1270.05 75.2187 1286.25 70.546 1306.68 70.546C1315.15 70.546 1323.52 71.3067 1331.78 72.8281C1340.04 74.3494 1348.4 76.6314 1356.88 79.674C1356.44 85.3247 1355.36 91.1927 1353.62 97.2781C1351.88 103.363 1349.82 108.688 1347.43 113.252C1342.21 111.079 1336.45 109.231 1330.15 107.71C1323.84 105.971 1317.22 105.102 1310.26 105.102C1302.87 105.102 1297.11 106.297 1292.98 108.688C1288.85 110.861 1286.79 114.447 1286.79 119.446C1286.79 124.227 1288.2 127.596 1291.03 129.552C1294.07 131.508 1298.31 133.355 1303.74 135.094L1322.32 140.636C1328.41 142.375 1333.84 144.548 1338.62 147.156C1343.62 149.547 1347.86 152.589 1351.34 156.284C1354.81 159.979 1357.53 164.543 1359.49 169.976C1361.44 175.409 1362.42 182.038 1362.42 189.862C1362.42 197.903 1360.68 205.401 1357.21 212.356C1353.95 219.311 1349.06 225.396 1342.54 230.612C1336.23 235.611 1328.52 239.631 1319.39 242.674C1310.26 245.499 1299.94 246.912 1288.42 246.912C1283.2 246.912 1278.42 246.695 1274.08 246.26C1269.73 246.043 1265.49 245.499 1261.36 244.63C1257.45 243.978 1253.54 243.109 1249.62 242.022C1245.71 240.935 1241.48 239.523 1236.91 237.784C1237.35 231.916 1238.32 226.048 1239.85 220.18C1241.58 214.095 1243.76 208.227 1246.36 202.576C1253.54 205.401 1260.27 207.575 1266.58 209.096C1273.1 210.4 1279.83 211.052 1286.79 211.052C1289.83 211.052 1293.09 210.835 1296.57 210.4C1300.26 209.748 1303.63 208.77 1306.68 207.466C1309.72 205.945 1312.22 204.097 1314.17 201.924C1316.35 199.533 1317.43 196.491 1317.43 192.796C1317.43 187.58 1315.8 183.885 1312.54 181.712C1309.5 179.321 1305.15 177.257 1299.5 175.518L1279.29 169.65Z" fill="#888888" fill-opacity="0.5"/>
+    <path d="M1433.48 172.91C1434.35 185.95 1438.91 195.404 1447.17 201.272C1455.43 207.14 1466.29 210.074 1479.77 210.074C1487.16 210.074 1494.66 209.422 1502.26 208.118C1510.09 206.597 1517.48 204.532 1524.43 201.924C1526.82 206.271 1528.89 211.487 1530.62 217.572C1532.36 223.657 1533.34 230.177 1533.56 237.132C1516.61 243.652 1497.48 246.912 1476.18 246.912C1460.53 246.912 1447.06 244.739 1435.76 240.392C1424.67 236.045 1415.55 230.069 1408.37 222.462C1401.42 214.638 1396.2 205.401 1392.73 194.752C1389.47 184.103 1387.84 172.475 1387.84 159.87C1387.84 147.482 1389.57 135.855 1393.05 124.988C1396.53 114.121 1401.64 104.667 1408.37 96.6261C1415.33 88.5847 1423.8 82.282 1433.8 77.718C1444.02 72.9367 1455.86 70.546 1469.34 70.546C1481.07 70.546 1491.5 72.6107 1500.63 76.74C1509.76 80.8694 1517.48 86.52 1523.78 93.692C1530.3 100.864 1535.19 109.449 1538.45 119.446C1541.71 129.226 1543.34 139.767 1543.34 151.068C1543.34 155.197 1543.12 159.327 1542.69 163.456C1542.47 167.368 1542.14 170.519 1541.71 172.91H1433.48ZM1499.65 140.636C1499.22 130.204 1496.29 121.837 1490.85 115.534C1485.64 109.014 1478.25 105.754 1468.68 105.754C1457.82 105.754 1449.56 108.797 1443.91 114.882C1438.26 120.967 1434.89 129.552 1433.8 140.636H1499.65Z" fill="#888888" fill-opacity="0.5"/>
+    <path d="M1579.69 74.4581C1582.74 73.806 1585.78 73.3714 1588.82 73.1541C1591.87 72.7194 1595.23 72.5021 1598.93 72.5021C1602.62 72.5021 1605.88 72.7194 1608.71 73.1541C1611.53 73.3714 1614.47 73.806 1617.51 74.4581C1618.16 75.5447 1618.71 77.1747 1619.14 79.3481C1619.79 81.3041 1620.34 83.4774 1620.77 85.868C1621.21 88.0414 1621.53 90.2147 1621.75 92.3881C1622.18 94.5614 1622.51 96.4087 1622.73 97.9301C1624.9 94.6701 1627.51 91.4101 1630.55 88.1501C1633.59 84.8901 1637.07 81.9561 1640.98 79.3481C1645.11 76.7401 1649.68 74.6754 1654.67 73.1541C1659.67 71.4154 1665.22 70.546 1671.3 70.546C1690.43 70.546 1704.77 75.762 1714.33 86.194C1724.11 96.626 1729 113.035 1729 135.42V243C1721.18 244.304 1713.46 244.956 1705.86 244.956C1698.25 244.956 1690.53 244.304 1682.71 243V147.808C1682.71 136.072 1680.86 127.053 1677.17 120.75C1673.69 114.447 1667.5 111.296 1658.59 111.296C1654.89 111.296 1651.09 111.839 1647.18 112.926C1643.27 114.013 1639.68 116.186 1636.42 119.446C1633.38 122.489 1630.88 126.835 1628.92 132.486C1626.96 138.137 1625.99 145.526 1625.99 154.654V243C1618.16 244.304 1610.45 244.956 1602.84 244.956C1595.23 244.956 1587.52 244.304 1579.69 243V74.4581Z" fill="#888888" fill-opacity="0.5"/>
+    <path d="M1775.59 109.666H1754.4L1752.77 103.146L1813.73 25.232H1821.23V74.4581H1860.68C1861.33 77.7181 1861.77 80.6521 1861.98 83.2601C1862.2 85.8681 1862.31 88.5847 1862.31 91.41C1862.31 94.4527 1862.2 97.3867 1861.98 100.212C1861.77 103.037 1861.33 106.189 1860.68 109.666H1821.23V175.844C1821.23 182.581 1821.78 188.015 1822.86 192.144C1823.95 196.273 1825.47 199.533 1827.43 201.924C1829.6 204.315 1832.21 205.945 1835.25 206.814C1838.29 207.683 1841.88 208.118 1846.01 208.118C1849.27 208.118 1852.42 207.901 1855.46 207.466C1858.72 206.814 1861.55 206.271 1863.94 205.836C1865.46 209.965 1866.55 214.312 1867.2 218.876C1867.85 223.223 1868.18 227.135 1868.18 230.612C1868.18 233.003 1868.07 235.067 1867.85 236.806C1867.85 238.327 1867.74 239.849 1867.52 241.37C1857.53 243.761 1847.2 244.956 1836.55 244.956C1816.78 244.956 1801.67 240.392 1791.24 231.264C1780.81 221.919 1775.59 206.814 1775.59 185.95V109.666Z" fill="#888888" fill-opacity="0.5"/>
+    <path d="M1979.93 165.738C1977.33 165.303 1974.5 164.977 1971.46 164.76C1968.42 164.325 1965.7 164.108 1963.31 164.108C1952.66 164.108 1944.18 166.064 1937.88 169.976C1931.79 173.671 1928.75 179.756 1928.75 188.232C1928.75 193.883 1929.95 198.229 1932.34 201.272C1934.73 204.315 1937.55 206.597 1940.81 208.118C1944.29 209.422 1947.88 210.291 1951.57 210.726C1955.48 210.943 1958.85 211.052 1961.68 211.052C1964.94 211.052 1968.2 210.835 1971.46 210.4C1974.72 209.748 1977.54 209.205 1979.93 208.77V165.738ZM1979.93 132.16C1979.93 126.944 1979.06 122.706 1977.33 119.446C1975.59 116.186 1973.2 113.687 1970.15 111.948C1967.11 109.992 1963.31 108.688 1958.74 108.036C1954.4 107.384 1949.51 107.058 1944.07 107.058C1932.34 107.058 1919.84 109.34 1906.58 113.904C1903.54 108.253 1901.26 102.929 1899.74 97.9301C1898.22 92.9314 1897.46 86.9547 1897.46 80.0001C1907.02 76.7401 1916.58 74.3494 1926.14 72.8281C1935.71 71.3067 1944.62 70.546 1952.88 70.546C1975.48 70.546 1993.08 75.9794 2005.69 86.846C2018.51 97.7127 2024.92 115.099 2024.92 139.006V236.806C2017.32 239.197 2008.08 241.479 1997.21 243.652C1986.35 245.825 1974.07 246.912 1960.37 246.912C1949.29 246.912 1939.08 245.934 1929.73 243.978C1920.6 242.022 1912.67 238.762 1905.93 234.198C1899.41 229.634 1894.3 223.766 1890.61 216.594C1887.13 209.422 1885.39 200.62 1885.39 190.188C1885.39 179.756 1887.57 171.063 1891.91 164.108C1896.48 156.936 1902.24 151.285 1909.19 147.156C1916.36 142.809 1924.3 139.767 1932.99 138.028C1941.68 136.072 1950.38 135.094 1959.07 135.094C1965.37 135.094 1972.33 135.42 1979.93 136.072V132.16Z" fill="#888888" fill-opacity="0.5"/>
+    <path d="M2070.71 109.666H2049.52L2047.89 103.146L2108.85 25.232H2116.35V74.4581H2155.8C2156.45 77.7181 2156.88 80.6521 2157.1 83.2601C2157.32 85.8681 2157.43 88.5847 2157.43 91.41C2157.43 94.4527 2157.32 97.3867 2157.1 100.212C2156.88 103.037 2156.45 106.189 2155.8 109.666H2116.35V175.844C2116.35 182.581 2116.9 188.015 2117.98 192.144C2119.07 196.273 2120.59 199.533 2122.55 201.924C2124.72 204.315 2127.33 205.945 2130.37 206.814C2133.41 207.683 2137 208.118 2141.13 208.118C2144.39 208.118 2147.54 207.901 2150.58 207.466C2153.84 206.814 2156.67 206.271 2159.06 205.836C2160.58 209.965 2161.67 214.312 2162.32 218.876C2162.97 223.223 2163.3 227.135 2163.3 230.612C2163.3 233.003 2163.19 235.067 2162.97 236.806C2162.97 238.327 2162.86 239.849 2162.64 241.37C2152.65 243.761 2142.32 244.956 2131.67 244.956C2111.9 244.956 2096.79 240.392 2086.36 231.264C2075.93 221.919 2070.71 206.814 2070.71 185.95V109.666Z" fill="#888888" fill-opacity="0.5"/>
+    <path d="M2200.07 109.666H2178.23C2177.58 106.841 2177.04 103.907 2176.6 100.864C2176.38 97.604 2176.27 94.5614 2176.27 91.7361C2176.27 85.8681 2176.93 80.1087 2178.23 74.4581H2245.39V243C2237.56 244.304 2229.96 244.956 2222.57 244.956C2215.39 244.956 2207.9 244.304 2200.07 243V109.666ZM2193.23 46.0961C2191.92 38.7067 2191.27 31.4261 2191.27 24.2541C2191.27 17.2994 2191.92 10.0187 2193.23 2.41205C2196.92 1.76004 2200.83 1.32538 2204.96 1.10805C2209.31 0.673385 2213.22 0.456055 2216.7 0.456055C2220.39 0.456055 2224.41 0.673385 2228.76 1.10805C2233.11 1.32538 2237.13 1.76004 2240.82 2.41205C2241.47 6.10672 2241.91 9.80138 2242.13 13.496C2242.34 16.9734 2242.45 20.5594 2242.45 24.2541C2242.45 27.7314 2242.34 31.3174 2242.13 35.0121C2241.91 38.7067 2241.47 42.4014 2240.82 46.0961C2237.13 46.7481 2233.11 47.1827 2228.76 47.4001C2224.63 47.6174 2220.72 47.726 2217.02 47.726C2213.55 47.726 2209.64 47.6174 2205.29 47.4001C2200.94 47.1827 2196.92 46.7481 2193.23 46.0961Z" fill="#888888" fill-opacity="0.5"/>
+    <path d="M2362.3 246.912C2348.61 246.912 2336.66 244.739 2326.44 240.392C2316.45 235.828 2308.08 229.634 2301.34 221.81C2294.82 213.769 2289.82 204.423 2286.35 193.774C2283.09 183.125 2281.46 171.606 2281.46 159.218C2281.46 146.83 2283.09 135.203 2286.35 124.336C2289.82 113.469 2294.82 104.124 2301.34 96.3001C2308.08 88.2587 2316.45 81.9561 2326.44 77.3921C2336.66 72.828 2348.61 70.546 2362.3 70.546C2376 70.546 2387.95 72.828 2398.16 77.3921C2408.38 81.9561 2416.85 88.2587 2423.59 96.3001C2430.33 104.124 2435.33 113.469 2438.59 124.336C2441.85 135.203 2443.48 146.83 2443.48 159.218C2443.48 171.606 2441.85 183.125 2438.59 193.774C2435.33 204.423 2430.33 213.769 2423.59 221.81C2416.85 229.634 2408.38 235.828 2398.16 240.392C2387.95 244.739 2376 246.912 2362.3 246.912ZM2362.3 211.704C2374.47 211.704 2383.17 207.249 2388.38 198.338C2393.82 189.21 2396.53 176.17 2396.53 159.218C2396.53 142.266 2393.82 129.335 2388.38 120.424C2383.17 111.296 2374.47 106.732 2362.3 106.732C2350.35 106.732 2341.66 111.296 2336.22 120.424C2331.01 129.335 2328.4 142.266 2328.4 159.218C2328.4 176.17 2331.01 189.21 2336.22 198.338C2341.66 207.249 2350.35 211.704 2362.3 211.704Z" fill="#888888" fill-opacity="0.5"/>
+    <path d="M2480.02 74.4581C2483.06 73.806 2486.1 73.3714 2489.14 73.1541C2492.19 72.7194 2495.55 72.5021 2499.25 72.5021C2502.94 72.5021 2506.2 72.7194 2509.03 73.1541C2511.85 73.3714 2514.79 73.806 2517.83 74.4581C2518.48 75.5447 2519.03 77.1747 2519.46 79.3481C2520.11 81.3041 2520.66 83.4774 2521.09 85.868C2521.53 88.0414 2521.85 90.2147 2522.07 92.3881C2522.5 94.5614 2522.83 96.4087 2523.05 97.9301C2525.22 94.6701 2527.83 91.4101 2530.87 88.1501C2533.91 84.8901 2537.39 81.9561 2541.3 79.3481C2545.43 76.7401 2550 74.6754 2555 73.1541C2559.99 71.4154 2565.54 70.546 2571.62 70.546C2590.75 70.546 2605.09 75.762 2614.65 86.194C2624.43 96.626 2629.32 113.035 2629.32 135.42V243C2621.5 244.304 2613.78 244.956 2606.18 244.956C2598.57 244.956 2590.86 244.304 2583.03 243V147.808C2583.03 136.072 2581.18 127.053 2577.49 120.75C2574.01 114.447 2567.82 111.296 2558.91 111.296C2555.21 111.296 2551.41 111.839 2547.5 112.926C2543.59 114.013 2540 116.186 2536.74 119.446C2533.7 122.489 2531.2 126.835 2529.24 132.486C2527.29 138.137 2526.31 145.526 2526.31 154.654V243C2518.48 244.304 2510.77 244.956 2503.16 244.956C2495.55 244.956 2487.84 244.304 2480.02 243V74.4581Z" fill="#888888" fill-opacity="0.5"/>
+    <path d="M2671.35 8.60605C2679.39 7.30205 2687.32 6.65005 2695.15 6.65005C2702.97 6.65005 2711.01 7.30205 2719.27 8.60605V100.538H2797.84V8.60605C2805.88 7.30205 2813.81 6.65005 2821.64 6.65005C2829.46 6.65005 2837.5 7.30205 2845.76 8.60605V243C2837.5 244.304 2829.57 244.956 2821.96 244.956C2813.92 244.956 2805.88 244.304 2797.84 243V141.614H2719.27V243C2711.01 244.304 2703.08 244.956 2695.47 244.956C2687.43 244.956 2679.39 244.304 2671.35 243V8.60605Z" fill="#888888" fill-opacity="0.5"/>
+    <path d="M2928.17 172.91C2929.04 185.95 2933.61 195.404 2941.87 201.272C2950.12 207.14 2960.99 210.074 2974.47 210.074C2981.85 210.074 2989.35 209.422 2996.96 208.118C3004.78 206.597 3012.17 204.532 3019.13 201.924C3021.52 206.271 3023.58 211.487 3025.32 217.572C3027.06 223.657 3028.04 230.177 3028.26 237.132C3011.3 243.652 2992.18 246.912 2970.88 246.912C2955.23 246.912 2941.76 244.739 2930.46 240.392C2919.37 236.045 2910.24 230.069 2903.07 222.462C2896.12 214.638 2890.9 205.401 2887.42 194.752C2884.16 184.103 2882.53 172.475 2882.53 159.87C2882.53 147.482 2884.27 135.855 2887.75 124.988C2891.23 114.121 2896.33 104.667 2903.07 96.6261C2910.03 88.5847 2918.5 82.282 2928.5 77.718C2938.71 72.9367 2950.56 70.546 2964.03 70.546C2975.77 70.546 2986.2 72.6107 2995.33 76.74C3004.46 80.8694 3012.17 86.52 3018.48 93.692C3025 100.864 3029.89 109.449 3033.15 119.446C3036.41 129.226 3038.04 139.767 3038.04 151.068C3038.04 155.197 3037.82 159.327 3037.38 163.456C3037.17 167.368 3036.84 170.519 3036.41 172.91H2928.17ZM2994.35 140.636C2993.92 130.204 2990.98 121.837 2985.55 115.534C2980.33 109.014 2972.94 105.754 2963.38 105.754C2952.51 105.754 2944.26 108.797 2938.61 114.882C2932.95 120.967 2929.59 129.552 2928.5 140.636H2994.35Z" fill="#888888" fill-opacity="0.5"/>
+    <path d="M3073.09 4.69406C3080.91 3.39005 3088.63 2.73804 3096.23 2.73804C3103.62 2.73804 3111.23 3.39005 3119.05 4.69406V175.844C3119.05 182.581 3119.38 188.015 3120.03 192.144C3120.9 196.273 3122.1 199.533 3123.62 201.924C3125.36 204.097 3127.53 205.619 3130.14 206.488C3132.75 207.357 3136.01 207.792 3139.92 207.792C3141.66 207.792 3143.5 207.683 3145.46 207.466C3147.63 207.249 3149.7 206.923 3151.65 206.488C3154.04 215.399 3155.24 224.092 3155.24 232.568C3155.24 234.307 3155.24 235.937 3155.24 237.458C3155.24 238.762 3155.02 240.283 3154.59 242.022C3151.11 243.109 3146.87 243.869 3141.87 244.304C3137.09 244.739 3132.64 244.956 3128.51 244.956C3111.77 244.956 3098.3 240.392 3088.08 231.264C3078.09 221.919 3073.09 206.814 3073.09 185.95V4.69406Z" fill="#888888" fill-opacity="0.5"/>
+    <path d="M3179.11 74.1321C3182.15 73.4801 3185.09 73.0454 3187.91 72.8281C3190.95 72.6107 3194.32 72.5021 3198.02 72.5021C3204.1 72.5021 3210.3 73.1541 3216.6 74.4581C3217.25 75.5447 3217.79 77.1747 3218.23 79.3481C3218.88 81.3041 3219.42 83.4774 3219.86 85.868C3220.51 88.2587 3220.95 90.6494 3221.16 93.0401C3221.6 95.2134 3221.92 97.0607 3222.14 98.5821C3224.1 95.1047 3226.49 91.7361 3229.31 88.4761C3232.14 84.9987 3235.51 81.9561 3239.42 79.3481C3243.55 76.7401 3248.11 74.6754 3253.11 73.1541C3258.11 71.4154 3263.65 70.546 3269.74 70.546C3279.08 70.546 3287.78 72.2847 3295.82 75.7621C3304.08 79.2394 3311.25 84.5641 3317.33 91.7361C3323.42 98.6907 3328.09 107.493 3331.35 118.142C3334.83 128.791 3336.57 141.397 3336.57 155.958C3336.57 170.085 3334.5 182.799 3330.37 194.1C3326.24 205.184 3320.27 214.638 3312.44 222.462C3304.62 230.286 3295.06 236.371 3283.76 240.718C3272.45 244.847 3259.63 246.912 3245.29 246.912C3241.59 246.912 3237.9 246.695 3234.2 246.26C3230.73 246.043 3227.79 245.717 3225.4 245.282V320.262C3221.27 320.914 3217.25 321.349 3213.34 321.566C3209.64 321.783 3205.95 321.892 3202.26 321.892C3198.56 321.892 3194.76 321.783 3190.85 321.566C3187.15 321.349 3183.24 320.914 3179.11 320.262V74.1321ZM3225.4 207.14C3231.27 208.879 3238.01 209.748 3245.61 209.748C3259.09 209.748 3269.41 205.401 3276.58 196.708C3283.76 188.015 3287.34 174.866 3287.34 157.262C3287.34 150.525 3286.8 144.331 3285.71 138.68C3284.62 132.812 3282.78 127.813 3280.17 123.684C3277.56 119.555 3274.19 116.295 3270.06 113.904C3266.15 111.513 3261.26 110.318 3255.39 110.318C3249.96 110.318 3245.29 111.405 3241.38 113.578C3237.68 115.534 3234.64 118.359 3232.25 122.054C3229.86 125.531 3228.12 129.661 3227.03 134.442C3225.94 139.223 3225.4 144.331 3225.4 149.764V207.14Z" fill="#888888" fill-opacity="0.5"/>
+    <path d="M3409.53 172.91C3410.4 185.95 3414.97 195.404 3423.22 201.272C3431.48 207.14 3442.35 210.074 3455.82 210.074C3463.21 210.074 3470.71 209.422 3478.32 208.118C3486.14 206.597 3493.53 204.532 3500.49 201.924C3502.88 206.271 3504.94 211.487 3506.68 217.572C3508.42 223.657 3509.4 230.177 3509.61 237.132C3492.66 243.652 3473.54 246.912 3452.24 246.912C3436.59 246.912 3423.12 244.739 3411.81 240.392C3400.73 236.045 3391.6 230.069 3384.43 222.462C3377.48 214.638 3372.26 205.401 3368.78 194.752C3365.52 184.103 3363.89 172.475 3363.89 159.87C3363.89 147.482 3365.63 135.855 3369.11 124.988C3372.59 114.121 3377.69 104.667 3384.43 96.6261C3391.39 88.5847 3399.86 82.282 3409.86 77.718C3420.07 72.9367 3431.92 70.546 3445.39 70.546C3457.13 70.546 3467.56 72.6107 3476.69 76.74C3485.82 80.8694 3493.53 86.52 3499.83 93.692C3506.35 100.864 3511.24 109.449 3514.5 119.446C3517.76 129.226 3519.4 139.767 3519.4 151.068C3519.4 155.197 3519.18 159.327 3518.74 163.456C3518.53 167.368 3518.2 170.519 3517.76 172.91H3409.53ZM3475.71 140.636C3475.28 130.204 3472.34 121.837 3466.91 115.534C3461.69 109.014 3454.3 105.754 3444.74 105.754C3433.87 105.754 3425.62 108.797 3419.96 114.882C3414.31 120.967 3410.95 129.552 3409.86 140.636H3475.71Z" fill="#888888" fill-opacity="0.5"/>
+    <path d="M3555.75 74.4581C3559.01 73.806 3562.05 73.3714 3564.88 73.1541C3567.92 72.7194 3571.18 72.5021 3574.66 72.5021C3577.92 72.5021 3581.07 72.7194 3584.11 73.1541C3587.37 73.5887 3590.52 74.132 3593.57 74.784C3594.22 75.8707 3594.76 77.5007 3595.2 79.674C3595.85 81.63 3596.39 83.8034 3596.83 86.194C3597.26 88.3674 3597.59 90.6494 3597.81 93.0401C3598.24 95.2134 3598.57 97.0607 3598.78 98.5821C3603.57 91.8447 3609.43 85.8681 3616.39 80.6521C3623.34 75.2187 3632.04 72.5021 3642.47 72.5021C3644.64 72.5021 3647.14 72.6107 3649.97 72.8281C3652.79 73.0454 3654.86 73.3714 3656.16 73.806C3656.59 75.9794 3656.92 78.4787 3657.14 81.3041C3657.36 84.1294 3657.46 87.0634 3657.46 90.1061C3657.46 93.8007 3657.25 97.8214 3656.81 102.168C3656.59 106.515 3656.05 110.644 3655.18 114.556C3652.79 114.121 3650.07 113.904 3647.03 113.904C3644.21 113.904 3642.47 113.904 3641.82 113.904C3638.12 113.904 3633.99 114.339 3629.43 115.208C3624.86 115.86 3620.52 117.816 3616.39 121.076C3612.26 124.336 3608.78 129.226 3605.96 135.746C3603.35 142.266 3602.04 151.394 3602.04 163.13V243.326C3598.13 243.978 3594.22 244.413 3590.31 244.63C3586.4 244.847 3582.59 244.956 3578.9 244.956C3575.2 244.956 3571.4 244.847 3567.49 244.63C3563.79 244.413 3559.88 243.978 3555.75 243.326V74.4581Z" fill="#888888" fill-opacity="0.5"/>
+</svg>
--- a/src/renderer/src/assets/icons/lined/add-pictures.svg
+++ b/src/renderer/src/assets/icons/lined/add-pictures.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="color:#fff" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-image-up"><path d="M10.3 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10l-3.1-3.1a2 2 0 0 0-2.814.014L6 21"/><path d="m14 19.5 3-3 3 3"/><path d="M17 22v-5.5"/><circle cx="9" cy="9" r="2"/></svg>
--- a/src/renderer/src/assets/icons/lined/arrow-left.svg
+++ b/src/renderer/src/assets/icons/lined/arrow-left.svg
@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  style="color:#fff"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="1.75"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-left"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l14 0" /><path d="M5 12l6 6" /><path d="M5 12l6 -6" /></svg>
--- a/src/renderer/src/assets/icons/lined/arrow-right.svg
+++ b/src/renderer/src/assets/icons/lined/arrow-right.svg
@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  style="color:#fff"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="1.75"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-right"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l14 0" /><path d="M13 18l6 -6" /><path d="M13 6l6 6" /></svg>
--- a/src/renderer/src/assets/icons/lined/blackboard.svg
+++ b/src/renderer/src/assets/icons/lined/blackboard.svg
@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="color:#fff" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chalkboard">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M8 19h-3a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v11a1 1 0 0 1 -1 1" />
+    <path d="M11 16m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v1a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" />
+</svg>
--- a/src/renderer/src/assets/icons/lined/clock.svg
+++ b/src/renderer/src/assets/icons/lined/clock.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="color:#fff" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-alarm-clock"><circle cx="12" cy="13" r="8"/><path d="M12 9v4l2 2"/><path d="M5 3 2 6"/><path d="m22 6-3-3"/><path d="M6.38 18.7 4 21"/><path d="M17.64 18.67 20 21"/></svg>
--- a/src/renderer/src/assets/icons/lined/cursor.svg
+++ b/src/renderer/src/assets/icons/lined/cursor.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="color:#fff" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mouse-pointer"><path d="m3 3 7.07 16.97 2.51-7.39 7.39-2.51L3 3z"/><path d="m13 13 6 6"/></svg>
--- a/src/renderer/src/assets/icons/lined/dianming.svg
+++ b/src/renderer/src/assets/icons/lined/dianming.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="color:#fff" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-contact-round"><path d="M16 18a4 4 0 0 0-8 0"/><circle cx="12" cy="11" r="3"/><rect width="18" height="18" x="3" y="4" rx="2"/><line x1="8" x2="8" y1="2" y2="4"/><line x1="16" x2="16" y1="2" y2="4"/></svg>
--- a/src/renderer/src/assets/icons/lined/eraser.svg
+++ b/src/renderer/src/assets/icons/lined/eraser.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="color:#fff" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eraser"><path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"/><path d="M22 21H7"/><path d="m5 11 9 9"/></svg>
--- a/src/renderer/src/assets/icons/lined/eye-off.svg
+++ b/src/renderer/src/assets/icons/lined/eye-off.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="color:#fff" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye-off"><path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg>
--- a/src/renderer/src/assets/icons/lined/grid.svg
+++ b/src/renderer/src/assets/icons/lined/grid.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="color:#fff" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layout-grid"><rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/></svg>
--- a/src/renderer/src/assets/icons/lined/hand.svg
+++ b/src/renderer/src/assets/icons/lined/hand.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="color:#fff" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-hand"><path d="M18 11V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v0"/><path d="M14 10V4a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v2"/><path d="M10 10.5V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v8"/><path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"/></svg>
--- a/src/renderer/src/assets/icons/lined/history.svg
+++ b/src/renderer/src/assets/icons/lined/history.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="color:#fff" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-history"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l4 2"/></svg>
--- a/src/renderer/src/assets/icons/lined/lasso-select.svg
+++ b/src/renderer/src/assets/icons/lined/lasso-select.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="color:#fff" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lasso-select"><path d="M7 22a5 5 0 0 1-2-4"/><path d="M7 16.93c.96.43 1.96.74 2.99.91"/><path d="M3.34 14A6.8 6.8 0 0 1 2 10c0-4.42 4.48-8 10-8s10 3.58 10 8a7.19 7.19 0 0 1-.33 2"/><path d="M5 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/><path d="M14.33 22h-.09a.35.35 0 0 1-.24-.32v-10a.34.34 0 0 1 .33-.34c.08 0 .15.03.21.08l7.34 6a.33.33 0 0 1-.21.59h-4.49l-2.57 3.85a.35.35 0 0 1-.28.14v0z"/></svg>
--- a/src/renderer/src/assets/icons/lined/list-details.svg
+++ b/src/renderer/src/assets/icons/lined/list-details.svg
@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="color:#fff" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-list-details">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M13 5h8" />
+    <path d="M13 9h5" />
+    <path d="M13 15h8" />
+    <path d="M13 19h5" />
+    <path d="M3 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" />
+    <path d="M3 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" />
+</svg>
--- a/src/renderer/src/assets/icons/lined/monitor-x.svg
+++ b/src/renderer/src/assets/icons/lined/monitor-x.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="color:#fff" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-monitor-x"><path d="m14.5 12.5-5-5"/><path d="m9.5 12.5 5-5"/><rect width="20" height="14" x="2" y="3" rx="2"/><path d="M12 17v4"/><path d="M8 21h8"/></svg>
--- a/src/renderer/src/assets/icons/lined/more.svg
+++ b/src/renderer/src/assets/icons/lined/more.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="color:#fff" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-grip"><circle cx="12" cy="5" r="1"/><circle cx="19" cy="5" r="1"/><circle cx="5" cy="5" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/><circle cx="12" cy="19" r="1"/><circle cx="19" cy="19" r="1"/><circle cx="5" cy="19" r="1"/></svg>
--- a/src/renderer/src/assets/icons/lined/pen.svg
+++ b/src/renderer/src/assets/icons/lined/pen.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="color:#fff" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pencil"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
--- a/src/renderer/src/assets/icons/lined/redo.svg
+++ b/src/renderer/src/assets/icons/lined/redo.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="color:#fff" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-redo-2"><path d="m15 14 5-5-5-5"/><path d="M20 9H9.5A5.5 5.5 0 0 0 4 14.5v0A5.5 5.5 0 0 0 9.5 20H13"/></svg>
--- a/src/renderer/src/assets/icons/lined/ruler.svg
+++ b/src/renderer/src/assets/icons/lined/ruler.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="color:#fff" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ruler"><path d="M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z"/><path d="m14.5 12.5 2-2"/><path d="m11.5 9.5 2-2"/><path d="m8.5 6.5 2-2"/><path d="m17.5 15.5 2-2"/></svg>
--- a/src/renderer/src/assets/icons/lined/scissors.svg
+++ b/src/renderer/src/assets/icons/lined/scissors.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="color:#fff" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scissors"><circle cx="6" cy="6" r="3"/><path d="M8.12 8.12 12 12"/><path d="M20 4 8.12 15.88"/><circle cx="6" cy="18" r="3"/><path d="M14.8 14.8 20 20"/></svg>
--- a/src/renderer/src/assets/icons/lined/shapes.svg
+++ b/src/renderer/src/assets/icons/lined/shapes.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="color:#fff" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shapes"><path d="M8.3 10a.7.7 0 0 1-.626-1.079L11.4 3a.7.7 0 0 1 1.198-.043L16.3 8.9a.7.7 0 0 1-.572 1.1Z"/><rect x="3" y="14" width="7" height="7" rx="1"/><circle cx="17.5" cy="17.5" r="3.5"/></svg>
--- a/src/renderer/src/assets/icons/lined/text.svg
+++ b/src/renderer/src/assets/icons/lined/text.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="color:#fff" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-type"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" x2="15" y1="20" y2="20"/><line x1="12" x2="12" y1="4" y2="20"/></svg>
--- a/src/renderer/src/assets/icons/lined/trash.svg
+++ b/src/renderer/src/assets/icons/lined/trash.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="color:#fff" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash-2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
--- a/src/renderer/src/assets/icons/lined/undo.svg
+++ b/src/renderer/src/assets/icons/lined/undo.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="color:#fff" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-undo-2"><path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5v0a5.5 5.5 0 0 1-5.5 5.5H11"/></svg>
--- a/src/renderer/src/assets/icons/lined/wand-sparkles.svg
+++ b/src/renderer/src/assets/icons/lined/wand-sparkles.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="color:#fff" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wand-sparkles"><path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72"/><path d="m14 7 3 3"/><path d="M5 6v4"/><path d="M19 14v4"/><path d="M10 2v2"/><path d="M7 8H3"/><path d="M21 16h-4"/><path d="M11 3H9"/></svg>
--- a/src/renderer/src/assets/icons/solid/cursor.svg
+++ b/src/renderer/src/assets/icons/solid/cursor.svg
@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M2.99999 3L10.07 19.97L12.58 12.58L19.97 10.07L2.99999 3Z" fill="white"/>
+    <path d="M13 13L19 19Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M2.38128 2.38128C2.63199 2.13057 3.00921 2.05594 3.3365 2.1923L20.3065 9.2623C20.6425 9.40228 20.8567 9.73566 20.8445 10.0995C20.8322 10.4632 20.5961 10.7815 20.2514 10.8985L14.1935 12.9561L19.6187 18.3813C19.9604 18.723 19.9604 19.277 19.6187 19.6187C19.277 19.9604 18.723 19.9604 18.3813 19.6187L12.9561 14.1935L10.8985 20.2514C10.7814 20.5961 10.4632 20.8323 10.0994 20.8445C9.73565 20.8568 9.40227 20.6425 9.26229 20.3065L2.19229 3.33651C2.05593 3.00922 2.13057 2.63199 2.38128 2.38128ZM4.62483 4.62484L9.98664 17.4947L11.7515 12.2986C11.8389 12.0411 12.0411 11.8389 12.2986 11.7515L17.4947 9.98664L4.62483 4.62484Z" fill="white"/>
+</svg>
--- a/src/renderer/src/assets/icons/solid/pen.svg
+++ b/src/renderer/src/assets/icons/solid/pen.svg
@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M20.5399 1.37051C20.0587 1.18315 19.5437 1.09746 19.0276 1.11876C18.5115 1.14005 18.0053 1.26788 17.5413 1.49431C17.0889 1.71507 16.686 2.02492 16.3573 2.40528L15 3.76256L20.2374 9L21.5907 7.64675C21.9735 7.324 22.2871 6.92731 22.5124 6.4802C22.7444 6.01958 22.8774 5.51571 22.9026 5.00076C22.9278 4.48581 22.8446 3.97141 22.6586 3.49043C22.4726 3.00946 22.1879 2.5727 21.823 2.2078C21.4581 1.84292 21.0211 1.55788 20.5399 1.37051Z" fill="white"/>
+    <path d="M19 10.2374L13.7626 5L2.88128 15.8813C2.77361 15.989 2.69589 16.1229 2.65583 16.2698L1.15583 21.7698C1.07321 22.0727 1.15925 22.3967 1.38128 22.6187C1.60331 22.8407 1.92729 22.9268 2.23023 22.8442L7.73023 21.3442C7.87713 21.3041 8.01104 21.2264 8.11872 21.1187L19 10.2374Z" fill="white"/>
+</svg>
--- a/src/renderer/src/main.jsx
+++ b/src/renderer/src/main.jsx
@ -0,0 +1,7 @@
+import '@unocss/reset/tailwind-compat.css'
+import 'virtual:uno.css'
+
+import { render } from 'solid-js/web'
+import App from './App'
+
+render(() => <App />, document.getElementById('root'))
--- a/src/renderer/src/styles/index.css
+++ b/src/renderer/src/styles/index.css
@ -0,0 +1,312 @@
+/*Styles Reset*/
+* {
+    -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
+}
+
+/*Container CSS*/
+.zph-container {
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    position: relative;
+    background-color: transparent;
+    user-select: none;
+}
+.zph-container.window-border {
+    @apply ring-1 ring-inset ring-red-600 ;
+}
+.zph-container.window-black {
+    background-color: black !important;
+}
+
+/*Main Toolbar*/
+.main-toolbar-container {
+    position: absolute;
+    pointer-events: none;
+    left: 0;
+    right: 0;
+    width: 100vw;
+    height: fit-content;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 50;
+    @apply bottom-1;
+}
+.main-toolbar-container>div {
+    flex-shrink: 0 !important;
+    overflow: hidden;
+    pointer-events: auto;
+    height: 100vh;
+    position: relative;
+    @apply rounded-md shadow-md ring-1 ring-inset ring-zinc-700;
+    transition-duration: 200ms;
+    transition-property: max-height;
+    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.main-toolbar-container[data-mode="default"]>div {
+    @apply max-h-9;
+}
+.main-toolbar-container[data-mode="drawer"]>div {
+    @apply max-h-48;
+}
+.absolute-toolbar-space {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: fit-content;
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    align-items: center;
+    @apply h-48;
+}
+.absolute-toolbar-space .toolbar-buttons {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    transition-duration: 200ms;
+    transition-property: padding-bottom;
+    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+    @apply h-9 w-fit px-1;
+}
+.main-toolbar-container[data-mode="default"] .absolute-toolbar-space .toolbar-buttons {
+    @apply pb-0;
+}
+.main-toolbar-container[data-mode="drawer"] .absolute-toolbar-space .toolbar-buttons {
+    @apply pb-1.5;
+}
+.toolbar-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+    position: relative;
+    @apply h-9 w-8 ;
+}
+.toolbar-item>img , .toolbar-item img {
+    -webkit-user-drag: none !important;
+    @apply h-5 w-5;
+}
+.toolbar-item-separator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    @apply h-9 w-1.5;
+}
+.toolbar-item-separator>div {
+    @apply h-5 w-px bg-white/50
+}
+
+/*Drawer*/
+.drawer-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 0.75rem;
+    width: 100%;
+    @apply mb-1 grow;
+}
+.drawer-bottom-separator {
+    position: absolute;
+    bottom: 0.1rem;
+    left: 0;
+    right: 0;
+    height: 1px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+}
+.drawer-bottom-separator>div {
+    height: 1px;
+    transition-delay: 50ms;
+    transition-duration: 200ms;
+    transition-property: width;
+    transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
+    @apply bg-zinc-500 rounded-full ;
+}
+.drawer-open-button-state {
+    @apply h-8 w-8 bg-blue-500/50 rounded-md flex items-center justify-center;
+}
+
+.main-toolbar-container[data-mode="default"] .drawer-bottom-separator>div {
+    @apply w-0;
+}
+.main-toolbar-container[data-mode="drawer"] .drawer-bottom-separator>div {
+    @apply w-100%;
+}
+.drawer-items {
+    display: grid;
+    grid-template-columns:repeat(5, minmax(0, 1fr));
+    width: 100%;
+    height: 100%;
+    @apply p-2 gap-2;
+}
+.drawer-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    @apply h-full w-full;
+}
+.drawer-item img {
+    -webkit-user-drag: none !important;
+}
+.drawer-item .drawer-item-text {
+    font-size: 0.72rem;
+    @apply text-white mt-1;
+}
+
+/*Toolbar Left Right Containers*/
+.toolbar-right-container , .toolbar-left-container{
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: row;
+    left: 0;
+    right: 0;
+    width: 100vw;
+    z-index: 50;
+    pointer-events: none;
+    @apply bottom-1;
+}
+.toolbar-right-container:nth-child(0) , .toolbar-left-container:last-child {
+    @apply shrink-0 h-9 bg-transparent;
+}
+.end-slideshow-button *,.mainmenu-button * {
+    -webkit-user-drag: none !important;
+}
+.end-slideshow-button {
+    pointer-events: auto;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    @apply h-9 w-9 rounded-md bg-red-700/75 ring-1 ring-inset ring-red-500 shadow-md;
+}
+.mainmenu-button {
+    pointer-events: auto;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    @apply h-9 w-9 rounded-md shadow-md ring-1 ring-inset ring-zinc-700;
+}
+
+/*BottomSidebar*/
+.bottom-sidebar-container {
+    position: absolute;
+    pointer-events: none;
+    right: 0;
+    width: 100vw;
+    height: fit-content;
+    display: flex;
+    align-items: center;
+    z-index: 50;
+    @apply bottom-1
+}
+.bottom-sidebar-container._left {
+    justify-content: start;
+    left: 0.25rem;
+}
+.bottom-sidebar-container._right {
+    justify-content: end;
+    right: 0.25rem;
+}
+.bottom-sidebar-container>div {
+    flex-shrink: 0 !important;
+    overflow: hidden;
+    pointer-events: auto;
+    position: relative;
+    @apply h-9 rounded-md shadow-md ring-1 ring-inset ring-zinc-700;
+    transition-duration: 200ms;
+    transition-property: max-height;
+    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+}
+.absolute-bottom-sidebar-space {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: fit-content;
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    align-items: center;
+    @apply h-9;
+}
+.absolute-bottom-sidebar-space .toolbar-buttons {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    transition-duration: 200ms;
+    transition-property: padding-bottom;
+    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+    @apply h-9 w-fit px-1;
+}
+
+/*Pagination Indicator*/
+.pagination-indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 4.5rem;
+    @apply h-9;
+}
+.pagination-indicator .now-page-text {
+    @apply text-white text-3.5 font-bold leading-none mr-0.5;
+}
+.pagination-indicator .total-page-text {
+    @apply text-white text-3 leading-none;
+}
+
+/*Toolbar Item Animation*/
+.toolbar-item .tb-animate-bg{
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition-property: all;
+    z-index: 0;
+    transition-timing-function: cubic-bezier(0.85, 0, 0.15, 1); !important;
+    @apply duration-100 scale-75 opacity-0;
+}
+.toolbar-item>img.icon-solid , .toolbar-item img.icon-solid {
+    display: none;
+}
+.toolbar-item .tb-animate-bg>div {
+    @apply h-7.5 w-7.5 bg-zinc-300/12 rounded-0.275rem;
+}
+.toolbar-item.toolbar-item-active .tb-animate-bg>div {
+    @apply bg-blue-300/15 ring-1 ring-inset ring-blue-400/50
+}
+.toolbar-item.gest-pointer-down .tb-animate-bg , .toolbar-item.toolbar-item-active .tb-animate-bg{
+    @apply scale-100 opacity-100;
+}
+.toolbar-item.gest-pointer-down>img.icon-solid , .toolbar-item.gest-pointer-down img.icon-solid ,
+.toolbar-item.toolbar-item-active>img.icon-solid , .toolbar-item.toolbar-item-active img.icon-solid{
+    display: block;
+}
+.toolbar-item.gest-pointer-down>img.icon , .toolbar-item.gest-pointer-down img.icon ,
+.toolbar-item.toolbar-item-active>img.icon , .toolbar-item.toolbar-item-active img.icon{
+    display: none;
+}
+
+/*Watermark*/
+.brand-watermark {
+    position: absolute;
+    top: 0.25rem;
+    left: 0.25rem;
+    @apply h-6;
+}
--- a/src/renderer/src/utils/gest.js
+++ b/src/renderer/src/utils/gest.js
@ -0,0 +1,23 @@
+import {onCleanup} from "solid-js";
+
+/**
+ * gest.js用於為Pointer events添加可選的CSS Selector
+* */
+export default function gest(el, accessor) {
+	function onPointerDown() {
+		el.classList.add('gest-pointer-down');
+	}
+	function onPointerUp() {
+		el.classList.remove('gest-pointer-down');
+	}
+	function onPointerOut() {
+		el.classList.remove('gest-pointer-down');
+	}
+	el.addEventListener('pointerdown', onPointerDown);
+	el.addEventListener('pointerup', onPointerUp);
+	el.addEventListener('pointerout', onPointerOut);
+	onCleanup(()=>{
+		el.removeEventListener('pointerdown', onPointerDown);
+		el.removeEventListener('pointerup', onPointerUp);
+	})
+}
--- a/uno.config.js
+++ b/uno.config.js
@ -0,0 +1,28 @@
+import {defineConfig, presetUno} from 'unocss'
+import transformerDirectives from '@unocss/transformer-directives'
+import transformerVariantGroup from '@unocss/transformer-variant-group'
+
+
+export default defineConfig({
+  presets: [
+    presetUno({
+      dark: "class",
+    })
+  ],
+  content: {
+    pipeline: {
+      include: [
+        // the default
+        /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
+        // include js/ts files
+        'src/**/*.{js,ts,jsx,tsx,css,less,sass}',
+      ],
+      // exclude files
+      // exclude: []
+    },
+  },
+  transformers: [
+    transformerDirectives(),
+    transformerVariantGroup(),
+  ],
+})
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" style="color:#fff" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-image-up"><path d="M10.3 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10l-3.1-3.1a2 2 0 0 0-2.814.014L6 21"/><path d="m14 19.5 3-3 3 3"/><path d="M17 22v-5.5"/><circle cx="9" cy="9" r="2"/></svg>`
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" style="color:#fff" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lasso-select"><path d="M7 22a5 5 0 0 1-2-4"/><path d="M7 16.93c.96.43 1.96.74 2.99.91"/><path d="M3.34 14A6.8 6.8 0 0 1 2 10c0-4.42 4.48-8 10-8s10 3.58 10 8a7.19 7.19 0 0 1-.33 2"/><path d="M5 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/><path d="M14.33 22h-.09a.35.35 0 0 1-.24-.32v-10a.34.34 0 0 1 .33-.34c.08 0 .15.03.21.08l7.34 6a.33.33 0 0 1-.21.59h-4.49l-2.57 3.85a.35.35 0 0 1-.28.14v0z"/></svg>