index.html 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>ds猫源在线配置主页</title>
  7. <style>
  8. body {
  9. margin: 0;
  10. font-family: Arial, sans-serif;
  11. display: flex;
  12. justify-content: center;
  13. align-items: center;
  14. min-height: 100vh;
  15. background-color: #f3f4f6;
  16. color: #333;
  17. text-align: center;
  18. }
  19. .container {
  20. padding: 20px;
  21. border: 1px solid #ddd;
  22. border-radius: 8px;
  23. background-color: #fff;
  24. box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  25. max-width: 90%;
  26. width: 400px;
  27. }
  28. h1 {
  29. font-size: 24px;
  30. margin-bottom: 20px;
  31. }
  32. .link {
  33. display: inline-block;
  34. font-size: 16px;
  35. color: #007bff;
  36. text-decoration: none;
  37. margin-bottom: 10px;
  38. word-wrap: break-word;
  39. }
  40. .link:hover {
  41. text-decoration: underline;
  42. }
  43. .copy-button {
  44. display: inline-block;
  45. padding: 8px 16px;
  46. font-size: 14px;
  47. color: #fff;
  48. background-color: #007bff;
  49. border: none;
  50. border-radius: 4px;
  51. cursor: pointer;
  52. transition: background-color 0.3s;
  53. }
  54. .copy-button:hover {
  55. background-color: #0056b3;
  56. }
  57. .message {
  58. margin-top: 10px;
  59. font-size: 14px;
  60. color: #28a745;
  61. }
  62. </style>
  63. </head>
  64. <body>
  65. <div class="container">
  66. <h1>欢迎使用DS猫源</h1>
  67. <a href="#" class="link" id="link">$catLink</a>
  68. <button class="copy-button" id="copyButton">复制地址</button>
  69. <div class="message" id="message" style="display: none;">链接已复制到剪切板!</div>
  70. </div>
  71. <script>
  72. function copyToClipboard(text) {
  73. if (navigator.clipboard && navigator.clipboard.writeText) {
  74. navigator.clipboard.writeText(text)
  75. .then(() => {
  76. console.log('Text copied to clipboard!');
  77. })
  78. .catch(err => {
  79. console.error('Failed to copy text: ', err);
  80. });
  81. } else {
  82. console.warn('Clipboard API not supported. Falling back to legacy method.');
  83. fallbackCopyToClipboard(text);
  84. }
  85. }
  86. function fallbackCopyToClipboard(text) {
  87. const textarea = document.createElement('textarea');
  88. textarea.value = text;
  89. document.body.appendChild(textarea);
  90. textarea.select();
  91. try {
  92. document.execCommand('copy');
  93. console.log('Fallback: Text copied to clipboard!');
  94. } catch (err) {
  95. console.error('Fallback: Failed to copy text: ', err);
  96. }
  97. document.body.removeChild(textarea);
  98. }
  99. document.getElementById('copyButton').addEventListener('click', function () {
  100. const link = document.getElementById('link').textContent;
  101. copyToClipboard(link);
  102. alert('已复制到剪切板');
  103. });
  104. </script>
  105. </body>
  106. </html>