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.

138 lines
2.8 KiB

7 years ago
7 years ago
7 years ago
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <title></title>
  6. <link rel="stylesheet" href="css/common.css" type="text/css">
  7. <style>
  8. body {
  9. font-family: sans-serif;
  10. font-size: large;
  11. text-align: center;
  12. }
  13. body > div {
  14. margin: 1.5em 0;
  15. }
  16. body > div > p {
  17. margin: 4px 0;
  18. }
  19. body > div > p:first-child {
  20. margin: 1.5em 0 0 0;
  21. }
  22. .code {
  23. background-color: rgba(0, 0, 0, 0.1);
  24. display: inline-block;
  25. font-family: monospace;
  26. font-size: large;
  27. line-height: 1.2;
  28. padding: 2px 4px;
  29. word-break: break-all;
  30. }
  31. button {
  32. cursor: pointer;
  33. margin: 0 1em 0.25em 1em;
  34. padding: 0.25em 0.5em;
  35. font-size: inherit;
  36. }
  37. #theURL {
  38. margin: 0.25em 0;
  39. padding: 0;
  40. }
  41. #theURL > * {
  42. margin: 0;
  43. }
  44. #theURL > p {
  45. position: relative;
  46. z-index: 10;
  47. }
  48. #theURL > p > span {
  49. background-color: transparent;
  50. top: 100%;
  51. box-sizing: border-box;
  52. cursor: pointer;
  53. opacity: 0.5;
  54. padding: 0.2em;
  55. position: absolute;
  56. transform: translate(0, -50%);
  57. }
  58. body[dir="ltr"] #theURL > p > span {
  59. right: 0;
  60. }
  61. body[dir="rtl"] #theURL > p > span {
  62. left: 0;
  63. }
  64. #theURL > p:hover > span {
  65. opacity: 1;
  66. }
  67. #theURL > p > span:before {
  68. content: '\f010';
  69. }
  70. #theURL.collapsed > p > span:before {
  71. content: '\f00e';
  72. }
  73. #parsed {
  74. background-color: #f8f8f8;
  75. border: 1px solid rgba(0, 0, 0, 0.1);
  76. border-top: none;
  77. color: gray;
  78. font-size: small;
  79. overflow-x: hidden;
  80. padding: 4px;
  81. text-align: initial;
  82. text-overflow: ellipsis;
  83. }
  84. #theURL.collapsed > #parsed {
  85. display: none;
  86. }
  87. #parsed ul, #parsed li {
  88. list-style-type: none;
  89. }
  90. #parsed li {
  91. white-space: nowrap;
  92. }
  93. #parsed span {
  94. display: inline-block;
  95. }
  96. #parsed span:first-of-type {
  97. font-weight: bold;
  98. }
  99. #warningSign {
  100. margin: 1e, 0;
  101. opacity: 1;
  102. pointer-events: none;
  103. width: 100%;
  104. }
  105. #warningSign > span {
  106. color: #f2a500;
  107. font-size: 180px;
  108. }
  109. </style>
  110. </head>
  111. <body>
  112. <div id="warningSign"><span class="fa">&#xf071;</span></div>
  113. <div>
  114. <p data-i18n="mainBlockedPrompt1"></p>
  115. <div id="theURL" class="collapsed">
  116. <p class="what code"></p>
  117. <ul id="parsed"></ul>
  118. </div>
  119. </div>
  120. <!-- <div>
  121. <p data-i18n="mainBlockedPrompt2"></p>
  122. <p id="why" class="code"></p>
  123. </div>
  124. -->
  125. <div>
  126. <p><button id="back" data-i18n="mainBlockedBack" type="button"></button>
  127. <button id="bye" data-i18n="mainBlockedClose" type="button"></button></p>
  128. </div>
  129. <script src="js/vapi-common.js"></script>
  130. <script src="js/vapi-client.js"></script>
  131. <script src="js/udom.js"></script>
  132. <script src="js/i18n.js"></script>
  133. <script src="js/main-blocked.js"></script>
  134. </body>
  135. </html>