Update app.py

app.py

@@ -7,20 +7,20 @@ HTML_APP = """
   #planner-root {
     font-family: 'Vazirmatn', sans-serif;
     direction: rtl;
-    background: #0d1117;
-    color: #e6edf3;
+    background: #f5f7fa;
+    color: #1a202c;
     padding: 32px 20px 60px;
     min-height: 100vh;
   }
   #planner-root h1 {
     text-align: center;
     font-size: 2rem; font-weight: 800;
-    background: linear-gradient(135deg, #58a6ff, #bc8cff);
+    background: linear-gradient(135deg, #4f46e5, #7c3aed);
     -webkit-background-clip: text; -webkit-text-fill-color: transparent;
     margin: 0 0 6px;
   }
   #planner-root .sub {
-    text-align: center; color: #8b949e;
+    text-align: center; color: #718096;
     font-size: 0.88rem; margin-bottom: 28px;
   }
   .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@@ -28,12 +28,12 @@ HTML_APP = """
 
   .field label {
     display: block; font-size: 0.85rem; font-weight: 600;
-    color: #8b949e; margin-bottom: 6px;
+    color: #4a5568; margin-bottom: 6px;
   }
   .field textarea, .field input {
-    width: 100%; background: #161b22;
-    border: 1px solid #30363d; border-radius: 8px;
-    color: #e6edf3; font-family: 'Vazirmatn', sans-serif;
+    width: 100%; background: #ffffff;
+    border: 1px solid #cbd5e0; border-radius: 8px;
+    color: #1a202c; font-family: 'Vazirmatn', sans-serif;
     font-size: 0.95rem; padding: 10px 12px;
     transition: border-color .2s, box-shadow .2s;
     resize: vertical;
@@ -41,65 +41,67 @@ HTML_APP = """
   .field textarea { min-height: 80px; }
   .field input[type=password] { height: 44px; }
   .field textarea:focus, .field input:focus {
-    outline: none; border-color: #58a6ff;
-    box-shadow: 0 0 0 3px rgba(88,166,255,.12);
+    outline: none; border-color: #667eea;
+    box-shadow: 0 0 0 3px rgba(102,126,234,.15);
   }
 
   #startBtn {
     width: 100%; padding: 13px;
-    background: linear-gradient(135deg, #7c3aed, #4f46e5);
+    background: linear-gradient(135deg, #667eea, #764ba2);
     border: none; border-radius: 8px; color: #fff;
     font-family: 'Vazirmatn', sans-serif;
     font-weight: 700; font-size: 1.05rem;
     cursor: pointer; margin-bottom: 24px;
-    box-shadow: 0 4px 18px rgba(124,58,237,.35);
+    box-shadow: 0 4px 18px rgba(102,126,234,.35);
     transition: all .2s;
   }
-  #startBtn:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
+  #startBtn:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
   #startBtn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
 
   .step {
     border-radius: 10px; margin: 10px 0;
-    border: 1px solid #21262d; overflow: hidden;
+    border: 1px solid #e2e8f0; overflow: hidden;
     transition: border-color .3s, box-shadow .3s;
+    background: #ffffff;
   }
-  .step.s-pending { opacity: .4; }
-  .step.s-active  { border-color: #58a6ff; box-shadow: 0 0 0 3px rgba(88,166,255,.1); }
-  .step.s-done    { border-color: #238636; }
-  .step.s-error   { border-color: #f85149; }
+  .step.s-pending { opacity: .45; }
+  .step.s-active  { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102,126,234,.12); }
+  .step.s-done    { border-color: #48bb78; }
+  .step.s-error   { border-color: #fc8181; }
 
   .step-hd {
     display: flex; align-items: center; gap: 10px;
     padding: 12px 16px; font-weight: 600; font-size: .93rem;
-    background: #161b22;
+    background: #f7fafc; color: #2d3748;
+    border-bottom: 1px solid #e2e8f0;
   }
-  .step.s-active .step-hd  { background: #1c2a3a; color: #58a6ff; }
-  .step.s-done   .step-hd  { background: #0f2d16; color: #3fb950; }
-  .step.s-error  .step-hd  { background: #2d1515; color: #f85149; }
+  .step.s-active .step-hd  { background: #ebf4ff; color: #3c5fb8; border-color: #bee3f8; }
+  .step.s-done   .step-hd  { background: #f0fff4; color: #276749; border-color: #c6f6d5; }
+  .step.s-error  .step-hd  { background: #fff5f5; color: #c53030; border-color: #fed7d7; }
 
   .step-body {
-    padding: 14px 16px; font-size: .87rem; line-height: 1.85;
-    background: #0d1117; color: #c9d1d9;
-    border-top: 1px solid #21262d;
+    padding: 14px 16px; font-size: .88rem; line-height: 1.85;
+    background: #ffffff; color: #2d3748;
     white-space: pre-wrap; display: none;
   }
   .step.s-active .step-body,
   .step.s-done   .step-body,
   .step.s-error  .step-body { display: block; }
-  .step.s-active .step-body { color: #8b949e; font-style: italic; }
+  .step.s-active .step-body { color: #a0aec0; font-style: italic; }
+  .step.s-error  .step-body { color: #c53030; }
 
   @keyframes spin { to { transform: rotate(360deg); } }
   .spin-icon { display: inline-block; animation: spin 1s linear infinite; }
 
   #doneBanner {
     text-align: center; margin-top: 18px; padding: 15px;
-    background: #0f2d16; border: 1px solid #238636;
-    border-radius: 10px; color: #3fb950;
+    background: #f0fff4; border: 1px solid #68d391;
+    border-radius: 10px; color: #276749;
     font-weight: 700; font-size: 1rem; display: none;
   }
   #errBox {
-    background: #2d1515; border: 1px solid #f85149;
-    color: #f85149; padding: 12px 16px; border-radius: 8px;
+    background: #fff5f5; border: 1px solid #fc8181;
+    color: #c53030; padding: 12px 16px; border-radius: 8px;
     font-weight: 600; margin-bottom: 14px; display: none;
     font-size: .9rem;
   }
@@ -156,23 +158,24 @@ const STEPS = [
   }
 ];
 
-function setStep(idx, state, bodyText) {
+function buildSteps() {
   const area = document.getElementById("stepsArea");
-  // build if needed
-  if (area.children.length === 0) {
-    STEPS.forEach((s, i) => {
-      const d = document.createElement("div");
-      d.className = "step s-pending";
-      d.id = "step-" + i;
-      d.innerHTML = `<div class="step-hd"><span class="icon">⬜</span>&nbsp;${s.title}</div><div class="step-body"></div>`;
-      area.appendChild(d);
-    });
-  }
+  area.innerHTML = "";
+  STEPS.forEach((s, i) => {
+    const d = document.createElement("div");
+    d.className = "step s-pending";
+    d.id = "step-" + i;
+    d.innerHTML = `<div class="step-hd"><span>⬜</span>&nbsp;${s.title}</div><div class="step-body"></div>`;
+    area.appendChild(d);
+  });
+}
+
+function setStep(idx, state, bodyText) {
   const el = document.getElementById("step-" + idx);
   if (!el) return;
   el.className = "step s-" + state;
   const icons = { pending:"⬜", active:'<span class="spin-icon">⏳</span>', done:"✅", error:"❌" };
-  el.querySelector(".step-hd").innerHTML = `<span class="icon">${icons[state]}</span>&nbsp;${STEPS[idx].title}`;
+  el.querySelector(".step-hd").innerHTML = `<span>${icons[state]}</span>&nbsp;${STEPS[idx].title}`;
   if (bodyText !== undefined) el.querySelector(".step-body").textContent = bodyText;
 }
 
@@ -209,7 +212,6 @@ async function startPlanning() {
   const btn = document.getElementById("startBtn");
   document.getElementById("errBox").style.display = "none";
   document.getElementById("doneBanner").style.display = "none";
-  document.getElementById("stepsArea").innerHTML = "";
 
   if (!goal)   { showErr("هدف را وارد کنید"); return; }
   if (!apiKey) { showErr("API Key را وارد کنید"); return; }
@@ -217,8 +219,7 @@ async function startPlanning() {
   btn.disabled = true;
   btn.textContent = "⏳ در حال برنامه‌ریزی...";
 
-  // init all as pending
-  STEPS.forEach((_,i) => setStep(i, "pending", ""));
+  buildSteps();
 
   const ctx = { goal };
   for (let i = 0; i < STEPS.length; i++) {