Spaces:
Running
Running
| <html lang="zh-Hant"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>雲端UI ERP系統完整商用功能</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| <style> | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #06b6d4 100%); | |
| } | |
| .cloud-bg { | |
| background-image: | |
| radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), | |
| radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), | |
| radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.05) 0%, transparent 50%); | |
| } | |
| .cookie-banner { | |
| backdrop-filter: blur(10px); | |
| background: rgba(255, 255, 255, 0.95); | |
| box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05); | |
| } | |
| .nav-link { | |
| position: relative; | |
| transition: all 0.3s ease; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -4px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: linear-gradient(90deg, #06b6d4, #3b82f6); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%); | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn-primary::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); | |
| transition: left 0.5s ease; | |
| } | |
| .btn-primary:hover::before { | |
| left: 100%; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 25px rgba(6, 182, 212, 0.3); | |
| } | |
| .floating-animation { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0px) rotate(0deg); | |
| } | |
| 50% { | |
| transform: translateY(-20px) rotate(5deg); | |
| } | |
| } | |
| .hero-content { | |
| animation: fadeInUp 1s ease-out; | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .nav-blur { | |
| backdrop-filter: blur(12px); | |
| background: rgba(255, 255, 255, 0.08); | |
| } | |
| .logo-glow { | |
| filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.3)); | |
| } | |
| .cookie-toggle { | |
| width: 44px; | |
| height: 24px; | |
| background: #e5e7eb; | |
| border-radius: 12px; | |
| position: relative; | |
| cursor: pointer; | |
| transition: background 0.3s ease; | |
| } | |
| .cookie-toggle.active { | |
| background: #3b82f6; | |
| } | |
| .cookie-toggle::after { | |
| content: ''; | |
| position: absolute; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: white; | |
| top: 2px; | |
| left: 2px; | |
| transition: transform 0.3s ease; | |
| } | |
| .cookie-toggle.active::after { | |
| transform: translateX(20px); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen hero-gradient cloud-bg relative overflow-x-hidden"> | |
| <!-- Navigation --> | |
| <nav class="nav-blur fixed w-full top-0 z-50 border-b border-white/10"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center h-16"> | |
| <!-- Logo --> | |
| <div class="flex items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-10 h-10 bg-gradient-to-r from-blue-400 to-cyan-400 rounded-xl flex items-center justify-center logo-glow"> | |
| <i class="fas fa-cloud text-white text-lg"></i> | |
| </div> | |
| <span class="text-white font-bold text-xl tracking-wide">雲端UI</span> | |
| </div> | |
| </div> | |
| <!-- Navigation Links --> | |
| <div class="hidden lg:flex items-center space-x-8"> | |
| <a href="#" class="nav-link text-white/90 px-3 py-2 text-sm font-medium">首頁</a> | |
| <a href="#" class="nav-link text-white/90 px-3 py-2 text-sm font-medium">產品介紹</a> | |
| <a href="#" class="nav-link text-white/90 px-3 py-2 text-sm font-medium">功能特色</a> | |
| <a href="#" class="nav-link text-white/90 px-3 py-2 text-sm font-medium">價格方案</a> | |
| <a href="#" class="nav-link text-white/90 px-3 py-2 text-sm font-medium">客戶案例</a> | |
| <a href="#" class="nav-link text-white/90 px-3 py-2 text-sm font-medium">關於我們</a> | |
| <a href="#" class="nav-link text-white/90 px-3 py-2 text-sm font-medium">聯絡我們</a> | |
| </div> | |
| <!-- CTA Button in Nav --> | |
| <div class="hidden lg:block"> | |
| <button class="bg-white/10 hover:bg-white/20 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 border border-white/20"> | |
| 免費試用 | |
| </button> | |
| </div> | |
| <!-- Mobile menu button --> | |
| <div class="lg:hidden"> | |
| <button id="mobile-menu-button" class="text-white hover:text-cyan-300 focus:outline-none p-2"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="lg:hidden hidden bg-white/95 backdrop-blur-sm"> | |
| <div class="px-2 pt-2 pb-3 space-y-1"> | |
| <a href="#" class="block px-3 py-2 text-gray-800 hover:bg-cyan-50 rounded-md">首頁</a> | |
| <a href="#" class="block px-3 py-2 text-gray-800 hover:bg-cyan-50 rounded-md">產品介紹</a> | |
| <a href="#" class="block px-3 py-2 text-gray-800 hover:bg-cyan-50 rounded-md">功能特色</a> | |
| <a href="#" class="block px-3 py-2 text-gray-800 hover:bg-cyan-50 rounded-md">價格方案</a> | |
| <a href="#" class="block px-3 py-2 text-gray-800 hover:bg-cyan-50 rounded-md">客戶案例</a> | |
| <a href="#" class="block px-3 py-2 text-gray-800 hover:bg-cyan-50 rounded-md">關於我們</a> | |
| <a href="#" class="block px-3 py-2 text-gray-800 hover:bg-cyan-50 rounded-md">聯絡我們</a> | |
| <div class="px-3 py-2"> | |
| <button class="w-full bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors"> | |
| 免費試用 | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <main class="flex-1 flex items-center justify-center min-h-screen pt-20 pb-20"> | |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center hero-content"> | |
| <!-- Main Heading --> | |
| <h1 class="text-4xl md:text-6xl font-bold text-white mb-6 leading-tight"> | |
| 雲端UI ERP系統<br> | |
| <span class="text-cyan-300">完整商用功能</span> | |
| </h1> | |
| <!-- Subheading --> | |
| <p class="text-lg md:text-xl text-white/90 mb-8 max-w-3xl mx-auto leading-relaxed"> | |
| 專為現代企業打造的智慧管理解決方案，整合進銷存、財務、人資於一身 | |
| </p> | |
| <!-- CTA Button --> | |
| <div class="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4 mb-12"> | |
| <button class="btn-primary text-white font-semibold px-8 py-4 rounded-lg text-lg inline-flex items-center space-x-2 hover:shadow-lg transition-all duration-300"> | |
| <span>立即體驗</span> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| <button class="bg-white/10 hover:bg-white/20 text-white px-6 py-4 rounded-lg text-lg inline-flex items-center space-x-2 transition-all duration-300 border border-white/20"> | |
| <i class="fas fa-play-circle"></i> | |
| <span>觀看介紹</span> | |
| </button> | |
| </div> | |
| <!-- Feature Highlights --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-16"> | |
| <div class="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6 hover:bg-white/10 transition-all duration-300"> | |
| <div class="w-12 h-12 bg-cyan-400/20 rounded-lg flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-chart-line text-cyan-300 text-xl"></i> | |
| </div> | |
| <h3 class="text-white font-semibold mb-2">智能分析</h3> | |
| <p class="text-white/80 text-sm">即時數據分析與報表生成</p> | |
| </div> | |
| <div class="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6 hover:bg-white/10 transition-all duration-300"> | |
| <div class="w-12 h-12 bg-blue-400/20 rounded-lg flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-cloud text-blue-300 text-xl"></i> | |
| </div> | |
| <h3 class="text-white font-semibold mb-2">雲端整合</h3> | |
| <p class="text-white/80 text-sm">跨平台無縫整合</p> | |
| </div> | |
| <div class="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6 hover:bg-white/10 transition-all duration-300"> | |
| <div class="w-12 h-12 bg-purple-400/20 rounded-lg flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-shield-alt text-purple-300 text-xl"></i> | |
| </div> | |
| <h3 class="text-white font-semibold mb-2">安全可靠</h3> | |
| <p class="text-white/80 text-sm">企業級數據保護</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Decorative Elements --> | |
| <div class="absolute top-20 left-10 w-16 h-16 bg-white/5 rounded-full floating-animation opacity-60"></div> | |
| <div class="absolute top-40 right-20 w-12 h-12 bg-cyan-300/10 rounded-full floating-animation" style="animation-delay: -2s;"></div> | |
| <div class="absolute bottom-40 left-20 w-20 h-20 bg-blue-300/5 rounded-full floating-animation" style="animation-delay: -4s;"></div> | |
| <div class="absolute bottom-20 right-10 w-14 h-14 bg-purple-300/10 rounded-full floating-animation" style="animation-delay: -1s;"></div> | |
| </main> | |
| <!-- Cookie Consent Banner --> | |
| <div id="cookie-banner" class="fixed bottom-0 left-0 right-0 cookie-banner border-t border-gray-200 p-4 z-50"> | |
| <div class="max-w-7xl mx-auto flex flex-col md:flex-row items-start md:items-center justify-between space-y-4 md:space-y-0"> | |
| <div class="flex-1"> | |
| <h3 class="text-gray-800 font-semibold mb-2">本網站使用Cookie</h3> | |
| <p class="text-gray-600 text-sm"> | |
| 我們使用Cookie來提供和改進我們的服務。通過繼續使用我們的網站，您同意我們的Cookie政策。 | |
| </p> | |
| <div class="mt-3 flex items-center space-x-3"> | |
| <button id="cookie-toggle" class="cookie-toggle"></button> | |
| <span class="text-sm text-gray-600">自訂Cookie設定</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3"> | |
| <button id="accept-cookies" class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors font-medium"> | |
| 接受所有Cookie | |
| </button> | |
| <button id="reject-cookies" class="border border-gray-300 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-50 transition-colors font-medium"> | |
| 拒絕 | |
| </button> | |
| </div> | |
| <button id="close-cookie-banner" class="absolute top-2 right-2 text-gray-400 hover:text-gray-600 text-xl"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Built with anycoder --> | |
| <div class="fixed bottom-4 left-4 z-40"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="bg-white/10 backdrop-blur-sm text-white/80 px-3 py-1 rounded-lg text-sm hover:bg-white/20 transition-colors flex items-center space-x-2"> | |
| <i class="fas fa-code"></i> | |
| <span>Built with anycoder</span> | |
| </a> | |
| </div> | |
| <script> | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Cookie banner functionality | |
| const cookieBanner = document.getElementById('cookie-banner'); | |
| const acceptCookies = document.getElementById('accept-cookies'); | |
| const rejectCookies = document.getElementById('reject-cookies'); | |
| const closeCookieBanner = document.getElementById('close-cookie-banner'); | |
| const cookieToggle = document.getElementById('cookie-toggle'); | |
| acceptCookies.addEventListener('click', () => { | |
| cookieBanner.style.display = 'none'; | |
| localStorage.setItem('cookieConsent', 'accepted'); | |
| }); | |
| rejectCookies.addEventListener('click', () => { | |
| cookieBanner.style.display = 'none'; | |
| localStorage.setItem('cookieConsent', 'rejected'); | |
| }); | |
| closeCookieBanner.addEventListener('click', () => { | |
| cookieBanner.style.display = 'none'; | |
| }); | |
| cookieToggle.addEventListener('click', () => { | |
| cookieToggle.classList.toggle('active'); | |
| }); | |
| // Check if cookie consent was already given | |
| if (localStorage.getItem('cookieConsent')) { | |
| cookieBanner.style.display = 'none'; | |
| } | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ | |
| behavior: 'smooth', | |
| block: 'start' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Add interactive hover effects to feature cards | |
| document.querySelectorAll('.bg-white\\/5').forEach(card => { | |
| card.addEventListener('mouseenter', function() { | |
| this.style.transform = 'translateY(-5px)'; | |
| this.style.boxShadow = '0 10px 25px rgba(0, 0, 0, 0.1)'; | |
| }); | |
| card.addEventListener('mouseleave', function() { | |
| this.style.transform = 'translateY(0)'; | |
| this.style.boxShadow = 'none'; | |
| }); | |
| }); | |
| // Add parallax effect to decorative elements | |
| window.addEventListener('scroll', () => { | |
| const scrolled = window.pageYOffset; | |
| const elements = document.querySelectorAll('.floating-animation'); | |
| elements.forEach((element, index) => { | |
| const speed = 0.5 + (index * 0.1); | |
| element.style.transform = `translateY(${scrolled * speed}px)`; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |