styling

5 years ago · 6e6ca4b696
parent 56dadf17db
commit 6e6ca4b696
1 changed files with 13 additions and 4 deletions
--- a/ner.ed.html
+++ b/ner.ed.html
@ -6,16 +6,19 @@
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.0.1/papaparse.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <style>
-        body{font-family:Courier;font-size:16px}
+        body{font-family:Open Sans;font-size:16px}
        table{table-layout:fixed;width:765px;text-align:center}
        th{background-color:lightgray}
        td:hover{background-color:yellow}
        tr:hover{background-color:whitesmoke}
+        .ner_per{background-color:pink}
+        .ner_loc{background-color:orange}
+        .ner_org{background-color:red}
    </style>
 </head>
 <body>
    <h3>ner.edith: named entity recognition editor in html</h3>
-    Please upload a TSV (tab-separated-values) file in the <a href="https://sites.google.com/site/germeval2014ner/data">GermEval2014 data format</a>: <input type="file" id="tsv-file" name="files"/><br><br>
+    Please upload a TSV (tab-separated-values) file in the GermEval2014 data format<sup>[<a href="https://sites.google.com/site/germeval2014ner/data" target="_blank">i</a>]</sup>: <input type="file" id="tsv-file" name="files"/><br><br>
    <table id="table">
        <thead>
            <tr>
@ -77,7 +80,7 @@
                makeTdEditable(target);
            }

-        };
+        }

        function makeTdEditable(td) {
            editingTd = {
@ -113,7 +116,13 @@
        }

        $(document).ready(function() {
-            $("#tsv-file").change(handleFileSelect);
+            $('#tsv-file').change(handleFileSelect);
+            $("#table tr:contains('B-PER')").addClass('ner_per');
+            $("#table tr:contains('I-PER')").addClass('ner_per');
+            $("#table tr:contains('B-LOC')").addClass('ner_loc');
+            $("#table tr:contains('I-LOC')").addClass('ner_loc');
+            $("#table tr:contains('B-ORG')").addClass('ner_org');
+            $("#table tr:contains('B-ORG')").addClass('ner_org');
        });
    </script>
 </body>