index.html 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. <!DOCTYPE html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4. <title>日志</title>
  5. <script type="text/javascript" src="/js/jquery.min.js"></script>
  6. <link rel="stylesheet" href="/css/bootstrap.min.css">
  7. <script type="text/javascript" src="/js/bootstrap.min.js"></script>
  8. <link rel="stylesheet" href="/css/style.css">
  9. <link rel="preconnect" href="https://fonts.googleapis.com">
  10. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  11. <link href="https://fonts.googleapis.com/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700
  12. &family=Noto+Serif+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  13. <style>
  14. * {
  15. transition-duration: 300ms;
  16. }
  17. .btn {
  18. text-shadow: rgb(133, 133, 130) 1px 2px 3px;
  19. }
  20. .btn-xs.dark {
  21. background-color: rgb(70, 59, 150);
  22. color: white;
  23. }
  24. .btn-info.dark {
  25. color: #fff;
  26. background-color: #027396;
  27. border-color: #46b8da;
  28. }
  29. code.dark {
  30. background-color: rgb(70, 59, 150);
  31. }
  32. .noshadow {
  33. text-shadow: none;
  34. }
  35. .dark ::selection {
  36. color: white;
  37. text-decoration: underline wavy #FF3028;
  38. text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
  39. background-color: black;
  40. }
  41. .dark {
  42. color: white;
  43. background-color: black;
  44. }
  45. .btn-dang {
  46. transition-duration: 1000ms;
  47. }
  48. .btn-dang.dark {
  49. outline: 10px transparent
  50. }
  51. .btn-dang:is(:hover, :hover:focus) {
  52. outline: 15px solid rgba(58, 58, 58, 0.8)
  53. }
  54. .btn-dang.dark:hover {
  55. outline: 4000px solid rgba(0, 0, 0, 0.1)
  56. }
  57. .btn-dang:is(:hover:active:focus, :active) {
  58. scale: 80%;
  59. transform: translate(-7px, -7px);
  60. outline: 150px double rgba(162, 6, 6, 0.5)
  61. }
  62. hr {
  63. overflow: visible;
  64. /* For IE */
  65. padding: 0;
  66. border: none;
  67. border-top: medium double #333;
  68. color: #333;
  69. text-align: center;
  70. }
  71. hr.dark:after {
  72. scale: 0;
  73. transition-delay: 0s;
  74. transition-duration: 100ms;
  75. }
  76. hr:after {
  77. transition-duration: 300ms;
  78. content: "§";
  79. display: inline-block;
  80. position: relative;
  81. top: -0.7em;
  82. font-size: 1.5em;
  83. padding: 0 0.25em;
  84. background: floralwhite;
  85. transition-delay: 1s;
  86. }
  87. hr.dark {
  88. border-top: medium double rgb(70, 59, 150);
  89. color: rgb(70, 59, 150);
  90. }
  91. </style>
  92. <script>
  93. $().ready(function () {
  94. $('.btn-danger').on('click', function (e) {
  95. $('body,.btn,.btn-xs,code,pre,hr').toggleClass('dark')
  96. console.log(e)
  97. })
  98. fetch('data.json', {
  99. method: 'GET',
  100. headers: {
  101. 'Content-type': 'application/json',
  102. }
  103. }).then(res => {
  104. res.json().then(resj => {
  105. var d = resj.content;
  106. for (var i = d.length - 1; i >= 0; i--) {
  107. $('.main').append(d[i])
  108. }
  109. });
  110. })
  111. dat = new Date();
  112. dat.setHours(dat.getHours() + 8)
  113. $('#new').text(dat.toISOString().split('T')[0].replace(/-/g, '.'))
  114. })
  115. function upload(str, small) {
  116. str = '<p>' + str.replace(/\n/g, '</p><p>') + '</p>'
  117. str = `<h3 id='${dat.toISOString().split('T')[0].replace(/-/g, '.').slice(2)}'>${dat.toISOString().split('T')[0].replace(/-/g, '.')} <small>${small}</small></h3>${str}`
  118. str += '<hr>'
  119. console.log(str)
  120. if (!str) alert('no')
  121. fetch('/log', {
  122. method: 'POST',
  123. headers: {
  124. 'Content-type': 'application/json',
  125. },
  126. body: JSON.stringify({ content: str })
  127. }).then(res => {
  128. res.text().then(resj => {
  129. if (resj == 'ok') {
  130. console.log('ok!')
  131. $('.uploadIndicator').removeClass('glyphicon-cloud-upload')
  132. $('.uploadIndicator').addClass('glyphicon-ok')
  133. location.reload();
  134. }
  135. });
  136. })
  137. }
  138. </script>
  139. </head>
  140. <body>
  141. <a class="btn btn-info" href="/"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>&nbsp;返回</a>
  142. <div class="page-header">
  143. <h1>网站日志
  144. <button class="btn btn-default noshadow" onclick="$('.add').toggle();$(this).children().toggleClass('glyphicon-arrow-down')"><span class="glyphicon glyphicon-plus"></span></button>
  145. </h1>
  146. </div>
  147. <div class="add" style="display: none;">
  148. <h3 id='new'>d</h3>
  149. <div class="input-group">
  150. <input id="smallInput" type="text" class="form-control" autocomplete="off" placeholder="title">
  151. <textarea id="chatInput" type="text" class="form-control" autocomplete="off" style="resize:vertical" placeholder="content"></textarea>
  152. <span class="input-group-btn">
  153. <button type="button" class="btn btn-default noshadow" onclick="upload($('#chatInput').val(),$('#smallInput').val())" id="chatBtn"><span class="uploadIndicator glyphicon glyphicon-cloud-upload"></span></button>
  154. </span>
  155. </div>
  156. <hr>
  157. </div>
  158. <div class="main"></div>
  159. <hr>
  160. <p><button class="btn btn-danger btn-dang"><span class="glyphicon glyphicon-off" aria-hidden="true"></span></button>
  161. </p>
  162. <pre style="font-family: 'Courier New';font-size: 10pt;white-space: pre;margin: 1em 0px;line-height: 10pt;">
  163. .▄▄ · ▄▄· ▄ .▄▄▄▄▄▄ ▐ ▄ ▐ ▄
  164. ▐█ ▀. ▐█ ▌▪██▪▐█•██ ▪ •█▌▐█•█▌▐█
  165. ▄▀▀▀█▄██ ▄▄██▀▐█ ▐█.▪ ▄█▀▄ ▐█▐▐▌▐█▐▐▌
  166. ▐█▄▪▐█▐███▌██▌▐▀ ▐█▌·▐█▌.▐▌██▐█▌██▐█▌
  167. ▀▀▀▀ ·▀▀▀ ▀▀▀ · ▀▀▀ ▀█▄▀▪▀▀ █▪▀▀ █▪
  168. </pre>
  169. <a href="/a.log" style="color:floralwhite">(真正的日志)</a>
  170. </body>