170 lines
10 KiB
HTML
170 lines
10 KiB
HTML
<h2>Layout & Visual Design Direction</h2>
|
|
<p class="subtitle">Your current UI has button toolbars and minimal spacing. Which direction should we take?</p>
|
|
|
|
<div class="split">
|
|
<div class="mockup">
|
|
<div class="mockup-header">Current: Toolbar Style</div>
|
|
<div class="mockup-body" style="font-family: system-ui; font-size: 13px;">
|
|
<div style="display: flex; height: 340px;">
|
|
<!-- Lists -->
|
|
<div style="width: 160px; border-right: 1px solid #444; display:flex; flex-direction:column;">
|
|
<div style="padding: 6px 8px; font-weight: bold; font-size: 13px;">Lists</div>
|
|
<div style="flex:1; padding: 4px;">
|
|
<div style="padding: 6px 8px; background: #3a3a5c; border-radius: 3px; margin-bottom: 2px;">My Project</div>
|
|
<div style="padding: 6px 8px;">Backend Work</div>
|
|
<div style="padding: 6px 8px;">UI Polish</div>
|
|
</div>
|
|
<div style="padding: 6px; border-top: 1px solid #444; display:flex; gap: 4px;">
|
|
<button style="padding: 2px 10px; font-size: 12px; background: #555; color: white; border: 1px solid #666; border-radius: 3px;">+</button>
|
|
<button style="padding: 2px 10px; font-size: 12px; background: #555; color: white; border: 1px solid #666; border-radius: 3px;">E</button>
|
|
<button style="padding: 2px 10px; font-size: 12px; background: #555; color: white; border: 1px solid #666; border-radius: 3px;">-</button>
|
|
</div>
|
|
</div>
|
|
<!-- Tasks -->
|
|
<div style="flex: 1; display:flex; flex-direction:column;">
|
|
<div style="padding: 6px 8px; font-weight: bold; font-size: 13px;">Tasks</div>
|
|
<div style="flex:1; padding: 4px;">
|
|
<div style="padding: 6px; display:flex; justify-content: space-between; align-items: center; margin-bottom: 2px;">
|
|
<div>
|
|
<div style="font-weight: 600;">Fix login bug</div>
|
|
<div style="font-size: 10px; color: #888;">agent</div>
|
|
</div>
|
|
<div style="display:flex; gap: 4px; align-items:center;">
|
|
<span style="background: #e67e22; color: white; padding: 1px 6px; border-radius: 3px; font-size: 11px;">Running</span>
|
|
<button style="padding: 1px 8px; font-size: 11px; background: #555; color: white; border: 1px solid #666; border-radius: 3px;">Run</button>
|
|
</div>
|
|
</div>
|
|
<div style="padding: 6px; display:flex; justify-content: space-between; align-items: center;">
|
|
<div><div style="font-weight: 600;">Add dark mode</div></div>
|
|
<div style="display:flex; gap: 4px; align-items:center;">
|
|
<span style="background: #666; color: white; padding: 1px 6px; border-radius: 3px; font-size: 11px;">Manual</span>
|
|
<button style="padding: 1px 8px; font-size: 11px; background: #555; color: white; border: 1px solid #666; border-radius: 3px;">Run</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="padding: 6px; border-top: 1px solid #444; display:flex; gap: 4px;">
|
|
<button style="padding: 2px 10px; font-size: 12px; background: #555; color: white; border: 1px solid #666; border-radius: 3px;">+ Task</button>
|
|
<button style="padding: 2px 10px; font-size: 12px; background: #555; color: white; border: 1px solid #666; border-radius: 3px;">Edit</button>
|
|
<button style="padding: 2px 10px; font-size: 12px; background: #555; color: white; border: 1px solid #666; border-radius: 3px;">Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mockup">
|
|
<div class="mockup-header">Proposed: To Do Style</div>
|
|
<div class="mockup-body" style="font-family: system-ui; font-size: 13px;">
|
|
<div style="display: flex; height: 340px;">
|
|
<!-- Lists sidebar -->
|
|
<div style="width: 160px; border-right: 1px solid #333; background: #1a1a2e; display:flex; flex-direction:column;">
|
|
<div style="padding: 14px 16px 10px; font-weight: 600; font-size: 14px; color: #94a3b8;">Lists</div>
|
|
<div style="flex:1; padding: 4px 8px;">
|
|
<div style="padding: 10px 12px; background: rgba(99,102,241,0.15); border-radius: 8px; margin-bottom: 4px; color: #a5b4fc; font-weight: 500; display:flex; align-items:center; gap:8px;">
|
|
<span style="width:8px;height:8px;border-radius:50%;background:#6366f1;display:inline-block;"></span>
|
|
My Project
|
|
</div>
|
|
<div style="padding: 10px 12px; border-radius: 8px; display:flex; align-items:center; gap:8px; color: #94a3b8;">
|
|
<span style="width:8px;height:8px;border-radius:50%;background:#22c55e;display:inline-block;"></span>
|
|
Backend Work
|
|
</div>
|
|
<div style="padding: 10px 12px; border-radius: 8px; display:flex; align-items:center; gap:8px; color: #94a3b8;">
|
|
<span style="width:8px;height:8px;border-radius:50%;background:#f59e0b;display:inline-block;"></span>
|
|
UI Polish
|
|
</div>
|
|
</div>
|
|
<div style="padding: 8px 12px; border-top: 1px solid #333;">
|
|
<div style="padding: 8px 12px; color: #6366f1; cursor:pointer; border-radius: 6px; display:flex; align-items:center; gap: 6px; font-size: 13px;">
|
|
<span style="font-size: 16px;">+</span> New List
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Tasks -->
|
|
<div style="flex: 1; display:flex; flex-direction:column; background: #16162a;">
|
|
<div style="padding: 14px 16px 10px; font-weight: 600; font-size: 16px; color: #e2e8f0;">My Project</div>
|
|
<div style="flex:1; padding: 0 8px;">
|
|
<div style="padding: 10px 12px; display:flex; align-items: center; gap: 10px; margin-bottom: 2px; border-radius: 8px; background: rgba(99,102,241,0.08);">
|
|
<div style="width: 20px; height: 20px; border-radius: 50%; border: 2px solid #e67e22; display:flex; align-items:center; justify-content:center; flex-shrink:0;">
|
|
<div style="width:8px;height:8px;border-radius:50%;background:#e67e22;"></div>
|
|
</div>
|
|
<div style="flex:1;">
|
|
<div style="font-weight: 500; color: #e2e8f0;">Fix login bug</div>
|
|
<div style="font-size: 11px; color: #64748b; margin-top: 2px;">agent · Running</div>
|
|
</div>
|
|
</div>
|
|
<div style="padding: 10px 12px; display:flex; align-items: center; gap: 10px; border-radius: 8px;">
|
|
<div style="width: 20px; height: 20px; border-radius: 50%; border: 2px solid #475569; flex-shrink:0;"></div>
|
|
<div style="flex:1;">
|
|
<div style="font-weight: 500; color: #e2e8f0;">Add dark mode</div>
|
|
<div style="font-size: 11px; color: #64748b;">manual</div>
|
|
</div>
|
|
</div>
|
|
<div style="padding: 10px 12px; display:flex; align-items: center; gap: 10px; border-radius: 8px; opacity: 0.5;">
|
|
<div style="width: 20px; height: 20px; border-radius: 50%; border: 2px solid #22c55e; display:flex; align-items:center; justify-content:center; flex-shrink:0;">
|
|
<svg width="12" height="12" viewBox="0 0 12 12"><path d="M2 6l3 3 5-5" stroke="#22c55e" stroke-width="2" fill="none"/></svg>
|
|
</div>
|
|
<div style="flex:1;">
|
|
<div style="font-weight: 500; color: #64748b; text-decoration: line-through;">Setup CI pipeline</div>
|
|
<div style="font-size: 11px; color: #475569;">agent · Done</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Inline add -->
|
|
<div style="padding: 8px 12px; border-top: 1px solid #333;">
|
|
<div style="padding: 10px 14px; border: 1px dashed #475569; border-radius: 8px; color: #64748b; display:flex; align-items: center; gap: 8px; font-size: 13px;">
|
|
<span style="font-size: 16px; color: #6366f1;">+</span> Add a task...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 style="margin-top: 32px;">Key Changes in the Proposed Design</h3>
|
|
<div class="options" data-multiselect>
|
|
<div class="option" data-choice="checkbox" onclick="toggleSelect(this)">
|
|
<div class="letter">1</div>
|
|
<div class="content">
|
|
<h3>Circular Checkboxes</h3>
|
|
<p>Replace status badges with circular checkboxes on the left. Border color reflects status (orange=running, green=done, gray=manual). Click to toggle done.</p>
|
|
</div>
|
|
</div>
|
|
<div class="option" data-choice="inline-add" onclick="toggleSelect(this)">
|
|
<div class="letter">2</div>
|
|
<div class="content">
|
|
<h3>Inline "Add a task" Input</h3>
|
|
<p>Dashed border text field pinned at the bottom of the task list. Always visible. Enter to create, Escape to cancel.</p>
|
|
</div>
|
|
</div>
|
|
<div class="option" data-choice="list-header" onclick="toggleSelect(this)">
|
|
<div class="letter">3</div>
|
|
<div class="content">
|
|
<h3>List Name as Tasks Header</h3>
|
|
<p>Replace generic "Tasks" header with the selected list name in larger text. Matches To Do's pattern.</p>
|
|
</div>
|
|
</div>
|
|
<div class="option" data-choice="sidebar-polish" onclick="toggleSelect(this)">
|
|
<div class="letter">4</div>
|
|
<div class="content">
|
|
<h3>Sidebar Polish</h3>
|
|
<p>Colored dots per list, subtle highlight on selected, "+ New List" link at bottom instead of +/E/- buttons.</p>
|
|
</div>
|
|
</div>
|
|
<div class="option" data-choice="remove-buttons" onclick="toggleSelect(this)">
|
|
<div class="letter">5</div>
|
|
<div class="content">
|
|
<h3>Remove Button Toolbars</h3>
|
|
<p>Eliminate the bottom button bars from both panes. All actions via context menu, keyboard shortcuts, or inline controls.</p>
|
|
</div>
|
|
</div>
|
|
<div class="option" data-choice="done-style" onclick="toggleSelect(this)">
|
|
<div class="letter">6</div>
|
|
<div class="content">
|
|
<h3>Completed Task Styling</h3>
|
|
<p>Done tasks get strikethrough text, reduced opacity, green checkmark. Keeps them visible but visually subordinate.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="subtitle" style="margin-top: 16px;">This is multi-select — pick all the changes you'd like to include. I recommend all 6.</p>
|