|
|
<!DOCTYPE html> |
|
|
<html lang="zh-CN"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>随机图片服务 | 为您的项目提供高质量随机图片</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%); |
|
|
} |
|
|
.api-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.api-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
.stat-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.stat-card:hover { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
.preview-image { |
|
|
height: 300px; |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
transition: all 0.5s ease; |
|
|
} |
|
|
.preview-image:hover { |
|
|
transform: scale(1.02); |
|
|
} |
|
|
.nav-link { |
|
|
position: relative; |
|
|
} |
|
|
.nav-link::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
background-color: #a777e3; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
.nav-link:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans antialiased text-gray-800 bg-gray-50"> |
|
|
|
|
|
<nav class="bg-white shadow-sm"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<i class="fas fa-images text-purple-600 text-2xl mr-2"></i> |
|
|
<span class="text-xl font-bold text-gray-900">随机图片服务</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:space-x-8"> |
|
|
<a href="#features" class="nav-link border-purple-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">服务介绍</a> |
|
|
<a href="#api" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">API 文档</a> |
|
|
<a href="#stats" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">服务统计</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="hero-gradient text-white"> |
|
|
<div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8 text-center"> |
|
|
<h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl"> |
|
|
为您的项目提供美丽的随机图片 |
|
|
</h1> |
|
|
<p class="mt-6 max-w-2xl mx-auto text-xl"> |
|
|
简单、高效的随机图片 API，轻松集成到您的网站或应用中 |
|
|
</p> |
|
|
<div class="mt-10 flex justify-center space-x-4"> |
|
|
<a href="#api" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-purple-700 bg-white hover:bg-gray-50"> |
|
|
开始使用 <i class="fas fa-arrow-down ml-2"></i> |
|
|
</a> |
|
|
<a href="#preview" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-purple-800 bg-opacity-60 hover:bg-opacity-70"> |
|
|
查看示例 <i class="fas fa-eye ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="features" class="py-12 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center"> |
|
|
<h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">服务介绍</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
为什么选择我们的随机图片服务 |
|
|
</p> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
|
|
我们提供高质量的随机图片服务，支持横向和纵向两种图片类型 |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10"> |
|
|
<div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10"> |
|
|
<div class="relative"> |
|
|
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
|
|
<i class="fas fa-bolt"></i> |
|
|
</div> |
|
|
<p class="ml-16 text-lg leading-6 font-medium text-gray-900">极速响应</p> |
|
|
<p class="mt-2 ml-16 text-base text-gray-500"> |
|
|
我们的API经过优化，响应时间极短，确保您的用户获得流畅的体验。 |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
|
|
<i class="fas fa-image"></i> |
|
|
</div> |
|
|
<p class="ml-16 text-lg leading-6 font-medium text-gray-900">高质量图片</p> |
|
|
<p class="mt-2 ml-16 text-base text-gray-500"> |
|
|
所有图片都经过精心挑选，确保高质量和美观，适合各种项目需求。 |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
|
|
<i class="fas fa-laptop-code"></i> |
|
|
</div> |
|
|
<p class="ml-16 text-lg leading-6 font-medium text-gray-900">简单集成</p> |
|
|
<p class="mt-2 ml-16 text-base text-gray-500"> |
|
|
只需一个简单的HTTP请求即可获取随机图片，无需复杂配置。 |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
|
|
<i class="fas fa-server"></i> |
|
|
</div> |
|
|
<p class="ml-16 text-lg leading-6 font-medium text-gray-900">稳定可靠</p> |
|
|
<p class="mt-2 ml-16 text-base text-gray-500"> |
|
|
我们的服务运行在可靠的服务器上，保证高可用性和稳定性。 |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="preview" class="bg-gray-50 py-12"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center mb-8"> |
|
|
<h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">图片预览</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
看看我们的随机图片效果 |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden"> |
|
|
<div id="horizontal-preview" class="preview-image" style="background-image: url('https://api-hrandom-pic.imixc.top/?type=horizontal')"></div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-lg font-medium text-gray-900">随机横向图片</h3> |
|
|
<p class="mt-1 text-sm text-gray-500">适合网页横幅、内容背景等宽屏场景</p> |
|
|
<div class="mt-4"> |
|
|
<button onclick="refreshPreview('horizontal')" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700"> |
|
|
<i class="fas fa-sync-alt mr-2"></i> 刷新预览 |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden"> |
|
|
<div id="vertical-preview" class="preview-image" style="background-image: url('https://api-hrandom-pic.imixc.top/?type=vertical')"></div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-lg font-medium text-gray-900">随机纵向图片</h3> |
|
|
<p class="mt-1 text-sm text-gray-500">适合移动端、社交媒体等竖屏场景</p> |
|
|
<div class="mt-4"> |
|
|
<button onclick="refreshPreview('vertical')" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700"> |
|
|
<i class="fas fa-sync-alt mr-2"></i> 刷新预览 |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="api" class="py-12 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center mb-12"> |
|
|
<h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">API 文档</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
简单易用的API接口 |
|
|
</p> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
|
|
只需一个HTTP请求即可获取随机图片 |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
<div class="api-card bg-gray-50 p-6 rounded-lg shadow"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-purple-500 text-white"> |
|
|
<i class="fas fa-arrows-alt-h"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg font-medium text-gray-900">横向图片</h3> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-800 rounded-md p-4 overflow-x-auto"> |
|
|
<code class="text-gray-200 text-sm"> |
|
|
GET https://api-hrandom-pic.imixc.top/?type=horizontal |
|
|
</code> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<button onclick="copyToClipboard('https://api-hrandom-pic.imixc.top/?type=horizontal')" class="inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded text-purple-700 bg-purple-100 hover:bg-purple-200"> |
|
|
<i class="fas fa-copy mr-1"></i> 复制链接 |
|
|
</button> |
|
|
<button onclick="testApi('horizontal')" class="ml-2 inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded text-white bg-purple-600 hover:bg-purple-700"> |
|
|
<i class="fas fa-play mr-1"></i> 测试API |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="api-card bg-gray-50 p-6 rounded-lg shadow"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-purple-500 text-white"> |
|
|
<i class="fas fa-arrows-alt-v"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg font-medium text-gray-900">纵向图片</h3> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-800 rounded-md p-4 overflow-x-auto"> |
|
|
<code class="text-gray-200 text-sm"> |
|
|
GET https://api-hrandom-pic.imixc.top/?type=vertical |
|
|
</code> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<button onclick="copyToClipboard('https://api-hrandom-pic.imixc.top/?type=vertical')" class="inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded text-purple-700 bg-purple-100 hover:bg-purple-200"> |
|
|
<i class="fas fa-copy mr-1"></i> 复制链接 |
|
|
</button> |
|
|
<button onclick="testApi('vertical')" class="ml-2 inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded text-white bg-purple-600 hover:bg-purple-700"> |
|
|
<i class="fas fa-play mr-1"></i> 测试API |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="api-card bg-gray-50 p-6 rounded-lg shadow"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-purple-500 text-white"> |
|
|
<i class="fas fa-code"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg font-medium text-gray-900">使用示例</h3> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-800 rounded-md p-4 overflow-x-auto"> |
|
|
<pre class="text-gray-200 text-xs"> |
|
|
<!-- HTML中使用 --> |
|
|
<img src="https://api-hrandom-pic.imixc.top/?type=horizontal" |
|
|
alt="随机横向图片"> |
|
|
|
|
|
/* CSS中使用 */ |
|
|
.bg-image { |
|
|
background-image: url('https://api-hrandom-pic.imixc.top/?type=vertical&raw=1'); |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
}</pre> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<button onclick="copyToClipboard('<img src=\'https://api-hrandom-pic.imixc.top/?type=horizontal\' alt=\'随机横向图片\'>')" class="inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded text-purple-700 bg-purple-100 hover:bg-purple-200"> |
|
|
<i class="fas fa-copy mr-1"></i> 复制HTML |
|
|
</button> |
|
|
<button onclick="copyToClipboard('.bg-image {\n background-image: url(\'https://api-hrandom-pic.imixc.top/?type=vertical&raw=1\');\n background-size: cover;\n background-position: center;\n}')" class="ml-2 inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded text-purple-700 bg-purple-100 hover:bg-purple-200"> |
|
|
<i class="fas fa-copy mr-1"></i> 复制CSS |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="stats" class="py-12 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center mb-12"> |
|
|
<h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">服务统计</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
我们的图片资源库 |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
<div class="stat-card bg-white p-6 rounded-lg shadow text-center"> |
|
|
<div class="mx-auto flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600"> |
|
|
<i class="fas fa-arrows-alt-h text-xl"></i> |
|
|
</div> |
|
|
<h3 class="mt-4 text-lg font-medium text-gray-900">横向图片</h3> |
|
|
<p class="mt-2 text-4xl font-extrabold text-purple-600">105</p> |
|
|
<p class="mt-1 text-sm text-gray-500">张高质量横向图片</p> |
|
|
</div> |
|
|
|
|
|
<div class="stat-card bg-white p-6 rounded-lg shadow text-center"> |
|
|
<div class="mx-auto flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600"> |
|
|
<i class="fas fa-arrows-alt-v text-xl"></i> |
|
|
</div> |
|
|
<h3 class="mt-4 text-lg font-medium text-gray-900">纵向图片</h3> |
|
|
<p class="mt-2 text-4xl font-extrabold text-purple-600">1</p> |
|
|
<p class="mt-1 text-sm text-gray-500">张高质量纵向图片</p> |
|
|
</div> |
|
|
|
|
|
<div class="stat-card bg-white p-6 rounded-lg shadow text-center"> |
|
|
<div class="mx-auto flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600"> |
|
|
<i class="fas fa-database text-xl"></i> |
|
|
</div> |
|
|
<h3 class="mt-4 text-lg font-medium text-gray-900">总图片数量</h3> |
|
|
<p class="mt-2 text-4xl font-extrabold text-purple-600">106</p> |
|
|
<p class="mt-1 text-sm text-gray-500">张高质量随机图片</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800"> |
|
|
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-white text-lg font-medium mb-4">随机图片服务</h3> |
|
|
<p class="text-gray-300 text-sm"> |
|
|
一个简单、高效的随机图片 API，为您的项目提供美丽的随机图片资源。 |
|
|
</p> |
|
|
<div class="mt-4 flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-github text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-twitter text-xl"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-white text-lg font-medium mb-4">快速链接</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#features" class="text-gray-300 hover:text-white text-sm">服务介绍</a></li> |
|
|
<li><a href="#api" class="text-gray-300 hover:text-white text-sm">API文档</a></li> |
|
|
<li><a href="#stats" class="text-gray-300 hover:text-white text-sm">服务统计</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-white text-lg font-medium mb-4">联系信息</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li class="text-gray-300 text-sm">版本: 1.0.0</li> |
|
|
<li class="text-gray-300 text-sm">© 2025 随机图片服务</li> |
|
|
<li class="text-gray-300 text-sm">所有图片资源均来自网络</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
function refreshPreview(type) { |
|
|
const element = document.getElementById(`${type}-preview`); |
|
|
element.style.backgroundImage = `url('https://api-hrandom-pic.imixc.top/?type=${type}&t=${new Date().getTime()}')`; |
|
|
|
|
|
|
|
|
element.style.opacity = '0.5'; |
|
|
setTimeout(() => { |
|
|
element.style.opacity = '1'; |
|
|
}, 300); |
|
|
} |
|
|
|
|
|
function copyToClipboard(text) { |
|
|
navigator.clipboard.writeText(text).then(() => { |
|
|
alert('已复制到剪贴板！'); |
|
|
}).catch(err => { |
|
|
console.error('复制失败: ', err); |
|
|
}); |
|
|
} |
|
|
|
|
|
function testApi(type) { |
|
|
window.open(`https://api-hrandom-pic.imixc.top/?type=${type}`, '_blank'); |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ixingchen/pic" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
