273 lines
9.6 KiB
HTML
273 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Directions Dashboard</title>
|
|
<style>
|
|
body {
|
|
background-color: #FFFFFF;
|
|
color: #000000;
|
|
font-family: Arial, sans-serif;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
padding: 30px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 36px;
|
|
margin-top: 0;
|
|
margin-bottom: 25px;
|
|
font-weight: bold;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.status-container {
|
|
margin-bottom: 35px;
|
|
font-size: 20px;
|
|
text-transform: uppercase;
|
|
line-height: 1.5;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.gps-on, .battery-saving {
|
|
color: #00FF00; /* Lime */
|
|
}
|
|
|
|
.gps-off, .no-connect {
|
|
color: #FF0000; /* Bright Red */
|
|
}
|
|
|
|
.no-service {
|
|
color: #00BFFF; /* Bright Light Blue */
|
|
}
|
|
|
|
.sim-detected {
|
|
color: #000000;
|
|
}
|
|
|
|
.form-container {
|
|
margin: 0 auto 25px auto;
|
|
max-width: 320px;
|
|
text-align: left;
|
|
}
|
|
|
|
.field-group {
|
|
margin-bottom: 15px;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.field-group label {
|
|
font-size: 18px;
|
|
width: 95px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.field-group input {
|
|
font-family: Arial, sans-serif;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
border: none;
|
|
border-bottom: 3px solid #000000;
|
|
outline: none;
|
|
padding: 0 0 2px 5px;
|
|
width: 100%;
|
|
background: transparent;
|
|
}
|
|
|
|
button {
|
|
font-family: Arial, sans-serif;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
background-color: #FFFFFF;
|
|
border: 3px solid #000000;
|
|
padding: 10px 24px;
|
|
cursor: pointer;
|
|
margin: 20px auto 35px auto;
|
|
display: inline-block;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
button:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.output-line {
|
|
font-size: 64px;
|
|
margin-bottom: 10px;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.unit {
|
|
font-size: 32px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
margin-left: 5px;
|
|
vertical-align: baseline;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<a href="index.html">
|
|
<img src="Logo.png" alt="Brendan's Website">
|
|
</a>
|
|
|
|
<h1>Directions</h1>
|
|
|
|
<div class="status-container">
|
|
<div id="gpsStatus">GPS OFF</div>
|
|
<div class="battery-saving">BATTERY SAVING MODE ON</div>
|
|
<div id="connectionStatus">NO CONNECT</div>
|
|
</div>
|
|
|
|
<div class="form-container">
|
|
<div class="field-group"><label for="street">Street:</label><input type="text" id="street" oninput="validateForm()"></div>
|
|
<div class="field-group"><label for="suburb">Suburb:</label><input type="text" id="suburb" oninput="validateForm()"></div>
|
|
<div class="field-group"><label for="state">State:</label><input type="text" id="state" oninput="validateForm()"></div>
|
|
<div class="field-group"><label for="country">Country:</label><input type="text" id="country" oninput="validateForm()"></div>
|
|
<div class="field-group"><label for="continent">Continent:</label><input type="text" id="continent" oninput="validateForm()"></div>
|
|
</div>
|
|
|
|
<button id="directionsBtn" onclick="calculateDirections()" disabled>State directions</button>
|
|
|
|
<div id="timeOutput" class="output-line">--<span class="unit" style="font-size: 50%;">MINS</span></div>
|
|
<div id="distanceOutput" class="output-line">--<span class="unit" style="font-size: 50%;">KM</span></div>
|
|
|
|
<script>
|
|
const colorScale = [
|
|
'#00FF00',
|
|
'#006400',
|
|
'#FFFF00',
|
|
'#FFA500',
|
|
'#FF4500',
|
|
'#FF0000'
|
|
];
|
|
|
|
let isGpsOn = false;
|
|
let connectionType = "noconnect";
|
|
let simBrand = "Network";
|
|
let signalBars = 0;
|
|
let signalPercentage = 0;
|
|
|
|
function checkSystemStatus() {
|
|
// Check if device hardware matches a phone/mobile agent configuration
|
|
const isMobileDevice = /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
|
|
|
|
// 1. Automatic GPS Status Detection using Geolocation API
|
|
if ("geolocation" in navigator) {
|
|
navigator.geolocation.getCurrentPosition(
|
|
function(position) {
|
|
isGpsOn = true;
|
|
updateStatusUI(isMobileDevice);
|
|
},
|
|
function(error) {
|
|
isGpsOn = false;
|
|
updateStatusUI(isMobileDevice);
|
|
},
|
|
{ timeout: 3000 }
|
|
);
|
|
} else {
|
|
isGpsOn = false;
|
|
updateStatusUI(isMobileDevice);
|
|
}
|
|
|
|
// 2. Network connection logic validation
|
|
if (navigator.onLine) {
|
|
if (!isMobileDevice) {
|
|
// Force laptops/desktops to display Bright Blue "NO SERVICE" state
|
|
connectionType = "noservice";
|
|
} else {
|
|
// Mobile device specific connection diagnostics
|
|
const conn = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
|
|
if (conn && (conn.type === 'cellular' || ['2g', '3g', '4g'].includes(conn.effectiveType))) {
|
|
connectionType = "connected";
|
|
simBrand = "SIM Brand";
|
|
signalBars = conn.effectiveType === '4g' ? 5 : 4;
|
|
signalPercentage = conn.effectiveType === '4g' ? 92 : 78;
|
|
} else {
|
|
connectionType = "noservice";
|
|
}
|
|
}
|
|
} else {
|
|
connectionType = "noconnect";
|
|
}
|
|
|
|
updateStatusUI(isMobileDevice);
|
|
}
|
|
|
|
function updateStatusUI(isMobileDevice) {
|
|
const gpsStatusDiv = document.getElementById('gpsStatus');
|
|
if (isGpsOn) {
|
|
gpsStatusDiv.textContent = "GPS ON";
|
|
gpsStatusDiv.className = "gps-on";
|
|
} else {
|
|
gpsStatusDiv.textContent = "GPS OFF";
|
|
gpsStatusDiv.className = "gps-off";
|
|
}
|
|
|
|
const connStatusDiv = document.getElementById('connectionStatus');
|
|
if (connectionType === 'noconnect') {
|
|
connStatusDiv.textContent = "NO CONNECT";
|
|
connStatusDiv.className = "no-connect";
|
|
} else if (connectionType === 'noservice') {
|
|
connStatusDiv.textContent = "NO SERVICE";
|
|
connStatusDiv.className = "no-service";
|
|
} else if (connectionType === 'connected' && isMobileDevice) {
|
|
connStatusDiv.textContent = `${simBrand} (${signalBars}/5) (${signalPercentage}%)`;
|
|
connStatusDiv.className = "sim-detected";
|
|
} else {
|
|
// Catch-all safety configuration for desktops connected via wi-fi/ethernet lines
|
|
connStatusDiv.textContent = "NO SERVICE";
|
|
connStatusDiv.className = "no-service";
|
|
}
|
|
|
|
validateForm();
|
|
}
|
|
|
|
function validateForm() {
|
|
const fields = ['street', 'suburb', 'state', 'country', 'continent'];
|
|
const allFilled = fields.every(id => document.getElementById(id).value.trim() !== "");
|
|
document.getElementById('directionsBtn').disabled = !(allFilled && isGpsOn);
|
|
}
|
|
|
|
function calculateDirections() {
|
|
const seed = document.getElementById('street').value.length + document.getElementById('suburb').value.length;
|
|
|
|
const mockDistanceMeters = (seed * 850) % 150000;
|
|
const mockTimeSeconds = (seed * 480) % 9000;
|
|
|
|
const distIndex = Math.min(Math.floor((mockDistanceMeters / 150000) * colorScale.length), colorScale.length - 1);
|
|
const timeIndex = Math.min(Math.floor((mockTimeSeconds / 9000) * colorScale.length), colorScale.length - 1);
|
|
|
|
const timeDiv = document.getElementById('timeOutput');
|
|
timeDiv.style.color = colorScale[timeIndex];
|
|
if (mockTimeSeconds < 60) {
|
|
timeDiv.innerHTML = `${Math.round(mockTimeSeconds)}<span class="unit" style="font-size: 50%;">SECS</span>`;
|
|
} else {
|
|
timeDiv.innerHTML = `${Math.round(mockTimeSeconds / 60)}<span class="unit" style="font-size: 50%;">MINS</span>`;
|
|
}
|
|
|
|
const distDiv = document.getElementById('distanceOutput');
|
|
distDiv.style.color = colorScale[distIndex];
|
|
if (mockDistanceMeters < 1000) {
|
|
distDiv.innerHTML = `${Math.round(mockDistanceMeters)}<span class="unit" style="font-size: 50%;">M</span>`;
|
|
} else {
|
|
distDiv.innerHTML = `${(mockDistanceMeters / 1000).toFixed(1)}<span class="unit" style="font-size: 50%;">KM</span>`;
|
|
}
|
|
}
|
|
|
|
checkSystemStatus();
|
|
window.addEventListener('online', checkSystemStatus);
|
|
window.addEventListener('offline', checkSystemStatus);
|
|
if (navigator.connection) {
|
|
navigator.connection.addEventListener('change', checkSystemStatus);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|
|
|