diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..e631f7e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+task.md
+/.wrangler
\ No newline at end of file
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
diff --git a/grid-study/index.html b/grid-study/index.html
index 2d68efe..c3f267f 100644
--- a/grid-study/index.html
+++ b/grid-study/index.html
@@ -10,23 +10,115 @@
     <header class="top-bar">
             <div class="top-bar__brand">
                 <img src="src/avatar_48.png" alt="Logo" class="top-bar__logo">
-                <span>Coldin04 WorkSpace</span>
+                <span>Coldin04 的工作台</span>
             </div>
             
             <div class="top-bar__actions">
-                <button class="top-bar__button">主页</button>
-                <button class="top-bar__button">退出</button>
+                <button class="top-bar__button" onclick="window.location.href='https://cold04.com'">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
+                        <polyline points="9 22 9 12 15 12 15 22"></polyline>
+                    </svg>
+                </button>
+                <button class="top-bar__button" onclick="alert('你已退出登录（个鬼）')">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
+                        <polyline points="16 17 21 12 16 7"></polyline>
+                        <line x1="21" y1="12" x2="9" y2="12"></line>
+                    </svg>
+                </button>
             </div>
             
     </header>
     <div class="main-content">
         <main class="dashboard-grid">
-            <section class="card card__profile">个人卡片区域</section>
-            <section class="card card__rss">RSS News区域</section>
-            <section class="card card__task">任务区域</section>
-            <section class="card card__hitokoto">一言</section>
-            <section class="card card__photos">Photos 区域</section>
+            <section class="card card__profile">
+                <div class="profile">
+                    <img src="src/avatar_240.webp" alt="头像" class="profile__avatar">
+                    <div class="profile__content">
+                        <h2 class="profile__name">Coldin04</h2>
+                        <p class="profile__signature">Stay hungry, stay foolish.</p>
+                    </div>
+                </div>
+            </section>
+            <section class="card card__rss">
+                <div class="rss-wrapper">
+                    <div class="rss-header">
+                        <h3>少数派 Prime</h3>
+                        <span class="rss-status">sspai.com</span>
+                    </div>
+                    <div class="rss-list">
+                        <article class="rss-item">
+                            <div class="rss-meta">
+                                <span class="rss-tag">SamWanng</span>
+                                <time>Jan 23</time>
+                            </div>
+                            <h4><a href="https://sspai.com/post/105578" target="_blank">一日一技 | 老 Mac 系统恢复指北</a></h4>
+                            <p>不能用 Wi-Fi 和 U 盘恢复系统的 Mac，你还能试试这个重装方法。</p>
+                        </article>
+                        <article class="rss-item">
+                            <div class="rss-meta">
+                                <span class="rss-tag">少数派编辑部</span>
+                                <time>Jan 23</time>
+                            </div>
+                            <h4><a href="https://sspai.com/post/105695" target="_blank">派早报：realme 真我发布新品、Xbox 应用登陆 Arm PC 等</a></h4>
+                            <p>索尼发布 LinkBuds Clip 开放式耳机、Adobe 将支持把 PDF 转换成播客等。</p>
+                        </article>
+                        </article>
+                    </div>
+                    <div class="rss-footer">
+                        <a href="https://sspai.com" target="_blank" class="rss-more-btn">查看更多内容 →</a>
+                    </div>
+                </div>
+            </section>
+            <section class="card card__task">
+                <div class="task-container">
+                    <div class="task-header">
+                        <h3>待办事项</h3>
+                        <span class="task-count">4 items</span>
+                    </div>
+                    <ul class="task-list">
+                        <li class="task-item">
+                            <input type="checkbox" id="task1" checked>
+                            <label for="task1" class="task-content">完成 Grid 布局学习</label>
+                        </li>
+                        <li class="task-item">
+                            <input type="checkbox" id="task2">
+                            <label for="task2" class="task-content">记得启动原神</label>
+                        </li>
+                        <li class="task-item">
+                            <input type="checkbox" id="task3">
+                            <label for="task3" class="task-content">其实这些只是测试文本</label>
+                        </li>
+                        <li class="task-item">
+                            <input type="checkbox" id="task4">
+                            <label for="task4" class="task-content">Home可以点</label>
+                        </li>
+                    </ul>
+                </div>
+            </section>
+            <section class="card card__hitokoto">
+                <div class="hitokoto-content">
+                    <a href="#" id="hitokoto_text" class="hitokoto__text" target="_blank" style="text-decoration: none; color: inherit; display: block;">:D 获取中...</a>
+                    <p id="hitokoto_from" class="hitokoto__from"></p>
+                </div>
+            </section>
+            <section class="card card__photos" style="border: none;">
+                <img src="src/wallpaper/desert.webp" alt="Photo" loading="lazy">
+            </section>
         </main>
     </div>
+    <script>
+        fetch('https://v1.hitokoto.cn')
+            .then(response => response.json())
+            .then(data => {
+                const hitokoto = document.querySelector('#hitokoto_text')
+                const from = document.querySelector('#hitokoto_from')
+                hitokoto.href = `https://hitokoto.cn/?uuid=${data.uuid}`
+                hitokoto.innerText = data.hitokoto
+                if (from) from.innerText = `—— ${data.from}`
+            })
+            .catch(console.error)
+    </script>
 </body>
 </html>
diff --git a/grid-study/src/wallpaper/big_sure.webp b/grid-study/src/wallpaper/big_sure.webp
new file mode 100644
index 0000000..9f1c3f7
Binary files /dev/null and b/grid-study/src/wallpaper/big_sure.webp differ
diff --git a/grid-study/src/wallpaper/desert.webp b/grid-study/src/wallpaper/desert.webp
new file mode 100644
index 0000000..8442450
Binary files /dev/null and b/grid-study/src/wallpaper/desert.webp differ
diff --git a/grid-study/styles.css b/grid-study/styles.css
index cc70ebc..86311e7 100644
--- a/grid-study/styles.css
+++ b/grid-study/styles.css
@@ -1,15 +1,13 @@
-html, body { height: 100%; }
+* {
+    box-sizing: border-box;
+}
+
 body {
-    /* 使用 Bing 图片作为背景 */
-    background-image: url('src/wallpaper/big_sure.jpg');
+    background-image: url('src/wallpaper/big_sure.webp');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     background-attachment: fixed;
-    
-    /* 保持高度设置 */
-    min-height: 100vh;
-    margin: 0;
 }
 
 /* 顶栏样式 */
@@ -55,20 +53,27 @@ body {
 }
 
 .top-bar__button {
-    padding: 8px 16px;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
-    background-color: rgba(255, 255, 255, 0.5);
-    backdrop-filter: blur(5px);
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background-color: transparent;
     cursor: pointer;
     font-size: 14px;
     transition: var(--transition);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #333;
+}
+
+.top-bar__button span {
+    display: none;
 }
 
 .top-bar__button:hover {
-    background-color: rgba(255, 255, 255, 0.8);
-    transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    background-color: rgba(0, 0, 0, 0.05);
 }
 
 .top-bar__button:active {
@@ -80,13 +85,13 @@ body {
 .main-content {
     gap: 24px;
     max-width: 1200px;  /* 最大宽度限制 */
-    margin: 40px auto;
-    padding: 0 20px 40px 20px;
+    margin: 20px auto;
+    padding: 0 80px 20px 80px;
 }   
 .dashboard-grid{
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    grid-auto-rows: minmax(200px, auto); /* 自动行高 */
+    grid-auto-rows: minmax(150px, auto); /* 自动行高 */
     grid-auto-flow: dense; /* 紧凑排列 */
     gap: 24px;
 }
@@ -101,7 +106,6 @@ body {
     display: flex;
     align-items: center;
     gap: 16px;
-    margin-bottom: 16px;
     transition: var(--transition);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }
@@ -115,28 +119,334 @@ body {
 .card__profile{
     grid-column: span 1;
     grid-row: span 2;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+/* 个人卡片样式 */
+.profile {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 16px;
+    width: 100%;
+}
+
+.profile__avatar {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 4px solid rgba(255, 255, 255, 0.8);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.profile__avatar:hover {
+    transform: scale(1.05);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+}
+
+.profile__content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+}
+.profile__name {
+    margin: 0;
+    font-size: 24px;
+    font-weight: 600;
+    color: #333;
+    letter-spacing: 0.5px;
+}
+
+.profile__signature {
+    margin: 0;
+    font-size: 14px;
+    color: #666;
+    font-style: italic;
+    max-width: 200px;
+    line-height: 1.5;
 }
 
 .card__rss{
     grid-column: span 2;
     grid-row: span 2;
+    align-items: flex-start;
+}
+
+/* RSS 区域样式 */
+.rss-wrapper {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.rss-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid rgba(0,0,0,0.06);
+}
+
+.rss-header h3 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: #1d1d1f;
+}
+
+.rss-status {
+    font-size: 12px;
+    color: #86868b;
+    background: rgba(0,0,0,0.05);
+    padding: 4px 10px;
+    border-radius: 12px;
+}
+
+.rss-list {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    overflow-y: auto;
+    padding-right: 4px;
+}
+
+.rss-item {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.rss-meta {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    color: #86868b;
+}
+
+.rss-tag {
+    color: #d93535;
+    font-weight: 500;
+}
+
+.rss-item h4 {
+    margin: 0;
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 1.4;
+}
+
+.rss-item h4 a {
+    color: #1d1d1f;
+    text-decoration: none;
+    transition: color 0.2s;
+}
+
+.rss-item h4 a:hover {
+    color: #d93535;
+}
+
+.rss-item p {
+    margin: 4px 0 0 0;
+    font-size: 13px;
+    color: #666;
+    line-height: 1.5;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.rss-footer {
+    margin-top: 12px;
+    padding-top: 12px;
+    border-top: 1px solid rgba(0,0,0,0.06);
+    text-align: center;
+}
+
+.rss-more-btn {
+    display: inline-block;
+    padding: 6px 16px;
+    font-size: 13px;
+    color: #d93535;
+    background-color: rgba(217, 53, 53, 0.1);
+    border-radius: 16px;
+    text-decoration: none;
+    font-weight: 500;
+    transition: all 0.2s;
+}
+
+.rss-more-btn:hover {
+    background-color: #d93535;
+    color: white;
 }
 
 .card__hitokoto{
     grid-column: span 1;
     grid-row: span 1;
+    justify-content: center;
 }
 
-.card__photo{
+/* 一言样式 */
+.hitokoto-content {
+    width: 100%;
+}
+
+.hitokoto__text {
+    font-size: 18px;
+    line-height: 1.6;
+    margin: 0 0 8px 0;
+    text-align: center;
+    font-weight: 500;
+}
+
+.hitokoto__from {
+    font-size: 13px;
+    color: #888;
+    text-align: right;
+    margin: 0;
+}
+
+.card__photos{
     grid-column: span 1;
     grid-row: span 1;
+    padding: 0;
+    overflow: hidden;
+    height: 180px;
+}
+
+.card__photos img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
 }
 
 .card__task{
     grid-column: span 2;
-    grid-row: span 2;    
+    grid-row: span 2;
+    align-items: flex-start;
 }
 
+/* 任务列表样式 */
+.task-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.task-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid rgba(0,0,0,0.06);
+}
+
+.task-header h3 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: #1d1d1f;
+}
+
+.task-count {
+    font-size: 12px;
+    color: #86868b;
+    background: rgba(0,0,0,0.05);
+    padding: 4px 10px;
+    border-radius: 12px;
+}
+
+.task-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.task-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 6px 8px;
+    border-radius: 8px;
+    transition: background-color 0.2s ease;
+}
+
+.task-item:hover {
+    background-color: rgba(0,0,0,0.03);
+}
+
+.task-item input[type="checkbox"] {
+    appearance: none;
+    -webkit-appearance: none;
+    width: 20px;
+    height: 20px;
+    border: 2px solid #c7c7cc;
+    border-radius: 50%; /* 圆形复选框 */
+    margin: 0;
+    outline: none;
+    cursor: pointer;
+    position: relative;
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+}
+
+.task-item input[type="checkbox"]:checked {
+    background-color: #0071e3;
+    border-color: #0071e3;
+}
+
+.task-item input[type="checkbox"]:checked::after {
+    content: '';
+    position: absolute;
+    top: 45%;
+    left: 50%;
+    width: 9px;
+    height: 5px;
+    border-left: 2px solid white;
+    border-bottom: 2px solid white;
+    transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+.task-item input[type="checkbox"]:hover {
+    border-color: #0071e3;
+    background-color: rgba(0, 113, 227, 0.05);
+}
+
+.task-item input[type="checkbox"]:checked:hover {
+    background-color: #0077ed;
+}
+
+.task-content {
+    flex: 1;
+    font-size: 15px;
+    color: #333;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+/* 完成状态 */
+.task-item input:checked + .task-content {
+    text-decoration: line-through;
+    color: #86868b;
+}
+
+
+
 /* 响应式设计 */
 @media (max-width: 900px) {
     .dashboard-grid {
@@ -144,9 +454,13 @@ body {
     }
 }
 @media (max-width: 600px) {
+    .main-content {
+        padding: 0 20px 40px 20px;
+    }
     .dashboard-grid {
         grid-template-columns: 1fr;
         gap: 16px;
+        grid-auto-rows: auto;
     }
     .card {
             grid-column: span 1 !important;
@@ -157,10 +471,22 @@ body {
         grid-column: span 1;
         order: 1;
     }
+    .profile {
+        flex-direction: row;
+        text-align: left;
+        align-items: center;
+    }
+    .profile__avatar {
+        width: 80px;
+        height: 80px;
+    }
     .card__rss,.card__task{
         grid-column: span 1;
     }
     .card__hitokoto{
         order: 2;
     }
+    .card__photos {
+        height: 140px;
+    }
 }
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..3cad130
--- /dev/null
+++ b/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <title>导航页</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+      body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; padding: 20px; }
+      h1 { margin-bottom: 8px; }
+      p.description { color: #586069; margin: 0 0 16px; }
+      ul.nav-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
+      ul.nav-list li { margin: 0; }
+      ul.nav-list a { text-decoration: none; color: #0366d6; padding: 10px 14px; display: block; border: 1px solid #e1e4e8; border-radius: 6px; }
+      ul.nav-list a:hover { background: #f6f8fa; }
+    </style>
+
+</head>
+    <body>
+    <h1>学习 demo</h1>
+    <p class="description">为 Atlas 项目启动做准备的学习记录</p>
+    <ul class="nav-list">
+      <li><a href="/grid-study">Grid Study</a></li>
+      <li><a href="/login-page">Login Page</a></li>
+      <li><a href="Collider-UI-login/">登录页对撞效果</a></li>
+    </ul>
+  </body>
+</html>
\ No newline at end of file
diff --git a/login-page/index.html b/login-page/index.html
new file mode 100644
index 0000000..22a9781
--- /dev/null
+++ b/login-page/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>登录</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="login_page">
+        <h2>Journey US</h2>
+        <form action="/login" method="post">
+            <input type="text" id="username" name="username" placeholder="用户名" required><br><br>
+            <input type="password" id="password" name="password" placeholder="密码" required><br><br>
+            <input type="submit" value="登录">
+        </form>
+    </div>
+</body>
+</html>
diff --git a/login-page/src/login_background.webp b/login-page/src/login_background.webp
new file mode 100644
index 0000000..965745b
Binary files /dev/null and b/login-page/src/login_background.webp differ
diff --git a/login-page/style.css b/login-page/style.css
new file mode 100644
index 0000000..16a8ede
--- /dev/null
+++ b/login-page/style.css
@@ -0,0 +1,50 @@
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    font-family: Arial, sans-serif;
+    background-image: url('src/login_background.webp');
+    background-size: cover;
+    background-position: right;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+}
+.login_page {
+    display: flex;
+    margin-left: auto;
+    margin-right: 0;
+    justify-content: center;
+    flex-direction: column;
+    align-items: flex-start; 
+    height: 100vh;
+    padding: 0 40px; 
+    max-width: 400px;
+    background-color: rgba(255, 255, 255, 0.7);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 20px;
+    color: #ff8cb1;
+}
+
+.login_page h2 {
+    font-size: 45px;
+    font-weight: 700;
+}
+
+.login_page form{
+    width: 100%;
+}
+
+.login_page input{
+    width: 100%;
+    padding: 12px 20px;
+    margin: 8px 0;
+    box-sizing: border-box;
+    border: 0px;
+    background-color: #ffeef4;
+    color: #ff8cb1;
+    border-radius: 12px;    
+}
