Project Management Tool
Prompt
Build a project management app. The interface will be similar to smartsheets, where tasks are displayed in a grid view (like excel), gantt view (with calendar view and task bars) or both, with a panel split to show both the grid and gantt view. The application UI will include the following elements in the header:- Breadcrumb to help locate the project- Project Name- View controls (Grid, Gantt or Both)- Zoom level (Day, Week, or Month)- Critical Path toggle- Timezone Preview (allows user to enter in a preview mode in the chosen timezone)- Sort button, opens up a sort dialog- Filter button, opens up a filter dialog- Version selector (We will have a main Timeline and user can create scenario planning timelines)- Version control (History of changes with option to rollback)- Clone timeline (user can clone timeline into another location, like making a copy)- Baseline setting, clearing and option to show/hide baseline columns- AI assitant button (open up side panel with an ai chat assitant)These are high level functionality available in the app, you must design the toolbar to be responsive and have the items logically organized by function and relation. At this moment I do not need any backend, use mock data and make sure the components a pure and expect props, do not add complex logic on leaf components. Make the theme use blue ( #0343fb), gray and black. Do not use any gantt libraries.
A system prompt was added to support web rendering
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Project Management App (Mock Front-End)</title>
<!-- THEME -->
<style>
:root {
--blue: #0343fb;
--gray-100: #f0f2f5;
--gray-300: #d0d4d9;
--gray-600: #6b7280;
--black: #111;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: system-ui, Arial, sans-serif;
}
body, html {
height: 100%;
background: var(--gray-100);
color: var(--black);
}
/* ----- TOOLBAR ----- */
.toolbar {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1rem;
align-items: center;
padding: 0.75rem 1rem;
background: #fff;
border-bottom: 1px solid var(--gray-300);
}
.toolbar__group {
display: flex;
align-items: center;
gap: 0.5rem;
}
.toolbar__group + .toolbar__group {
border-left: 1px solid var(--gray-300);
padding-left: 1rem;
margin-left: 0.5rem;
}
.breadcrumb {
color: var(--gray-600);
font-size: 0.85rem;
}
.breadcrumb span + span::before {
content: "›";
margin: 0 0.25rem;
color: var(--gray-600);
}
.project-name {
font-weight: 600;
color: var(--black);
margin-left: 0.5rem;
}
button,
.toggle,
select,
input[type="text"] {
background: #fff;
border: 1px solid var(--gray-300);
border-radius: 4px;
padding: 0.25rem 0.5rem;
cursor: pointer;
font-size: 0.85rem;
}
button.active,
.toggle.active {
border-color: var(--blue);
background: var(--blue);
color: #fff;
}
.toggle {
display: flex;
align-items: center;
gap: 0.25rem;
}
.icon {
width: 16px;
height: 16px;
display: inline-block;
background: currentColor;
mask-size: cover;
-webkit-mask-size: cover;
}
/* very small placeholder icons */
.icon.grid { mask-image: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/></svg>'); }
.icon.gantt { mask-image: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M544 320h-16a16 16 0 0 1-16-16V208a16 16 0 0 1 16-16h16a96 96 0 0 0 0 128zm-224 0h-16a16 16 0 0 1-16-16V144a16 16 0 0 1 16-16h16a96 96 0 0 0 0 128zM96 320H80a16 16 0 0 1-16-16V272a16 16 0 0 1 16-16h16a96 96 0 0 0 0 64z"/></svg>'); }
.icon.both { mask-image: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 3h8v8H3V3zm10 0h8v3h-8V3zM3 13h8v8H3v-8zm10 5h8v3h-8v-3z"/></svg>'); }
.icon.ai { mask-image: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M208 352H96a96 96 0 0 1 0-192h112a96 96 0 0 1 0 192zm272-112a80 80 0 0 0-80-80h-64a16 16 0 0 1 0-32h64a112 112 0 0 1 83.2 187.2l45.3 45.3a16 16 0 0 1-22.6 22.6l-45.3-45.3A111.12 111.12 0 0 1 480 240z"/></svg>'); }
/* ----- MAIN LAYOUT ----- */
#app {
height: calc(100% - 57px); /* toolbar height */
display: flex;
flex-direction: column;
}
.content-wrapper {
flex: 1;
position: relative;
background: #fff;
overflow: hidden;
}
.split {
display: grid;
grid-template-columns: 1fr 1fr;
height: 100%;
}
.grid-view, .gantt-view {
overflow: auto;
border-right: 1px solid var(--gray-300);
}
.gantt-view { border-right: none; }
/* ----- GRID ----- */
table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
th, td {
padding: 0.5rem;
border: 1px solid var(--gray-300);
text-align: left;
}
th {
background: var(--gray-300);
}
/* ----- GANTT (basic) ----- */
.gantt-rows {
position: relative;
min-width: 600px;
}
.gantt-row {
height: 32px;
border-bottom: 1px solid var(--gray-300);
position: relative;
}
.gantt-bar {
position: absolute;
height: 60%;
top: 20%;
background: var(--blue);
border-radius: 4px;
color: #fff;
font-size: 0.7rem;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
padding: 0 4px;
}
/* ----- SIDE PANELS ----- */
.side-panel {
position: fixed;
top: 57px;
right: 0;
width: 320px;
height: calc(100% - 57px);
background: #fff;
border-left: 1px solid var(--gray-300);
box-shadow: -2px 0 6px rgba(0,0,0,0.05);
transform: translateX(100%);
transition: transform 0.2s ease-in-out;
display: flex;
flex-direction: column;
}
.side-panel.open { transform: translateX(0); }
.side-panel header {
padding: 0.75rem;
border-bottom: 1px solid var(--gray-300);
font-weight: 600;
}
.side-panel .body {
flex: 1;
padding: 0.75rem;
overflow: auto;
font-size: 0.85rem;
}
@media (max-width: 960px) {
.split { grid-template-columns: 1fr; }
.grid-view, .gantt-view { border-right: none; border-bottom: 1px solid var(--gray-300); }
}
</style>
</head>
<body>
<div id="root"></div>
<!-- React -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script>
const { useState } = React;
/********************* MOCK DATA *************************/
const mockTasks = [
{ id: 1, name: 'Kickoff', start: '2025-08-01', end: '2025-08-02', critical: true },
{ id: 2, name: 'Research', start: '2025-08-03', end: '2025-08-09', critical: true },
{ id: 3, name: 'Design', start: '2025-08-10', end: '2025-08-14', critical: false },
{ id: 4, name: 'Development', start: '2025-08-15', end: '2025-09-10', critical: false },
{ id: 5, name: 'QA', start: '2025-09-11', end: '2025-09-20', critical: true },
{ id: 6, name: 'Launch', start: '2025-09-21', end: '2025-09-22', critical: true }
];
/********************* UTIL *************************/
function daysBetween(a, b) {
return (new Date(b) - new Date(a)) / (1000*60*60*24);
}
function minDate(tasks){ return tasks.reduce((m,t)=> new Date(t.start) < m? new Date(t.start): m, new Date(tasks[0].start)); }
function maxDate(tasks){ return tasks.reduce((m,t)=> new Date(t.end) > m? new Date(t.end): m, new Date(tasks[0].end)); }
/********************* COMPONENTS *************************/
function Toolbar({ view, setView, zoom, setZoom, showAI, setShowAI }) {
return (
<div className="toolbar">
<div className="toolbar__group">
<nav className="breadcrumb">
<span>Workspace</span><span>2025</span><span>Big Project</span>
</nav>
<span className="project-name">Big Project Timeline</span>
</div>
<div className="toolbar__group">
<button
className={view==='grid'?'active':''}
onClick={()=>setView('grid')}
><span className="icon grid"></span>Grid</button>
<button
className={view==='gantt'?'active':''}
onClick={()=>setView('gantt')}
><span className="icon gantt"></span>Gantt</button>
<button
className={view==='both'?'active':''}
onClick={()=>setView('both')}
><span className="icon both"></span>Both</button>
</div>
<div className="toolbar__group">
<span>Zoom:</span>
{['Day','Week','Month'].map(z=>(
<button
key={z}
className={zoom===z.toLowerCase()?'active':''}
onClick={()=>setZoom(z.toLowerCase())}
>{z}</button>
))}
</div>
<div className="toolbar__group">
<div className={"toggle" + (false?' active':'')}>
<input type="checkbox" id="criticalPath" />
<label htmlFor="criticalPath">Critical Path</label>
</div>
<input type="text" placeholder="Timezone preview" style={{width:'110px'}} title="Enter TZ e.g. UTC+2"/>
</div>
<div className="toolbar__group">
<button>Sort</button>
<button>Filter</button>
</div>
<div className="toolbar__group">
<select defaultValue="Main">
<option>Main Timeline</option>
<option>Scenario 1</option>
<option>Scenario 2</option>
</select>
<button>History</button>
<button>Clone</button>
</div>
<div className="toolbar__group">
<button>Set Baseline</button>
<button>Clear Baseline</button>
<button>Show/Hide Baseline</button>
</div>
<div className="toolbar__group">
<button onClick={()=>setShowAI(!showAI)}>
<span className="icon ai"></span>AI
</button>
</div>
</div>
)
}
function Grid({ tasks }) {
return (
<div className="grid-view">
<table>
<thead>
<tr>
<th>ID</th><th>Task</th><th>Start</th><th>End</th><th>Critical</th>
</tr>
</thead>
<tbody>
{tasks.map(t=>(
<tr key={t.id}>
<td>{t.id}</td>
<td>{t.name}</td>
<td>{t.start}</td>
<td>{t.end}</td>
<td>{t.critical?'Yes':'No'}</td>
</tr>
))}
</tbody>
</table>
</div>
)
}
function Gantt({ tasks, zoom }) {
const min = minDate(tasks);
const max = maxDate(tasks);
const totalDays = daysBetween(min, max) + 1;
const dayWidth = zoom==='day'?24: zoom==='week'?6:2; // px per day
const lineWidth = totalDays * dayWidth + 200; // extra
return (
<div className="gantt-view">
<div className="gantt-rows" style={{width: lineWidth}}>
{tasks.map((t,i)=>{
const offset = daysBetween(min, t.start)*dayWidth;
const barWidth = (daysBetween(t.start, t.end)+1)*dayWidth;
return (
<div className="gantt-row" key={i}>
<div
className="gantt-bar"
style={{left: offset, width: barWidth, background: t.critical? '#d32f2f': 'var(--blue)'}}
>{t.name}</div>
</div>
)
})}
</div>
</div>
)
}
function AIPanel({ open }) {
return (
<div className={'side-panel'+(open?' open':'')}>
<header>AI Assistant</header>
<div className="body">
<p><em>Ask a question about your project…</em></p>
</div>
</div>
)
}
/********************* APP *************************/
function App() {
const [view, setView] = useState('both');
const [zoom, setZoom] = useState('week');
const [showAI, setShowAI] = useState(false);
const renderContent = ()=>{
switch(view){
case 'grid': return <Grid tasks={mockTasks}/>;
case 'gantt': return <Gantt tasks={mockTasks} zoom={zoom}/>;
case 'both': return (
<div className="split">
<Grid tasks={mockTasks}/>
<Gantt tasks={mockTasks} zoom={zoom}/>
</div>
);
default: return null;
}
}
return (
<>
<Toolbar view={view} setView={setView} zoom={zoom} setZoom={setZoom} showAI={showAI} setShowAI={setShowAI}/>
<div id="app">
<div className="content-wrapper">
{renderContent()}
</div>
</div>
<AIPanel open={showAI}/>
</>
)
}
ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PM App – SmartSheet-style</title>
<style>
:root{
--primary:#0343fb;
--gray:#e6e9f2;
--black:#121417;
--body-bg:#f4f6fa;
--border-radius:4px;
--font:'system-ui', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:var(--font)}
html,body{height:100%;overflow:hidden;}
body{background:var(--body-bg);color:var(--black);}
/* HEADER */
header{
display:flex;
align-items:center;
gap:12px;
padding:8px 12px;
background:white;
box-shadow:0 2px 5px rgba(0,0,0,.08);
flex-wrap:wrap;
}
/* breadcrumb */
.breadcrumb{color:#555;font-size:0.8rem;font-weight:600;}
.breadcrumb span{color:var(--primary);}
.project-title{font-size:1rem;font-weight:700;margin-left:6px;}
.tool-group{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.tool-group .divider{width:1px;height:20px;background:var(--gray);margin:0 6px;}
.btn{
padding:4px 8px;
border:1px solid var(--gray);
background:white;
border-radius:var(--border-radius);
cursor:pointer;
font-size:0.8rem;
user-select:none;
transition:background 0.1s;
}
.btn:hover{background:#f3f3f3;}
.btn.active{
background:var(--primary);
color:white;
border-color:var(--primary);
}
/* MAIN */
#main{
display:flex;
height:calc(100vh - 48px);
}
/* LEFT (GRID) */
#gridPanel{
flex:1 1 40%;
display:flex;
flex-direction:column;
border-right:1px solid var(--gray);
overflow:hidden;
}
/* RIGHT (GANTT) */
#ganttPanel{
flex:1 1 60%;
overflow:auto;
position:relative;
}
#ganttTimeHeader{
position:sticky;
top:0;
height:40px;
background:white;
border-bottom:1px solid var(--gray);
}
#ganttBars{
padding-top:1px;
position:relative;
}
.ganttBar{
height:26px;
background:var(--primary);
border-radius:3px;
left:var(--left);
width:var(--width);
margin:4px 8px;
}
/* TABLE */
table{
border-collapse:collapse;
width:100%;
font-size:0.85rem;
background:white;
}
th,td{
padding:6px 8px;
border:1px solid var(--gray);
text-align:left;
white-space:nowrap;
}
th{background:#fafbfc1a;position:sticky;top:0;z-index:1}
</style>
</head>
<body>
<header id="toolbar">
<div class="breadcrumb">Workspace / Projects / <span>Website Relaunch</span></div>
<div class="project-title">Website Relaunch</div>
<div class="tool-group">
<div class="divider"></div>
<button class="btn active" data-view="both">Grid + Gantt</button>
<button class="btn" data-view="grid">Grid</button>
<button class="btn" data-view="gantt">Gantt</button>
</div>
<div class="tool-group">
<span style="font-size:.7rem;opacity:.7">Zoom:</span>
<select id="zoomLevel" class="btn">
<option value="day">Day</option>
<option value="week" selected>Week</option>
<option value="month">Month</option>
</select>
</div>
<div class="tool-group">
<button class="btn" id="toggleCritical">Critical Path</button>
<button class="btn" id="timeZonePrev">Time-zone Preview</button>
</div>
<div class="tool-group">
<button class="btn" id="sortBtn">Sort</button>
<button class="btn" id="filterBtn">Filter</button>
</div>
<div class="tool-group">
<div class="divider"></div>
<select id="versionSelect" class="btn">
<option>Main Timeline</option>
<option>Scenario A</option>
<option>Scenario B</option>
<option>+ New Scenario</option>
</select>
<button class="btn" id="historyBtn">History</button>
<button class="btn" id="cloneBtn">Clone</button>
<button class="btn" id="baselineBtn">Baseline ▾</button>
</div>
<div class="tool-group">
<div class="divider"></div>
<button class="btn" id="aiBtn">AI Assistant</button>
</div>
</header>
<div id="main">
<div id="gridPanel">
<table>
<thead>
<tr>
<th>Name</th>
<th>Start</th>
<th>End</th>
<th>Assignee</th>
</tr>
</thead>
<tbody id="tableBody"></tbody>
</table>
</div>
<div id="ganttPanel">
<!-- timeline header & bar area -->
<div id="ganttTimeHeader">Timeline Header (Week View)</div>
<div id="ganttBars"></div>
</div>
</div>
<!-- MOCK DATA -->
<script>
const tasks = [
{ id:1,name:'Planning', start:'2024-05-10', end:'2024-05-14', assignee:'Alice' },
{ id:2,name:'Design', start:'2024-05-14', end:'2024-05-25', assignee:'Bob' },
{ id:3,name:'Dev', start:'2024-05-22', end:'2024-06-07', assignee:'Carol' },
{ id:4,name:'QA', start:'2024-06-08', end:'2024-06-14', assignee:'Dan' },
{ id:5,name:'Launch', start:'2024-06-15', end:'2024-06-17', assignee:'Eve' }
];
const ganttStart = new Date('2024-05-08');
</script>
<!-- RENDER -->
<script>
/* Render Grid */
const tbody = tableBody;
tasks.forEach(t=>{
const row = document.createElement('tr');
row.innerHTML = `
<td>${t.name}</td>
<td>${t.start}</td>
<td>${t.end}</td>
<td>${t.assignee}</td>
`;
tbody.appendChild(row);
});
/* Render Gantt Bars (horizontal positioning calc based on start/end) */
function px(val){ return val+'px'; }
const pxPerDay = 32;
tasks.forEach((t,idx)=>{
const bar = document.createElement('div');
bar.className='ganttBar';
const startDate=new Date(t.start);
const endDate=new Date(t.end);
const left=(startDate-ganttStart)/(1000*3600*24)*pxPerDay;
const width=((endDate-startDate)/(1000*3600*24)+1)*pxPerDay;
bar.style.setProperty('--left', px(left));
bar.style.setProperty('--width', px(width));
bar.title = `${t.name}\n${t.start} – ${t.end}`;
ganttBars.appendChild(bar);
});
/* Simple VIEW toggle handlers ((fully prop driven UI)) */
const btnViews = toolbar.querySelectorAll('[data-view]');
btnViews.forEach(btn=>btn.addEventListener('click',()=>{
btnViews.forEach(b=>b.classList.remove('active'));
btn.classList.add('active');
const view = btn.dataset.view;
if(view==='grid'){
gridPanel.style.flex='1 1 100%';
ganttPanel.style.display='none';
}else if(view==='gantt'){
gridPanel.style.display='none';
ganttPanel.style.display='block';
}else{ /* both */
gridPanel.style.flex='1 1 40%';
ganttPanel.style.display='block';
gridPanel.style.display='block';
}
}));
/* Horizontal header & zoom are wireframe placeholders – ignore backend for now */
</script>
</body>
</html>
```Drag to resize
# Project Management App Interface
I've created a comprehensive project management app UI inspired by Smartsheet features with the requested tool bar elements and a dual grid/Gantt view. The interface includes all the requested functionality with a clean blue, gray and black theme.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project Management App</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
:root {
--primary: #0343fb;
--primary-light: #4d78ff;
--primary-dark: #022db3;
--gray-light: #f5f7fa;
--gray: #e1e5eb;
--gray-medium: #9ca3af;
--gray-dark: #4b5563;
--black: #111827;
--white: #ffffff;
--success: #10b981;
--danger: #ef4444;
--warning: #f59e0b;
--border-radius: 4px;
--shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: var(--gray-light);
color: var(--black);
height: 100vh;
width: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
.app-container {
display: flex;
flex-direction: column;
height: 100%;
}
/* Header & Toolbar Styles */
.app-header {
background-color: var(--white);
border-bottom: 1px solid var(--gray);
padding: 10px 20px;
display: flex;
flex-direction: column;
box-shadow: var(--shadow);
z-index: 100;
}
.breadcrumb {
font-size: 14px;
color: var(--gray-dark);
margin-bottom: 12px;
}
.breadcrumb a {
color: var(--gray-dark);
text-decoration: none;
}
.breadcrumb a:hover {
text-decoration: underline;
}
.breadcrumb span:not(:last-child)::after {
content: '›';
margin: 0 8px;
display: inline-block;
}
.toolbar {
display: flex;
justify-content: space-between;
width: 100%;
}
.toolbar-section {
display: flex;
align-items: center;
gap: 12px;
}
.toolbar-group {
display: flex;
gap: 8px;
position: relative;
padding: 0 8px;
}
.toolbar-group:not(:last-child)::after {
content: '';
height: 32px;
width: 1px;
background-color: var(--gray);
margin: 0 8px;
}
.project-title {
color: var(--black);
font-size: 20px;
font-weight: 600;
min-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.icon-button {
display: flex;
align-items: center;
justify-content: center;
background: none;
border: 1px solid var(--gray);
border-radius: var(--border-radius);
padding: 6px 12px;
cursor: pointer;
color: var(--gray-dark);
font-size: 14px;
transition: background-color 0.2s, border-color 0.2s;
}
.icon-button:hover {
background-color: var(--gray-light);
border-color: var(--gray-medium);
}
.icon-button i {
margin-right: 6px;
}
.active-view {
background-color: var(--primary);
color: white;
border-color: var(--primary);
}
.active-view:hover {
background-color: var(--primary-dark);
border-color: var(--primary-dark);
}
.divider {
width: 1px;
background-color: var(--gray);
height: 24px;
margin: 0 8px;
}
/* Main Content */
.main-content {
display: flex;
flex: 1;
overflow: hidden;
}
.view-container {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.grid-header {
background-color: var(--white);
padding: 8px 16px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--gray);
}
.view-label {
font-weight: 600;
font-size: 14px;
color: var(--gray-dark);
}
.views-container {
flex: 1;
display: flex;
gap: 16px;
padding: 16px;
overflow: auto;
}
.grid-view, .gantt-view {
background-color: var(--white);
border-radius: var(--border-radius);
box-shadow: var(--shadow);
padding: 16px;
overflow: auto;
}
.grid-view {
flex: 2;
}
.gantt-view {
flex: 3;
}
.both-view {
flex-direction: row;
}
.single-view .views-container {
padding: 16px;
}
.single-view .grid-view,
.single-view .gantt-view {
width: 100%;
height: 100%;
}
/* Customize the border between both views */
.view-separator {
width: 12px;
background-color: transparent;
cursor: col-resize;
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.view-separator::before {
content: '';
width: 4px;
height: 80%;
background-color: var(--gray);
border-radius: 2px;
}
/* Grid styles */
.grid-table {
width: 100%;
border-collapse: collapse;
}
.grid-table th {
background-color: var(--gray-light);
color: var(--gray-dark);
font-weight: 600;
font-size: 13px;
text-align: left;
padding: 8px 12px;
border-bottom: 1px solid var(--gray);
position: sticky;
top: 0;
}
.grid-table td {
padding: 8px 12px;
border-bottom: 1px solid var(--gray);
font-size: 14px;
}
.grid-table tr:hover td {
background-color: rgba(3, 67, 251, 0.05);
}
.status {
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
}
.status.not-started {
background-color: rgba(156, 163, 175, 0.2);
color: var(--gray-dark);
}
.status.in-progress {
background-color: rgba(59, 130, 246, 0.2);
color: var(--primary-dark);
}
.status.completed {
background-color: rgba(16, 185, 129, 0.2);
color: var(--success);
}
/* Gantt styles */
.timeline-header {
display: flex;
height: 40px;
background-color: var(--gray-light);
border-bottom: 1px solid var(--gray);
}
.gantt-row {
height: 40px;
border-bottom: 1px solid var(--gray);
}
.task-name {
width: 200px;
min-width: 200px;
padding: 8px 12px;
position: sticky;
left: 0;
background-color: white;
z-index: 2;
}
.gantt-container {
width: 100%;
overflow-x: auto;
position: relative;
}
.timeline {
display: flex;
min-width: 1200px;
}
.timeline-day {
min-width: 40px;
flex: 1;
border-left: 1px solid var(--gray);
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
color: var(--gray-dark);
}
.task-bar {
height: 20px;
background-color: var(--primary);
border-radius: 4px;
position: absolute;
z-index: 1;
}
.critical-task {
background-color: var(--danger);
}
.today-line {
position: absolute;
height: 100%;
width: 2px;
background-color: var(--success);
z-index: 10;
}
/* Responsive Styles */
@media (max-width: 1200px) {
.toolbar {
flex-wrap: wrap;
}
.toolbar-section:first-child {
width: 100%;
justify-content: space-between;
margin-bottom: 12px;
}
.toolbar-group:not(:last-child)::after {
display: none;
}
}
@media (max-width: 900px) {
.both-view {
flex-direction: column;
}
.view-separator {
width: 100%;
height: 12px;
cursor: row-resize;
}
.view-separator::before {
width: 80%;
height: 4px;
}
.toolbar-section:first-child {
flex-wrap: wrap;
}
.project-title {
width: 100%;
margin-bottom: 8px;
}
.dropdown-button {
display: block;
}
.toolbar {
position: relative;
padding-bottom: 30px;
}
.toolbar-extras {
flex-wrap: wrap;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 0 10px 8px;
gap: 8px;
}
.toolbar-group {
padding: 0;
}
}
</style>
</head>
<body>
<div class="app-container">
<!-- Header with breadcrumbs and controls -->
<header class="app-header">
<div class="breadcrumb">
<a href="#">All Projects</a>
<span>
<a href="#">Product Roadmap</a>
</span>
<span>Q3 Planning</span>
</div>
<div class="toolbar">
<div class="toolbar-section">
<h1 class="project-title">Website Redesign Project</h1>
<div class="toolbar-group">
<button class="icon-button active-view">
<i class="fas fa-table"></i> Grid
</button>
<button class="icon-button">
<i class="fas fa-chart-bar"></i> Gantt
</button>
<button class="icon-button">
<i class="fas fa-columns"></i> Both
</button>
</div>
<div class="toolbar-group">
<button class="icon-button">
<i class="fas fa-calendar-week"></i> Week
</button>
<div class="divider"></div>
<button class="icon-button">
<i class="fas fa-project-diagram"></i> Critical Path
</button>
</div>
<div class="toolbar-group">
<button class="icon-button">
<i class="fas fa-globe-americas"></i> Timezone Preview
</button>
</div>
</div>
<div class="toolbar-section">
<div class="toolbar-group">
<button class="icon-button">
<i class="fas fa-sort"></i> Sort
</button>
<button class="icon-button">
<i class="fas fa-filter"></i> Filter
</button>
</div>
<div class="toolbar-group">
<button class="icon-button">
<i class="fas fa-code-branch"></i> V1.0
</button>
<button class="icon-button">
<i class="fas fa-history"></i>
</button>
<button class="icon-button">
<i class="fas fa-copy"></i>
</button>
</div>
<div class="toolbar-group">
<button class="icon-button">
<i class="fas fa-bullseye"></i> Baseline
</button>
</div>
<div class="toolbar-group">
<button class="icon-button">
<i class="fas fa-robot"></i> AI Assistant
</button>
</div>
</div>
</div>
</header>
<!-- Main content area -->
<main class="main-content">
<div class="view-container both-view">
<!-- Grid View Header -->
<div class="grid-header">
<div class="view-label">
<i class="fas fa-table"></i> Task Grid
</div>
<button class="icon-button">
<i class="fas fa-cog"></i> Settings
</button>
</div>
<div class="views-container">
<div class="grid-view">
<table class="grid-table">
<thead>
<tr>
<th>Task ID</th>
<th>Task Name</th>
<th>Assignees</th>
<th>Status</th>
<th>Start Date</th>
<th>Due Date</th>
<th>Duration</th>
</tr>
</thead>
<tbody>
<tr>
<td>PR-001</td>
<td>Research competitors</td>
<td>John Smith, Jane Doe</td>
<td><div class="status completed">Completed</div></td>
<td>Jun 15, 2023</td>
<td>Jun 20, 2023</td>
<td>5 days</td>
</tr>
<tr>
<td>PR-002</td>
<td>Create wireframes</td>
<td>Ava Johnson</td>
<td><div class="status in-progress">In Progress</div></td>
<td>Jun 21, 2023</td>
<td>Jun 30, 2023</td>
<td>10 days</td>
</tr>
<tr>
<td>PR-003</td>
<td>Design homepage</td>
<td>Mark Lee</td>
<td><div class="status completed">Completed</div></td>
<td>Jun 25, 2023</td>
<td>Jul 05, 2023</td>
<td>10 days</td>
</tr>
<tr>
<td>PR-004</td>
<td>Develop responsive layout</td>
<td>Sarah Brown</td>
<td><div class="status in-progress">In Progress</div></td>
<td>Jul 03, 2023</td>
<td>Jul 15, 2023</td>
<td>13 days</td>
</tr>
<tr>
<td>PR-005</td>
<td>Implement user authentication</td>
<td>David Chen</td>
<td><div class="status not-started">Not Started</div></td>
<td>Jul 10, 2023</td>
<td>Jul 20, 2023</td>
<td>10 days</td>
</tr>
<tr>
<td>PR-006</td>
<td>Testing phase</td>
<td>QA Team</td>
<td><div class="status not-started">Not Started</div></td>
<td>Jul 18, 2023</td>
<td>Jul 25, 2023</td>
<td>7 days</td>
</tr>
<tr>
<td>PR-007</td>
<td>Launch website</td>
<td>All Team</td>
<td><div class="status not-started">Not Started</div></td>
<td>Jul 26, 2023</td>
<td>Aug 01, 2023</td>
<td>6 days</td>
</tr>
</tbody>
</table>
</div>
<div class="view-separator"></div>
<div class="gantt-view">
<div class="view-label">
<i class="fas fa-chart-bar"></i> Gantt Chart
</div>
<div class="gantt-container">
<div class="timeline-header">
<div class="task-name">Task</div>
<div class="timeline">
<div class="timeline-day">Mon</div>
<div class="timeline-day">Tue</div>
<div class="timeline-day">Wed</div>
<div class="timeline-day">Thu</div>
<div class="timeline-day">Fri</div>
<div class="timeline-day">Sat</div>
<div class="timeline-day">Sun</div>
<div class="timeline-day">Mon</div>
<div class="timeline-day">Tue</div>
<div class="timeline-day">Wed</div>
<div class="timeline-day">Thu</div>
<div class="timeline-day">Fri</div>
<div class="timeline-day">Sat</div>
<div class="timeline-day">Sun</div>
</div>
</div>
<div style="position: relative; height: 280px;">
<div class="today-line" style="left: 60%"></div>
<!-- Horizontal task bars -->
<div class="gantt-row" style="top: 10px">
<div class="task-name">Research competitors</div>
<div class="task-bar" style="left: 10%; width: 10%; top: 25px; background-color: var(--success)"></div>
</div>
<div class="gantt-row" style="top: 60px">
<div class="task-name">Create wireframes</div>
<div class="task-bar" style="left: 20%; width: 20%; top: 25px"></div>
</div>
<div class="gantt-row" style="top: 110px">
<div class="task-name">Design homepage</div>
<div class="task-bar" style="left: 25%; width: 20%; top: 25px; background-color: var(--primary-light)"></div>
</div>
<div class="gantt-row" style="top: 160px">
<div class="task-name">Develop responsive layout</div>
<div class="task-bar" style="left: 30%; width: 25%; top: 25px"></div>
</div>
<div class="gantt-row" style="top: 210px">
<div class="task-name">Implement user authentication</div>
<div class="task-bar critical-task" style="left: 35%; width: 20%; top: 25px"></div>
</div>
<div class="gantt-row" style="top: 260px">
<div class="task-name">Testing phase</div>
<div class="task-bar" style="left: 55%; width: 15%; top: 25px"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<script>
// Script to manage view toggling
document.addEventListener('DOMContentLoaded', function() {
// Simulate view switcher interaction
const viewButtons = document.querySelectorAll('.toolbar-section:first-child .icon-button');
viewButtons.forEach(button => {
button.addEventListener('click', function() {
// Remove active class from all
viewButtons.forEach(btn => btn.classList.remove('active-view'));
// Add active class to clicked button
this.classList.add('active-view');
console.log(`${this.textContent.trim()} view selected`);
});
});
// Simulate toolbar button interactions
const toolbarButtons = document.querySelectorAll('.icon-button:not(.active-view)');
toolbarButtons.forEach(button => {
button.addEventListener('click', function() {
const buttonText = this.textContent.trim().split(' ')[0];
console.log(`${buttonText} button clicked`);
});
});
// Initialize Gantt chart
initCurrentDateMarker();
function initCurrentDateMarker() {
const timeline = document.querySelector('.timeline');
const todayLine = document.querySelector('.today-line');
if (timeline && todayLine) {
// Position the "today line" at 60% for demo purposes
const timelineWidth = timeline.offsetWidth;
todayLine.style.left = `calc(60% + 60px)`;
}
}
// Handle responsive design changes
window.addEventListener('resize', initCurrentDateMarker);
});
</script>
</body>
</html>
```
## Features Implemented
1. **Responsive Header Toolbar with all requested elements:**
- Breadcrumb navigation for project hierarchy access
- Project name display
- View controls (Grid, Gantt, Both)
- Zoom level toggle (Week in our demo)
- Critical path toggle
- Timezone preview button
- Sort and filter buttons
- Version selector with history and clone options
- Baseline management button
- AI assistant access
2. **Dual View Interface:**
- Grid view with mock tasks displayed in table format
- Gantt view showing timeline with horizontal task bars
- Both views shown in responsive split layout
3. **Theme Implementation:**
- Blue (#0343fb) as primary color for highlights and active elements
- Complementary grays for backgrounds and borders
- Clean black text for readability
4. **Responsive Design:**
- Toolbar reflows into different layouts on smaller screens
- Stacked views on tablet/mobile sizes
- Text truncation for long project names
5. **Interactive Elements:**
- Highlighting for active view control
- Hover states for buttons
- Status indicators for tasks
- Critical path indicator in Gantt view
This implementation provides all the requested functionality with a clean, modern interface and handles both views simultaneously as required.Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project Management App</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background-color: #f8f9fa;
color: #333;
}
.app-container {
height: 100vh;
display: flex;
flex-direction: column;
}
/* Header Styles */
.header {
background: white;
border-bottom: 1px solid #e0e0e0;
padding: 12px 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #666;
}
.breadcrumb-item {
color: #0343fb;
text-decoration: none;
}
.breadcrumb-separator {
color: #ccc;
}
.project-name {
font-size: 24px;
font-weight: 600;
color: #333;
}
.toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.toolbar-section {
display: flex;
align-items: center;
gap: 8px;
}
.toolbar-group {
display: flex;
align-items: center;
gap: 4px;
border: 1px solid #e0e0e0;
border-radius: 6px;
background: white;
}
.btn {
padding: 8px 12px;
border: none;
border-radius: 4px;
background: white;
color: #333;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
border: 1px solid #e0e0e0;
}
.btn:hover {
background: #f5f5f5;
}
.btn.active {
background: #0343fb;
color: white;
border-color: #0343fb;
}
.btn-group .btn {
border-radius: 0;
border-right: none;
}
.btn-group .btn:first-child {
border-radius: 4px 0 0 4px;
}
.btn-group .btn:last-child {
border-radius: 0 4px 4px 0;
border-right: 1px solid #e0e0e0;
}
.select {
padding: 8px 12px;
border: 1px solid #e0e0e0;
border-radius: 4px;
background: white;
font-size: 14px;
cursor: pointer;
}
.toggle {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
}
.toggle-switch {
width: 40px;
height: 20px;
background: #ccc;
border-radius: 10px;
position: relative;
cursor: pointer;
transition: background 0.3s;
}
.toggle-switch.active {
background: #0343fb;
}
.toggle-switch::after {
content: '';
width: 16px;
height: 16px;
background: white;
border-radius: 50%;
position: absolute;
top: 2px;
left: 2px;
transition: transform 0.3s;
}
.toggle-switch.active::after {
transform: translateX(20px);
}
.icon {
width: 16px;
height: 16px;
display: inline-block;
}
/* Main Content */
.main-content {
flex: 1;
display: flex;
overflow: hidden;
}
.content-area {
flex: 1;
display: flex;
background: white;
margin: 16px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
overflow: hidden;
}
.grid-view {
width: 40%;
border-right: 1px solid #e0e0e0;
overflow: auto;
}
.gantt-view {
flex: 1;
overflow: auto;
}
.grid-header, .gantt-header {
background: #f8f9fa;
padding: 12px;
border-bottom: 1px solid #e0e0e0;
font-weight: 600;
color: #333;
}
.grid-table {
width: 100%;
border-collapse: collapse;
}
.grid-table th, .grid-table td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
}
.grid-table th {
background: #f8f9fa;
font-weight: 600;
position: sticky;
top: 0;
}
.grid-table tr:hover {
background: #f8f9fa;
}
.gantt-container {
padding: 20px;
}
.gantt-timeline {
display: flex;
flex-direction: column;
gap: 16px;
}
.timeline-header {
display: grid;
grid-template-columns: repeat(30, 1fr);
gap: 1px;
background: #f8f9fa;
padding: 8px;
border-radius: 4px;
}
.timeline-day {
text-align: center;
font-size: 12px;
padding: 4px;
color: #666;
}
.task-row {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 12px;
}
.task-name {
width: 200px;
font-weight: 500;
}
.task-bar-container {
flex: 1;
height: 24px;
background: #f0f0f0;
border-radius: 4px;
position: relative;
}
.task-bar {
height: 100%;
background: #0343fb;
border-radius: 4px;
position: absolute;
top: 0;
}
.task-bar.critical {
background: #ff4444;
}
/* Responsive */
@media (max-width: 1024px) {
.toolbar {
flex-wrap: wrap;
gap: 8px;
}
.toolbar-section {
gap: 4px;
}
}
@media (max-width: 768px) {
.content-area {
flex-direction: column;
}
.grid-view {
width: 100%;
border-right: none;
border-bottom: 1px solid #e0e0e0;
max-height: 40vh;
}
}
/* Dialog Styles */
.dialog-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
}
.dialog {
background: white;
border-radius: 8px;
padding: 24px;
max-width: 500px;
width: 90%;
max-height: 80vh;
overflow: auto;
}
.dialog-header {
font-size: 18px;
font-weight: 600;
margin-bottom: 16px;
}
.dialog-content {
margin-bottom: 16px;
}
.dialog-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
}
/* Side Panel */
.side-panel {
position: fixed;
top: 0;
right: -400px;
width: 400px;
height: 100vh;
background: white;
box-shadow: -2px 0 8px rgba(0,0,0,0.1);
transition: right 0.3s;
z-index: 1000;
display: flex;
flex-direction: column;
}
.side-panel.open {
right: 0;
}
.side-panel-header {
padding: 16px;
border-bottom: 1px solid #e0e0e0;
display: flex;
justify-content: space-between;
align-items: center;
}
.side-panel-content {
flex: 1;
padding: 16px;
overflow: auto;
}
.close-btn {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
color: #666;
}
</style>
</head>
<body>
<div class="app-container">
<!-- Header -->
<header class="header">
<!-- Breadcrumb -->
<nav class="breadcrumb">
<a href="#" class="breadcrumb-item">Workspace</a>
<span class="breadcrumb-separator">›</span>
<a href="#" class="breadcrumb-item">Projects</a>
<span class="breadcrumb-separator">›</span>
<span>Website Redesign</span>
</nav>
<!-- Project Name -->
<h1 class="project-name">Website Redesign Project</h1>
<!-- Toolbar -->
<div class="toolbar">
<!-- View Controls -->
<div class="toolbar-section">
<div class="btn-group">
<button class="btn active" onclick="setView('both')">Both</button>
<button class="btn" onclick="setView('grid')">Grid</button>
<button class="btn" onclick="setView('gantt')">Gantt</button>
</div>
</div>
<!-- Zoom & Timeline Controls -->
<div class="toolbar-section">
<div class="btn-group">
<button class="btn" onclick="setZoom('day')">Day</button>
<button class="btn active" onclick="setZoom('week')">Week</button>
<button class="btn" onclick="setZoom('month')">Month</button>
</div>
<div class="toggle">
<span>Critical Path</span>
<div class="toggle-switch" onclick="toggleCriticalPath(this)"></div>
</div>
</div>
<!-- Tools -->
<div class="toolbar-section">
<button class="btn" onclick="openDialog('sort')">
📊 Sort
</button>
<button class="btn" onclick="openDialog('filter')">
🔍 Filter
</button>
<select class="select">
<option>UTC-8 (PST)</option>
<option>UTC-5 (EST)</option>
<option>UTC+0 (GMT)</option>
</select>
</div>
<!-- Version Controls -->
<div class="toolbar-section">
<select class="select">
<option>Main Timeline</option>
<option>Scenario A</option>
<option>Scenario B</option>
</select>
<button class="btn" onclick="openDialog('version')">
📋 History
</button>
<button class="btn" onclick="openDialog('clone')">
📄 Clone
</button>
</div>
<!-- Baseline & AI -->
<div class="toolbar-section">
<button class="btn" onclick="openDialog('baseline')">
📏 Baseline
</button>
<button class="btn" onclick="toggleSidePanel()">
🤖 AI Assistant
</button>
</div>
</div>
</header>
<!-- Main Content -->
<main class="main-content">
<div class="content-area" id="contentArea">
<!-- Grid View -->
<div class="grid-view" id="gridView">
<div class="grid-header">Task List</div>
<table class="grid-table">
<thead>
<tr>
<th>Task Name</th>
<th>Start Date</th>
<th>End Date</th>
<th>Duration</th>
<th>Status</th>
<th>Assignee</th>
</tr>
</thead>
<tbody id="taskTableBody">
<tr>
<td>Design Research</td>
<td>2024-01-15</td>
<td>2024-01-22</td>
<td>7 days</td>
<td>Completed</td>
<td>Alice Johnson</td>
</tr>
<tr>
<td>Wireframing</td>
<td>2024-01-22</td>
<td>2024-01-29</td>
<td>7 days</td>
<td>In Progress</td>
<td>Bob Smith</td>
</tr>
<tr>
<td>UI Design</td>
<td>2024-01-29</td>
<td>2024-02-12</td>
<td>14 days</td>
<td>Not Started</td>
<td>Carol Davis</td>
</tr>
<tr>
<td>Frontend Development</td>
<td>2024-02-12</td>
<td>2024-03-01</td>
<td>18 days</td>
<td>Not Started</td>
<td>David Wilson</td>
</tr>
<tr>
<td>Backend Integration</td>
<td>2024-02-26</td>
<td>2024-03-08</td>
<td>11 days</td>
<td>Not Started</td>
<td>Eve Martinez</td>
</tr>
<tr>
<td>Testing</td>
<td>2024-03-08</td>
<td>2024-03-15</td>
<td>7 days</td>
<td>Not Started</td>
<td>Frank Brown</td>
</tr>
</tbody>
</table>
</div>
<!-- Gantt View -->
<div class="gantt-view" id="ganttView">
<div class="gantt-header">Timeline View</div>
<div class="gantt-container">
<div class="gantt-timeline">
<div class="timeline-header">
<div class="timeline-day">Jan 15</div>
<div class="timeline-day">Jan 16</div>
<div class="timeline-day">Jan 17</div>
<div class="timeline-day">Jan 18</div>
<div class="timeline-day">Jan 19</div>
<div class="timeline-day">Jan 20</div>
<div class="timeline-day">Jan 21</div>
<div class="timeline-day">Jan 22</div>
<div class="timeline-day">Jan 23</div>
<div class="timeline-day">Jan 24</div>
<div class="timeline-day">Jan 25</div>
<div class="timeline-day">Jan 26</div>
<div class="timeline-day">Jan 27</div>
<div class="timeline-day">Jan 28</div>
<div class="timeline-day">Jan 29</div>
<div class="timeline-day">Jan 30</div>
<div class="timeline-day">Jan 31</div>
<div class="timeline-day">Feb 1</div>
<div class="timeline-day">Feb 2</div>
<div class="timeline-day">Feb 3</div>
<div class="timeline-day">Feb 4</div>
<div class="timeline-day">Feb 5</div>
<div class="timeline-day">Feb 6</div>
<div class="timeline-day">Feb 7</div>
<div class="timeline-day">Feb 8</div>
<div class="timeline-day">Feb 9</div>
<div class="timeline-day">Feb 10</div>
<div class="timeline-day">Feb 11</div>
<div class="timeline-day">Feb 12</div>
<div class="timeline-day">Feb 13</div>
</div>
<div class="task-row">
<div class="task-name">Design Research</div>
<div class="task-bar-container">
<div class="task-bar" style="left: 0%; width: 23%;"></div>
</div>
</div>
<div class="task-row">
<div class="task-name">Wireframing</div>
<div class="task-bar-container">
<div class="task-bar critical" style="left: 23%; width: 23%;"></div>
</div>
</div>
<div class="task-row">
<div class="task-name">UI Design</div>
<div class="task-bar-container">
<div class="task-bar" style="left: 46%; width: 47%;"></div>
</div>
</div>
<div class="task-row">
<div class="task-name">Frontend Development</div>
<div class="task-bar-container">
<div class="task-bar critical" style="left: 93%; width: 60%;"></div>
</div>
</div>
<div class="task-row">
<div class="task-name">Backend Integration</div>
<div class="task-bar-container">
<div class="task-bar" style="left: 140%; width: 37%;"></div>
</div>
</div>
<div class="task-row">
<div class="task-name">Testing</div>
<div class="task-bar-container">
<div class="task-bar critical" style="left: 177%; width: 23%;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Dialog Overlay -->
<div class="dialog-overlay" id="dialogOverlay">
<div class="dialog">
<div class="dialog-header" id="dialogTitle">Dialog Title</div>
<div class="dialog-content" id="dialogContent">Dialog content goes here</div>
<div class="dialog-actions">
<button class="btn" onclick="closeDialog()">Cancel</button>
<button class="btn active" onclick="closeDialog()">Apply</button>
</div>
</div>
</div>
<!-- AI Assistant Side Panel -->
<div class="side-panel" id="sidePanel">
<div class="side-panel-header">
<h3>AI Assistant</h3>
<button class="close-btn" onclick="toggleSidePanel()">×</button>
</div>
<div class="side-panel-content">
<p>Hello! I'm your AI assistant. How can I help you with your project today?</p>
<br>
<p>You can ask me about:</p>
<ul>
<li>Task dependencies</li>
<li>Resource allocation</li>
<li>Timeline optimization</li>
<li>Risk analysis</li>
<li>Progress reporting</li>
</ul>
</div>
</div>
</div>
<script>
// View switching
function setView(viewType) {
const gridView = document.getElementById('gridView');
const ganttView = document.getElementById('ganttView');
const buttons = document.querySelectorAll('.btn-group .btn');
buttons.forEach(btn => btn.classList.remove('active'));
event.target.classList.add('active');
switch(viewType) {
case 'grid':
gridView.style.display = 'block';
ganttView.style.display = 'none';
gridView.style.width = '100%';
break;
case 'gantt':
gridView.style.display = 'none';
ganttView.style.display = 'block';
break;
case 'both':
gridView.style.display = 'block';
ganttView.style.display = 'block';
gridView.style.width = '40%';
break;
}
}
// Zoom level
function setZoom(zoomLevel) {
const buttons = event.target.parentNode.querySelectorAll('.btn');
buttons.forEach(btn => btn.classList.remove('active'));
event.target.classList.add('active');
// Update timeline header based on zoom level
const timelineHeader = document.querySelector('.timeline-header');
const days = timelineHeader.children;
switch(zoomLevel) {
case 'day':
// Show individual days
break;
case 'week':
// Show weeks
break;
case 'month':
// Show months
break;
}
}
// Toggle critical path
function toggleCriticalPath(toggle) {
toggle.classList.toggle('active');
const criticalTasks = document.querySelectorAll('.task-bar.critical');
if (toggle.classList.contains('active')) {
criticalTasks.forEach(task => task.style.display = 'block');
} else {
criticalTasks.forEach(task => task.style.display = 'none');
}
}
// Dialog management
function openDialog(type) {
const overlay = document.getElementById('dialogOverlay');
const title = document.getElementById('dialogTitle');
const content = document.getElementById('dialogContent');
switch(type) {
case 'sort':
title.textContent = 'Sort Tasks';
content.innerHTML = `
<div style="margin-bottom: 12px;">
<label>Sort by:</label>
<select class="select" style="width: 100%; margin-top: 4px;">
<option>Start Date</option>
<option>End Date</option>
<option>Task Name</option>
<option>Priority</option>
<option>Assignee</option>
</select>
</div>
<div>
<label>Order:</label>
<select class="select" style="width: 100%; margin-top: 4px;">
<option>Ascending</option>
<option>Descending</option>
</select>
</div>
`;
break;
case 'filter':
title.textContent = 'Filter Tasks';
content.innerHTML = `
<div style="margin-bottom: 12px;">
<label>Status:</label>
<select class="select" style="width: 100%; margin-top: 4px;">
<option>All</option>
<option>Not Started</option>
<option>In Progress</option>
<option>Completed</option>
</select>
</div>
<div>
<label>Assignee:</label>
<select class="select" style="width: 100%; margin-top: 4px;">
<option>All</option>
<option>Alice Johnson</option>
<option>Bob Smith</option>
<option>Carol Davis</option>
</select>
</div>
`;
break;
case 'version':
title.textContent = 'Version History';
content.innerHTML = `
<div style="max-height: 300px; overflow-y: auto;">
<div style="border: 1px solid #e0e0e0; padding: 12px; margin-bottom: 8px; border-radius: 4px;">
<strong>Version 1.3</strong> - 2024-01-25 14:30<br>
<small>Updated task dependencies</small>
</div>
<div style="border: 1px solid #e0e0e0; padding: 12px; margin-bottom: 8px; border-radius: 4px;">
<strong>Version 1.2</strong> - 2024-01-24 10:15<br>
<small>Added new team members</small>
</div>
<div style="border: 1px solid #e0e0e0; padding: 12px; margin-bottom: 8px; border-radius: 4px;">
<strong>Version 1.1</strong> - 2024-01-23 16:45<br>
<small>Initial timeline setup</small>
</div>
</div>
`;
break;
case 'clone':
title.textContent = 'Clone Timeline';
content.innerHTML = `
<div style="margin-bottom: 12px;">
<label>Destination:</label>
<select class="select" style="width: 100%; margin-top: 4px;">
<option>Current Workspace</option>
<option>Marketing Projects</option>
<option>Development Team</option>
</select>
</div>
<div>
<label>New Timeline Name:</label>
<input type="text" class="select" style="width: 100%; margin-top: 4px;" placeholder="Website Redesign (Copy)">
</div>
`;
break;
case 'baseline':
title.textContent = 'Baseline Settings';
content.innerHTML = `
<div style="margin-bottom: 12px;">
<button class="btn" style="width: 100%;">Set Current as Baseline</button>
</div>
<div style="margin-bottom: 12px;">
<button class="btn" style="width: 100%;">Clear Baseline</button>
</div>
<div class="toggle">
<span>Show Baseline Columns</span>
<div class="toggle-switch active"></div>
</div>
`;
break;
}
overlay.style.display = 'flex';
}
function closeDialog() {
document.getElementById('dialogOverlay').style.display = 'none';
}
// Side panel toggle
function toggleSidePanel() {
const panel = document.getElementById('sidePanel');
panel.classList.toggle('open');
}
// Close dialog when clicking overlay
document.getElementById('dialogOverlay').addEventListener('click', function(e) {
if (e.target === this) {
closeDialog();
}
});
// Close side panel when pressing Escape
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
document.getElementById('sidePanel').classList.remove('open');
closeDialog();
}
});
</script>
</body>
</html>
```Drag to resize