Tugas Akhir E32210601
This commit is contained in:
commit
692f297461
|
|
@ -0,0 +1,263 @@
|
||||||
|
#include <SPI.h>
|
||||||
|
#include <Wire.h>
|
||||||
|
#include "RTClib.h"
|
||||||
|
|
||||||
|
// INA226
|
||||||
|
#include <WiFi.h>
|
||||||
|
#include <HTTPClient.h>
|
||||||
|
#include <INA226_WE.h>
|
||||||
|
#define I2C_ADDRESS 0x40 //alamat I2C
|
||||||
|
|
||||||
|
// Config Wifi
|
||||||
|
const char *ssid = "KOSTR5"; //Nama Wifi
|
||||||
|
const char *password = "tanyapakjoko"; // pass wifi
|
||||||
|
INA226_WE ina226 = INA226_WE(I2C_ADDRESS);
|
||||||
|
|
||||||
|
//Global Variable
|
||||||
|
float shuntVoltage_mV = 0.0;
|
||||||
|
float loadVoltage_V = 0.0;
|
||||||
|
float busVoltage_V = 0.0;
|
||||||
|
float current_A = 0.0;
|
||||||
|
float power_mW = 0.0;
|
||||||
|
|
||||||
|
unsigned long previousMillis = 0; // variabel untuk menyimpan waktu terakhir pembaruan
|
||||||
|
const long interval = 10000; // interval waktu dalam milidetik
|
||||||
|
|
||||||
|
|
||||||
|
RTC_DS3231 rtc;
|
||||||
|
char daysOfTheWeek[7][12] = { "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" };
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const int RELAY_1 = 33;
|
||||||
|
const int RELAY_2 = 25;
|
||||||
|
const int RELAY_5 = 32;
|
||||||
|
|
||||||
|
int LDR_PIN_1 = 34;
|
||||||
|
int LDR_PIN_2 = 35;
|
||||||
|
|
||||||
|
|
||||||
|
int ldrValue1;
|
||||||
|
int ldrValue2;
|
||||||
|
|
||||||
|
|
||||||
|
void setup() {
|
||||||
|
// put your setup code here, to run once:
|
||||||
|
Serial.begin(115200);
|
||||||
|
|
||||||
|
Wire.begin();
|
||||||
|
ina226.init();
|
||||||
|
|
||||||
|
connectToWifi();
|
||||||
|
|
||||||
|
ina226.setResistorRange(0.075, 50.0); // choose resistor 5 mOhm and gain range up to 10 A
|
||||||
|
ina226.setCorrectionFactor(1.0);
|
||||||
|
if (!rtc.begin()) {
|
||||||
|
Serial.println("Couldn't find RTC");
|
||||||
|
while (1)
|
||||||
|
;
|
||||||
|
}
|
||||||
|
|
||||||
|
rtc.adjust(DateTime(__DATE__, __TIME__));
|
||||||
|
|
||||||
|
pinMode(LDR_PIN_1, INPUT);
|
||||||
|
pinMode(LDR_PIN_2, INPUT);
|
||||||
|
|
||||||
|
pinMode(RELAY_1, OUTPUT);
|
||||||
|
pinMode(RELAY_2, OUTPUT);
|
||||||
|
pinMode(RELAY_5, OUTPUT);
|
||||||
|
|
||||||
|
digitalWrite(RELAY_1, HIGH);
|
||||||
|
digitalWrite(RELAY_2, HIGH);
|
||||||
|
digitalWrite(RELAY_5, HIGH);
|
||||||
|
delay(500);
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
void loop() {
|
||||||
|
DateTime now = rtc.now();
|
||||||
|
|
||||||
|
int hour = now.hour();
|
||||||
|
int minute = now.minute();
|
||||||
|
int second = now.second();
|
||||||
|
|
||||||
|
|
||||||
|
ldrValue1 = digitalRead(LDR_PIN_1);
|
||||||
|
ldrValue2 = digitalRead(LDR_PIN_2);
|
||||||
|
|
||||||
|
Serial.println(ldrValue1);
|
||||||
|
Serial.println(ldrValue2);
|
||||||
|
|
||||||
|
delay(100);
|
||||||
|
showTime();
|
||||||
|
|
||||||
|
Serial.println(minute);
|
||||||
|
// mengaktifkan alat relay suplai power
|
||||||
|
if (hour >= 7 && minute >= 0) {
|
||||||
|
digitalWrite(RELAY_1, LOW);
|
||||||
|
Serial.println("Relay 4 CH nyala");
|
||||||
|
delay(100);
|
||||||
|
}
|
||||||
|
//mematikan alat relay suplay power
|
||||||
|
if (hour >= 18 && minute > 0) {
|
||||||
|
digitalWrite(RELAY_1, HIGH);
|
||||||
|
Serial.println("Relay 4 CH mati");
|
||||||
|
delay(100);
|
||||||
|
}
|
||||||
|
|
||||||
|
//reset panel ke popsisi awal
|
||||||
|
if (hour == 17 && minute == 58 && second >= 0) {
|
||||||
|
digitalWrite(RELAY_2, LOW);
|
||||||
|
delay(10);
|
||||||
|
} else if (hour == 17 && minute == 58 && second >= 20) {
|
||||||
|
digitalWrite(RELAY_2, HIGH);
|
||||||
|
delay(10);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Logika untuk relay 2 berdasarkan nilai LDR
|
||||||
|
if (ldrValue1 == 0) {
|
||||||
|
digitalWrite(RELAY_2, LOW);
|
||||||
|
Serial.println("nyala1");
|
||||||
|
delay(100);
|
||||||
|
} else {
|
||||||
|
digitalWrite(RELAY_2, HIGH);
|
||||||
|
Serial.println("mati1");
|
||||||
|
delay(100);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Logika untuk relay 5 berdasarkan nilai LDR
|
||||||
|
if (ldrValue2 == 0) {
|
||||||
|
digitalWrite(RELAY_5, LOW);
|
||||||
|
Serial.println("nyala1");
|
||||||
|
delay(100);
|
||||||
|
} else {
|
||||||
|
digitalWrite(RELAY_5, HIGH);
|
||||||
|
Serial.println("mati1");
|
||||||
|
delay(100);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//Perluangan tiap 10 meniit sekali dengan waktu RTC
|
||||||
|
// if (minute % 10 == 0 && second == 0) {
|
||||||
|
// bacaSensor();
|
||||||
|
// Serial.println("Data terbaca");
|
||||||
|
// delay(1000);
|
||||||
|
// kirim_data();
|
||||||
|
// Serial.println("Data terkirim");
|
||||||
|
// }
|
||||||
|
|
||||||
|
// bacaSensor();
|
||||||
|
// Serial.println("Data terbaca");
|
||||||
|
// delay(1000);
|
||||||
|
// kirim_data();
|
||||||
|
// Serial.println("Data terkirim");
|
||||||
|
|
||||||
|
//Perluangan tiap 10 meniit sekali dan mengambil data dari jam 7-18 wib dengan waktu RTC
|
||||||
|
if (hour >= 7 && hour < 18) {
|
||||||
|
if (minute % 10 == 0 && second == 0) {
|
||||||
|
bacaSensor(); // Memanggil fungsi untuk membaca sensor
|
||||||
|
Serial.println("Data terbaca");
|
||||||
|
delay(1000);
|
||||||
|
kirim_data(); // Memanggil fungsi untuk mengirim data
|
||||||
|
Serial.println("Data terkirim");
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
Serial.println("Tidak mengirim data (18.00 - 07.00 WIB)");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
void showTime() {
|
||||||
|
DateTime now = rtc.now();
|
||||||
|
Serial.print(now.hour(), DEC);
|
||||||
|
Serial.print(":");
|
||||||
|
if (now.minute() < 10) {
|
||||||
|
Serial.print("0");
|
||||||
|
}
|
||||||
|
Serial.print(now.minute(), DEC);
|
||||||
|
Serial.print(":");
|
||||||
|
if (now.second() < 10) {
|
||||||
|
Serial.print("0");
|
||||||
|
}
|
||||||
|
Serial.print(now.second(), DEC);
|
||||||
|
Serial.print(" ");
|
||||||
|
|
||||||
|
Serial.print(daysOfTheWeek[now.dayOfTheWeek()]);
|
||||||
|
Serial.print(" ");
|
||||||
|
|
||||||
|
Serial.print(now.day(), DEC);
|
||||||
|
Serial.print("-");
|
||||||
|
Serial.print(now.month(), DEC);
|
||||||
|
Serial.print("-");
|
||||||
|
Serial.println(now.year(), DEC);
|
||||||
|
}
|
||||||
|
|
||||||
|
void bacaSensor() {
|
||||||
|
ina226.readAndClearFlags();
|
||||||
|
shuntVoltage_mV = ina226.getShuntVoltage_mV();
|
||||||
|
busVoltage_V = ina226.getBusVoltage_V();
|
||||||
|
current_A = ina226.getCurrent_mA() /1000;
|
||||||
|
power_mW = ina226.getBusPower();
|
||||||
|
loadVoltage_V = busVoltage_V + (shuntVoltage_mV / 1000);
|
||||||
|
|
||||||
|
Serial.print("Shunt Voltage [mV]: ");
|
||||||
|
Serial.println(shuntVoltage_mV);
|
||||||
|
Serial.print("Bus Voltage [V]: ");
|
||||||
|
Serial.println(busVoltage_V);
|
||||||
|
Serial.print("Load Voltage [V]: ");
|
||||||
|
Serial.println(loadVoltage_V);
|
||||||
|
Serial.print("Current[A]: ");
|
||||||
|
Serial.println(current_A);
|
||||||
|
Serial.print("Bus Power [mW]: ");
|
||||||
|
Serial.println(power_mW);
|
||||||
|
if (!ina226.overflow) {
|
||||||
|
Serial.println("Values OK - no overflow");
|
||||||
|
} else {
|
||||||
|
Serial.println("Overflow! Choose higher current range");
|
||||||
|
}
|
||||||
|
Serial.println();
|
||||||
|
}
|
||||||
|
|
||||||
|
void kirim_data() {
|
||||||
|
|
||||||
|
int kelembaban = random(10, 20);
|
||||||
|
|
||||||
|
String postData = (String) "tegangan=" + loadVoltage_V + "&arus=" + current_A;
|
||||||
|
|
||||||
|
HTTPClient http;
|
||||||
|
http.begin("http://192.168.18.26/esp32_http/api2.php"); //mengirim ke database localhost melalui file api.php
|
||||||
|
http.addHeader("Content-Type", "application/x-www-form-urlencoded");
|
||||||
|
|
||||||
|
auto httpCode = http.POST(postData);
|
||||||
|
String payload = http.getString();
|
||||||
|
|
||||||
|
Serial.println(postData);
|
||||||
|
Serial.println(payload);
|
||||||
|
|
||||||
|
http.end();
|
||||||
|
}
|
||||||
|
|
||||||
|
void connectToWifi() {
|
||||||
|
delay(1000);
|
||||||
|
WiFi.mode(WIFI_OFF);
|
||||||
|
delay(1000);
|
||||||
|
WiFi.mode(WIFI_STA);
|
||||||
|
|
||||||
|
WiFi.begin(ssid, password);
|
||||||
|
Serial.println("");
|
||||||
|
|
||||||
|
Serial.print("Connecting");
|
||||||
|
// Wait for connection
|
||||||
|
while (WiFi.status() != WL_CONNECTED) {
|
||||||
|
delay(500);
|
||||||
|
Serial.print(".");
|
||||||
|
}
|
||||||
|
|
||||||
|
Serial.println("");
|
||||||
|
Serial.print("Connected to ");
|
||||||
|
Serial.println(ssid);
|
||||||
|
Serial.print("IP address: ");
|
||||||
|
Serial.println(WiFi.localIP()); //IP address assigned to your ESP
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
<?php
|
||||||
|
// database.php
|
||||||
|
$host = 'localhost';
|
||||||
|
$db = 'monitoringdaya';
|
||||||
|
$user = 'root';
|
||||||
|
$pass = '';
|
||||||
|
$charset = 'utf8mb4';
|
||||||
|
|
||||||
|
$dsn = "mysql:host=$host;dbname=$db;charset=$charset";
|
||||||
|
$options = [
|
||||||
|
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
|
||||||
|
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
|
||||||
|
PDO::ATTR_EMULATE_PREPARES => false,
|
||||||
|
];
|
||||||
|
|
||||||
|
try {
|
||||||
|
$pdo = new PDO($dsn, $user, $pass, $options);
|
||||||
|
} catch (\PDOException $e) {
|
||||||
|
throw new \PDOException($e->getMessage(), (int)$e->getCode());
|
||||||
|
}
|
||||||
|
|
||||||
|
function getData($date = null) {
|
||||||
|
global $pdo;
|
||||||
|
|
||||||
|
$query = "SELECT tegangan, arus, waktu FROM sensor";
|
||||||
|
$params = [];
|
||||||
|
|
||||||
|
if ($date) {
|
||||||
|
$query .= " WHERE DATE(waktu) = ?";
|
||||||
|
$params = [$date];
|
||||||
|
}
|
||||||
|
|
||||||
|
$query .= " ORDER BY waktu";
|
||||||
|
|
||||||
|
$stmt = $pdo->prepare($query);
|
||||||
|
$stmt->execute($params);
|
||||||
|
return $stmt->fetchAll();
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
<?php
|
||||||
|
// get_data.php
|
||||||
|
require_once 'database.php';
|
||||||
|
|
||||||
|
$date = $_GET['date'] ?? null;
|
||||||
|
|
||||||
|
$data = getData($date);
|
||||||
|
echo json_encode($data);
|
||||||
|
|
@ -0,0 +1,204 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="id">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Dashboard Monitoring Daya</title>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0/dist/chartjs-adapter-moment.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="content">
|
||||||
|
<header>
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title_h1">Dashboard Monitoring Daya</h1>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="dashboard">
|
||||||
|
<div id="dateFilter">
|
||||||
|
<!-- <label for="date">Pilih Tanggal:</label> -->
|
||||||
|
<input type="date" id="date">
|
||||||
|
<button class="btn" onclick="filterData()"><i class="bi bi-search"></i></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nama">
|
||||||
|
<div class="chart-nama">
|
||||||
|
<h1> Pengukuran Tegangan </h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="dashboard-tegangan-arus">
|
||||||
|
<div class="chart-container">
|
||||||
|
<canvas id="voltageChart"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nama">
|
||||||
|
<div class="chart-nama">
|
||||||
|
<h1> Pengukuran Arus </h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="dashboard-tegangan-arus">
|
||||||
|
<div class="chart-container">
|
||||||
|
<canvas id="currentChart"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="container">
|
||||||
|
<p class="copyright">© 2024 Dashboard Monitoring Daya</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button id="scrollTopBtn" class="scroll-top-btn" onclick="scrollToTop()"> ⇧</button>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.addEventListener("DOMContentLoaded", function() {
|
||||||
|
// Mendapatkan elemen input tanggal
|
||||||
|
var tanggalInput = document.getElementById("date");
|
||||||
|
|
||||||
|
// Mendapatkan tanggal hari ini
|
||||||
|
var today = new Date();
|
||||||
|
var day = String(today.getDate()).padStart(2, '0');
|
||||||
|
var month = String(today.getMonth() + 1).padStart(2, '0'); // Januari adalah 0!
|
||||||
|
var year = today.getFullYear();
|
||||||
|
|
||||||
|
// Format YYYY-MM-DD
|
||||||
|
var todayFormatted = year + '-' + month + '-' + day;
|
||||||
|
|
||||||
|
// Mengatur nilai input tanggal ke hari ini
|
||||||
|
tanggalInput.value = todayFormatted;
|
||||||
|
filterData();
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
let voltageChart, currentChart;
|
||||||
|
|
||||||
|
function createCharts(data) {
|
||||||
|
const ctx1 = document.getElementById('voltageChart').getContext('2d');
|
||||||
|
const ctx2 = document.getElementById('currentChart').getContext('2d');
|
||||||
|
|
||||||
|
// Mendapatkan nilai minimum untuk tegangan dan arus dari data
|
||||||
|
const minVoltage = Math.min(...data.map(item => item.tegangan));
|
||||||
|
const minCurrent = Math.min(...data.map(item => item.arus));
|
||||||
|
|
||||||
|
// Tentukan nilai minimum yang akan digunakan
|
||||||
|
const minVoltageValue = Math.floor(minVoltage) - 2; // Dimulai dari nilai minimum tegangan dikurangi 2
|
||||||
|
const minCurrentValue = Math.floor(minCurrent) - 2; // Dimulai dari nilai minimum arus dikurangi 2
|
||||||
|
|
||||||
|
const chartOptions = {
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
scales: {
|
||||||
|
x: {
|
||||||
|
type: 'time',
|
||||||
|
time: {
|
||||||
|
unit: 'hour'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
y: {
|
||||||
|
// Skala untuk tegangan (V)
|
||||||
|
voltage: {
|
||||||
|
beginAtZero: false,
|
||||||
|
suggestedMin: minVoltageValue
|
||||||
|
},
|
||||||
|
// Skala untuk arus (A)
|
||||||
|
current: {
|
||||||
|
beginAtZero: false,
|
||||||
|
suggestedMin: minCurrentValue
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
voltageChart = new Chart(ctx1, {
|
||||||
|
type: 'line',
|
||||||
|
data: {
|
||||||
|
labels: data.map(item => item.waktu),
|
||||||
|
datasets: [{
|
||||||
|
label: 'Tegangan (V)',
|
||||||
|
data: data.map(item => ({ x: item.waktu, y: item.tegangan })),
|
||||||
|
borderColor: '#1a237e',
|
||||||
|
backgroundColor: 'rgba(26, 35, 126, 0.1)',
|
||||||
|
tension: 0.1
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
options: chartOptions
|
||||||
|
});
|
||||||
|
|
||||||
|
currentChart = new Chart(ctx2, {
|
||||||
|
type: 'line',
|
||||||
|
data: {
|
||||||
|
labels: data.map(item => item.waktu),
|
||||||
|
datasets: [{
|
||||||
|
label: 'Arus (A)',
|
||||||
|
data: data.map(item => ({ x: item.waktu, y: item.arus })),
|
||||||
|
borderColor: '#3949ab',
|
||||||
|
backgroundColor: 'rgba(57, 73, 171, 0.1)',
|
||||||
|
tension: 0.1
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
options: chartOptions
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function filterData() {
|
||||||
|
const date = document.getElementById('date').value;
|
||||||
|
|
||||||
|
fetch(`get_data.php?date=${date}`)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
if (voltageChart) voltageChart.destroy();
|
||||||
|
if (currentChart) currentChart.destroy();
|
||||||
|
createCharts(data);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Inisialisasi grafik dengan semua data
|
||||||
|
|
||||||
|
setInterval(() => {
|
||||||
|
filterData();
|
||||||
|
}, 10000);
|
||||||
|
|
||||||
|
fetch('get_data.php')
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => createCharts(data));
|
||||||
|
|
||||||
|
// Tampilkan tombol ketika pengguna scroll ke bawah 20px dari atas dokumen
|
||||||
|
window.onscroll = function() {
|
||||||
|
scrollFunction();
|
||||||
|
};
|
||||||
|
|
||||||
|
function scrollFunction() {
|
||||||
|
const scrollTopBtn = document.getElementById('scrollTopBtn');
|
||||||
|
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
|
||||||
|
scrollTopBtn.style.display = 'block';
|
||||||
|
} else {
|
||||||
|
scrollTopBtn.style.display = 'none';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Scroll ke atas halaman ketika tombol ditekan
|
||||||
|
function scrollToTop() {
|
||||||
|
document.body.scrollTop = 0; // Untuk Safari
|
||||||
|
document.documentElement.scrollTop = 0; // Untuk Chrome, Firefox, IE, dan Opera
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,172 @@
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth; /* Membuat scroll lebih smooth */
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
position: -webkit-sticky;
|
||||||
|
padding: 0;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
padding-bottom: 50px; /* Tambahkan padding bawah */
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 10px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
background-color: #1a237e;
|
||||||
|
color: white;
|
||||||
|
padding: 10px 0;
|
||||||
|
position: sticky;
|
||||||
|
/* position: -webkit-sticky; */
|
||||||
|
top: 0;
|
||||||
|
/* display: flex;
|
||||||
|
justify-content: space-between; */
|
||||||
|
/* align-items: center; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.container .title_h1 {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar ul {
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar ul li {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar ul li a {
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 10px 15px;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar ul li a:hover {
|
||||||
|
background-color: #3949ab;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.2em;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.dashboard-tegangan-arus {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nama {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
padding: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-nama {
|
||||||
|
width: 70%;
|
||||||
|
height: 20px;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nama h1 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.2em;
|
||||||
|
text-align: left;
|
||||||
|
color: #1a237e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-container {
|
||||||
|
width: 70%;
|
||||||
|
height: 300px;
|
||||||
|
margin: 20px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dateFilter {
|
||||||
|
/* margin-bottom: 7px; */
|
||||||
|
text-align: right;
|
||||||
|
margin-right: 10px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#dateFilter input {
|
||||||
|
padding: 7px;
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
footer {
|
||||||
|
background-color: #1a237e;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
padding: 5px 0;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright {
|
||||||
|
font-size: 0.8em;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
background-color: #1a237e;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 8px 15px;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover {
|
||||||
|
background-color: #3949ab;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-top-btn {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 55px;
|
||||||
|
right: 20px;
|
||||||
|
background-color: #1e2ab1;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 25%; /* Changed to a circle */
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
||||||
|
font-size: 18px;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
.scroll-top-btn:hover {
|
||||||
|
background-color: #2f3986;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue