softwarepub · SKernchen · Feb 20, 2026 · Feb 23, 2026 · Mar 3, 2026 · Mar 3, 2026
diff --git a/public/curation/conflict/index.html b/public/curation/conflict/index.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <link rel="stylesheet" href="../../style.css">
+    <title>Software CaRD</title>
+    <link rel="icon" href="../../pictures/Logo.png" type="image/icon type">
+
+</head>
+<body>
+    <div id="header">
+    <h1><a href="../">Software CaRD</a>
+    </h1>
+    <canvas onclick="location.href = '../reporting/';" id="radar" width="80" height="80">
+    </canvas>
+    </div>
+
+
+
+
+    <p id="project-name"><b>Curation Conflict</b></p>
+
+    <!--
+    "@id": ["https://orcid.org/0000-0001-6372-3853",
+            {
+            "plugin": "cff",
+            "local_path": "CITATION.cff",
+            "timestamp": "2025-03-18T13:28:37.657148",
+            "harvester": "cff",
+          "alternative_source":{"plugin": "codemeta",
+                                "value": "https://orcid.org/0000-0001-2345-6789",
+                                  "local_path": "codemeta.md",
+                                  "timestamp": "2025-04-18T13:28:37.657148",
+                                "harvester": "codemeta"}
+          },
+         {"conflict": "Curation"}
+    -->
+    <div id="content">
+        <p>See the conflict in the folling tables:</p>
+        <div id="conflict">
+                <table class="table table-striped">
+                    <colgroup>
+                        <col id="col0">
+                        <col id="col1">
+                    </colgroup>
+
+                    <tbody id="metadata">
+                        <tr >
+                            <th colspan="2">CITATION.cff</th>
+                        </tr>
+                        <tr>
+                            <td id="key">@id</td>
+                            <td id="value">
+                                https://orcid.org/0000-0001-6372-3853
+                            </td>
+                        </tr>
+
+                    </tbody>
+                </table>
+                <table class="table table-striped">
+                    <colgroup>
+                        <col id="col0">
+                        <col id="col1">
+                    </colgroup>
+                    <tbody id="metadata">
+                        <tr >
+                            <th colspan="2">codemeta.md</th>
+                        </tr>
+                        <tr>
+                            <td id="key">@id</td>
+                            <td id="value">
+                                https://orcid.org/0000-0001-2345-6789
+                            </td>
+                        </tr>
+
+                    </tbody>
+                </table>
+        </div>
+    </div>
+    <p>
+
+
+    </p>
+    <div class="comment">
+        <p>Add comment to conflict</p>
+        <textarea rows="2" cols="70"></textarea>
+        <button>Add Comment</button>
+    </div>
+
+</body>
+</html>
diff --git a/public/curation/extract.js b/public/curation/extract.js
@@ -8,6 +8,8 @@ function extract_info(cell, obj, tag, colorPolicies){
           element.style.color = colorPolicies[obj[2]["conflict"]];
           element.appendChild(document.createTextNode(` ${obj[0]}`));
           cell.appendChild(element);
+          console.log("parent: "+cell.parentNode)
+          //cell.parentNode.style.background = colorPolicies[obj[2]["conflict"]];
         }else{
         cell.appendChild(document.createTextNode(` ${obj[0]}`));
         }
@@ -16,8 +18,11 @@ function extract_info(cell, obj, tag, colorPolicies){
       else if(!Array.isArray(obj[0]) && Object.keys(obj[0]).includes("familyName")){
           obj.forEach(e =>{
             const element = document.createElement("div");
-            extract_person(e, element, tag, colorPolicies);
+            const hasConfict = extract_person(e, element, tag, colorPolicies);
             cell.appendChild(element);
+            /*if (hasConfict){
+              cell.classList.add("table-warning");
+            }*/
 
           })}
       else if(Array.isArray(obj[0])){
@@ -53,12 +58,13 @@ function extract_info(cell, obj, tag, colorPolicies){
     }
 
   function extract_person(e, element, tag, colorPolicies){
+    let hasConfict = false;
     const tooltip = document.createElement("div");
     const tooltiptag = document.createElement("div");
-    tooltip.classList.add("tooltip");
+    tooltip.classList.add("swc-tooltip");
     tooltip.onclick = function(){link_to_person(e)};
     const tooltiptext = document.createElement("div");
-    tooltiptext.classList.add("tooltiptext");
+    tooltiptext.classList.add("swc-tooltiptext");
     const text = document.createTextNode(`${e.familyName[0]}, ${e.givenName[0]} `);
     tooltiptag.appendChild(document.createTextNode("See Details"));
     tooltiptag.appendChild(document.createElement("br"));
@@ -77,8 +83,8 @@ function extract_info(cell, obj, tag, colorPolicies){
         if(e[k][key][2] && e[k][key][2]["conflict"]){
           pair_in_list.style.color = colorPolicies[e[k][key][2]["conflict"]];
           tooltiptag.style.color = colorPolicies[e[k][key][2]["conflict"]];
-          /*pair_in_list.className += " error";
-          tooltiptag.className += " error";*/
+          hasConfict = true;
+
         }
         pair.appendChild(pair_in_list);
       }
@@ -89,8 +95,7 @@ function extract_info(cell, obj, tag, colorPolicies){
       if(e[k][2] && e[k][2]["conflict"]){
         pair.style.color = colorPolicies[e[k][2]["conflict"]];
         tooltiptag.style.color = colorPolicies[e[k][2]["conflict"]];
-        //pair.className += " error";
-        //tooltiptag.className += " error";
+        hasConfict = true;
       }
     }
     tooltiptext.appendChild(pair);
@@ -99,6 +104,7 @@ function extract_info(cell, obj, tag, colorPolicies){
     tooltip.appendChild(tooltiptext);
     tooltip.appendChild(text);
     element.appendChild(tooltip);
+    return hasConfict;
   }
 
   function link_to_person(data){

diff --git a/public/curation/index.html b/public/curation/index.html
@@ -5,11 +5,10 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
     <link rel="stylesheet" href="../style.css">
     <title>Software CaRD</title>
     <link rel="icon" href="../pictures/Logo.png" type="image/icon type">
-
 
 </head>
 <body>
@@ -19,14 +18,32 @@ <h1><a href="../">Software CaRD</a>
     <canvas onclick="location.href = '../reporting/';" id="radar" width="80" height="80">
     </canvas>
     </div>
+    <div class="navigation">
+        <div>
+            <a class="notes">&#x270D;   <!-- Or &#x1F4AC; -->
+            <p class="notes-desc">Start to gather curation notes</p>
+            </a>
+        </div>
+        <div>
+            <a class="notes">&#x1F4C3;   <!-- Or &#x1F3AB; -->
+            <p class="notes-desc">Send Issue Report to GitLab/GitHub</p>
+            </a>
+        </div>
+        <div id="user-login">
+            <a class="notes" href="../gitlab-setup/"> &#x1F464; <!-- Or &#x1F4AC; -->
+                <p class="notes-desc">Authentificate to GitLab/GitHub</p>
+            <a>
+        </div>
+
+    </div>
 
     <p id="project-name"><b>Metadata</b></p>
     <div class="operators">
 
 
 
     <div class="dropdown">
-        <button onclick="showFilter()" class="dropbtn">Filter</button>
+        <button onclick="showFilter()" class="btn btn-primary dropbtn">Filter</button>
         <div id="filterDropdown" class="dropdown-content">
             <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
             <a>&#10004; Select all</a>
@@ -36,14 +53,15 @@ <h1><a href="../">Software CaRD</a>
             </template>
         </div>
     </div>
-
-    <input type="checkbox" id="extended" name="extended" value=1 checked>
-    <label for="extended">Extended view</label><br>
+        <div class="form-check form-switch">
+    <input class="form-check-input"  type="checkbox" id="extended" name="extended" role="switch" value=1 checked>
+    <label class="form-check-label"  for="extended">Extended view</label><br>
+        </div>
     </div>
 
     <div id="content">
         <div id="hermes">
-                <table>
+                <table class="table table-striped">
                     <colgroup>
                         <col id="col0">
                         <col id="col1">
@@ -54,6 +72,9 @@ <h1><a href="../">Software CaRD</a>
                         <tr>
                             <td id="key"></td>
                             <td id="value">
+                                <div class="single-line-comment">+
+                                    <p class="hover-text">Comment on this row</p>
+                                </div>
                             </td>
                             <td id="tag"></td>
                         </tr>

diff --git a/public/style.css b/public/style.css
@@ -52,20 +52,46 @@ button{
     justify-content: center;
 }
 
-.conflict-operators{
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-end;
+.operators{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.navigation{
+  position: absolute;
+  font-size: larger;
+  top:5%;
+  right:3%;
+  display: flex;
+  flex-direction: row;
+}
+
+.notes{
+  right: 5%;
+  cursor: pointer;
+}
+.notes:hover .notes-desc{
+  visibility: visible;
+}
+.notes-desc{
+  font-size: medium;
+  position: absolute;
+  width: 300px;
+  padding: 0px;
+  right: 1px;
+  text-align: end;
+  visibility: hidden;
 }
 
-.tooltip {
+.swc-tooltip {
     position: relative;
     border-bottom: 1px dotted black;
     white-space:pre-wrap;
   }
 
-.tooltip .tooltiptext {
+.swc-tooltip .swc-tooltiptext {
 visibility: hidden;
 background-color: #555;
 color: #fff;
@@ -80,12 +106,12 @@ opacity: 0;
 transition: opacity 0.3s;
 border-radius: 12px;
 }
-.tooltip .tooltiptext p{
+.swc-tooltip .swc-tooltiptext p{
 font-size: large;
 margin: 0px;
 }
 
-.tooltip .tooltiptext::after {
+.swc-tooltip .swc-tooltiptext::after {
 content: "";
 position: absolute;
 top: 100%;
@@ -97,7 +123,7 @@ border-style: solid;
 border-color: #555 transparent transparent transparent;
 }
 
-.tooltip:hover .tooltiptext {
+.swc-tooltip:hover .swc-tooltiptext {
 visibility: visible;
 opacity: 1;
 }
@@ -137,7 +163,8 @@ button{
   text-align: center;
   background-image: none;
   background-color: #ddd;
-  color:black
+  color:black;
+  padding: 0px;
 
 }
 
@@ -164,8 +191,8 @@ button{
 .dropdown {
   position: relative;
   display: inline-block;
-  left: 41%;
-  top: -15px;
+  left: 36%;
+  top: 10px;
 }
 
 /* Dropdown Content (Hidden by Default) */
@@ -191,4 +218,50 @@ button{
 .dropdown-content a:hover {background-color: #f1f1f1}
 
 /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
-.show {display:block;}
+.show {display:block;}
+
+tr:hover .single-line-comment{
+  visibility: visible;
+}
+.single-line-comment{
+  position:absolute;
+  right: 20%;
+  visibility: hidden;
+}
+.single-line-comment:hover .hover-text{
+  visibility: visible;
+}
+
+.hover-text{
+  visibility: hidden;
+  position: relative;
+  background-color: #555;
+  color: #fff;
+  text-align: center;
+  padding: 2px;
+  border-radius: 6px;
+  z-index: 1;
+}
+.hover-text::after {
+content: "";
+position: absolute;
+bottom: 100%;
+left: 50%;
+margin-left: -5px;
+margin-right: 5px;
+border-width: 5px;
+border-style: solid;
+border-color: transparent transparent #555 transparent;
+}
+
+#conflict{
+  display: flex;
+  flex-direction: row;
+}
+
+.comment{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}