diff --git a/labels.js b/labels.js
index a230ad9..05c4cee 100644
--- a/labels.js
+++ b/labels.js
@@ -27,7 +27,7 @@ let showEditor = false;
// Store the coordinates and trigger the function
container.addEventListener("mousedown", (e) => {
// Avoid inserting a new label if the user is clicking on a close button)
- if (e.target.tagName !== "BUTTON") {
+ if (e.target.tagName !== "BUTTON" && e.target.tagName !== "INPUT") {
startX = e.x;
startY = e.y;
@@ -38,7 +38,7 @@ container.addEventListener("mousedown", (e) => {
});
container.addEventListener("mouseup", (e) => {
- if (e.target.tagName !== "BUTTON") {
+ if (e.target.tagName !== "BUTTON" && e.target.tagName !== "INPUT") {
endX = e.x;
endY = e.y;
diff --git a/picture.js b/picture.js
index 5c921a1..031ca80 100644
--- a/picture.js
+++ b/picture.js
@@ -1,10 +1,16 @@
-document.querySelector('input[type="file"]').addEventListener("change", function () {
- if (this.files && this.files[0]) {
- var img = document.querySelector("img");
- img.onload = () => {
- URL.revokeObjectURL(img.src); // no longer needed, free memory
- };
+window.addEventListener("load", function () {
+ let input = document.querySelector('input[type="file"]');
+ input.addEventListener("change", function () {
+ console.log(this.files);
+ if (this.files && this.files[0]) {
+ let img = document.querySelector("img");
+ img.onload = () => {
+ img.classList.add("visible");
+ input.classList.add("hidden");
+ URL.revokeObjectURL(img.src); // no longer needed, free memory
+ };
- img.src = URL.createObjectURL(this.files[0]); // set src to blob url
- }
+ img.src = URL.createObjectURL(this.files[0]); // set src to blob url
+ }
+ });
});
diff --git a/style.css b/style.css
index 171720c..3e77bd8 100644
--- a/style.css
+++ b/style.css
@@ -93,7 +93,7 @@ body {
justify-content: center;
align-items: center;
- background-color: rgba(250, 93, 65, 0.9);
+ background-color: rgba(255, 99, 71, 0.95);
}
.text-input.visible {
@@ -102,7 +102,19 @@ body {
.modal {
padding: 64px;
- background-color: tomato;
+}
+
+.modal input {
+ font-size: 1.5rem;
+ background: none;
+ border: none;
+ color: white;
+ border-bottom: 1px solid white;
+}
+
+.modal input:focus {
+ outline: none;
+ background-color: rgba(255, 255, 255, 0.25);
}
.text-input button {
@@ -111,11 +123,35 @@ body {
background: none;
border: none;
cursor: pointer;
+ font-size: 1.5rem;
+}
+
+#cancel {
+ font-weight: normal;
}
-.background-image {
+.background-container {
position: absolute;
left: 50%;
top: 50%;
- transform: translate(50%, 50%);
+ transform: translate(-50%, -50%);
+ display: flex;
+ flex-direction: column;
+}
+
+.background-container img {
+ display: none;
+ max-width: 70w;
+ max-height: 70vh;
+ object-fit: contain;
+ user-select: none;
+ pointer-events: none;
+}
+
+.background-container img.visible {
+ display: initial;
+}
+
+.hidden {
+ display: none;
}