An unfinished system to manage all your paper documentation in an easy way.
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

index.html 14KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  6. <link rel="stylesheet" href="css/bootstrap.min.css" />
  7. <link rel="stylesheet" href="css/autodoc.css" />
  8. <script defer src="js/fontawesome-all.min.js"></script>
  9. <title>AutoDoc</title>
  10. </head>
  11. <body>
  12. <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  13. <a class="navbar-brand" href="#">AutoDoc</a>
  14. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
  15. aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  16. <span class="navbar-toggler-icon"></span>
  17. </button>
  18. <div class="collapse navbar-collapse" id="navbarSupportedContent">
  19. <ul class="navbar-nav mr-auto" id="autodoc_navbar">
  20. <li class="nav-item active">
  21. <a class="nav-link" href="#home">Home</a>
  22. </li>
  23. <li class="nav-item">
  24. <a class="nav-link" href="#document">Document</a>
  25. </li>
  26. <li class="nav-item">
  27. <a class="nav-link" href="#upload">Upload</a>
  28. </li>
  29. <li class="nav-item">
  30. <a class="nav-link" href="#tags">Tags</a>
  31. </li>
  32. <li class="nav-item">
  33. <a class="nav-link" href="#search">Search</a>
  34. </li>
  35. <!--
  36. <li class="nav-item dropdown">
  37. <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  38. Dropdown
  39. </a>
  40. <div class="dropdown-menu" aria-labelledby="navbarDropdown">
  41. <a class="dropdown-item" href="#">Action</a>
  42. <a class="dropdown-item" href="#">Another action</a>
  43. <div class="dropdown-divider"></div>
  44. <a class="dropdown-item" href="#">Something else here</a>
  45. </div>
  46. </li>
  47. -->
  48. </ul>
  49. <form class="form-inline my-2 my-lg-0">
  50. <input class="form-control mr-sm-2" type="search" placeholder="Quick Search" aria-label="Search" />
  51. </form>
  52. </div>
  53. </nav>
  54. <div class="container" id="autodoc_tab">
  55. <!-- Home -->
  56. <div class="container d-none" id="autodoc_tab_home">
  57. <h3>Current Documents</h3>
  58. <!-- template -->
  59. <div class="d-none" id="autodoc_template_home">
  60. <div class="row autodoc_template_home_row"></div>
  61. <div class="row">
  62. <div class="col autodoc_template_home_col text-center">
  63. <table class="table table-borderless table-sm small">
  64. <tr>
  65. <td colspan="2" class="text-center autodoc_img">
  66. <img class="autodoc_template_home_img img-thumbnail rounded" src="" />
  67. </td>
  68. </tr>
  69. <tr>
  70. <td class="text-left">Pages:</td>
  71. <td class="text-right">
  72. <span class="autodoc_template_home_pages">undefined</span>
  73. </td>
  74. </tr>
  75. <tr>
  76. <td class="text-left">Owner:</td>
  77. <td class="text-right">
  78. <span class="autodoc_template_home_owner">undefined</span>
  79. </td>
  80. </tr>
  81. <tr>
  82. <td class="text-left">
  83. Created:
  84. </td>
  85. <td class="text-right">
  86. <span class="autodoc_template_home_created">undefined</span>
  87. </td>
  88. </tr>
  89. <tr>
  90. <td class="text-left">
  91. Name:
  92. </td>
  93. <td class="text-right">
  94. <span class="autodoc_template_home_name">n/a</span>
  95. </td>
  96. </tr>
  97. <tr>
  98. <td colspan="2">
  99. <span class="badge badge-pill badge-secondary autodoc_template_home_tag"></span>
  100. </td>
  101. </tr>
  102. </table>
  103. </div>
  104. </div>
  105. </div>
  106. <div class="modal fade" id="autodoc_home_modal" tabindex="-1" role="dialog">
  107. <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
  108. <div class="modal-content">
  109. <div class="modal-header row">
  110. <div class="col-2 align-self-begin">
  111. <h5 class="modal-title">Document</h5>
  112. </div>
  113. <div class="col-4 align-self-center">
  114. <div class="btn-group" role="group" aria-label="Basic example">
  115. <button type="Button" class="btn btn-sm btn-light" disabled>
  116. <i class="fas fa-file-image"></i>
  117. </button>
  118. <button type="button" class="btn btn-sm btn-light autodoc_home_modal_size">S</button>
  119. <button type="button" class="btn btn-sm btn-light autodoc_home_modal_size">M</button>
  120. <button type="button" class="btn btn-sm btn-light autodoc_home_modal_size">L</button>
  121. <button type="button" class="btn btn-sm btn-light autodoc_home_modal_size active">XL</button>
  122. </div>
  123. </div>
  124. </div>
  125. <div class="modal-body autodoc_home_modal_body">
  126. <div class="row">
  127. <div id="autodoc_home_modal_left" class="col-1 autodoc_valign text-light bg-secondary autodoc_noselect"
  128. style="opacity: 0.15;">
  129. <i class="fas fa-3x fa-chevron-circle-left"></i>
  130. </div>
  131. <div class="col">
  132. <img class="img-fluid" id="autodoc_home_modal_img" />
  133. <div class="text-center">Page
  134. <span class="autodoc_home_modal_page"></span>
  135. /
  136. <span class="autodoc_home_modal_pages"></span>
  137. </div>
  138. </div>
  139. <div id="autodoc_home_modal_right" class="col-1 autodoc_valign text-light bg-secondary autodoc_noselect"
  140. style="opacity: 0.15;">
  141. <i class="fas fa-3x fa-chevron-circle-right"></i>
  142. </div>
  143. </div>
  144. </div>
  145. <div class="modal-footer autodoc_home_modal_footer">
  146. <table class="table table-striped table-sm">
  147. <tr>
  148. <th scope="row">Name</th>
  149. <td>
  150. <span class="autodoc_home_modal_name"></span>
  151. <input type="text" class="d-none autodoc_home_modal_name">
  152. </td>
  153. </tr>
  154. <tr>
  155. <th scope="row">Created</th>
  156. <td class="autodoc_home_modal_created"></td>
  157. </tr>
  158. <tr>
  159. <th scope="row">Languages</th>
  160. <td class="autodoc_home_modal_languages"></td>
  161. </tr>
  162. <tr>
  163. <th scope="row">Creator</th>
  164. <td class="autodoc_home_modal_owner"></td>
  165. </tr>
  166. <tr>
  167. <th scope="row">Pages</th>
  168. <td class="autodoc_home_modal_pages"></td>
  169. </tr>
  170. <tr>
  171. <th scope="row">
  172. Tags
  173. <button type="button" class="autodoc_home_modal_tags_show btn btn-outline-primary btn-sm">Add</button>
  174. <input type="text" class="d-none form-control typeahead autodoc_home_modal_tags_add" autocomplete="off"
  175. data-provide="typeahead">
  176. </th>
  177. <td class="autodoc_home_modal_tags">
  178. </td>
  179. </tr>
  180. </table>
  181. </div>
  182. </div>
  183. </div>
  184. </div>
  185. <div id="autodoc_home_body">
  186. </div>
  187. </div>
  188. <!-- Document -->
  189. <div class="container d-none" id="autodoc_tag_document">
  190. <span class="lead">Document are shown here. Go to 'home' and select a document.</span>
  191. </div>
  192. </div>
  193. <!-- Upload -->
  194. <div class="container d-none" id="autodoc_tab_upload">
  195. <div class="d-none autodoc_template_progress">
  196. <div class="progress">
  197. <div class="progress-bar progress-bar-striped progress-bar-animated text-dark"></div>
  198. </div>
  199. </div>
  200. <h3>upload</h3>
  201. <div class="row">
  202. <div class="col">
  203. <div class="lead">Upload Zone</div>
  204. <div class="text-center autodoc_upload_zone">
  205. Drag & Drop files (png, jpeg, pdf) into this zone to attach them to a single new document<br />
  206. Files can be uploaded at once or separately. A long as the page is not refreshed or the new document
  207. button
  208. is pushed, they will all be attached to the same document
  209. </div>
  210. </div>
  211. <div class="col">
  212. <div class="lead">Upload Status</div>
  213. <div class="autodoc_upload_status"></div>
  214. </div>
  215. </div>
  216. </div>
  217. </div>
  218. <!-- Tags -->
  219. <div class="container d-none" id="autodoc_tab_tags">
  220. <h3>Manage Tags</h3>
  221. <div class="row">
  222. <div class="col-6">
  223. <table class="table table-borderless">
  224. <tr>
  225. <th>1. Tag Name</th>
  226. <td>
  227. <select class="custom-select autodoc_tag_list">
  228. <option disabled selected>Choose tag to edit</option>
  229. <option value="">New tag...</option>
  230. </select>
  231. <input type="hidden" class="autodoc_tag_id" value="">
  232. <input type="text" placeholder="Tag name" class="autodoc_tag_text d-none">
  233. </td>
  234. </tr>
  235. <tr>
  236. <th>2. Color</th>
  237. <td>
  238. <div class="btn-group" role="group">
  239. <button type="button" class="btn btn-primary autodoc_tag_color active" data="autodoc_tag_color_primary">
  240. <span class="autodoc_tag_btn_on">
  241. <i class="fas fa-check"></i>
  242. </span>
  243. <span class="autodoc_tag_btn_off d-none">
  244. <i class="fas fa-times"></i>
  245. </span>
  246. </button>
  247. <button type="button" class="btn btn-secondary autodoc_tag_color" data="autodoc_tag_color_secondary">
  248. <span class="autodoc_tag_btn_on d-none">
  249. <i class="fas fa-check"></i>
  250. </span>
  251. <span class="autodoc_tag_btn_off">
  252. <i class="fas fa-times"></i>
  253. </span>
  254. </button>
  255. <button type="button" class="btn btn-success autodoc_tag_color" data="autodoc_tag_color_success">
  256. <span class="autodoc_tag_btn_on d-none">
  257. <i class="fas fa-check"></i>
  258. </span>
  259. <span class="autodoc_tag_btn_off">
  260. <i class="fas fa-times"></i>
  261. </span>
  262. </button>
  263. <button type="button" class="btn btn-danger autodoc_tag_color" data="autodoc_tag_color_danger">
  264. <span class="autodoc_tag_btn_on d-none">
  265. <i class="fas fa-check"></i>
  266. </span>
  267. <span class="autodoc_tag_btn_off">
  268. <i class="fas fa-times"></i>
  269. </span>
  270. </button>
  271. <button type="button" class="btn btn-warning autodoc_tag_color" data="autodoc_tag_color_warning">
  272. <span class="autodoc_tag_btn_on d-none">
  273. <i class="fas fa-check"></i>
  274. </span>
  275. <span class="autodoc_tag_btn_off">
  276. <i class="fas fa-times"></i>
  277. </span>
  278. </button>
  279. <button type="button" class="btn btn-info autodoc_tag_color" data="autodoc_tag_color_info">
  280. <span class="autodoc_tag_btn_on d-none">
  281. <i class="fas fa-check"></i>
  282. </span>
  283. <span class="autodoc_tag_btn_off">
  284. <i class="fas fa-times"></i>
  285. </span>
  286. </button>
  287. <button type="button" class="btn btn-light autodoc_tag_color" data="autodoc_tag_color_light">
  288. <span class="autodoc_tag_btn_on d-none">
  289. <i class="fas fa-check"></i>
  290. </span>
  291. <span class="autodoc_tag_btn_off">
  292. <i class="fas fa-times"></i>
  293. </span>
  294. </button>
  295. <button type="button" class="btn btn-dark autodoc_tag_color" data="autodoc_tag_color_dark">
  296. <span class="autodoc_tag_btn_on d-none">
  297. <i class="fas fa-check"></i>
  298. </span>
  299. <span class="autodoc_tag_btn_off">
  300. <i class="fas fa-times"></i>
  301. </span>
  302. </button>
  303. </div>
  304. </td>
  305. </tr>
  306. <tr>
  307. <th>3. Preview</th>
  308. <td>
  309. <span id="autodoc_tag_result" class="badge badge-primary"></span>
  310. </td>
  311. </tr>
  312. <tr>
  313. <th>4. Confirm</th>
  314. <td>
  315. <button type="button" class="autodoc_tag_add btn btn-outline-primary">Add/Update Tag</button>
  316. <button type="button" class="autodoc_tag_delete btn btn-outline-danger">Delete Tag</button>
  317. </td>
  318. </tr>
  319. </table>
  320. </div>
  321. </div>
  322. <div class="col">
  323. </div>
  324. </div>
  325. <!-- Search -->
  326. <div class="container d-none" id="autodoc_tab_search">
  327. <h3>search</h3>
  328. </div>
  329. </div>
  330. <footer class="fixed-bottom page-footer font-small bg-dark">
  331. <div class="container footer-copyright text-center text-muted py-3">
  332. AutoDoc v1.0 &copy; Pascal Gloor 2019
  333. </div>
  334. </footer>
  335. <script src="js/jquery.min.js"></script>
  336. <script src="js/popper.min.js"></script>
  337. <script src="js/tooltip.min.js"></script>
  338. <script src="js/bootstrap.min.js"></script>
  339. <script src="js/bs-custom-file-input.min.js"></script>
  340. <script src="js/autodoc.js"></script>
  341. </body>
  342. </html>