index.html 8.4 KB

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