diff --git a/static/css/2.27175f2b.chunk.css b/static/css/2.27175f2b.chunk.css
new file mode 100644
index 0000000..73650f1
--- /dev/null
+++ b/static/css/2.27175f2b.chunk.css
@@ -0,0 +1,128 @@
+.react-tabs {
+  -webkit-tap-highlight-color: transparent;
+}
+
+.react-tabs__tab-list {
+  border-bottom: 1px solid #ffb6c1;
+  margin: 0 0 10px;
+  padding: 6px;
+  background: rgba(255,230,240,0.3);
+  border-radius: 12px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
+  position: relative;
+  max-height: 200px;
+  overflow-y: auto;
+  gap: 6px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.react-tabs__tab {
+  display: inline-block;
+  border: 1px solid transparent;
+  bottom: -1px;
+  position: relative;
+  list-style: none;
+  padding: 6px 8px;
+  cursor: pointer;
+  background: linear-gradient(145deg, #fff0f5 0%, #ffe4e1 100%);
+  border-radius: 8px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  margin: 0 4px;
+}
+
+.react-tabs__tab--selected {
+  background: linear-gradient(145deg, #ffd1dc 0%, #ffb6c1 100%);
+  border-color: #ff69b4;
+  color: #d81b60;
+  box-shadow: 0 4px 6px rgba(255,105,180,0.2);
+}
+
+.react-tabs__tab--disabled {
+  color: #c0c0c0;
+  cursor: default;
+  opacity: 0.7;
+}
+
+.react-tabs__tab:focus {
+  box-shadow: 0 0 8px #ff69b4;
+  border-color: #ff69b4;
+  outline: none;
+}
+
+.react-tabs__tab:focus:after {
+  content: "";
+  position: absolute;
+  height: 5px;
+  left: -4px;
+  right: -4px;
+  bottom: -5px;
+  background: #fff0f6;
+}
+
+.react-tabs__tab-panel {
+  display: none;
+}
+
+.react-tabs__tab-panel--selected {
+  display: block;
+  animation: fadeIn 0.3s ease-in;
+  user-select: none;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.pagination-nav {
+  display: flex;
+  justify-content: center;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  position: relative;
+  z-index: 1;
+}
+
+.pagination-button {
+  background: linear-gradient(135deg, #a2d9f7 0%, #ff85c2 100%);
+  border: none;
+  border-radius: 20px;
+  color: white;
+  padding: 8px 16px;
+  margin: 0 5px;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 2px 4px rgba(255, 105, 180, 0.2);
+}
+
+.pagination-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(255, 105, 180, 0.3);
+}
+
+.pagination-button:disabled {
+  background: linear-gradient(135deg, #6ca6cd 0%, #ff4791 100%);
+  color: #a0a0a0;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+.pagination-info {
+  display: flex;
+  align-items: center;
+  margin: 0 10px;
+  color: #d81b60;
+  font-size: 14px;
+}
+
+/*# sourceMappingURL=2.27175f2b.chunk.css.map */
+.item-image, .color-image, .tab-image, .layer-image {
+  user-select: none;
+  -webkit-user-drag: none;
+  pointer-events: auto;
+}
\ No newline at end of file
diff --git a/static/css/2.27175f2b.chunk.css.map b/static/css/2.27175f2b.chunk.css.map
new file mode 100644
index 0000000..d6ce142
--- /dev/null
+++ b/static/css/2.27175f2b.chunk.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://node_modules/react-tabs/style/react-tabs.css"],"names":[],"mappings":"AAAA,YACE,uCACF,CAEA,sBACE,4BAA6B,CAC7B,eAAgB,CAChB,SACF,CAEA,iBACE,oBAAqB,CAErB,4BAAmB,CAAnB,kBAAmB,CACnB,WAAY,CACZ,iBAAkB,CAClB,eAAgB,CAChB,gBAAiB,CACjB,cACF,CAEA,2BACE,eAAgB,CAChB,iBAAkB,CAClB,UAAY,CACZ,yBACF,CAEA,2BACE,cAAe,CACf,cACF,CAEA,uBACE,0BAAsC,CACtC,oBAAgC,CAChC,YACF,CAEA,6BACE,UAAW,CACX,iBAAkB,CAClB,UAAW,CACX,SAAU,CACV,UAAW,CACX,WAAY,CACZ,eACF,CAEA,uBACE,YACF,CAEA,iCACE,aACF","file":"2.27175f2b.chunk.css","sourcesContent":[".react-tabs {\n  -webkit-tap-highlight-color: transparent;\n}\n\n.react-tabs__tab-list {\n  border-bottom: 1px solid #aaa;\n  margin: 0 0 10px;\n  padding: 0;\n}\n\n.react-tabs__tab {\n  display: inline-block;\n  border: 1px solid transparent;\n  border-bottom: none;\n  bottom: -1px;\n  position: relative;\n  list-style: none;\n  padding: 6px 12px;\n  cursor: pointer;\n}\n\n.react-tabs__tab--selected {\n  background: #fff;\n  border-color: #aaa;\n  color: black;\n  border-radius: 5px 5px 0 0;\n}\n\n.react-tabs__tab--disabled {\n  color: GrayText;\n  cursor: default;\n}\n\n.react-tabs__tab:focus {\n  box-shadow: 0 0 5px hsl(208, 99%, 50%);\n  border-color: hsl(208, 99%, 50%);\n  outline: none;\n}\n\n.react-tabs__tab:focus:after {\n  content: \"\";\n  position: absolute;\n  height: 5px;\n  left: -4px;\n  right: -4px;\n  bottom: -5px;\n  background: #fff;\n}\n\n.react-tabs__tab-panel {\n  display: none;\n}\n\n.react-tabs__tab-panel--selected {\n  display: block;\n}\n"]}
\ No newline at end of file
diff --git a/static/css/custom-theme.css b/static/css/custom-theme.css
new file mode 100644
index 0000000..ea0a2d7
--- /dev/null
+++ b/static/css/custom-theme.css
@@ -0,0 +1,997 @@
+@keyframes breath {
+  0% { opacity: 0.9; transform: scale(0.98); }
+  50% { opacity: 1; transform: scale(1); }
+  100% { opacity: 0.9; transform: scale(0.98); }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+:root {
+  --bg-color: #f8f5ff;
+  --app-bg-gradient: linear-gradient(135deg, #e8e4fc 0%, #d8d0f8 100%);
+  --text-color: #4169E1;
+  --card-bg: rgba(255, 255, 255, 0.3);
+  --tab-list-bg: rgba(232, 224, 255, 0.2);
+  --tab-bg: linear-gradient(145deg, #f0f5ff 0%, #e1e4ff 100%);
+  --tab-selected-bg: linear-gradient(145deg, #d1dcff 0%, #b6c1ff 100%);
+  --tab-border: #b6c1ff;
+  --tab-selected-border: #87CEEB;
+  --tab-focus-shadow: #ff69b4;
+  --tab-focus-bg: #fff0f6;
+  --button-primary-bg: linear-gradient(135deg, #87CEEB 0%, #FF69B4 100%);
+  --button-primary-hover-bg: linear-gradient(135deg, #a2d9f7 0%, #ff85c2 100%);
+  --button-active-bg: linear-gradient(135deg, #6ca6cd 0%, #ff4791 100%);
+  --button-shadow: 0 4px 6px rgba(255, 107, 180, 0.2);
+  --button-shadow: rgba(0, 0, 0, 0.1);
+  --button-hover-shadow: rgba(244, 143, 177, 0.4);
+  --pagination-bg: linear-gradient(135deg, #FFB6C1 0%, #FF69B4 100%);
+  --pagination-disabled-bg: #f0f0f0;
+  --pagination-disabled-color: #a0a0a0;
+  --item-container-border: #87CEEB;
+  --item-container-hover-border: #4169E1;
+  --item-container-bg: rgba(255, 255, 255, 0.2);
+  --body-bg-image: url('../../../white.jpg');
+}
+
+.project-info {
+  animation: fadeInUp 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
+  opacity: 0;
+}
+
+.author-info a {
+  transition: all 0.3s ease;
+  color: var(--text-color);
+  text-decoration: none;
+  background: linear-gradient(90deg, transparent 50%, rgba(255,182,193,0.3) 50%);
+  background-size: 200% 100%;
+  background-position: right bottom;
+}
+
+.author-info a:hover {
+  background-position: left bottom;
+  color: #ff69b4;
+}
+
+.repo-button {
+  display: inline-block;
+  padding: 12px 24px;
+  margin-top: 20px;
+  border-radius: 30px;
+  background: linear-gradient(135deg, #ff69b4 0%, #87ceeb 100%);
+  color: white;
+  font-weight: bold;
+  animation: breath 2s ease-in-out infinite;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  text-decoration: none !important;
+  border: none !important;
+}
+
+.repo-button:hover {
+  transform: translateY(-2px) scale(1.05);
+  box-shadow: 0 8px 15px rgba(255,105,180,0.3);
+}
+
+@media (max-width: 768px) {
+  .project-info {
+    animation-duration: 1s;
+  }
+  .repo-button {
+    padding: 10px 20px;
+    font-size: 14px;
+  }
+}
+
+/* 深色模式变量 */
+[data-theme='dark'] {
+  --bg-color: #1a1a2e;
+  --app-bg-gradient: linear-gradient(135deg, #16213e 0%, #0f3460 100%);
+  --text-color: #87CEEB;
+  --card-bg: rgba(22, 33, 62, 0.3);
+  --tab-list-bg: rgba(26, 42, 82, 0.2);
+  --tab-bg: linear-gradient(145deg, #1b1b2f 0%, #162447 100%);
+  --tab-selected-bg: linear-gradient(145deg, #1f4068 0%, #1b1b2f 100%);
+  --tab-border: #1f4068;
+  --tab-selected-border: #87CEEB;
+  --tab-focus-shadow: #f48fb1;
+  --tab-focus-bg: #303030;
+  --button-primary-bg: linear-gradient(135deg, #87CEEB 0%, #FF69B4 100%);
+  --button-primary-hover-bg: linear-gradient(135deg, #a2d9f7 0%, #ff85c2 100%);
+  --button-shadow: rgba(135, 206, 235, 0.3);
+  --button-hover-shadow: rgba(255, 105, 180, 0.2);
+  --pagination-bg: linear-gradient(135deg, #ad1457 0%, #880e4f 100%);
+  --pagination-disabled-bg: #424242;
+  --pagination-disabled-color: #757575;
+  --item-container-border: #ad1457;
+  --item-container-hover-border: #c2185b;
+  --item-container-bg: rgba(30, 30, 30, 0.5);
+  --body-bg-image: url('../../../black.jpg');
+}
+
+body {
+  background-color: var(--bg-color);
+  background-image: var(--body-bg-image);
+  background-size: cover;
+  background-position: center;
+  background-attachment: fixed;
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  overflow-y: auto;
+  transition: 
+    background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+    background-image 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+    color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  scroll-behavior: auto;
+  overflow-anchor: none;
+}
+
+.App {
+  background: transparent;
+  color: var(--text-color);
+  overflow-x: hidden;
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  max-width: 100vw;
+  min-height: 100vh;
+  position: relative;
+  z-index: 1;
+  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.left-area, .config-area, .tab-content, .loading-text-container {
+  background: var(--card-bg);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  margin-top: 12px;
+}
+
+.item-container, .color-container {
+  background: var(--item-container-bg);
+  border-color: var(--item-container-border);
+  width: calc(100% - 16px);
+  box-sizing: border-box;
+  margin: 0 auto 12px;
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  font-size: 0.95em;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  transform: scale(1);
+}
+
+.item-container:hover, .color-container:hover {
+  border-color: var(--item-container-hover-border);
+  /* 移除缩放效果，防止布局抽动 */
+  transform: scale(1);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  transition: all 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+
+.react-tabs__tab-list {
+  border-bottom: 1px solid var(--tab-border);
+  background: var(--tab-list-bg);
+  margin: 0 0 10px;
+  padding: 3px;
+  max-height: 200px;
+  overflow-y: auto;
+  gap: 3px;
+  border-radius: 12px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  width: 100%;
+}
+
+.react-tabs__tab {
+  padding: 6px 8px;
+  margin: 2px;
+  background: var(--tab-bg);
+  border-radius: 8px;
+  font-size: 0;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  transform: translateY(0);
+}
+
+.react-tabs__tab--selected {
+  background: var(--tab-selected-bg);
+  border-color: var(--tab-selected-border);
+  color: var(--text-color);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.react-tabs__tab:focus {
+  box-shadow: 0 0 8px var(--tab-focus-shadow);
+  border-color: var(--tab-selected-border);
+}
+
+.react-tabs__tab:focus:after {
+  background: var(--tab-focus-bg);
+}
+
+.react-tabs__tab:hover:not(.react-tabs__tab--selected) {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.button-1, .button-2, .button-3 {
+  height: 40px;
+  padding: 6px 22px;
+  font-size: 15px;
+  margin: 8px 4px 0;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  transform: translateY(0);
+  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+  transform: scale(1);
+  position: relative;
+  overflow: hidden;
+  }
+  
+  .button-1:hover, .button-2:hover, .button-3:hover {
+  transform: scale(1.05) translateY(-3px);
+  filter: brightness(1.1);
+  box-shadow: 0 8px 15px var(--button-hover-shadow);
+  }
+  
+  .button-1:active, .button-2:active, .button-3:active {
+  transform: scale(0.95) translateY(1px);
+  filter: brightness(0.95);
+  box-shadow: 0 2px 4px var(--button-shadow);
+  transition: all 0.1s cubic-bezier(0.25, 0.8, 0.25, 1);
+  }
+  
+  .button-1::before, .button-2::before, .button-3::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+  transition: 0.5s;
+  }
+  
+  .button-1:hover::before, .button-2:hover::before, .button-3:hover::before {
+  left: 100%;
+  }
+  
+  .button-1::after, .button-2::after, .button-3::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 5px;
+  height: 5px;
+  background: rgba(255, 255, 255, 0.5);
+  opacity: 0;
+  border-radius: 100%;
+  transform: scale(1, 1) translate(-50%, -50%);
+  transform-origin: 50% 50%;
+  }
+  
+  .button-1:active::after, .button-2:active::after, .button-3:active::after {
+  animation: ripple 0.6s ease-out;
+  }
+
+.item-container, .color-container {
+  padding: 4px;
+  margin: 6px auto;
+  width: calc(100% - 8px);
+}
+
+.pagination-button {
+  padding: 6px 12px;
+  font-size: 12px;
+}
+
+.pagination-info {
+  font-size: 12px;
+}
+
+.pagination-nav {
+  margin-bottom: 30px;
+}
+.pagination-info {
+  color: var(--text-color);
+}
+
+.theme-toggle {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background: var(--button-primary-bg);
+  border: none;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 2px 4px var(--button-shadow);
+  z-index: 1000;
+  transition: all 0.3s ease, background 0.5s ease;
+  opacity: 1 !important;
+  visibility: visible !important;
+  text-decoration: none !important;
+}
+
+.theme-toggle:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px var(--button-hover-shadow);
+  text-decoration: none !important;
+}
+
+.theme-toggle svg {
+  width: 24px;
+  height: 24px;
+  fill: white;
+}
+
+img {
+  user-select: none;
+  -webkit-user-drag: none;
+  pointer-events: auto;
+  max-width: 100%;
+  height: auto;
+}
+
+.item-image, .color-image, .tab-image, .layer-image {
+  user-select: none;
+  -webkit-user-drag: none;
+  pointer-events: auto;
+  max-width: 100%;
+  height: auto;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  transform: scale(1);
+}
+
+.item-image:hover, .color-image:hover, .tab-image:hover, .layer-image:hover {
+  transform: scale(1.05);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
+
+@media (max-width: 768px) {
+  .App {
+    flex-direction: column;
+    width: 100%;
+    min-width: auto;
+    overflow-x: hidden;
+  }
+  
+  .left-area {
+    margin: 10px;
+    width: calc(100% - 20px);
+    box-sizing: border-box;
+  }
+  
+  .config-area {
+    margin: 10px;
+    width: calc(100% - 20px);
+    box-sizing: border-box;
+  }
+  
+  .react-tabs__tab-list {
+    max-height: 120px;
+    padding: 3px;
+    overflow-y: auto;
+  }
+  
+  .react-tabs__tab {
+    padding: 4px 10px;
+    font-size: 0.75em;
+  }
+  
+  .button-1, .button-2, .button-3 {
+    height: 36px;
+    padding: 5px 8px;
+    font-size: 12px;
+    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+    transform: translateY(0);
+  }
+  
+  .button-1:hover, .button-2:hover, .button-3:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px var(--button-hover-shadow);
+  }
+  
+  .button-1:active, .button-2:active, .button-3:active {
+    transform: translateY(1px);
+    box-shadow: 0 2px 3px var(--button-shadow);
+  }
+  
+  .item-container, .color-container {
+    padding: 6px;
+    margin: 8px auto;
+  }
+  
+  .item-image, .item-image-selected, .color-image, .color-image-selected {
+    margin: 4px;
+  }
+}
+
+@media (max-width: 1000px) {
+  body, html {
+    overflow-x: hidden;
+    width: 100%;
+    position: relative;
+  }
+  
+  .App {
+    width: 100%;
+    min-width: auto;
+    overflow-x: hidden;
+  }
+  
+  .left-area, .config-area {
+    margin: 8px;
+    width: calc(100% - 16px);
+    box-sizing: border-box;
+  }
+  
+  .react-tabs__tab-list {
+    max-height: 120px;
+    padding: 2px;
+    overflow-y: auto;
+    transition: max-height 0.3s ease, height 0.3s ease;
+  }
+  
+  .react-tabs__tab {
+    padding: 3px 6px;
+    font-size: 0;
+    margin: 1px;
+  }
+
+  .item-container, .color-container {
+    padding: 4px;
+    margin: 6px auto;
+    width: calc(100% - 8px);
+  }
+  
+  .pagination-button {
+    padding: 6px 12px;
+    font-size: 12px;
+  }
+  
+  .pagination-info {
+    font-size: 12px;
+  }
+  
+  .pagination-nav {
+    margin-bottom: 30px;
+  }
+}
+
+
+
+/* 添加底部间距和平滑过渡 */
+body {
+  padding-bottom: 60px; /* 增加底部间距，为主题切换按钮留出空间 */
+}
+
+/* 项目信息区域样式 */
+.project-info {
+  position: relative;
+  width: 100%;
+  max-width: 800px;
+  margin: 20px auto 70px;
+  padding: 15px;
+  box-sizing: border-box;
+  z-index: 10;
+}
+
+.project-info-content {
+  background: var(--card-bg);
+  border-radius: 20px;
+  padding: 20px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  border: 2px solid var(--item-container-border);
+  animation: fadeIn 0.5s ease-in;
+}
+
+.project-info-content:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 16px var(--button-hover-shadow);
+  border-color: var(--item-container-hover-border);
+}
+
+.project-info h3 {
+  color: var(--text-color);
+  font-size: 1.5rem;
+  margin-top: 0;
+  margin-bottom: 15px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+
+.author-info {
+  text-align: left;
+  padding: 10px 15px;
+  background: var(--item-container-bg);
+  border-radius: 12px;
+  margin-top: 15px;
+}
+
+.author-info p {
+  margin: 10px 0;
+  color: var(--text-color);
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+
+.author-info span {
+  font-weight: bold;
+  margin-right: 5px;
+}
+
+.author-info a {
+  color: var(--text-color);
+  text-decoration: none;
+  border-bottom: 1px dotted var(--item-container-border);
+  transition: all 0.2s ease;
+  padding-bottom: 2px;
+}
+
+.author-info a:hover {
+  color: var(--tab-selected-border);
+  border-bottom: 1px solid var(--tab-selected-border);
+}
+
+@media (max-width: 768px) {
+  .project-info {
+    margin: 15px auto 60px;
+    padding: 10px;
+  }
+  
+  .project-info-content {
+    padding: 15px;
+  }
+  
+  .project-info h3 {
+    font-size: 1.2rem;
+  }
+  
+  .author-info p {
+    font-size: 0.85rem;
+  }
+}
+
+.react-tabs__tab-panel {
+  transition: all 0.3s ease;
+}
+
+.react-tabs__tab-panel--selected {
+  animation: fadeIn 0.3s ease-in;
+}
+
+.item-container, .color-container {
+  animation: slideIn 0.4s ease-out;
+}
+
+.theme-toggle:focus {
+  animation: pulse 1s ease-in-out;
+  text-decoration: none !important;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes pulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+  100% { transform: scale(1); }
+}
+
+@keyframes slideIn {
+  from { transform: translateX(-10px); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes ripple {
+  0% {
+    transform: scale(0, 0);
+    opacity: 0.5;
+  }
+  20% {
+    transform: scale(25, 25);
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 0;
+    transform: scale(40, 40);
+  }
+}
+
+.config-area {
+  margin-bottom: 30px;
+}
+/* 隐藏所有滚动条 */
+/* Webkit浏览器 (Chrome, Safari, Edge等) */
+::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: transparent;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* Firefox */
+* {
+  scrollbar-width: none;
+}
+
+/* IE */
+* {
+  -ms-overflow-style: none;
+}
+
+/* 确保内容仍然可滚动 */
+body, .react-tabs__tab-list, .App, [class*="overflow"] {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+/* 确保页面加载时滚动到顶部 */
+html {
+  scroll-behavior: auto;
+  overflow-anchor: none;
+}
+
+/* 防止动画导致页面滚动 */
+* {
+  overflow-anchor: none;
+}
+
+/* 添加全局动画变量 */
+@keyframes breath {
+  0% { opacity: 0.9; transform: scale(0.98); }
+  50% { opacity: 1; transform: scale(1); }
+  100% { opacity: 0.9; transform: scale(0.98); }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+:root {
+  --animation-duration: 0.8s;
+  --animation-timing: cubic-bezier(0.25, 0.8, 0.25, 1);
+  scroll-behavior: auto;
+}
+
+/* 为主要容器添加载入动画 */
+.App {
+  animation: fadeIn var(--animation-duration) var(--animation-timing);
+}
+
+.left-area, .config-area {
+  animation: slideInFromLeft var(--animation-duration) var(--animation-timing);
+}
+
+.tab-content, .loading-text-container {
+  animation: slideInFromTop var(--animation-duration) var(--animation-timing);
+}
+
+/* 为按钮添加载入动画 */
+.button-1, .button-2, .button-3 {
+  animation: popIn 0.6s var(--animation-timing) both;
+  animation-delay: calc(var(--animation-duration) * 0.3);
+}
+
+/* 为标签页添加载入动画 */
+.react-tabs__tab {
+  animation: fadeInScale 0.5s var(--animation-timing) both;
+  animation-delay: calc(var(--animation-duration) * 0.2);
+}
+/* 为分页按钮添加载入动画 */
+.pagination-button, .pagination-info {
+  animation: fadeInUp 0.5s var(--animation-timing) both;
+  animation-delay: calc(var(--animation-duration) * 0.5);
+}
+
+/* 为主题切换按钮添加载入动画 */
+.theme-toggle {
+  animation: bounceIn 0.8s var(--animation-timing) both;
+  animation-delay: calc(var(--animation-duration) * 0.6);
+}
+
+/* 为项目信息区域添加载入动画 */
+.project-info {
+  animation: fadeInScale 0.7s var(--animation-timing) both;
+  animation-delay: calc(var(--animation-duration) * 0.5);
+}
+
+/* 为作者信息添加载入动画 */
+.author-info {
+  animation: fadeInUp 0.6s var(--animation-timing) both;
+  animation-delay: calc(var(--animation-duration) * 0.7);
+}
+
+/* 为链接添加载入动画 */
+a {
+  animation: colorPulse 1s var(--animation-timing) both;
+  animation-delay: calc(var(--animation-duration) * 0.8);
+}
+
+/* 定义新的动画关键帧 */
+@keyframes fadeInScale {
+  from { opacity: 0; transform: scale(0.9); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+@keyframes slideInFromLeft {
+  from { opacity: 0; transform: translateX(-20px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes slideInFromTop {
+  from { opacity: 0; transform: translateY(-20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes popIn {
+  0% { opacity: 0; transform: scale(0.8); }
+  70% { opacity: 1; transform: scale(1.05); }
+  100% { opacity: 1; transform: scale(1); }
+}
+
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(15px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fadeInBlur {
+  from { opacity: 0; filter: blur(5px); }
+  to { opacity: 1; filter: blur(0); }
+}
+
+@keyframes bounceIn {
+  0% { opacity: 0; transform: scale(0.3); }
+  50% { opacity: 1; transform: scale(1.1); }
+  70% { transform: scale(0.9); }
+  100% { transform: scale(1); }
+}
+
+@keyframes colorPulse {
+  0% { opacity: 0.7; }
+  50% { opacity: 1; }
+  100% { opacity: 1; }
+}
+
+/* 确保动画只播放一次 */
+.App, .left-area, .config-area, .tab-content, .loading-text-container,
+.button-1, .button-2, .button-3, .react-tabs__tab, .item-image, .color-image,
+.tab-image, .layer-image, .pagination-button, .pagination-info, .theme-toggle,
+.project-info, .author-info, a {
+  animation-fill-mode: both;
+}
+
+/* 为不同的元素设置不同的动画延迟，创造级联效果 */
+.react-tabs__tab:nth-child(2) { animation-delay: calc(var(--animation-duration) * 0.25); }
+.react-tabs__tab:nth-child(3) { animation-delay: calc(var(--animation-duration) * 0.3); }
+.react-tabs__tab:nth-child(4) { animation-delay: calc(var(--animation-duration) * 0.35); }
+.react-tabs__tab:nth-child(5) { animation-delay: calc(var(--animation-duration) * 0.4); }
+
+.item-container:nth-child(2) { animation-delay: calc(var(--animation-duration) * 0.2); }
+.item-container:nth-child(3) { animation-delay: calc(var(--animation-duration) * 0.3); }
+.item-container:nth-child(4) { animation-delay: calc(var(--animation-duration) * 0.4); }
+.item-container:nth-child(5) { animation-delay: calc(var(--animation-duration) * 0.5); }
+
+/* 为移动设备优化动画 */
+@media (max-width: 768px) {
+  @keyframes breath {
+  0% { opacity: 0.9; transform: scale(0.98); }
+  50% { opacity: 1; transform: scale(1); }
+  100% { opacity: 0.9; transform: scale(0.98); }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+:root {
+    --animation-duration: 0.6s; /* 移动设备上动画时间稍短 */
+  }
+}
+
+/* 尊重用户的减少动画偏好设置 */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-delay: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+.react-tabs__tab-panel {
+  transition: all 0.3s ease;
+}
+
+.react-tabs__tab-panel--selected {
+  animation: fadeIn 0.3s ease-in;
+}
+
+.item-container, .color-container {
+  animation: slideIn 0.4s ease-out;
+}
+
+.theme-toggle:focus {
+  animation: pulse 1s ease-in-out;
+  text-decoration: none !important;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes pulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+  100% { transform: scale(1); }
+}
+
+@keyframes slideIn {
+  from { transform: translateX(-10px); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes ripple {
+  0% {
+    transform: scale(0, 0);
+    opacity: 0.5;
+  }
+  20% {
+    transform: scale(25, 25);
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 0;
+    transform: scale(40, 40);
+  }
+}
+
+.config-area {
+  margin-bottom: 30px;
+}
+/* 隐藏所有滚动条 */
+/* Webkit浏览器 (Chrome, Safari, Edge等) */
+::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: transparent;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* Firefox */
+* {
+  scrollbar-width: none;
+}
+
+/* IE */
+* {
+  -ms-overflow-style: none;
+}
+
+/* 确保内容仍然可滚动 */
+body, .react-tabs__tab-list, .App, [class*="overflow"] {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+/* 确保页面加载时滚动到顶部 */
+html {
+  scroll-behavior: auto;
+  overflow-anchor: none;
+}
+
+/* 防止动画导致页面滚动 */
+* {
+  overflow-anchor: none;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes pulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+  100% { transform: scale(1); }
+}
+
+@keyframes slideIn {
+  from { transform: translateX(-10px); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes ripple {
+  0% {
+    transform: scale(0, 0);
+    opacity: 0.5;
+  }
+  20% {
+    transform: scale(25, 25);
+    opacity: 0.5;
+  }
+}
+
+.author-neko {
+  position: absolute;
+  right: -80px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 176px;
+  height: 256px;
+  transform-origin: bottom center;
+  animation: swing 3s ease-in-out infinite alternate;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes swing {
+  from { transform: translateY(-50%) rotate(-3deg); }
+  to { transform: translateY(-50%) rotate(3deg);}
+}
+
+.author-neko:hover {
+  transform: translateY(-50%) scale(1.2);
+  filter: drop-shadow(0 0 12px rgba(255,105,180,0.5));
+  animation-play-state: paused;
+}
+
+@media (max-width: 768px) {
+  .author-neko {
+    right: -40px;
+    width: 88px;
+    height: 128px;
+    animation: swing 4s ease-in-out infinite alternate;
+  }
+  @keyframes swing {
+    from { transform: translateY(-50%) rotate(-2deg); }
+    to { transform: translateY(-50%) rotate(2deg); }
+  }
+}
\ No newline at end of file
diff --git a/static/css/main.0f9b49cf.chunk.css b/static/css/main.0f9b49cf.chunk.css
new file mode 100644
index 0000000..6ab28dd
--- /dev/null
+++ b/static/css/main.0f9b49cf.chunk.css
@@ -0,0 +1,261 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: #fff5f8;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+}
+
+.App {
+  background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%);
+  min-height: 100vh;
+  min-width: 100vw;
+  display: flex;
+  font-size: calc(10px + 2vmin);
+  color: #d81b60;
+  transition: all 0.3s ease;
+  overflow-x: hidden;
+}
+
+.left-area {
+  margin-left: 12px;
+  margin-top: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  background: rgba(255, 255, 255, 0.7);
+  border-radius: 16px;
+  padding: 12px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.left-area:hover {
+  box-shadow: 0 6px 12px rgba(255, 105, 180, 0.2);
+  transform: translateY(-2px);
+}
+
+.image-area {
+  cursor: pointer;
+  text-decoration: none;
+  margin: 0;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.image-area:hover {
+  transform: scale(1.02);
+  box-shadow: 0 6px 12px rgba(255, 105, 180, 0.2);
+}
+
+.button-group {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-top: 8px;
+}
+
+.button-1, .button-2, .button-3 {
+  border-radius: 20px;
+  border-style: none;
+  box-sizing: border-box;
+  color: #fff;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  height: 40px;
+  line-height: 20px;
+  list-style: none;
+  outline: none;
+  padding: 10px 20px;
+  text-align: center;
+  text-decoration: none;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  vertical-align: baseline;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  max-width: fit-content;
+  margin: 16px 8px 0;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.button-1 {
+  background: linear-gradient(135deg, #87CEEB 0%, #FF69B4 100%);
+}
+
+.button-1:hover {
+  background: linear-gradient(135deg, #a2d9f7 0%, #ff85c2 100%);
+  box-shadow: 0 6px 10px rgba(135, 206, 235, 0.4);
+}
+
+.button-2 {
+  background: linear-gradient(135deg, #a2d9f7 0%, #ff85c2 100%);
+}
+
+.button-2:hover {
+  background: linear-gradient(135deg, #b3e0ff 0%, #ff99cc 100%);
+  box-shadow: 0 6px 10px rgba(163, 217, 247, 0.4);
+}
+
+.button-3 {
+  background: linear-gradient(135deg, #b3e0ff 0%, #ff99cc 100%);
+}
+
+.button-3:hover {
+  background: linear-gradient(135deg, #b3e0ff 0%, #ff99cc 100%);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 10px rgba(206, 147, 216, 0.4);
+}
+
+.config-area {
+  margin: 12px 20px 20px 20px;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.7);
+  border-radius: 20px;
+  padding: 16px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.layer-image, .loading-text-container {
+  border-radius: 20px;
+  border: 2px solid #f48fb1;
+  overflow: hidden;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.loading-text-container {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  color: #ec407a;
+  padding: 20px;
+  background: linear-gradient(135deg, rgba(255, 245, 248, 0.2) 0%, rgba(252, 228, 236, 0.2) 100%);
+}
+
+.tab-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: left;
+  text-align: left;
+  padding: 12px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 16px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  animation: fadeIn 0.3s ease-in;
+}
+
+.item-container {
+  border-radius: 20px;
+  min-width: 100%;
+  border: 2px dashed #f48fb1;
+  padding: 8px;
+  margin-bottom: 12px;
+  background: rgba(255, 255, 255, 0.5);
+  transition: all 0.3s ease;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.item-container:hover {
+  border: 2px dashed #ec407a;
+  box-shadow: 0 4px 8px rgba(244, 143, 177, 0.2);
+}
+
+.item-image {
+  border-radius: 16px;
+  margin: 6px;
+  display: inline-block;
+  object-fit: contain;
+  border: 2px dashed #ce93d8;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.item-image:hover, .item-image:focus {
+  border: 2px solid #f48fb1;
+  transform: scale(1.05);
+  box-shadow: 0 4px 8px rgba(244, 143, 177, 0.3);
+}
+
+.item-image-selected {
+  border-radius: 16px;
+  margin: 6px;
+  display: inline-block;
+  object-fit: contain;
+  border: 3px solid #f8bbd0;
+  cursor: default;
+  box-shadow: 0 4px 12px rgba(244, 143, 177, 0.4);
+  transform: scale(1.05);
+}
+
+.color-container {
+  border-radius: 20px;
+  min-width: 100%;
+  margin-top: 8px;
+  border: 2px dashed #81c784;
+  padding: 8px;
+  background: rgba(255, 255, 255, 0.5);
+  transition: all 0.3s ease;
+}
+
+.color-container:hover {
+  border: 2px dashed #4caf50;
+  box-shadow: 0 4px 8px rgba(129, 199, 132, 0.2);
+}
+
+.color-image {
+  border-radius: 50%;
+  margin: 8px 6px 0;
+  display: inline-block;
+  object-fit: contain;
+  border: 4px solid #9e9e9e;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.color-image:focus, .color-image:hover {
+  border: 4px solid #f48fb1;
+  transform: scale(1.1);
+  box-shadow: 0 4px 8px rgba(244, 143, 177, 0.3);
+}
+
+.color-image-selected {
+  border-radius: 50%;
+  margin: 8px 6px 0;
+  display: inline-block;
+  object-fit: contain;
+  border: 4px solid #ec407a;
+  cursor: default;
+  transform: scale(1.1);
+  box-shadow: 0 4px 12px rgba(244, 143, 177, 0.4);
+}
+
+.tab-image {
+  border-radius: 12px;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.tab-image:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(244, 143, 177, 0.2);
+}
\ No newline at end of file
diff --git a/static/css/main.0f9b49cf.chunk.css.map b/static/css/main.0f9b49cf.chunk.css.map
new file mode 100644
index 0000000..4198514
--- /dev/null
+++ b/static/css/main.0f9b49cf.chunk.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://src/index.css","webpack://src/App.css"],"names":[],"mappings":"AAAA,KACE,QAAS,CACT,mJAEY,CACZ,kCAAmC,CACnC,iCACF,CAEA,KACE,yEAEF,CCZA,KACE,wBAAyB,CACzB,gBAAiB,CACjB,eAAgB,CAChB,YAAa,CACb,4BAA6B,CAC7B,UACF,CAEA,WACE,eAAgB,CAChB,cAAe,CACf,YAAa,CACb,qBAAsB,CACtB,kBAAmB,CACnB,iBACF,CAEA,YACE,cAAe,CACf,oBAAqB,CACrB,oBACF,CAEA,cACE,YAAa,CACb,kBACF,CAEA,UACE,wBAAyB,CACzB,iBAAkB,CAClB,iBAAkB,CAClB,qBAAsB,CACtB,UAAc,CACd,cAAe,CACf,cAAe,CACf,eAAgB,CAChB,WAAY,CACZ,gBAAiB,CACjB,eAAgB,CAEhB,YAAa,CACb,iBAAkB,CAElB,iBAAkB,CAClB,oBAAqB,CACrB,cAAiB,CACjB,uBAAwB,CACxB,oBAAiB,CAAjB,gBAAiB,CACjB,wBAAyB,CACzB,yBAA0B,CAC1B,6BAAsB,CAAtB,0BAAsB,CAAtB,qBAAsB,CACtB,eACF,CAEA,gBACE,wBACF,CAEA,UACE,gBAAiB,CACjB,wBAAyB,CACzB,iBAAkB,CAClB,iBAAkB,CAClB,qBAAsB,CACtB,UAAc,CACd,cAAe,CACf,cAAe,CACf,eAAgB,CAChB,WAAY,CACZ,gBAAiB,CACjB,eAAgB,CAChB,YAAa,CACb,iBAAkB,CAElB,iBAAkB,CAClB,oBAAqB,CACrB,cAAiB,CACjB,uBAAwB,CACxB,oBAAiB,CAAjB,gBAAiB,CACjB,wBAAyB,CACzB,yBAA0B,CAC1B,eACF,CAEA,gBACE,wBACF,CAEA,UACE,gBAAiB,CACjB,wBAAyB,CACzB,iBAAkB,CAClB,iBAAkB,CAClB,qBAAsB,CACtB,UAAc,CACd,cAAe,CACf,cAAe,CACf,eAAgB,CAChB,WAAY,CACZ,gBAAiB,CACjB,eAAgB,CAChB,YAAa,CACb,iBAAkB,CAElB,iBAAkB,CAClB,oBAAqB,CACrB,cAAiB,CACjB,uBAAwB,CACxB,oBAAiB,CAAjB,gBAAiB,CACjB,wBAAyB,CACzB,yBAA0B,CAC1B,eACF,CAEA,gBACE,wBACF,CAEA,aACE,WAAY,CACZ,UAAW,CACX,WACF,CAOA,qCAJE,kBAAmB,CACnB,iBAYF,CATA,wBAGE,YAAa,CACb,qBAAsB,CACtB,iBAAkB,CAClB,kBAAmB,CACnB,sBAAuB,CACvB,UACF,CAEA,aACE,YAAa,CACb,qBAAsB,CACtB,sBAAuB,CACvB,oBAAqB,CACrB,eACF,CAEA,gBACE,kBAAmB,CACnB,cAAe,CACf,qBACF,CAEA,YACE,kBAAmB,CACnB,gBAAqB,CACrB,oBAAqB,CACrB,kBAAmB,CACnB,qBAA+B,CAC/B,cAAe,CACf,cACF,CAEA,oCAEE,oBACF,CAEA,qBACE,kBAAmB,CACnB,gBAAqB,CACrB,oBAAqB,CACrB,kBAAmB,CACnB,oBAAqB,CACrB,cACF,CAEA,iBACE,kBAAmB,CACnB,cAAe,CACf,cAAe,CACf,qBACF,CAEA,aACE,iBAAkB,CAClB,gBAAqB,CACrB,oBAAqB,CACrB,kBAAmB,CACnB,qBAAsB,CACtB,cAAe,CACf,cACF,CAEA,sCAEE,wBACF,CAEA,sBACE,iBAAkB,CAClB,gBAAqB,CACrB,oBAAqB,CACrB,kBAAmB,CACnB,qBAAuB,CACvB,cACF,CAEA,WACE,iBACF","file":"main.0f9b49cf.chunk.css","sourcesContent":["body {\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n    sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n    monospace;\n}\n",".App {\n  background-color: #282c34;\n  min-height: 100vh;\n  min-width: 100vw;\n  display: flex;\n  font-size: calc(10px + 2vmin);\n  color: white;\n}\n\n.left-area {\n  margin-left: 8px;\n  margin-top: 8px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n}\n\n.image-area {\n  cursor: pointer;\n  text-decoration: none;\n  margin: 12px 0 0 12px;\n}\n\n.button-group {\n  display: flex;\n  flex-direction: row;\n}\n\n.button-1 {\n  background-color: #A1586D;\n  border-radius: 8px;\n  border-style: none;\n  box-sizing: border-box;\n  color: #FFFFFF;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  height: 40px;\n  line-height: 20px;\n  list-style: none;\n  margin: 0;\n  outline: none;\n  padding: 10px 16px;\n  /* position: relative; */\n  text-align: center;\n  text-decoration: none;\n  transition: 200ms;\n  vertical-align: baseline;\n  user-select: none;\n  -webkit-user-select: none;\n  touch-action: manipulation;\n  max-width: fit-content;\n  margin-top: 16px;\n}\n\n.button-1:hover {\n  background-color: #FCA4CE;\n}\n\n.button-2 {\n  margin-left: 16px;\n  background-color: #FC7C73;\n  border-radius: 8px;\n  border-style: none;\n  box-sizing: border-box;\n  color: #FFFFFF;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  height: 40px;\n  line-height: 20px;\n  list-style: none;\n  outline: none;\n  padding: 10px 16px;\n  /* position: relative; */\n  text-align: center;\n  text-decoration: none;\n  transition: 200ms;\n  vertical-align: baseline;\n  user-select: none;\n  -webkit-user-select: none;\n  touch-action: manipulation;\n  margin-top: 16px;\n}\n\n.button-2:hover {\n  background-color: #FEC8A9;\n}\n\n.button-3 {\n  margin-left: 16px;\n  background-color: #DD9785;\n  border-radius: 8px;\n  border-style: none;\n  box-sizing: border-box;\n  color: #FFFFFF;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  height: 40px;\n  line-height: 20px;\n  list-style: none;\n  outline: none;\n  padding: 10px 16px;\n  /* position: relative; */\n  text-align: center;\n  text-decoration: none;\n  transition: 200ms;\n  vertical-align: baseline;\n  user-select: none;\n  -webkit-user-select: none;\n  touch-action: manipulation;\n  margin-top: 16px;\n}\n\n.button-3:hover {\n  background-color: #DFC8AB;\n}\n\n.config-area {\n  margin: 16px;\n  width: 100%;\n  height: 100%;\n}\n\n.layer-image {\n  border-radius: 16px;\n  border: solid #555;\n}\n\n.loading-text-container {\n  border-radius: 16px;\n  border: solid #555;\n  display: flex;\n  flex-direction: column;\n  text-align: center;\n  align-items: center;\n  justify-content: center;\n  color: grey;\n}\n\n.tab-content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: left;\n  text-align: left;\n}\n\n.item-container {\n  border-radius: 16px;\n  min-width: 100%;\n  border: dashed rgb(114, 57, 57);\n}\n\n.item-image {\n  border-radius: 12px;\n  margin: 4px 4px 0 4px;\n  display: inline-block;\n  object-fit: contain;\n  border: dashed rgb(62, 62, 143);\n  cursor: pointer;\n  transition: 200ms;\n}\n\n.item-image:hover,\n.item-image:focus {\n  border: solid #F082AC;\n}\n\n.item-image-selected {\n  border-radius: 12px;\n  margin: 4px 4px 0 4px;\n  display: inline-block;\n  object-fit: contain;\n  border: solid #f0e982;\n  cursor: default;\n}\n\n.color-container {\n  border-radius: 16px;\n  min-width: 100%;\n  margin-top: 4px;\n  border: dashed rgb(44, 90, 44);\n}\n\n.color-image {\n  border-radius: 50%;\n  margin: 6px 4px 0 4px;\n  display: inline-block;\n  object-fit: contain;\n  border: 4px solid grey;\n  cursor: pointer;\n  transition: 200ms;\n}\n\n.color-image:hover,\n.color-image:focus {\n  border: 4px solid #F082AC;\n}\n\n.color-image-selected {\n  border-radius: 50%;\n  margin: 6px 4px 0 4px;\n  display: inline-block;\n  object-fit: contain;\n  border: 4px solid white;\n  cursor: default;\n}\n\n.tab-image {\n  border-radius: 8px;\n}"]}
\ No newline at end of file
diff --git a/static/css/modal.css b/static/css/modal.css
new file mode 100644
index 0000000..76680f3
--- /dev/null
+++ b/static/css/modal.css
@@ -0,0 +1,98 @@
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+  z-index: 1000; /* 确保在最上层 */
+}
+
+.modal-overlay.active {
+  opacity: 1;
+  visibility: visible;
+}
+
+.modal-content {
+  background: rgba(240, 244, 248, 0.521); /* 半透明浅蓝色背景 */
+  padding: 30px;
+  border-radius: 15px;
+  width: 90%;
+  max-width: 500px;
+  text-align: center;
+  transform: scale(0.9);
+  transition: transform 0.3s ease;
+  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
+  border: 1px solid rgba(118, 170, 255, 0.801); /* 半透明边框 */
+  backdrop-filter: blur(10px); /* 模糊效果 */
+}
+
+.modal-overlay.active .modal-content {
+  transform: scale(1);
+}
+
+.modal-content h2 {
+  margin-top: 0;
+  color: #333;
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.modal-content p {
+  margin: 20px 0;
+  color: #555; /* 深灰色字体 */
+  font-size: 16px;
+  line-height: 1.6;
+}
+
+.modal-content p strong {
+  color: #991641; /* 突出显示重要内容 */
+}
+
+.modal-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 15px;
+  margin-top: 30px;
+}
+
+.modal-button {
+  padding: 12px 25px;
+  border: none;
+  border-radius: 25px; /* 更圆的按钮 */
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 600; /* 字体加粗 */
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+  text-transform: uppercase; /* 字母大写 */
+  letter-spacing: 1px; /* 增加字母间距 */
+}
+
+.modal-button-agree {
+  background: linear-gradient(45deg, #44d661, #cfffdf); /* 绿色渐变 */
+  color: white;
+}
+
+.modal-button-agree:hover {
+  background-color: #218838;
+  transform: translateY(-3px) scale(1.05);
+  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
+}
+
+.modal-button-disagree {
+  background: linear-gradient(45deg, #ff487f, #e4e8f0); /* 粉色渐变w */
+  color: #ffffff;
+}
+
+.modal-button-disagree:hover {
+  background-color: #c82333;
+  transform: translateY(-3px) scale(1.05);
+  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
+}
\ No newline at end of file