1<!DOCTYPE html>
2<html lang="en">
3<!--
4 ___ _____ _
5 / _ \ _ _|_ _|_ _| | _____
6 | | | | '_ \| |/ _` | |/ / _ \
7 | |_| | | | | | (_| | < __/
8 \___/|_| |_|_|\__,_|_|\_\___|
9
10 Copyright 2021 Louis Dalibard
11 -->
12
13<head>
14 <link rel="stylesheet" href="./style.css">
15 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
16 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
17 <script>
18 moment().format();
19 </script>
20 <input type="file" name="FileAttachment" id="FileAttachment" class="upload" style="display: none;"></input>
21 <input type="file" name="FileAttachmentDates" id="FileAttachmentDates" class="uploadDates"
22 style="display: none;"></input>
23 <meta charset="UTF-8">
24 <!-- PDBe Molstar -->
25 <!-- Required for IE11 -->
26 <script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
27 <!-- Web component polyfill (only loads what it needs) -->
28 <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-lite.js"
29 charset="utf-8"></script>
30 <!-- Required to polyfill modern browsers as code is ES5 for IE... -->
31 <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
32 charset="utf-8"></script>
33
34 <!-- CSS -->
35 <link rel="stylesheet" type="text/css"
36 href="https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdbe-molstar-3.1.0.css">
37
38 <!-- For Light Theme include this css file instead of above -->
39 <!--<link rel="stylesheet" type="text/css" href="https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdbe-molstar-light-3.1.0.css">-->
40 <!--
41Tip: Set background color to white for light theme
42-->
43
44 <!-- JS -->
45 <script type="text/javascript"
46 src="https://www.ebi.ac.uk/pdbe/pdb-component-library/js/pdbe-molstar-component-3.1.0.js"></script>
47</head>
48
49<body>
50 <div id="toast-notification"></div>
51 <div id="header">
52 <div id="header-icons" onclick="toastCopyright();"><img id="header-icon-image"
53 src="./assets/OnTake.dev-Scaled.png"></img></div>
54 <div id="header-title">OnTake's DNA Viewer. Version: 2022.07.09.18.21.</div>
55 <div class="night-mode-button" id="night-mode-button" onclick="toggleDarkMode();"><svg
56 xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-moon-fill"
57 viewBox="0 0 16 16">
58 <path
59 d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z" />
60 </svg></div>
61 <div class="week-control-button" id="week-back-button" onclick="lastWeek();"><svg
62 xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
63 class="bi bi-caret-left-fill" viewBox="0 0 16 16">
64 <path
65 d="m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z" />
66 </svg></div>
67 <div class="week-control-button" id="week-count"">0</div>
68 <div class=" week-control-button" id="week-forward-button" onclick="nextWeek();"><svg
69 xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
70 class="bi bi-caret-right-fill" viewBox="0 0 16 16">
71 <path
72 d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z" />
73 </svg></div>
74 <div class="week-control-button" id="week-upload-button" onclick="upload();"><svg
75 xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg"
76 viewBox="0 0 16 16">
77 <path d="M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z" />
78 </svg></div>
79 </div>
80 <div id="base-pair-container">
81 </div>
82 <div id="molstar-viewer-window">
83
84 </div>
85 <script src="./main.js"></script>
86</body>