update frontend

frontend/styles.css

@@ -2,6 +2,7 @@
     --primary-color: #3498db;
     --secondary-color: #2ecc71;
     --danger-color: #e74c3c;
+    --warning-color: #f39c12;
     --text-color: #333;
     --bg-color: #f5f5f5;
     --card-color: #fff;
@@ -13,6 +14,7 @@
     --primary-color: #2980b9;
     --secondary-color: #27ae60;
     --danger-color: #c0392b;
+    --warning-color: #d35400;
     --text-color: #f5f5f5;
     --bg-color: #121212;
     --card-color: #1e1e1e;
@@ -53,12 +55,16 @@ header {
 .header-left, .header-right {
     display: flex;
     align-items: center;
-    gap: 20px;
+    gap: 15px;
+    flex-wrap: wrap;
 }
 
 h1 {
     font-size: 2rem;
     color: var(--primary-color);
+    display: flex;
+    align-items: center;
+    gap: 10px;
 }
 
 .search-box {
@@ -84,13 +90,7 @@ h1 {
     opacity: 0.7;
 }
 
-.actions {
-    display: flex;
-    gap: 10px;
-    flex-wrap: wrap;
-}
-
-.actions button {
+button {
     padding: 8px 16px;
     background-color: var(--primary-color);
     color: white;
@@ -100,23 +100,33 @@ h1 {
     display: flex;
     align-items: center;
     gap: 5px;
-}
-
-.actions button:hover {
-    opacity: 0.9;
-}
-
-.actions button i {
     font-size: 0.9rem;
 }
 
-.theme-switcher button {
-    background: none;
-    border: none;
-    color: var(--text-color);
-    font-size: 1.2rem;
-    cursor: pointer;
-    padding: 5px;
+button:hover {
+    opacity: 0.9;
+}
+
+button i {
+    font-size: 0.9rem;
+}
+
+#loginBtn, #logoutBtn {
+    background-color: var(--secondary-color);
+}
+
+#logoutBtn {
+    background-color: var(--warning-color);
+}
+
+.loading, .error {
+    text-align: center;
+    padding: 20px;
+    color: var(--primary-color);
+}
+
+.error {
+    color: var(--danger-color);
 }
 
 .categories {
@@ -154,7 +164,7 @@ h1 {
     align-items: center;
     text-decoration: none;
     color: var(--text-color);
-    transition: transform 0.2s;
+    transition: all 0.2s;
     position: relative;
     padding: 10px;
     border-radius: 8px;
@@ -180,6 +190,13 @@ h1 {
     color: var(--primary-color);
 }
 
+.site-icon img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
 .site-name {
     text-align: center;
     font-size: 0.9rem;
@@ -200,12 +217,26 @@ h1 {
     font-size: 12px;
     cursor: pointer;
     display: none;
+    align-items: center;
+    justify-content: center;
 }
 
 .site:hover .delete-btn {
     display: flex;
-    align-items: center;
-    justify-content: center;
+}
+
+/* 拖拽相关样式 */
+.site[draggable="true"] {
+    cursor: grab;
+}
+
+.site[draggable="true"]:active {
+    cursor: grabbing;
+}
+
+.site.dragging {
+    opacity: 0.5;
+    background-color: var(--primary-color);
 }
 
 /* 模态框样式 */
@@ -269,8 +300,7 @@ h1 {
     gap: 8px;
 }
 
-.form-group input,
-.form-group select {
+.form-group input {
     width: 100%;
     padding: 10px;
     border: 1px solid var(--border-color);
@@ -298,73 +328,6 @@ form button:hover {
     opacity: 0.9;
 }
 
-/* 分类管理样式 */
-.category-list {
-    margin-bottom: 20px;
-    max-height: 300px;
-    overflow-y: auto;
-}
-
-.category-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px;
-    margin-bottom: 10px;
-    background-color: var(--bg-color);
-    border-radius: 4px;
-}
-
-.category-item span {
-    flex-grow: 1;
-}
-
-.category-item button {
-    background-color: var(--danger-color);
-    color: white;
-    border: none;
-    border-radius: 4px;
-    padding: 5px 10px;
-    cursor: pointer;
-}
-
-.add-category {
-    display: flex;
-    gap: 10px;
-}
-
-.add-category input {
-    flex-grow: 1;
-    padding: 10px;
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    background-color: var(--bg-color);
-    color: var(--text-color);
-}
-
-.add-category button {
-    background-color: var(--secondary-color);
-    color: white;
-    border: none;
-    padding: 10px 15px;
-    border-radius: 4px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 5px;
-}
-
-/* 拖拽样式 */
-.sortable-ghost {
-    opacity: 0.5;
-    background: var(--primary-color);
-}
-
-.sortable-chosen {
-    box-shadow: 0 0 10px var(--shadow-color);
-}
-
-/* 响应式设计 */
 @media (max-width: 768px) {
     header {
         flex-direction: column;
@@ -382,12 +345,8 @@ form button:hover {
         width: 100%;
     }
     
-    .actions {
-        justify-content: space-between;
-    }
-    
-    .actions button {
-        flex-grow: 1;
+    .header-right button {
+        width: 100%;
         justify-content: center;
     }
     
@@ -395,26 +354,7 @@ form button:hover {
         grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
     }
     
-    .add-category {
-        flex-direction: column;
+    .modal-content {
+        margin: 20% auto;
     }
-}
-
-/* 添加拖拽相关样式 */
-.site[draggable="true"] {
-    cursor: grab;
-}
-
-.site[draggable="true"]:active {
-    cursor: grabbing;
-}
-
-.site.dragging {
-    opacity: 0.5;
-    background-color: var(--primary-color);
-}
-
-/* 登录按钮样式 */
-#loginBtn, #logoutBtn {
-    background-color: var(--secondary-color);
 }