style changes

cankurttekin · Sep 24, 2024 · 1f720e5 · 1f720e5
1 parent 01e88b3
commit 1f720e5
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 52 deletions.
diff --git a/app.js b/app.js
@@ -15,8 +15,8 @@ var config = {
     binisIstasyonAdi: "Eskişehir",
     inisIstasyonAdi: "Ankara Gar",
     date: "2024-09-23",
-    hour: "19:35 - 20:53",
-    seatType: "Economy"
+    hour: "19:29 - 20:50",
+    seatType: "economy"
 };
 
 function postRequest(url, body) {
@@ -55,14 +55,12 @@ async function loadStations() {
     return stationsData;
 }
 
-
 function formatDate(date) {
     const parsedDate = new Date(date);
     const options = { month: 'short', day: 'numeric', year: 'numeric' };
     return parsedDate.toLocaleDateString('en-US', options);
 }
 
-
 loadStations();
 const stations = stationsData;
 
@@ -142,7 +140,8 @@ document.addEventListener('DOMContentLoaded', async function() {
     const stationsData = await loadStations();
     const binisSelect = document.getElementById('binisIstasyonAdi');
     const inisSelect = document.getElementById('inisIstasyonAdi');
-
+    const seatType = document.getElementById('seatType');
+
     Object.keys(stationsData).forEach(stationName => {
         const option = new Option(stationName, stationName);
         binisSelect.options.add(option);
@@ -151,8 +150,8 @@ document.addEventListener('DOMContentLoaded', async function() {
     binisSelect.value = config.binisIstasyonAdi;
     inisSelect.value = config.inisIstasyonAdi;
     seatType.value = config.seatType;
+
     var todaysDate = new Date();
-
     var day = String(todaysDate.getDate()).padStart(2, '0');
     var month = String(todaysDate.getMonth() + 1).padStart(2, '0');
     var year = todaysDate.getFullYear();
@@ -174,8 +173,9 @@ async function prefetchForHours() {
         binisIstasyonAdi: document.getElementById('binisIstasyonAdi').value,
         inisIstasyonAdi: document.getElementById('inisIstasyonAdi').value,
         date: document.getElementById('date').value,
+        seatType: document.getElementById('seatType').value
     };
-    console.log('Configuration updated:', config);
+    console.log('Form updated: ', config);
     const body = {
         kanalKodu: 3,
         dil: 0,
@@ -250,10 +250,11 @@ async function startSearch(){
         binisIstasyonAdi: document.getElementById('binisIstasyonAdi').value,
         inisIstasyonAdi: document.getElementById('inisIstasyonAdi').value,
         date: document.getElementById('date').value,
+        seatType: document.getElementById('seatType').value
     };
 
     const selectedHours = getTripHours();
-    if (selectedHours.length == 0) { alert("Please select one or more hours"); return; }
+    if (selectedHours.length == 0) { alert("Please select trip hours to search. "); return; }
 
     while (!found) {
         //document.getElementById("status").innerHTML += 'Searching...<br />';

diff --git a/index.html b/index.html
@@ -22,7 +22,7 @@ <h1>TCDD-CLI Web</h1>
             <input type="date" id="date" value="2024-05-15">
         </div>
         <div id="hourContainer" style="display: block;">
-            <label for="hour">Trips:</label>
+            <label for="hour">Trip Hours:</label>
             <div id="hourChoices"></div>
         </div>
         <div>
@@ -32,27 +32,35 @@ <h1>TCDD-CLI Web</h1>
                 <option value="business">Business</option>
             </select>
         </div>
-        <button type="button" id="find-seat-button" onclick="startSearch()">Start</button>
+        <button type="button" id="start-search-button" onclick="startSearch()">Start</button>
+        <div id="statusContainer">
         <div id="log"></div>
-        <div>
-          <label>Status:</label>
-          <p id="status"></p>
-        </div>
-        <div>
-            <p id="delayMessage"></p>
+          <div>
+            <label>Status:</label>
+            <p id="status"></p>
+          </div>
+          <div>
+              <p id="delayMessage"></p>
+          </div>
         </div>
     </form>
     <script src="app.js"></script>
 
-    <footer>
-        <div style="text-align: center; padding: 20px;">
+        <div class="footer">
+
+            <p style="font-size: 14px;">
+               TCDD-CLI is a tool on your terminal or browser that aims to
+               help you finding empty seats at
+               Turkish Railways. 
+            </p>
             <p>
-                <a href="https://github.com/cankurttekin/tcdd-cli" target="_blank">GitHub</a> |
+                <a href="https://github.com/cankurttekin/tcdd-cli" target="_blank">Source</a> ─
                 <a href="https://www.gnu.org/licenses/gpl-3.0.en.html#license-text" target="_blank">GPLv3</a>
             </p>
-            <p>This is not an official software from TCDD and has no affiliation with the State Railways Of The Republic of Turkiye.</p>
+            <p style="font-size: 14px;">
+              Disclaimer: This is not an official software from TCDD and has no affiliation with the State Railways Of The Republic of Turkiye.
+            </p>
         </div>
-    </footer>
 </body>
 </html>
 
diff --git a/style.css b/style.css
@@ -1,6 +1,6 @@
 body {
     font-family: 'Arial', sans-serif;
-    background-color: #f4f4f4;
+    background-color: #fafafa;
     margin: 0;
     padding: 20px;
     justify-content: center;
@@ -9,93 +9,112 @@ body {
     height: 100vh;
 }
 
-/* Styling for the main heading */
 h1 {
     text-align: center;
-    color: #333;
+    color: #323232;
+    font-weight: bold;
+}
+
+p { 
+  color: rgba(0, 0, 0, 0.5); 
+}
+
+#delayMessage {
+  font-size: 14px;
+}
+
+a { 
+  color: #444; 
+  font-weight: bold;
+  text-decoration: none;
+}
+
+a:hover { 
+  text-decoration: underline; 
 }
 
-/* Form styling */
 form {
-    background: white;
+    background: #ebebeb;
     max-width: 600px;
     margin: 20px auto;
     padding: 20px;
     box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
-    border-radius: 10px;
+    border-radius: 16px;
+    border: 2px solid #e8e8e8;
 }
 
-/* Division styling */
 form div {
     margin-bottom: 10px;
 }
 
-/* Label styling */
 label {
     display: block;
-    margin-bottom: 5px;
+    margin-bottom: 2px;
     font-weight: bold;
 }
 
-/* Input and select field styling */
-input[type="date"],
-input[type="time"],
-input[type="number"],
+input[type="date"] {
+  width: 100%;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  border: 2px solid #e8e8e8;
+    border-radius: 16px;
+}
+
 select {
     width: 100%;
-    border: 1px solid #ccc;
-    border-radius: 4px;
+    border: 2px solid #e8e8e8;
+    border-radius: 16px;
+    padding: 20px;
+    background: white;
 }
 
+
+
 input[type="checkbox"] {
     margin-right: 5px;
 }
 
-/* Button styling */
 button {
-    background-color: #333;
+    background-color: #3584e4;
     color: white;
     border: none;
     padding: 10px 20px;
     font-size: 16px;
     cursor: pointer;
     border-radius: 10px;
     width: 100%;
+    margin-bottom: 18px;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
 }
 
 button:hover {
-    background-color: #555;
+    background-color: #4990e7;
 }
 
-/* Utility classes for hidden elements */
 .hidden {
     display: none;
 }
 
-/* Style container for hour choices */
 #hourChoices {
     display: grid;
     padding: 10px;
-    background: #f9f9f9;
-    border: 1px solid #dde;
-    border-radius: 5px;
+    background: #f7f7f7;
+    border: 2px solid #e8e8e8;
+    border-radius: 16px;
 }
 
-/* Style each checkbox wrapper for better spacing and alignment */
 #hourChoices div {
     display: flex;
     flex-direction: row;
 
 }
 
-/* Style checkboxes */
 #hourChoices input[type="checkbox"] {
     cursor: pointer;
-    accent-color: #3498dd;
+    accent-color: #cce0f8;
 }
 
-/* Style labels for better readability and interaction */
 #hourChoices label {
     cursor: pointer;
     user-select: none;
@@ -104,12 +123,23 @@ button:hover {
     font-weight: 100;
 }
 
-/* Hover effects for labels and checkboxes */
 #hourChoices div:hover {
     background-color: #efefef;
 }
 
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+#statusContainer {
+    display: grid;
+    padding: 10px;
+    background: #fafafa;
+    border-top: 3px solid #e0e0e0;
+    border-radius: 0 0 16px 16px;
+
+    margin: 0 -20px -20px -20px;
+}
+
+
+.footer {
+  width: 100%;
+  margin-top: 200px;
+  text-align: center;
 }