159 lines
8.9 KiB
HTML
159 lines
8.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ResourceShare V1.3.7.2 - Demo Showcase</title>
|
|
<script src="https://cdn.gvsds.com/ResourceShare/ResourceShare-1.3.7.4.min.js"></script>
|
|
<resource-share type="script" src="https://tailwind.gvsds.com"></resource-share>
|
|
<resource-share type="style" src="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap"></resource-share>
|
|
<style>
|
|
body {
|
|
background-color: #f3f4f6; /* 浅灰色背景 */
|
|
font-family: 'Inter', sans-serif;
|
|
margin: 0;
|
|
overflow-x: hidden;
|
|
transition: background-color 0.5s ease;
|
|
}
|
|
body.dark-mode {
|
|
background-color: #0f172a;
|
|
}
|
|
.pre-tailwind-loader {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100vh;
|
|
color: #666;
|
|
font-family: monospace;
|
|
z-index: 10;
|
|
position: relative;
|
|
}
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
#app-content {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
|
|
}
|
|
#app-content.active {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main id="app-content" class="min-h-screen flex items-center justify-center p-4 relative">
|
|
<div class="absolute top-0 left-0 w-full h-full overflow-hidden -z-10 pointer-events-none">
|
|
<div class="absolute top-10 left-10 w-72 h-72 bg-purple-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob"></div>
|
|
<div class="absolute top-10 right-10 w-72 h-72 bg-yellow-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000"></div>
|
|
<div class="absolute -bottom-8 left-20 w-72 h-72 bg-pink-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000"></div>
|
|
</div>
|
|
<div class="w-full max-w-md bg-white/80 dark:bg-slate-800/80 backdrop-blur-xl border border-white/50 dark:border-slate-700/50 shadow-2xl rounded-2xl overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-purple-500/20">
|
|
<div class="h-2 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500"></div>
|
|
<div class="p-8 text-center">
|
|
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 text-white mb-6 shadow-lg shadow-indigo-500/30 animate-fade-in-up">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
</div>
|
|
<h1 class="text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-slate-900 to-slate-600 dark:from-white dark:to-slate-300 mb-2 tracking-tight">
|
|
Hello,
|
|
</h1>
|
|
<h2 class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 mb-6">
|
|
ResourceShare
|
|
</h2>
|
|
<p class="text-slate-500 dark:text-slate-400 mb-8 leading-relaxed">
|
|
当前页面样式由 <span class="font-mono text-xs bg-slate-100 dark:bg-slate-900 px-1 py-0.5 rounded text-indigo-500 dark:text-indigo-400">Tailwind CSS</span> 驱动。<br>
|
|
资源已通过 ResourceShare-V1.3.7.4 系统完成加载。（受限于演示页面，并未能展现本项目的实际作用。实际上页面是降级加载的，展现了本项目的防御性编程这一特点）
|
|
</p>
|
|
<div class="flex justify-center gap-4">
|
|
<button onclick="toggleTheme()" class="group relative px-6 py-2.5 bg-slate-900 dark:bg-white text-white dark:text-slate-900 rounded-lg font-medium text-sm transition-all hover:bg-slate-800 dark:hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-slate-800">
|
|
<span class="flex items-center gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
|
|
</svg>
|
|
切换深色模式
|
|
</span>
|
|
</button>
|
|
<button onclick="showSystemStatus()" class="px-6 py-2.5 bg-indigo-50 dark:bg-slate-700/50 text-indigo-600 dark:text-indigo-300 rounded-lg font-medium text-sm transition-all hover:bg-indigo-100 dark:hover:bg-slate-700 focus:outline-none">
|
|
打开面板
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="bg-slate-50 dark:bg-slate-900/50 px-6 py-3 border-t border-slate-100 dark:border-slate-700/50 flex justify-between items-center text-xs text-slate-400">
|
|
<div class="flex items-center gap-2">
|
|
<span class="relative flex h-2 w-2">
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
|
|
</span>
|
|
<span>RS System Active</span>
|
|
</div>
|
|
<div class="font-mono opacity-70">V1.3.7.2</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<script>
|
|
(function() {
|
|
console.log('[App Logic] 开始初始化页面逻辑...');
|
|
const appContent = document.getElementById('app-content');
|
|
setTimeout(() => {
|
|
if (appContent) appContent.classList.add('active');
|
|
console.log(
|
|
'%c Hello, ResourceShare! %c Tailwind CSS has been successfully injected via RS. ',
|
|
'background: #4f46e5; color: #fff; padding: 4px 8px; border-radius: 4px 0 0 4px; font-weight: bold;',
|
|
'background: #1e293b; color: #93c5fd; padding: 4px 8px; border-radius: 0 4px 4px 0;'
|
|
);
|
|
}, 500);
|
|
window.toggleTheme = function() {
|
|
document.body.classList.toggle('dark-mode');
|
|
const isDark = document.body.classList.contains('dark-mode');
|
|
const btn = event.currentTarget;
|
|
const originalText = btn.innerHTML;
|
|
btn.innerHTML = isDark ?
|
|
`<span class="flex items-center gap-2">☀️ 浅色模式</span>` :
|
|
`<span class="flex items-center gap-2">🌙 深色模式</span>`;
|
|
if (window.resourceShareManager) {
|
|
window.resourceShareManager.log(`用户切换主题: ${isDark ? 'Dark' : 'Light'}`, 'info');
|
|
}
|
|
};
|
|
window.showSystemStatus = function() {
|
|
if (window.resourceShareManager) {
|
|
const rsPanel = document.getElementById('rs-overlay-panel');
|
|
if (rsPanel) {
|
|
rsPanel.classList.remove('rs-closed');
|
|
window.resourceShareManager.log('用户请求查看系统日志面板', 'info');
|
|
} else {
|
|
alert('RS 面板未找到 （当页面完成加载时，面板会被移除）');
|
|
}
|
|
} else {
|
|
alert('ResourceShare Manager 未初始化');
|
|
}
|
|
};
|
|
})();
|
|
</script>
|
|
<style>
|
|
.animate-blob {
|
|
animation: blob 7s infinite;
|
|
}
|
|
.animation-delay-2000 {
|
|
animation-delay: 2s;
|
|
}
|
|
.animation-delay-4000 {
|
|
animation-delay: 4s;
|
|
}
|
|
@keyframes blob {
|
|
0% { transform: translate(0px, 0px) scale(1); }
|
|
33% { transform: translate(30px, -50px) scale(1.1); }
|
|
66% { transform: translate(-20px, 20px) scale(0.9); }
|
|
100% { transform: translate(0px, 0px) scale(1); }
|
|
}
|
|
.animate-fade-in-up {
|
|
animation: fadeInUp 0.8s ease-out forwards;
|
|
}
|
|
@keyframes fadeInUp {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
</style>
|
|
</body>
|
|
</html> |