Upload files to "/"
This commit is contained in:
ehughes committed
commit
10129a05c3
5 files changed
+602
No files matched your search
@@ -0,0 +1,111 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Temperature Converter</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
text-align: center;
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 20px;
|
||||
padding: 10px;
|
||||
width: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: 18px;
|
||||
padding: 10px 15px;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.temp {
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
margin-top: 20px;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="logo">
|
||||
<a href="index.html">
|
||||
<img src="Logo.png" alt="Brendan's Website">
|
||||
</a>
|
||||
<h1>Temperature Converter</h1>
|
||||
|
||||
<div class="row">
|
||||
<input id="celsius" type="number" placeholder="°C">
|
||||
<button onclick="convertFromC()">Convert</button>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<input id="fahrenheit" type="number" placeholder="°F">
|
||||
<button onclick="convertFromF()">Convert</button>
|
||||
</div>
|
||||
|
||||
<div class="temp" id="output">--</div>
|
||||
|
||||
<script>
|
||||
const cInput = document.getElementById("celsius");
|
||||
const fInput = document.getElementById("fahrenheit");
|
||||
const output = document.getElementById("output");
|
||||
|
||||
// Celsius → Fahrenheit
|
||||
function convertFromC() {
|
||||
let c = parseFloat(cInput.value);
|
||||
if (!isNaN(c)) {
|
||||
let f = (c * 9/5) + 32;
|
||||
fInput.value = f.toFixed(2);
|
||||
updateColor(c);
|
||||
output.textContent = `${c.toFixed(2)}°C = ${f.toFixed(2)}°F`;
|
||||
}
|
||||
}
|
||||
|
||||
// Fahrenheit → Celsius
|
||||
function convertFromF() {
|
||||
let f = parseFloat(fInput.value);
|
||||
if (!isNaN(f)) {
|
||||
let c = (f - 32) * 5/9;
|
||||
cInput.value = c.toFixed(2);
|
||||
updateColor(c);
|
||||
output.textContent = `${c.toFixed(2)}°C = ${f.toFixed(2)}°F`;
|
||||
}
|
||||
}
|
||||
|
||||
// Allow Enter key
|
||||
cInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") convertFromC();
|
||||
});
|
||||
|
||||
fInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") convertFromF();
|
||||
});
|
||||
|
||||
// Color logic
|
||||
function updateColor(celsius) {
|
||||
let min = -20;
|
||||
let max = 40;
|
||||
let ratio = (celsius - min) / (max - min);
|
||||
ratio = Math.max(0, Math.min(1, ratio));
|
||||
|
||||
let red = Math.floor(255 * ratio);
|
||||
let blue = Math.floor(255 * (1 - ratio));
|
||||
let green = 50;
|
||||
|
||||
let color = `rgb(${red}, ${green}, ${blue})`;
|
||||
output.style.color = color;
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,62 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Color Picker</title>
|
||||
</head>
|
||||
<body style="background-color: white; font-family: Arial; text-align: center; padding-top: 50px;">
|
||||
<div class="logo">
|
||||
<a href="index.html">
|
||||
<img src="Logo.png" alt="Brendan's Website">
|
||||
</a>
|
||||
<h2>Enter a HEX Color</h2>
|
||||
<input type="text" id="colorInput" placeholder="#FFFFFF" />
|
||||
<button onclick="getColorName()">Check</button>
|
||||
|
||||
<h3 id="result"></h3>
|
||||
|
||||
<script>
|
||||
const colorNames = {
|
||||
"#000000": "Black",
|
||||
"#FFFFFF": "White",
|
||||
"#FF0000": "Red",
|
||||
"#00FF00": "Lime",
|
||||
"#0000FF": "Blue",
|
||||
"#FFFF00": "Yellow",
|
||||
"#FFA500": "Orange",
|
||||
"#800080": "Purple",
|
||||
"#FFC0CB": "Pink",
|
||||
"#A52A2A": "Brown",
|
||||
"#808080": "Gray"
|
||||
};
|
||||
|
||||
function getColorName() {
|
||||
let input = document.getElementById("colorInput").value.toUpperCase();
|
||||
let result = document.getElementById("result");
|
||||
|
||||
// Validate HEX
|
||||
if (!input.startsWith("#") || input.length !== 7) {
|
||||
result.textContent = "Invalid HEX code";
|
||||
result.style.color = "black";
|
||||
return;
|
||||
}
|
||||
|
||||
let name = colorNames[input];
|
||||
|
||||
// If not found, use HEX as the label
|
||||
if (!name) {
|
||||
name = input;
|
||||
}
|
||||
|
||||
result.textContent = name;
|
||||
|
||||
// Special case for white
|
||||
if (input === "#FFFFFF") {
|
||||
result.style.color = "black";
|
||||
} else {
|
||||
result.style.color = input;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,157 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Dynamic Date and Time Clock</title>
|
||||
<style>
|
||||
body {
|
||||
background-color: #000000;
|
||||
color: #ffffff;
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.clock-container {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: normal;
|
||||
margin-bottom: 20px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.time-display {
|
||||
font-size: 4rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.ampm-display {
|
||||
font-size: 1.8rem;
|
||||
font-weight: normal;
|
||||
margin-left: 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.date-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.day-display {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.alarm-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.alarm-status {
|
||||
font-size: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.alarm-icon {
|
||||
color: #ffffff;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.alarm-text {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
color: #ffffff;
|
||||
font-size: 1.5rem;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
color: #cccccc;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="clock-container">
|
||||
<!-- Heading -->
|
||||
<h1>Date and Time</h1>
|
||||
|
||||
<!-- XX:XX:XX.XX PM/AM -->
|
||||
<div class="time-display">
|
||||
<span id="digits">00:00:00.00</span><span class="ampm-display" id="ampm">AM</span>
|
||||
</div>
|
||||
|
||||
<!-- DAY & DD/MM/YYYY Row -->
|
||||
<div class="date-container">
|
||||
<div class="day-display" id="day">LOADING</div>
|
||||
<div class="date-display" id="date">00/00/0000</div>
|
||||
</div>
|
||||
|
||||
<!-- Alarm & Navigation Row -->
|
||||
<div class="alarm-row">
|
||||
<div class="alarm-status">
|
||||
<span class="alarm-icon">⏰</span>
|
||||
<span class="alarm-text">ALARM OFF</span>
|
||||
</div>
|
||||
<a href="http://brendanyew.com" class="back-link">Go back</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function updateClock() {
|
||||
const now = new Date();
|
||||
|
||||
// 1. Format Time Digits (HH:MM:SS.CC)
|
||||
let hours = now.getHours();
|
||||
const ampm = hours >= 12 ? 'PM' : 'AM';
|
||||
hours = hours % 12;
|
||||
hours = hours ? hours : 12;
|
||||
|
||||
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(now.getSeconds()).padStart(2, '0');
|
||||
|
||||
// Get milliseconds and convert to 2-digit centiseconds (.XX)
|
||||
const centiseconds = String(Math.floor(now.getMilliseconds() / 10)).padStart(2, '0');
|
||||
|
||||
const digitsString = `${String(hours).padStart(2, '0')}:${minutes}:${seconds}.${centiseconds}`;
|
||||
|
||||
document.getElementById('digits').textContent = digitsString;
|
||||
document.getElementById('ampm').textContent = ampm;
|
||||
|
||||
// 2. Format Day (e.g., TUESDAY)
|
||||
const daysOfWeek = ['SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY'];
|
||||
document.getElementById('day').textContent = daysOfWeek[now.getDay()];
|
||||
|
||||
// 3. Format Date (DD/MM/YYYY)
|
||||
const dayOfMonth = String(now.getDate()).padStart(2, '0');
|
||||
const month = String(now.getMonth() + 1).padStart(2, '0');
|
||||
const year = now.getFullYear();
|
||||
|
||||
document.getElementById('date').textContent = `${dayOfMonth}/${month}/${year}`;
|
||||
}
|
||||
|
||||
// Run the clock immediately and refresh every 10 milliseconds
|
||||
updateClock();
|
||||
setInterval(updateClock, 10);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+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>
|
||||
|
||||
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 244 KiB |
Reference in new issue
Block a user