Skip to content

Commit

Permalink
web files
Browse files Browse the repository at this point in the history
  • Loading branch information
@Johnymalina
Johnymalina committed Apr 1, 2024
1 parent 7ec67ef commit 8478dd1
Show file tree
Hide file tree
Showing 3 changed files with 432 additions and 0 deletions.
Binary file added data/lora2mqtt.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
241 changes: 241 additions & 0 deletions data/web.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,241 @@
<!DOCTYPE html>
<html>
<head>
<title>ESP32 LoRa2MQTT Gateway</title>
<style>
/* Reset default margin and padding */
body, h1, h2, ul, li {
margin: 0;
padding: 0;
}

/* Add background color and font styles */
body {
font-family: 'Arial', sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}

/* Center the page content */
.container {
text-align: center;
margin: 20px auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
max-width: 800px;
position: relative;
}

/* Style the header */
h1 {
margin-bottom: 20px;
}

/* Style the status indicators */
.status-indicators {
display: flex; /* Display indicators horizontally */
align-items: center; /* Vertically center indicators */
justify-content: center; /* Horizontally center indicators */
margin-bottom: 10px; /* Add 10px spacing between indicators */
}

.status-indicator {
width: 20px;
height: 20px;
border-radius: 50%;
margin: 0 10px; /* Add 10px spacing between indicators */
}

.mqtt-indicator {
background-color: var(--mqtt-color); /* Variable for MQTT status color */
}

.lora-indicator {
background-color: var(--lora-color); /* Variable for LoRa status color */
}

/* Style the message list */
.message-list {
list-style: none;
padding: 0;
text-align: left;
margin-top: 20px;
}

.message-item {
border: 1px solid #ccc;
margin: 10px 0;
padding: 10px;
background-color: var(--message-bg-color); /* Variable for message background color */
border-radius: 5px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

/* Add spacing between elements */
h2 {
margin-top: 20px;
}

/* Style the status text */
#status-text {
color: #333;
}

/* Style the "Update FW" button */
.update-fw-button {
position: absolute;
top: 20px;
right: 20px;
text-decoration: none;
padding: 10px 20px;
background-color: #007bff; /* Blue for "Update Firmware" button */
color: #fff;
border-radius: 5px;
transition: background-color 0.3s;
}

.update-fw-button:hover {
background-color: #0056b3; /* Darker Blue on hover */
}

/* Updated button style */
.new-button-style {
background-color: #007bff; /* Blue */
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
transition: background-color 0.3s;
}

.new-button-style:hover {
background-color: #0056b3; /* Darker Blue on hover */
}

/* Dark theme */
:root {
--bg-color: #222; /* Darker background */
--text-color: #fff;
--message-bg-color: #444; /* Darker message background */
}

/* Light theme */
body.light-theme {
--bg-color: #f2f2f2;
--text-color: #333;
--message-bg-color: #f9f9f9;
}

/* Theme switch */
.theme-switch {
position: absolute;
top: 20px;
left: 20px;
display: flex;
align-items: center;
}

.theme-switch input[type="checkbox"] {
display: none;
}

.theme-switch label {
display: inline-block;
width: 40px;
height: 20px;
background-color: #ccc;
border-radius: 20px;
position: relative;
cursor: pointer;
}

.theme-switch label::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
top: 0;
left: 0;
transition: transform 0.3s;
}

.theme-switch input[type="checkbox"]:checked + label {
background-color: #007bff;
}

.theme-switch input[type="checkbox"]:checked + label::after {
transform: translateX(20px);
}
</style>
</head>
<body>
<div class="container">
<div class="theme-switch">
<input type="checkbox" id="toggle-theme" checked>
<label for="toggle-theme"></label>
</div>
<a href="/update" class="update-fw-button new-button-style">Update FW</a>
<img src="lora2mqtt.png" alt="LoRa2MQTT Logo" style="max-width: 200px; margin-bottom: 20px;">
<h1>ESP32 LoRa2MQTT Gateway</h1>

<h2>Status Indicators</h2>
<div class="status-indicators">
<div class="status-indicator mqtt-indicator" id="mqtt-indicator"></div>
<span>MQTT Status</span>
<div class="status-indicator lora-indicator" id="lora-indicator"></div>
<span>LoRa Status</span>
</div>

<!-- Display the current date and time -->
<p id="current-time" style="font-size: 18px; margin-top: 20px;"></p>

<h2>Last Received Messages</h2>
<ul class="message-list" id="message-list">
<li class="message-item">
<strong>Timestamp:</strong> 2023-09-24 10:00:00<br>
<strong>Content:</strong> Message 1: Hello, World!
</li>
<li class="message-item">
<strong>Timestamp:</strong> 2023-09-24 10:15:00<br>
<strong>Content:</strong> Message 2: Temperature: 25°C
</li>
<li class="message-item">
<strong>Timestamp:</strong> 2023-09-24 10:30:00<br>
<strong>Content:</strong> Message 3: Sensor Data: 123
</li>
</ul>
</div>

<script>
// Function to display the current date and time
function displayCurrentTime() {
const currentTimeElement = document.getElementById('current-time');
const now = new Date();
const formattedTime = now.toLocaleString('cs-CS', { month: '2-digit', day: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' });
currentTimeElement.textContent = `Current Time: ${formattedTime}`;
}

// Toggle theme
const toggleTheme = document.getElementById('toggle-theme');
toggleTheme.addEventListener('change', function() {
document.body.classList.toggle('light-theme');
});

// Set status colors directly with variables
document.documentElement.style.setProperty('--mqtt-color', 'green'); // Change to 'red' for "error"
document.documentElement.style.setProperty('--lora-color', 'red'); // Change to 'green' for "ok"

// Update the current time every second
setInterval(displayCurrentTime, 1000);

// Refresh the page every minute
setInterval(function() {
location.reload();
}, 60000); // 60000 milliseconds = 1 minute
</script>
</body>
</html>
Loading

0 comments on commit 8478dd1

Please sign in to comment.