feat: add motivational quote

css/index.css

@@ -1484,8 +1484,8 @@ body {
 
 /* Main */
 .main { display: flex; flex-direction: column; overflow: hidden; position: relative; }
-.topbar { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--color-border-tertiary); flex-shrink: 0; background: rgba(var(--color-background-primary), 0.8); backdrop-filter: blur(10px); z-index: 10; }
-.topbar-title { font-size: 18px; font-weight: 600; color: var(--color-text-primary); flex: 1; }
+.topbar { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--color-border-tertiary); flex-shrink: 0; background: rgba(var(--color-background-primary), 0.8); backdrop-filter: blur(10px); z-index: 10; }
+.topbar-title { font-size: 18px; font-weight: 700; color: var(--color-text-primary); }
 .btn { font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px 16px; border: 1px solid var(--color-border-secondary); border-radius: var(--border-radius-sm); background: var(--color-background-primary); color: var(--color-text-primary); cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: var(--shadow-sm); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
 .btn:hover { background: var(--color-background-secondary); transform: translateY(-1px); box-shadow: var(--shadow-md); }
 .btn:active { transform: translateY(0); box-shadow: 0 0 0; }
@@ -1494,8 +1494,10 @@ body {
 
 /* Calendar */
 .cal-section { padding: 16px 24px; border-bottom: 1px solid var(--color-border-tertiary); flex-shrink: 0; }
-.cal-header { display: flex; align-items: center; margin-bottom: 16px; }
-.cal-title { font-size: 15px; font-weight: 600; flex: 1; color: var(--color-text-primary); }
+.cal-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
+.cal-header-left { display: flex; flex-direction: column; flex: 1; align-items: flex-start; gap: 4px; }
+.cal-header-right { display: flex; align-items: center; }
+.cal-title { font-size: 15px; font-weight: 600; color: var(--color-text-primary); }
 .cal-nav { font-size: 18px; color: var(--color-text-secondary); cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: background 0.2s; }
 .cal-nav:hover { background: var(--color-background-secondary); color: var(--color-text-primary); }
 .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
@@ -1510,6 +1512,33 @@ body {
 .cal-legend span { display: flex; align-items: center; gap: 6px; }
 .legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
 
+/* Quote Widget */
+.quote-widget { 
+  display: inline-flex; 
+  align-items: center; 
+  gap: 6px; 
+  padding: 6px 12px; 
+  background: var(--color-background-secondary); 
+  border: 1px solid var(--color-border-tertiary); 
+  border-radius: 100px;
+  transition: all 0.2s ease;
+}
+.quote-widget:hover {
+  background: var(--color-background-tertiary);
+  transform: translateY(-1px);
+}
+.quote-icon {
+  color: var(--color-text-tertiary);
+}
+.quote-widget p { 
+  margin: 0; 
+  font-size: 11px; 
+  color: var(--color-text-secondary); 
+  font-weight: 600; 
+  line-height: 1; 
+  letter-spacing: 0.02em;
+}
+
 /* Tasks */
 .tasks-section { flex: 1; overflow-y: auto; padding: 0 24px 24px; scroll-behavior: smooth; }
 .tasks-section::-webkit-scrollbar { width: 6px; }

index.html

@@ -102,6 +102,18 @@ <h1 class="site-title">StudyPlan</h1>
         </button>
       </div>
 
+      <!-- Dashboard Greeting -->
+        <div class="dashboard-greeting" style="padding: 16px 24px 0; display: flex; justify-content: center;">
+          <div class="quote-widget">
+            <svg class="quote-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+              <path d="M12 2l3 7 7 3-7 3-3 7-3-7-7-3 7-3z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            <p id="motivational-quotes">
+              Small Progress is still Progress
+            </p>
+          </div>
+        </div>
+
       <!-- Calendar -->
       <div class="cal-section">
         <div class="cal-header">

js/app.js

@@ -1076,3 +1076,29 @@ addItemsBtn.addEventListener('click', () => {
 downloadBtn.addEventListener('click', () => {
   downloadData();
 });
+
+// Motivational Quotes
+const quotes = [
+  "Small Progress is still Progress",
+  "Focus on being productive instead of busy",
+  "The secret of getting ahead is getting started",
+  "Strive for progress, not perfection",
+  "Don't wait for opportunity. Create it.",
+  "Success is the sum of small efforts repeated daily",
+  "Time is not refundable, use it with intention.",
+  "Sometimes, getting it done is better than perfect.",
+  "Believe you can and you're halfway there.",
+  "Arise, awake, and stop not till the goal is reached."
+];
+
+const quoteEl = document.getElementById('motivational-quotes');
+if (quoteEl) {
+  const today = new Date();
+  const seed = today.toDateString();
+  let hash = 0;
+  for (let i = 0; i < seed.length; i++) {
+    hash = seed.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  const index = Math.abs(hash % quotes.length);
+  quoteEl.textContent = `${quotes[index]}`;
+}