From 7620799e710a2d1853f6e49f00adebeb34ad3e35 Mon Sep 17 00:00:00 2001 From: LHgeek <1209384461@qq.com> Date: Fri, 27 Feb 2026 21:43:07 +0800 Subject: [PATCH] feat by vibe coding use Seed-Code-PrimeRL Signed-off-by: LHgeek <1209384461@qq.com> --- assets/css/style.css | 226 ++++++++++++++++++++++++++++++ assets/js/script.js | 317 ++++++++++++++++++++++++++++++++++++++----- index.html | 38 +++++- 3 files changed, 548 insertions(+), 33 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index 2accbed..9779d8e 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -195,4 +195,230 @@ body.dark-mode #author { border-radius: 0; object-fit: cover; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); +} + +.topic-buttons { + display: flex; + flex-wrap: wrap; + gap: 10px; + justify-content: center; + margin: 20px 0; + padding: 0 10px; +} + +.topic-btn { + padding: 8px 16px; + background-color: #fff; + color: #2b2e4a; + border: 2px solid #ef8354; + border-radius: 20px; + cursor: pointer; + font-size: 14px; + transition: all 0.3s ease; +} + +.topic-btn:hover { + background-color: #ef8354; + color: #fff; +} + +.topic-btn.active { + background-color: #ef8354; + color: #fff; +} + +body.dark-mode .topic-btn { + background-color: #2b2e4a; + color: #fff; + border-color: #ef8354; +} + +body.dark-mode .topic-btn:hover, +body.dark-mode .topic-btn.active { + background-color: #ef8354; + color: #fff; +} + +.history-panel { + position: fixed; + left: -320px; + top: 0; + width: 300px; + height: 100vh; + background-color: #fff; + box-shadow: 2px 0 10px rgba(0,0,0,0.1); + transition: left 0.3s ease; + z-index: 1000; + display: flex; + flex-direction: column; + overflow: hidden; +} + +.history-panel.open { + left: 0; +} + +.history-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px; + background-color: #2b2e4a; + color: #fff; +} + +.history-header h3 { + margin: 0; + font-size: 18px; +} + +.clear-btn { + padding: 5px 15px; + background-color: #ef8354; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 12px; +} + +.clear-btn:hover { + background-color: #d57a48; +} + +.close-btn { + padding: 5px 10px; + background-color: transparent; + color: #fff; + border: 1px solid #fff; + border-radius: 5px; + cursor: pointer; + font-size: 14px; +} + +.close-btn:hover { + background-color: rgba(255,255,255,0.2); +} + +.history-list { + flex: 1; + overflow-y: auto; + padding: 15px; +} + +.history-item { + padding: 12px; + margin-bottom: 10px; + background-color: #f5f5f5; + border-radius: 8px; + border-left: 3px solid #ef8354; + cursor: pointer; + transition: transform 0.2s ease; +} + +.history-item:hover { + transform: translateX(5px); +} + +.history-item-text { + font-size: 13px; + color: #333; + margin-bottom: 5px; + line-height: 1.4; +} + +.history-item-author { + font-size: 11px; + color: #888; + text-align: right; +} + +body.dark-mode .history-panel { + background-color: #1e1e1e; +} + +body.dark-mode .history-item { + background-color: #2b2e4a; +} + +body.dark-mode .history-item-text { + color: #fff; +} + +.recommended-panel { + max-width: 700px; + margin: 20px auto; + padding: 15px; + background-color: #fff; + border-radius: 10px; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); +} + +.recommended-panel h4 { + margin: 0 0 15px 0; + color: #2b2e4a; + font-size: 16px; +} + +.recommended-panel h4 i { + color: #ef8354; + margin-right: 8px; +} + +.recommended-list { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 10px; +} + +.recommended-item { + padding: 10px; + background-color: #f9f9f9; + border-radius: 8px; + font-size: 12px; + color: #555; + line-height: 1.4; + cursor: pointer; + transition: all 0.2s ease; + border: 1px solid transparent; +} + +.recommended-item:hover { + border-color: #ef8354; + background-color: #fff; +} + +body.dark-mode .recommended-panel { + background-color: #2b2e4a; +} + +body.dark-mode .recommended-panel h4 { + color: #fff; +} + +body.dark-mode .recommended-item { + background-color: #1e1e1e; + color: #ccc; +} + +.main-content { + display: flex; + flex-direction: column; + align-items: center; + padding-top: 60px; +} + +.history-overlay { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0,0,0,0.5); + z-index: 999; +} + +.history-overlay.show { + display: block; } \ No newline at end of file diff --git a/assets/js/script.js b/assets/js/script.js index 3981fc9..b96fdb4 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -1,92 +1,345 @@ const FAVORITES_KEY = "favoriteQuotes"; - -// DOM -const quoteText = document.getElementById("quote"); -const newQuoteButton = document.getElementById("generate"); -const categorySelect = document.getElementById("category"); -const shareTwitterButton = document.getElementById("shareTwitter"); -const darkModeToggle = document.getElementById("dark-mode-toggle"); -const copyQuoteButton = document.getElementById("copy-quote"); -const favoriteIcon = document.getElementById("favorite-icon"); -const authorText = document.getElementById("author"); -const authorImage = document.getElementById("author-image"); - -// quotes array -const quotes = { +const ALL_TOPICS = ["全部", "励志", "幽默", "人生", "成功", "智慧", "勇气", "梦想", "坚持", "态度"]; +const HISTORY_KEY = "quoteHistory"; +const TOPIC_STATS_KEY = "topicStats"; +let selectedTopics = ["全部"]; +let currentQuote = null; + +document.addEventListener("DOMContentLoaded", function() { + const quoteText = document.getElementById("quote"); + const newQuoteButton = document.getElementById("generate"); + const categorySelect = document.getElementById("category"); + const shareTwitterButton = document.getElementById("shareTwitter"); + const darkModeToggle = document.getElementById("dark-mode-toggle"); + const copyQuoteButton = document.getElementById("copy-quote"); + const favoriteIcon = document.getElementById("favorite-icon"); + const authorText = document.getElementById("author"); + const authorImage = document.getElementById("author-image"); + const historyToggle = document.getElementById("history-toggle"); + const historyPanel = document.getElementById("history-panel"); + const historyOverlay = document.getElementById("history-overlay"); + const clearHistory = document.getElementById("clear-history"); + const closeHistory = document.getElementById("close-history"); + + const quotes = { motivational: [ { text: "The greatest glory in living lies not in never falling, but in rising every time we fall.", author: "Nelson Mandela", + topics: ["励志", "勇气", "坚持"], }, { text: "The way to get started is to quit talking and begin doing.", author: "Walt Disney", + topics: ["励志", "行动", "成功"], }, { - text: "Your time is limited, so don’t waste it living someone else’s life.", + text: "Your time is limited, so don't waste it living someone else's life.", author: "Steve Jobs", + topics: ["人生", "励志", "梦想"], + }, + { + text: "Success is not final, failure is not fatal: It is the courage to continue that counts.", + author: "Winston Churchill", + topics: ["成功", "勇气", "坚持"], + }, + { + text: "The only limit to our realization of tomorrow will be our doubts of today.", + author: "Franklin D. Roosevelt", + topics: ["励志", "梦想", "态度"], + }, + { + text: "It does not matter how slowly you go as long as you do not stop.", + author: "Confucius", + topics: ["坚持", "励志", "成功"], } ], funny: [ { text: "I'm not arguing, I'm just explaining why I'm right.", author: "Unknown", + topics: ["幽默", "智慧"], }, { - text: "Why don’t skeletons fight each other? They don’t have the guts.", + text: "Why don't skeletons fight each other? They don't have the guts.", author: "Unknown", + topics: ["幽默"], }, { text: "My fake plants died because I did not pretend to water them.", author: "Mitch Hedberg", + topics: ["幽默"], + }, + { + text: "The only way to keep your health is to eat what you don't want, drink what you don't like, and do what you'd rather not.", + author: "Mark Twain", + topics: ["幽默", "人生"], + }, + { + text: "I have not failed. I've just found 10,000 ways that won't work.", + author: "Thomas Edison", + topics: ["幽默", "励志", "成功"], + }, + { + text: "A day without sunshine is like, you know, night.", + author: "Steve Martin", + topics: ["幽默", "智慧"], } ], inspirational: [ { - text: "Life is what happens when you’re busy making other plans.", + text: "Life is what happens when you're busy making other plans.", author: "John Lennon", + topics: ["人生", "智慧"], }, { - text: "If you look at what you have in life, you’ll always have more.", + text: "If you look at what you have in life, you'll always have more.", author: "Oprah Winfrey", + topics: ["人生", "态度", "成功"], }, { text: "If life were predictable it would cease to be life, and be without flavor.", author: "Eleanor Roosevelt", + topics: ["人生", "智慧", "态度"], + }, + { + text: "The purpose of our lives is to be happy.", + author: "Dalai Lama", + topics: ["人生", "态度", "智慧"], + }, + { + text: "Get busy living or get busy dying.", + author: "Stephen King", + topics: ["人生", "勇气", "励志"], + }, + { + text: "You only live once, but if you do it right, once is enough.", + author: "Mae West", + topics: ["人生", "梦想", "态度"], + }, + { + text: "Many of life's failures are people who did not realize how close they were to success when they gave up.", + author: "Thomas Edison", + topics: ["成功", "坚持", "励志"], + }, + { + text: "If you want to live a happy life, tie it to a goal, not to people or things.", + author: "Albert Einstein", + topics: ["梦想", "成功", "人生"], } ], }; +function getAllQuotes() { + return [...quotes.motivational, ...quotes.funny, ...quotes.inspirational]; +} + +function getQuotesByTopics(topics) { + if (topics.length === 0 || topics.includes("全部")) { + return getAllQuotes(); + } + return getAllQuotes().filter(quote => + topics.some(topic => quote.topics.includes(topic)) + ); +} + +function initTopicButtons() { + const topicButtons = document.querySelectorAll(".topic-btn"); + topicButtons.forEach(btn => { + btn.addEventListener("click", () => { + const topic = btn.dataset.topic; + + if (topic === "全部") { + selectedTopics = ["全部"]; + topicButtons.forEach(b => b.classList.remove("active")); + btn.classList.add("active"); + } else { + if (selectedTopics.includes("全部")) { + selectedTopics = []; + topicButtons.forEach(b => b.classList.remove("active")); + } + + if (selectedTopics.includes(topic)) { + selectedTopics = selectedTopics.filter(t => t !== topic); + btn.classList.remove("active"); + } else { + selectedTopics.push(topic); + btn.classList.add("active"); + } + + if (selectedTopics.length === 0) { + selectedTopics = ["全部"]; + document.querySelector('.topic-btn[data-topic="全部"]').classList.add("active"); + } + } + + recordTopicStats(selectedTopics); + updateRecommendedPanel(); + }); + }); +} + +function getHistory() { + return JSON.parse(localStorage.getItem(HISTORY_KEY)) || []; +} + +function saveHistory(quote) { + const history = getHistory(); + const exists = history.find(h => h.text === quote.text); + if (!exists) { + history.unshift(quote); + if (history.length > 50) { + history.pop(); + } + localStorage.setItem(HISTORY_KEY, JSON.stringify(history)); + } +} + +function updateHistoryPanel() { + const historyList = document.getElementById("history-list"); + const history = getHistory(); + + if (history.length === 0) { + historyList.innerHTML = '
暂无历史记录
'; + return; + } + + historyList.innerHTML = history.map((quote, index) => ` +选择主题后将为您推荐
'; + return; + } + + const relevantQuotes = getQuotesByTopics(topTopics); + const shuffled = [...relevantQuotes].sort(() => Math.random() - 0.5); + const recommended = shuffled.slice(0, 3); + + recommendedList.innerHTML = recommended.map((quote, index) => ` +