From 3ec2f40fcf34f57eb546861c5438cae6d205ca07 Mon Sep 17 00:00:00 2001
From: Janne Kinnunen <janne.kinnunen@gmail.com>
Date: Fri, 19 Jul 2024 22:40:31 +0300
Subject: [PATCH] text more readable

---
 styles.css | 37 ++++++++++++++++++++++++++++++++++---
 ui.js      | 11 +++++------
 2 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/styles.css b/styles.css
index e2b8fa3..cad2bae 100644
--- a/styles.css
+++ b/styles.css
@@ -1,3 +1,4 @@
+/* ... (previous styles remain unchanged) ... */
 body {
     font-family: Arial, sans-serif;
     margin: 0;
@@ -574,15 +575,45 @@ body.dark-mode .data-storage-info {
 body.dark-mode .data-storage-info i {
     color: #4da6ff;
 }
-
 /* Custom color styles */
 .custom-color-enabled #preview,
 .custom-color-enabled #resultsTable tbody tr {
     color: white;
-    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
+    text-shadow: 
+        -1px -1px 0 #000,
+        1px -1px 0 #000,
+        -1px 1px 0 #000,
+        1px 1px 0 #000;
 }
 
 .custom-color-enabled #resultsTable th {
     background-color: #333;
     color: white;
-}
\ No newline at end of file
+}
+
+/* Improve contrast for dark mode */
+body.dark-mode .custom-color-enabled #preview,
+body.dark-mode .custom-color-enabled #resultsTable tbody tr {
+    text-shadow: 
+        -1px -1px 0 #fff,
+        1px -1px 0 #fff,
+        -1px 1px 0 #fff,
+        1px 1px 0 #fff;
+}
+
+body.dark-mode .custom-color-enabled #resultsTable th {
+    background-color: #1a1a1a;
+}
+
+/* Additional styles to improve readability */
+.custom-color-enabled #resultsTable td {
+    padding: 8px;
+}
+
+.custom-color-enabled #preview {
+    padding: 12px;
+    margin: 12px 0;
+    border-radius: 6px;
+}
+
+/* ... (rest of the styles remain unchanged) ... */
\ No newline at end of file
diff --git a/ui.js b/ui.js
index 7f6a272..0a8f676 100644
--- a/ui.js
+++ b/ui.js
@@ -95,7 +95,6 @@ function setupMeasurementHandlers() {
 
     console.log("Measurement handlers set up.");
 }
-
 function calculateColor(dipDirection, dip) {
     // Normalize dip direction to 0-360 range
     dipDirection = (dipDirection % 360 + 360) % 360;
@@ -103,14 +102,14 @@ function calculateColor(dipDirection, dip) {
     // Calculate hue based on dip direction (0-360)
     const hue = dipDirection;
     
-    // Calculate saturation based on dip (0-90 degrees mapped to 50-100%)
-    const sat= 50 + (dip / 90) * 50;
+    // Calculate saturation based on dip (0-90 degrees mapped to 60-100%)
+    const sat = 60 + (dip / 90) * 40;
     
-    // Use a fixed lightness value
-    const lit = 50;
+    // Adjust lightness based on dip (higher dip = darker color)
+    const lit = 60 - (dip / 90) * 30;
     
     return `hsl(${hue}, ${sat}%, ${lit}%)`;
-    }
+}
 
 function setupDepthButtons() {
     const depthButtons = document.querySelectorAll('.depth-button');