From bd9168a8c0a5193f2e129edbdd8ef92b6aa10339 Mon Sep 17 00:00:00 2001
From: barchakuz <behroze.barcha@gmail.com>
Date: Sun, 31 Mar 2024 18:36:04 +0500
Subject: [PATCH 1/3] import form

---
 apps/port/import.css  | 131 ++++++++++++++++++++++++++++++++++++++++++
 apps/port/import.html | 118 +++++++++----------------------------
 apps/port/style.css   |   7 ++-
 3 files changed, 161 insertions(+), 95 deletions(-)
 create mode 100644 apps/port/import.css

diff --git a/apps/port/import.css b/apps/port/import.css
new file mode 100644
index 000000000..275fd5153
--- /dev/null
+++ b/apps/port/import.css
@@ -0,0 +1,131 @@
+body{
+    font-family: Roboto, Arial, sans-serif;
+}
+#exportTitle, #exportTitle h1 {
+    margin: -8px;
+    padding: 0;
+}
+.form{
+    margin: auto;
+    margin-top: 0.4%;
+    width: 50%;
+    background-color:#f2f2f2;
+
+}
+input {
+    font-family: Roboto, Arial, sans-serif;
+    font-size: 16px;
+    width: 60%;
+    margin-left: 20%;
+    height: 35px;
+    border: none;
+    border-bottom: 3px solid grey;
+    transition: background-color 0.3s ease;
+  }
+textarea{
+    font-family: Roboto, Arial, sans-serif;
+    font-size: 16
+    width: 60%;
+    margin-left: 20%;
+    height: 150px;
+    border: 3px solid grey;
+    transition: background-color 0.3s ease;
+  }
+input:hover{
+    background-color: #F9F7F1;
+}
+input:focus{
+    outline: none;
+    border: none;
+
+    border-bottom: 3px solid #17a2b8;
+}
+textarea:hover{
+    background-color: #F9F7F1;
+}
+textarea:focus{
+    outline: none;
+}
+::placeholder {
+    font-family: Roboto, Arial, sans-serif;
+    font-size: 16px;
+    color: grey;
+    font-size: 11pt;
+
+
+  }
+
+#exportTitle {
+    width: 100%;
+    background-color: #17a2b8 !important;
+    color: white;
+    font-size: 18px;
+}
+  
+.buttons {
+    width: 40%;
+    padding: 10px 0;
+    border-radius: 5px;
+    background: #17a2b8;
+    border-color:#17a2b8;
+    font-size: 14px;
+    font-weight: 600;
+    color: #fff;
+    display: inline-block; 
+    box-shadow: none;
+    transition: background-color 0.3s ease;
+}
+  .buttons:hover {
+    border: 1px solid #17a2b8;
+    color: #17a2b8;
+    background: #fff;
+  }
+  
+  .h1 {
+    font-weight: bold;
+    height: 120px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .h3 {
+    margin: 20px 0 0 25%;
+    font-size: 18px;
+  }
+  
+  .h {
+    text-align: center;
+    padding-top: 2%;
+    font-size: 25pt;
+    color: MediumSeaGreen;
+    /* border-bottom: 4px solid lightgrey; 
+    width: */
+  }
+.h2{
+    text-align: center;
+    padding-top: 2%;
+    font-size: 25pt;
+    color: MediumSeaGreen;
+    /* border-bottom: 4px solid lightgrey;  */
+}
+  
+  .form-check-input {
+    padding: 5px !important;
+  }
+  
+  .btns {
+    margin-left: 22%;
+    width: 70%;
+
+  }
+  .btnn{
+    margin-left: 260px;
+  }
+  .file {
+    margin-top: 20px;
+  }
+label{
+    font-size:15pt;
+
+}
diff --git a/apps/port/import.html b/apps/port/import.html
index 91ca4cc93..8e3d89f56 100644
--- a/apps/port/import.html
+++ b/apps/port/import.html
@@ -5,107 +5,41 @@
   <script src="../../core/Store.js"></script>
   <script src="./import.js"></script>
   <script src="./xml2geo.js"></script>
-  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
-  <link rel="stylesheet" href="../../common/stacktable.css">
-  <link rel="stylesheet" href="./style.css">
-  <link rel="stylesheet" href="../table.css" />
-  <link rel="stylesheet" href="../info.css" />
+  <!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css"> -->
+  <!-- <link rel="stylesheet" href="../../common/stacktable.css"> -->
+  <link rel="stylesheet" href="./import.css">
+  <!-- <link rel="stylesheet" href="../table.css" />
+  <link rel="stylesheet" href="../info.css" /> -->
   <title>Import and Export caMicroscope</title>
 </head>
-<style>
-  #exportTitle {
-    background-color: #17a2b8 !important;
-    color: white;
-    font-size: 18px;
-  }
-
-  .buttons {
-    width: 20%;
-    padding: 10px 0;
-    margin: 10px 40px;
-    border-radius: 5px;
-    border: none;
-    background: #17a2b8;
-    font-size: 14px;
-    font-weight: 600;
-    color: #fff;
-  }
-
-  .buttons:hover {
-    border: 1px solid #17a2b8;
-    color: #17a2b8;
-    background: #fff;
-  }
-
-  .h1 {
-    height: 120px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .h3 {
-    margin: 20px 0 0 25%;
-    font-size: 18px;
-  }
-
-  .h {
-    margin: 5px;
-  }
-
-  input {
-    margin: 5px;
-  }
-  
-  .form-check-input {
-    padding: 5px !important;
-  }
-
-  .btns {
-    display: flex;
-    margin: 0 20px;
-  }
-  .btnn{
-    margin: 10px 180px;
-  }
-  .file {
-    margin-top: 20px;
-  }
-  .slide {
-    margin:5px;
-  }
-</style>
 
 <body>
   <div class="" id="exportTitle">
     <h1 class="h1">Import Annotations</h1>
   </div>
-  <div class="h3">
+  <div class="form">
     <h3 class="h">Info</h3>
-    <div class="form">
-      <div class="slide">
-        <label for="slide_id" class="slide">Slide Id:</label>
-        <br>
-        <input type="text" id="slide_id" name="slide_id"><br>
-      </div>
-      <div class="slide">
-        <label for="annot_name" class="slide">Annotation Name:</label><br>
-        <input type="text" id="annot_name" name="annot_name"><br>
-      </div>
-      <h3 class="h h3 file">File Contents</h3>
-      <div class="slide">
-        <label for="annot_name" class="slide">Input:</label><br>
-        <textarea id="input" name="input" class="slide" rows="5" cols="75"></textarea><br>
-      </div>
-      <div class="btns">
-        <button id="convert_btn btn1" class="buttons" onclick="xml2geo()" type="button">Convert from XML</button>
-        <button id="prepare_btn btn2" class="buttons" onclick="prepareAnnot()" type="button">Prepare JSON</button>
-      </div>
-      <label for="annot_name" class="slide">Output:</label><br>
-      <textarea id="input" name="input" class="slide" rows="5" cols="75"></textarea><br>
-      <button id="post_btn" class="buttons btnn" onclick="saveAnnot()" type="button">Post</button>
+  <br>
+    <div class="slide" >
+      <input type="text"  name="slide_id" placeholder="Slide Id:"><br>
+    </div>
+    <br>
+    <div class="slide">
+      <input type="text" name="annot_name" placeholder="Annotation Name:"><br>
     </div>
+    <h3 class="h2">File Contents</h3>
+    <div class="slide">
+      <textarea name="input" class="slide" rows="5" cols="75" placeholder="Input Here"></textarea><br>
+    </div>
+    <br>
+    <div class="btns">
+      <button id="convert_btn btn1" class="buttons" onclick="xml2geo()" type="button">Convert from XML</button>
+      <button id="prepare_btn btn2" class="buttons" onclick="prepareAnnot()" type="button">Prepare JSON</button>
+    </div>
+    <br>
+      <textarea name="input" class="slide" rows="5" cols="75" placeholder="Output:"></textarea><br>
+      <button id="post_btn" class="buttons btnn" onclick="saveAnnot()" type="button">Post</button>
   </div>
 </body>
 
diff --git a/apps/port/style.css b/apps/port/style.css
index ee822619d..d44a9b406 100644
--- a/apps/port/style.css
+++ b/apps/port/style.css
@@ -1,7 +1,8 @@
 html, body {
       min-height: 100%;
       }
-      body, div, form, input, select, p {
+
+      body, div, input, select, p {
       padding: 0;
       margin: 0;
       outline: none;
@@ -25,7 +26,6 @@ html, body {
       }
       form {
       width: 100%;
-      padding: 20px;
       }
       fieldset {
       border: none;
@@ -46,6 +46,7 @@ html, body {
       }
       label {
       padding: 0 5px;
+      font-size: 14pt;
       text-align: right;
       vertical-align: middle;
       }
@@ -120,4 +121,4 @@ html, body {
     select, .children, .gender, .bdate-block {
       width: calc(60% + 16px);
     }
-}
+}
\ No newline at end of file

From d6f5777ae71a511f2d390ca3d92474586c847a96 Mon Sep 17 00:00:00 2001
From: barchakuz <behroze.barcha@gmail.com>
Date: Sun, 31 Mar 2024 18:53:38 +0500
Subject: [PATCH 2/3] import form fix

---
 apps/port/import.css | 29 +++++++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/apps/port/import.css b/apps/port/import.css
index 275fd5153..a351c602e 100644
--- a/apps/port/import.css
+++ b/apps/port/import.css
@@ -7,9 +7,10 @@ body{
 }
 .form{
     margin: auto;
-    margin-top: 0.4%;
     width: 50%;
+    height: 100%;
     background-color:#f2f2f2;
+    box-sizing: border-box;
 
 }
 input {
@@ -23,13 +24,15 @@ input {
     transition: background-color 0.3s ease;
   }
 textarea{
+    margin-left: 5%;
     font-family: Roboto, Arial, sans-serif;
-    font-size: 16
-    width: 60%;
-    margin-left: 20%;
+    font-size: 16px;
+    width: 90%; 
+    max-width: 100%; 
     height: 150px;
     border: 3px solid grey;
     transition: background-color 0.3s ease;
+    box-sizing: border-box;
   }
 input:hover{
     background-color: #F9F7F1;
@@ -129,3 +132,21 @@ label{
     font-size:15pt;
 
 }
+@media only screen and (max-width: 600px) {
+    .form {
+        width: 100%;
+        margin-left: 0px;
+    }
+    
+    .buttons {
+        width: calc(50% - 5px); 
+        display: block; 
+        margin-right: 5px; /* Add margin between buttons */
+        margin-bottom: 10px; /* Add margin below buttons */
+    }
+
+    textarea {
+        width: 90%; /* Adjust textarea width to 90% for better fit */
+        margin-left: 5%; /* Center textarea */
+    }
+}
\ No newline at end of file

From c2eccc5fa9d649eb07b385a74f72931e26c6c96c Mon Sep 17 00:00:00 2001
From: barchakuz <behroze.barcha@gmail.com>
Date: Sun, 31 Mar 2024 18:56:28 +0500
Subject: [PATCH 3/3] Form test

---
 apps/port/import.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/port/import.css b/apps/port/import.css
index a351c602e..225ef2357 100644
--- a/apps/port/import.css
+++ b/apps/port/import.css
@@ -141,12 +141,12 @@ label{
     .buttons {
         width: calc(50% - 5px); 
         display: block; 
-        margin-right: 5px; /* Add margin between buttons */
-        margin-bottom: 10px; /* Add margin below buttons */
+        margin-right: 5px; 
+        margin-bottom: 10px; 
     }
 
     textarea {
-        width: 90%; /* Adjust textarea width to 90% for better fit */
-        margin-left: 5%; /* Center textarea */
+        width: 90%; 
+        margin-left: 5%; 
     }
 }
\ No newline at end of file