diff options
Diffstat (limited to 'static/index.html')
| -rw-r--r-- | static/index.html | 283 |
1 files changed, 197 insertions, 86 deletions
diff --git a/static/index.html b/static/index.html index d5b5cd4..ac88379 100644 --- a/static/index.html +++ b/static/index.html @@ -3,20 +3,28 @@ <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Alex Chen - Creative Developer</title> + <title>TaskFlow - Project Management Dashboard</title> <link rel="stylesheet" href="styles.css"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> </head> <body> <nav class="navbar"> <div class="nav-container"> - <div class="nav-logo">AC</div> + <div class="nav-logo">TaskFlow</div> <ul class="nav-menu"> - <li><a href="#home" class="nav-link">Home</a></li> - <li><a href="#about" class="nav-link">About</a></li> + <li><a href="#dashboard" class="nav-link">Dashboard</a></li> <li><a href="#projects" class="nav-link">Projects</a></li> - <li><a href="#contact" class="nav-link">Contact</a></li> + <li><a href="#team" class="nav-link">Team</a></li> + <li><a href="#reports" class="nav-link">Reports</a></li> </ul> + <div class="nav-actions"> + <div class="notification-icon">🔔</div> + <div class="user-profile"> + <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='%236366f1'/%3E%3Ctext x='16' y='20' text-anchor='middle' fill='white' font-family='Arial' font-size='12' font-weight='bold'%3EJD%3C/text%3E%3C/svg%3E" alt="User" class="profile-img"> + <span class="username">John Doe</span> + <div class="dropdown-arrow">â–¼</div> + </div> + </div> <div class="hamburger"> <span></span> <span></span> @@ -26,52 +34,48 @@ </nav> <main> - <section id="home" class="hero"> + <section id="dashboard" class="hero"> <div class="hero-content"> - <h1 class="hero-title"> - <span class="gradient-text">Creative Developer</span> - <br>& Digital Designer - </h1> - <p class="hero-subtitle">Crafting beautiful digital experiences with modern web technologies</p> - <div class="hero-buttons"> - <button class="btn btn-primary">View My Work</button> - <button class="btn btn-secondary">Get In Touch</button> - </div> - </div> - <div class="hero-visual"> - <div class="floating-card card-1"></div> - <div class="floating-card card-2"></div> - <div class="floating-card card-3"></div> - </div> - </section> - - <section id="about" class="about"> - <div class="container"> - <h2 class="section-title">About Me</h2> - <div class="about-grid"> - <div class="about-text"> - <p>I'm a passionate full-stack developer with 5+ years of experience creating digital solutions that combine beautiful design with robust functionality.</p> - <div class="skills"> - <div class="skill-item">React</div> - <div class="skill-item">TypeScript</div> - <div class="skill-item">Node.js</div> - <div class="skill-item">Python</div> - <div class="skill-item">AWS</div> - <div class="skill-item">Design Systems</div> + <div class="welcome-section"> + <h1 class="hero-title"> + Welcome back, <span class="gradient-text">John</span> + </h1> + <p class="hero-subtitle">Here's what's happening with your projects today</p> + <div class="quick-stats"> + <div class="stat-card"> + <div class="stat-number">12</div> + <div class="stat-label">Active Projects</div> </div> - </div> - <div class="about-stats"> - <div class="stat"> - <div class="stat-number">50+</div> - <div class="stat-label">Projects Completed</div> + <div class="stat-card"> + <div class="stat-number">47</div> + <div class="stat-label">Tasks Due</div> </div> - <div class="stat"> - <div class="stat-number">5+</div> - <div class="stat-label">Years Experience</div> + <div class="stat-card"> + <div class="stat-number">8</div> + <div class="stat-label">Team Members</div> </div> - <div class="stat"> - <div class="stat-number">25+</div> - <div class="stat-label">Happy Clients</div> + </div> + <div class="hero-buttons"> + <button class="btn btn-primary">Create New Project</button> + <button class="btn btn-secondary">View All Tasks</button> + </div> + </div> + <div class="dashboard-preview"> + <div class="preview-card card-1"> + <div class="card-header">Recent Activity</div> + <div class="activity-item">Sarah completed "UI Design"</div> + <div class="activity-item">Mike updated project timeline</div> + <div class="activity-item">New comment on "Backend API"</div> + </div> + <div class="preview-card card-2"> + <div class="card-header">Upcoming Deadlines</div> + <div class="deadline-item"> + <span class="deadline-date">Today</span> + <span class="deadline-task">Mobile App Testing</span> + </div> + <div class="deadline-item"> + <span class="deadline-date">Tomorrow</span> + <span class="deadline-task">Client Presentation</span> </div> </div> </div> @@ -80,41 +84,75 @@ <section id="projects" class="projects"> <div class="container"> - <h2 class="section-title">Featured Projects</h2> + <div class="section-header"> + <h2 class="section-title">Active Projects</h2> + <button class="btn btn-primary">+ New Project</button> + </div> <div class="projects-grid"> <div class="project-card"> - <div class="project-image"></div> + <div class="project-status status-active">Active</div> <div class="project-content"> <h3>E-Commerce Platform</h3> - <p>Modern React-based shopping platform with real-time inventory management</p> - <div class="project-tags"> - <span>React</span> - <span>Node.js</span> - <span>MongoDB</span> + <p>Building a modern React-based shopping platform with real-time inventory management</p> + <div class="project-progress"> + <div class="progress-bar"> + <div class="progress-fill" style="width: 75%"></div> + </div> + <span class="progress-text">75% Complete</span> + </div> + <div class="project-meta"> + <div class="project-team"> + <div class="team-avatars"> + <div class="avatar">JS</div> + <div class="avatar">MK</div> + <div class="avatar">+2</div> + </div> + </div> + <div class="project-due">Due: Dec 15</div> </div> </div> </div> <div class="project-card"> - <div class="project-image"></div> + <div class="project-status status-review">In Review</div> <div class="project-content"> <h3>Analytics Dashboard</h3> <p>Data visualization dashboard with interactive charts and real-time updates</p> - <div class="project-tags"> - <span>Vue.js</span> - <span>D3.js</span> - <span>Python</span> + <div class="project-progress"> + <div class="progress-bar"> + <div class="progress-fill" style="width: 90%"></div> + </div> + <span class="progress-text">90% Complete</span> + </div> + <div class="project-meta"> + <div class="project-team"> + <div class="team-avatars"> + <div class="avatar">AL</div> + <div class="avatar">RH</div> + </div> + </div> + <div class="project-due">Due: Nov 28</div> </div> </div> </div> <div class="project-card"> - <div class="project-image"></div> + <div class="project-status status-planning">Planning</div> <div class="project-content"> - <h3>Mobile App</h3> - <p>Cross-platform mobile application for task management and productivity</p> - <div class="project-tags"> - <span>React Native</span> - <span>Firebase</span> - <span>Redux</span> + <h3>Mobile App Redesign</h3> + <p>Complete UI/UX overhaul for the mobile application with new design system</p> + <div class="project-progress"> + <div class="progress-bar"> + <div class="progress-fill" style="width: 25%"></div> + </div> + <span class="progress-text">25% Complete</span> + </div> + <div class="project-meta"> + <div class="project-team"> + <div class="team-avatars"> + <div class="avatar">SM</div> + <div class="avatar">+3</div> + </div> + </div> + <div class="project-due">Due: Jan 20</div> </div> </div> </div> @@ -122,32 +160,98 @@ </div> </section> - <section id="contact" class="contact"> + <section id="team" class="team"> <div class="container"> - <h2 class="section-title">Let's Work Together</h2> - <div class="contact-content"> - <div class="contact-info"> - <h3>Get in touch</h3> - <p>Ready to start your next project? Let's discuss how we can bring your ideas to life.</p> - <div class="contact-item"> - <strong>Email:</strong> alex@example.com + <h2 class="section-title">Team Overview</h2> + <div class="team-grid"> + <div class="team-member"> + <div class="member-avatar large-avatar">JS</div> + <div class="member-info"> + <h3>Jessica Smith</h3> + <p>Frontend Developer</p> + <div class="member-status online">Online</div> </div> - <div class="contact-item"> - <strong>Phone:</strong> +1 (555) 123-4567 + <div class="member-stats"> + <div class="stat"> + <span class="stat-number">8</span> + <span class="stat-label">Active Tasks</span> + </div> </div> </div> - <form class="contact-form"> - <div class="form-group"> - <input type="text" placeholder="Your Name" required> + <div class="team-member"> + <div class="member-avatar large-avatar">MK</div> + <div class="member-info"> + <h3>Mike Kim</h3> + <p>Backend Developer</p> + <div class="member-status away">Away</div> </div> - <div class="form-group"> - <input type="email" placeholder="Your Email" required> + <div class="member-stats"> + <div class="stat"> + <span class="stat-number">5</span> + <span class="stat-label">Active Tasks</span> + </div> </div> - <div class="form-group"> - <textarea placeholder="Your Message" rows="5" required></textarea> + </div> + <div class="team-member"> + <div class="member-avatar large-avatar">AL</div> + <div class="member-info"> + <h3>Alex Lee</h3> + <p>UI/UX Designer</p> + <div class="member-status online">Online</div> </div> - <button type="submit" class="btn btn-primary">Send Message</button> - </form> + <div class="member-stats"> + <div class="stat"> + <span class="stat-number">12</span> + <span class="stat-label">Active Tasks</span> + </div> + </div> + </div> + <div class="team-member"> + <div class="member-avatar large-avatar">RH</div> + <div class="member-info"> + <h3>Rachel Harris</h3> + <p>Project Manager</p> + <div class="member-status offline">Offline</div> + </div> + <div class="member-stats"> + <div class="stat"> + <span class="stat-number">3</span> + <span class="stat-label">Active Tasks</span> + </div> + </div> + </div> + </div> + </div> + </section> + + <section id="reports" class="reports"> + <div class="container"> + <h2 class="section-title">Project Reports</h2> + <div class="reports-grid"> + <div class="report-card"> + <h3>Weekly Summary</h3> + <div class="report-chart"> + <div class="chart-placeholder">📊</div> + </div> + <p>Tasks completed this week: <strong>23</strong></p> + <button class="btn btn-secondary">View Details</button> + </div> + <div class="report-card"> + <h3>Team Performance</h3> + <div class="report-chart"> + <div class="chart-placeholder">📈</div> + </div> + <p>Average completion rate: <strong>87%</strong></p> + <button class="btn btn-secondary">View Details</button> + </div> + <div class="report-card"> + <h3>Project Timeline</h3> + <div class="report-chart"> + <div class="chart-placeholder">📅</div> + </div> + <p>On-time delivery rate: <strong>92%</strong></p> + <button class="btn btn-secondary">View Details</button> + </div> </div> </div> </section> @@ -155,7 +259,14 @@ <footer class="footer"> <div class="container"> - <p>© 2025 Alex Chen. All rights reserved.</p> + <div class="footer-content"> + <p>© 2025 TaskFlow. All rights reserved.</p> + <div class="footer-links"> + <a href="#privacy">Privacy Policy</a> + <a href="#terms">Terms of Service</a> + <a href="#support">Support</a> + </div> + </div> </div> </footer> |