index.html 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>i18n 词典可视化查看器</title>
  8. <link
  9. href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAkTocAAAAAANnb3gD///8AAAD/ABY1YQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAERUAAAAAARERVQAAAAAAERFVAAAAAAAREVUAMzMxABERVQAzMzEAERFVADMQAAAREVUAMxAAABERVQAzEAAAERFVADMQAAAREVUAMxAAABERVQAzEAAAERFVADMQAAAREVUAAAAAABERVSREIiIhERFVBEQAAAERERUEBAAAARHgBwAAwAMAAMADAADAAwAAwAMAAMADAADAAwAAwAMAAMADAADAAwAAwAMAAMADAADAAwAAwAcAAMAHAADgBwAA"
  10. rel="icon"
  11. type="image/x-icon"
  12. />
  13. <style>
  14. .flex-row {
  15. display: flex;
  16. align-items: center;
  17. }
  18. .list-group-item {
  19. display: flex !important;
  20. justify-content: space-between;
  21. align-items: center;
  22. }
  23. .glyphicon-move {
  24. cursor: move;
  25. cursor: -webkit-grabbing;
  26. }
  27. .key-value {
  28. margin-right: 10px;
  29. }
  30. .key-text {
  31. color: rgba(54, 54, 54, 0.884);
  32. }
  33. .value-text {
  34. color: rgb(0, 0, 0);
  35. font-size: 16px;
  36. font-weight: 600;
  37. }
  38. .copy-code {
  39. width: 50px;
  40. justify-self: flex-end;
  41. }
  42. .key-value-container {
  43. padding: 5px 10px !important;
  44. }
  45. .key-value-container:hover {
  46. background-color: #f5f5f5;
  47. }
  48. .heading-container {
  49. display: flex;
  50. justify-content: space-between;
  51. align-items: center;
  52. padding: 10px;
  53. }
  54. .json-column {
  55. width: 90%;
  56. }
  57. </style>
  58. </head>
  59. <body>
  60. <!-- Latest compiled and minified CSS -->
  61. <link
  62. rel="stylesheet"
  63. href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"
  64. />
  65. <div class="flex-row">
  66. <button
  67. type="button"
  68. class="btn btn-default btn-info"
  69. onclick="access_assets()"
  70. style="margin: 10px"
  71. >
  72. 点我并选择i18n项目内assets文件夹
  73. </button>
  74. <h5>Code 按钮可直接复制代码,查找请用 "Ctrl" + "F"</h5>
  75. </div>
  76. <div
  77. id="translate_list"
  78. style="
  79. margin: 10px;
  80. display: flex;
  81. justify-content: space-evenly;
  82. flex-direction: row-reverse;
  83. "
  84. ></div>
  85. </body>
  86. <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
  87. <script src="./script.js"></script>
  88. </html>