diff --git a/.gitignore b/.gitignore
index 62278e7..1c5648e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,4 +5,5 @@ test.*
 *.log
 .vscode/
 .eslintignore
-temp/
\ No newline at end of file
+temp/
+*.css.map
\ No newline at end of file
diff --git a/apps/assistant.js b/apps/assistant.js
index 21a8332..854404a 100644
--- a/apps/assistant.js
+++ b/apps/assistant.js
@@ -244,7 +244,7 @@ export class Assistant extends plugin {
       return logger.mark(`${e.logFnc}该群员权限不足`)
     }
     let groupObj = this.Bot.pickGroup(e.group_id)
-    if (groupObj.is_admin && groupObj.is_owner) {
+    if (!groupObj.is_admin && !groupObj.is_owner) {
       return e.reply('❎ 没有管理员人家做不到啦~>_<')
     }
     if (!e.img) {
diff --git a/resources/common/base.css b/resources/common/base.css
deleted file mode 100644
index 9916185..0000000
--- a/resources/common/base.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.font-ys {
-  font-family: Number, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif;
-}
-.font-nzbz {
-  font-family: Number, "印品南征北战NZBZ体", NZBZ, PingFangSC-Medium, "PingFang SC", sans-serif;
-}
-/*# sourceMappingURL=base.css.map */
\ No newline at end of file
diff --git a/resources/common/base.less b/resources/common/base.less
deleted file mode 100644
index e065b8b..0000000
--- a/resources/common/base.less
+++ /dev/null
@@ -1,7 +0,0 @@
-.font-YS {
-  font-family: Number, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif;
-}
-
-.font-NZBZ {
-  font-family: Number, "印品南征北战NZBZ体", NZBZ, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif;
-}
\ No newline at end of file
diff --git a/resources/common/common.less b/resources/common/common.less
deleted file mode 100644
index 85fad95..0000000
--- a/resources/common/common.less
+++ /dev/null
@@ -1,390 +0,0 @@
-.font(@name, @file) {
-  @font-face {
-    font-family: @name;
-    src: url("./font/@{file}.woff") format('woff'), url("./font/@{file}.ttf") format('truetype');
-  }
-}
-
-.font('Number', 'tttgbnumber');
-.font('NZBZ', 'NZBZ');
-.font('YS', 'HYWH-65W');
-
-@import "base.less";
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-body {
-  font-size: 18px;
-  color: #1e1f20;
-  font-family: Number, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif;
-  transform: scale(1.4);
-  transform-origin: 0 0;
-  width: 600px;
-}
-
-.container {
-  width: 600px;
-  padding: 20px 15px 10px 15px;
-  background-size: contain;
-}
-
-
-.head-box {
-  border-radius: 15px;
-  padding: 10px 20px;
-  position: relative;
-  color: #fff;
-  margin-top: 30px;
-
-  .title {
-    .font-NZBZ;
-    font-size: 36px;
-    text-shadow: 0 0 1px #000, 1px 1px 3px rgba(0, 0, 0, .9);
-
-    .label {
-      display: inline-block;
-      margin-left: 10px;
-    }
-  }
-
-  .genshin_logo {
-    position: absolute;
-    top: 1px;
-    right: 15px;
-    width: 97px;
-  }
-
-  .label {
-    font-size: 16px;
-    text-shadow: 0 0 1px #000, 1px 1px 3px rgba(0, 0, 0, .9);
-
-    span {
-      color: #d3bc8e;
-      padding: 0 2px;
-    }
-  }
-}
-
-
-.notice {
-  color: #888;
-  font-size: 12px;
-  text-align: right;
-  padding: 12px 5px 5px;
-}
-
-.notice-center {
-  color: #fff;
-  text-align: center;
-  margin-bottom: 10px;
-  text-shadow: 1px 1px 1px #333;
-}
-
-.copyright {
-  font-size: 14px;
-  text-align: center;
-  color: #fff;
-  position: relative;
-  padding-left: 10px;
-  text-shadow: 1px 1px 1px #000;
-  margin: 10px 0;
-
-  .version {
-    color: #d3bc8e;
-    display: inline-block;
-    padding: 0 3px;
-  }
-}
-
-
-/*  */
-
-.cons {
-  display: inline-block;
-  vertical-align: middle;
-  padding: 0 5px;
-  border-radius: 4px;
-}
-
-
-.cons(@idx, @bg, @color:#fff) {
-  .cons-@{idx} {
-    background: @bg;
-    color: @color;
-  }
-}
-
-.cons(0, #666);
-.cons(n0, #404949);
-.cons(1, #5cbac2);
-.cons(2, #339d61);
-.cons(3, #3e95b9);
-.cons(4, #3955b7);
-.cons(5, #531ba9cf);
-.cons(6, #ff5722);
-
-.cons2(@idx, @bg, @color:#fff) {
-  .cons2-@{idx} {
-    border-radius: 4px;
-    background: @bg;
-    color: @color;
-  }
-}
-
-.cons2(0, #666);
-.cons2(1, #71b1b7);
-.cons2(2, #369961);
-.cons2(3, #4596b9);
-.cons2(4, #4560b9);
-.cons2(5, #531ba9cf);
-.cons2(6, #ff5722);
-
-/********  Fetter  ********/
-
-.fetter {
-  width: 50px;
-  height: 50px;
-  display: inline-block;
-  background: url('./item/fetter.png');
-  background-size: auto 100%;
-  @fetters: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
-  each(@fetters, {
-    &.fetter@{value} {
-      background-position: (-100%/9)+(100%/9)*@value 0;
-    }
-  })
-}
-
-/********  ELEM  ********/
-
-@elems: hydro, anemo, cryo, electro, geo, pyro, dendro;
-
-each(@elems, {
-  .elem-@{value} .talent-icon {
-    background-image: url("./bg/talent-@{value}.png");
-  }
-
-  .elem-@{value} .elem-bg,
-  .@{value}-bg {
-    background-image: url("./bg/bg-@{value}.jpg");
-  }
-})
-
-
-/* cont */
-
-.cont {
-  border-radius: 10px;
-  background: url("../common/cont/card-bg.png") top left repeat-x;
-  background-size: auto 100%;
-  // backdrop-filter: blur(3px);
-  margin: 5px 15px 5px 10px;
-  position: relative;
-  box-shadow: 0 0 1px 0 #ccc, 2px 2px 4px 0 rgba(50, 50, 50, .8);
-  overflow: hidden;
-  color: #fff;
-  font-size: 16px;
-}
-
-
-.cont-title {
-  background: rgba(0, 0, 0, .4);
-  box-shadow: 0 0 1px 0 #fff;
-  color: #d3bc8e;
-  padding: 10px 20px;
-  text-align: left;
-  border-radius: 10px 10px 0 0;
-
-  span {
-    font-size: 12px;
-    color: #aaa;
-    margin-left: 10px;
-    font-weight: normal;
-  }
-
-  &.border-less {
-    background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
-    box-shadow: none;
-    padding-bottom: 5px;
-  }
-}
-
-.cont-body {
-  padding: 10px 15px;
-  font-size: 12px;
-  background: rgba(0, 0, 0, 0.5);
-  box-shadow: 0 0 1px 0 #fff;
-  font-weight: normal;
-}
-
-
-.cont-footer {
-  padding: 10px 15px;
-  font-size: 12px;
-  background: rgba(0, 0, 0, 0.5);
-  font-weight: normal;
-}
-
-.cont > ul.cont-msg {
-  display: block;
-  padding: 5px 10px;
-  background: rgba(0, 0, 0, 0.5);
-}
-
-ul.cont-msg, .cont-footer ul {
-  padding-left: 15px;
-
-  li {
-    margin: 5px 0;
-    margin-left: 15px;
-
-    strong {
-      font-weight: normal;
-      margin: 0 2px;
-      color: #d3bc8e;
-    }
-  }
-}
-
-.cont-table {
-  display: table;
-  width: 100%;
-}
-
-.cont-table .tr {
-  display: table-row;
-}
-
-.cont-table .tr:nth-child(even) {
-  background: rgba(0, 0, 0, .4);
-}
-
-.cont-table .tr:nth-child(odd) {
-  background: rgba(50, 50, 50, .4);
-}
-
-.cont-table .tr > div,
-.cont-table .tr > td {
-  display: table-cell;
-  box-shadow: 0 0 1px 0 #fff;
-}
-
-.cont-table .tr > div.value-full {
-  display: table;
-  width: 200%;
-}
-
-.cont-table .tr > div.value-none {
-  box-shadow: none;
-}
-
-.cont-table .thead {
-  text-align: center;
-}
-
-.cont-table .thead > div,
-.cont-table .thead > td {
-  color: #d3bc8e;
-  background: rgba(0, 0, 0, .4);
-  line-height: 40px;
-  height: 40px;
-}
-
-
-.cont-table .title,
-.cont-table .th {
-  color: #d3bc8e;
-  padding-right: 15px;
-  text-align: right;
-  background: rgba(0, 0, 0, .4);
-  min-width: 100px;
-  vertical-align: middle;
-}
-
-.logo {
-  font-size: 18px;
-  text-align: center;
-  color: #fff;
-  margin: 20px 0 10px 0;
-}
-
-/* item-icon */
-.item-icon {
-  width: 100%;
-  height: 100%;
-  border-radius: 4px;
-  position: relative;
-  overflow: hidden;
-
-  .img {
-    width: 100%;
-    height: 100%;
-    display: block;
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-  }
-
-  &.artis {
-    .img {
-      width: 84%;
-      height: 84%;
-      margin: 8%;
-    }
-  }
-
-  @stars: 1, 2, 3, 4, 5;
-  each(@stars, {
-    &.star@{value} {
-      background-image: url("../common/item/bg@{value}.png");
-    }
-    &.opacity-bg.star@{value} {
-      background-image: url("../common/item/bg@{value}-o.png");
-    }
-  })
-}
-
-.item-list {
-  display: flex;
-
-  .item-card {
-    width: 70px;
-    background: #e7e5d9;
-  }
-
-  .item-icon {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 12px;
-  }
-
-  .item-title {
-    color: #222;
-    font-size: 13px;
-    text-align: center;
-    padding: 2px;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
-  .item-icon {
-    height: initial;
-  }
-
-  .item-badge {
-    position: absolute;
-    display: block;
-    left: 0;
-    top: 0;
-    background: rgba(0, 0, 0, 0.6);
-    font-size: 12px;
-    color: #fff;
-    padding: 4px 5px 3px;
-    border-radius: 0 0 6px 0;
-  }
-}
\ No newline at end of file
diff --git a/resources/common/face/what.jpg b/resources/common/face/what.jpg
deleted file mode 100644
index e9a57f3..0000000
Binary files a/resources/common/face/what.jpg and /dev/null differ
diff --git a/resources/common/tpl.css b/resources/common/tpl.css
deleted file mode 100644
index c63d73e..0000000
--- a/resources/common/tpl.css
+++ /dev/null
@@ -1,332 +0,0 @@
-.item-card {
-  width: 66px;
-  margin: 4px;
-  position: relative;
-  border-radius: 5px;
-}
-.item-card .badge {
-  overflow: hidden;
-  border-radius: 50%;
-  display: block;
-  width: 26px;
-  height: 26px;
-  position: absolute;
-  right: -4px;
-  top: -4px;
-  background: #e9e5dc;
-  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.8), 2px 2px 2px rgba(50, 50, 50, 0.5);
-  z-index: 10;
-}
-.item-card .badge img {
-  width: 140%;
-  left: -27%;
-  top: -45%;
-  overflow: hidden;
-  background-size: 100%;
-  background-repeat: no-repeat;
-  position: absolute;
-}
-.item-card .item-bg {
-  width: 100%;
-  padding: 100% 0 0;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-  margin: 0;
-}
-.item-card .bg1 {
-  background-image: url("./item/bg1.png");
-  border-radius: 5px 5px 15px 0;
-}
-.item-card .bg-1 {
-  background-image: url("./item/bg1.png");
-  border-radius: 5px 5px 15px 0;
-}
-.item-card .bg2 {
-  background-image: url("./item/bg2.png");
-  border-radius: 5px 5px 15px 0;
-}
-.item-card .bg-2 {
-  background-image: url("./item/bg2.png");
-  border-radius: 5px 5px 15px 0;
-}
-.item-card .bg3 {
-  background-image: url("./item/bg3.png");
-  border-radius: 5px 5px 15px 0;
-}
-.item-card .bg-3 {
-  background-image: url("./item/bg3.png");
-  border-radius: 5px 5px 15px 0;
-}
-.item-card .bg4 {
-  background-image: url("./item/bg4.png");
-  border-radius: 5px 5px 15px 0;
-}
-.item-card .bg-4 {
-  background-image: url("./item/bg4.png");
-  border-radius: 5px 5px 15px 0;
-}
-.item-card .bg5 {
-  background-image: url("./item/bg5.png");
-  border-radius: 5px 5px 15px 0;
-}
-.item-card .bg-5 {
-  background-image: url("./item/bg5.png");
-  border-radius: 5px 5px 15px 0;
-}
-.item-card .box {
-  border-radius: 5px;
-  overflow: hidden;
-  background: #e9e5dc;
-}
-.item-card .box .item-desc {
-  display: block;
-  font-weight: 500;
-  text-align: center;
-  bottom: 0;
-  background: #e9e5dc;
-  width: 100%;
-  font-size: 12px;
-  line-height: 16px;
-  white-space: nowrap;
-  overflow: hidden;
-  padding: 0 3px;
-}
-.item-card .box .item-desc:last-child {
-  padding-bottom: 2px;
-}
-.item-card .box .name {
-  overflow: hidden;
-  white-space: nowrap;
-  margin-top: 5px;
-  font-weight: 500;
-  text-align: center;
-  font-size: 14px;
-}
-.item-card .box .item-img {
-  width: 100%;
-  overflow: hidden;
-  background-size: 100%;
-  background-repeat: no-repeat;
-  position: absolute;
-  top: 0;
-}
-.item-card .item-life {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 9;
-  font-size: 13px;
-  text-align: center;
-  color: #fff;
-  padding: 1px 4px;
-  border-radius: 3px;
-}
-.item-card .life1 {
-  background-color: #62a8ea;
-}
-.item-card .life2 {
-  background-color: #62a8ea;
-}
-.item-card .life3 {
-  background-color: #62a8ea;
-}
-.item-card .life4 {
-  background-color: #ff5722;
-}
-.item-card .life5 {
-  background-color: #ff5722;
-}
-.avatar-card {
-  margin: 3px;
-  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.8);
-  font-size: 13px;
-}
-.avatar-card .card {
-  border-radius: 7px;
-  box-shadow: 0 2px 6px 0 rgba(132, 93, 90, 0.3);
-  position: relative;
-  overflow: hidden;
-  background: #e7e5d9;
-  width: 70px;
-}
-.avatar-card .avatar-face {
-  width: 70px;
-  height: 70px;
-  border-radius: 7px 7px 15px 0;
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-  position: relative;
-  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5);
-}
-.avatar-card .avatar-face .img {
-  background-position: center bottom;
-}
-.avatar-card .avatar-face .avatar-level {
-  position: absolute;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.6);
-  left: 0;
-  padding: 2px 5px 2px 3px;
-  border-radius: 0 4px 0 0;
-  color: #fff;
-}
-.avatar-card .cons {
-  border-radius: 0 0 0 5px;
-  padding: 2px 5px;
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-.avatar-card .avatar-talent {
-  height: 21px;
-  padding: 3px 5px 2px;
-  font-size: 12px;
-  width: 100%;
-  color: #222;
-  text-align: center;
-  display: flex;
-}
-.avatar-card .avatar-talent .talent-item {
-  width: 20px;
-  height: 16px;
-  line-height: 17px;
-  margin: 0 2px;
-  text-align: center;
-  display: block;
-  background-size: contain;
-  opacity: 0.8;
-  position: relative;
-  border-radius: 3px;
-  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);
-}
-.avatar-card .avatar-talent .talent-item.talent-plus {
-  font-weight: bold;
-  color: #0284b9;
-}
-.avatar-card .avatar-talent .talent-item.talent-crown {
-  background: #d3bc8e;
-  color: #3a2702;
-  box-shadow: 0 0 2px 0 #000;
-}
-.avatar-card .avatar-talent.no-talent {
-  font-size: 12px;
-  color: rgba(100, 100, 100, 0.5);
-  text-align: center;
-  padding: 3px 0 2px;
-}
-.avatar-card .avatar-talent.no-talent span {
-  transform: scale(0.75);
-  white-space: nowrap;
-  margin-left: -1px;
-}
-.avatar-card.card-mini .wide,
-.avatar-card.card-mini .line {
-  display: none;
-}
-.avatar-card .avatar-name {
-  padding: 8px 0 0 5px;
-  color: #333;
-}
-.avatar-card .avatar-name strong {
-  font-size: 14px;
-  display: block;
-  height: 23px;
-  line-height: 20px;
-}
-.avatar-card .avatar-name .cons {
-  position: initial;
-  border-radius: 4px;
-  padding: 1px 3px;
-  vertical-align: baseline;
-}
-.avatar-card.card-wide .mini {
-  display: none;
-}
-.avatar-card.card-wide .card {
-  width: 146px;
-  display: flex;
-}
-.avatar-card.card-wide .avatar-face {
-  height: 126px;
-  width: 76px;
-  border-radius: 7px 0 0 7px;
-}
-.avatar-card.card-wide .img {
-  background-size: 100% auto;
-  background-position: 0 10%;
-  height: 135px;
-  margin-top: -9px;
-}
-.avatar-card.card-wide .avatar-info {
-  width: 70px;
-}
-.avatar-card.card-wide .line {
-  display: block;
-  height: 1px;
-  width: 100%;
-  margin: 5px 0;
-  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(100, 100, 100, 0.5) 20%, rgba(100, 100, 100, 0.5) 80%, rgba(0, 0, 0, 0));
-  transform: scale(0.8);
-}
-.avatar-card.wide2 .card {
-  width: 298px;
-}
-.avatar-card.wide2 .avatar-face {
-  width: 146px;
-}
-.avatar-card.wide2 .avatar-face .img {
-  margin-top: -50px;
-  height: 176px;
-}
-.avatar-card.wide2 .avatar-info {
-  width: 146px;
-  padding-left: 5px;
-}
-.avatar-detail {
-  display: flex;
-  padding: 0 1px 2px;
-}
-.avatar-detail .item {
-  width: 31px;
-  height: 31px;
-  border-radius: 4px;
-  margin: 1px;
-}
-.avatar-weapon .icon {
-  border-radius: 4px;
-}
-.avatar-weapon .cons {
-  top: initial;
-  bottom: 0;
-  padding: 1px 3px;
-  border-radius: 3px 0 0 0;
-}
-.avatar-artis {
-  position: relative;
-}
-.avatar-artis .artis {
-  background: rgba(0, 0, 0, 0.5);
-}
-.avatar-artis.artis2 .img {
-  position: absolute;
-  transform: scale(0.7);
-  width: 92%;
-  height: 92%;
-  margin: 4%;
-}
-.avatar-artis.artis2 .img:first-child {
-  transform-origin: left top;
-}
-.avatar-artis.artis2 .img:last-child {
-  transform-origin: right bottom;
-}
-.item-list {
-  display: flex;
-  flex-wrap: wrap;
-  transform-origin: 0 0;
-}
-.item-list .item {
-  width: 65px;
-}
-/*# sourceMappingURL=tpl.css.map */
\ No newline at end of file
diff --git a/resources/common/tpl.less b/resources/common/tpl.less
deleted file mode 100644
index ac47da8..0000000
--- a/resources/common/tpl.less
+++ /dev/null
@@ -1,12 +0,0 @@
-@import url('tpl/item-card');
-@import url('tpl/avatar-card');
-
-.item-list {
-  display: flex;
-  flex-wrap: wrap;
-  transform-origin: 0 0;
-}
-
-.item-list .item {
-  width: 65px;
-}
\ No newline at end of file
diff --git a/resources/common/tpl/artis-detail.css b/resources/common/tpl/artis-detail.css
deleted file mode 100644
index 06ce5f2..0000000
--- a/resources/common/tpl/artis-detail.css
+++ /dev/null
@@ -1,116 +0,0 @@
-.arti-detail {
-  width: 185px;
-  border-radius: 10px;
-  background: url("../cont/card-bg.png") top left repeat-x;
-  background-size: auto 100%;
-  margin: 5px;
-  position: relative;
-  box-shadow: 0 0 1px 0 #ccc, 2px 2px 4px 0 rgba(50, 50, 50, 0.8);
-  height: 205px;
-  overflow: hidden;
-}
-.arti-detail .arti-icon {
-  width: 60px;
-  height: 60px;
-  position: absolute;
-  left: 2px;
-  top: 3px;
-}
-.arti-detail .arti-icon span {
-  position: absolute;
-  right: 2px;
-  bottom: 0;
-  margin-left: 5px;
-  background: rgba(0, 0, 0, 0.5);
-  border-radius: 5px;
-  height: 18px;
-  line-height: 18px;
-  padding: 0 3px;
-  color: #fff;
-  font-size: 12px;
-  display: block;
-}
-.arti-detail .arti-icon img {
-  width: 60px;
-  height: 60px;
-}
-.arti-detail .head {
-  color: #fff;
-  padding: 12px 0 8px 68px;
-}
-.arti-detail .head strong {
-  font-size: 15px;
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  font-font: YS;
-}
-.arti-detail .head span {
-  font-size: 14px;
-}
-.arti-detail .head .mark {
-  font-family: Number, YS;
-}
-.arti-detail ul.detail {
-  width: 100%;
-  padding: 0;
-  position: initial;
-  font-family: YS;
-}
-.arti-detail ul.detail li {
-  padding: 0 3px;
-  font-size: 14px;
-  position: initial;
-  width: 100%;
-  display: table;
-  line-height: 26px;
-  height: 26px;
-}
-.arti-detail ul.detail li.nouse span {
-  color: #888;
-}
-.arti-detail ul.detail li.arti-main {
-  font-size: 16px;
-  padding: 3px 3px;
-  font-weight: bold;
-}
-.arti-detail ul.detail li span {
-  position: initial;
-  display: table-cell;
-  color: #fff;
-  font-family: YS;
-}
-.arti-detail ul.detail li.title {
-  text-align: left;
-  padding-left: 10px;
-}
-.arti-detail ul.detail li.val {
-  text-align: right;
-  padding-right: 10px;
-  font-family: Number;
-}
-.arti-detail ul.detail:nth-child(even) {
-  background: rgba(0, 0, 0, 0.4);
-}
-.arti-detail ul.detail:nth-child(odd) {
-  background: rgba(50, 50, 50, 0.4);
-}
-.arti-detail .avatar {
-  position: absolute;
-  left: 32px;
-  top: 26px;
-  width: 38px;
-  height: 38px;
-  border-radius: 50%;
-  overflow: hidden;
-  z-index: 3;
-}
-.arti-detail .avatar img {
-  max-width: 100%;
-  max-height: 100%;
-}
-.arti-detail .arti-icon img {
-  width: 52px;
-  height: 52px;
-}
-/*# sourceMappingURL=artis-detail.less.map */
\ No newline at end of file
diff --git a/resources/common/tpl/avatar-card.css b/resources/common/tpl/avatar-card.css
deleted file mode 100644
index 379e768..0000000
--- a/resources/common/tpl/avatar-card.css
+++ /dev/null
@@ -1,57 +0,0 @@
-.avatar-card {
-  margin: 0 0 10px 10px;
-  border-radius: 7px;
-  box-shadow: 0 2px 6px 0 rgba(132, 93, 90, 0.3);
-  height: 88px;
-  position: relative;
-  overflow: hidden;
-  background: #e7e5d9;
-}
-.avatar-card img {
-  width: 70px;
-  height: 70px;
-  border-radius: 7px 7px 20px 0;
-}
-.avatar-card.star5 img {
-  background-image: url(../common/item/bg5.png);
-  width: 100%;
-  height: 70px;
-  /*filter: brightness(1.1);*/
-  background-size: 100%;
-  background-repeat: no-repeat;
-}
-.avatar-card.star4 img {
-  width: 100%;
-  height: 70px;
-  background-image: url(../common/item/bg4.png);
-  background-size: 100%;
-  background-repeat: no-repeat;
-}
-.avatar-card .num {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 9;
-  font-size: 18px;
-  text-align: center;
-  color: #fff;
-  padding: 1px 5px;
-  border-radius: 4px;
-  background: rgba(0, 0, 0, 0.5);
-}
-.avatar-card .name,
-.avatar-card .num_name {
-  position: absolute;
-  top: 70px;
-  left: 0;
-  z-index: 9;
-  font-size: 12px;
-  text-align: center;
-  width: 100%;
-  height: 16px;
-  line-height: 18px;
-}
-.avatar-card .num_name {
-  font-size: 16px;
-}
-/*# sourceMappingURL=avatar-card.css.map */
\ No newline at end of file
diff --git a/resources/common/tpl/avatar-card.html b/resources/common/tpl/avatar-card.html
deleted file mode 100644
index e5e3c65..0000000
--- a/resources/common/tpl/avatar-card.html
+++ /dev/null
@@ -1,53 +0,0 @@
-{{set avatar = $data[0] || false }}
-{{set {_res_path, cardType} = $data[1]}}
-{{set weapon = avatar.weapon || {} }}
-{{set talentMap = ['a','e','q'] }}
-
-<div class="avatar-card elem-{{avatar.elem}} avatar-{{avatar.name}} card-{{cardType||'mini'}}">
-  <div class="card">
-    {{if avatar}}
-    <div class="avatar-face item-icon star{{avatar.star==4?4:5}}">
-      <div class="img mini" style="background-image:url({{_res_path}}{{avatar.face}})"></div>
-      <div class="img wide avatar-{{avatar.name}}" style="background-image:url({{_res_path}}{{avatar.gacha}})"></div>
-      <span class="cons cons-{{avatar.cons}} mini">{{avatar.cons}}</span>
-      <div class="avatar-level">Lv{{avatar.level}}</div>
-    </div>
-    <div class="avatar-info">
-      {{set talent = avatar.talent || {} }}
-      {{if talent.a && talent.a.level }}
-      <div class="avatar-name wide">
-        <strong>{{avatar.abbr}}</strong>
-        <span class="cons cons-{{avatar.cons}}">{{avatar.cons}}</span>
-        <span class="avatar-level">Lv{{avatar.level}}</span>
-        <div class="line"></div>
-      </div>
-      <div class="avatar-talent">
-        {{each talentMap k}}
-        {{set t = talent[k] || {} }}        <span
-            class="talent-item talent-{{k}} talent-{{t.original===10?'crown':'none'}} talent-{{t.level>t.original?'plus':'none'}}">{{t.level}}</span>
-        {{/each}}
-      </div>
-      {{else}}
-      <div class="avatar-talent no-talent"><span>暂无天赋数据</span></div>
-      {{/if}}
-      <div class="line"></div>
-      <div class="avatar-detail">
-        <div class="item avatar-weapon">
-          <div class="item-icon star{{weapon.star}}">
-            <span class="img" style="background-image:url({{_res_path}}{{weapon.img}})"></span>
-            <span class="cons cons-{{weapon.affix}}">{{weapon.affix}}</span>
-          </div>
-        </div>
-        <div class="item avatar-artis artis{{avatar.artisSet?.names?.length}}">
-          <div class="artis item-icon">
-            {{each avatar.artisSet?.imgs img}}
-            <div class="img" style="background-image:url({{_res_path}}{{img}})"></div>
-            {{/each}}
-          </div>
-          <div class="item-info wide"></div>
-        </div>
-      </div>
-      {{/if}}
-    </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/resources/common/tpl/avatar-card.less b/resources/common/tpl/avatar-card.less
deleted file mode 100644
index f3ce5f9..0000000
--- a/resources/common/tpl/avatar-card.less
+++ /dev/null
@@ -1,237 +0,0 @@
-.avatar-card {
-  margin: 3px;
-  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.8);
-  font-size: 13px;
-
-
-  .card {
-    border-radius: 7px;
-    box-shadow: 0 2px 6px 0 rgb(132 93 90 / 30%);
-    position: relative;
-    overflow: hidden;
-    background: #e7e5d9;
-    width: 70px;
-  }
-
-  .avatar-face {
-    width: 70px;
-    height: 70px;
-    border-radius: 7px 7px 15px 0;
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    position: relative;
-    box-shadow: 0 0 2px 0 rgba(0, 0, 0, .5);
-
-    .img {
-      background-position: center bottom;
-    }
-
-
-    .avatar-level {
-      position: absolute;
-      bottom: 0;
-      background: rgba(0, 0, 0, 0.6);
-      left: 0;
-      padding: 2px 5px 2px 3px;
-      border-radius: 0 4px 0 0;
-      color: #fff;
-    }
-
-
-  }
-
-
-  .cons {
-    border-radius: 0 0 0 5px;
-    padding: 2px 5px;
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-
-  .avatar-talent {
-    height: 21px;
-    padding: 3px 5px 2px;
-    font-size: 12px;
-    width: 100%;
-    color: #222;
-    text-align: center;
-    display: flex;
-
-    .talent-item {
-      width: 20px;
-      height: 16px;
-      line-height: 17px;
-      margin: 0 2px;
-      text-align: center;
-      display: block;
-      background-size: contain;
-      opacity: 0.8;
-      position: relative;
-      border-radius: 3px;
-      box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);
-
-      &.talent-plus {
-        font-weight: bold;
-        color: #0284b9;
-      }
-
-      &.talent-crown {
-        background: #d3bc8e;
-        color: #3a2702;
-        box-shadow: 0 0 2px 0 #000;
-      }
-    }
-
-    &.no-talent {
-      font-size: 12px;
-      color: rgba(100, 100, 100, .5);
-      text-align: center;
-      padding: 3px 0 2px;
-
-      span {
-        transform: scale(.75);
-        white-space: nowrap;
-        margin-left: -1px;
-      }
-    }
-  }
-
-  &.card-mini {
-    .wide, .line {
-      display: none;
-    }
-  }
-
-  .avatar-name {
-    padding: 8px 0 0 5px;
-    color: #333;
-
-    strong {
-      font-size: 14px;
-      display: block;
-      height: 23px;
-      line-height: 20px;
-    }
-
-    .cons {
-      position: initial;
-      border-radius: 4px;
-      padding: 1px 3px;
-      vertical-align: baseline;
-    }
-  }
-
-  &.card-wide {
-    .mini {
-      display: none;
-    }
-
-    .card {
-      width: 146px;
-      display: flex;
-    }
-
-    .avatar-face {
-      height: 126px;
-      width: 76px;
-      border-radius: 7px 0 0 7px;
-    }
-
-    .img {
-      background-size: 100% auto;
-      background-position: 0 10%;
-      height: 135px;
-      margin-top: -9px;
-    }
-
-    .avatar-info {
-      width: 70px;
-    }
-
-    .line {
-      display: block;
-      height: 1px;
-      width: 100%;
-      margin: 5px 0;
-      background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(100, 100, 100, .5) 20%, rgba(100, 100, 100, .5) 80%, rgba(0, 0, 0, 0));
-      transform: scale(.8)
-    }
-  }
-
-  &.wide2 {
-    .card {
-      width: 298px;
-    }
-
-    .avatar-face {
-      width: 146px;
-
-      .img {
-        margin-top: -50px;
-        height: 176px;
-      }
-    }
-
-    .avatar-info {
-      width: 146px;
-      padding-left: 5px;
-    }
-
-
-  }
-
-}
-
-.avatar-detail {
-  display: flex;
-  padding: 0 1px 2px;
-
-  .item {
-    width: 31px;
-    height: 31px;
-    border-radius: 4px;
-    margin: 1px;
-  }
-}
-
-.avatar-weapon {
-  .icon {
-    border-radius: 4px;
-  }
-
-  .cons {
-    top: initial;
-    bottom: 0;
-    padding: 1px 3px;
-    border-radius: 3px 0 0 0;
-  }
-}
-
-.avatar-artis {
-  position: relative;
-
-  .artis {
-    background: rgba(0, 0, 0, 0.5)
-  }
-
-  &.artis2 {
-    .img {
-      position: absolute;
-      transform: scale(.7);
-      width: 92%;
-      height: 92%;
-      margin: 4%;
-
-      &:first-child {
-        transform-origin: left top;
-      }
-
-      &:last-child {
-        transform-origin: right bottom;
-      }
-    }
-  }
-
-
-}
\ No newline at end of file
diff --git a/resources/common/tpl/avatar-profile.css b/resources/common/tpl/avatar-profile.css
deleted file mode 100644
index edf1125..0000000
--- a/resources/common/tpl/avatar-profile.css
+++ /dev/null
@@ -1,204 +0,0 @@
-.profile {
-  position: relative;
-  margin-bottom: 10px;
-}
-.profile:after {
-  content: "";
-  display: block;
-  position: absolute;
-  left: 8px;
-  top: 115px;
-  bottom: 0;
-  right: 8px;
-  box-shadow: 0 0 2px 0 #fff;
-  border-radius: 5px;
-  z-index: 1;
-}
-.profile .main-pic {
-  width: 800px;
-  height: 500px;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-  margin-left: -260px;
-  position: relative;
-  z-index: 2;
-}
-.profile .detail {
-  position: absolute;
-  right: 20px;
-  top: 20px;
-  color: #fff;
-  z-index: 3;
-}
-.profile .char-name {
-  font-size: 50px;
-  font-family: NZBZ;
-  text-shadow: 0 0 3px #000, 2px 2px 4px rgba(0, 0, 0, 0.7);
-  text-align: right;
-}
-.profile .char-lv {
-  font-family: Number;
-  margin-bottom: 20px;
-  text-shadow: 0 0 3px #000, 2px 2px 4px rgba(0, 0, 0, 0.7);
-  text-align: right;
-}
-.profile .attr {
-  border-radius: 4px;
-  overflow: hidden;
-}
-.profile .detail li {
-  width: 300px;
-  font-size: 17px;
-  list-style: none;
-  padding: 0 100px 0 35px;
-  position: relative;
-  font-family: YS;
-  height: 32px;
-  line-height: 32px;
-  text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
-}
-.profile .attr li i {
-  display: inline-block;
-  height: 20px;
-  width: 20px;
-  background-image: url("../../character/icon.png");
-  background-size: auto 20px;
-  position: absolute;
-  left: 10px;
-  top: 8px;
-  opacity: 0.9;
-  transform: scale(0.9);
-}
-.profile .i-hp {
-  background-position: -20px 0;
-}
-.profile .i-atk {
-  background-position: -40px 0;
-}
-.profile .i-def {
-  background-position: -60px 0;
-}
-.profile .i-mastery {
-  background-position: -80px 0;
-}
-.profile .i-cr {
-  background-position: -100px 0;
-}
-.profile .i-cd {
-  background-position: -140px 0;
-}
-.profile .i-re {
-  background-position: -120px 0;
-}
-.profile .i-dmg {
-  background-position: -160px 0;
-}
-.profile .detail li:nth-child(even) {
-  background: rgba(0, 0, 0, 0.4);
-}
-.profile .detail li:nth-child(odd) {
-  background: rgba(50, 50, 50, 0.4);
-}
-.profile .detail li strong {
-  display: inline-block;
-  position: absolute;
-  right: 85px;
-  text-align: right;
-  font-family: Number, sans-serif;
-  font-weight: normal;
-}
-.profile .detail li span {
-  position: absolute;
-  right: 0;
-  text-align: left;
-  width: 75px;
-  display: inline-block;
-  font-family: Number, sans-serif;
-  color: #90e800;
-  font-size: 15px;
-}
-.profile .talent-icon {
-  width: 100px;
-  height: 100px;
-  padding: 5px;
-  display: table;
-  border-radius: 50%;
-  position: relative;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center center;
-  z-index: 90;
-}
-.profile .talent-icon img,
-.profile .talent-icon .profile .talent-icon-img {
-  width: 46%;
-  height: 46%;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin: -22% 0 0 -23%;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-}
-.profile .talent-icon span {
-  background: #fff;
-  width: 34px;
-  height: 26px;
-  line-height: 26px;
-  font-size: 17px;
-  text-align: center;
-  border-radius: 5px;
-  position: absolute;
-  bottom: 2px;
-  left: 50%;
-  margin-left: -15px;
-  color: #000;
-  box-shadow: 0 0 5px 0 #000;
-  font-family: Number;
-}
-.profile .talent-icon.talent-plus span {
-  background: #2e353e;
-  color: #ffdfa0;
-  font-weight: bold;
-  box-shadow: 0 0 1px 0 #d3bc8e, 1px 1px 2px 0 rgba(0, 0, 0, 0.5);
-}
-.profile .talent-icon.talent-crown:after {
-  content: "";
-  display: block;
-  width: 28px;
-  height: 28px;
-  background: url("../character/imgs/crown.png") no-repeat;
-  background-size: contain;
-  position: absolute;
-  left: 50%;
-  top: 0;
-  margin-left: -14px;
-}
-.profile .char-talents {
-  display: flex;
-  width: 300px;
-  margin-bottom: 10px;
-}
-.profile .char-cons .talent-item,
-.profile .char-talents .talent-item {
-  flex: 1;
-}
-.profile .char-cons {
-  display: flex;
-  width: 250px;
-  position: absolute;
-  bottom: 5px;
-  left: 20px;
-}
-.profile .char-cons .talent-icon {
-  width: 50px;
-  height: 50px;
-  margin: 0 -5px;
-}
-.profile .char-cons .talent-icon.off {
-  filter: grayscale(100%);
-  opacity: 0.4;
-}
-/*# sourceMappingURL=avatar-profile-source.css.map */
\ No newline at end of file
diff --git a/resources/common/tpl/item-card.css b/resources/common/tpl/item-card.css
deleted file mode 100644
index d5bfc61..0000000
--- a/resources/common/tpl/item-card.css
+++ /dev/null
@@ -1,113 +0,0 @@
-.item-card {
-  width: 52px;
-  margin: 0px 0 5px 7px;
-  position: relative;
-}
-.item-card .badge {
-  overflow: hidden;
-  border-radius: 5px;
-  position: relative;
-  background: #e9e5dc;
-  box-shadow: 0 2px 6px 0 rgba(132, 93, 90, 0.3);
-}
-.item-card .badge img {
-  width: 100%;
-  overflow: hidden;
-  background-size: 100%;
-  background-repeat: no-repeat;
-  position: absolute;
-  top: 0;
-  /*filter: contrast(95%);*/
-}
-.item-card .bg1 {
-  background-image: url("imgs/bg1.png");
-  width: 100%;
-  height: 70px;
-  background-size: 100%;
-  background-repeat: no-repeat;
-}
-.item-card .bg2 {
-  background-image: url("imgs/bg2.png");
-  width: 100%;
-  height: 70px;
-  background-size: 100%;
-  background-repeat: no-repeat;
-}
-.item-card .bg3 {
-  background-image: url("imgs/bg3.png");
-  width: 100%;
-  height: 70px;
-  background-size: 100%;
-  background-repeat: no-repeat;
-}
-.item-card .bg4 {
-  background-image: url("imgs/bg4.png");
-  width: 100%;
-  height: 70px;
-  background-size: 100%;
-  background-repeat: no-repeat;
-}
-.item-card .bg5 {
-  background-image: url("imgs/bg5.png");
-  width: 100%;
-  height: 70px;
-  background-size: 100%;
-  background-repeat: no-repeat;
-}
-.item-card .box:after {
-  content: "";
-  display: block;
-  position: absolute;
-  width: 15px;
-  right: 0;
-  bottom: 15px;
-}
-.item-card .box .desc {
-  font-weight: 500;
-  text-align: center;
-  position: absolute;
-  bottom: 0;
-  background: #e9e5dc;
-  width: 100%;
-  height: 16px;
-  font-size: 12px;
-  line-height: 16px;
-  font-family: Number;
-}
-.item-card .box .name {
-  overflow: hidden;
-  white-space: nowrap;
-  margin-top: 5px;
-  font-weight: 500;
-  text-align: center;
-  font-size: 14px;
-}
-.item-card .life {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  z-index: 9;
-  font-size: 13px;
-  text-align: center;
-  color: #fff;
-  border-radius: 2px;
-  padding: 1px 4px;
-  border-radius: 3px;
-  font-family: "tttgbnumber";
-}
-.item-card .life1 {
-  background-color: #62a8ea;
-}
-.item-card .life2 {
-  background-color: #62a8ea;
-}
-.item-card .life3 {
-  background-color: #62a8ea;
-}
-.item-card .life4 {
-  background-color: #ff5722;
-}
-.item-card .life5 {
-  background-color: #ff5722;
-}
-/*# sourceMappingURL=item-card.less.map */
\ No newline at end of file
diff --git a/resources/common/tpl/item-card.less b/resources/common/tpl/item-card.less
deleted file mode 100644
index 74eb0b9..0000000
--- a/resources/common/tpl/item-card.less
+++ /dev/null
@@ -1,120 +0,0 @@
-
-.item-card {
-  width: 66px;
-  margin: 4px;
-  position: relative;
-  border-radius: 5px;
-
-
-  .badge {
-    overflow: hidden;
-    border-radius: 50%;
-    display: block;
-    width: 26px;
-    height: 26px;
-    position: absolute;
-    right: -4px;
-    top: -4px;
-    background: #e9e5dc;
-    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.8), 2px 2px 2px rgba(50, 50, 50, .5);
-    z-index: 10;
-
-
-    img {
-      width: 140%;
-      left: -27%;
-      top: -45%;
-      overflow: hidden;
-      background-size: 100%;
-      background-repeat: no-repeat;
-      position: absolute;
-    }
-  }
-
-  .item-bg {
-    width: 100%;
-    padding: 100% 0 0;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-    margin: 0;
-  }
-
-  each(range(5), {
-    .bg@{value} {
-      background-image: url("./item/bg@{value}.png");
-      border-radius: 5px 5px 15px 0;
-    }
-    .bg-@{value} {
-      background-image: url("./item/bg@{value}.png");
-      border-radius: 5px 5px 15px 0;
-    }
-  })
-
-  .box {
-    border-radius: 5px;
-    overflow: hidden;
-    background: #e9e5dc;
-
-    .item-desc {
-      display: block;
-      font-weight: 500;
-      text-align: center;
-      bottom: 0;
-      background: #e9e5dc;
-      width: 100%;
-      font-size: 12px;
-      line-height: 16px;
-      white-space: nowrap;
-      overflow: hidden;
-      padding: 0 3px;
-
-      &:last-child {
-        padding-bottom: 2px;
-      }
-    }
-
-    .name {
-      overflow: hidden;
-      white-space: nowrap;
-      margin-top: 5px;
-      font-weight: 500;
-      text-align: center;
-      font-size: 14px;
-    }
-
-    .item-img {
-      width: 100%;
-      overflow: hidden;
-      background-size: 100%;
-      background-repeat: no-repeat;
-      position: absolute;
-      top: 0;
-    }
-  }
-
-  .item-life {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 9;
-    font-size: 13px;
-    text-align: center;
-    color: #fff;
-    padding: 1px 4px;
-    border-radius: 3px;
-  }
-
-  .life(@idx, @color) {
-    .life@{idx} {
-      background-color: @color;
-    }
-  }
-
-  .life(1, #62a8ea);
-  .life(2, #62a8ea);
-  .life(3, #62a8ea);
-  .life(4, #ff5722);
-  .life(5, #ff5722);
-}
-
diff --git a/resources/common/tpl/talent-detail.html b/resources/common/tpl/talent-detail.html
deleted file mode 100644
index 77d2e75..0000000
--- a/resources/common/tpl/talent-detail.html
+++ /dev/null
@@ -1,61 +0,0 @@
-{{set ds = $data[0] || false }}
-{{set {_res_path, icon,lvs,type} = $data[1]}}
-
-<div class="talent-line">
-    <div class="talent-icon">
-        <img src="{{_res_path}}{{icon}}"/>
-    </div>
-    <div class="talent-info">
-        <div class="talent-name">{{ds.name}}</div>
-        <div class="talent-desc">
-            {{each ds.desc d}}
-            {{ if d[0] === "<" }}
-            {{@d}}
-            {{else if d!=""}}
-            <p>{{d}}</p>
-            {{/if}}
-            {{/each}}
-        </div>
-    </div>
-
-    {{if ds.tables && ds.tables.length > 0}}
-    <div class="talent-common-info">
-        {{each ds.tables tr}}
-        {{if tr.isSame}}
-        <div>
-            <strong>{{tr.name}}{{if tr.unit}}({{tr.unit}}){{/if}}</strong>
-            <span>{{tr.values[0]}}</span>
-        </div>
-        {{/if}}
-        {{/each}}
-    </div>
-    <table class="talent-table cont-table">
-        <tr class="tr">
-            <td class="th"></td>
-            {{each lvs lv idx}}
-            {{if (type=="a" && idx>4 && idx<11) || (type!="a" && idx>4 && idx < 13)}}
-            <td class="th lv">{{lv}}</td>
-            {{/if}}
-            {{/each}}
-        </tr>
-        {{each ds.tables tr}}
-        {{if !tr.isSame}}
-        <tr class="tr">
-            <td class="th talent-name">
-                {{tr.name}}
-                {{if tr.unit}}
-                <span class="unit">({{tr.unit}})</span>
-                {{/if}}
-            </td>
-
-            {{each tr.values v idx}}
-            {{if (type=="a" && idx>4 && idx<11) || (type!="a" && idx>4 && idx < 13)}}
-            <td class="td">{{v}}</td>
-            {{/if}}
-            {{/each}}
-            {{/if}}
-        </tr>
-        {{/each}}
-    </table>
-    {{/if}}
-</div>
diff --git a/resources/state/state.css b/resources/state/state.css
index 21a492c..8b72f1c 100644
--- a/resources/state/state.css
+++ b/resources/state/state.css
@@ -1,264 +1,239 @@
 :root {
-    --high-color: #d73403;
-    --medium-color: #ffa500;
-    --low-color: #90ee90;
+  --high-color: #d73403;
+  --medium-color: #ffa500;
+  --low-color: #90ee90;
 }
 
 .container {
-    background: url("https://api.ghser.com/random/pe.php") white center top no-repeat;
-    background-size: cover;
+  background-image: url("https://api.ghser.com/random/pe.php");
+  background-color: white;
+  background-position: center top;
+  background-repeat: no-repeat;
+  background-size: cover;
 }
 
 li {
-    list-style: none;
+  list-style: none;
 }
 
 body {
-    display: flex;
-    height: 100%;
-    /* width: 500px !important; */
-    flex-direction: column;
-    justify-content: space-around;
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  justify-content: space-around;
 }
 
 .box {
-    margin: 20px;
-    padding: 10px;
-    background: rgba(255, 255, 255, 0.45);
-    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-    border-radius: 10px;
-    border: 1px solid rgba(255, 255, 255, 0.18);
-    font-weight: 700;
+  margin: 20px;
+  padding: 10px;
+  background: rgba(255, 255, 255, 0.45);
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+  -webkit-backdrop-filter: blur(10px);
+          backdrop-filter: blur(10px);
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  font-weight: 700;
 }
 
 .tb {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
-
 .tb .avatar {
-    position: relative;
-    height: 100px;
-    width: 100px;
-    border-radius: 50%;
-    margin-right: 20px;
-    /* box-shadow: 1px 1px 3px 0 #000; */
+  position: relative;
+  height: 100px;
+  width: 100px;
+  border-radius: 50%;
+  margin-right: 20px;
 }
-
 .tb .avatar img {
-    width: 100%;
-    border-radius: 50%;
+  width: 100%;
+  border-radius: 50%;
 }
-
 .tb .avatar::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    z-index: -1;
-    margin: -3px;
-    border-radius: 50%;
-    box-shadow: 1px 1px 3px 0 #000;
-    background: linear-gradient(135deg, #fff1eb, #ace0f9);
-    /* background-size: 120%; */
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  z-index: -1;
+  margin: -3px;
+  border-radius: 50%;
+  box-shadow: 1px 1px 3px 0 #000;
+  background: linear-gradient(135deg, #fff1eb, #ace0f9);
 }
 
 hr {
-    border: 0;
-    height: 2px;
-    background-image: linear-gradient(135deg, #bdc3c7 10%, #2c3e50);
-    border-radius: 10px;
+  border: 0;
+  height: 2px;
+  background-image: linear-gradient(135deg, #bdc3c7 10%, #2c3e50);
+  border-radius: 10px;
 }
 
 .header {
-    max-width: 100%;
-    overflow: hidden;
+  max-width: 100%;
+  overflow: hidden;
 }
-
 .header hr {
-    margin: 5px 0px;
+  margin: 5px 0px;
 }
-
 .header p {
-    font-size: 12px;
-    color: #2f4f4f;
+  font-size: 12px;
+  color: #2f4f4f;
 }
-
 .header h1 {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    display: inline-block;
-    background-image: linear-gradient(271.14deg,
-            #001BFF 0.98%,
-            #00F0FF 25.79%,
-            #FCE84A 47.33%,
-            #F34628 65.77%,
-            #B275FF 91.4%);
-    background-clip: text;
-    -webkit-background-clip: text;
-    color: transparent;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  background-image: linear-gradient(271.14deg, #001bff 0.98%, #00f0ff 25.79%, #fce84a 47.33%, #f34628 65.77%, #b275ff 91.4%);
+  -webkit-background-clip: text;
+          background-clip: text;
+  color: transparent;
 }
 
 .info {
-    width: 100%;
-    display: flex;
-    justify-content: space-around;
-    font-weight: 700;
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  font-weight: 700;
+}
+.info .li article {
+  width: 100px;
+  text-align: center;
+}
+.info .li article summary {
+  font-size: 20px;
+  margin-top: 5px;
+}
+.info .li article p {
+  font-size: 12px;
+  color: #2f4f4f;
+  white-space: nowrap;
 }
 
 .cpu {
-    width: 100px;
-    height: 100px;
-    background: #eee;
-    position: relative;
-    border-radius: 50%;
+  width: 100px;
+  height: 100px;
+  background: #eee;
+  position: relative;
+  border-radius: 50%;
 }
 
 .left,
 .right {
-    width: 50px;
-    height: 100px;
-    position: absolute;
-    /* background: black; */
-    overflow: hidden;
+  width: 50px;
+  height: 100px;
+  position: absolute;
+  overflow: hidden;
 }
 
 .right {
-    right: 0;
+  right: 0;
+}
+.right .right-circle {
+  border-top-right-radius: 100px;
+  border-bottom-right-radius: 100px;
+  transform: rotate(180deg);
+  transform-origin: left center;
 }
 
 .left .left-circle,
 .right .right-circle {
-    width: 50px;
-    height: 100px;
-    background: #90ee90;
+  width: 50px;
+  height: 100px;
+  background: #90ee90;
 }
 
 .left .left-circle {
-    border-top-left-radius: 100px;
-    border-bottom-left-radius: 100px;
-    transform: rotate(-180deg);
-    transform-origin: right center;
-}
-
-.right .right-circle {
-    border-top-right-radius: 100px;
-    border-bottom-right-radius: 100px;
-    transform: rotate(180deg);
-    transform-origin: left center;
+  border-top-left-radius: 100px;
+  border-bottom-left-radius: 100px;
+  transform: rotate(-180deg);
+  transform-origin: right center;
 }
 
 .inner {
-    width: 75px;
-    height: 75px;
-    border-radius: 50%;
-    text-align: center;
-    line-height: 75px;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    color: #999;
-    font-size: 20px;
-    background: white;
-}
-
-.info .li article {
-    width: 100px;
-    text-align: center;
-
-}
-
-.info .li article summary {
-    font-size: 20px;
-    margin-top: 5px;
-}
-
-.info .li article p {
-    font-size: 12px;
-    color: #2f4f4f;
-    white-space: nowrap;
+  width: 75px;
+  height: 75px;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 75px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  color: #999;
+  font-size: 20px;
+  background: white;
 }
 
 .memory li {
-    margin: 10px;
-    display: flex;
+  margin: 10px;
+  display: flex;
 }
-
 .memory hr {
-    margin-bottom: 10px;
+  margin-bottom: 10px;
 }
-
 .memory .progress {
-    flex: 1;
-    /* width: 100%; */
-    height: 25px;
-    background: #c1c1c1;
-    margin: 0 5px;
-    position: relative;
-    border-radius: 5px;
+  flex: 1;
+  height: 25px;
+  background: #c1c1c1;
+  margin: 0 5px;
+  position: relative;
+  border-radius: 5px;
 }
 
 .progress .current {
-    background: #90ee90;
-    height: 25px;
-    border-radius: 5px;
+  background: #90ee90;
+  height: 25px;
+  border-radius: 5px;
 }
-
 .progress .word {
-    position: absolute;
-    line-height: 25px;
-    left: 50%;
-    transform: translate(-50%, 0);
-    white-space: nowrap;
+  position: absolute;
+  line-height: 25px;
+  left: 50%;
+  transform: translate(-50%, 0);
+  white-space: nowrap;
 }
 
 .HardDisk_li .mount {
-    min-width: 15px;
-    max-width: 3em;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    line-height: 25px;
-    text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 15px;
+  max-width: 3em;
+  line-height: 25px;
+  text-align: left;
 }
-
 .HardDisk_li .percentage {
-    min-width: 2em;
-    line-height: 25px;
-    text-align: center;
+  min-width: 2em;
+  line-height: 25px;
+  text-align: center;
 }
 
 .speed {
-    width: 100%;
-    display: flex;
-    height: 25px;
-    line-height: 25px;
+  width: 100%;
+  display: flex;
+  height: 25px;
+  line-height: 25px;
 }
-
 .speed p {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-
 .speed p:first-child {
-    flex-grow: 1;
-    flex-shrink: 0;
-    max-width: 50%;
-    text-align: left;
-    margin-right: 20px;
+  flex-grow: 1;
+  flex-shrink: 0;
+  max-width: 50%;
+  text-align: left;
+  margin-right: 20px;
 }
-
 .speed p:last-child {
-    flex-grow: 1;
-    flex-shrink: 1;
-    margin-left: 20px;
-    text-align: right;
-}
\ No newline at end of file
+  flex-grow: 1;
+  flex-shrink: 1;
+  margin-left: 20px;
+  text-align: right;
+}/*# sourceMappingURL=state.css.map */
\ No newline at end of file
diff --git a/resources/state/state.scss b/resources/state/state.scss
new file mode 100644
index 0000000..2196032
--- /dev/null
+++ b/resources/state/state.scss
@@ -0,0 +1,271 @@
+@mixin text-overflow-mission {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+:root {
+    --high-color: #d73403;
+    --medium-color: #ffa500;
+    --low-color: #90ee90;
+}
+
+.container {
+    background: {
+        image: url('https://api.ghser.com/random/pe.php');
+        color: white;
+        position: center top;
+        repeat: no-repeat;
+        size: cover;
+    }
+}
+
+li {
+    list-style: none;
+}
+
+body {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+    justify-content: space-around;
+}
+
+.box {
+    margin: 20px;
+    padding: 10px;
+    background: rgba(255, 255, 255, 0.45);
+    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+    backdrop-filter: blur(10px);
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    font-weight: 700;
+}
+
+.tb {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .avatar {
+        position: relative;
+        height: 100px;
+        width: 100px;
+        border-radius: 50%;
+        margin-right: 20px;
+
+        img {
+            width: 100%;
+            border-radius: 50%;
+        }
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            right: 0;
+            left: 0;
+            bottom: 0;
+            z-index: -1;
+            margin: -3px;
+            border-radius: 50%;
+            box-shadow: 1px 1px 3px 0 #000;
+            background: linear-gradient(135deg, #fff1eb, #ace0f9);
+        }
+    }
+}
+
+hr {
+    border: 0;
+    height: 2px;
+    background-image: linear-gradient(135deg, #bdc3c7 10%, #2c3e50);
+    border-radius: 10px;
+}
+
+.header {
+    max-width: 100%;
+    overflow: hidden;
+
+    hr {
+        margin: 5px 0px;
+    }
+
+    p {
+        font-size: 12px;
+        color: #2f4f4f;
+    }
+
+    h1 {
+        @include text-overflow-mission();
+        display: inline-block;
+        background-image: linear-gradient(271.14deg,
+                #001bff 0.98%,
+                #00f0ff 25.79%,
+                #fce84a 47.33%,
+                #f34628 65.77%,
+                #b275ff 91.4%);
+        background-clip: text;
+        color: transparent;
+    }
+}
+
+.info {
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+    font-weight: 700;
+
+    .li {
+        article {
+            width: 100px;
+            text-align: center;
+
+            summary {
+                font-size: 20px;
+                margin-top: 5px;
+            }
+
+            p {
+                font-size: 12px;
+                color: #2f4f4f;
+                white-space: nowrap;
+            }
+        }
+    }
+}
+
+.cpu {
+    width: 100px;
+    height: 100px;
+    background: #eee;
+    position: relative;
+    border-radius: 50%;
+}
+
+.left,
+.right {
+    width: 50px;
+    height: 100px;
+    position: absolute;
+    overflow: hidden;
+}
+
+.right {
+    right: 0;
+
+    .right-circle {
+        border-top-right-radius: 100px;
+        border-bottom-right-radius: 100px;
+        transform: rotate(180deg);
+        transform-origin: left center;
+    }
+}
+
+.left .left-circle,
+.right .right-circle {
+    width: 50px;
+    height: 100px;
+    background: #90ee90;
+}
+
+.left {
+    .left-circle {
+        border-top-left-radius: 100px;
+        border-bottom-left-radius: 100px;
+        transform: rotate(-180deg);
+        transform-origin: right center;
+    }
+}
+
+.inner {
+    width: 75px;
+    height: 75px;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 75px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    color: #999;
+    font-size: 20px;
+    background: white;
+}
+
+.memory {
+    li {
+        margin: 10px;
+        display: flex;
+    }
+
+    hr {
+        margin-bottom: 10px;
+    }
+
+    .progress {
+        flex: 1;
+        height: 25px;
+        background: #c1c1c1;
+        margin: 0 5px;
+        position: relative;
+        border-radius: 5px;
+    }
+}
+
+.progress {
+    .current {
+        background: #90ee90;
+        height: 25px;
+        border-radius: 5px;
+    }
+
+    .word {
+        position: absolute;
+        line-height: 25px;
+        left: 50%;
+        transform: translate(-50%, 0);
+        white-space: nowrap;
+    }
+}
+
+.HardDisk_li {
+    .mount {
+        @include text-overflow-mission();
+        min-width: 15px;
+        max-width: 3em;
+        line-height: 25px;
+        text-align: left;
+    }
+
+    .percentage {
+        min-width: 2em;
+        line-height: 25px;
+        text-align: center;
+    }
+}
+
+.speed {
+    width: 100%;
+    display: flex;
+    height: 25px;
+    line-height: 25px;
+
+    p {
+        @include text-overflow-mission();
+
+        &:first-child {
+            flex-grow: 1;
+            flex-shrink: 0;
+            max-width: 50%;
+            text-align: left;
+            margin-right: 20px;
+        }
+
+        &:last-child {
+            flex-grow: 1;
+            flex-shrink: 1;
+            margin-left: 20px;
+            text-align: right;
+        }
+    }
+}
\ No newline at end of file