imapsync_form_wrapper.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366
  1. <!DOCTYPE html>
  2. <!-- $Id: imapsync_form_wrapper.html,v 1.1 2020/03/04 14:10:30 gilles Exp gilles $ -->
  3. <html lang="en" id="top">
  4. <head>
  5. <title>Imapsync online</title>
  6. <meta charset="utf-8">
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
  9. integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  10. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
  11. integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  12. <link rel="stylesheet" href="imapsync_form.css">
  13. <link rel="license" href="https://imapsync.lamiral.info/NOLIMIT">
  14. <noscript>
  15. <link rel="stylesheet" href="noscript.css">
  16. </noscript>
  17. </head>
  18. <body>
  19. <div class="scripton">
  20. <!-- will appear if some tests fail -->
  21. <pre id="tests" class="collapse"></pre>
  22. <!-- hidden stuff that must exit for the tests -->
  23. <div class="hidden">
  24. <input type="checkbox" id="test_checkbox">
  25. <input type="text" id="test_text">
  26. <input type="radio" id="test_radio1" name="test_radio" value="first" >
  27. <input type="radio" id="test_radio2" name="test_radio" value="second" >
  28. </div>
  29. </div>
  30. <div class="container-fluid" >
  31. <div class="row">
  32. <div class="text-center">
  33. <a href="https://imapsync.lamiral.info/">
  34. <img alt="Imapsync home" title="Imapsync home page" src="https://imapsync.lamiral.info/X/logo_imapsync_Xn.png" height="38" width="60">
  35. </a>
  36. <a href="#top" title="Top of the page" class="btn btn-info " role="button">Top</a>
  37. <!-- <a href="#payment" class="btn btn-success" data-toggle="collapse">Pricing</a> -->
  38. <!-- <a href="#buttons" class="btn btn-info scripton" role="button">Consoles</a> -->
  39. <a href="#bottom" title="Bottom of the page" class="btn btn-info active" role="button">Bottom</a>
  40. </div>
  41. </div>
  42. <h1 class="text-center">Imapsync online</h1>
  43. <p class="text-center"> <strong>Copy</strong>/synchronize a <strong>complete</strong> mailbox to another, without <strong>duplicates!</strong></p>
  44. <!-- Paypal part start
  45. new: NDGMR6TLFZ926
  46. old: H2YTURNFT4XT4
  47. -->
  48. <!-- A button above the pricing form, not very beautiful...
  49. I should give it a try anyway because nearly no one buy this service...
  50. <div class="text-center">
  51. <a href="#payment" class="btn btn-warning btn-lg" data-toggle="collapse">Pricing</a>
  52. </div>
  53. -->
  54. <!-- the "in" makes the form not collapsed by default
  55. Remove the in in order to mask the pricing section
  56. <div id="payment" class="well text-center collapse in" > -->
  57. <div id="payment" class="well text-center collapse out" >
  58. <p class="lead">Pay by usage type</p>
  59. <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
  60. <input type="hidden" name="cmd" value="_s-xclick" />
  61. <input type="hidden" name="hosted_button_id" value="H2YTURNFT4XT4" />
  62. <input type="hidden" name="on0" value="imapsync choice" />
  63. <fieldset>
  64. <!--
  65. <label data-toggle="tooltip" data-placement="top" title="Fair enough"
  66. class="radio-inline"><input type="radio" name="os0" value="Tiny" > €1,00 </label>
  67. -->
  68. <label data-toggle="tooltip" data-placement="top" title="A big mailbox"
  69. class="radio-inline"><input type="radio" name="os0" value="Small" > €6,00 </label>
  70. <label data-toggle="tooltip" data-placement="top" title="Several mailboxes to migrate"
  71. class="radio-inline"><input type="radio" name="os0" value="Normal" checked > €59,00 </label>
  72. <!--
  73. <label data-toggle="tooltip" data-placement="top" title="Tons of gigabytes to copy"
  74. class="radio-inline"><input type="radio" name="os0" value="High" > €125,00 </label>
  75. -->
  76. <br>
  77. <input type="hidden" name="currency_code" value="EUR" />
  78. <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" name="submit" alt="PayPal - A safe, easy way to pay online!" />
  79. </fieldset>
  80. <p>
  81. <strong>30-day money back guarantee!</strong> <br>
  82. <em>No question nor condition to get a refund, really, just request it and you'll sure get a refund!</em>
  83. </p>
  84. </form>
  85. </div>
  86. <!-- Paypal part end -->
  87. <form id="form" action="/cgi-bin/imapsync_shell_wrapper" method="post" autocomplete="on">
  88. <div class="row">
  89. <div id="account1" class="col-md-6" >
  90. <fieldset>
  91. <legend class="text-center h2">IMAP source mailbox</legend>
  92. <label for="user1">Login</label>
  93. <div class="input-group form-group">
  94. <span class="input-group-addon"><i class="glyphicon glyphicon-user"> </i></span>
  95. <input
  96. data-toggle="tooltip" data-placement="bottom" title="It is usually an email address or its left part before @"
  97. type="text" class="form-control input-lg" id="user1" name="user1" tabindex="1"
  98. placeholder="Enter login name">
  99. </div>
  100. <label for="password1">Password</label>
  101. <label class="checkbox-inline out">
  102. <input type="checkbox" id="showpassword1"> show password
  103. </label>
  104. <div class="input-group form-group">
  105. <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
  106. <input
  107. data-toggle="tooltip" data-placement="bottom" title="Passwords are not stored on the server"
  108. type="password" class="form-control input-lg" id="password1" name="password1" tabindex="2"
  109. placeholder="Enter password">
  110. </div>
  111. <label for="host1">Server</label>
  112. <div class="input-group form-group">
  113. <span class="input-group-addon"><i class="glyphicon glyphicon-cloud"></i></span>
  114. <input
  115. data-toggle="tooltip" data-placement="bottom" title="IMAP transfers are done with encryption if the servers support it."
  116. list="servers1" type="text" class="form-control input-lg" id="host1" name="host1" tabindex="3"
  117. placeholder="Enter imap source server name or IP address">
  118. <datalist id="servers1">
  119. <option value="imap.gmail.com">
  120. <option value="outlook.office365.com">
  121. <option value="imap.mail.yahoo.com">
  122. </datalist>
  123. </div>
  124. <!--
  125. <div class="form-group" style="padding-bottom: 15px;">
  126. <label class="checkbox-inline">
  127. <input type="checkbox" id="ssl1" name="ssl1" tabindex="4">-ssl1 (port 993)
  128. </label>
  129. </div>
  130. -->
  131. <div>
  132. <br>
  133. </div>
  134. </fieldset>
  135. </div>
  136. <div id="account2" class="col-md-6" >
  137. <fieldset>
  138. <legend class="text-center h2">IMAP destination mailbox</legend>
  139. <label for="user2">Login</label>
  140. <div class="input-group form-group">
  141. <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
  142. <input
  143. data-toggle="tooltip" data-placement="bottom" title="It is usually an email address or its left part before @"
  144. type="text" class="form-control input-lg" id="user2" name="user2" tabindex="6"
  145. placeholder="Enter login name">
  146. </div>
  147. <label for="password2">Password</label>
  148. <label class="checkbox-inline out">
  149. <input type="checkbox" id="showpassword2"> show password
  150. </label>
  151. <div class="input-group form-group">
  152. <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
  153. <input
  154. data-toggle="tooltip" data-placement="bottom" title="Passwords are not stored on the server"
  155. type="password" class="form-control input-lg" id="password2" name="password2" tabindex="7"
  156. placeholder="Enter password">
  157. </div>
  158. <label for="host2">Server</label>
  159. <div class="input-group form-group">
  160. <span class="input-group-addon"><i class="glyphicon glyphicon-cloud"></i></span>
  161. <input
  162. data-toggle="tooltip" data-placement="bottom" title="IMAP transfers are done with encryption if the servers support it."
  163. list="servers2" type="text" class="form-control input-lg" id="host2" name="host2" tabindex="8"
  164. placeholder="Enter imap destination server name or IP address">
  165. <datalist id="servers2">
  166. <option value="imap.gmail.com">
  167. <option value="outlook.office365.com">
  168. <option value="imap.mail.yahoo.com">
  169. </datalist>
  170. </div>
  171. <!--
  172. <div class="form-group" style="padding-bottom: 15px;">
  173. <label class="checkbox-inline">
  174. <input type="checkbox" id="ssl2" name="ssl2" tabindex="9">-ssl2 (port 993)
  175. </label>
  176. </div>
  177. -->
  178. <div>
  179. <br>
  180. </div>
  181. </fieldset>
  182. </div>
  183. </div>
  184. <input type="hidden" name="automap" value="on">
  185. <input type="hidden" name="addheader" value="on">
  186. <!-- -#->
  187. <input type="hidden" name="simulong" value="360">
  188. <!-#- -->
  189. <a id="buttons"></a>
  190. <hr>
  191. <!-- Classical button to go to the log only -->
  192. <noscript>
  193. <button type="submit" class="btn btn-success btn-lg center-block btn-block">Go sync!</button>
  194. </noscript>
  195. <!-- Javascript buttons using xhr -->
  196. <div class="row scripton">
  197. <div class="col-sm-6 padd0" >
  198. <button id="bt-sync" type="button"
  199. class="btn btn-success btn-lg center-block btn-block"
  200. tabindex="11"
  201. data-toggle="tooltip" data-placement="top"
  202. title="Launch the sync! You can abort the sync with the red Abort button nearby or by closing the tab/window."
  203. >
  204. Sync or resync!<br>
  205. <span class="glyphicon glyphicon-envelope"></span>
  206. <span class="glyphicon glyphicon-arrow-right"></span>
  207. <span class="glyphicon glyphicon-envelope"></span>
  208. </button>
  209. </div>
  210. <div class="col-sm-6 padd0" >
  211. <button id="bt-abort" type="button"
  212. class="btn btn-danger btn-lg center-block btn-block" tabindex="12"
  213. data-toggle="tooltip" data-placement="top"
  214. title="Abort the sync! You can restart the sync later, no duplicates should happen."
  215. >
  216. Abort!<br>
  217. <span class="glyphicon glyphicon-scissors"></span>
  218. </button>
  219. </div>
  220. </div>
  221. </form>
  222. <div class="row scripton" id="consoles">
  223. <pre id="progress-txt">ETA: Estimation Time of Arrival</pre>
  224. <div class="progress">
  225. <div id="progress-bar-done" class="progress-bar progress-bar-success" role="progressbar">
  226. Progress bar
  227. </div>
  228. <div id="progress-bar-left" class="progress-bar progress-bar-info" role="progressbar">
  229. Progress bar
  230. </div>
  231. </div>
  232. <div class="col-sm-6 well">
  233. <h2 class="text-center">Console of imapsync run</h2>
  234. <pre id="console">
  235. </pre>
  236. <a id="link_to_bottom" href="#bottom">Bottom of imapsync log</a>
  237. </div>
  238. <div class="col-sm-6 well">
  239. <h2 class="text-center">Console of abort</h2>
  240. <pre id="abort">
  241. </pre>
  242. </div>
  243. </div>
  244. </div>
  245. <h2 class="text-center scripton">Log of imapsync run</h2>
  246. <pre id="output" class="scripton">
  247. </pre>
  248. <a id="bottom"></a>
  249. <hr>
  250. <p class="text-center">
  251. Local bandwidth statistics <br>
  252. <a href="/vnstat/vnstati.html">
  253. <img alt="Local bandwidth statistics" src="/vnstat/vnstat_vs.png" >
  254. </a>
  255. </p>
  256. <p class="text-center">Feel free to contact
  257. <strong><a href="https://imapsync.lamiral.info/#AUTHOR" target="_blank">Gilles LAMIRAL</a></strong>
  258. </p>
  259. <div class="container-fluid" >
  260. <div class="row">
  261. <div class="text-center">
  262. <a href="https://imapsync.lamiral.info/">
  263. <img alt="Imapsync home page" src="https://imapsync.lamiral.info/X/logo_imapsync_Xn.png" height="38" width="60">
  264. </a>
  265. <a href="#top" title="Top of the page" class="btn btn-info " role="button">Top</a>
  266. <!-- <a href="#buttons" class="btn btn-info scripton" role="button">Consoles</a> -->
  267. <a href="#bottom" title="Bottom of the page" class="btn btn-info active" role="button">Bottom</a>
  268. <br>
  269. <small> ($Id: imapsync_form_wrapper.html,v 1.1 2020/03/04 14:10:30 gilles Exp gilles $) </small><br>
  270. Terms and conditions for anything: <a href="https://imapsync.lamiral.info/LICENSE">No limits to do anything with this work and this license!</a><br>
  271. </div>
  272. </div>
  273. </div>
  274. <script
  275. src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"
  276. integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f"
  277. crossorigin="anonymous"
  278. >
  279. </script>
  280. <script
  281. src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
  282. integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
  283. crossorigin="anonymous"
  284. >
  285. </script>
  286. <script
  287. src="imapsync_form_wrapper.js"
  288. >
  289. </script>
  290. </body>
  291. </html>