<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ner.edith</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <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>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <style>
        body{font-family:Verdana;font-size:16px}
        table{table-layout:fixed;width:100%;text-align:center}
        th{background-color:lightgray}
        .editable:hover{background-color:yellow}
        tr:hover{background-color:whitesmoke}

        .accordion:hover .accordion-item:hover .accordion-item-content,
		.accordion .accordion-item--default .accordion-item-content{height:9em;}
		.accordion-item-content, .accordion:hover .accordion-item-content{height:0;overflow:hidden;transition:height.25s;}
		.accordion{padding:0;margin:0auto;width:100px;}
		.accordion-item:hover{background-color:yellow;}

        .type_select:hover{background-color:yellow;}

        .ner_per{background-color:skyblue}
        .ner_loc{background-color:goldenrod}
        .ner_org{background-color:plum}
        .ner_pub{background-color:lightgreen}
        .ner_conf{background-color:olive}
        .ner_todo{background-color:turquoise}

        .fit-image{
            width: 100%;
            object-fit: cover;
        }

        input[type=range]::-moz-focus-outer {
            border: 0;
        }
    </style>
</head>
<body>

<div class="container-fluid">

    <div class="row mt-5">

        <div class="col-2">
            <div id="file-region"></div>
        </div>
        <div class="col-8">
            <div class="row">
                <div class="col text-center">
                    <h3><a href="https://github.com/cneud/ner.edith" target="_blank">ner.edith</a>: named entity recognition editor in html</h3>
                    <a href="https://github.com/cneud/ner.edith/blob/master/docs/User_Guide.md" target="_blank">User Guide</a> | <a href="https://github.com/cneud/ner.edith/blob/master/docs/Annotation_Guidelines.md" target="_blank">Annotation Guidelines</a> | <a href="https://github.com/cneud/ner.edith/issues" target="_blank">Issues</a><hr>
                </div>
            </div>
        </div>
        <div class="col-2">
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-2" id="region-left">
            <a href="" id="preview-link">
                <img id="preview" alt="facsimile_preview" class="img-responsive fit-image"/>
            </a>
        </div>
        <div class="col-8 text-center" id="tableregion">
            Please upload a TSV file in the <a href="https://sites.google.com/site/germeval2014ner/data" target="_blank">GermEval2014 data format</a>:
            <br><br>
            <input type="file" id="tsv-file" name="files"/>
        </div>
        <div class="col-2" id="region-right">
        </div>
    </div>
    <div class="row  mt-3">
        <div class="col-2">
        </div>
        <div class="col-8 text-center" id="btn-region">
        </div>
        <div class="col-2">
        </div>
    </div>

</div>

<script src="ner-edith.js"></script>
</body>
</html>