shumengya/InfoGenie
2
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加更多的API接口功能

Browse Source
This commit is contained in:
树萌芽
2025-09-08 22:08:09 +08:00
parent 227ccf9c29
commit 6889ca37e5
31 changed files with 8796 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

215
frontend/60sapi/实用功能/随机颜色/background.css Normal file
View File

@@ -0,0 +1,215 @@
/* 背景样式文件 - 独立管理背景相关样式 */
/* 主体背景 */
body {
background: linear-gradient(135deg, #e8f5e8 0%, #f0fff0 50%, #e8f5e8 100%);
background-attachment: fixed;
background-size: 400% 400%;
animation: gradientShift 15s ease infinite;
}
/* 背景动画 */
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* 容器背景装饰 */
.container::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 20% 80%, rgba(144, 205, 144, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(45, 90, 39, 0.05) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(144, 205, 144, 0.08) 0%, transparent 50%);
pointer-events: none;
z-index: -1;
}
/* 输入区域背景 */
.input-section {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* 结果区域背景 */
.result-section {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* 格式组背景 */
.format-group {
background: rgba(248, 255, 248, 0.8);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
/* 属性项背景 */
.property-item {
background: rgba(248, 255, 248, 0.8);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
/* 调色板项背景 */
.palette-item {
background: rgba(248, 255, 248, 0.8);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
/* 无障碍项背景 */
.accessibility-item {
background: rgba(248, 255, 248, 0.8);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
/* 颜色预览背景 */
.color-preview {
background: rgba(248, 255, 248, 0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* 输入框背景 */
.input-group input,
.input-group select {
background: rgba(248, 255, 248, 0.9);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.input-group input:focus,
.input-group select:focus {
background: rgba(255, 255, 255, 0.95);
}
/* 格式组内部元素背景 */
.format-group p {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
/* 手机端背景优化 */
@media (max-width: 767px) {
body {
background: linear-gradient(180deg, #e8f5e8 0%, #f0fff0 50%, #e8f5e8 100%);
background-attachment: scroll; /* 手机端使用scroll避免性能问题 */
}
.container::before {
background-image:
radial-gradient(circle at 30% 70%, rgba(144, 205, 144, 0.08) 0%, transparent 40%),
radial-gradient(circle at 70% 30%, rgba(45, 90, 39, 0.04) 0%, transparent 40%);
}
/* 减少手机端的模糊效果以提升性能 */
.input-section,
.result-section {
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.format-group,
.property-item,
.palette-item,
.accessibility-item {
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
}
/* 平板端背景优化 */
@media (min-width: 768px) and (max-width: 1024px) {
.container::before {
background-image:
radial-gradient(circle at 25% 75%, rgba(144, 205, 144, 0.12) 0%, transparent 60%),
radial-gradient(circle at 75% 25%, rgba(45, 90, 39, 0.06) 0%, transparent 60%),
radial-gradient(circle at 50% 50%, rgba(144, 205, 144, 0.04) 0%, transparent 40%);
}
}
/* 电脑端背景优化 */
@media (min-width: 1025px) {
body {
background-size: 300% 300%;
animation-duration: 20s;
}
.container::before {
background-image:
radial-gradient(circle at 15% 85%, rgba(144, 205, 144, 0.15) 0%, transparent 70%),
radial-gradient(circle at 85% 15%, rgba(45, 90, 39, 0.08) 0%, transparent 70%),
radial-gradient(circle at 35% 35%, rgba(144, 205, 144, 0.1) 0%, transparent 50%),
radial-gradient(circle at 65% 65%, rgba(45, 90, 39, 0.05) 0%, transparent 50%);
}
/* 电脑端增强模糊效果 */
.input-section,
.result-section {
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
}
.format-group,
.property-item,
.palette-item,
.accessibility-item {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
}
/* 深色模式支持（如果用户系统设置为深色模式） */
@media (prefers-color-scheme: dark) {
body {
background: linear-gradient(135deg, #1a2e1a 0%, #0f1f0f 50%, #1a2e1a 100%);
}
.container::before {
background-image:
radial-gradient(circle at 20% 80%, rgba(144, 205, 144, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(45, 90, 39, 0.03) 0%, transparent 50%);
}
.input-section,
.result-section {
background: rgba(26, 46, 26, 0.9);
}
.format-group,
.property-item,
.palette-item,
.accessibility-item,
.color-preview {
background: rgba(26, 46, 26, 0.6);
}
.input-group input,
.input-group select {
background: rgba(26, 46, 26, 0.8);
color: #e8f5e8;
border-color: rgba(144, 205, 144, 0.3);
}
.format-group p {
background: rgba(15, 31, 15, 0.8);
color: #e8f5e8;
}
}

187
frontend/60sapi/实用功能/随机颜色/index.html Normal file
View File

@@ -0,0 +1,187 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>随机颜色/颜色转换工具</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="background.css">
</head>
<body>
<div class="container">
<header class="header">
<h1>随机颜色/颜色转换工具</h1>
<p class="subtitle">获取随机颜色或转换指定颜色格式</p>
</header>
<main class="main-content">
<div class="input-section">
<div class="input-group">
<label for="colorInput">输入颜色值（可选）:</label>
<input type="text" id="colorInput" placeholder="例如: #33AAFF">
</div>
<div class="input-group">
<label for="encodingSelect">输出格式:</label>
<select id="encodingSelect">
<option value="json">JSON</option>
<option value="text">文本</option>
<option value="html">HTML</option>
</select>
</div>
<div class="button-group">
<button id="randomBtn" class="btn btn-primary">获取随机颜色</button>
<button id="convertBtn" class="btn btn-secondary">转换颜色</button>
</div>
</div>
<div class="result-section">
<div class="color-preview">
<div id="colorDisplay" class="color-box"></div>
<div class="color-info">
<h3 id="colorName">颜色名称</h3>
<p id="hexValue">#000000</p>
</div>
</div>
<div class="color-formats">
<div class="format-group">
<h4>RGB</h4>
<div class="format-values">
<span id="rgbR">0</span>
<span id="rgbG">0</span>
<span id="rgbB">0</span>
</div>
<p id="rgbString">rgb(0, 0, 0)</p>
</div>
<div class="format-group">
<h4>HSL</h4>
<div class="format-values">
<span id="hslH">0°</span>
<span id="hslS">0%</span>
<span id="hslL">0%</span>
</div>
<p id="hslString">hsl(0, 0%, 0%)</p>
</div>
<div class="format-group">
<h4>HSV</h4>
<div class="format-values">
<span id="hsvH">0°</span>
<span id="hsvS">0%</span>
<span id="hsvV">0%</span>
</div>
<p id="hsvString">hsv(0, 0%, 0%)</p>
</div>
<div class="format-group">
<h4>CMYK</h4>
<div class="format-values">
<span id="cmykC">0%</span>
<span id="cmykM">0%</span>
<span id="cmykY">0%</span>
<span id="cmykK">0%</span>
</div>
<p id="cmykString">cmyk(0%, 0%, 0%, 0%)</p>
</div>
<div class="format-group">
<h4>LAB</h4>
<div class="format-values">
<span id="labL">0</span>
<span id="labA">0</span>
<span id="labB">0</span>
</div>
<p id="labString">lab(0, 0, 0)</p>
</div>
</div>
<div class="color-properties">
<div class="property-item">
<label>亮度:</label>
<span id="brightness">0</span>
</div>
<div class="property-item">
<label>对比度 (白色):</label>
<span id="contrastWhite">0</span>
</div>
<div class="property-item">
<label>对比度 (黑色):</label>
<span id="contrastBlack">0</span>
</div>
<div class="property-item">
<label>最佳文字颜色:</label>
<span id="bestTextColor">#000000</span>
</div>
</div>
<div class="color-palette">
<h4>配色方案</h4>
<div class="palette-group">
<div class="palette-item">
<label>互补色:</label>
<div id="complementary" class="color-sample"></div>
<span id="complementaryHex">#000000</span>
</div>
<div class="palette-item">
<label>类似色:</label>
<div class="analogous-colors">
<div id="analogous1" class="color-sample"></div>
<div id="analogous2" class="color-sample"></div>
</div>
<div class="analogous-hex">
<span id="analogous1Hex">#000000</span>
<span id="analogous2Hex">#000000</span>
</div>
</div>
<div class="palette-item">
<label>三角色:</label>
<div class="triadic-colors">
<div id="triadic1" class="color-sample"></div>
<div id="triadic2" class="color-sample"></div>
</div>
<div class="triadic-hex">
<span id="triadic1Hex">#000000</span>
<span id="triadic2Hex">#000000</span>
</div>
</div>
</div>
</div>
<div class="accessibility-info">
<h4>无障碍性</h4>
<div class="accessibility-grid">
<div class="accessibility-item">
<span>AA 普通文本:</span>
<span id="aaNormal" class="status">否</span>
</div>
<div class="accessibility-item">
<span>AA 大文本:</span>
<span id="aaLarge" class="status">否</span>
</div>
<div class="accessibility-item">
<span>AAA 普通文本:</span>
<span id="aaaNormal" class="status">否</span>
</div>
<div class="accessibility-item">
<span>AAA 大文本:</span>
<span id="aaaLarge" class="status">否</span>
</div>
</div>
</div>
</div>
<div class="loading" id="loading" style="display: none;">
<div class="spinner"></div>
<p>正在获取颜色信息...</p>
</div>
<div class="error" id="error" style="display: none;">
<p id="errorMessage">获取颜色信息失败，请稍后重试</p>
</div>
</main>
</div>
<script src="script.js"></script>
</body>
</html>

426
frontend/60sapi/实用功能/随机颜色/script.js Normal file
View File

@@ -0,0 +1,426 @@
// 随机颜色/颜色转换工具 JavaScript
class ColorTool {
constructor() {
this.apiUrl = 'https://60s.api.shumengya.top/v2/color';
this.init();
}
init() {
this.bindEvents();
this.hideResultSection();
}
bindEvents() {
const randomBtn = document.getElementById('randomBtn');
const convertBtn = document.getElementById('convertBtn');
const colorInput = document.getElementById('colorInput');
randomBtn.addEventListener('click', () => this.getRandomColor());
convertBtn.addEventListener('click', () => this.convertColor());
// 回车键支持
colorInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
this.convertColor();
}
});
}
hideResultSection() {
const resultSection = document.querySelector('.result-section');
resultSection.style.display = 'none';
}
showResultSection() {
const resultSection = document.querySelector('.result-section');
resultSection.style.display = 'block';
}
showLoading() {
const loading = document.getElementById('loading');
const error = document.getElementById('error');
loading.style.display = 'block';
error.style.display = 'none';
this.hideResultSection();
}
hideLoading() {
const loading = document.getElementById('loading');
loading.style.display = 'none';
}
showError(message) {
const error = document.getElementById('error');
const errorMessage = document.getElementById('errorMessage');
const loading = document.getElementById('loading');
loading.style.display = 'none';
errorMessage.textContent = message;
error.style.display = 'block';
this.hideResultSection();
}
hideError() {
const error = document.getElementById('error');
error.style.display = 'none';
}
async getRandomColor() {
try {
this.showLoading();
const encoding = document.getElementById('encodingSelect').value;
const url = `${this.apiUrl}?encoding=${encoding}`;
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
const data = await response.json();
if (data.code === 200) {
this.displayColorData(data.data);
this.hideLoading();
this.hideError();
this.showResultSection();
} else {
throw new Error(data.message || '获取颜色信息失败');
}
} catch (error) {
console.error('获取随机颜色失败:', error);
this.showError(`获取随机颜色失败: ${error.message}`);
}
}
async convertColor() {
const colorInput = document.getElementById('colorInput');
const colorValue = colorInput.value.trim();
if (!colorValue) {
this.showError('请输入要转换的颜色值');
return;
}
// 简单的颜色格式验证
if (!this.isValidColor(colorValue)) {
this.showError('请输入有效的颜色值（如 #33AAFF）');
return;
}
try {
this.showLoading();
const encoding = document.getElementById('encodingSelect').value;
const url = `${this.apiUrl}?color=${encodeURIComponent(colorValue)}&encoding=${encoding}`;
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
const data = await response.json();
if (data.code === 200) {
this.displayColorData(data.data);
this.hideLoading();
this.hideError();
this.showResultSection();
} else {
throw new Error(data.message || '转换颜色失败');
}
} catch (error) {
console.error('转换颜色失败:', error);
this.showError(`转换颜色失败: ${error.message}`);
}
}
isValidColor(color) {
// 支持十六进制颜色格式
const hexPattern = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
// 支持RGB格式
const rgbPattern = /^rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)$/;
// 支持HSL格式
const hslPattern = /^hsl\(\s*\d+\s*,\s*\d+%\s*,\s*\d+%\s*\)$/;
return hexPattern.test(color) || rgbPattern.test(color) || hslPattern.test(color);
}
displayColorData(data) {
// 显示主要颜色信息
this.updateColorDisplay(data);
// 显示各种格式
this.updateColorFormats(data);
// 显示颜色属性
this.updateColorProperties(data);
// 显示配色方案
this.updateColorPalette(data);
// 显示无障碍性信息
this.updateAccessibilityInfo(data);
}
updateColorDisplay(data) {
const colorDisplay = document.getElementById('colorDisplay');
const colorName = document.getElementById('colorName');
const hexValue = document.getElementById('hexValue');
colorDisplay.style.backgroundColor = data.hex;
colorName.textContent = data.name || '未知颜色';
hexValue.textContent = data.hex;
}
updateColorFormats(data) {
// RGB
if (data.rgb) {
document.getElementById('rgbR').textContent = data.rgb.r;
document.getElementById('rgbG').textContent = data.rgb.g;
document.getElementById('rgbB').textContent = data.rgb.b;
document.getElementById('rgbString').textContent = data.rgb.string;
}
// HSL
if (data.hsl) {
document.getElementById('hslH').textContent = data.hsl.h + '°';
document.getElementById('hslS').textContent = data.hsl.s + '%';
document.getElementById('hslL').textContent = data.hsl.l + '%';
document.getElementById('hslString').textContent = data.hsl.string;
}
// HSV
if (data.hsv) {
document.getElementById('hsvH').textContent = data.hsv.h + '°';
document.getElementById('hsvS').textContent = data.hsv.s + '%';
document.getElementById('hsvV').textContent = data.hsv.v + '%';
document.getElementById('hsvString').textContent = data.hsv.string;
}
// CMYK
if (data.cmyk) {
document.getElementById('cmykC').textContent = data.cmyk.c + '%';
document.getElementById('cmykM').textContent = data.cmyk.m + '%';
document.getElementById('cmykY').textContent = data.cmyk.y + '%';
document.getElementById('cmykK').textContent = data.cmyk.k + '%';
document.getElementById('cmykString').textContent = data.cmyk.string;
}
// LAB
if (data.lab) {
document.getElementById('labL').textContent = data.lab.l;
document.getElementById('labA').textContent = data.lab.a;
document.getElementById('labB').textContent = data.lab.b;
document.getElementById('labString').textContent = data.lab.string;
}
}
updateColorProperties(data) {
// 亮度
if (data.brightness !== undefined) {
document.getElementById('brightness').textContent = data.brightness.toFixed(2);
}
// 对比度
if (data.contrast) {
document.getElementById('contrastWhite').textContent = data.contrast.white.toFixed(2);
document.getElementById('contrastBlack').textContent = data.contrast.black.toFixed(2);
}
// 最佳文字颜色
if (data.accessibility && data.accessibility.best_text_color) {
const bestTextColor = document.getElementById('bestTextColor');
bestTextColor.textContent = data.accessibility.best_text_color;
bestTextColor.style.color = data.accessibility.best_text_color;
}
}
updateColorPalette(data) {
// 互补色
if (data.complementary) {
const complementary = document.getElementById('complementary');
const complementaryHex = document.getElementById('complementaryHex');
complementary.style.backgroundColor = data.complementary;
complementaryHex.textContent = data.complementary;
}
// 类似色
if (data.analogous && data.analogous.length >= 2) {
const analogous1 = document.getElementById('analogous1');
const analogous2 = document.getElementById('analogous2');
const analogous1Hex = document.getElementById('analogous1Hex');
const analogous2Hex = document.getElementById('analogous2Hex');
analogous1.style.backgroundColor = data.analogous[0];
analogous2.style.backgroundColor = data.analogous[1];
analogous1Hex.textContent = data.analogous[0];
analogous2Hex.textContent = data.analogous[1];
}
// 三角色
if (data.triadic && data.triadic.length >= 2) {
const triadic1 = document.getElementById('triadic1');
const triadic2 = document.getElementById('triadic2');
const triadic1Hex = document.getElementById('triadic1Hex');
const triadic2Hex = document.getElementById('triadic2Hex');
triadic1.style.backgroundColor = data.triadic[0];
triadic2.style.backgroundColor = data.triadic[1];
triadic1Hex.textContent = data.triadic[0];
triadic2Hex.textContent = data.triadic[1];
}
}
updateAccessibilityInfo(data) {
if (data.accessibility) {
const aaNormal = document.getElementById('aaNormal');
const aaLarge = document.getElementById('aaLarge');
const aaaNormal = document.getElementById('aaaNormal');
const aaaLarge = document.getElementById('aaaLarge');
this.updateAccessibilityStatus(aaNormal, data.accessibility.aa_normal);
this.updateAccessibilityStatus(aaLarge, data.accessibility.aa_large);
this.updateAccessibilityStatus(aaaNormal, data.accessibility.aaa_normal);
this.updateAccessibilityStatus(aaaLarge, data.accessibility.aaa_large);
}
}
updateAccessibilityStatus(element, status) {
element.textContent = status ? '通过' : '未通过';
element.className = 'status ' + (status ? 'pass' : 'fail');
}
// 复制颜色值到剪贴板
copyToClipboard(text) {
if (navigator.clipboard) {
navigator.clipboard.writeText(text).then(() => {
this.showToast('已复制到剪贴板');
}).catch(err => {
console.error('复制失败:', err);
this.fallbackCopyTextToClipboard(text);
});
} else {
this.fallbackCopyTextToClipboard(text);
}
}
fallbackCopyTextToClipboard(text) {
const textArea = document.createElement('textarea');
textArea.value = text;
textArea.style.top = '0';
textArea.style.left = '0';
textArea.style.position = 'fixed';
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
const successful = document.execCommand('copy');
if (successful) {
this.showToast('已复制到剪贴板');
} else {
this.showToast('复制失败');
}
} catch (err) {
console.error('复制失败:', err);
this.showToast('复制失败');
}
document.body.removeChild(textArea);
}
showToast(message) {
// 创建简单的提示框
const toast = document.createElement('div');
toast.textContent = message;
toast.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
background: #2d5a27;
color: white;
padding: 12px 20px;
border-radius: 8px;
z-index: 1000;
font-size: 14px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
animation: slideIn 0.3s ease;
`;
// 添加动画样式
const style = document.createElement('style');
style.textContent = `
@keyframes slideIn {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
`;
document.head.appendChild(style);
document.body.appendChild(toast);
setTimeout(() => {
toast.style.animation = 'slideIn 0.3s ease reverse';
setTimeout(() => {
document.body.removeChild(toast);
document.head.removeChild(style);
}, 300);
}, 2000);
}
}
// 添加点击复制功能
function addCopyListeners() {
const colorTool = window.colorTool;
// 为所有颜色值添加点击复制功能
document.addEventListener('click', (e) => {
const target = e.target;
// 检查是否点击了颜色值相关元素
if (target.id === 'hexValue' ||
target.id === 'rgbString' ||
target.id === 'hslString' ||
target.id === 'hsvString' ||
target.id === 'cmykString' ||
target.id === 'labString' ||
target.id === 'complementaryHex' ||
target.id === 'analogous1Hex' ||
target.id === 'analogous2Hex' ||
target.id === 'triadic1Hex' ||
target.id === 'triadic2Hex') {
const text = target.textContent;
if (text && colorTool) {
colorTool.copyToClipboard(text);
}
}
});
}
// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
window.colorTool = new ColorTool();
addCopyListeners();
// 添加复制提示
const style = document.createElement('style');
style.textContent = `
#hexValue, #rgbString, #hslString, #hsvString, #cmykString, #labString,
#complementaryHex, #analogous1Hex, #analogous2Hex, #triadic1Hex, #triadic2Hex {
cursor: pointer;
transition: all 0.2s ease;
}
#hexValue:hover, #rgbString:hover, #hslString:hover, #hsvString:hover,
#cmykString:hover, #labString:hover, #complementaryHex:hover,
#analogous1Hex:hover, #analogous2Hex:hover, #triadic1Hex:hover, #triadic2Hex:hover {
background: rgba(45, 90, 39, 0.1);
border-radius: 4px;
padding: 2px 4px;
margin: -2px -4px;
}
`;
document.head.appendChild(style);
});

637
frontend/60sapi/实用功能/随机颜色/styles.css Normal file
View File

@@ -0,0 +1,637 @@
/* 基础样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
line-height: 1.6;
color: #2d3748;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
min-height: 100vh;
}
/* 头部样式 */
.header {
text-align: center;
margin-bottom: 30px;
padding: 20px 0;
}
.header h1 {
font-size: 2rem;
color: #2d5a27;
margin-bottom: 10px;
font-weight: 600;
}
.subtitle {
color: #4a5568;
font-size: 1rem;
opacity: 0.8;
}
/* 主要内容区域 */
.main-content {
display: flex;
flex-direction: column;
gap: 30px;
}
/* 输入区域 */
.input-section {
background: rgba(255, 255, 255, 0.9);
padding: 25px;
border-radius: 15px;
box-shadow: 0 4px 20px rgba(45, 90, 39, 0.1);
border: 1px solid rgba(144, 205, 144, 0.3);
}
.input-group {
margin-bottom: 20px;
}
.input-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #2d5a27;
font-size: 0.95rem;
}
.input-group input,
.input-group select {
width: 100%;
padding: 12px 15px;
border: 2px solid #90cd90;
border-radius: 10px;
font-size: 1rem;
transition: all 0.3s ease;
background: #f8fff8;
}
.input-group input:focus,
.input-group select:focus {
outline: none;
border-color: #2d5a27;
box-shadow: 0 0 0 3px rgba(45, 90, 39, 0.1);
background: #ffffff;
}
.button-group {
display: flex;
gap: 15px;
margin-top: 25px;
}
.btn {
flex: 1;
padding: 15px 20px;
border: none;
border-radius: 10px;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
text-transform: none;
}
.btn-primary {
background: linear-gradient(135deg, #2d5a27, #4a7c59);
color: white;
}
.btn-primary:hover {
background: linear-gradient(135deg, #1e3a1a, #2d5a27);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(45, 90, 39, 0.3);
}
.btn-secondary {
background: linear-gradient(135deg, #90cd90, #a8d8a8);
color: #2d5a27;
}
.btn-secondary:hover {
background: linear-gradient(135deg, #7bb87b, #90cd90);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(144, 205, 144, 0.4);
}
/* 结果展示区域 */
.result-section {
background: rgba(255, 255, 255, 0.9);
padding: 25px;
border-radius: 15px;
box-shadow: 0 4px 20px rgba(45, 90, 39, 0.1);
border: 1px solid rgba(144, 205, 144, 0.3);
}
/* 颜色预览 */
.color-preview {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 30px;
padding: 20px;
background: #f8fff8;
border-radius: 12px;
border: 1px solid rgba(144, 205, 144, 0.2);
}
.color-box {
width: 80px;
height: 80px;
border-radius: 12px;
border: 3px solid #ffffff;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
flex-shrink: 0;
}
.color-info h3 {
color: #2d5a27;
margin-bottom: 5px;
font-size: 1.2rem;
}
.color-info p {
color: #4a5568;
font-size: 1.1rem;
font-weight: 500;
font-family: 'Courier New', monospace;
}
/* 颜色格式展示 */
.color-formats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.format-group {
background: #f8fff8;
padding: 15px;
border-radius: 10px;
border: 1px solid rgba(144, 205, 144, 0.2);
}
.format-group h4 {
color: #2d5a27;
margin-bottom: 10px;
font-size: 1rem;
font-weight: 600;
}
.format-values {
display: flex;
gap: 8px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.format-values span {
background: #90cd90;
color: #2d5a27;
padding: 4px 8px;
border-radius: 6px;
font-size: 0.85rem;
font-weight: 500;
}
.format-group p {
font-family: 'Courier New', monospace;
color: #4a5568;
font-size: 0.9rem;
background: #ffffff;
padding: 8px;
border-radius: 6px;
border: 1px solid rgba(144, 205, 144, 0.2);
}
/* 颜色属性 */
.color-properties {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-bottom: 30px;
}
.property-item {
display: flex;
justify-content: space-between;
align-items: center;
background: #f8fff8;
padding: 12px 15px;
border-radius: 8px;
border: 1px solid rgba(144, 205, 144, 0.2);
}
.property-item label {
color: #2d5a27;
font-weight: 500;
font-size: 0.9rem;
}
.property-item span {
color: #4a5568;
font-weight: 600;
font-family: 'Courier New', monospace;
}
/* 配色方案 */
.color-palette {
margin-bottom: 30px;
}
.color-palette h4 {
color: #2d5a27;
margin-bottom: 15px;
font-size: 1.1rem;
font-weight: 600;
}
.palette-group {
display: flex;
flex-direction: column;
gap: 15px;
}
.palette-item {
background: #f8fff8;
padding: 15px;
border-radius: 10px;
border: 1px solid rgba(144, 205, 144, 0.2);
}
.palette-item label {
display: block;
color: #2d5a27;
font-weight: 500;
margin-bottom: 10px;
font-size: 0.95rem;
}
.color-sample {
width: 40px;
height: 40px;
border-radius: 8px;
border: 2px solid #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: inline-block;
margin-right: 10px;
}
.analogous-colors,
.triadic-colors {
display: flex;
gap: 10px;
margin-bottom: 8px;
}
.analogous-hex,
.triadic-hex {
display: flex;
gap: 10px;
font-family: 'Courier New', monospace;
font-size: 0.85rem;
color: #4a5568;
}
/* 无障碍性信息 */
.accessibility-info h4 {
color: #2d5a27;
margin-bottom: 15px;
font-size: 1.1rem;
font-weight: 600;
}
.accessibility-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
.accessibility-item {
display: flex;
justify-content: space-between;
align-items: center;
background: #f8fff8;
padding: 10px 15px;
border-radius: 8px;
border: 1px solid rgba(144, 205, 144, 0.2);
}
.accessibility-item span:first-child {
color: #2d5a27;
font-weight: 500;
font-size: 0.9rem;
}
.status {
padding: 4px 8px;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 600;
}
.status.pass {
background: #90cd90;
color: #2d5a27;
}
.status.fail {
background: #ffcccb;
color: #d32f2f;
}
/* 加载和错误状态 */
.loading,
.error {
text-align: center;
padding: 40px 20px;
border-radius: 12px;
margin: 20px 0;
}
.loading {
background: rgba(144, 205, 144, 0.1);
border: 1px solid rgba(144, 205, 144, 0.3);
}
.error {
background: rgba(255, 204, 203, 0.3);
border: 1px solid rgba(211, 47, 47, 0.3);
}
.spinner {
width: 40px;
height: 40px;
border: 4px solid rgba(144, 205, 144, 0.3);
border-top: 4px solid #2d5a27;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 15px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading p {
color: #2d5a27;
font-weight: 500;
}
.error p {
color: #d32f2f;
font-weight: 500;
}
/* 平板端适配 (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
.container {
padding: 30px;
}
.header h1 {
font-size: 2.5rem;
}
.main-content {
gap: 35px;
}
.input-section,
.result-section {
padding: 30px;
}
.color-preview {
gap: 25px;
}
.color-box {
width: 100px;
height: 100px;
}
.color-formats {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.palette-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
}
/* 电脑端适配 (1025px+) */
@media (min-width: 1025px) {
.container {
padding: 40px;
}
.header h1 {
font-size: 3rem;
}
.subtitle {
font-size: 1.1rem;
}
.main-content {
gap: 40px;
}
.input-section,
.result-section {
padding: 35px;
}
.color-preview {
gap: 30px;
padding: 25px;
}
.color-box {
width: 120px;
height: 120px;
}
.color-info h3 {
font-size: 1.4rem;
}
.color-info p {
font-size: 1.2rem;
}
.color-formats {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
}
.format-group {
padding: 20px;
}
.palette-group {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
.button-group {
max-width: 500px;
margin: 25px auto 0;
}
.btn {
padding: 18px 25px;
font-size: 1.1rem;
}
}
/* 手机端优化 (最高优先级) */
@media (max-width: 767px) {
.container {
padding: 15px;
}
.header {
margin-bottom: 25px;
padding: 15px 0;
}
.header h1 {
font-size: 1.8rem;
}
.subtitle {
font-size: 0.9rem;
}
.main-content {
gap: 25px;
}
.input-section,
.result-section {
padding: 20px;
border-radius: 12px;
}
.input-group {
margin-bottom: 18px;
}
.input-group input,
.input-group select {
padding: 14px 12px;
font-size: 16px; /* 防止iOS缩放 */
}
.button-group {
flex-direction: column;
gap: 12px;
margin-top: 20px;
}
.btn {
padding: 16px 20px;
font-size: 1rem;
border-radius: 8px;
}
.color-preview {
flex-direction: column;
text-align: center;
gap: 15px;
padding: 15px;
}
.color-box {
width: 100px;
height: 100px;
margin: 0 auto;
}
.color-formats {
grid-template-columns: 1fr;
gap: 15px;
}
.format-group {
padding: 12px;
}
.format-values {
justify-content: center;
}
.color-properties {
grid-template-columns: 1fr;
gap: 12px;
}
.property-item {
flex-direction: column;
gap: 5px;
text-align: center;
padding: 15px;
}
.palette-group {
gap: 12px;
}
.palette-item {
padding: 12px;
text-align: center;
}
.analogous-colors,
.triadic-colors {
justify-content: center;
}
.analogous-hex,
.triadic-hex {
justify-content: center;
flex-wrap: wrap;
}
.accessibility-grid {
grid-template-columns: 1fr;
gap: 8px;
}
.accessibility-item {
flex-direction: column;
gap: 5px;
text-align: center;
padding: 12px;
}
.loading,
.error {
padding: 30px 15px;
margin: 15px 0;
}
.spinner {
width: 35px;
height: 35px;
}
}

60
frontend/60sapi/实用功能/随机颜色/返回接口.json Normal file
View File

@@ -0,0 +1,60 @@
{
"code": 200,
"message": "获取成功。数据来自官方/权威源头，以确保稳定与实时。开源地址 https://github.com/vikiboss/60s，反馈群 595941841",
"data": {
"hex": "#A59619",
"name": "红色系",
"rgb": {
"r": 165,
"g": 150,
"b": 25,
"string": "rgb(165, 150, 25)"
},
"hsl": {
"h": 54,
"s": 74,
"l": 37,
"string": "hsl(54, 74%, 37%)"
},
"hsv": {
"h": 54,
"s": 85,
"v": 65,
"string": "hsv(54, 85%, 65%)"
},
"cmyk": {
"c": 0,
"m": 9,
"y": 85,
"k": 35,
"string": "cmyk(0%, 9%, 85%, 35%)"
},
"lab": {
"l": 62,
"a": -7,
"b": 61,
"string": "lab(62, -7, 61)"
},
"brightness": 140.235,
"contrast": {
"white": 3.01,
"black": 6.98
},
"accessibility": {
"aa_normal": true,
"aa_large": true,
"aaa_normal": false,
"aaa_large": true,
"best_text_color": "#000000"
},
"complementary": "#1926A4",
"analogous": [
"#A45019",
"#6CA419"
],
"triadic": [
"#19A496",
"#9619A4"
]
}
}