card.php 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width">
  6. <title>吴先森的小站</title>
  7. <link rel="stylesheet" href="//static.llilii.cn/css/other/background.css" />
  8. <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/css/mdui.min.css" />
  9. <style>
  10. a {
  11. color: white;
  12. text-decoration: none;
  13. }
  14. </style>
  15. <audio src="<?php echo getInfo('audio') ?>" autoplay>
  16. 您的浏览器不支持 audio 标签。
  17. </audio>
  18. <script>
  19. function RandomNumBoth(Min, Max) {
  20. var Range = Max - Min;
  21. var Rand = Math.random();
  22. var num = Min + Math.round(Rand * Range);
  23. return num;
  24. }
  25. function randomImage() {
  26. var img = event.srcElement;
  27. img.onerror = null;
  28. var xhr = new XMLHttpRequest();
  29. xhr.onreadystatechange = function() {
  30. switch (xhr.readyState) {
  31. case 4:
  32. if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
  33. imgURL = 'https://img.llilii.cn/kagamine/' + JSON.parse(xhr.responseText)['file_name'][RandomNumBoth(0, JSON.parse(xhr.responseText)['file_num'])];
  34. img.src = imgURL;
  35. }
  36. break;
  37. }
  38. }
  39. xhr.open('get', 'https://static.llilii.cn/json/img_list.json');
  40. xhr.send(null);
  41. }
  42. </script>
  43. </head>
  44. <div class="mdui-container" style="max-width: 400px; ">
  45. <br><br><br><br>
  46. <body>
  47. <?php
  48. try {
  49. $pdo = pdoConnect();
  50. $stmt = $pdo->prepare("select * from loveway_data where id = ?");
  51. $stmt->bindValue(1, $_GET['id']);
  52. if ($stmt->execute()) {
  53. $rows = $stmt->fetchAll();
  54. $row = $rows[0];
  55. ?>
  56. <br /><br />
  57. <div class="mdui-card mdui-hoverable" style="border-radius: 16px">
  58. <!-- 卡片头部,包含头像、标题、副标题 -->
  59. <div class="mdui-card-header">
  60. <img class="mdui-card-header-avatar" src="https://q1.qlogo.cn/g?b=qq&s=640&nk=<?php echo $row['contact']; ?>" />
  61. <div class="mdui-card-header-title"><?php echo $row['confessor']; ?></div>
  62. <div class="mdui-card-header-subtitle"><?php echo $row['time']; ?></div>
  63. </div>
  64. <!-- 卡片的媒体内容,可以包含图片、视频等媒体内容,以及标题、副标题 -->
  65. <div class="mdui-card-media">
  66. <?php
  67. if (!empty($row['image'])) {
  68. ?>
  69. <img style="max-height: 1000px" onerror="randomImage()" src="<?php echo $row['image']; ?>" />
  70. <?php
  71. } else {
  72. ?>
  73. <div class="mdui-divider"></div>
  74. <?php } ?>
  75. </div>
  76. <!-- 卡片的标题和副标题 -->
  77. <div class="mdui-card-primary">
  78. <div class="mdui-card-primary-title">To <?php echo $row['to_who']; ?></div>
  79. <div class="mdui-card-primary-subtitle">
  80. <?php echo $row['introduction']; ?>
  81. </div>
  82. </div>
  83. <!-- 卡片的内容 -->
  84. <div class="mdui-card-content">
  85. <?php echo $row['content']; ?>
  86. </div>
  87. <div class="mdui-card-actions">
  88. <a class="copy mdui-btn mdui-btn-icon mdui-float-right" href="javascript:void(0);" data-clipboard-text="
  89. <?php
  90. echo get_http_type() . $_SERVER['SERVER_NAME'];
  91. if ($REWRITE) {
  92. echo "/card/" . $row['id'];
  93. } else {
  94. echo '/?page=card&id=' . $row['id'];
  95. }
  96. ?>
  97. "><i class="mdui-icon material-icons">share</i></a>
  98. </a>
  99. </div>
  100. </div>
  101. <?php
  102. } else {
  103. return 'database connection failed';
  104. }
  105. } catch (Exception $e) {
  106. return 'database connection failed';
  107. //echo $e->getMessage();
  108. }
  109. ?>
  110. </div>
  111. <div id="background">
  112. <div class="bg-image" style="background: url('//img.llilii.cn/kagamine/p3/32639516_p2.jpg') no-repeat center center; display: block;"></div>
  113. </div>
  114. <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/js/mdui.min.js"></script>
  115. <script src="https://static.llilii.cn/libs/jquery/3.5.1/jquery.min.js"></script>
  116. <script src="https://static.llilii.cn/libs/clipboard/clipboard.min.js"></script>
  117. <script>
  118. $(function() {
  119. var clipboard = new ClipboardJS('.copy');
  120. clipboard.on('success', function(e) {
  121. mdui.snackbar({
  122. message: '复制表白卡片地址成功!',
  123. position: 'right-top'
  124. });
  125. });
  126. clipboard.on('error', function(e) {
  127. mdui.snackbar({
  128. message: '复制表白卡片地址失败!请尝试手动复制!',
  129. position: 'right-top'
  130. });
  131. });
  132. });
  133. </script>
  134. </body>
  135. </html>