index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="topbar/topbar.css">

    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="./lib/FileSaver.js"></script>
    <script src="settings.js"></script>
    <script src="sequence-annotations.js"></script>
    <script src="topbar/downloadSVG.js"></script>
    <script src="topbar/default.js"></script>
    <script src="localStorage.js"></script>
    <style>

        .annotation-rect {
            fill-opacity: 0.0;
            stroke-width: 3;
            stroke: #000;
        }
    </style>


</head>
<body>

<div class="navbar">
    <span><a href="javascript:void(0)" class="dropbtn">Sequence Annotations</a></span>

    <span class="dropdown">
        <a href="javascript:void(0)" class="dropbtn">File</a>
        <div class="dropdown-content">
          <a href="#" onclick="downloadSVG('sequence.svg');">Save as SVG</a>
        </div>
    </span>

    <span class="dropdown">
        <a href="javascript:void(0)" class="dropbtn">Edit</a>
        <div class="dropdown-content">
          <a href="#" onclick="openImportFileWindow();">Import FASTA File...</a>
          <a href="#" onclick="clearSequenceGroup();">Clear</a>
          <a href="#" onclick="createAnnotationForSelection();">Add an Annotation [Enter]</a>
        </div>
    </span>

    <span class="dropdown">
        <a href="javascript:void(0)" class="dropbtn">Preferences</a>
    </span>

    <span class="dropdown">
        <a href="javascript:void(0)" class="dropbtn">Help</a>
        <div class="dropdown-content">
          <a href="https://github.com/tfesenko/SeqAns" target="_blank" >About SeqAns</a>
          <a href="https://github.com/tfesenko/SeqAns/issues/new" target="_blank" >Report a Bug</a>
          <a href="#" onclick="clearSequenceGroup();window.localStorage.clear();draw(JSON.parse(getContentFromStorage()));">Clear and Load a Sample Sequence</a>
        </div>
    </span>
</div>

<div id="import-file-window" class="modal">
    <div class="modal-content">
        <h2>Upload a FASTA file:</h2>
        <input type="file" id="files" name="files[]"/>
        <div class="right">
            <button id="cancel-load-file" class="btn cancel">Cancel</button>
            <button id="load-fasta-file" class="btn">Load file</button>
        </div>
    </div>
</div>

<script src="topbar/topbar.js"></script>
<script type="text/javascript">

    var margin = 75,
        width = 1400 - margin,
        height = 5600 - margin;

    var svg = d3.select("body")
        .append("div").attr("id", "root").append("svg");
    draw(JSON.parse(getContentFromStorage()));
</script>
</body>
</html>