index.html 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  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. $('.add').toggle()
  92. fetch('data.json', {
  93. method: 'GET',
  94. headers: {
  95. 'Content-type': 'application/json',
  96. }
  97. }).then(res => {
  98. res.json().then(resj => {
  99. var d = resj.content;
  100. for (var i = d.length - 1; i >= 0; i--) {
  101. $('.main').append(d[i])
  102. }
  103. });
  104. })
  105. dat = new Date();
  106. dat.setHours(dat.getHours() + 8)
  107. $('#new').text(dat.toISOString().split('T')[0].replace(/-/g, '.'))
  108. })
  109. function upload(str, small) {
  110. str = '<p>' + str.replace(/\n/g, '</p><p>') + '</p>'
  111. str = `<h3 id='${dat.toISOString().split('T')[0].replace(/-/g, '.').slice(2)}'>${dat.toISOString().split('T')[0].replace(/-/g, '.')} <small>${small}</small></h3>${str}`
  112. str += '<hr>'
  113. console.log(str)
  114. if (!str) alert('no')
  115. fetch('/comm', {
  116. method: 'POST',
  117. headers: {
  118. 'Content-type': 'application/json',
  119. },
  120. body: JSON.stringify({ content: str })
  121. }).then(res => {
  122. res.text().then(resj => {
  123. if (resj == 'ok') {
  124. console.log('ok!')
  125. $('.uploadIndicator').removeClass('glyphicon-cloud-upload')
  126. $('.uploadIndicator').addClass('glyphicon-ok')
  127. location.reload();
  128. }
  129. });
  130. })
  131. }
  132. </script>
  133. </head>
  134. <body>
  135. <div class="page-header">
  136. <h1>匿名评论
  137. <button class="btn btn-default noshadow" onclick="$('.add').toggle(600);$(this).children().toggleClass('glyphicon-arrow-down')"><span class="glyphicon glyphicon-plus"></span></button>
  138. </h1>
  139. </div>
  140. <div>
  141. <h3 id='new' class="add"></h3>
  142. <input id="smallInput" type="text" class="form-control add" autocomplete="off" placeholder="title">
  143. <textarea id="chatInput" type="text" class="form-control add" autocomplete="off" style="resize:vertical" placeholder="content"></textarea>
  144. <span class="input-group-btn">
  145. <button type="button" class="btn btn-default noshadow add" onclick="upload($('#chatInput').val(),$('#smallInput').val())" id="chatBtn"><span class="uploadIndicator glyphicon glyphicon-cloud-upload"></span> 提交</button>
  146. </span>
  147. <hr>
  148. </div>
  149. <div class="main"></div>
  150. <pre style="font-family: 'Courier New';font-size: 10pt;white-space: pre;margin: 1em 0px;line-height: 10pt;">
  151. .▄▄ · ▄▄· ▄ .▄▄▄▄▄▄ ▐ ▄ ▐ ▄
  152. ▐█ ▀. ▐█ ▌▪██▪▐█•██ ▪ •█▌▐█•█▌▐█
  153. ▄▀▀▀█▄██ ▄▄██▀▐█ ▐█.▪ ▄█▀▄ ▐█▐▐▌▐█▐▐▌
  154. ▐█▄▪▐█▐███▌██▌▐▀ ▐█▌·▐█▌.▐▌██▐█▌██▐█▌
  155. ▀▀▀▀ ·▀▀▀ ▀▀▀ · ▀▀▀ ▀█▄▀▪▀▀ █▪▀▀ █▪
  156. </pre>
  157. </body>