summaryrefslogtreecommitdiff
path: root/static
diff options
context:
space:
mode:
Diffstat (limited to 'static')
-rw-r--r--static/index.html283
-rw-r--r--static/script.js164
-rw-r--r--static/styles.css452
3 files changed, 590 insertions, 309 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>&copy; 2025 Alex Chen. All rights reserved.</p>
+ <div class="footer-content">
+ <p>&copy; 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>
diff --git a/static/script.js b/static/script.js
index 6a833fe..9219098 100644
--- a/static/script.js
+++ b/static/script.js
@@ -16,16 +16,18 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.nav-menu');
-hamburger.addEventListener('click', () => {
- hamburger.classList.toggle('active');
- navMenu.classList.toggle('active');
-});
+if (hamburger && navMenu) {
+ hamburger.addEventListener('click', () => {
+ hamburger.classList.toggle('active');
+ navMenu.classList.toggle('active');
+ });
-// Close mobile menu when clicking on a link
-document.querySelectorAll('.nav-link').forEach(n => n.addEventListener('click', () => {
- hamburger.classList.remove('active');
- navMenu.classList.remove('active');
-}));
+ // Close mobile menu when clicking on a link
+ document.querySelectorAll('.nav-link').forEach(n => n.addEventListener('click', () => {
+ hamburger.classList.remove('active');
+ navMenu.classList.remove('active');
+ }));
+}
// Navbar background on scroll
window.addEventListener('scroll', () => {
@@ -37,6 +39,53 @@ window.addEventListener('scroll', () => {
}
});
+// User profile dropdown simulation
+const userProfile = document.querySelector('.user-profile');
+if (userProfile) {
+ userProfile.addEventListener('click', () => {
+ alert('User menu would open here with options like:\nā€¢ Profile Settings\nā€¢ Account Preferences\nā€¢ Logout');
+ });
+}
+
+// Notification icon click
+const notificationIcon = document.querySelector('.notification-icon');
+if (notificationIcon) {
+ notificationIcon.addEventListener('click', () => {
+ alert('Notifications:\nā€¢ Sarah completed "UI Design"\nā€¢ New comment on "Backend API"\nā€¢ Project deadline approaching');
+ });
+}
+
+// Project card interactions
+document.querySelectorAll('.project-card').forEach(card => {
+ card.addEventListener('click', () => {
+ const projectName = card.querySelector('h3').textContent;
+ alert(`Opening project: ${projectName}\n\nThis would navigate to the detailed project view.`);
+ });
+});
+
+// Team member interactions
+document.querySelectorAll('.team-member').forEach(member => {
+ member.addEventListener('click', () => {
+ const memberName = member.querySelector('h3').textContent;
+ alert(`Opening profile for: ${memberName}\n\nThis would show detailed team member information.`);
+ });
+});
+
+// Button click handlers
+document.querySelectorAll('.btn').forEach(btn => {
+ btn.addEventListener('click', (e) => {
+ const buttonText = btn.textContent;
+
+ if (buttonText.includes('Create') || buttonText.includes('New')) {
+ e.stopPropagation();
+ alert(`${buttonText} functionality would open here.\n\nThis would typically open a modal or navigate to a creation form.`);
+ } else if (buttonText.includes('View')) {
+ e.stopPropagation();
+ alert(`${buttonText} functionality would open here.\n\nThis would navigate to a detailed view or listing page.`);
+ }
+ });
+});
+
// Intersection Observer for animations
const observerOptions = {
threshold: 0.1,
@@ -53,94 +102,45 @@ const observer = new IntersectionObserver((entries) => {
}, observerOptions);
// Observe elements for animation
-document.querySelectorAll('.project-card, .stat, .about-text').forEach(el => {
+document.querySelectorAll('.project-card, .team-member, .report-card, .stat-card').forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(30px)';
el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(el);
});
-// Form submission
-document.querySelector('.contact-form').addEventListener('submit', function(e) {
- e.preventDefault();
-
- // Get form data
- const name = this.querySelector('input[type="text"]').value;
- const email = this.querySelector('input[type="email"]').value;
- const message = this.querySelector('textarea').value;
-
- // Simple validation
- if (!name || !email || !message) {
- alert('Please fill in all fields');
- return;
- }
-
- // Simulate form submission
- const submitBtn = this.querySelector('button[type="submit"]');
- const originalText = submitBtn.textContent;
-
- submitBtn.textContent = 'Sending...';
- submitBtn.disabled = true;
-
- setTimeout(() => {
- alert('Thank you for your message! I\'ll get back to you soon.');
- this.reset();
- submitBtn.textContent = originalText;
- submitBtn.disabled = false;
- }, 2000);
-});
-
-// Parallax effect for floating cards
-window.addEventListener('scroll', () => {
- const scrolled = window.pageYOffset;
- const parallaxElements = document.querySelectorAll('.floating-card');
-
- parallaxElements.forEach((element, index) => {
- const speed = 0.5 + (index * 0.1);
- const yPos = -(scrolled * speed);
- element.style.transform = `translateY(${yPos}px)`;
- });
-});
-
-// Hero title fade-in animation
+// Hero section fade-in animation
window.addEventListener('load', () => {
const heroTitle = document.querySelector('.hero-title');
const heroSubtitle = document.querySelector('.hero-subtitle');
+ const quickStats = document.querySelector('.quick-stats');
const heroButtons = document.querySelector('.hero-buttons');
- if (heroTitle) {
- heroTitle.style.opacity = '0';
- heroTitle.style.transform = 'translateY(30px)';
- heroTitle.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
-
- setTimeout(() => {
- heroTitle.style.opacity = '1';
- heroTitle.style.transform = 'translateY(0)';
- }, 300);
- }
-
- if (heroSubtitle) {
- heroSubtitle.style.opacity = '0';
- heroSubtitle.style.transform = 'translateY(30px)';
- heroSubtitle.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
-
- setTimeout(() => {
- heroSubtitle.style.opacity = '1';
- heroSubtitle.style.transform = 'translateY(0)';
- }, 500);
- }
+ [heroTitle, heroSubtitle, quickStats, heroButtons].forEach((element, index) => {
+ if (element) {
+ element.style.opacity = '0';
+ element.style.transform = 'translateY(30px)';
+ element.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
- if (heroButtons) {
- heroButtons.style.opacity = '0';
- heroButtons.style.transform = 'translateY(30px)';
- heroButtons.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
+ setTimeout(() => {
+ element.style.opacity = '1';
+ element.style.transform = 'translateY(0)';
+ }, 300 + (index * 200));
+ }
+ });
+});
+// Simulate real-time updates
+setInterval(() => {
+ const activityItems = document.querySelectorAll('.activity-item');
+ if (activityItems.length > 0) {
+ const randomItem = activityItems[Math.floor(Math.random() * activityItems.length)];
+ randomItem.style.background = '#f0f9ff';
setTimeout(() => {
- heroButtons.style.opacity = '1';
- heroButtons.style.transform = 'translateY(0)';
- }, 700);
+ randomItem.style.background = 'transparent';
+ }, 2000);
}
-});
+}, 10000);
// Add mobile menu styles dynamically
const style = document.createElement('style');
diff --git a/static/styles.css b/static/styles.css
index 98ce52e..7bfb5dd 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -13,6 +13,9 @@
--background: #ffffff;
--surface: #f8fafc;
--border: #e2e8f0;
+ --success: #10b981;
+ --warning: #f59e0b;
+ --danger: #ef4444;
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
--gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
@@ -22,7 +25,7 @@ body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
color: var(--text-primary);
- background: var(--background);
+ background: var(--surface);
}
.container {
@@ -77,6 +80,53 @@ body {
color: var(--primary-color);
}
+.nav-actions {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+.notification-icon {
+ font-size: 1.2rem;
+ cursor: pointer;
+ padding: 0.5rem;
+ border-radius: 0.5rem;
+ transition: background 0.3s ease;
+}
+
+.notification-icon:hover {
+ background: var(--surface);
+}
+
+.user-profile {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ cursor: pointer;
+ padding: 0.5rem;
+ border-radius: 0.5rem;
+ transition: background 0.3s ease;
+}
+
+.user-profile:hover {
+ background: var(--surface);
+}
+
+.profile-img {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+}
+
+.username {
+ font-weight: 500;
+}
+
+.dropdown-arrow {
+ font-size: 0.8rem;
+ color: var(--text-secondary);
+}
+
.hamburger {
display: none;
flex-direction: column;
@@ -97,9 +147,7 @@ body {
display: flex;
align-items: center;
padding: 0 2rem;
- background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
- position: relative;
- overflow: hidden;
+ background: var(--background);
}
.hero-content {
@@ -112,10 +160,10 @@ body {
}
.hero-title {
- font-size: 3.5rem;
+ font-size: 3rem;
font-weight: 700;
line-height: 1.1;
- margin-bottom: 1.5rem;
+ margin-bottom: 1rem;
}
.gradient-text {
@@ -126,11 +174,38 @@ body {
}
.hero-subtitle {
- font-size: 1.25rem;
+ font-size: 1.125rem;
color: var(--text-secondary);
margin-bottom: 2rem;
}
+.quick-stats {
+ display: flex;
+ gap: 1rem;
+ margin-bottom: 2rem;
+}
+
+.stat-card {
+ background: white;
+ padding: 1rem;
+ border-radius: 0.75rem;
+ box-shadow: var(--shadow);
+ text-align: center;
+ min-width: 100px;
+}
+
+.stat-number {
+ font-size: 1.5rem;
+ font-weight: 700;
+ color: var(--primary-color);
+}
+
+.stat-label {
+ font-size: 0.75rem;
+ color: var(--text-secondary);
+ margin-top: 0.25rem;
+}
+
.hero-buttons {
display: flex;
gap: 1rem;
@@ -169,118 +244,68 @@ body {
color: var(--primary-color);
}
-.hero-visual {
- position: relative;
- height: 400px;
+.dashboard-preview {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
}
-.floating-card {
- position: absolute;
+.preview-card {
+ background: white;
+ padding: 1.5rem;
border-radius: 1rem;
- box-shadow: var(--shadow-lg);
- animation: float 6s ease-in-out infinite;
-}
-
-.card-1 {
- width: 200px;
- height: 120px;
- background: var(--gradient);
- top: 20%;
- left: 10%;
- animation-delay: 0s;
-}
-
-.card-2 {
- width: 160px;
- height: 100px;
- background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
- top: 50%;
- right: 20%;
- animation-delay: 2s;
-}
-
-.card-3 {
- width: 180px;
- height: 110px;
- background: linear-gradient(135deg, #10b981 0%, #059669 100%);
- bottom: 20%;
- left: 30%;
- animation-delay: 4s;
-}
-
-@keyframes float {
- 0%, 100% { transform: translateY(0px); }
- 50% { transform: translateY(-20px); }
-}
-
-/* Sections */
-.section-title {
- font-size: 2.5rem;
- font-weight: 700;
- text-align: center;
- margin-bottom: 3rem;
-}
-
-.about {
- padding: 6rem 0;
- background: var(--background);
+ box-shadow: var(--shadow);
}
-.about-grid {
- display: grid;
- grid-template-columns: 2fr 1fr;
- gap: 4rem;
- align-items: center;
+.card-header {
+ font-weight: 600;
+ margin-bottom: 1rem;
+ color: var(--text-primary);
}
-.about-text p {
- font-size: 1.125rem;
+.activity-item {
+ padding: 0.5rem 0;
color: var(--text-secondary);
- margin-bottom: 2rem;
+ font-size: 0.875rem;
+ border-bottom: 1px solid var(--border);
}
-.skills {
- display: flex;
- flex-wrap: wrap;
- gap: 1rem;
+.activity-item:last-child {
+ border-bottom: none;
}
-.skill-item {
- background: var(--surface);
- padding: 0.5rem 1rem;
- border-radius: 2rem;
+.deadline-item {
+ display: flex;
+ justify-content: space-between;
+ padding: 0.5rem 0;
font-size: 0.875rem;
- font-weight: 500;
- border: 1px solid var(--border);
}
-.about-stats {
- display: flex;
- flex-direction: column;
- gap: 2rem;
+.deadline-date {
+ color: var(--primary-color);
+ font-weight: 500;
}
-.stat {
- text-align: center;
- padding: 1.5rem;
- background: white;
- border-radius: 1rem;
- box-shadow: var(--shadow);
+.deadline-task {
+ color: var(--text-secondary);
}
-.stat-number {
+/* Sections */
+.section-title {
font-size: 2rem;
font-weight: 700;
- color: var(--primary-color);
+ margin-bottom: 2rem;
}
-.stat-label {
- color: var(--text-secondary);
- font-size: 0.875rem;
+.section-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 2rem;
}
.projects {
- padding: 6rem 0;
+ padding: 4rem 0;
background: var(--surface);
}
@@ -293,110 +318,242 @@ body {
.project-card {
background: white;
border-radius: 1rem;
- overflow: hidden;
+ padding: 1.5rem;
box-shadow: var(--shadow);
transition: transform 0.3s ease;
+ position: relative;
}
.project-card:hover {
transform: translateY(-5px);
}
-.project-image {
- height: 200px;
- background: var(--gradient);
+.project-status {
+ position: absolute;
+ top: 1rem;
+ right: 1rem;
+ padding: 0.25rem 0.75rem;
+ border-radius: 1rem;
+ font-size: 0.75rem;
+ font-weight: 500;
}
-.project-content {
- padding: 1.5rem;
+.status-active {
+ background: #dcfce7;
+ color: #166534;
+}
+
+.status-review {
+ background: #fef3c7;
+ color: #92400e;
+}
+
+.status-planning {
+ background: #dbeafe;
+ color: #1e40af;
}
.project-content h3 {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.5rem;
+ margin-top: 1rem;
}
.project-content p {
color: var(--text-secondary);
+ margin-bottom: 1.5rem;
+ font-size: 0.875rem;
+}
+
+.project-progress {
margin-bottom: 1rem;
}
-.project-tags {
+.progress-bar {
+ width: 100%;
+ height: 8px;
+ background: var(--border);
+ border-radius: 4px;
+ overflow: hidden;
+ margin-bottom: 0.5rem;
+}
+
+.progress-fill {
+ height: 100%;
+ background: var(--gradient);
+ transition: width 0.3s ease;
+}
+
+.progress-text {
+ font-size: 0.75rem;
+ color: var(--text-secondary);
+}
+
+.project-meta {
display: flex;
- gap: 0.5rem;
- flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: center;
}
-.project-tags span {
- background: var(--surface);
- padding: 0.25rem 0.75rem;
- border-radius: 1rem;
+.team-avatars {
+ display: flex;
+ gap: 0.25rem;
+}
+
+.avatar {
+ width: 28px;
+ height: 28px;
+ border-radius: 50%;
+ background: var(--gradient);
+ color: white;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 0.75rem;
+ font-weight: 600;
+}
+
+.project-due {
font-size: 0.75rem;
color: var(--text-secondary);
}
-.contact {
- padding: 6rem 0;
+.team {
+ padding: 4rem 0;
background: var(--background);
}
-.contact-content {
+.team-grid {
display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 4rem;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
}
-.contact-info h3 {
- font-size: 1.5rem;
- margin-bottom: 1rem;
+.team-member {
+ background: white;
+ padding: 1.5rem;
+ border-radius: 1rem;
+ box-shadow: var(--shadow);
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+.large-avatar {
+ width: 48px;
+ height: 48px;
+ font-size: 1rem;
}
-.contact-info p {
+.member-info h3 {
+ font-size: 1rem;
+ font-weight: 600;
+ margin-bottom: 0.25rem;
+}
+
+.member-info p {
color: var(--text-secondary);
- margin-bottom: 2rem;
+ font-size: 0.875rem;
+ margin-bottom: 0.5rem;
}
-.contact-item {
- margin-bottom: 1rem;
+.member-status {
+ font-size: 0.75rem;
+ padding: 0.25rem 0.5rem;
+ border-radius: 1rem;
+ font-weight: 500;
+}
+
+.online {
+ background: #dcfce7;
+ color: #166534;
+}
+
+.away {
+ background: #fef3c7;
+ color: #92400e;
+}
+
+.offline {
+ background: #f1f5f9;
+ color: #64748b;
+}
+
+.member-stats {
+ margin-left: auto;
+ text-align: center;
+}
+
+.reports {
+ padding: 4rem 0;
+ background: var(--surface);
+}
+
+.reports-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
}
-.contact-form {
+.report-card {
background: white;
padding: 2rem;
border-radius: 1rem;
box-shadow: var(--shadow);
+ text-align: center;
}
-.form-group {
- margin-bottom: 1.5rem;
+.report-card h3 {
+ font-size: 1.25rem;
+ font-weight: 600;
+ margin-bottom: 1rem;
}
-.form-group input,
-.form-group textarea {
- width: 100%;
- padding: 0.75rem;
- border: 1px solid var(--border);
- border-radius: 0.5rem;
- font-family: inherit;
- transition: border-color 0.3s ease;
+.chart-placeholder {
+ font-size: 3rem;
+ margin: 2rem 0;
}
-.form-group input:focus,
-.form-group textarea:focus {
- outline: none;
- border-color: var(--primary-color);
+.report-card p {
+ color: var(--text-secondary);
+ margin-bottom: 1.5rem;
}
.footer {
background: var(--text-primary);
color: white;
- text-align: center;
padding: 2rem 0;
}
+.footer-content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.footer-links {
+ display: flex;
+ gap: 2rem;
+}
+
+.footer-links a {
+ color: white;
+ text-decoration: none;
+ opacity: 0.8;
+ transition: opacity 0.3s ease;
+}
+
+.footer-links a:hover {
+ opacity: 1;
+}
+
/* Responsive Design */
@media (max-width: 768px) {
+ .nav-actions {
+ display: none;
+ }
+
.hamburger {
display: flex;
}
@@ -411,12 +568,11 @@ body {
}
.hero-title {
- font-size: 2.5rem;
+ font-size: 2rem;
}
- .about-grid,
- .contact-content {
- grid-template-columns: 1fr;
+ .quick-stats {
+ justify-content: center;
}
.hero-buttons {
@@ -427,6 +583,18 @@ body {
.btn {
width: 200px;
}
+
+ .section-header {
+ flex-direction: column;
+ gap: 1rem;
+ align-items: flex-start;
+ }
+
+ .footer-content {
+ flex-direction: column;
+ gap: 1rem;
+ text-align: center;
+ }
}
@media (max-width: 480px) {
@@ -438,11 +606,13 @@ body {
padding: 0 1rem;
}
- .hero-title {
- font-size: 2rem;
+ .quick-stats {
+ flex-direction: column;
}
- .projects-grid {
+ .projects-grid,
+ .team-grid,
+ .reports-grid {
grid-template-columns: 1fr;
}
}
generated by cgit (git 2.34.1) at 2025-08-14 04:22:49 +0000