summaryrefslogtreecommitdiff
path: root/static/styles.css
diff options
context:
space:
mode:
Diffstat (limited to 'static/styles.css')
-rw-r--r--static/styles.css452
1 files changed, 311 insertions, 141 deletions
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:25:23 +0000