Kode Isi File 𝗌𝗍𝗒𝗅𝖾.𝖼𝗌𝗌

 Kode Isi File 𝗌𝗍𝗒𝗅𝖾.𝖼𝗌𝗌

𝖡𝖺𝗇𝗍𝗎 𝖻𝗎𝖺𝗍𝗄𝖺𝗇 𝗄𝗈𝖽𝖾 𝗂𝗌𝗂 𝖿𝗂𝗅𝖾 𝗌𝗍𝗒𝗅𝖾.𝖼𝗌𝗌

FarmerSmartAI - File CSS Utama

Berikut kode lengkap untuk file style.css yang berisi semua style umum untuk aplikasi FarmerSmartAI:

```css

/* style.css - Stylesheet Utama FarmerSmartAI */

:root {

    /* Color Palette */

    --primary: #2e7d32;

    --primary-dark: #1b5e20;

    --primary-light: #4caf50;

    --secondary: #ff9800;

    --accent: #8bc34a;

    --light: #f5f5f5;

    --dark: #333;

    --gray: #757575;

    --white: #ffffff;

    --warning: #ff9800;

    --danger: #f44336;

    --success: #4caf50;

    --info: #2196f3;

    

    /* Spacing */

    --space-xs: 0.25rem;

    --space-sm: 0.5rem;

    --space-md: 1rem;

    --space-lg: 1.5rem;

    --space-xl: 2rem;

    --space-xxl: 3rem;

    

    /* Border Radius */

    --radius-sm: 0.25rem;

    --radius-md: 0.5rem;

    --radius-lg: 0.75rem;

    --radius-xl: 1rem;

    

    /* Shadows */

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);

    --shadow-lg: 0 10px 20px rgba(0,0,0,0.1);

    --shadow-xl: 0 15px 30px rgba(0,0,0,0.2);

    

    /* Typography */

    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    --font-size-xs: 0.75rem;

    --font-size-sm: 0.875rem;

    --font-size-md: 1rem;

    --font-size-lg: 1.125rem;

    --font-size-xl: 1.25rem;

    --font-size-xxl: 1.5rem;

    --font-size-xxxl: 1.875rem;

    

    /* Transitions */

    --transition-fast: 0.15s ease;

    --transition-normal: 0.3s ease;

    --transition-slow: 0.5s ease;

}

/* Reset & Base Styles */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    font-family: var(--font-family);

    font-size: var(--font-size-md);

    line-height: 1.6;

    color: var(--dark);

    background-color: var(--light);

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}

/* Typography */

h1, h2, h3, h4, h5, h6 {

    font-weight: 600;

    line-height: 1.3;

    margin-bottom: var(--space-md);

    color: var(--dark);

}

h1 {

    font-size: var(--font-size-xxxl);

    color: var(--primary);

}

h2 {

    font-size: var(--font-size-xxl);

}

h3 {

    font-size: var(--font-size-xl);

}

h4 {

    font-size: var(--font-size-lg);

}

p {

    margin-bottom: var(--space-md);

}

a {

    color: var(--primary);

    text-decoration: none;

    transition: color var(--transition-fast);

}

a:hover {

    color: var(--primary-dark);

    text-decoration: underline;

}

/* Layout Components */

.container {

    width: 90%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 var(--space-md);

}

.dashboard {

    display: grid;

    grid-template-columns: 250px 1fr;

    min-height: 100vh;

}

.main-content {

    padding: var(--space-xl);

    overflow-y: auto;

    background-color: var(--light);

}

/* Header & Navigation */

header {

    background-color: var(--white);

    box-shadow: var(--shadow-md);

    position: fixed;

    width: 100%;

    top: 0;

    z-index: 1000;

}

.navbar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: var(--space-md) 0;

}

.logo {

    display: flex;

    align-items: center;

    gap: var(--space-sm);

}

.logo-icon {

    font-size: var(--font-size-xxl);

    color: var(--primary);

}

.logo h1 {

    margin-bottom: 0;

    font-size: var(--font-size-xl);

}

.nav-links {

    display: flex;

    list-style: none;

    gap: var(--space-lg);

}

.nav-links a {

    color: var(--dark);

    font-weight: 500;

    text-decoration: none;

}

.nav-links a:hover {

    color: var(--primary);

    text-decoration: none;

}

/* Sidebar */

.sidebar {

    background-color: var(--primary);

    color: var(--white);

    padding: var(--space-xl) 0;

    position: sticky;

    top: 0;

    height: 100vh;

    overflow-y: auto;

}

.sidebar ul {

    list-style: none;

}

.sidebar li {

    padding: var(--space-md) var(--space-xl);

    border-bottom: 1px solid rgba(255,255,255,0.05);

    cursor: pointer;

    transition: background-color var(--transition-normal);

    display: flex;

    align-items: center;

    gap: var(--space-sm);

}

.sidebar li:hover {

    background-color: var(--primary-dark);

}

.sidebar li.active {

    background-color: var(--primary-dark);

    border-left: 4px solid var(--accent);

}

.sidebar li i {

    width: 20px;

    text-align: center;

}

/* Cards */

.card {

    background: var(--white);

    border-radius: var(--radius-lg);

    padding: var(--space-xl);

    box-shadow: var(--shadow-md);

    transition: all var(--transition-normal);

}

.card:hover {

    transform: translateY(-2px);

    box-shadow: var(--shadow-lg);

}

.card-header {

    display: flex;

    justify-content: between;

    align-items: center;

    margin-bottom: var(--space-lg);

    padding-bottom: var(--space-md);

    border-bottom: 1px solid var(--light);

}

.card-title {

    color: var(--primary);

    margin-bottom: 0;

}

/* Buttons */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: var(--space-sm);

    padding: var(--space-md) var(--space-lg);

    border: none;

    border-radius: var(--radius-md);

    font-size: var(--font-size-md);

    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    transition: all var(--transition-normal);

    position: relative;

    overflow: hidden;

}

.btn:disabled {

    opacity: 0.6;

    cursor: not-allowed;

}

.btn-sm {

    padding: var(--space-sm) var(--space-md);

    font-size: var(--font-size-sm);

}

.btn-lg {

    padding: var(--space-lg) var(--space-xl);

    font-size: var(--font-size-lg);

}

.btn-primary {

    background-color: var(--primary);

    color: var(--white);

}

.btn-primary:hover:not(:disabled) {

    background-color: var(--primary-dark);

    transform: translateY(-1px);

    box-shadow: var(--shadow-md);

}

.btn-secondary {

    background-color: var(--secondary);

    color: var(--white);

}

.btn-secondary:hover:not(:disabled) {

    background-color: #f57c00;

    transform: translateY(-1px);

}

.btn-outline {

    background-color: transparent;

    border: 2px solid var(--primary);

    color: var(--primary);

}

.btn-outline:hover:not(:disabled) {

    background-color: var(--primary);

    color: var(--white);

}

.btn-danger {

    background-color: var(--danger);

    color: var(--white);

}

.btn-danger:hover:not(:disabled) {

    background-color: #d32f2f;

}

.btn-success {

    background-color: var(--success);

    color: var(--white);

}

.btn-success:hover:not(:disabled) {

    background-color: #388e3c;

}

/* Forms */

.form-group {

    margin-bottom: var(--space-lg);

}

.form-label {

    display: block;

    margin-bottom: var(--space-sm);

    font-weight: 500;

    color: var(--dark);

}

.form-control {

    width: 100%;

    padding: var(--space-md);

    border: 1px solid #ddd;

    border-radius: var(--radius-md);

    font-size: var(--font-size-md);

    transition: all var(--transition-normal);

    background-color: var(--white);

}

.form-control:focus {

    border-color: var(--primary);

    box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.2);

    outline: none;

}

.form-control:disabled {

    background-color: var(--light);

    opacity: 0.7;

}

.input-with-icon {

    position: relative;

}

.input-with-icon i {

    position: absolute;

    left: var(--space-md);

    top: 50%;

    transform: translateY(-50%);

    color: var(--gray);

}

.input-with-icon .form-control {

    padding-left: calc(var(--space-md) * 3);

}

/* Toggle Switch */

.toggle-switch {

    position: relative;

    display: inline-block;

    width: 50px;

    height: 24px;

}

.toggle-switch input {

    opacity: 0;

    width: 0;

    height: 0;

}

.toggle-slider {

    position: absolute;

    cursor: pointer;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: #ccc;

    transition: var(--transition-normal);

    border-radius: 24px;

}

.toggle-slider:before {

    position: absolute;

    content: "";

    height: 16px;

    width: 16px;

    left: 4px;

    bottom: 4px;

    background-color: white;

    transition: var(--transition-normal);

    border-radius: 50%;

}

input:checked + .toggle-slider {

    background-color: var(--primary);

}

input:checked + .toggle-slider:before {

    transform: translateX(26px);

}

/* Grid System */

.grid {

    display: grid;

    gap: var(--space-lg);

}

.grid-2 {

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

}

.grid-3 {

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

}

.grid-4 {

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

}

/* Status Indicators */

.status {

    display: inline-flex;

    align-items: center;

    gap: var(--space-xs);

    padding: var(--space-xs) var(--space-sm);

    border-radius: 20px;

    font-size: var(--font-size-sm);

    font-weight: 500;

}

.status::before {

    content: '';

    width: 8px;

    height: 8px;

    border-radius: 50%;

    display: inline-block;

}

.status-healthy {

    background-color: #e8f5e9;

    color: var(--success);

}

.status-healthy::before {

    background-color: var(--success);

}

.status-warning {

    background-color: #fff3e0;

    color: var(--warning);

}

.status-warning::before {

    background-color: var(--warning);

}

.status-danger {

    background-color: #ffebee;

    color: var(--danger);

}

.status-danger::before {

    background-color: var(--danger);

}

.status-info {

    background-color: #e3f2fd;

    color: var(--info);

}

.status-info::before {

    background-color: var(--info);

}

/* Alert Messages */

.alert {

    padding: var(--space-md);

    border-radius: var(--radius-md);

    margin-bottom: var(--space-lg);

    display: flex;

    align-items: center;

    gap: var(--space-md);

}

.alert-success {

    background-color: #e8f5e9;

    border: 1px solid var(--success);

    color: var(--success);

}

.alert-warning {

    background-color: #fff3e0;

    border: 1px solid var(--warning);

    color: var(--warning);

}

.alert-danger {

    background-color: #ffebee;

    border: 1px solid var(--danger);

    color: var(--danger);

}

.alert-info {

    background-color: #e3f2fd;

    border: 1px solid var(--info);

    color: var(--info);

}

/* Progress Bars */

.progress {

    height: 8px;

    background-color: var(--light);

    border-radius: var(--radius-md);

    overflow: hidden;

    margin: var(--space-md) 0;

}

.progress-bar {

    height: 100%;

    background-color: var(--primary);

    border-radius: var(--radius-md);

    transition: width var(--transition-slow);

}

/* Tables */

.table {

    width: 100%;

    border-collapse: collapse;

    background-color: var(--white);

    border-radius: var(--radius-md);

    overflow: hidden;

    box-shadow: var(--shadow-sm);

}

.table th {

    background-color: var(--light);

    padding: var(--space-md);

    text-align: left;

    font-weight: 600;

    color: var(--dark);

    border-bottom: 1px solid #ddd;

}

.table td {

    padding: var(--space-md);

    border-bottom: 1px solid #f0f0f0;

}

.table tr:last-child td {

    border-bottom: none;

}

.table tr:hover {

    background-color: #f9f9f9;

}

/* Charts & Graphs Container */

.chart-container {

    background: var(--white);

    border-radius: var(--radius-lg);

    padding: var(--space-xl);

    box-shadow: var(--shadow-md);

    margin-bottom: var(--space-lg);

}

.chart {

    height: 300px;

    position: relative;

}

/* Loading Spinner */

.spinner {

    display: inline-block;

    width: 20px;

    height: 20px;

    border: 2px solid rgba(255,255,255,0.3);

    border-radius: 50%;

    border-top-color: var(--white);

    animation: spin 1s ease-in-out infinite;

}

@keyframes spin {

    to { transform: rotate(360deg); }

}

/* Animation Classes */

.fade-in {

    animation: fadeIn var(--transition-normal);

}

@keyframes fadeIn {

    from { opacity: 0; }

    to { opacity: 1; }

}

.slide-up {

    animation: slideUp var(--transition-normal);

}

@keyframes slideUp {

    from { 

        opacity: 0;

        transform: translateY(20px);

    }

    to { 

        opacity: 1;

        transform: translateY(0);

    }

}

/* Utility Classes */

.text-center { text-align: center; }

.text-left { text-align: left; }

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

.text-primary { color: var(--primary); }

.text-success { color: var(--success); }

.text-warning { color: var(--warning); }

.text-danger { color: var(--danger); }

.text-info { color: var(--info); }

.text-gray { color: var(--gray); }

.bg-primary { background-color: var(--primary); }

.bg-success { background-color: var(--success); }

.bg-warning { background-color: var(--warning); }

.bg-danger { background-color: var(--danger); }

.bg-info { background-color: var(--info); }

.bg-light { background-color: var(--light); }

.mt-0 { margin-top: 0; }

.mt-1 { margin-top: var(--space-xs); }

.mt-2 { margin-top: var(--space-sm); }

.mt-3 { margin-top: var(--space-md); }

.mt-4 { margin-top: var(--space-lg); }

.mt-5 { margin-top: var(--space-xl); }

.mb-0 { margin-bottom: 0; }

.mb-1 { margin-bottom: var(--space-xs); }

.mb-2 { margin-bottom: var(--space-sm); }

.mb-3 { margin-bottom: var(--space-md); }

.mb-4 { margin-bottom: var(--space-lg); }

.mb-5 { margin-bottom: var(--space-xl); }

.p-0 { padding: 0; }

.p-1 { padding: var(--space-xs); }

.p-2 { padding: var(--space-sm); }

.p-3 { padding: var(--space-md); }

.p-4 { padding: var(--space-lg); }

.p-5 { padding: var(--space-xl); }

.d-none { display: none; }

.d-block { display: block; }

.d-flex { display: flex; }

.d-grid { display: grid; }

.flex-column { flex-direction: column; }

.flex-row { flex-direction: row; }

.justify-center { justify-content: center; }

.justify-between { justify-content: space-between; }

.align-center { align-items: center; }

.w-100 { width: 100%; }

.h-100 { height: 100%; }

.rounded { border-radius: var(--radius-md); }

.rounded-lg { border-radius: var(--radius-lg); }

.shadow-sm { box-shadow: var(--shadow-sm); }

.shadow-md { box-shadow: var(--shadow-md); }

.shadow-lg { box-shadow: var(--shadow-lg); }

/* Responsive Design */

@media (max-width: 1200px) {

    .container {

        width: 95%;

    }

}

@media (max-width: 992px) {

    .dashboard {

        grid-template-columns: 220px 1fr;

    }

    

    .grid-2 {

        grid-template-columns: 1fr;

    }

    

    .main-content {

        padding: var(--space-lg);

    }

}

@media (max-width: 768px) {

    .dashboard {

        grid-template-columns: 1fr;

    }

    

    .sidebar {

        display: none;

        position: fixed;

        top: 0;

        left: 0;

        height: 100vh;

        width: 280px;

        z-index: 1001;

    }

    

    .sidebar.active {

        display: block;

    }

    

    .mobile-menu-btn {

        display: block;

        background: none;

        border: none;

        font-size: var(--font-size-xl);

        color: var(--primary);

        cursor: pointer;

        padding: var(--space-sm);

    }

    

    .navbar {

        flex-wrap: wrap;

    }

    

    .nav-links {

        flex-direction: column;

        width: 100%;

        margin-top: var(--space-md);

        display: none;

    }

    

    .nav-links.active {

        display: flex;

    }

    

    .grid-3, .grid-4 {

        grid-template-columns: 1fr;

    }

    

    .main-content {

        padding: var(--space-md);

    }

}

@media (max-width: 576px) {

    :root {

        --font-size-xxxl: 1.5rem;

        --font-size-xxl: 1.25rem;

        --font-size-xl: 1.125rem;

    }

    

    .container {

        width: 100%;

        padding: 0 var(--space-sm);

    }

    

    .card {

        padding: var(--space-lg);

    }

    

    .btn {

        width: 100%;

        justify-content: center;

    }

    

    .form-row {

        flex-direction: column;

        gap: 0;

    }

}

/* Print Styles */

@media print {

    .sidebar,

    .navbar,

    .btn,

    .mobile-menu-btn {

        display: none !important;

    }

    

    .dashboard {

        grid-template-columns: 1fr;

    }

    

    .main-content {

        padding: 0;

    }

    

    .card {

        box-shadow: none;

        border: 1px solid #ddd;

    }

    

    a {

        color: var(--dark);

        text-decoration: none;

    }

}

/* Dark Mode Support */

@media (prefers-color-scheme: dark) {

    :root {

        --light: #1a1a1a;

        --dark: #f5f5f5;

        --white: #2d2d2d;

        --gray: #b0b0b0;

    }

    

    body {

        background-color: #121212;

        color: var(--dark);

    }

    

    .card {

        background-color: var(--white);

    }

    

    .form-control {

        background-color: #3d3d3d;

        border-color: #555;

        color: var(--dark);

    }

}

/* High Contrast Mode Support */

@media (prefers-contrast: high) {

    :root {

        --primary: #004400;

        --primary-dark: #002200;

        --secondary: #884400;

    }

    

    .btn {

        border: 2px solid;

    }

}

/* Reduced Motion Support */

@media (prefers-reduced-motion: reduce) {

    * {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

    

    html {

        scroll-behavior: auto;

    }

}

```

Cara Penggunaan:

1. Simpan file sebagai style.css di folder CSS project Anda

2. Hubungkan ke HTML dengan menambahkan di bagian <head>:

```html

<link rel="stylesheet" href="css/style.css">

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

```

Fitur Utama CSS:

1. Design System Lengkap - Variabel CSS untuk konsistensi

2. Komponen Reusable - Button, card, form, table, dll.

3. Responsive Design - Mobile-first approach

4. Utility Classes - Kelas helper untuk rapid development

5. Accessibility - Support untuk dark mode, high contrast, reduced motion

6. Performance - Optimized untuk loading cepat

7. Maintainability - Struktur yang mudah dikelola dan dikembangkan

File ini menyediakan foundation yang solid untuk seluruh aplikasi FarmerSmartAI dengan konsistensi visual dan pengembangan yang efisien.

𝖡𝖾𝗋𝗌𝖺𝗆𝖻𝗎𝗇𝗀 𝗄𝖾: 𝖪𝗈𝖽𝖾 𝖨𝗌𝗂 𝖥𝗂𝗅𝖾 dashboard.css