clean UI

diamant3 · May 29, 2024 · 6904e2d · 6904e2d
1 parent 6f89dca
commit 6904e2d
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 
 <html lang="en">
     <head>
-        <title>Handwriting AI</title>
+        <title>llg - handwriting detection</title>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
         <style>
@@ -12,19 +12,39 @@
               background-color: 0x111111;
               overflow: hidden;
             }
+
+            #panel {
+                width: 20%;
+                height: 100%;
+                background-color: #049be3;   
+                text-align: center; 
+                position: fixed;
+                top: 0;
+                padding-top: 20px;
+                left: 0;  
+            }
+
+            #container {
+                right: 0;
+                position: fixed;
+                width: 80%;
+            }
         </style>
     </head>
 
     <body>
+        <div id="panel">
+            <h1>Little Letter Game</h1>
         <h3>Tool:</h3>
         <select id="tool">
             <option value="brush">Brush</option>
             <option value="eraser">Eraser</option>
         </select>
 
         <h3>OCR Result:</h3>
-        <textarea readonly id="result">
+        <textarea rows="5" readonly id="result">
         </textarea>
+        </div>
 
         <div id="container"></div>
     </body>

diff --git a/scripts/main.ts b/scripts/main.ts
@@ -3,7 +3,7 @@ import Konva from "konva";
 import { createWorker } from "tesseract.js";
 
 const width = window.innerWidth;
-const height = window.innerHeight - 25;
+const height = window.innerHeight;
 
 const stage = new Konva.Stage({
     container: 'container',
@@ -23,7 +23,7 @@ stage.on('mousedown touchstart', function (e) {
     let pos = stage.getPointerPosition();
     lastLine = new Konva.Line({
         stroke: '#000000',
-        strokeWidth: 10,
+        strokeWidth: 12,
         globalCompositeOperation: mode === 'brush' ? 'source-over' : 'destination-out',
         lineCap: 'round',
         lineJoin: 'round',