diff --git a/frontend/60sapi/娱乐消遣/随机搞笑段子/css/background.css b/frontend/60sapi/娱乐消遣/随机搞笑段子/css/background.css new file mode 100644 index 00000000..7f1aa01c --- /dev/null +++ b/frontend/60sapi/娱乐消遣/随机搞笑段子/css/background.css @@ -0,0 +1,36 @@ +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + margin: 0; + min-height: 100vh; + overflow-x: hidden; + transition: background 0.5s ease; +} + +/* Hand-drawn Comic Theme Background - NEW VIBRANT VERSION */ +body.theme-comic { + background: linear-gradient(-45deg, #ff7e5f, #feb47b, #ffcc80, #ffecb3); + background-size: 400% 400%; + animation: gradientBG 15s ease infinite; +} + +@keyframes gradientBG { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +/* Placeholder for Emoji Theme Background */ +body.theme-emoji { + background-color: #fffde7; +} + +/* Placeholder for Retro TV Theme Background */ +body.theme-retro { + background-color: #3d2b1f; +} \ No newline at end of file diff --git a/frontend/60sapi/娱乐消遣/随机搞笑段子/css/style.css b/frontend/60sapi/娱乐消遣/随机搞笑段子/css/style.css new file mode 100644 index 00000000..5dccdee4 --- /dev/null +++ b/frontend/60sapi/娱乐消遣/随机搞笑段子/css/style.css @@ -0,0 +1,199 @@ +@import url('https://fonts.googleapis.com/css2?family=Zhi+Mang+Xing&display=swap'); + +/* --- General & Theme Switcher --- */ +.container { + max-width: 600px; + margin: 0 auto; + padding: 20px; + text-align: center; +} + +.theme-switcher { + position: fixed; + top: 15px; + right: 15px; + display: flex; + gap: 5px; + background: rgba(255, 255, 255, 0.8); + padding: 5px; + border-radius: 20px; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); + z-index: 100; +} + +.theme-icon { + width: 30px; + height: 30px; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + transition: all 0.2s ease; + border: 2px solid transparent; +} +.theme-icon.active { + border-color: #ff7043; + transform: scale(1.1); +} + +/* --- Comic Theme Styles --- */ +.theme-comic header h1 { + font-family: 'Zhi Mang Xing', cursive; + font-size: 4em; + color: #d84315; /* Deep Orange */ + text-shadow: 2px 2px 0 #fff; + margin: 0.2em 0; +} + +.theme-comic .divider { + height: 3px; + background: linear-gradient(90deg, #ffca28, #ff7043, #29b6f6, #66bb6a); + border-radius: 3px; + margin: 20px auto; + width: 80%; +} + +.theme-comic .joke-card { + background: rgba(255, 255, 255, 0.85); /* White with transparency */ + backdrop-filter: blur(5px); + border-radius: 15px; + padding: 40px; + min-height: 200px; + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); + display: flex; + justify-content: center; + align-items: center; + position: relative; + margin-bottom: 20px; + transform: rotate(-1deg); + transition: transform 0.2s ease; +} +.theme-comic .joke-card:hover { + transform: rotate(1deg) scale(1.02); +} + +.theme-comic .joke-text { + font-family: 'Zhi Mang Xing', cursive; + font-size: 2em; + line-height: 1.6; + color: #5d4037; +} + +.theme-comic .new-joke-btn { + background: #1e88e5; /* Vibrant Blue */ + color: white; + font-family: 'Zhi Mang Xing', cursive; + font-size: 2.5em; + border: none; + border-radius: 50px; + padding: 10px 30px; + cursor: pointer; + box-shadow: 0 5px 0 #1565c0; /* Darker Blue */ + transition: all 0.1s ease-in-out; +} +.theme-comic .new-joke-btn:active { + transform: translateY(5px); + box-shadow: none; +} + +/* --- Loading Animation --- */ +.loading-container { display: none; } +.loading-container.visible { display: block; } +.loading-anim { + height: 60px; + width: 80px; + margin: 0 auto 10px; +} +.book { + transform-style: preserve-3d; + transform: rotateY(-30deg); + animation: flip 3s infinite; +} +.book, .book-page { + width: 40px; + height: 55px; + position: absolute; + left: 50%; + top: 50%; + margin-left: -20px; + margin-top: -27.5px; +} +.book-page { + background: #ffca28; + border: 1px solid #ff7043; + border-radius: 3px; + transform-origin: left; +} +.book-page:nth-child(1) { animation: flip-page 3s infinite; } +.book-page:nth-child(2) { animation: flip-page 3s -1s infinite; } +.book-page:nth-child(3) { animation: flip-page 3s -2s infinite; } + +@keyframes flip { 50% { transform: rotateY(30deg); } } +@keyframes flip-page { 30%, 100% { transform: rotateY(180deg); } } + +/* --- Feedback Buttons & Animations --- */ +.feedback-buttons { + display: flex; + justify-content: center; + gap: 15px; + margin-bottom: 30px; +} +.feedback-btn { + background: none; + border: none; + font-size: 2em; + cursor: pointer; + transition: transform 0.2s ease; +} +.feedback-btn:hover { transform: scale(1.2); } + +#animation-container { + position: fixed; + top: 0; left: 0; width: 100%; height: 100%; + pointer-events: none; z-index: 999; +} +.confetti, .snowflake { + position: absolute; + animation-timing-function: linear; + animation-iteration-count: infinite; +} +.confetti { + width: 10px; height: 10px; + animation-name: fall; +} +.snowflake { + font-size: 20px; color: #fff; + animation-name: fall; +} +@keyframes fall { + from { transform: translateY(-10vh) rotate(0deg); } + to { transform: translateY(110vh) rotate(360deg); } +} + +.joke-card.absurd { + animation: absurd-flash 0.5s 2; +} +@keyframes absurd-flash { + 0%, 100% { border: 2px solid transparent; } + 50% { border: 5px solid red; } +} + +/* --- General Joke Text Visibility --- */ +.joke-text { + opacity: 0; + transform: scale(0.9); + transition: opacity 0.4s ease, transform 0.4s ease; +} +.joke-text.visible { + opacity: 1; + transform: scale(1); +} + +/* --- Responsive --- */ +@media (max-width: 600px) { + .theme-comic header h1 { font-size: 3em; } + .theme-comic .joke-card { padding: 25px; transform: rotate(0); } + .theme-comic .joke-card:hover { transform: rotate(0); } + .theme-comic .joke-text { font-size: 1.5em; } +} \ No newline at end of file diff --git a/frontend/60sapi/娱乐消遣/随机搞笑段子/index.html b/frontend/60sapi/娱乐消遣/随机搞笑段子/index.html new file mode 100644 index 00000000..e443b252 --- /dev/null +++ b/frontend/60sapi/娱乐消遣/随机搞笑段子/index.html @@ -0,0 +1,59 @@ + + + + + + 段子游乐场 + + + + + +
+
✏️
+
😂
+
📺
+
+ +
+
+

段子游乐场

+
+
+ +
+
+
+
+
+
+
+
+
+
+

段子菌正在翻笑话库...

+
+

+
+ + + + +
+
+ + +
+ + + + + + \ No newline at end of file diff --git a/frontend/60sapi/娱乐消遣/随机搞笑段子/js/script.js b/frontend/60sapi/娱乐消遣/随机搞笑段子/js/script.js new file mode 100644 index 00000000..2cb2eb32 --- /dev/null +++ b/frontend/60sapi/娱乐消遣/随机搞笑段子/js/script.js @@ -0,0 +1,122 @@ +document.addEventListener('DOMContentLoaded', () => { + // Elements + const body = document.body; + const jokeTextElem = document.getElementById('joke-text'); + const newJokeBtn = document.getElementById('new-joke-btn'); + const loadingContainer = document.querySelector('.loading-container'); + const animationContainer = document.getElementById('animation-container'); + const jokeCard = document.getElementById('joke-card'); + + // API + const apiBaseUrls = ["https://60s.api.shumengya.top", "https://60s-cf.viki.moe", "https://60s.viki.moe"]; + const apiPath = "/v2/duanzi"; + let currentApiIndex = 0; + + // --- Core Functions --- + const showLoading = (isLoading) => { + loadingContainer.classList.toggle('visible', isLoading); + if (isLoading) jokeTextElem.classList.remove('visible'); + }; + + const displayJoke = (joke) => { + jokeTextElem.textContent = joke; + showLoading(false); + setTimeout(() => jokeTextElem.classList.add('visible'), 50); + }; + + const fetchJoke = async () => { + showLoading(true); + try { + const url = apiBaseUrls[currentApiIndex] + apiPath; + const response = await fetch(url, { timeout: 5000 }); + if (!response.ok) throw new Error('Network response was not ok'); + + const data = await response.json(); + if (data.code === 200 && data.data && data.data.duanzi) { + displayJoke(data.data.duanzi); + } else { + throw new Error('Invalid data format'); + } + } catch (error) { + console.error(`API error with ${apiBaseUrls[currentApiIndex]}:`, error); + currentApiIndex = (currentApiIndex + 1) % apiBaseUrls.length; + if (currentApiIndex !== 0) { + fetchJoke(); // Try next API + } else { + displayJoke('段子菌迷路了！点击‘再来一个’让它重新找路～'); + } + } + }; + + // --- Theme Switcher --- + const themeSwitcher = document.querySelector('.theme-switcher'); + themeSwitcher.addEventListener('click', (e) => { + if (e.target.classList.contains('theme-icon')) { + const theme = e.target.dataset.theme; + body.className = theme; // Set body class to the selected theme + + // Update active icon + themeSwitcher.querySelectorAll('.theme-icon').forEach(icon => icon.classList.remove('active')); + e.target.classList.add('active'); + + alert(`主题已切换！部分主题（如表情包、复古电视）将在后续阶段实现。`); + } + }); + // Set initial active theme icon + themeSwitcher.querySelector(`[data-theme="${body.className}"]`).classList.add('active'); + + + // --- Feedback Buttons & Animations --- + const btnLol = document.getElementById('btn-lol'); + const btnCold = document.getElementById('btn-cold'); + const btnSeen = document.getElementById('btn-seen'); + const btnAbsurd = document.getElementById('btn-absurd'); + const soundLol = document.getElementById('sound-lol'); + const soundCold = document.getElementById('sound-cold'); + + btnLol.addEventListener('click', () => { + soundLol.play(); + createParticles(20, 'confetti'); + }); + + btnCold.addEventListener('click', () => { + soundCold.play(); + createParticles(15, 'snowflake'); + }); + + btnSeen.addEventListener('click', () => { + displayJoke("原来你也听过！那再给你换个新鲜的～"); + setTimeout(fetchJoke, 1500); + }); + + btnAbsurd.addEventListener('click', () => { + jokeCard.classList.add('absurd'); + setTimeout(() => jokeCard.classList.remove('absurd'), 1000); + }); + + function createParticles(count, type) { + animationContainer.innerHTML = ''; // Clear previous + const colors = ['#ffca28', '#ff7043', '#29b6f6', '#66bb6a']; + for (let i = 0; i < count; i++) { + const particle = document.createElement('div'); + particle.classList.add(type); + if (type === 'confetti') { + particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; + } else { + particle.textContent = '❄️'; + } + particle.style.left = `${Math.random() * 100}vw`; + const duration = Math.random() * 3 + 2; // 2-5 seconds + const delay = Math.random() * -duration; // Start at different times + particle.style.animationDuration = `${duration}s`; + particle.style.animationDelay = `${delay}s`; + animationContainer.appendChild(particle); + } + } + + // --- Event Listeners --- + newJokeBtn.addEventListener('click', fetchJoke); + + // --- Initial Load --- + fetchJoke(); +}); \ No newline at end of file diff --git a/frontend/60sapi/娱乐消遣/随机搞笑段子/接口集合.json b/frontend/60sapi/娱乐消遣/随机搞笑段子/接口集合.json new file mode 100644 index 00000000..90aa64a6 --- /dev/null +++ b/frontend/60sapi/娱乐消遣/随机搞笑段子/接口集合.json @@ -0,0 +1,47 @@ +{ + "api_name": "60s-api", + "api_version": "2.22.1", + "api_docs": "https://docs.60s-api.viki.moe", + "author": "Viki ", + "user_group": "595941841", + "github_repo": "https://github.com/vikiboss/60s", + "updated": "2025/09/01 11:12:08", + "updated_at": 1756696328000, + "endpoints": [ + "/v2/60s", + "/v2/answer", + "/v2/baike", + "/v2/bili", + "/v2/bing", + "/v2/changya", + "/v2/chemical", + "/v2/douyin", + "/v2/duanzi", + "/v2/epic", + "/v2/exchange_rate", + "/v2/fabing", + "/v2/hitokoto", + "/v2/ip", + "/v2/kfc", + "/v2/luck", + "/v2/maoyan", + "/v2/today_in_history", + "/v2/toutiao", + "/v2/weibo", + "/v2/zhihu", + "/v2/lunar", + "/v2/ai-news", + "/v2/awesome-js", + "/v2/qrcode", + "/v2/dad-joke", + "/v2/hacker-news/:type", + "/v2/og", + "/v2/hash", + "/v2/fanyi", + "/v2/fanyi/langs", + "/v2/weather", + "/v2/weather/forecast", + "/v2/ncm-rank", + "/v2/ncm-rank/:id" + ] +} \ No newline at end of file diff --git a/frontend/60sapi/娱乐消遣/随机搞笑段子/返回接口.json b/frontend/60sapi/娱乐消遣/随机搞笑段子/返回接口.json new file mode 100644 index 00000000..4a6d180e --- /dev/null +++ b/frontend/60sapi/娱乐消遣/随机搞笑段子/返回接口.json @@ -0,0 +1,8 @@ +{ + "code": 200, + "message": "获取成功。数据来自官方/权威源头，以确保稳定与实时。开源地址 https://github.com/vikiboss/60s，反馈群 595941841", + "data": { + "index": 347, + "duanzi": "我不想读书，主要是因为家里牛啊，猪啊羊啊都没人喂。" + } +} \ No newline at end of file