diff --git a/.gitignore b/FRONT_ATTENDANCE/.gitignore
similarity index 100%
rename from .gitignore
rename to FRONT_ATTENDANCE/.gitignore
diff --git a/.vscode/extensions.json b/FRONT_ATTENDANCE/.vscode/extensions.json
similarity index 100%
rename from .vscode/extensions.json
rename to FRONT_ATTENDANCE/.vscode/extensions.json
diff --git a/index.html b/FRONT_ATTENDANCE/index.html
similarity index 100%
rename from index.html
rename to FRONT_ATTENDANCE/index.html
diff --git a/jsconfig.json b/FRONT_ATTENDANCE/jsconfig.json
similarity index 100%
rename from jsconfig.json
rename to FRONT_ATTENDANCE/jsconfig.json
diff --git a/package-lock.json b/FRONT_ATTENDANCE/package-lock.json
similarity index 74%
rename from package-lock.json
rename to FRONT_ATTENDANCE/package-lock.json
index b93b697..a451010 100644
--- a/package-lock.json
+++ b/FRONT_ATTENDANCE/package-lock.json
@@ -9,6 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "axios": "^1.7.7",
+        "element-plus": "^2.8.4",
+        "element-ui": "^2.15.14",
         "vue": "^3.4.29",
         "vue-router": "^4.3.3"
       },
@@ -60,6 +62,22 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@ctrl/tinycolor": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
+      "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@element-plus/icons-vue": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
+      "integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==",
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
@@ -428,11 +446,43 @@
         "node": ">=12"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.6.8.tgz",
+      "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.11",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.6.11.tgz",
+      "integrity": "sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.8.tgz",
+      "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.0",
       "resolved": "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
       "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
     },
+    "node_modules/@popperjs/core": {
+      "name": "@sxzz/popperjs-es",
+      "version": "2.11.7",
+      "resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.22.5",
       "resolved": "https://registry.npmmirror.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.5.tgz",
@@ -647,6 +697,24 @@
       "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
       "dev": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.10",
+      "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.17.10.tgz",
+      "integrity": "sha512-YpS0zzoduEhuOWjAotS6A5AVCva7X4lVlYLF0FYHAY9sdraBfnatttHItlWeZdGhuEkf+OzMNg2ZYAx8t+52uQ=="
+    },
+    "node_modules/@types/lodash-es": {
+      "version": "4.17.12",
+      "resolved": "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.12.tgz",
+      "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
+      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.1.4",
       "resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-5.1.4.tgz",
@@ -756,6 +824,97 @@
       "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.5.10.tgz",
       "integrity": "sha512-VkkBhU97Ki+XJ0xvl4C9YJsIZ2uIlQ7HqPpZOS3m9VCvmROPaChZU6DexdMJqvz9tbgG+4EtFVrSuailUq5KGQ=="
     },
+    "node_modules/@vueuse/core": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.13.0.tgz",
+      "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.16",
+        "@vueuse/metadata": "9.13.0",
+        "@vueuse/shared": "9.13.0",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.13.0.tgz",
+      "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.13.0.tgz",
+      "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
+      "dependencies": {
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/async-validator": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-1.8.5.tgz",
+      "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
+      "dependencies": {
+        "babel-runtime": "6.x"
+      }
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
@@ -771,6 +930,20 @@
         "proxy-from-env": "^1.1.0"
       }
     },
+    "node_modules/babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
+    },
+    "node_modules/babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmmirror.com/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
+      "dependencies": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      }
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -782,11 +955,31 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/core-js": {
+      "version": "2.6.12",
+      "resolved": "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz",
+      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
+      "hasInstallScript": true
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
+    },
+    "node_modules/deepmerge": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-1.5.2.tgz",
+      "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -795,6 +988,52 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/element-plus": {
+      "version": "2.8.4",
+      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.8.4.tgz",
+      "integrity": "sha512-ZlVAdUOoJliv4kW3ntWnnSHMT+u/Os7mXJjk2xzOlqNeHaI2/ozlF+R58ZCEak8ZnDi6+5A2viWEYRsq64IuiA==",
+      "dependencies": {
+        "@ctrl/tinycolor": "^3.4.1",
+        "@element-plus/icons-vue": "^2.3.1",
+        "@floating-ui/dom": "^1.0.1",
+        "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
+        "@types/lodash": "^4.14.182",
+        "@types/lodash-es": "^4.17.6",
+        "@vueuse/core": "^9.1.0",
+        "async-validator": "^4.2.5",
+        "dayjs": "^1.11.3",
+        "escape-html": "^1.0.3",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "lodash-unified": "^1.0.2",
+        "memoize-one": "^6.0.0",
+        "normalize-wheel-es": "^1.2.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
+    "node_modules/element-plus/node_modules/async-validator": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
+      "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
+    },
+    "node_modules/element-ui": {
+      "version": "2.15.14",
+      "resolved": "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.14.tgz",
+      "integrity": "sha512-2v9fHL0ZGINotOlRIAJD5YuVB8V7WKxrE9Qy7dXhRipa035+kF7WuU/z+tEmLVPBcJ0zt8mOu1DKpWcVzBK8IA==",
+      "dependencies": {
+        "async-validator": "~1.8.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.0",
+        "deepmerge": "^1.2.0",
+        "normalize-wheel": "^1.0.1",
+        "resize-observer-polyfill": "^1.5.0",
+        "throttle-debounce": "^1.0.1"
+      },
+      "peerDependencies": {
+        "vue": "^2.5.17"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz",
@@ -844,6 +1083,11 @@
         "@esbuild/win32-x64": "0.21.5"
       }
     },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
+    },
     "node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
@@ -895,6 +1139,26 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
+    "node_modules/lodash-unified": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/lodash-unified/-/lodash-unified-1.0.3.tgz",
+      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
+      "peerDependencies": {
+        "@types/lodash-es": "*",
+        "lodash": "*",
+        "lodash-es": "*"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.11",
       "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.11.tgz",
@@ -903,6 +1167,11 @@
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
@@ -939,6 +1208,16 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA=="
+    },
+    "node_modules/normalize-wheel-es": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
+      "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
+    },
     "node_modules/picocolors": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.0.tgz",
@@ -976,6 +1255,16 @@
       "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+    },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "node_modules/rollup": {
       "version": "4.22.5",
       "resolved": "https://registry.npmmirror.com/rollup/-/rollup-4.22.5.tgz",
@@ -1019,6 +1308,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/throttle-debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
+      "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
diff --git a/package.json b/FRONT_ATTENDANCE/package.json
similarity index 86%
rename from package.json
rename to FRONT_ATTENDANCE/package.json
index fed679c..8f9c0db 100644
--- a/package.json
+++ b/FRONT_ATTENDANCE/package.json
@@ -10,6 +10,8 @@
   },
   "dependencies": {
     "axios": "^1.7.7",
+    "element-plus": "^2.8.4",
+    "element-ui": "^2.15.14",
     "vue": "^3.4.29",
     "vue-router": "^4.3.3"
   },
diff --git a/public/点名.svg b/FRONT_ATTENDANCE/public/点名.svg
similarity index 100%
rename from public/点名.svg
rename to FRONT_ATTENDANCE/public/点名.svg
diff --git a/src/App.vue b/FRONT_ATTENDANCE/src/App.vue
similarity index 100%
rename from src/App.vue
rename to FRONT_ATTENDANCE/src/App.vue
diff --git a/src/assets/css/login.css b/FRONT_ATTENDANCE/src/assets/css/login.css
similarity index 100%
rename from src/assets/css/login.css
rename to FRONT_ATTENDANCE/src/assets/css/login.css
diff --git a/src/assets/image/bgcImg.png b/FRONT_ATTENDANCE/src/assets/image/bgcImg.png
similarity index 100%
rename from src/assets/image/bgcImg.png
rename to FRONT_ATTENDANCE/src/assets/image/bgcImg.png
diff --git a/FRONT_ATTENDANCE/src/assets/image/close.png b/FRONT_ATTENDANCE/src/assets/image/close.png
new file mode 100644
index 0000000..2b53556
Binary files /dev/null and b/FRONT_ATTENDANCE/src/assets/image/close.png differ
diff --git a/src/assets/image/eye.png b/FRONT_ATTENDANCE/src/assets/image/eye.png
similarity index 100%
rename from src/assets/image/eye.png
rename to FRONT_ATTENDANCE/src/assets/image/eye.png
diff --git a/src/assets/image/eyeClose.png b/FRONT_ATTENDANCE/src/assets/image/eyeClose.png
similarity index 100%
rename from src/assets/image/eyeClose.png
rename to FRONT_ATTENDANCE/src/assets/image/eyeClose.png
diff --git a/FRONT_ATTENDANCE/src/assets/image/muban.png b/FRONT_ATTENDANCE/src/assets/image/muban.png
new file mode 100644
index 0000000..56aab3f
Binary files /dev/null and b/FRONT_ATTENDANCE/src/assets/image/muban.png differ
diff --git a/src/assets/image/password.png b/FRONT_ATTENDANCE/src/assets/image/password.png
similarity index 100%
rename from src/assets/image/password.png
rename to FRONT_ATTENDANCE/src/assets/image/password.png
diff --git a/src/assets/image/person.png b/FRONT_ATTENDANCE/src/assets/image/person.png
similarity index 100%
rename from src/assets/image/person.png
rename to FRONT_ATTENDANCE/src/assets/image/person.png
diff --git a/src/main.js b/FRONT_ATTENDANCE/src/main.js
similarity index 71%
rename from src/main.js
rename to FRONT_ATTENDANCE/src/main.js
index 4966a31..49e3112 100644
--- a/src/main.js
+++ b/FRONT_ATTENDANCE/src/main.js
@@ -5,9 +5,9 @@ import App from './App.vue'
 
 import router from './router'
 
-// import ElementUI from 'element-ui';
-// import 'element-ui/lib/theme-chalk/index.css';
-// Vue.use(ElementUI);
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+
 
 // new Vue({
 //     el: '#app',
@@ -17,5 +17,5 @@ import router from './router'
 const app = createApp(App)
 
 app.use(router)
-
+app.use(ElementPlus)
 app.mount('#app')
diff --git a/src/router/index.js b/FRONT_ATTENDANCE/src/router/index.js
similarity index 59%
rename from src/router/index.js
rename to FRONT_ATTENDANCE/src/router/index.js
index f6be2f0..1d26525 100644
--- a/src/router/index.js
+++ b/FRONT_ATTENDANCE/src/router/index.js
@@ -3,6 +3,8 @@ import { createRouter, createWebHistory} from 'vue-router'
 // 引入路由组件
 import login from '@/views/login2.vue'
 import home from '@/views/home.vue'
+import importFile from '@/views/importFile.vue'
+import ruleSetting from '@/views/ruleSetting.vue'
 
 // 创建路由器
 const router = createRouter({
@@ -17,7 +19,17 @@ const router = createRouter({
     },
     {
       path:'/home',
-      component: home
+      component: home,
+      children:[
+        {
+          path:'importFile',
+          component: importFile
+        },
+        {
+          path:'ruleSetting',
+          component: ruleSetting
+        }
+      ]
     }
     
   ]
diff --git a/src/token/auth.js b/FRONT_ATTENDANCE/src/token/auth.js
similarity index 100%
rename from src/token/auth.js
rename to FRONT_ATTENDANCE/src/token/auth.js
diff --git a/src/utils/axiosConfig.js b/FRONT_ATTENDANCE/src/utils/axiosConfig.js
similarity index 100%
rename from src/utils/axiosConfig.js
rename to FRONT_ATTENDANCE/src/utils/axiosConfig.js
diff --git a/src/views/home.vue b/FRONT_ATTENDANCE/src/views/home.vue
similarity index 66%
rename from src/views/home.vue
rename to FRONT_ATTENDANCE/src/views/home.vue
index 6d2d5a8..4288e73 100644
--- a/src/views/home.vue
+++ b/FRONT_ATTENDANCE/src/views/home.vue
@@ -1,17 +1,19 @@
 <template>
     <div class="home">
         <div class="content">
+            <!-- 展示区 -->
             <div class="leftIcon">
-                
+                <RouterView></RouterView>
             </div>
+            <!-- 导航栏 -->
             <div class="select">
-                <div class="selectItem">
+                <div @click="gotoImpt" class="selectItem">
                     导入文件
                 </div>
                 <div class="selectItem">
                     开始点名
                 </div>
-                <div class="selectItem">
+                <div @click="gotoRule" class="selectItem">
                     规则设置
                 </div>
                 <div class="selectItem">
@@ -23,6 +25,22 @@
 </template>
 
 <script>
+import { RouterLink, RouterView } from 'vue-router';
+export default {
+    data() {
+        return {
+
+        }
+    },
+    methods: {
+        gotoImpt(){
+            this.$router.push('/home/importFile')
+        },
+        gotoRule() {
+            this.$router.push('/home/ruleSetting')
+        }
+    }
+}
 </script>
 
 <style scoped>
@@ -43,7 +61,7 @@
 .leftIcon {
     width: 700px;
     height: 800px;
-    background-color: #fff;
+    /* background-color: red; */
 }
 .selectItem {
     padding: 25px 130px;
@@ -54,6 +72,7 @@
     font-weight: bold;
     margin-bottom: 65px;
     cursor: pointer;
+    text-decoration: none;
 }
 .selectItem:hover {
     background-color: #6231F5;
diff --git a/FRONT_ATTENDANCE/src/views/importFile.vue b/FRONT_ATTENDANCE/src/views/importFile.vue
new file mode 100644
index 0000000..45880f3
--- /dev/null
+++ b/FRONT_ATTENDANCE/src/views/importFile.vue
@@ -0,0 +1,206 @@
+<template>
+    <div class="imptFile">
+        <!-- 头部 -->
+        <div class="header">
+            <div>导入学生名单</div>
+            <img src="../assets/image/close.png" alt="" class="icon" @click="close">
+        </div>
+        <div style="border: 1.5px solid #C8C1C1;"></div>
+
+        <!-- 上传文件 -->
+        <el-upload
+            ref="uploadRef"
+            class="upload-demo"
+            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+            :auto-upload="false"
+            :limit="1"
+            accept=".xlsx, .xls"
+            :on-exceed="handleExceed"
+        >
+            <div style="font-size: 30px; color: #7D7878;">选择文件</div>
+            <input placeholder="请选择上传的文件" class="inputFile" />
+            <!-- <template #trigger> -->
+                <el-button type="primary" color="#A182FF" class="btn">选取文件</el-button>
+            <!-- </template> -->
+
+            <!-- 按钮下面放置文件区 -->
+            <!-- <el-button class="ml-3" type="success" @click="submitUpload">
+                upload to server
+            </el-button> -->
+
+            <template #tip>
+                <div class="el-upload__tip">
+                    请上传Excel文件，文件大小不超过500KB。
+                </div>
+            </template>
+        </el-upload>
+
+        <!-- 下载模板 -->
+         <a
+            class="download"
+            href="后端提供的下载URL"
+            download="student-template.xlsx"
+            @click="onDownload"
+        >
+            模板下载
+        </a>
+
+        <!-- 模板示例 -->
+         <div>
+            <div style="color: #8755F2; font-size: 28px; margin: 30px 0 0 40px;">模板示例：</div>
+            <div style="display: flex; justify-content: center; margin-top:10px;">
+                <img src="../assets/image/muban.png" alt="" style="height: 250px;">
+            </div>
+        </div>
+
+        <!-- 底部 -->
+        <div class="bottom">
+            <div style="display: flex;">
+                <div class="confirm" @click="submitUpload">导入</div>
+                <div class="cancel" @click="close">取消</div>
+            </div>
+                
+        </div>
+    </div>
+    
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { genFileId } from 'element-plus'
+import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
+import router from '@/router';
+
+const uploadRef = ref<UploadInstance>()
+// 自动替换上一个文件
+const handleExceed: UploadProps['onExceed'] = (files) => {
+    uploadRef.value!.clearFiles()
+    const file = files[0] as UploadRawFile
+    file.uid = genFileId()
+    uploadRef.value!.handleStart(file)
+}
+// 提交文件
+const submitUpload = () => {
+  uploadRef.value!.submit()
+}
+
+// 模板下载
+const onDownload = (event: MouseEvent) => {
+    // 如果需要，你可以在这里执行一些额外的逻辑，比如发送一个请求到后端
+    // 来检查用户是否有权限下载文件等。
+
+    // 阻止<a>标签默认的点击事件，因为我们已经通过href处理了下载
+    event.preventDefault();
+    // 可以在这里使用fetch等方式处理下载，或者直接通过href属性
+    window.open("后端提供的下载URL", '_blank');
+}
+function close() {
+    router.push('/home')
+}
+
+</script>
+
+
+<style scoped>
+.imptFile{
+    position: relative;
+    background-color: #fff;
+    border-radius: 40px;
+    height: 100%;
+    padding-top: 10px;
+    box-shadow: 5px 10px 10px 5px rgba(2, 2, 2, 0.1);
+    overflow: hidden;
+}
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 60px;
+    font-size: 35px;
+    font-weight: bold;
+}
+.icon {
+    width: 45px;
+    cursor: pointer;
+}
+.icon:hover {
+    transform: scale(1.3);
+}
+.upload-demo {
+    margin-top: 35px;
+    padding: 0 20px;
+}
+.inputFile {
+    height: 60px;
+    width: 300px;
+    font-size: 23px;
+    margin-left: 20px;
+    border-radius: 10px;
+    border: 1.5px solid #272636;
+    padding-left: 20px; 
+}
+.inputFile::placeholder {
+    padding-left: 0; 
+}
+.btn {
+    height: 70px;
+    border-radius: 10px;
+    padding: 10px;
+    font-size: 30px;
+    margin-left: 30px;
+    color: #fff;
+}
+.btn:hover {
+    color: #fff;
+    transform: scale(1.1);
+}
+.el-upload__tip {
+    font-size: 23px;
+    margin: 25px 0 25px 70px;
+}
+.download{
+    color: #8755F2;
+    font-size: 28px;
+    margin: 20px 0 0 40px;
+    cursor: pointer;
+    text-decoration: none;
+}
+.download:hover {
+    color: #6231F5;
+    text-decoration: underline;
+}
+.bottom{
+    position: absolute;
+    display: flex; align-items: center; justify-content: right;
+    bottom: 0;
+    width: 100%;
+    padding: 30px 30px;
+    background-color: #EBE4FF;
+}
+.cancel {
+    width: auto;
+    border-radius: 5px;
+    padding: 20px 35px;
+    margin-right: 70px;
+    font-size: 28px;
+    background-color: #fff;
+    color: #A182FF;
+    cursor: pointer;
+}
+.cancel:hover {
+    background-color: #dfdede;
+}
+.confirm{
+    width: auto;
+    border-radius: 5px;
+    padding: 20px 35px;
+    margin-right: 30px;
+    font-size: 28px;
+    background-color: #A182FF;
+    color: #fff;
+    cursor: pointer;
+}
+.confirm:hover {
+    background-color: #6231F5;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/login2.vue b/FRONT_ATTENDANCE/src/views/login2.vue
similarity index 100%
rename from src/views/login2.vue
rename to FRONT_ATTENDANCE/src/views/login2.vue
diff --git a/FRONT_ATTENDANCE/src/views/ruleSetting.vue b/FRONT_ATTENDANCE/src/views/ruleSetting.vue
new file mode 100644
index 0000000..f891f19
--- /dev/null
+++ b/FRONT_ATTENDANCE/src/views/ruleSetting.vue
@@ -0,0 +1,192 @@
+<template>
+    <div class="imptFile">
+        <!-- 头部 -->
+        <div class="header">
+            <div>规则设置</div>
+            <img src="../assets/image/close.png" alt="" class="icon" @click="close">
+        </div>
+        <div style="border: 1.5px solid #C8C1C1;"></div>
+
+        <!-- 问题 -->
+        <el-form :model="form" label-position="top">
+            <el-form-item label="进行点名 or 提问 ？">
+                <el-radio-group v-model="form.nameOrQuestion">
+                    <el-radio label="点名">点名</el-radio>
+                    <el-radio label="提问">提问</el-radio>
+                </el-radio-group>
+            </el-form-item>
+      
+            <el-form-item label="是否触发随机事件 ？">
+                <el-radio-group v-model="form.triggerRandomEvent">
+                    <el-radio label="触发">触发</el-radio>
+                    <el-radio label="不触发">不触发</el-radio>
+                </el-radio-group>
+            </el-form-item>
+
+            <!-- 最后一个问题 -->
+            <el-tooltip
+                    content="今天众生平等！所有人被抽到的概率相等"
+                    placement="bottom-start"
+                    effect="dark"
+            >
+                <div class="lastQues">是否开启&quot;命运轮盘&quot; ？</div>
+            </el-tooltip>
+            <el-radio-group v-model="form.enableFateWheel" class="lastOpt">
+                    <el-radio label="是">是</el-radio>
+                    <el-radio label="否">否</el-radio>
+            </el-radio-group>
+
+        </el-form>
+        
+        <!-- 底部 -->
+        <div class="bottom">
+            <div style="display: flex;">
+                <div class="confirm" @click="confirmSetting">确认</div>
+                <div class="cancel" @click="close">取消</div>
+            </div>
+                
+        </div>
+    </div>
+    
+</template>
+
+<script lang="ts" setup>
+import router from '@/router';
+import { ref } from 'vue'
+import { ElTooltip } from 'element-plus'
+
+const form = ref({
+  nameOrQuestion: '点名',
+  triggerRandomEvent: '触发',
+  enableFateWheel: '否'
+})
+const confirmSetting = () => {
+  // 确认设置,向后端发送数据
+  const data = {
+    nameOrQuestion: form.value.nameOrQuestion,
+    triggerRandomEvent: form.value.triggerRandomEvent,
+    enableFateWheel: form.value.enableFateWheel,
+  }
+    // 打印 form 的值
+    console.log(form.value.nameOrQuestion)
+  // 这里调用API发送数据到后端
+  console.log('发送到后端的数据:', data)
+}
+function close() {
+    router.push('/home')
+}
+
+</script>
+
+
+<style scoped>
+.imptFile{
+    position: relative;
+    background-color: #fff;
+    border-radius: 40px;
+    height: 100%;
+    padding-top: 10px;
+    box-shadow: 5px 10px 10px 5px rgba(2, 2, 2, 0.1);
+    overflow: hidden;
+}
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 60px;
+    font-size: 35px;
+    font-weight: bold;
+}
+.icon {
+    width: 45px;
+    cursor: pointer;
+}
+.icon:hover {
+    transform: scale(1.3);
+}
+.bottom{
+    position: absolute;
+    display: flex; align-items: center; justify-content: right;
+    bottom: 0;
+    width: 100%;
+    padding: 30px 30px;
+    background-color: #EBE4FF;
+}
+.cancel {
+    width: auto;
+    border-radius: 5px;
+    padding: 20px 35px;
+    margin-right: 70px;
+    font-size: 28px;
+    background-color: #fff;
+    color: #A182FF;
+    cursor: pointer;
+}
+.cancel:hover {
+    background-color: #dfdede;
+}
+.confirm{
+    width: auto;
+    border-radius: 5px;
+    padding: 20px 35px;
+    margin-right: 30px;
+    font-size: 28px;
+    background-color: #A182FF;
+    color: #fff;
+    cursor: pointer;
+}
+.confirm:hover {
+    background-color: #6231F5;
+}
+
+/* add */
+.el-form-item {
+  margin: 50px 0 0 60px;
+}
+
+.el-radio {
+  margin: 45px 80px;
+  margin-bottom: 0;
+}
+/* 最后一个问题 */
+.lastQues {
+    margin: 50px 0 0 60px;
+    font-size: 35px; /* 调整为你想要的大小 */
+    font-weight: bold;
+    color: #7D7878;
+    cursor: pointer;
+}
+.lastOpt{
+    margin-left: 60px;
+}
+
+
+:deep(.el-form-item__label) {
+  font-size: 35px; /* 调整为你想要的大小 */
+  font-weight: bold;
+  color: #7D7878;
+}
+
+/* 如果你也想改变输入框内的文字大小 */
+:deep(.el-radio__label) {
+  color: #8755F2;
+  font-size: 35px;font-weight: bold;
+}
+:deep(.el-radio__inner) {
+  width: 20px; /* 调整单选按钮的宽度 */
+  height: 20px; /* 调整单选按钮的高度 */
+  border-color: #8755F2;font-weight: bold;
+}
+
+/* 改变选中时的颜色 */
+/* 单选框 */
+:deep(.el-radio__input.is-checked .el-radio__inner) {
+  border-color: #6231F5;
+  background: #6231F5;
+}
+/* 选项文字 */
+:deep(.el-radio__input.is-checked+.el-radio__label) {
+  color: #6231F5;
+}
+
+</style>
\ No newline at end of file
diff --git a/vite.config.js b/FRONT_ATTENDANCE/vite.config.js
similarity index 100%
rename from vite.config.js
rename to FRONT_ATTENDANCE/vite.config.js
diff --git a/calltherole b/calltherole
deleted file mode 160000
index a1fe073..0000000
--- a/calltherole
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit a1fe07390918869ecf655649d88f55be55f8b404