From 4c4b6a768b999c60fe96513e848a4fa4fe026f99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8B=8F=E6=9C=A8?= <mc183otpa@163.com>
Date: Thu, 17 Apr 2025 21:58:46 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E6=96=87=E4=BB=B6=E8=87=B3?=
 =?UTF-8?q?=20/?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 随机名言.html | 191 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 191 insertions(+)
 create mode 100644 随机名言.html
diff --git a/随机名言.html b/随机名言.html
new file mode 100644
index 0000000..def751f
--- /dev/null
+++ b/随机名言.html
@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <title>随机名言</title>
+    <style>
+        /* 基础样式 */
+        :root {
+            --primary-color: #6c5ce7;
+            --secondary-color: #a8a5e6;
+            --text-color: #2d3436;
+        }
+
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            margin: 0;
+            background: linear-gradient(135deg, #f0f4ff 0%, #f9f9f9 100%);
+            font-family: 'Helvetica Neue', Helvetica, Arial, 'Microsoft Yahei', sans-serif;
+        }
+
+        /* 名言卡片容器 */
+        .quote-container {
+            position: relative;
+            width: 90%;
+            max-width: 680px;
+            padding: 2.5rem;
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 20px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            transition: transform 0.3s ease;
+        }
+
+        .quote-container:hover {
+            transform: translateY(-5px);
+        }
+
+        /* 名言文本样式 */
+        #quote {
+            position: relative;
+            font-size: 1.4rem;
+            line-height: 1.8;
+            color: var(--text-color);
+            text-align: center;
+            margin: 0;
+            padding: 2rem 1rem;
+            border-left: 4px solid var(--primary-color);
+            background: linear-gradient(to right, transparent 0%, rgba(108, 92, 231, 0.05) 100%);
+        }
+
+        /* 控制按钮组 */
+        .controls {
+            display: flex;
+            justify-content: center;
+            gap: 1rem;
+            margin-top: 2rem;
+        }
+
+        /* 美化按钮 */
+        .styled-btn {
+            padding: 0.8rem 1.5rem;
+            border: none;
+            border-radius: 50px;
+            background: var(--primary-color);
+            color: white;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            transition: all 0.3s ease;
+        }
+
+        .styled-btn:hover {
+            background: #5b4bc4;
+            box-shadow: 0 5px 15px rgba(108, 92, 231, 0.3);
+        }
+
+        .styled-btn:active {
+            transform: scale(0.95);
+        }
+
+        /* 加载动画 */
+        .loading {
+            position: relative;
+            color: transparent;
+        }
+
+        .loading::after {
+            content: "";
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            width: 24px;
+            height: 24px;
+            border: 3px solid #ddd;
+            border-top-color: var(--primary-color);
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        /* 装饰元素 */
+        .decorative-line {
+            position: absolute;
+            background: var(--secondary-color);
+            opacity: 0.2;
+        }
+
+        .decorative-line.top {
+            top: -10px;
+            left: 20%;
+            width: 60%;
+            height: 2px;
+        }
+
+        .decorative-line.right {
+            top: 10%;
+            right: -10px;
+            width: 2px;
+            height: 80%;
+        }
+    </style>
+</head>
+<body>
+    <div class="quote-container">
+        <div class="decorative-line top"></div>
+        <div class="decorative-line right"></div>
+        <p id="quote">正在获取智慧箴言...</p>
+        <div class="controls">
+            <button class="styled-btn" onclick="getQuote()">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M23 4v6h-6M1 20v-6h6"/>
+                    <path d="M3.5 9a9 9 0 0 1 14-5.3L23 4M1 20l5.3-5.3A9 9 0 0 0 20 16.5"/>
+                </svg>
+                换一句
+            </button>
+            <button class="styled-btn" onclick="copyQuote()">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
+                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+                </svg>
+                复制
+            </button>
+        </div>
+    </div>
+
+    <script>
+        // 立即初始化
+        (() => {
+            getQuote();
+            // 快捷键支持
+            document.addEventListener('keydown', (e) => {
+                if (e.code === 'Space' || e.code === 'Enter') getQuote();
+            });
+        })();
+
+        async function getQuote() {
+            const quoteEl = document.getElementById('quote');
+            quoteEl.classList.add('loading');
+            
+            try {
+                const response = await fetch('https://api.pearktrue.cn/api/hitokoto/');
+                if (!response.ok) throw new Error('请求失败');
+                
+                const text = await response.text();
+                quoteEl.textContent = text || "暂时没有找到名言哦";
+                quoteEl.classList.remove('loading');
+            } catch (error) {
+                quoteEl.innerHTML = `<span style="color: #e74c3c">⚠️ 获取失败，点击重试</span>`;
+                quoteEl.classList.remove('loading');
+                quoteEl.onclick = getQuote;
+            }
+        }
+
+        function copyQuote() {
+            const text = document.getElementById('quote').textContent;
+            navigator.clipboard.writeText(text).then(() => {
+                alert('已复制到剪贴板');
+            }).catch(() => {
+                alert('复制失败，请手动选择文本');
+            });
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
