Note-Harbor-Extension/sidepanel.html at main · Note-Harbor/Note-Harbor-Extension · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<html>
  <head>
    <link rel="stylesheet" href="css/style.css" />
    <script src="lib/purify.min.js"></script>
    <script src="lib/marked.min.js"></script>
    <script src="lib/quill.js"></script>
    <link href="css/quill.snow.css" rel="stylesheet" />
  </head>
  <body>
    <div class="topContainerSearch">
      <input id="search" class="topInput" type="text" list="prefixes" autocomplete="off" placeholder="Search Notes">
      <datalist id="prefixes">
        <option value="folder:">Folder Name</option>
        <option value="title:">Note Title</option>
      </datalist>

      <button id="openSettings" class="settings-btn topButton" title="Options"></button>
    </div>

    <div class="topContainer">
      <div class="inputContainer">
        <input id="title" class="topInput title" type="text" placeholder="Title" maxlength="30">
        <div id="info" class="topInput body" autofocus="autofocus" placeholder="Write Here!"></div>
        <div class="mainBar">
          <div id="formatBar"></div>
          <button id="add" class="topButton">Add Note</button>
          <button id="erase" class="topButton">Erase</button>
        </div>
      </div>
    </div>

          <div class="flex">
        <div id="folderRow">
          <div id="dropdown" class="dropdown-btn dropdown topButton" title = "All Folders">
            <div class="dropdown-content">
            </div>
            <div id="dropdown-menu" class="dropdown-menu hidden"></div>
          </div>
          <button id="addFolderButton" class="plus-btn topButton" title="Add Folder"></button>
          <div id="folderContainer"></div>
        </div>
      </div>

    <!-- Creates Error Message -->
    <div id="errorMessage"></div>

    <!-- Holds all the notes -->
    <div id="container"></div>

    <!-- Floating Settings Menu -->
    <div id="settingsMenu" class="settings-menu">
      <div class="menu-item" id="settingsOption">Settings</div>
      <div class="menu-item" id="sortOption">Sort By</div>
      <div class="menu-item" id="websiteOption">Website</div>
    </div>

    <!-- Floating Sort Menu (Appears When Clicking "Sort By") -->
    <div id="sortMenu" class="settings-menu">
      <div class="menu-item" id="sortByOldest">Date (Oldest)</div>
      <div class="menu-item" id="sortByNewest">Date (Newest)</div>
      <!--<div class="menu-item" id="sortByFolder">Sort by Folder</div>-->
    </div>

    <dialog id="settingsModal" class="settings-modal">
      <div class="modal-content">
        <div class="settingsTop">
          <p id="settingsTitle">Settings</p>
          <button id="closeSettings" class="close-btn closeButton"></button>
        </div>
        <div class="settingsDiv">
          <label class="settingsHeader">Select Theme</label>
          <p class="settingsText">Choose a color palette for Note Harbor!</p>
          <select id="themeDropdown">
            <option value="legacy">Legacy</option>
            <option value="light">Light</option>
            <option value="dark">Dark</option>
            <option value="matcha">Matcha</option>
            <option value="nebula">Nebula</option>
          </select>
        </div>
        <div class="settingsDiv">
          <label class="settingsHeader">Delete All Notes</label>
          <p class="settingsText">Permanently delete all your notes. This action cannot be undone.</p>
          <button id="delall" class="topButton settingsButton">Delete All Notes</button>
        </div>
        <div class="settingsDiv">
          <label class="settingsHeader">Reset All Settings</label>
          <p class="settingsText">Restore all settings to default. Your notes will not be deleted.</p>
          <button id="resetSettings" class="topButton settingsButton">Reset All Settings</button>
        </div>
        <div class="settingsDiv">
          <label class="settingsHeader">Download Notes (Prototype)</label>
          <p class="settingsText">Download notes in JSON format.</p>
          <button id="downloadButton" class="topButton settingsButton" title="Download Notes">
            <!-- <i class="fas fa-download"></i> -->
            Download Notes
          </button>
        </div>
      </div>
    </dialog>
    <dialog id="deleteConfirmModal" class="settings-modal confirmModal">
      <div class="modal-content">
        <div class="settingsTop">
          <p class="settingsHeader">Are you sure?</p>
          <button id="cancelDeleteNotes" class="close-btn closeButton"></button>
        </div>
        <div class="settingsDiv">
          <p class="settingsText">This will permanently delete all your notes. This action cannot be undone.</p>
          <button id="confirmDeleteNotes" class="topButton settingsButton">Delete All Notes</button>
        </div>
      </div>
    </dialog>
    <dialog id="resetConfirmModal" class="settings-modal confirmModal">
      <div class="modal-content">
        <div class="settingsTop">
          <p class="settingsHeader">Are you sure?</p>
          <button id="cancelResetNotes" class="close-btn closeButton"></button>
        </div>
        <div class="settingsDiv">
          <p class="settingsText">This will permanently reset your settings. This action cannot be undone.</p>
          <button id="confirmResetNotes" class="topButton settingsButton">Reset All Settings</button>
        </div>
      </div>
    </dialog>
    <dialog id="deleteFolderModal" class="settings-modal confirmModal">
      <div class="modal-content">
        <div class="settingsTop">
          <p class="settingsHeader">Delete Folder?</p>
          <button id="cancelDeleteFolder" class="close-btn closeButton"></button>
        </div>
        <div class="settingsDiv">
          <p class="settingsText">This will remove the folder from all notes.</p>
          <button id="confirmDeleteFolder" class="topButton settingsButton">Delete Folder</button>
        </div>
      </div>
    </dialog>
    <dialog id="downloadConfirmModal" class="settings-modal confirmModal">
      <div class="modal-content">
        <div class="settingsTop">
          <p class="settingsHeader">Download notes?</p>
          <button id="cancelDownloadNotes" class="close-btn closeButton"></button>
        </div>
        <div class="settingsDiv">
          <p class="settingsText">This will download all your notes locally as a JSON file. </p>
          <button id="confirmDownloadNotes" class="topButton settingsButton">
            Download Notes
          </button>
        </div>
      </div>
    </dialog>
    <dialog id="deleteSingleNoteModal" class="settings-modal confirmModal">
      <div class="modal-content">
        <div class="settingsTop">
          <p class="settingsHeader">Are you sure?</p>
          <button id="cancelDeleteSingleNote" class="close-btn closeButton"></button>
        </div>
        <div class="settingsDiv">
          <p class="settingsText">This action cannot be undone.</p>
          <button id="confirmDeleteSingleNote" class="topButton settingsButton">Delete Note</button>
        </div>
      </div>
    </dialog>
  </body>


  <!-- Script call order matters -->
  <script src="js/drag.js"></script>
  <script src="js/formatBar.js"></script>
  <script src="js/notes.js"></script>
  <script src="js/search.js"></script>
  <script src="js/settings.js"></script>
  <script src="js/themes.js"></script>
  <script src="js/folders.js"></script>
  <script src="js/sidepanel.js"></script>
  <script src="js/editor.js"></script>
</html>