π–ͺπ—ˆπ–½π–Ύ π–¨π—Œπ—‚ π–₯𝗂𝗅𝖾 dashboard.css

 π–ͺπ—ˆπ–½π–Ύ π–¨π—Œπ—‚ π–₯𝗂𝗅𝖾 dashboard.css


π–‘π–Ίπ—‡π—π—Ž π–»π—Žπ–Ίπ—π—„π–Ίπ—‡ π—„π—ˆπ–½π–Ύ π—‚π—Œπ—‚ 𝖿𝗂𝗅𝖾 dashboard.css


FarmerSmartAI - File CSS Dashboard

Berikut kode lengkap untuk file dashboard.css yang berisi style khusus untuk halaman dashboard FarmerSmartAI:

```css
/* dashboard.css - Stylesheet Khusus Dashboard FarmerSmartAI */

/* ===== DASHBOARD LAYOUT ===== */
.dashboard-container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    background: linear-gradient(135deg, #f0f4f0 0%, #e8f5e9 100%);
}

.dashboard-header {
    background: var(--white);
    box-shadow: var(--shadow-md);
    padding: var(--space-md) 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.dashboard-main {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-lg);
    padding: var(--space-xl);
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* ===== SIDEBAR STYLES ===== */
.dashboard-sidebar {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
    height: fit-content;
    position: sticky;
    top: var(--space-xl);
}

.sidebar-profile {
    text-align: center;
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--light);
    margin-bottom: var(--space-lg);
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-md);
    color: var(--white);
    font-size: var(--font-size-xxl);
    font-weight: bold;
}

.profile-info h3 {
    margin-bottom: var(--space-xs);
    color: var(--dark);
}

.profile-role {
    color: var(--gray);
    font-size: var(--font-size-sm);
}

.sidebar-stats {
    display: flex;
    justify-content: space-around;
    text-align: center;
    margin: var(--space-lg) 0;
}

.stat-item {
    flex: 1;
}

.stat-value {
    display: block;
    font-size: var(--font-size-xl);
    font-weight: bold;
    color: var(--primary);
    line-height: 1;
}

.stat-label {
    font-size: var(--font-size-xs);
    color: var(--gray);
    margin-top: var(--space-xs);
}

/* ===== MAIN CONTENT AREA ===== */
.dashboard-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
}

.content-title h1 {
    margin-bottom: var(--space-xs);
    color: var(--primary);
}

.content-subtitle {
    color: var(--gray);
    font-size: var(--font-size-md);
}

.content-actions {
    display: flex;
    gap: var(--space-md);
    align-items: center;
}

/* ===== QUICK STATS GRID ===== */
.quick-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.stat-card {
    background: var(--white);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    transition: all var(--transition-normal);
    border-left: 4px solid var(--primary);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.stat-card.warning {
    border-left-color: var(--warning);
}

.stat-card.danger {
    border-left-color: var(--danger);
}

.stat-card.success {
    border-left-color: var(--success);
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xxl);
    color: var(--white);
    flex-shrink: 0;
}

.stat-icon.primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
}

.stat-icon.warning {
    background: linear-gradient(135deg, var(--warning), #ffb74d);
}

.stat-icon.danger {
    background: linear-gradient(135deg, var(--danger), #ef5350);
}

.stat-icon.success {
    background: linear-gradient(135deg, var(--success), #66bb6a);
}

.stat-content {
    flex: 1;
}

.stat-value {
    font-size: var(--font-size-xxl);
    font-weight: bold;
    line-height: 1;
    margin-bottom: var(--space-xs);
}

.stat-title {
    font-size: var(--font-size-sm);
    color: var(--gray);
    margin-bottom: var(--space-xs);
}

.stat-trend {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.trend-up {
    color: var(--success);
}

.trend-down {
    color: var(--danger);
}

/* ===== MAIN GRID LAYOUT ===== */
.dashboard-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
}

@media (max-width: 1200px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== CHARTS SECTION ===== */
.charts-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.chart-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
}

.chart-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--dark);
}

.chart-actions {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

.time-filter {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--light);
    border-radius: var(--radius-md);
    background: var(--white);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.chart-container {
    height: 300px;
    position: relative;
}

/* ===== SENSOR DATA GRID ===== */
.sensor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.sensor-card {
    background: var(--white);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: all var(--transition-normal);
    border: 1px solid transparent;
}

.sensor-card:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.sensor-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-md);
    font-size: var(--font-size-xl);
    color: var(--white);
}

.sensor-icon.moisture {
    background: var(--info);
}

.sensor-icon.temperature {
    background: var(--danger);
}

.sensor-icon.humidity {
    background: var(--success);
}

.sensor-icon.ph {
    background: var(--secondary);
}

.sensor-value {
    font-size: var(--font-size-xl);
    font-weight: bold;
    margin-bottom: var(--space-xs);
    color: var(--dark);
}

.sensor-label {
    font-size: var(--font-size-sm);
    color: var(--gray);
    margin-bottom: var(--space-sm);
}

.sensor-status {
    font-size: var(--font-size-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: 20px;
    display: inline-block;
}

/* ===== ALERTS & NOTIFICATIONS ===== */
.alerts-section {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--space-xl);
}

.alerts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
}

.alerts-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--dark);
}

.alert-badge {
    background: var(--danger);
    color: var(--white);
    padding: var(--space-xs) var(--space-sm);
    border-radius: 20px;
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.alert-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.alert-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border-left: 4px solid;
    background: var(--light);
    transition: all var(--transition-normal);
}

.alert-item:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}

.alert-item.warning {
    border-left-color: var(--warning);
    background: #fff3e0;
}

.alert-item.danger {
    border-left-color: var(--danger);
    background: #ffebee;
}

.alert-item.info {
    border-left-color: var(--info);
    background: #e3f2fd;
}

.alert-item.success {
    border-left-color: var(--success);
    background: #e8f5e9;
}

.alert-icon {
    font-size: var(--font-size-lg);
    margin-top: 2px;
    flex-shrink: 0;
}

.alert-item.warning .alert-icon {
    color: var(--warning);
}

.alert-item.danger .alert-icon {
    color: var(--danger);
}

.alert-item.info .alert-icon {
    color: var(--info);
}

.alert-item.success .alert-icon {
    color: var(--success);
}

.alert-content {
    flex: 1;
}

.alert-title {
    font-weight: 600;
    margin-bottom: var(--space-xs);
    color: var(--dark);
}

.alert-message {
    font-size: var(--font-size-sm);
    color: var(--gray);
    margin-bottom: var(--space-xs);
}

.alert-time {
    font-size: var(--font-size-xs);
    color: var(--gray);
}

/* ===== RECOMMENDATIONS ===== */
.recommendations-section {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
}

.recommendations-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
}

.recommendations-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--dark);
}

.recommendation-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.recommendation-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background: var(--light);
    transition: all var(--transition-normal);
}

.recommendation-item:hover {
    background: #e8f5e9;
    transform: translateX(4px);
}

.recommendation-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: var(--font-size-md);
    flex-shrink: 0;
}

.recommendation-content {
    flex: 1;
}

.recommendation-title {
    font-weight: 600;
    margin-bottom: var(--space-xs);
    color: var(--dark);
}

.recommendation-desc {
    font-size: var(--font-size-sm);
    color: var(--gray);
}

.recommendation-action {
    flex-shrink: 0;
}

/* ===== WEATHER WIDGET ===== */
.weather-widget {
    background: linear-gradient(135deg, #2196f3, #1976d2);
    color: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--space-xl);
}

.weather-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
}

.weather-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.weather-location {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    opacity: 0.9;
}

.weather-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
}

.weather-temp {
    font-size: 3rem;
    font-weight: 300;
    line-height: 1;
}

.weather-info {
    text-align: right;
}

.weather-desc {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-xs);
}

.weather-details {
    font-size: var(--font-size-sm);
    opacity: 0.9;
}

.weather-forecast {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: var(--space-md);
    text-align: center;
}

.forecast-day {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.forecast-date {
    font-size: var(--font-size-sm);
    opacity: 0.9;
}

.forecast-icon {
    font-size: var(--font-size-xl);
    margin: var(--space-xs) 0;
}

.forecast-temp {
    font-weight: 600;
}

/* ===== RECENT ACTIVITY ===== */
.activity-section {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
}

.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
}

.activity-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--dark);
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.activity-item {
    display: flex;
    gap: var(--space-md);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--light);
    position: relative;
}

.activity-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.activity-item::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 25px;
    bottom: -25px;
    width: 2px;
    background: var(--light);
}

.activity-item:last-child::before {
    display: none;
}

.activity-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: var(--font-size-sm);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.activity-content {
    flex: 1;
}

.activity-title {
    font-weight: 600;
    margin-bottom: var(--space-xs);
    font-size: var(--font-size-md);
}

.activity-desc {
    font-size: var(--font-size-sm);
    color: var(--gray);
    margin-bottom: var(--space-xs);
}

.activity-time {
    font-size: var(--font-size-xs);
    color: var(--gray);
}

/* ===== DASHBOARD RESPONSIVE DESIGN ===== */
@media (max-width: 1024px) {
    .dashboard-main {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
        padding: var(--space-lg);
    }
    
    .dashboard-sidebar {
        position: static;
        order: 2;
    }
    
    .dashboard-content {
        order: 1;
    }
    
    .charts-section {
        grid-template-columns: 1fr;
    }
    
    .quick-stats {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 768px) {
    .dashboard-main {
        padding: var(--space-md);
    }
    
    .content-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
    }
    
    .content-actions {
        width: 100%;
        justify-content: space-between;
    }
    
    .quick-stats {
        grid-template-columns: 1fr;
    }
    
    .sensor-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .weather-main {
        flex-direction: column;
        text-align: center;
        gap: var(--space-md);
    }
    
    .weather-info {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .dashboard-main {
        padding: var(--space-sm);
    }
    
    .stat-card {
        flex-direction: column;
        text-align: center;
    }
    
    .sensor-grid {
        grid-template-columns: 1fr;
    }
    
    .chart-actions {
        flex-wrap: wrap;
    }
    
    .time-filter {
        width: 100%;
        margin-top: var(--space-sm);
    }
}

/* ===== DASHBOARD ANIMATIONS ===== */
@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(46, 125, 50, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(46, 125, 50, 0);
    }
}

.pulse-alert {
    animation: pulse-glow 2s infinite;
}

@keyframes slideInFromTop {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.dashboard-section {
    animation: slideInFromTop 0.6s ease-out;
}

.dashboard-section:nth-child(1) { animation-delay: 0.1s; }
.dashboard-section:nth-child(2) { animation-delay: 0.2s; }
.dashboard-section:nth-child(3) { animation-delay: 0.3s; }
.dashboard-section:nth-child(4) { animation-delay: 0.4s; }

/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
    .dashboard-container {
        background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    }
    
    .stat-card,
    .chart-card,
    .sensor-card,
    .alerts-section,
    .recommendations-section,
    .activity-section {
        background: #2d2d2d;
        color: var(--dark);
    }
    
    .stat-card:hover,
    .sensor-card:hover {
        border-color: var(--primary-light);
    }
    
    .alert-item {
        background: #3d3d3d;
    }
    
    .recommendation-item {
        background: #3d3d3d;
    }
    
    .recommendation-item:hover {
        background: #4d4d4d;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .dashboard-sidebar,
    .content-actions,
    .chart-actions,
    .recommendation-action {
        display: none !important;
    }
    
    .dashboard-main {
        grid-template-columns: 1fr;
        padding: 0;
    }
    
    .stat-card,
    .chart-card,
    .sensor-card {
        box-shadow: none;
        border: 1px solid #ddd;
        break-inside: avoid;
    }
    
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}
```

Cara Penggunaan:

1. Simpan file sebagai dashboard.css di folder CSS project Anda
2. Hubungkan ke HTML dengan menambahkan di bagian <head> setelah style.css:

```html
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/dashboard.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
```

Fitur Utama Dashboard CSS:

🎯 Layout & Structure

· Grid system khusus dashboard dengan sidebar sticky
· Responsive design untuk semua perangkat
· Sticky header dan navigation

πŸ“Š Data Visualization Components

· Stat cards dengan icon dan trend indicators
· Chart containers dengan filter controls
· Sensor data grid dengan status indicators
· Weather widget dengan forecast

⚡ Interactive Elements

· Hover effects dan animations
· Alert system dengan color coding
· Recommendation cards dengan actions
· Activity timeline dengan visual indicators

🎨 Visual Design

· Gradient backgrounds dan shadow effects
· Color-coded status indicators (healthy, warning, danger)
· Consistent spacing dan typography
· Dark mode support

πŸ“± Responsive Features

· Mobile-first approach
· Flexible grid layouts
· Collapsible sidebar pada mobile
· Optimized touch targets

πŸš€ Performance Optimizations

· Efficient CSS selectors
· Minimal repaints dan reflows
· Optimized animations
· Print styles

File ini memberikan pengalaman dashboard yang modern, interaktif, dan informatif untuk aplikasi FarmerSmartAI dengan fokus pada usability dan visual appeal.





π–‘π–Ύπ—‹π—Œπ–Ίπ—†π–»π—Žπ—‡π—€ 𝗄𝖾: π–ͺπ—ˆπ–½π–Ύ π–¨π—Œπ—‚ π–₯𝗂𝗅𝖾 responsif.css















Comments

Post a Comment

Popular posts from this blog

Aplikasi FarmerSmartAI:

  Aplikasi FarmerSmartAI: Bantu saya membuatkan sebuah aplikasi berbasis AI di bidang pertanian (AgriBisnis) yaitu semacam aplikasi FarmerSmartAI yang memanfaatkan Integrating Internet of Things, Artificial Intelligence, and Precision Agriculture for Sustainable Agribusiness Productivity and Climate-Resilient Farming Practices, dan hal lainnya. FarmerSmartAI : Rancangan Aplikasi Pertanian Berbasis AI Saya akan membantu Anda membuat rencana aplikasi FarmerSmartAI yang mengintegrasikan IoT, AI, dan presisi pertanian untuk produktivitas agribisnis yang berkelanjutan. Gambaran Umum FarmerSmartAI FarmerSmartAI adalah platform komprehensif yang memanfaatkan teknologi terkini untuk meningkatkan produktivitas pertanian sekaligus membangun ketahanan terhadap perubahan iklim. Fitur Utama FarmerSmartAI 1. Dashboard Cerdas · Memantau kondisi lahan secara real-time · Analisis prediktif hasil panen · Rekomendasi tindakan berbasis AI 2. Modul IoT dan Sensor · Sensor kelembaban tanah, suhu, dan k...
Read more

icon-generator.html

  FarmerSmartAI Icon Generator FarmerSmartAI Icon Pack Koleksi icon untuk aplikasi pertanian cerdas berbasis AI Preview Penggunaan 🌱 Mobile App πŸ€– Web Dashboard πŸ“± Mobile Icon CSS untuk Icon (Copy & Paste): /* FarmerSmartAI Base Icon */ .farmersmart-icon { width: 64px; height: 64px; border-radius: 16px; background: linear-grad...
Read more