diff --git a/templates/assets/css/index.css b/templates/assets/css/index.css
index 23a89c3..459d837 100644
--- a/templates/assets/css/index.css
+++ b/templates/assets/css/index.css
@@ -1,66 +1,122 @@
body {
- background-color: #000000;
+ background-color: #1a1a1a;
color: #ffffff;
-}
-h1 {
- font-size: 50px;
+ font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
}
-.centre {
- margin-top: 10%;
+
+.container {
text-align: center;
+ width: 80%;
+ max-width: 600px;
+ background-color: #2c2c2c;
+ border-radius: 10px;
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+ padding: 20px;
}
+
+.header {
+ margin-bottom: 20px;
+}
+
+h1 {
+ font-size: 36px;
+ margin: 0;
+ padding: 0;
+ color: #ffffff;
+}
+
+.content {
+ margin: 20px 0;
+}
+
form {
margin: 20px 0;
}
+
label {
display: block;
margin: 10px 0 5px;
+ font-weight: bold;
}
+
input {
- padding: 5px;
- width: 80%;
+ padding: 10px;
+ width: 100%;
max-width: 300px;
+ margin-bottom: 10px;
+ border: 1px solid #444;
+ border-radius: 5px;
+ background-color: #333;
+ color: #fff;
}
+
button {
margin-top: 10px;
padding: 10px 20px;
+ background-color: #000000;
+ color: #ffffff;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+}
+
+button:hover {
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%;
+ width: 100%;
margin: 0 auto;
border-collapse: collapse;
+ background-color: #333;
+ border-radius: 5px;
+ overflow: hidden;
}
+
.results-table th, .results-table td {
- border: 1px solid #ffffff;
+ border: 1px solid #444;
padding: 10px;
+ text-align: left;
}
+
.results-table th {
- background-color: #333333;
+ background-color: #444;
+ color: #ffffff;
}
+
.results-table td {
- background-color: #444444;
+ background-color: #555;
}
+
+.footer {
+ margin-top: 20px;
+ font-size: 14px;
+ color: #888;
+}
+
a {
color: #ffffff;
text-decoration: none;
}
+
a:hover {
text-decoration: underline;
}
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index f24bc94..a1610af 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -10,22 +10,28 @@
</head>
<body>
- <div class="spacer"></div>
- <div class="centre">
- <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 class="container">
+ <div class="header">
+ <h1>Time Converter</h1>
+ </div>
+ <div class="content">
+ <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>
+ <div class="footer">
+ <p>© 2025 Nathan.Woodburn/ All rights reserved.</p>
+ </div>
</div>
<script src="/assets/js/index.js"></script>
</body>