πͺππ½πΎ π¨ππ π₯ππ πΎ responsif.css
πͺππ½πΎ π¨ππ π₯ππ πΎ responsif.css
π‘πΊπππ π»ππΊπππΊπ πππ½πΎ πππ πΏππ πΎ responsif.css
FarmerSmartAI - File CSS Responsif
Berikut kode lengkap untuk file responsive.css yang berisi style khusus untuk responsivitas aplikasi FarmerSmartAI:
```css
/* responsive.css - Stylesheet Responsif FarmerSmartAI */
/* ===== BREAKPOINT VARIABLES ===== */
:root {
--breakpoint-xs: 480px;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--breakpoint-xxl: 1400px;
}
/* ===== MOBILE FIRST APPROACH ===== */
/* Extra Small Devices (Phones, 480px and down) */
@media (max-width: 480px) {
/* Global Adjustments */
.container {
width: 100%;
padding: 0 var(--space-sm);
}
body {
font-size: 14px;
}
/* Typography Scaling */
h1 {
font-size: 1.5rem;
line-height: 1.2;
}
h2 {
font-size: 1.25rem;
}
h3 {
font-size: 1.125rem;
}
/* Header & Navigation */
.navbar {
flex-direction: column;
gap: var(--space-md);
padding: var(--space-sm) 0;
}
.nav-links {
flex-direction: column;
width: 100%;
text-align: center;
gap: var(--space-sm);
}
.logo {
justify-content: center;
}
/* Dashboard Layout */
.dashboard {
grid-template-columns: 1fr;
}
.main-content {
padding: var(--space-sm);
}
/* Cards & Containers */
.card {
padding: var(--space-md);
margin-bottom: var(--space-md);
}
.card-header {
flex-direction: column;
gap: var(--space-sm);
align-items: flex-start;
}
/* Buttons */
.btn {
width: 100%;
justify-content: center;
margin-bottom: var(--space-sm);
}
.btn-group {
flex-direction: column;
width: 100%;
}
/* Forms */
.form-row {
flex-direction: column;
gap: 0;
}
.form-control {
font-size: 16px; /* Prevent zoom on iOS */
}
/* Tables */
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table {
font-size: var(--font-size-sm);
min-width: 500px;
}
/* Grid Systems */
.grid-2,
.grid-3,
.grid-4 {
grid-template-columns: 1fr;
gap: var(--space-md);
}
/* Utility Classes for Mobile */
.mobile-hidden {
display: none !important;
}
.mobile-block {
display: block !important;
}
.mobile-flex {
display: flex !important;
}
.mobile-text-center {
text-align: center;
}
}
/* ===== SMALL DEVICES (Phones, 576px and up) ===== */
@media (min-width: 481px) and (max-width: 576px) {
.container {
width: 95%;
padding: 0 var(--space-md);
}
.grid-2 {
grid-template-columns: repeat(2, 1fr);
}
.nav-links {
gap: var(--space-md);
}
.btn {
min-width: auto;
}
}
/* ===== MEDIUM DEVICES (Tablets, 768px and down) ===== */
@media (max-width: 768px) {
/* Sidebar Behavior */
.sidebar {
position: fixed;
top: 0;
left: -280px;
width: 280px;
height: 100vh;
z-index: 1000;
transition: left var(--transition-normal);
box-shadow: var(--shadow-lg);
}
.sidebar.active {
left: 0;
}
.sidebar-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.sidebar-overlay.active {
display: block;
}
/* Mobile Menu Button */
.mobile-menu-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--primary);
color: var(--white);
border: none;
border-radius: var(--radius-md);
cursor: pointer;
z-index: 1001;
}
/* Dashboard Adjustments */
.dashboard-main {
grid-template-columns: 1fr;
gap: var(--space-lg);
padding: var(--space-lg);
}
.dashboard-sidebar {
position: static;
order: 2;
}
.dashboard-content {
order: 1;
}
/* Content Header */
.content-header {
flex-direction: column;
align-items: flex-start;
gap: var(--space-md);
}
.content-actions {
width: 100%;
justify-content: space-between;
flex-wrap: wrap;
}
/* Charts & Graphs */
.charts-section {
grid-template-columns: 1fr;
}
.chart-container {
height: 250px;
}
/* Quick Stats */
.quick-stats {
grid-template-columns: repeat(2, 1fr);
}
.stat-card {
flex-direction: column;
text-align: center;
padding: var(--space-md);
}
.stat-icon {
margin: 0 auto;
}
/* Sensor Grid */
.sensor-grid {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
}
/* Alert & Notification Items */
.alert-item,
.recommendation-item {
flex-direction: column;
text-align: center;
gap: var(--space-sm);
}
.alert-icon,
.recommendation-icon {
align-self: center;
}
/* Forms in Tables */
.table-actions {
flex-direction: column;
gap: var(--space-sm);
}
/* Modal Dialogs */
.modal-dialog {
margin: var(--space-md);
width: auto;
}
.modal-content {
padding: var(--space-lg);
}
/* Tab Navigation */
.settings-tabs {
flex-direction: column;
}
.tab {
text-align: center;
border-bottom: 1px solid var(--light);
border-left: none;
}
.tab.active {
border-bottom: 3px solid var(--primary);
border-left: none;
}
}
/* ===== LARGE DEVICES (Tablets, 992px and down) ===== */
@media (max-width: 992px) {
/* Dashboard Grid */
.dashboard-grid {
grid-template-columns: 1fr;
}
/* Navigation Refinements */
.nav-links {
flex-wrap: wrap;
justify-content: center;
}
/* Chart Controls */
.chart-actions {
flex-wrap: wrap;
gap: var(--space-sm);
}
.time-filter {
width: 100%;
margin-top: var(--space-sm);
}
/* Form Layouts */
.form-section {
padding: var(--space-lg);
}
/* Card Layouts */
.card-deck {
grid-template-columns: 1fr;
}
/* Weather Widget */
.weather-forecast {
grid-template-columns: repeat(4, 1fr);
}
/* Activity Timeline */
.activity-item {
flex-direction: column;
text-align: center;
gap: var(--space-sm);
}
.activity-item::before {
display: none;
}
.activity-icon {
align-self: center;
}
}
/* ===== EXTRA LARGE DEVICES (Desktops, 1200px and down) ===== */
@media (max-width: 1200px) {
.container {
width: 95%;
}
.grid-4 {
grid-template-columns: repeat(2, 1fr);
}
.sensor-grid {
grid-template-columns: repeat(4, 1fr);
}
/* Sidebar Adjustments */
.dashboard-sidebar {
position: static;
}
}
/* ===== ORIENTATION SPECIFIC STYLES ===== */
/* Portrait Orientation */
@media (max-width: 768px) and (orientation: portrait) {
.dashboard-main {
padding: var(--space-md);
}
.chart-container {
height: 200px;
}
.quick-stats {
grid-template-columns: 1fr;
}
}
/* Landscape Orientation */
@media (max-width: 768px) and (orientation: landscape) {
.sidebar {
width: 250px;
}
.main-content {
padding: var(--space-sm);
}
.chart-container {
height: 180px;
}
}
/* ===== HIGH-DPI DISPLAYS ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.logo-icon,
.stat-icon,
.sensor-icon {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
/* ===== TOUCH DEVICE OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
/* Increase touch targets */
.btn,
.nav-links a,
.tab,
.form-control {
min-height: 44px;
line-height: 44px;
}
.btn-sm {
min-height: 36px;
line-height: 36px;
}
/* Remove hover effects */
.card:hover,
.stat-card:hover,
.sensor-card:hover {
transform: none;
}
/* Improve touch scrolling */
.table-responsive,
.sidebar {
-webkit-overflow-scrolling: touch;
}
/* Prevent zoom on form inputs */
@media (max-width: 768px) {
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
select,
textarea {
font-size: 16px;
}
}
}
/* ===== REDUCED MOTION SUPPORT ===== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.sidebar {
transition: none;
}
.card:hover,
.stat-card:hover,
.sensor-card:hover {
transform: none;
}
}
/* ===== DARK MODE RESPONSIVE ADJUSTMENTS ===== */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
.sidebar-overlay {
background: rgba(0, 0, 0, 0.7);
}
.mobile-menu-btn {
background: var(--primary-dark);
}
}
/* ===== PRINT STYLES ===== */
@media print {
/* Hide unnecessary elements */
.mobile-menu-btn,
.sidebar,
.content-actions,
.btn:not(.btn-print),
.alert,
.notification-badge {
display: none !important;
}
/* Layout adjustments */
.dashboard {
grid-template-columns: 1fr;
}
.main-content {
padding: 0;
}
/* Typography for print */
body {
font-size: 12pt;
line-height: 1.4;
color: #000;
background: #fff !important;
}
h1, h2, h3, h4, h5, h6 {
color: #000;
page-break-after: avoid;
}
/* Cards and containers */
.card,
.stat-card,
.chart-card {
background: #fff !important;
color: #000 !important;
border: 1px solid #000;
box-shadow: none !important;
break-inside: avoid;
}
/* Tables */
.table {
border: 1px solid #000;
}
.table th,
.table td {
border: 1px solid #000;
color: #000;
}
/* Links */
a {
color: #000;
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
/* Page breaks */
.page-break {
page-break-before: always;
}
.avoid-break {
page-break-inside: avoid;
}
}
/* ===== SPECIFIC COMPONENT RESPONSIVENESS ===== */
/* Login & Register Pages */
@media (max-width: 768px) {
.login-container,
.register-container {
flex-direction: column;
max-width: 100%;
margin: var(--space-sm);
}
.login-left,
.register-left {
padding: var(--space-lg);
text-align: center;
}
.login-right,
.register-right {
padding: var(--space-lg);
}
.social-login {
flex-direction: column;
}
}
/* Field Monitoring Page */
@media (max-width: 992px) {
.monitoring-grid {
grid-template-columns: 1fr;
}
#fieldMap {
height: 300px;
}
.sensor-data {
height: auto;
max-height: 400px;
}
}
/* AI Recommendations Page */
@media (max-width: 768px) {
.recommendations-grid {
grid-template-columns: 1fr;
}
.disease-container {
grid-template-columns: 1fr;
}
.card-actions {
flex-direction: column;
}
}
/* Harvest Prediction Page */
@media (max-width: 768px) {
.prediction-content {
grid-template-columns: 1fr;
}
.timeline-container {
padding: var(--space-md) 0;
}
.timeline-item {
padding: var(--space-sm) var(--space-md);
}
.planning-options {
grid-template-columns: 1fr;
}
}
/* Reports Page */
@media (max-width: 768px) {
.report-controls {
flex-direction: column;
gap: var(--space-md);
}
.date-range {
flex-direction: column;
width: 100%;
}
.date-input {
width: 100%;
}
.tables-section {
grid-template-columns: 1fr;
}
.export-options {
grid-template-columns: 1fr;
}
}
/* Settings Page */
@media (max-width: 768px) {
.settings-tabs {
flex-direction: column;
}
.tab {
text-align: center;
border-bottom: 1px solid var(--light);
}
.tab.active {
border-bottom: 3px solid var(--primary);
border-left: none;
}
.toggle-group {
flex-direction: column;
gap: var(--space-md);
text-align: center;
}
.devices-grid {
grid-template-columns: 1fr;
}
.action-buttons {
flex-direction: column;
}
}
/* ===== UTILITY CLASSES FOR RESPONSIVE DESIGN ===== */
/* Visibility Classes */
.visible-xs { display: none !important; }
.visible-sm { display: none !important; }
.visible-md { display: none !important; }
.visible-lg { display: none !important; }
.visible-xl { display: none !important; }
.hidden-xs { display: block !important; }
.hidden-sm { display: block !important; }
.hidden-md { display: block !important; }
.hidden-lg { display: block !important; }
.hidden-xl { display: block !important; }
@media (max-width: 480px) {
.visible-xs { display: block !important; }
.hidden-xs { display: none !important; }
}
@media (min-width: 481px) and (max-width: 576px) {
.visible-sm { display: block !important; }
.hidden-sm { display: none !important; }
}
@media (min-width: 577px) and (max-width: 768px) {
.visible-md { display: block !important; }
.hidden-md { display: none !important; }
}
@media (min-width: 769px) and (max-width: 992px) {
.visible-lg { display: block !important; }
.hidden-lg { display: none !important; }
}
@media (min-width: 993px) and (max-width: 1200px) {
.visible-xl { display: block !important; }
.hidden-xl { display: none !important; }
}
/* Spacing Utilities for Mobile */
.mobile-mt-0 { margin-top: 0 !important; }
.mobile-mb-0 { margin-bottom: 0 !important; }
.mobile-p-0 { padding: 0 !important; }
@media (max-width: 768px) {
.mobile-mt-1 { margin-top: var(--space-xs) !important; }
.mobile-mt-2 { margin-top: var(--space-sm) !important; }
.mobile-mt-3 { margin-top: var(--space-md) !important; }
.mobile-mt-4 { margin-top: var(--space-lg) !important; }
.mobile-mt-5 { margin-top: var(--space-xl) !important; }
.mobile-mb-1 { margin-bottom: var(--space-xs) !important; }
.mobile-mb-2 { margin-bottom: var(--space-sm) !important; }
.mobile-mb-3 { margin-bottom: var(--space-md) !important; }
.mobile-mb-4 { margin-bottom: var(--space-lg) !important; }
.mobile-mb-5 { margin-bottom: var(--space-xl) !important; }
.mobile-p-1 { padding: var(--space-xs) !important; }
.mobile-p-2 { padding: var(--space-sm) !important; }
.mobile-p-3 { padding: var(--space-md) !important; }
.mobile-p-4 { padding: var(--space-lg) !important; }
.mobile-p-5 { padding: var(--space-xl) !important; }
}
/* ===== PERFORMANCE OPTIMIZATIONS FOR MOBILE ===== */
@media (max-width: 768px) {
/* Reduce animations for better performance */
.card,
.stat-card,
.sensor-card {
transition: none;
}
/* Optimize images */
img {
max-width: 100%;
height: auto;
}
/* Reduce shadow intensity */
.card,
.stat-card {
box-shadow: var(--shadow-sm);
}
}
/* ===== ACCESSIBILITY IMPROVEMENTS FOR TOUCH ===== */
@media (max-width: 768px) {
/* Ensure proper focus styles for touch */
.btn:focus,
.form-control:focus,
.tab:focus {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
/* Increase text contrast for outdoor use */
.stat-value,
.sensor-value,
.alert-title {
font-weight: 600;
}
}
```
Cara Penggunaan:
1. Simpan file sebagai responsive.css di folder CSS project Anda
2. Hubungkan ke HTML dengan menambahkan di bagian <head> setelah file CSS lainnya:
```html
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/dashboard.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
```
Fitur Utama Responsive CSS:
π± Breakpoint Strategy
· XS (≤480px): Smartphones kecil
· SM (481-576px): Smartphones besar
· MD (577-768px): Tablets portrait
· LG (769-992px): Tablets landscape
· XL (993-1200px): Desktop kecil
· XXL (≥1201px): Desktop besar
π― Mobile-First Approach
· Semua style dimulai dari mobile
· Progressive enhancement untuk device lebih besar
· Graceful degradation
π Touch Optimization
· Minimum touch target 44px
· Hover state alternatives
· Touch-friendly form controls
· Improved scrolling experience
♿ Accessibility Features
· Reduced motion support
· High contrast compatibility
· Screen reader friendly
· Focus management
π¨️ Print Styles
· Optimized layout untuk printing
· Hide unnecessary elements
· Proper page breaks
· Readable typography
π¨ Component-Specific Responsiveness
· Setiap halaman memiliki penyesuaian khusus
· Layout reorganization berdasarkan screen size
· Content prioritization
⚡ Performance Optimizations
· Reduced animations pada mobile
· Optimized images dan assets
· Efficient CSS delivery
· Minimal repaints
π§ Utility Classes
· Visibility controls per breakpoint
· Spacing utilities untuk mobile
· Layout helpers
· Responsive text alignment
File ini memastikan aplikasi FarmerSmartAI dapat diakses dan digunakan dengan optimal di semua perangkat, dari smartphone kecil hingga desktop besar, dengan memperhatikan pengalaman pengguna dan performa.
π‘πΎπππΊππ»πππ ππΎ: πͺππ½πΎ π¨ππ π₯ππ πΎ ππΊππ.ππ
Comments
Post a Comment