mirror of https://github.com/TriliumNext/Notes
248 lines
9.4 KiB
HTML
248 lines
9.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Notecase web app</title>
|
|
</head>
|
|
<body>
|
|
<div id="top" style="text-align: center;">
|
|
|
|
<span id="top-message"></span>
|
|
<span id="error-message"></span>
|
|
</div>
|
|
|
|
<div id="content" style="margin-left: auto; margin-right: auto; width: 1100px; position: relative;">
|
|
<div style="position: absolute; left: 1020px;" class="hide-toggle">
|
|
<form action="logout" method="POST">
|
|
<input type="submit" class="btn btn-sm" value="Logout">
|
|
</form>
|
|
</div>
|
|
|
|
<div class="hide-toggle" style="position: absolute; left: 940px;">
|
|
<button class="btn btn-sm" onclick="displaySettings();">Settings</button>
|
|
</div>
|
|
|
|
<div class="hide-toggle" style="width: 300px; height: 100%; float: left;">
|
|
<p>
|
|
<label>Search:</label>
|
|
<input name="search" autocomplete="off">
|
|
<button id="btnResetSearch">×</button>
|
|
<span id="matches"></span>
|
|
</p>
|
|
|
|
<a onclick="createNewTopLevelNote()" title="Create new top level note" class="icon-action">
|
|
<img src="stat/icons/file-plus.png" alt="Create new top level note"/>
|
|
</a>
|
|
|
|
<a onclick="collapseTree()" title="Collapse tree" class="icon-action">
|
|
<img src="stat/icons/list.png" alt="Collapse tree"/>
|
|
</a>
|
|
|
|
<a onclick="scrollToCurrentNote()" title="Scroll to current note" class="icon-action">
|
|
<img src="stat/icons/crosshair.png" alt="Collapse tree"/>
|
|
</a>
|
|
|
|
<div id="tree">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="noteDetailWrapper">
|
|
<div style="float: left; margin: 0 5px 5px 5px;" class="hide-toggle">
|
|
<a onclick="encryptNoteAndSendToServer()"
|
|
title="Encrypt the note so that password will be required to view the note"
|
|
class="icon-action"
|
|
id="encryptButton">
|
|
<img src="stat/icons/lock.png" alt="Encrypt note"/>
|
|
</a>
|
|
|
|
<a onclick="decryptNoteAndSendToServer()"
|
|
title="Decrypt note permamently so that password will not be required to access this note in the future"
|
|
class="icon-action"
|
|
id="decryptButton">
|
|
<img src="stat/icons/unlock.png" alt="Decrypt note"/>
|
|
</a>
|
|
|
|
|
|
|
|
<input autocomplete="off" value="Welcome to Notecase web app!" id="noteTitle" style="font-size: x-large; border: 0; width: 600px;" tabindex="1">
|
|
</div>
|
|
|
|
<div style="clear: both; height: 0"></div>
|
|
|
|
<div id="noteDetail" style="overflow: scroll; height: 100%;">
|
|
<p>This prototype version supports basic editing, including some formatting (bold, italic, strike-through, underscore), images (just paste it into editor) and links. To edit the note, just click on title or content and you can directly modify it. Changes are saved immediately.</p>
|
|
|
|
<p>You can work with the tree using following keyboard shortcuts:</p>
|
|
|
|
<ul>
|
|
<li>insert - create new note on current tree level</li>
|
|
<li>ctrl + insert - create new sub-note</li>
|
|
<li>delete - delete current note (and it's sub-notes)</li>
|
|
<li>shift + up - move current note up in the current tree level</li>
|
|
<li>shift + down - move current note down in the current tree level</li>
|
|
<li>shift + left - move current note up in the tree hierarchy</li>
|
|
<li>shift + right - move current note down in the tree hierarchy</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="recentNotesDialog" title="Recent notes" style="display: none;">
|
|
<select id="recentNotesSelectBox" size="15" style="width: 100%">
|
|
</select>
|
|
</div>
|
|
|
|
<div id="insertLinkDialog" title="Insert link" style="display: none;">
|
|
<form id="insertLinkForm">
|
|
<div class="form-group">
|
|
<label for="noteAutocomplete">Link to note</label>
|
|
<input id="noteAutocomplete" style="width: 100%;">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="linkTitle">Link title</label>
|
|
<input id="linkTitle" style="width: 100%;">
|
|
</div>
|
|
|
|
<button class="btn btn-sm">Add link</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div id="jumpToNoteDialog" title="Jump to note" style="display: none;">
|
|
<form id="jumpToNoteForm">
|
|
<div class="form-group">
|
|
<label for="jumpToNoteAutocomplete">Jump to note</label>
|
|
<input id="jumpToNoteAutocomplete" style="width: 100%;">
|
|
</div>
|
|
|
|
<button class="btn btn-sm">Jump</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div id="encryptionPasswordDialog" title="Encrypted note" style="display: none;">
|
|
<form id="encryptionPasswordForm">
|
|
<div class="form-group">
|
|
<label for="encryptionPassword">This note is encrypted. Enter password to show it:</label>
|
|
<input id="encryptionPassword" style="width: 250px;" type="password">
|
|
<button class="btn btn-sm">Show</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div id="settingsDialog" title="Settings" style="display: none;">
|
|
<div id="settingsTabs">
|
|
<ul>
|
|
<li><a href="#changePassword">Change password</a></li>
|
|
<li><a href="#encryptionTimeout">Encryption timeout</a></li>
|
|
</ul>
|
|
<div id="changePassword">
|
|
<form id="changePasswordForm">
|
|
<div class="form-group">
|
|
<label for="oldPassword">Old password</label>
|
|
<input class="form-control" id="oldPassword" type="password">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="newPassword1">New password</label>
|
|
<input class="form-control" id="newPassword1" type="password">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="newPassword2">New password once more</label>
|
|
<input class="form-control" id="newPassword2" type="password">
|
|
</div>
|
|
|
|
<button class="btn btn-sm">Change password</button>
|
|
</form>
|
|
</div>
|
|
<div id="encryptionTimeout">
|
|
<p>Encryption timeout is a time period after which the encryption key and encrypted data is wiped out from
|
|
browser's memory. This is measured from the last encryption / decryption activity.</p>
|
|
|
|
<form id="encryptionTimeoutForm">
|
|
<div class="form-group">
|
|
<label for="encryptionTimeoutInSeconds">Encryption timeout (in seconds)</label>
|
|
<input class="form-control" id="encryptionTimeoutInSeconds" type="number">
|
|
</div>
|
|
|
|
<button class="btn btn-sm">Save</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="noteHistoryDialog" title="Note history" style="display: none;">
|
|
<div style="display: flex;">
|
|
<select id="noteHistoryList" size="25" style="flex-grow: 1;">
|
|
</select>
|
|
|
|
<div id="noteHistoryContent" style="flex-grow: 3;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
const baseUrl = '';
|
|
</script>
|
|
|
|
<script src="stat/lib/jquery.min.js"></script>
|
|
|
|
<!-- bootstrap needs to be included before jQuery UI, otherwise close icon in the dialog will be missing -->
|
|
<link href="stat/lib/bootstrap/css/bootstrap.css" rel="stylesheet">
|
|
<script src="stat/lib/bootstrap/js/bootstrap.js"></script>
|
|
|
|
<link href="stat/lib/jqueryui/jquery-ui.min.css" rel="stylesheet">
|
|
<script src="stat/lib/jqueryui/jquery-ui.min.js"></script>
|
|
|
|
<!-- Include Fancytree skin and library -->
|
|
<link href="stat/lib/fancytree/skin-win8/ui.fancytree.css" rel="stylesheet">
|
|
<script src="stat/lib/fancytree/jquery.fancytree-all.js"></script>
|
|
|
|
<link href="stat/lib/summernote/summernote.css" rel="stylesheet">
|
|
<script src="stat/lib/summernote/summernote.js"></script>
|
|
|
|
<script src="stat/lib/jquery.hotkeys.js"></script>
|
|
<script src="stat/lib/jquery.fancytree.hotkeys.js"></script>
|
|
|
|
<script src="stat/lib/jquery.ui-contextmenu.min.js"></script>
|
|
|
|
<script src="stat/lib/fuse.min.js"></script>
|
|
|
|
<!-- https://github.com/ricmoo/aes-js -->
|
|
<script src="stat/lib/aes.js"></script>
|
|
<!-- https://github.com/emn178/js-sha256 -->
|
|
<script src="stat/lib/sha256.min.js"></script>
|
|
<!-- https://github.com/ricmoo/scrypt-js -->
|
|
<script src="stat/lib/scrypt/scrypt.js"></script>
|
|
<script src="stat/lib/scrypt/buffer.js"></script>
|
|
<script src="stat/lib/scrypt/setImmediate.js"></script>
|
|
<script src="stat/lib/scrypt/unorm.js"></script>
|
|
|
|
<link href="stat/style.css" rel="stylesheet">
|
|
|
|
<script src="stat/js/init.js"></script>
|
|
|
|
<!-- Tree scripts -->
|
|
<script src="stat/js/tree.js"></script>
|
|
<script src="stat/js/tree_mutations.js"></script>
|
|
<script src="stat/js/tree_utils.js"></script>
|
|
<script src="stat/js/drag_and_drop.js"></script>
|
|
<script src="stat/js/context_menu.js"></script>
|
|
|
|
<!-- Note detail -->
|
|
<script src="stat/js/note.js"></script>
|
|
<script src="stat/js/notecase2html.js"></script>
|
|
<script src="stat/js/html2notecase.js"></script>
|
|
<script src="stat/js/encryption.js"></script>
|
|
|
|
<!-- dialogs -->
|
|
<script src="stat/js/recent_notes.js"></script>
|
|
<script src="stat/js/add_link.js"></script>
|
|
<script src="stat/js/jump_to_note.js"></script>
|
|
<script src="stat/js/settings.js"></script>
|
|
<script src="stat/js/note_history.js"></script>
|
|
|
|
<script src="stat/js/utils.js"></script>
|
|
<script src="stat/js/convert2html.js"></script>
|
|
</body>
|
|
</html> |