ui: show calendar first.

docker-compose.yml

@@ -1,7 +1,5 @@
-version: '3.8'
-
 services:
-  timeline-api:
+  Timeline:
     build: .
     ports:
       - "3000:3000"

public/index.html

@@ -44,51 +44,54 @@
 
     <!-- 主应用容器 -->
     <div class="container" id="mainContainer" style="display: none;">
-        <header>
+        <!-- 日历放在顶部 -->
-            <div class="user-info">
+        <div class="calendar" id="calendar"></div>
-                <span id="userDisplay">未登录</span>
+
-                <button id="logoutBtn" class="btn-logout">退出</button>
+        <!-- 控制元素移到底部 -->
-            </div>
+        <div class="bottom-section">
-            <h1>任务日历</h1>
             <div class="controls">
                 <button id="prevMonth" class="btn-nav">‹</button>
                 <span id="currentMonth" class="month-display"></span>
                 <button id="nextMonth" class="btn-nav">›</button>
                 <button id="todayBtn" class="btn-today">今天</button>
             </div>
-        </header>
-        
-        <div class="legend">
-            <div class="legend-item">
-                <span class="mark completed">✓</span>
-                <span>任务已完成</span>
-            </div>
-            <div class="legend-item">
-                <span class="mark partial">○</span>
-                <span>部分未完成</span>
-            </div>
-            <div class="legend-item">
-                <span class="mark none"></span>
-                <span>未标记</span>
-            </div>
-        </div>
 
-        <div class="calendar" id="calendar"></div>
+            <div class="legend">
+                <div class="legend-item">
+                    <span class="mark completed">✓</span>
+                    <span>任务已完成</span>
+                </div>
+                <div class="legend-item">
+                    <span class="mark partial">○</span>
+                    <span>部分未完成</span>
+                </div>
+                <div class="legend-item">
+                    <span class="mark none"></span>
+                    <span>未标记</span>
+                </div>
+            </div>
 
-        <div class="instructions">
+            <div class="instructions">
-            <p>💡 点击日期可切换标记状态：未标记 → 已完成 → 部分完成 → 未标记</p>
+                <p>💡 点击日期可切换标记状态：未标记 → 已完成 → 部分完成 → 未标记</p>
-            <p>📌 选择服务器后，数据会自动加载和保存</p>
+                <p>📌 选择服务器后，数据会自动加载和保存</p>
-        </div>
+            </div>
 
-        <div class="server-section">
+            <div class="server-section">
-            <label for="serverInput">API服务器地址：</label>
+                <label for="serverInput">API服务器地址：</label>
-            <div class="server-input-group">
+                <div class="server-input-group">
-                <input type="text" id="serverInput" placeholder="例如：http://localhost:3000" />
+                    <input type="text" id="serverInput" placeholder="例如：http://localhost:3000" />
-                <button id="addServerBtn" class="btn-add">添加</button>
+                    <button id="addServerBtn" class="btn-add">添加</button>
-                <select id="serverSelect" class="server-select">
+                    <select id="serverSelect" class="server-select">
-                    <option value="">选择服务器</option>
+                        <option value="">选择服务器</option>
-                </select>
+                    </select>
-                <button id="removeServerBtn" class="btn-remove">删除</button>
+                    <button id="removeServerBtn" class="btn-remove">删除</button>
+                </div>
+            </div>
+            
+            <!-- 用户信息移到最后 -->
+            <div class="user-info">
+                <span id="userDisplay">未登录</span>
+                <button id="logoutBtn" class="btn-logout">退出</button>
             </div>
         </div>
     </div>

public/js/calendar.js

@@ -123,6 +123,11 @@ export default class CalendarView {
       dayEl.classList.add('other-month');
     }
 
+    // Check if the day is in the future
+    if (this.isFutureDate(date)) {
+      dayEl.classList.add('future-day');
+    }
+
     if (this.isToday(date)) {
       dayEl.classList.add('today');
     }
@@ -235,6 +240,15 @@ export default class CalendarView {
       date.getDate() === today.getDate();
   }
 
+  // Check if a date is in the future
+  isFutureDate(date) {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    const checkDate = new Date(date);
+    checkDate.setHours(0, 0, 0, 0);
+    return checkDate > today;
+  }
+
   formatDate(date) {
     const year = date.getFullYear();
     const month = String(date.getMonth() + 1).padStart(2, '0');

public/style.css

@@ -184,19 +184,26 @@ body {
     background: white;
     border-radius: 16px;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-    padding: 30px;
+    padding: 25px;
 }
 
 header {
     text-align: center;
-    margin-bottom: 30px;
+    margin-bottom: 15px;
+}
+
+header h1 {
+    font-size: 2.5em;
+    color: #667eea;
+    margin-bottom: 10px;
+    font-weight: 600;
 }
 
 .user-info {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 15px;
+    margin-top: 20px;
     padding: 10px 15px;
     background: #f8f9fa;
     border-radius: 8px;
@@ -223,19 +230,226 @@ header {
     transform: translateY(-1px);
 }
 
-header h1 {
+.bottom-section {
-    font-size: 2.5em;
+    margin-top: 20px;
+}
+
+.controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    flex-wrap: wrap;
+    margin-bottom: 15px;
+}
+
+.month-display {
+    font-size: 1.5em;
+    font-weight: 600;
+    color: #333;
+    min-width: 200px;
+}
+
+.btn-nav {
+    background: #667eea;
+    color: white;
+    border: none;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    font-size: 24px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.btn-nav:hover {
+    background: #5568d3;
+    transform: scale(1.1);
+}
+
+.btn-nav:active {
+    transform: scale(0.95);
+}
+
+.btn-today {
+    background: #764ba2;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 8px;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.btn-today:hover {
+    background: #653a8a;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(118, 75, 162, 0.4);
+}
+
+.legend {
+    display: flex;
+    justify-content: center;
+    gap: 25px;
+    margin-bottom: 15px;
+    padding: 10px;
+    background: #f8f9fa;
+    border-radius: 8px;
+    flex-wrap: wrap;
+}
+
+.legend-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+}
+
+.mark {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    font-size: 16px;
+}
+
+.mark.completed {
+    background: #10b981;
+    color: white;
+}
+
+.mark.partial {
+    background: #f59e0b;
+    color: white;
+}
+
+.mark.none {
+    background: #e5e7eb;
+    border: 2px solid #d1d5db;
+}
+
+.calendar {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 3px;
+    margin-bottom: 15px;
+}
+
+.weekday {
+    text-align: center;
+    font-weight: 600;
     color: #667eea;
-    margin-bottom: 20px;
+    padding: 8px;
+    font-size: 14px;
+    background: #f0f4ff;
+    border-radius: 6px;
+}
+
+.day {
+    aspect-ratio: 1;
+    border: 2px solid #e5e7eb;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    background: white;
+    position: relative;
+    padding: 5px;
+}
+
+.day:hover {
+    border-color: #667eea;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
+}
+
+.day.other-month {
+    opacity: 0.4;
+    background: #f9fafb;
+}
+
+.day.future-day {
+    opacity: 0.6;
+    background: #f3f4f6;
+    color: #9ca3af;
+}
+
+.day.future-day .day-number {
+    color: #9ca3af;
+}
+
+.day.today {
+    border-color: #667eea;
+    background: #f0f4ff;
     font-weight: 600;
 }
 
+.day.completed {
+    background: #d1fae5;
+    border-color: #10b981;
+}
+
+.day.completed .day-number {
+    color: #065f46;
+}
+
+.day.partial {
+    background: #fef3c7;
+    border-color: #f59e0b;
+}
+
+.day.partial .day-number {
+    color: #92400e;
+}
+
+.day-number {
+    font-size: 16px;
+    font-weight: 500;
+    margin-bottom: 4px;
+}
+
+.day-mark {
+    font-size: 20px;
+    font-weight: bold;
+    line-height: 1;
+}
+
+.day.completed .day-mark {
+    color: #10b981;
+}
+
+.day.partial .day-mark {
+    color: #f59e0b;
+}
+
+.instructions {
+    text-align: center;
+    padding: 10px;
+    background: #f0f4ff;
+    border-radius: 8px;
+    color: #667eea;
+    font-size: 14px;
+    margin-bottom: 15px;
+}
+
+.instructions p {
+    margin: 5px 0;
+}
+
 .server-section {
-    margin-top: 30px;
+    padding: 15px;
-    margin-bottom: 0;
-    padding: 20px;
     background: #f8f9fa;
-    border-radius: 10px;
+    border-radius: 8px;
     border-top: 2px solid #e5e7eb;
 }
 
@@ -361,215 +575,11 @@ header h1 {
     color: white;
 }
 
-.controls {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 15px;
-    flex-wrap: wrap;
-}
-
-.btn-nav {
-    background: #667eea;
-    color: white;
-    border: none;
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    font-size: 24px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.btn-nav:hover {
-    background: #5568d3;
-    transform: scale(1.1);
-}
-
-.btn-nav:active {
-    transform: scale(0.95);
-}
-
-.month-display {
-    font-size: 1.5em;
-    font-weight: 600;
-    color: #333;
-    min-width: 200px;
-}
-
-.btn-today {
-    background: #764ba2;
-    color: white;
-    border: none;
-    padding: 10px 20px;
-    border-radius: 8px;
-    font-size: 14px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-}
-
-.btn-today:hover {
-    background: #653a8a;
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(118, 75, 162, 0.4);
-}
-
-.legend {
-    display: flex;
-    justify-content: center;
-    gap: 30px;
-    margin-bottom: 25px;
-    padding: 15px;
-    background: #f8f9fa;
-    border-radius: 10px;
-    flex-wrap: wrap;
-}
-
-.legend-item {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 14px;
-}
-
-.mark {
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: bold;
-    font-size: 16px;
-}
-
-.mark.completed {
-    background: #10b981;
-    color: white;
-}
-
-.mark.partial {
-    background: #f59e0b;
-    color: white;
-}
-
-.mark.none {
-    background: #e5e7eb;
-    border: 2px solid #d1d5db;
-}
-
-.calendar {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    gap: 8px;
-    margin-bottom: 20px;
-}
-
-.weekday {
-    text-align: center;
-    font-weight: 600;
-    color: #667eea;
-    padding: 12px;
-    font-size: 14px;
-    background: #f0f4ff;
-    border-radius: 8px;
-}
-
-.day {
-    aspect-ratio: 1;
-    border: 2px solid #e5e7eb;
-    border-radius: 10px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    background: white;
-    position: relative;
-    padding: 8px;
-}
-
-.day:hover {
-    border-color: #667eea;
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
-}
-
-.day.other-month {
-    opacity: 0.4;
-    background: #f9fafb;
-}
-
-.day.today {
-    border-color: #667eea;
-    background: #f0f4ff;
-    font-weight: 600;
-}
-
-.day.completed {
-    background: #d1fae5;
-    border-color: #10b981;
-}
-
-.day.completed .day-number {
-    color: #065f46;
-}
-
-.day.partial {
-    background: #fef3c7;
-    border-color: #f59e0b;
-}
-
-.day.partial .day-number {
-    color: #92400e;
-}
-
-.day-number {
-    font-size: 16px;
-    font-weight: 500;
-    margin-bottom: 4px;
-}
-
-.day-mark {
-    font-size: 20px;
-    font-weight: bold;
-    line-height: 1;
-}
-
-.day.completed .day-mark {
-    color: #10b981;
-}
-
-.day.partial .day-mark {
-    color: #f59e0b;
-}
-
-.instructions {
-    text-align: center;
-    padding: 15px;
-    background: #f0f4ff;
-    border-radius: 10px;
-    color: #667eea;
-    font-size: 14px;
-}
-
-.instructions p {
-    margin: 5px 0;
-}
-
 @media (max-width: 768px) {
     .container {
         padding: 20px;
     }
 
-    header h1 {
-        font-size: 2em;
-    }
-
     .month-display {
         font-size: 1.2em;
         min-width: 150px;
@@ -595,23 +605,31 @@ header h1 {
         gap: 15px;
     }
 
-    .server-input-group {
+    .legend-item {
-        flex-direction: column;
+        gap: 6px;
+        font-size: 12px;
     }
 
-    #serverInput, .server-select {
+    .mark {
-        width: 100%;
+        width: 20px;
+        height: 20px;
+        font-size: 14px;
     }
 
-    .btn-add, .btn-remove {
+    .server-section {
-        width: 100%;
+        padding: 12px;
     }
 
-    .status-message-toast {
+    .server-section label {
-        top: 10px;
+        font-size: 12px;
-        right: 10px;
+    }
-        left: 10px;
+
-        max-width: none;
+    .instructions {
-        min-width: auto;
+        padding: 8px;
+        font-size: 11px;
+    }
+
+    .user-info {
+        padding: 8px 12px;
     }
 }