Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TeamSync Calendar Pro</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="app-container"> | |
| <!-- Top Navigation Bar --> | |
| <header class="calendar-header"> | |
| <div class="date-range-selector"> | |
| <button class="range-btn active">This Week</button> | |
| <button class="range-btn">Next 2 Weeks</button> | |
| <button class="range-btn">This Quarter</button> | |
| <button class="range-btn">Custom Range</button> | |
| </div> | |
| <div class="view-controls"> | |
| <label><input type="checkbox" checked> Show Weekends</label> | |
| <label><input type="checkbox" checked> Show Holidays</label> | |
| <label><input type="checkbox"> Compact View</label> | |
| </div> | |
| <div class="team-management"> | |
| <button class="btn-primary">Add Team Member</button> | |
| <button class="btn-secondary">Export</button> | |
| </div> | |
| </header> | |
| <!-- Main Calendar Grid --> | |
| <div class="calendar-grid"> | |
| <!-- Fixed Date Column --> | |
| <div class="date-column"> | |
| <div class="date-header"></div> | |
| <div class="date-cell">Mon 1/15</div> | |
| <div class="date-cell">Tue 1/16</div> | |
| <div class="date-cell">Wed 1/17</div> | |
| <div class="date-cell">Thu 1/18</div> | |
| <div class="date-cell">Fri 1/19</div> | |
| </div> | |
| <!-- Dynamic Team Member Columns --> | |
| <div class="team-column"> | |
| <div class="member-header"> | |
| <div class="member-avatar">JD</div> | |
| <div class="member-name">johndoe</div> | |
| <button class="remove-col">×</button> | |
| </div> | |
| <div class="task-cell"> | |
| <div class="task-item" data-status="in-progress"> | |
| <span class="status-indicator"></span> | |
| <span class="task-title">API Integration</span> | |
| <span class="task-meta">4h</span> | |
| </div> | |
| </div> | |
| <div class="task-cell"> | |
| <div class="task-item" data-status="blocked"> | |
| <span class="status-indicator"></span> | |
| <span class="task-title">Database Migration</span> | |
| <span class="task-meta">6h</span> | |
| </div> | |
| </div> | |
| <div class="task-cell pto-cell"> | |
| <div class="task-item"> | |
| <span class="task-title">PTO</span> | |
| </div> | |
| </div> | |
| <div class="task-cell"> | |
| <div class="task-item" data-status="not-started"> | |
| <span class="status-indicator"></span> | |
| <span class="task-title">Code Review</span> | |
| <span class="task-meta">2h</span> | |
| </div> | |
| </div> | |
| <div class="task-cell oncall-cell"> | |
| <div class="task-item"> | |
| <span class="task-title">On-call</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Milestone Column --> | |
| <div class="milestone-column"> | |
| <div class="milestone-header">Milestones</div> | |
| <div class="milestone-cell"> | |
| <div class="milestone-item">Sprint Start</div> | |
| </div> | |
| <div class="milestone-cell"> | |
| <div class="milestone-item">Code Freeze</div> | |
| </div> | |
| <div class="milestone-cell"> | |
| <div class="milestone-item">Release Day</div> | |
| </div> | |
| <div class="milestone-cell"> | |
| <div class="milestone-item">Retrospective</div> | |
| </div> | |
| <div class="milestone-cell"> | |
| <div class="milestone-item holiday">Company Holiday</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Command Panel --> | |
| <div class="command-panel"> | |
| <div class="panel-header"> | |
| <h3>Command Center</h3> | |
| <button class="close-panel">×</button> | |
| </div> | |
| <div class="search-box"> | |
| <input type="text" placeholder="Search commands... (Ctrl+K)"> | |
| </div> | |
| <div class="recent-commands"> | |
| <h4>Recent Commands</h4> | |
| <ul> | |
| <li>/task create "API integration" @john</li> | |
| <li>/bulk assign sprint:Q1-3 to:@alice</li> | |
| <li>/schedule pto @bob from:3/1 to:3/5</li> | |
| </ul> | |
| </div> | |
| <div class="command-templates"> | |
| <h4>Command Templates</h4> | |
| <div class="template-category"> | |
| <h5>Task Management</h5> | |
| <ul> | |
| <li>📝 Create Task</li> | |
| <li>↔️ Move Task</li> | |
| <li>🔄 Update Status</li> | |
| <li>🗑️ Delete Task</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Floating Action Button --> | |
| <button class="fab">+</button> | |
| </div> | |
| <script src="script.js"></script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |