*

4 files changed, 73 insertions, 21 deletions

diff --git a/js/leibovitz/ChicagoFLF.ttf b/js/leibovitz/ChicagoFLF.ttf
new file mode 100644
index 0000000..60691e1
--- /dev/null
+++ b/js/leibovitz/ChicagoFLF.ttf
Binary files differdiff --git a/js/leibovitz/contrast.js b/js/leibovitz/contrast.js
index 5e23124..5c4bc1c 100644
--- a/js/leibovitz/contrast.js
+++ b/js/leibovitz/contrast.js
@@ -17,6 +17,7 @@ const ContrastManager = {
         this._slider = document.getElementById('contrast-slider');
         this._slider.addEventListener('input', (e) => {
             this._currentContrast = parseFloat(e.target.value);
+            document.getElementById('contrast-value').textContent = this._currentContrast;
             this._notifyObservers();
         });
     },
diff --git a/js/leibovitz/index.html b/js/leibovitz/index.html
index d15b623..dcae8c7 100644
--- a/js/leibovitz/index.html
+++ b/js/leibovitz/index.html
@@ -23,6 +23,12 @@
     <meta name="msapplication-TileImage" content="ms-icon-144x144.png">
     <meta name="theme-color" content="#ffffff">
     <style>
+        @font-face {
+            font-family: 'ChicagoFLF';
+            src: url('./ChicagoFLF.ttf') format('truetype');
+            font-weight: normal;
+            font-style: normal;
+        }
         body, html {
             margin: 0;
             padding: 0;
@@ -32,11 +38,13 @@
             flex-direction: column;
             background-color: beige;
             overflow: hidden;
+            font-family: 'ChicagoFLF', sans-serif;
+            font-size: 16px;
         }
         .preview-container {
             flex: 1;
             position: relative;
-            margin: 10px;
+            margin: 0;
             min-height: 0;
         }
         #canvas {
@@ -57,11 +65,9 @@
             display: flex;
             flex-direction: column;
             align-items: center;
-            gap: 7px;
-            padding: 0;
+            gap: 1em;
+            padding: 1em 0;
             background-color: rgba(255, 255, 255, 0.8);
-            border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
             z-index: 10;
         }
         .side-control.left {
@@ -83,14 +89,13 @@
             width: 20px;
             height: 20px;
             background: teal;
-            background: ;
             border-radius: 0;
             cursor: pointer;
         }
         input[type="range"]::-webkit-slider-runnable-track, .vertical-slider::-webkit-slider-runnable-track {
             width: 100%;
             height: 4px;
-            background: #ddd;
+            background: rgba(255, 255, 255, 0.8);
             border-radius: 2px;
         }
         input[type="range"]::-moz-range-thumb, .vertical-slider::-moz-range-thumb {
@@ -104,7 +109,7 @@
         input[type="range"]::-moz-range-track, .vertical-slider::-moz-range-track {
             width: 100%;
             height: 4px;
-            background: #ddd;
+            background: rgba(255, 255, 255, 0.8);
             border-radius: 2px;
         }
         .vertical-label {
@@ -114,6 +119,8 @@
             user-select: none;
             white-space: nowrap;
             margin: 20px 0;
+            font-family: 'ChicagoFLF', sans-serif;
+            padding: 0 5px;
         }
         #blur-value {
             transform: rotate(90deg);
@@ -121,14 +128,25 @@
             color: #666;
             user-select: none;
             white-space: nowrap;
+            font-family: 'ChicagoFLF', sans-serif;
+            padding: 0 5px;
+        }
+        #contrast-value {
+            transform: rotate(90deg);
+            font-size: 12px;
+            color: #666;
+            user-select: none;
+            white-space: nowrap;
+            font-family: 'ChicagoFLF', sans-serif;
+            padding: 0 5px;
         }
         #controls {
             width: 100%;
             display: flex;
-            justify-content: center;
+            justify-content: space-between;
             align-items: center;
-            gap: 10px;
-            padding: 20px;
+            gap: 0;
+            padding: 0;
             background-color: rgba(255, 255, 255, 0.8);
             box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
             flex-shrink: 0;
@@ -158,13 +176,14 @@
             align-items: center;
         }
         #reset-color {
-            padding: 5px 10px;
+            padding: 8px 12px;
             font-size: 16px;
             background: none;
             border: 1px solid #ccc;
             border-radius: 4px;
             cursor: pointer;
             transition: all 0.2s ease;
+            font-family: 'ChicagoFLF', sans-serif;
         }
         #reset-color:hover {
             background: #f0f0f0;
@@ -173,8 +192,25 @@
             padding: 10px;
             font-size: 18px;
             cursor: pointer;
+            font-family: 'ChicagoFLF', sans-serif;
+        }
+        select {
+            padding: 10px 15px;
+            font-family: 'ChicagoFLF', sans-serif;
+        }
+        #dither-select {
+            min-width: 200px;
+        }
+        button.capture {
+            background-color: teal;
+            color: #FFFFFF;
+            padding: 10px 20px;
+            font-family: 'ChicagoFLF', sans-serif;
+        }
+        #toggle-camera {
+            padding: 10px 20px;
+            font-family: 'ChicagoFLF', sans-serif;
         }
-
         button, select {
             border: none;
             cursor: pointer;
@@ -185,11 +221,6 @@
             outline: none; 
         }
 
-        button.capture {
-            background-color: teal;
-            color: #FFFFFF;
-        }
-
         button.capture:disabled {
             background-color: #ccc;
             color: #5c5c5c;
@@ -210,6 +241,7 @@
             color: #666;
             width: 100%;
             text-align: center;
+            font-family: 'ChicagoFLF', sans-serif;
         }
         .contrast-control input[type="range"] {
             width: 100%;
@@ -228,6 +260,24 @@
             color: #666;
             min-width: 40px;
             text-align: right;
+            font-family: 'ChicagoFLF', sans-serif;
+        }
+        #focus-container {
+            display: none;
+        }
+        #toggle-camera, button.capture {
+            flex: 1;
+            padding: 20px;
+            font-family: 'ChicagoFLF', sans-serif;
+            border-radius: 0;
+            text-align: center;
+        }
+        #toggle-camera {
+            border-right: 1px solid rgba(0, 0, 0, 0.1);
+        }
+        button.capture:disabled {
+            background-color: #ccc;
+            color: #5c5c5c;
         }
     </style>
 </head>
@@ -243,6 +293,7 @@
     <div class="side-control right">
         <label class="vertical-label" for="contrast-slider">Contrast</label>
         <input type="range" id="contrast-slider" class="vertical-slider" min="-255" max="255" value="0" step="1">
+        <span id="contrast-value">0</span>
     </div>
 </div>
 
@@ -273,7 +324,7 @@
     <div id="focus-container">
         <input style="display: none;" type="range" id="focus-slider" min="0" max="100" step="1" value="50" disabled>
     </div>
-    <button id="toggle-camera">Turn Camera On</button>
+    <button id="toggle-camera">Camera On</button>
     <button id="capture" disabled class="capture">Capture Image</button>
 </div>
 
diff --git a/js/leibovitz/leibovitz.js b/js/leibovitz/leibovitz.js
index c029d50..2f828c2 100644
--- a/js/leibovitz/leibovitz.js
+++ b/js/leibovitz/leibovitz.js
@@ -199,10 +199,10 @@ toggleCameraButton.addEventListener('click', () => {
     cameraOn = !cameraOn;
     if (cameraOn) {
         startCamera();
-        toggleCameraButton.textContent = 'Turn Camera Off';
+        toggleCameraButton.textContent = 'Camera Off';
     } else {
         stopCamera();
-        toggleCameraButton.textContent = 'Turn Camera On';
+        toggleCameraButton.textContent = 'Camera On';
     }
 });