You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

267 lines
8.9 KiB

10 months ago
10 months ago
1 year ago
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <title>宝塔第三方云端 - 安装程序</title>
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  8. <meta name="renderer" content="webkit">
  9. <style>
  10. body {
  11. background: #f1f6fd;
  12. margin: 0;
  13. padding: 0;
  14. line-height: 1.5;
  15. -webkit-font-smoothing: antialiased;
  16. -moz-osx-font-smoothing: grayscale;
  17. }
  18. body, input, button {
  19. font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, 'Microsoft Yahei', Arial, sans-serif;
  20. font-size: 14px;
  21. color: #7E96B3;
  22. }
  23. .container {
  24. max-width: 480px;
  25. margin: 0 auto;
  26. padding: 20px;
  27. text-align: center;
  28. }
  29. a {
  30. color: #4e73df;
  31. text-decoration: none;
  32. }
  33. a:hover {
  34. text-decoration: underline;
  35. }
  36. h1 {
  37. margin-top: 0;
  38. margin-bottom: 10px;
  39. }
  40. h2 {
  41. font-size: 28px;
  42. font-weight: normal;
  43. color: #3C5675;
  44. margin-bottom: 0;
  45. margin-top: 0;
  46. }
  47. form {
  48. margin-top: 40px;
  49. }
  50. .form-group {
  51. margin-bottom: 20px;
  52. }
  53. .form-group .form-field:first-child input {
  54. border-top-left-radius: 4px;
  55. border-top-right-radius: 4px;
  56. }
  57. .form-group .form-field:last-child input {
  58. border-bottom-left-radius: 4px;
  59. border-bottom-right-radius: 4px;
  60. }
  61. .form-field input {
  62. background: #fff;
  63. margin: 0 0 2px;
  64. border: 2px solid transparent;
  65. transition: background 0.2s, border-color 0.2s, color 0.2s;
  66. width: 100%;
  67. padding: 15px 15px 15px 180px;
  68. box-sizing: border-box;
  69. }
  70. .form-field input:focus {
  71. border-color: #4e73df;
  72. background: #fff;
  73. color: #444;
  74. outline: none;
  75. }
  76. .form-field label {
  77. float: left;
  78. width: 160px;
  79. text-align: right;
  80. margin-right: -160px;
  81. position: relative;
  82. margin-top: 15px;
  83. font-size: 14px;
  84. pointer-events: none;
  85. opacity: 0.7;
  86. }
  87. button, .btn {
  88. background: #3C5675;
  89. color: #fff;
  90. border: 0;
  91. font-weight: bold;
  92. border-radius: 4px;
  93. cursor: pointer;
  94. padding: 15px 30px;
  95. -webkit-appearance: none;
  96. }
  97. button[disabled] {
  98. opacity: 0.5;
  99. }
  100. .form-buttons {
  101. height: 52px;
  102. line-height: 52px;
  103. }
  104. .form-buttons .btn {
  105. margin-right: 5px;
  106. }
  107. #error, .error, #success, .success, #warmtips, .warmtips {
  108. background: #D83E3E;
  109. color: #fff;
  110. padding: 15px 20px;
  111. border-radius: 4px;
  112. margin-bottom: 20px;
  113. }
  114. #success {
  115. background: #3C5675;
  116. }
  117. #error a, .error a {
  118. color: white;
  119. text-decoration: underline;
  120. }
  121. #warmtips {
  122. background: #fff;
  123. font-size: 14px;
  124. color: #3C5675;
  125. border: 2px solid #4e73df;
  126. text-align: left;
  127. }
  128. </style>
  129. </head>
  130. <body>
  131. <div class="container">
  132. <h1>
  133. <svg t="1660545699809" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4887" width="100px" height="100px">
  134. <path d="M811.4 418.7C765.6 297.9 648.9 212 512.2 212S258.8 297.8 213 418.6C127.3 441.1 64 519.1 64 612c0 110.5 89.5 200 199.9 200h496.2C870.5 812 960 722.5 960 612c0-92.7-63.1-170.7-148.6-193.3z m36.3 281c-23.4 23.4-54.5 36.3-87.6 36.3H263.9c-33.1 0-64.2-12.9-87.6-36.3-23.4-23.4-36.3-54.6-36.3-87.7 0-28 9.1-54.3 26.2-76.3 16.7-21.3 40.2-36.8 66.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4 14.9-19.2 32.6-35.9 52.4-49.9 41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10c54.3 14.5 92.1 63.8 92.1 120 0 33.1-12.9 64.3-36.3 87.7z" p-id="4888" fill="#4e73df"></path>
  135. </svg>
  136. </h1>
  137. <h2>宝塔第三方云端 - 安装程序</h2>
  138. <div>
  139. <form method="post">
  140. <div id="error" style="display:none"></div>
  141. <div id="success" style="display:none"></div>
  142. <div id="warmtips" style="display:none"><p>安装完成后,你还需要进行以下操作:</p><p>1、在后台使用批量替换工具,执行命令一键替换压缩包与安装脚本中的域名。</p><p></p>2、在后台配置面板对接,同步插件列表与插件包。</p></div>
  143. <div class="form-group">
  144. <div class="form-field">
  145. <label>MySQL 数据库地址</label>
  146. <input type="text" name="mysql_host" value="localhost" required="">
  147. </div>
  148. <div class="form-field">
  149. <label>MySQL 数据库端口</label>
  150. <input type="number" name="mysql_port" value="3306">
  151. </div>
  152. <div class="form-field">
  153. <label>MySQL 用户名</label>
  154. <input type="text" name="mysql_user" value="" required="">
  155. </div>
  156. <div class="form-field">
  157. <label>MySQL 密码</label>
  158. <input type="text" name="mysql_pwd" value="" required="">
  159. </div>
  160. <div class="form-field">
  161. <label>MySQL 数据库名</label>
  162. <input type="text" name="mysql_name" value="" required="">
  163. </div>
  164. <div class="form-field">
  165. <label>MySQL 数据表前缀</label>
  166. <input type="text" name="mysql_prefix" value="cloud_">
  167. </div>
  168. </div>
  169. <div class="form-group">
  170. <div class="form-field">
  171. <label>管理员用户名</label>
  172. <input type="text" name="admin_username" value="admin" required=""/>
  173. </div>
  174. <div class="form-field">
  175. <label>管理员密码</label>
  176. <input type="text" name="admin_password" value="123456" required="">
  177. </div>
  178. </div>
  179. <div class="form-buttons">
  180. <!--@formatter:off-->
  181. <button type="submit" >点击安装</button>
  182. <!--@formatter:on-->
  183. </div>
  184. </form>
  185. </div>
  186. </div>
  187. <script src="{$cdnpublic}jquery/2.1.4/jquery.min.js"></script>
  188. <script>
  189. $(function () {
  190. $('form').on('submit', function (e) {
  191. e.preventDefault();
  192. var form = this;
  193. var $error = $("#error");
  194. var $success = $("#success");
  195. var $button = $(this).find('button')
  196. .text("安装中...")
  197. .prop('disabled', true);
  198. $.ajax({
  199. url: "",
  200. type: "POST",
  201. dataType: "json",
  202. data: $(this).serialize(),
  203. success: function (ret) {
  204. if (ret.code == 1) {
  205. $error.hide();
  206. $(".form-group", form).remove();
  207. $button.remove();
  208. $("#success").text(ret.msg).show();
  209. $("#warmtips").show();
  210. $buttons = $(".form-buttons", form);
  211. $('<a class="btn" href="/admin" style="background:#4e73df">进入后台</a>').appendTo($buttons);
  212. } else {
  213. $error.show().text(ret.msg);
  214. $button.prop('disabled', false).text("点击安装");
  215. $("html,body").animate({
  216. scrollTop: 0
  217. }, 500);
  218. }
  219. },
  220. error: function (xhr) {
  221. $error.show().text(xhr.responseText);
  222. $button.prop('disabled', false).text("点击安装");
  223. $("html,body").animate({
  224. scrollTop: 0
  225. }, 500);
  226. }
  227. });
  228. return false;
  229. });
  230. });
  231. </script>
  232. </body>
  233. </html>