Upload files to "/"

Celsius & Fahrenheit.html

@@ -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>

Color Picker.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>

DateAndTime.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>
+

Directions.html

@@ -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>
+
+