feat: Add intial site

2025-03-06 15:15:24 +11:00
parent 66620204ac
commit 6d7019bba5
6 changed files with 284 additions and 5 deletions
--- a/templates/assets/css/index.css
+++ b/templates/assets/css/index.css
@@ -11,6 +11,52 @@ h1 {
    margin-top: 10%;
    text-align: center;
 }
+form {
+    margin: 20px 0;
+}
+label {
+    display: block;
+    margin: 10px 0 5px;
+}
+input {
+    padding: 5px;
+    width: 80%;
+    max-width: 300px;
+}
+button {
+    margin-top: 10px;
+    padding: 10px 20px;
+    background-color: #ffffff;
+    color: #000000;
+    border: none;
+    cursor: pointer;
+}
+button:hover {
+    background-color: #dddddd;
+}
+#results {
+    margin-top: 20px;
+    text-align: left;
+}
+.results-container {
+    margin-top: 20px;
+    text-align: center;
+}
+.results-table {
+    width: 80%;
+    margin: 0 auto;
+    border-collapse: collapse;
+}
+.results-table th, .results-table td {
+    border: 1px solid #ffffff;
+    padding: 10px;
+}
+.results-table th {
+    background-color: #333333;
+}
+.results-table td {
+    background-color: #444444;
+}
 a {
    color: #ffffff;
    text-decoration: none;
--- a/templates/assets/js/index.js
+++ b/templates/assets/js/index.js
@@ -0,0 +1,80 @@
+document.getElementById('time-converter-form').addEventListener('submit', function(event) {
+    event.preventDefault();
+
+    const fromTz = document.getElementById('from-tz').value;
+    const time = document.getElementById('time').value;
+    const toTzs = document.getElementById('to-tzs').value.split(',');
+
+    // Update URL with query parameters
+    const params = new URLSearchParams({
+        from_tz: fromTz,
+        time: time,
+        to_tzs: toTzs.join(',')
+    });
+    window.history.replaceState({}, '', `${window.location.pathname}?${params.toString()}`);
+
+    fetch('/api/v1/convert_multiple', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            from_tz: fromTz,
+            time: time,
+            to_tzs: toTzs
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        const resultsDiv = document.getElementById('results');
+        resultsDiv.innerHTML = '<h2>Converted Times:</h2>';
+        const table = document.createElement('table');
+        table.classList.add('results-table');
+        const thead = document.createElement('thead');
+        const tbody = document.createElement('tbody');
+
+        const headerRow = document.createElement('tr');
+        const th1 = document.createElement('th');
+        th1.textContent = 'Timezone';
+        const th2 = document.createElement('th');
+        th2.textContent = 'Converted Time';
+        headerRow.appendChild(th1);
+        headerRow.appendChild(th2);
+        thead.appendChild(headerRow);
+
+        for (const [tz, convertedTime] of Object.entries(data)) {
+            const row = document.createElement('tr');
+            const cell1 = document.createElement('td');
+            cell1.textContent = tz;
+            const cell2 = document.createElement('td');
+            cell2.textContent = convertedTime;
+            row.appendChild(cell1);
+            row.appendChild(cell2);
+            tbody.appendChild(row);
+        }
+
+        table.appendChild(thead);
+        table.appendChild(tbody);
+        resultsDiv.appendChild(table);
+    })
+    .catch(error => {
+        console.error('Error:', error);
+    });
+});
+
+// Load parameters from URL if available
+window.addEventListener('load', function() {
+    const params = new URLSearchParams(window.location.search);
+    const fromTz = params.get('from_tz');
+    const time = params.get('time');
+    const toTzs = params.get('to_tzs');
+
+    if (fromTz && time && toTzs) {
+        document.getElementById('from-tz').value = fromTz;
+        document.getElementById('time').value = time;
+        document.getElementById('to-tzs').value = toTzs;
+
+        // Trigger form submission to display results
+        document.getElementById('time-converter-form').dispatchEvent(new Event('submit'));
+    }
+});
--- a/templates/index.html
+++ b/templates/index.html
@@ -4,7 +4,7 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Nathan.Woodburn/</title>
+    <title>Time Converter</title>
    <link rel="icon" href="/assets/img/favicon.png" type="image/png">
    <link rel="stylesheet" href="/assets/css/index.css">
 </head>
@@ -12,8 +12,22 @@
 <body>
    <div class="spacer"></div>
    <div class="centre">
-        <h1>Nathan.Woodburn/</h1>
+        <h1>Time Converter</h1>
+        <form id="time-converter-form">
+            <label for="from-tz">From Timezone:</label>
+            <input type="text" id="from-tz" name="from-tz" required>
+            <br>
+            <label for="time">Time:</label>
+            <input type="datetime-local" id="time" name="time" required>
+            <br>
+            <label for="to-tzs">To Timezones (comma separated):</label>
+            <input type="text" id="to-tzs" name="to-tzs" required>
+            <br>
+            <button type="submit">Convert</button>
+        </form>
+        <div id="results" class="results-container"></div>
    </div>
+    <script src="/assets/js/index.js"></script>
 </body>

 </html>