From 3714269843e0d76ed3f69fc1b4dfd5429a029985 Mon Sep 17 00:00:00 2001
From: Coldin04 <me@coldin.top>
Date: Sat, 31 Jan 2026 11:26:35 +0800
Subject: [PATCH] Add login UI with animated Atlas logo demo

---
 Collider-UI-login/index.html | 75 ++++++++++++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 Collider-UI-login/index.html
diff --git a/Collider-UI-login/index.html b/Collider-UI-login/index.html
new file mode 100644
index 0000000..91d7509
--- /dev/null
+++ b/Collider-UI-login/index.html
@@ -0,0 +1,75 @@
+<body>
+    <div class="login-card">
+        <div class="logo-outer-container">
+            <div class="block block-blue"></div>
+            <div class="block block-green"></div>
+        </div>
+        <div class="logo-text">Atlas</div>
+    </div>
+
+    <style>
+        /* 复用之前的样式 */
+        body { margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #f0f2f5; font-family: sans-serif; }
+        .login-card { background: white; padding: 60px 80px; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.08); text-align: center; animation: cardEntrance 0.8s ease-out forwards; opacity: 0; transform: translateY(30px); }
+        .logo-text { font-size: 24px; font-weight: bold; color: #333; margin-top: 20px; letter-spacing: 1px; animation: fadeIn 1s ease 0.5s forwards; opacity: 0; }
+        .block { width: 50px; height: 40px; border-radius: 15px; }
+        
+        /* --- 核心修改区 --- */
+
+        /* 1. 外层容器：现在只负责布局 */
+        .logo-outer-container {
+            display: flex;
+            justify-content: center;
+            gap: 15px;
+            /* 动画移到下面的方块上 */
+        }
+
+        /* 2. 内部方块：各自进场，然后一起对撞 */
+        .block-blue {
+            background-color: #2E89FF;
+            /* 动画1: 从左边进来. 动画2: 温和对撞，无限循环 */
+            animation: 
+                slideInFromLeft 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s backwards,
+                gentleCollideBlue 2.5s ease-in-out 1s infinite;
+        }
+        .block-green {
+            background-color: #00D1C6;
+            /* 动画1: 从右边进来. 动画2: 温和对撞，无限循环 */
+             animation:
+                slideInFromRight 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s backwards,
+                gentleCollideGreen 2.5s ease-in-out 1s infinite;
+        }
+
+        /* 3. 动画定义 */
+        
+        /* 进场：从左滑入 (幅度改小) */
+        @keyframes slideInFromLeft {
+            from { transform: translateX(-30px); opacity: 0; }
+            to { transform: translateX(0); opacity: 1; }
+        }
+
+        /* 进场：从右滑入 (幅度改小) */
+        @keyframes slideInFromRight {
+            from { transform: translateX(30px); opacity: 0; }
+            to { transform: translateX(0); opacity: 1; }
+        }
+
+        /* 循环：温和对撞 (镜像位移, 留有缝隙) */
+        @keyframes gentleCollideBlue {
+            0%, 100% { transform: translateX(0); }
+            20% { transform: translateX(5px); } /* 蓝块向右 */
+            40% { transform: translateX(0); }
+            /* 40% 到 100% 是暂停时间 */
+        }
+        @keyframes gentleCollideGreen {
+            0%, 100% { transform: translateX(0); }
+            20% { transform: translateX(-5px); } /* 绿块向左 */
+            40% { transform: translateX(0); }
+            /* 40% 到 100% 是暂停时间 */
+        }
+
+        /* 其他辅助动画 */
+        @keyframes cardEntrance { to { opacity: 1; transform: translateY(0); } }
+        @keyframes fadeIn { to { opacity: 1; } }
+    </style>
+</body>
\ No newline at end of file
