TristanTJT/logbook-digitizer-proto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement initial HTML structure, CSS styles, and JavaScript for file input and OCR functionality

Browse Source
This commit is contained in:
TristanEDU 2025-09-09 11:38:18 +00:00
parent 413f91004c
commit a84ce27473
3 changed files with 79 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
public/index.html
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Proto logbook analyzer UI</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="top">
<h1>Proto logbook analyzer UI</h1>
<label for="myfile">Select a file:</label>
<input type="file" id="fileInput" name="myfile" multiple />
</div>
<div class="center">
<div class="left">
<img
id="imagePreview"
src="https://puzzlemania-154aa.kxcdn.com/products/2024/puzzle-schmidt-1000-pieces-random-galaxy.webp"
alt="" />
</div>
<div class="right">
<textarea name="textarea" id="textEditor"></textarea>
</div>
</div>
<div class="bottom">
<button id="btnRunOCR">Run OCR</button>
<button id="btnExport">Export JSON</button>
</div>
<script src="/src/app.js"></script>
</body>
</html>

31
public/styles.css
View File

@ -0,0 +1,31 @@
body {
width: 100vw;
display: flex;
flex-direction: column;
}
.center {
display: flex;
width: 100vw;
padding: 1rem 0;
}
.left,
.right {
flex: 1;
padding: 1rem;
}
.left img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.right textarea {
width: 100%;
height: 60vh;
resize: vertical;
box-sizing: border-box;
}

14
src/app.js
View File

@ -0,0 +1,14 @@
const fileInput = document.getElementById("fileInput");
const imagePreview = document.getElementById("imagePreview");
const textEditor = document.getElementById("textEditor");
const ocrButton = document.getElementById("btnRunOCR");
const exportButton = document.getElementById("btnExport");
console.log(
"DOM wired:",
fileInput,
imagePreview,
textEditor,
ocrButton,
exportButton
);