index.html 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. <head>
  2. <link rel="manifest" href="/site.webmanifest">
  3. <link async rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
  4. integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  5. <link rel="stylesheet" href="../css/bootstrap.min.css"
  6. integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  7. <link rel="stylesheet" href="../css/style.css">
  8. <link rel="preconnect" href="https://fonts.gstatic.com">
  9. <link href="https://fonts.loli.net/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700
  10. &family=Noto+Serif+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  11. <title>paint</title>
  12. <style>
  13. .box {
  14. display: inline-block;
  15. margin: auto;
  16. margin-top: 10px;
  17. margin-bottom: 10px;
  18. cursor: pointer;
  19. width: 180px;
  20. height: 7px;
  21. background-color: rgba(215, 215, 215, 0.7);
  22. position: relative;
  23. vertical-align: middle;
  24. }
  25. .box .hd {
  26. width: 16px;
  27. height: 16px;
  28. background-color: rgba(215, 215, 215, 1);
  29. border-radius: 6px;
  30. position: absolute;
  31. left: 0;
  32. top: -6px;
  33. cursor: pointer;
  34. margin: 0;
  35. transform: translateX(-9px);
  36. z-index: 2;
  37. }
  38. .box .hdt {
  39. position: absolute;
  40. top: 0;
  41. left: 0;
  42. height: 7px;
  43. width: 0;
  44. margin: 0;
  45. }
  46. #box-r .hd {
  47. background-image: linear-gradient(60deg, #e57070, rgba(215, 215, 215, 0.5));
  48. border: 1px solid #ef2929
  49. }
  50. #box-g .hd {
  51. background-image: linear-gradient(60deg, #5dbd79, rgba(215, 215, 215, 0.5));
  52. border: 1px solid #22b14c
  53. }
  54. #box-b .hd {
  55. background-image: linear-gradient(60deg, #91b0d2, rgba(215, 215, 215, 0.5));
  56. border: 1px solid #729fcf
  57. }
  58. #box-r .hdt {
  59. background-image: linear-gradient(60deg, #eb9696, #ef2929);
  60. }
  61. #box-g .hdt {
  62. background-image: linear-gradient(60deg, #88be98, #22b14c);
  63. }
  64. #box-b .hdt {
  65. background-image: linear-gradient(60deg, #b8c7d7, #729fcf);
  66. }
  67. .box-text {
  68. user-select: none;
  69. width: fit-content;
  70. z-index: -1;
  71. transform: translate(-30px, -10px);
  72. background-color: rgba(215, 215, 215, 0.7);
  73. border: 2px solid rgba(215, 215, 215, 0.7);
  74. border-radius: 5px;
  75. }
  76. * {
  77. -webkit-box-sizing: content-box;
  78. box-sizing: content-box;
  79. }
  80. #main {
  81. display: flex;
  82. flex-direction: row;
  83. width: 900px;
  84. margin: 0 auto;
  85. margin-top: -20px;
  86. text-align: center;
  87. }
  88. #draw {
  89. width: 640px;
  90. height: 640px;
  91. display: flex;
  92. flex-direction: row;
  93. flex-wrap: wrap;
  94. margin: auto;
  95. transition-duration: 0.3s;
  96. transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  97. transform-origin: 0px 0px;
  98. border: 1px solid rgb(211, 211, 211);
  99. }
  100. .pixel-line {
  101. width: 5px;
  102. height: 5px;
  103. box-sizing: border-box;
  104. border: 0.1px solid rgb(211, 211, 211);
  105. }
  106. .pixel {
  107. width: 5px;
  108. height: 5px;
  109. }
  110. #color-list {
  111. display: flex;
  112. flex-direction: column;
  113. flex-wrap: wrap;
  114. padding: 0;
  115. margin: auto;
  116. }
  117. #tools {
  118. display: flex;
  119. flex-direction: column;
  120. width: 250px;
  121. position: fixed;
  122. bottom: 20px;
  123. right: 20px;
  124. transition-duration: 0.3s;
  125. transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  126. background-color: rgba(15, 15, 15, 0.1);
  127. border: 5px solid rgba(15, 15, 15, 0.1);
  128. border-radius: 15px;
  129. backdrop-filter: blur(5px);
  130. }
  131. .color-item {
  132. cursor: pointer;
  133. height: 20px;
  134. width: 20px;
  135. }
  136. #now-color {
  137. width: 80px;
  138. height: 80px;
  139. margin: auto;
  140. border: 1px solid rgb(147, 147, 147);
  141. border-radius: 15px;
  142. background-color: #000;
  143. }
  144. li {
  145. list-style: none;
  146. margin-bottom: 3px;
  147. display: block;
  148. box-sizing: border-box;
  149. }
  150. .btn {
  151. text-shadow: rgb(85, 85, 85) 3px 2px 4px;
  152. display: inline-block;
  153. }
  154. .noshadow {
  155. text-shadow: none;
  156. }
  157. #controls {
  158. position: fixed;
  159. text-align: left;
  160. left: 0;
  161. right: 0;
  162. margin: 0 auto;
  163. bottom: 10px;
  164. width: 700px;
  165. padding-left: 3px;
  166. padding-right: 5px;
  167. transition-duration: 0.3s;
  168. transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  169. border: 5px solid rgba(15, 15, 15, 0.1);
  170. border-radius: 15px;
  171. background-color: rgba(15, 15, 15, 0.1);
  172. backdrop-filter: blur(5px);
  173. }
  174. #version {
  175. background-color: rgba(215, 215, 215, 0.7);
  176. border-radius: 5px;
  177. padding-right: 3px;
  178. }
  179. </style>
  180. <script src="../js/av-min.js"></script>
  181. <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  182. <script type="text/javascript" src="../js/paint.js">
  183. </script>
  184. </head>
  185. <body>
  186. <a class="btn btn-info" href="/" style="text-shadow: rgb(85, 85, 85) 3px 2px 4px;"><span
  187. class="glyphicon glyphicon-home" aria-hidden="true"></span>&nbsp;返回</a>
  188. <div id="main" style="text-align:center">
  189. <div id="draw"></div>
  190. <div id="tools">
  191. <button class="btn" id="toggle" style="background:rgba(215, 215, 215,0.7)"><span
  192. class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></button>
  193. <div id="now-color"></div>
  194. <div class="box canToggle" id="box-r">
  195. <i class="hd"></i>
  196. <i class="hdt"></i>
  197. <div class="box-text" id="box-r-text">0</div>
  198. </div>
  199. <div class="box canToggle" id="box-g">
  200. <i class="hd"></i>
  201. <i class="hdt"></i>
  202. <div class="box-text" id="box-g-text">0</div>
  203. </div>
  204. <div class="box canToggle" id="box-b">
  205. <i class="hd"></i>
  206. <i class="hdt"></i>
  207. <div class="box-text" id="box-b-text">0</div>
  208. </div>
  209. <ul class="canToggle" id="color-list"></ul>
  210. </div>
  211. </div>
  212. <div id="controls">
  213. <button class="btn btn-default noshadow" id="help"
  214. onclick="alert('说明:左键绘制,右键擦除。\n键盘AD键或屏幕下方按键可浏览历史版本,鼠标悬停于版本上可查看时间。\n点击上传后,同一设备一天内的编辑将会保存在一个版本中,并对所有人可见。')"><span
  215. class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></button>
  216. <button class="btn btn-default noshadow" id="zoom"><span class="glyphicon glyphicon-zoom-in"
  217. aria-hidden="true"></span></button>
  218. <button class="btn btn-warning" id="show-hide-line">
  219. <span class="glyphicon glyphicon-th" aria-hidden="true"></span>&nbsp;网格</button>
  220. <button class="btn btn-primary" id="upload"><span class="glyphicon glyphicon-cloud-upload"
  221. aria-hidden="true"></span>&nbsp;上传</button>
  222. <button class="btn btn-primary" id="reset"><span class="glyphicon glyphicon-cloud-download"
  223. aria-hidden="true"></span>&nbsp;同步</button>
  224. <button class="btn btn-danger" id="clear" onclick="tryClear()"><span class="glyphicon glyphicon-ban-circle"
  225. aria-hidden="true"></span>&nbsp;清空</button>
  226. <a id="lbtn" tabindex="0" class="btn btn-default noshadow" onclick="prevVer()">
  227. <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"><kbd>A</kbd></span>
  228. </a>
  229. <a id="rbtn" tabindex="0" class="btn btn-default noshadow" onclick="nextVer()">
  230. <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"><kbd>D</kbd></span>
  231. </a>
  232. <span id="version" style="margin-right:auto"></span>
  233. </div>
  234. </body>