| | |
| |
|
| | |
| | body { |
| | font-family: Arial, sans-serif; |
| | margin: 0; |
| | padding: 0; |
| | background-color: #f4f4f4; |
| | } |
| |
|
| | |
| | .header { |
| | background-color: #007bff; |
| | color: white; |
| | padding: 20px 0; |
| | } |
| |
|
| | .header .logo { |
| | font-size: 24px; |
| | text-align: center; |
| | } |
| |
|
| | .nav { |
| | text-align: center; |
| | } |
| |
|
| | .nav ul { |
| | list-style: none; |
| | padding: 0; |
| | } |
| |
|
| | .nav li { |
| | display: inline; |
| | margin: 0 15px; |
| | } |
| |
|
| | .nav a { |
| | color: white; |
| | text-decoration: none; |
| | } |
| |
|
| | |
| | .hero { |
| | background: url('../images/hero-bg.jpg') no-repeat center center/cover; |
| | color: white; |
| | padding: 60px 0; |
| | text-align: center; |
| | } |
| |
|
| | |
| | .map-section { |
| | padding: 40px 0; |
| | background-color: white; |
| | } |
| |
|
| | .map-container { |
| | height: 500px; |
| | margin-top: 20px; |
| | } |
| |
|
| | |
| | .control-panel { |
| | margin-bottom: 20px; |
| | } |
| |
|
| | |
| | .legend { |
| | margin-top: 20px; |
| | padding: 10px; |
| | background-color: #f9f9f9; |
| | border: 1px solid #ddd; |
| | } |
| |
|
| | |
| | .statistics-section { |
| | padding: 40px 0; |
| | background-color: #f4f4f4; |
| | } |
| |
|
| | .stat-card { |
| | background: white; |
| | border-radius: 5px; |
| | padding: 20px; |
| | margin: 10px; |
| | text-align: center; |
| | } |
| |
|
| | |
| | .footer { |
| | background-color: #007bff; |
| | color: white; |
| | padding: 20px 0; |
| | text-align: center; |
| | } |
| |
|
| | .footer-section { |
| | margin-bottom: 20px; |
| | } |
| |
|
| | .social-links { |
| | margin-top: 10px; |
| | } |
| |
|
| | .social-link { |
| | color: white; |
| | margin: 0 10px; |
| | text-decoration: none; |
| | } |
| |
|
| | |
| | .info-panel { |
| | display: none; |
| | position: fixed; |
| | top: 50%; |
| | left: 50%; |
| | transform: translate(-50%, -50%); |
| | background-color: white; |
| | border: 1px solid #ddd; |
| | z-index: 1000; |
| | width: 300px; |
| | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
| | } |
| |
|
| | .info-panel-header { |
| | background-color: #007bff; |
| | color: white; |
| | padding: 10px; |
| | text-align: center; |
| | } |
| |
|
| | .close-btn { |
| | background: none; |
| | border: none; |
| | color: white; |
| | font-size: 20px; |
| | cursor: pointer; |
| | } |
| |
|
| | #kasusTable { |
| | border-collapse: collapse; |
| | width: 100%; |
| | font-size: 14px; |
| | } |
| |
|
| | #kasusTable th, #kasusTable td { |
| | border-bottom: 1px solid #ddd; |
| | padding: 6px 8px; |
| | } |
| |
|
| | #kasusTable tr:nth-child(even) { |
| | background: #f9f9f9; |
| | } |
| |
|
| | #kasusTable th { |
| | background: #efefef; |
| | font-weight: bold; |
| | border-bottom: 2px solid #ccc; |
| | } |
| |
|
| | .summary-card { |
| | background: white; |
| | border-radius: 8px; |
| | |
| | } |
| |
|
| | .summary-title { |
| | font-size: 14px; |
| | color: #555; |
| | font-weight: 600; |
| | margin-bottom: 5px; |
| | text-transform: uppercase; |
| | } |
| |
|
| | .summary-value { |
| | font-size: 26px; |
| | font-weight: 700; |
| | color: #1f77b4; |
| | } |
| |
|