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 16KB

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