259 lines
8.5 KiB
HTML
259 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="theme-light">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>My Tasks — Dealspace</title>
|
|
<link rel="stylesheet" href="../static/themes.css">
|
|
<style>
|
|
/* Page-specific layout */
|
|
.page-layout {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.main-content {
|
|
flex: 1;
|
|
padding: var(--space-lg);
|
|
}
|
|
|
|
.inbox-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--space-lg);
|
|
}
|
|
|
|
.inbox-title {
|
|
font-size: var(--text-2xl);
|
|
font-weight: 700;
|
|
color: var(--color-text-primary);
|
|
margin: 0;
|
|
}
|
|
|
|
.view-select {
|
|
padding: var(--space-sm) var(--space-md);
|
|
font-size: var(--text-sm);
|
|
color: var(--color-text-primary);
|
|
background: var(--color-input-bg);
|
|
border: 1px solid var(--color-input-border);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.task-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
/* Global nav area */
|
|
.global-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-lg);
|
|
margin-left: auto;
|
|
}
|
|
|
|
.inbox-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
padding: var(--space-sm) var(--space-md);
|
|
font-size: var(--text-sm);
|
|
font-weight: 500;
|
|
color: var(--color-header-text);
|
|
background: var(--color-accent);
|
|
border-radius: var(--radius-md);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.user-menu {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: var(--radius-full);
|
|
background: var(--color-bg-tertiary);
|
|
}
|
|
|
|
.user-name {
|
|
font-size: var(--text-sm);
|
|
font-weight: 500;
|
|
color: var(--color-header-text);
|
|
}
|
|
|
|
/* Theme switcher (demo only) */
|
|
.theme-switcher {
|
|
position: fixed;
|
|
bottom: var(--space-lg);
|
|
right: var(--space-lg);
|
|
display: flex;
|
|
gap: var(--space-sm);
|
|
padding: var(--space-sm);
|
|
background: var(--color-card-bg);
|
|
border: 1px solid var(--color-card-border);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.theme-switcher button {
|
|
padding: var(--space-sm) var(--space-md);
|
|
font-size: var(--text-sm);
|
|
border: 1px solid var(--color-border-primary);
|
|
border-radius: var(--radius-md);
|
|
background: var(--color-bg-secondary);
|
|
color: var(--color-text-primary);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.theme-switcher button:hover {
|
|
background: var(--color-bg-tertiary);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page-layout">
|
|
<!-- Global Header -->
|
|
<header class="global-header">
|
|
<div class="logo">Dealspace</div>
|
|
|
|
<!-- Project selector (hidden for single-project workers) -->
|
|
<select class="project-select" aria-label="Select project">
|
|
<option selected>Project Alpha — TargetCo Acquisition</option>
|
|
<option>Project Beta — MergeCo Deal</option>
|
|
<option>Project Gamma — TechStartup Buyout</option>
|
|
</select>
|
|
|
|
<nav class="global-nav">
|
|
<a href="/inbox" class="inbox-link" aria-current="page">
|
|
Inbox
|
|
<span class="badge">3</span>
|
|
</a>
|
|
<div class="user-menu">
|
|
<div class="avatar" role="img" aria-label="User avatar"></div>
|
|
<span class="user-name">S. Johnson</span>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content container">
|
|
<div class="inbox-header">
|
|
<h1 class="inbox-title">My Tasks</h1>
|
|
<select class="view-select" aria-label="Filter tasks">
|
|
<option selected>All Tasks</option>
|
|
<option>Overdue</option>
|
|
<option>Due Today</option>
|
|
<option>Waiting</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="task-list" role="list">
|
|
<!-- Task 1: High priority, overdue -->
|
|
<a href="/p/alpha/r/fin-042" class="task-card" role="listitem">
|
|
<div class="task-card-header">
|
|
<span class="task-card-priority high" aria-label="High priority"></span>
|
|
<span class="task-card-ref">FIN-042</span>
|
|
<span class="task-card-title">Audited financials FY2024</span>
|
|
<span class="task-card-due overdue">
|
|
<span aria-hidden="true">⚠️</span> Overdue: Mar 15
|
|
</span>
|
|
</div>
|
|
<div class="task-card-meta">
|
|
Project Alpha • Finance • From: J. Smith (IB)
|
|
</div>
|
|
<div class="task-card-preview">
|
|
"Please provide audited financial statements including P&L, balance sheet, and cash flow..."
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Task 2: Normal priority, due today -->
|
|
<a href="/p/alpha/r/leg-018" class="task-card" role="listitem">
|
|
<div class="task-card-header">
|
|
<span class="task-card-priority normal" aria-label="Normal priority"></span>
|
|
<span class="task-card-ref">LEG-018</span>
|
|
<span class="task-card-title">Board meeting minutes 2025</span>
|
|
<span class="task-card-due today">Due: Today</span>
|
|
</div>
|
|
<div class="task-card-meta">
|
|
Project Alpha • Legal • From: M. Chen (CFO)
|
|
</div>
|
|
<div class="task-card-preview">
|
|
"Board approval documentation needed for the acquisition committee review..."
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Task 3: Low priority, future -->
|
|
<a href="/p/beta/r/it-007" class="task-card" role="listitem">
|
|
<div class="task-card-header">
|
|
<span class="task-card-priority low" aria-label="Low priority"></span>
|
|
<span class="task-card-ref">IT-007</span>
|
|
<span class="task-card-title">Network architecture diagram</span>
|
|
<span class="task-card-due">Due: Mar 22</span>
|
|
</div>
|
|
<div class="task-card-meta">
|
|
Project Beta • IT • From: L. Park (IB)
|
|
</div>
|
|
<div class="task-card-preview">
|
|
"Provide a current network topology diagram showing all production systems..."
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Task 4: Normal priority, future -->
|
|
<a href="/p/alpha/r/hr-003" class="task-card" role="listitem">
|
|
<div class="task-card-header">
|
|
<span class="task-card-priority normal" aria-label="Normal priority"></span>
|
|
<span class="task-card-ref">HR-003</span>
|
|
<span class="task-card-title">Employee headcount by department</span>
|
|
<span class="task-card-due">Due: Mar 25</span>
|
|
</div>
|
|
<div class="task-card-meta">
|
|
Project Alpha • HR • From: A. Williams (IB)
|
|
</div>
|
|
<div class="task-card-preview">
|
|
"Breakdown of full-time and contract employees by department, including salary bands..."
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Task 5: High priority, future -->
|
|
<a href="/p/alpha/r/fin-045" class="task-card" role="listitem">
|
|
<div class="task-card-header">
|
|
<span class="task-card-priority high" aria-label="High priority"></span>
|
|
<span class="task-card-ref">FIN-045</span>
|
|
<span class="task-card-title">Revenue recognition policy</span>
|
|
<span class="task-card-due">Due: Mar 18</span>
|
|
</div>
|
|
<div class="task-card-meta">
|
|
Project Alpha • Finance • From: J. Smith (IB)
|
|
</div>
|
|
<div class="task-card-preview">
|
|
"Document your revenue recognition policy and any changes in the past 3 years..."
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Theme Switcher (demo/testing only) -->
|
|
<div class="theme-switcher" aria-label="Theme switcher">
|
|
<button onclick="document.documentElement.className='theme-light'">Light</button>
|
|
<button onclick="document.documentElement.className='theme-dark'">Dark</button>
|
|
<button onclick="document.documentElement.className='theme-contrast'">Contrast</button>
|
|
</div>
|
|
|
|
<!-- Empty State (hidden - shown when no tasks) -->
|
|
<!--
|
|
<div class="empty-state">
|
|
<div class="empty-state-icon">✓</div>
|
|
<h2 class="empty-state-title">You're all caught up</h2>
|
|
<p class="empty-state-text">No tasks need your attention right now.</p>
|
|
</div>
|
|
-->
|
|
</body>
|
|
</html>
|