Upload files to "/"
This commit is contained in:
ehughes committed
commit
10129a05c3
5 files changed
+602
No files matched your search
+272
@@ -0,0 +1,272 @@
|
||||
<!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>
|
||||
|
||||
|
||||
Reference in new issue
Block a user