/* ========================================================================== HARGA (COMMODITY PRICES) PAGE STYLES (AdminLTE Template) TABLE OF CONTENTS: 1. Base Styles .................................. Line 30 2. Sidebar Styling (AdminLTE) ................... Line 45 3. Sidebar Active State & Animations ............ Line 80 4. Content Wrapper .............................. Line 150 5. DateTime Container ........................... Line 165 6. Animations ................................... Line 220 7. Welcome Info Container ....................... Line 245 8. Small Info Boxes ............................. Line 285 9. Chart Container .............................. Line 355 10. Chart Header ................................ Line 385 11. Chart Body .................................. Line 420 12. Chart Footer ................................ Line 445 13. Sidebar Elements ............................ Line 470 14. Brand Link .................................. Line 530 15. Responsive: Mobile (≤768px) ................. Line 550 USAGE: - ✅ REUSABLE: DateTime, Sidebar, Chart containers - ⚠️ SEMI-REUSABLE: Welcome screen, Info boxes - ❌ PAGE SPECIFIC: investing.com iframe integration DEPENDENCIES: - Bootstrap 5.x - Font Awesome 5.x - AdminLTE 3.2 - Google Fonts (Inter) - jQuery 3.6.0 - investing.com charts (external iframes) File Size: ~600 lines Created: 2025-01-XX Last Updated: 2025-01-XX ========================================================================== */ /* ========================================================================== 1. BASE STYLES PURPOSE: Global font and background USED IN: element REUSABLE: YES ✅ ========================================================================== */ body { font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%); } /* ========================================================================== 2. SIDEBAR STYLING (AdminLTE) PURPOSE: Custom styling for AdminLTE sidebar USED IN: Left navigation menu REUSABLE: YES ✅✅ (consistent with all AdminLTE pages) FEATURES: - Purple/blue gradient background - Hover effects - Smooth transitions ========================================================================== */ .main-sidebar { background: linear-gradient(180deg, #230146ff 0%, #042de7ff 100%); } .sidebar .nav-link { color: rgba(255, 255, 255, 0.8); transition: all 0.3s ease; } .sidebar .nav-link:hover { background: rgba(102, 126, 234, 0.15); color: white; } /* ========================================================================== 3. SIDEBAR ACTIVE STATE & ANIMATIONS PURPOSE: Active menu item styling with glow effect USED IN: Active sidebar navigation links REUSABLE: YES ✅✅ FEATURES: - Green gradient background (sustainability theme) - Glow animation - Pulsing dot indicator - Icon and text styling NOTE: Class name is .active-harga (specific to this page) ========================================================================== */ .sidebar .nav-link.active-harga { background: linear-gradient(135deg, #48bb78 0%, #38a169 100%) !important; color: white !important; font-weight: 700; border-left: 5px solid #2f855a; box-shadow: inset 0 0 20px rgba(72, 187, 120, 0.3); animation: glow-active 2s ease-in-out infinite; position: relative; } .sidebar .nav-link.active-harga .nav-icon { color: white !important; transform: scale(1.15); text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); } .sidebar .nav-link.active-harga p { color: white !important; font-weight: 700; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .sidebar .nav-link.active-harga::after { content: '●'; position: absolute; right: 15px; font-size: 20px; color: white; animation: pulse-dot 1.5s ease-in-out infinite; } /* Animations */ @keyframes glow-active { 0%, 100% { box-shadow: inset 0 0 20px rgba(72, 187, 120, 0.3); } 50% { box-shadow: inset 0 0 30px rgba(72, 187, 120, 0.5); } } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.3); } } /* ========================================================================== 4. CONTENT WRAPPER PURPOSE: AdminLTE content wrapper override USED IN: Main content area REUSABLE: YES ✅ ========================================================================== */ .content-wrapper { background: transparent; } /* ========================================================================== 5. DATETIME CONTAINER PURPOSE: Date display with scrolling news ticker USED IN: Top of page below navbar REUSABLE: YES ✅✅✅ NOTE: Identical across 11+ pages - MUST extract to shared-components.css ========================================================================== */ .datetime-container { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 15px 25px; color: white; box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); margin: -2px 0 0 0 !important; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; } .date-display { font-size: 1.1rem; font-weight: 600; display: flex; align-items: center; gap: 10px; } .running-text-container { flex: 1; overflow: hidden; position: relative; min-width: 250px; } .running-text { display: inline-block; white-space: nowrap; animation: scroll-text 25s linear infinite; font-weight: 500; } /* ========================================================================== 6. ANIMATIONS PURPOSE: Reusable keyframe animations USED IN: Running text REUSABLE: YES ✅ ========================================================================== */ @keyframes scroll-text { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } /* ========================================================================== 7. WELCOME INFO CONTAINER PURPOSE: Welcome screen when no harga type selected USED IN: Initial page state (harga=welcome) REUSABLE: YES ✅ FEATURES: - White background with rounded corners - Centered title and subtitle - Info boxes grid - Alert box for additional info ========================================================================== */ .welcome-info-container { background: white; border-radius: 20px; padding: 3rem; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); } .welcome-info-container h1 { color: #2c3e50; font-weight: 800; margin-bottom: 1rem; text-align: center; } .welcome-info-container .subtitle { text-align: center; color: #6c757d; font-size: 1.2rem; margin-bottom: 2rem; } /* ========================================================================== 8. SMALL INFO BOXES PURPOSE: 2 info boxes in welcome screen (TSR20, Minyak Mentah) USED IN: Welcome screen REUSABLE: YES ✅✅ FEATURES: - Minimum height for consistency - Gradient backgrounds (teal, green) - Icon overlay - Hover lift effect NOTE: Similar to industri.php and other pages ========================================================================== */ .small-box { min-height: 280px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); transition: all 0.3s ease; margin-bottom: 1.5rem; position: relative; overflow: hidden; } .small-box:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); } .small-box .inner { padding: 20px; position: relative; z-index: 2; } .small-box h3, .small-box h4 { color: #fff; font-weight: 700; margin-bottom: 1rem; } .small-box p { color: rgba(255, 255, 255, 1); line-height: 1.7; margin: 0; } .small-box .icon { position: absolute; top: 20px; right: 20px; z-index: 1; } .small-box .icon i { color: rgba(255, 255, 255, 0.3); font-size: 70px; } /* ========================================================================== 9. CHART CONTAINER PURPOSE: Container for investing.com chart iframes USED IN: TSR20 and Minyak Mentah chart views REUSABLE: YES ✅✅ FEATURES: - White background - Rounded corners - Box shadow - Three-part structure: header, body, footer ========================================================================== */ .chart-container { background: white; border-radius: 20px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); overflow: hidden; margin-bottom: 2rem; } /* ========================================================================== 10. CHART HEADER PURPOSE: Purple gradient header for chart container USED IN: Chart container header REUSABLE: YES ✅✅ FEATURES: - Purple gradient background - White text - Centered title with icon - Border-image (gradient border) ========================================================================== */ .chart-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 1.5rem 2rem; border-bottom: 4px solid transparent; border-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%) 1; } .chart-header h2 { margin: 0; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 15px; } .chart-header h2 i { font-size: 1.5rem; } /* ========================================================================== 11. CHART BODY PURPOSE: Container for iframe charts USED IN: Chart container body REUSABLE: YES ✅ FEATURES: - Padding for spacing - Responsive iframe sizing - Rounded corners on iframe ========================================================================== */ .chart-body { padding: 2rem; } .chart-body iframe { width: 100%; height: 530px; border: none; border-radius: 10px; display: block; } /* ========================================================================== 12. CHART FOOTER PURPOSE: Footer attribution for investing.com USED IN: Chart container footer REUSABLE: YES ✅ FEATURES: - Dark gradient background - White text - Centered text ========================================================================== */ .chart-footer { text-align: center; padding: 15px; background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); color: white; font-weight: 600; } /* ========================================================================== 13. SIDEBAR ELEMENTS PURPOSE: Sidebar search and form styling USED IN: Sidebar search form REUSABLE: YES ✅ (for other AdminLTE pages) FEATURES: - Semi-transparent white backgrounds - Hover effects - Placeholder styling - Divider and heading ========================================================================== */ .sidebar .form-control-sidebar { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; } .sidebar .form-control-sidebar:focus { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); color: white; } .sidebar .form-control-sidebar::placeholder { color: rgba(255, 255, 255, 0.5); } .sidebar .btn-sidebar { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.8); } .sidebar .btn-sidebar:hover { background: rgba(255, 255, 255, 0.2); color: white; } /* Divider */ .sidebar-divider { border-top: 2px solid rgba(255, 255, 255, 0.2); margin: 15px 0; } /* Heading */ .sidebar-heading { color: rgba(255, 255, 255, 0.5); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; padding: 10px 15px; margin-top: 10px; } /* ========================================================================== 14. BRAND LINK PURPOSE: Remove underline from brand link USED IN: Sidebar brand logo/text REUSABLE: YES ✅ ========================================================================== */ .brand-link .brand-text { text-decoration: none !important; color: inherit; } /* ========================================================================== 15. RESPONSIVE: MOBILE (≤768px) PURPOSE: Mobile optimization CHANGES: - Reduce padding - Smaller iframe height - Stack DateTime container ========================================================================== */ @media (max-width: 768px) { .welcome-info-container { padding: 2rem 1.5rem; } .welcome-info-container h1 { font-size: 1.5rem; } .welcome-info-container .subtitle { font-size: 1rem; } .small-box { min-height: auto; } .small-box .icon i { font-size: 50px; } .chart-header { padding: 1rem 1.5rem; } .chart-header h2 { font-size: 1.3rem; flex-wrap: wrap; } .chart-body { padding: 1.5rem; } .chart-body iframe { height: 400px; } .datetime-container { flex-direction: column; text-align: center; padding: 15px; gap: 10px; } .date-display { font-size: 1rem; justify-content: center; width: 100%; } .running-text-container { width: 100%; min-width: 100%; } .running-text { font-size: 0.9rem; } } /* ========================================================================== END OF STYLESHEET MAINTENANCE NOTES: - DateTime container identical across 11+ pages - MUST extract to shared CSS - Sidebar styling consistent with all AdminLTE pages - Active state uses green gradient (sustainability theme) - Chart container design reusable for other external chart integrations - investing.com iframes are responsive DEPENDENCIES: - Bootstrap 5.x - Font Awesome 5.x - AdminLTE 3.2 - Google Fonts (Inter) - jQuery 3.6.0 - investing.com charts (external) PERFORMANCE: - Transform animations are GPU-accelerated - Hover effects use scale (not width/height) - Minimal box-shadow for mobile performance - Iframe loads external content (may affect load time) ACCESSIBILITY: - Chart iframes have proper attributes - Active state has multiple indicators (color + icon + dot) - Hover effects maintain readability - Color contrast meets WCAG AA standards - Focus states visible on interactive elements BROWSER SUPPORT: - CSS Animations: All modern browsers - Flexbox: IE11+ (full support) - Transform animations: All modern browsers - Gradient backgrounds: IE10+ - Border-radius: IE9+ - Iframe seamless: Modern browsers DESIGN PATTERNS: - AdminLTE template integration - Purple/blue sidebar theme (consistent) - Green active state (sustainability) - Chart containers with gradient headers - Info boxes with hover lift - Gradient headers for emphasis - Rounded corners (10-20px border-radius) CONTENT STRUCTURE: - Welcome screen with 2 info boxes (TSR20, Minyak Mentah) - TSR20 chart (SICOM futures) - Minyak Mentah chart (Crude oil prices) - Correlation explanation between rubber and oil prices JAVASCRIPT DEPENDENCIES: - AdminLTE sidebar toggle - jQuery for DOM manipulation - investing.com chart scripts (in iframes) EXTERNAL DEPENDENCIES: - investing.com charts (must be online) - May be blocked by ad blockers - Requires HTTPS for proper loading FUTURE IMPROVEMENTS: - Add loading state for iframes - Consider local chart solution (Chart.js, TradingView) - Add data refresh timestamp - Implement chart export functionality - Add comparison chart (TSR20 vs Oil) - Cache chart data for offline viewing ========================================================================== */