index.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  1. <html>
  2. <head>
  3. <link rel="stylesheet" href="app.css"></link>
  4. </head>
  5. <body>
  6. <div class="container mx-auto flex flex-col items-center bg-gray-100 p-4">
  7. <!--div class="fixed w-100 h-100 opacity-80 bg-purple-800 inset-0 z-50 flex items-center justify-center">
  8. <svg class="animate-spin -ml-1 mr-3 h-12 w-12 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
  9. <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
  10. <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
  11. </svg>
  12. </div-->
  13. <div class="container">
  14. <section>
  15. <div class="flex">
  16. <div class="max-w-xs">
  17. <label for="wallet" class="block text-sm font-medium text-gray-700"
  18. >Тикер</label
  19. >
  20. <div class="mt-1 relative rounded-md shadow-md">
  21. <input
  22. type="text"
  23. name="wallet"
  24. id="wallet"
  25. class="block w-full pr-10 border-gray-300 text-gray-900 focus:outline-none focus:ring-gray-500 focus:border-gray-500 sm:text-sm rounded-md"
  26. placeholder="Например DOGE"
  27. />
  28. </div>
  29. <div class="flex bg-white shadow-md p-1 rounded-md shadow-md flex-wrap">
  30. <span class="inline-flex items-center px-2 m-1 rounded-md text-xs font-medium bg-gray-300 text-gray-800 cursor-pointer">
  31. BTC
  32. </span>
  33. <span class="inline-flex items-center px-2 m-1 rounded-md text-xs font-medium bg-gray-300 text-gray-800 cursor-pointer">
  34. DOGE
  35. </span>
  36. <span class="inline-flex items-center px-2 m-1 rounded-md text-xs font-medium bg-gray-300 text-gray-800 cursor-pointer">
  37. BCH
  38. </span>
  39. <span class="inline-flex items-center px-2 m-1 rounded-md text-xs font-medium bg-gray-300 text-gray-800 cursor-pointer">
  40. CHD
  41. </span>
  42. </div>
  43. <div class="text-sm text-red-600">Такой тикер уже добавлен</div>
  44. </div>
  45. </div>
  46. <button
  47. type="button"
  48. class="my-4 inline-flex items-center py-2 px-4 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-full text-white bg-gray-600 hover:bg-gray-700 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
  49. >
  50. <!-- Heroicon name: solid/mail -->
  51. <svg
  52. class="-ml-0.5 mr-2 h-6 w-6"
  53. xmlns="http://www.w3.org/2000/svg"
  54. width="30"
  55. height="30"
  56. viewBox="0 0 24 24"
  57. fill="#ffffff"
  58. >
  59. <path
  60. d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
  61. ></path>
  62. </svg>
  63. Добавить
  64. </button>
  65. </section>
  66. <hr class="w-full border-t border-gray-600 my-4" />
  67. <dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
  68. <div
  69. class="bg-white overflow-hidden shadow rounded-lg border-purple-800 border-solid cursor-pointer"
  70. >
  71. <div class="px-4 py-5 sm:p-6 text-center">
  72. <dt class="text-sm font-medium text-gray-500 truncate">
  73. WTF - USD
  74. </dt>
  75. <dd class="mt-1 text-3xl font-semibold text-gray-900">
  76. 1.11
  77. </dd>
  78. </div>
  79. <div class="w-full border-t border-gray-200"></div>
  80. <button
  81. class="flex items-center justify-center font-medium w-full bg-gray-100 px-4 py-4 sm:px-6 text-md text-gray-500 hover:text-gray-600 hover:bg-gray-200 hover:opacity-20 transition-all focus:outline-none"
  82. >
  83. <svg
  84. class="h-5 w-5"
  85. xmlns="http://www.w3.org/2000/svg"
  86. viewBox="0 0 20 20"
  87. fill="#718096"
  88. aria-hidden="true"
  89. >
  90. <path
  91. fill-rule="evenodd"
  92. d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
  93. clip-rule="evenodd"
  94. ></path></svg>Удалить
  95. </button>
  96. </div>
  97. <div
  98. class="bg-white overflow-hidden shadow rounded-lg border-purple-800 border-solid border-4 cursor-pointer"
  99. >
  100. <div class="px-4 py-5 sm:p-6 text-center">
  101. <dt class="text-sm font-medium text-gray-500 truncate">
  102. VUE - RUB
  103. </dt>
  104. <dd class="mt-1 text-3xl font-semibold text-gray-900">
  105. 80000.00
  106. </dd>
  107. </div>
  108. <div class="w-full border-t border-gray-200"></div>
  109. <button
  110. class="flex items-center justify-center font-medium w-full bg-gray-100 px-4 py-4 sm:px-6 text-md text-gray-500 hover:text-gray-600 hover:bg-gray-200 hover:opacity-20 transition-all focus:outline-none"
  111. >
  112. <svg
  113. class="h-5 w-5"
  114. xmlns="http://www.w3.org/2000/svg"
  115. viewBox="0 0 20 20"
  116. fill="#718096"
  117. aria-hidden="true"
  118. >
  119. <path
  120. fill-rule="evenodd"
  121. d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
  122. clip-rule="evenodd"
  123. ></path></svg>Удалить
  124. </button>
  125. </div>
  126. <div
  127. class="bg-white overflow-hidden shadow rounded-lg border-purple-800 border-solid cursor-pointer"
  128. >
  129. <div class="px-4 py-5 sm:p-6 text-center">
  130. <dt class="text-sm font-medium text-gray-500 truncate">
  131. BTC - USD
  132. </dt>
  133. <dd class="mt-1 text-3xl font-semibold text-gray-900">
  134. 99999.99
  135. </dd>
  136. </div>
  137. <div class="w-full border-t border-gray-200"></div>
  138. <button
  139. class="flex items-center justify-center font-medium w-full bg-gray-100 px-4 py-4 sm:px-6 text-md text-gray-500 hover:text-gray-600 hover:bg-gray-200 hover:opacity-20 transition-all focus:outline-none"
  140. >
  141. <svg
  142. class="h-5 w-5"
  143. xmlns="http://www.w3.org/2000/svg"
  144. viewBox="0 0 20 20"
  145. fill="#718096"
  146. aria-hidden="true"
  147. >
  148. <path
  149. fill-rule="evenodd"
  150. d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
  151. clip-rule="evenodd"
  152. ></path></svg>Удалить
  153. </button>
  154. </div>
  155. <div
  156. class="bg-white overflow-hidden shadow rounded-lg border-purple-800 border-solid cursor-pointer"
  157. >
  158. <div class="px-4 py-5 sm:p-6 text-center">
  159. <dt class="text-sm font-medium text-gray-500 truncate">
  160. DOGE - USD
  161. </dt>
  162. <dd class="mt-1 text-3xl font-semibold text-gray-900">
  163. 0.0014
  164. </dd>
  165. </div>
  166. <div class="w-full border-t border-gray-200"></div>
  167. <button
  168. class="flex items-center justify-center font-medium w-full bg-gray-100 px-4 py-4 sm:px-6 text-md text-gray-500 hover:text-gray-600 hover:bg-gray-200 hover:opacity-20 transition-all focus:outline-none"
  169. >
  170. <svg
  171. class="h-5 w-5"
  172. xmlns="http://www.w3.org/2000/svg"
  173. viewBox="0 0 20 20"
  174. fill="#718096"
  175. aria-hidden="true"
  176. >
  177. <path
  178. fill-rule="evenodd"
  179. d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
  180. clip-rule="evenodd"
  181. ></path></svg>Удалить
  182. </button>
  183. </div>
  184. </dl>
  185. <hr class="w-full border-t border-gray-600 my-4" />
  186. <section class="relative">
  187. <h3 class="text-lg leading-6 font-medium text-gray-900 my-8">
  188. VUE - USD
  189. </h3>
  190. <div class="flex items-end border-gray-600 border-b border-l h-64">
  191. <div
  192. class="bg-purple-800 border w-10 h-24"
  193. ></div>
  194. <div
  195. class="bg-purple-800 border w-10 h-32"
  196. ></div>
  197. <div
  198. class="bg-purple-800 border w-10 h-48"
  199. ></div>
  200. <div
  201. class="bg-purple-800 border w-10 h-16"
  202. ></div>
  203. </div>
  204. <button
  205. type="button"
  206. class="absolute top-0 right-0"
  207. >
  208. <svg
  209. xmlns="http://www.w3.org/2000/svg"
  210. xmlns:xlink="http://www.w3.org/1999/xlink"
  211. xmlns:svgjs="http://svgjs.com/svgjs"
  212. version="1.1"
  213. width="30"
  214. height="30"
  215. x="0"
  216. y="0"
  217. viewBox="0 0 511.76 511.76"
  218. style="enable-background:new 0 0 512 512"
  219. xml:space="preserve"
  220. >
  221. <g>
  222. <path
  223. d="M436.896,74.869c-99.84-99.819-262.208-99.819-362.048,0c-99.797,99.819-99.797,262.229,0,362.048 c49.92,49.899,115.477,74.837,181.035,74.837s131.093-24.939,181.013-74.837C536.715,337.099,536.715,174.688,436.896,74.869z M361.461,331.317c8.341,8.341,8.341,21.824,0,30.165c-4.16,4.16-9.621,6.251-15.083,6.251c-5.461,0-10.923-2.091-15.083-6.251 l-75.413-75.435l-75.392,75.413c-4.181,4.16-9.643,6.251-15.083,6.251c-5.461,0-10.923-2.091-15.083-6.251 c-8.341-8.341-8.341-21.845,0-30.165l75.392-75.413l-75.413-75.413c-8.341-8.341-8.341-21.845,0-30.165 c8.32-8.341,21.824-8.341,30.165,0l75.413,75.413l75.413-75.413c8.341-8.341,21.824-8.341,30.165,0 c8.341,8.32,8.341,21.824,0,30.165l-75.413,75.413L361.461,331.317z"
  224. fill="#718096"
  225. data-original="#000000"
  226. ></path>
  227. </g>
  228. </svg>
  229. </button>
  230. </section>
  231. </div>
  232. </div>
  233. </body>
  234. </html>