index.html 6.7 KB

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