Creation chat
ClarkZhang
给华为mate90做一个宣传页
04-13 06:37
暂无回复
No comments yet
登录 后可以评论
Assistant
(HTML code has been generated and updated; see above for the current version.)
▼ Code
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>华为Mate 90 - 未来科技，尽在掌握</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config = { darkMode: 'class' }</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="min-h-screen bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-gray-800 text-gray-900 dark:text-gray-100">
<!-- 主题切换按钮 -->
<button id="theme-toggle-btn" class="fixed top-4 right-4 z-10 p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors flex items-center justify-center" aria-label="Toggle theme" onclick="toggleTheme()">
<svg id="icon-moon" class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998z"/></svg>
<svg id="icon-sun" class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true" style="display:none"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"></path></svg>
</button>
<script>
function toggleTheme(){ var el=document.documentElement; var isDark=!el.classList.contains('dark'); el.classList.toggle('dark',isDark); localStorage.setItem('theme',isDark?'dark':'light'); applyTheme(isDark); }
function applyTheme(isDark){ document.getElementById('icon-moon').style.display=isDark?'none':'block'; document.getElementById('icon-sun').style.display=isDark?'block':'none'; }
document.addEventListener('DOMContentLoaded',function(){ var saved=localStorage.getItem('theme'); var isDark=saved==='dark'||(!saved&&window.matchMedia('(prefers-color-scheme: dark)').matches); document.documentElement.classList.toggle('dark',isDark); applyTheme(isDark); });
</script>
<!-- 自定义弹窗 -->
<div id="custom-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 hidden" aria-hidden="true">
<div class="rounded-xl bg-white dark:bg-slate-800 p-6 shadow-xl max-w-sm w-full border border-slate-200 dark:border-slate-700">
<p id="custom-modal-msg" class="text-slate-700 dark:text-slate-200 mb-4"></p>
<button type="button" onclick="hideModal()" class="w-full rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600">确定</button>
</div>
</div>
<script>
function showModal(msg){ var el=document.getElementById('custom-modal'); document.getElementById('custom-modal-msg').textContent=msg||''; el.classList.remove('hidden'); }
function hideModal(){ document.getElementById('custom-modal').classList.add('hidden'); }
</script>
<!-- 导航栏 -->
<header class="sticky top-0 z-20 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border-b border-gray-200 dark:border-gray-700">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-2">
<div class="w-10 h-10 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center">
<span class="text-white font-bold text-xl">H</span>
</div>
<span class="text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">华为</span>
</div>
<nav class="hidden md:flex space-x-8">
<a href="#features" class="font-medium hover:text-blue-600 dark:hover:text-blue-400 transition-colors">功能特性</a>
<a href="#specifications" class="font-medium hover:text-blue-600 dark:hover:text-blue-400 transition-colors">技术规格</a>
<a href="#gallery" class="font-medium hover:text-blue-600 dark:hover:text-blue-400 transition-colors">产品图库</a>
<a href="#reviews" class="font-medium hover:text-blue-600 dark:hover:text-blue-400 transition-colors">用户评价</a>
</nav>
<button class="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-2 rounded-full font-medium hover:opacity-90 transition-opacity">
立即购买
</button>
</div>
</header>
<!-- 主要宣传区 -->
<main class="container mx-auto px-4 py-8">
<!-- Hero Section -->
<section class="py-12 md:py-24 flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0">
<h1 class="text-4xl md:text-6xl font-bold mb-4">
华为 Mate 90
<span class="block text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600">
未来科技
</span>
</h1>
<p class="text-xl text-gray-700 dark:text-gray-300 mb-8 max-w-lg">
革命性影像系统，超长续航，智慧体验。重新定义智能手机新标杆。
</p>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<button class="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-8 py-4 rounded-full font-medium text-lg hover:opacity-90 transition-opacity shadow-lg">
立即购买
</button>
<button class="border-2 border-gray-300 dark:border-gray-600 px-8 py-4 rounded-full font-medium text-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
<i class="fas fa-play-circle mr-2"></i>观看视频
</button>
</div>
<div class="mt-8 flex items-center space-x-6">
<div class="flex items-center">
<div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
<span>现货发售</span>
</div>
<div class="flex items-center">
<i class="fas fa-shipping-fast text-blue-600 dark:text-blue-400 mr-2"></i>
<span>免费配送</span>
</div>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<div class="relative">
<div class="absolute -top-6 -left-6 w-64 h-64 bg-blue-500 rounded-full mix-blend-multiply filter blur-xl opacity-30 dark:opacity-20 animate-blob"></div>
<div class="absolute top-10 -right-6 w-64 h-64 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-30 dark:opacity-20 animate-blob animation-delay-2000"></div>
<div class="relative bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 rounded-3xl p-8 shadow-2xl border border-gray-300 dark:border-gray-600">
<img src="https://picsum.photos/seed/mate90/600/800" alt="华为Mate 90" class="w-full h-auto rounded-2xl shadow-lg">
</div>
</div>
</div>
</section>
<!-- 功能特性 -->
<section id="features" class="py-16">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">突破性功能</h2>
<p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
华为Mate 90重新定义智能手机体验，每一项功能都经过精心设计
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg border border-gray-200 dark:border-gray-700 hover:shadow-xl transition-shadow">
<div class="w-14 h-14 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center mb-6">
<i class="fas fa-camera text-blue-600 dark:text-blue-400 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">超感光影像系统</h3>
<p class="text-gray-600 dark:text-gray-400">
搭载1英寸超大底传感器，支持100倍混合变焦，夜拍更清晰，细节更丰富。
</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg border border-gray-200 dark:border-gray-700 hover:shadow-xl transition-shadow">
<div class="w-14 h-14 rounded-full bg-purple-100 dark:bg-purple-900/50 flex items-center justify-center mb-6">
<i class="fas fa-battery-full text-purple-600 dark:text-purple-400 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">超长续航</h3>
<p class="text-gray-600 dark:text-gray-400">
5000mAh大容量电池配合智能省电技术，重度使用一整天无忧。
</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg border border-gray-200 dark:border-gray-700 hover:shadow-xl transition-shadow">
<div class="w-14 h-14 rounded-full bg-green-100 dark:bg-green-900/50 flex items-center justify-center mb-6">
<i class="fas fa-microchip text-green-600 dark:text-green-400 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">麒麟9000芯片</h3>
<p class="text-gray-600 dark:text-gray-400">
5nm工艺制程，性能提升30%，功耗降低25%，带来极致流畅体验。
</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg border border-gray-200 dark:border-gray-700 hover:shadow-xl transition-shadow">
<div class="w-14 h-14 rounded-full bg-red-100 dark:bg-red-900/50 flex items-center justify-center mb-6">
<i class="fas fa-mobile-alt text-red-600 dark:text-red-400 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">120Hz曲面屏</h3>
<p class="text-gray-600 dark:text-gray-400">
6.8英寸OLED曲面屏，支持HDR10+，色彩鲜艳，视觉效果震撼。
</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg border border-gray-200 dark:border-gray-700 hover:shadow-xl transition-shadow">
<div class="w-14 h-14 rounded-full bg-yellow-100 dark:bg-yellow-900/50 flex items-center justify-center mb-6">
<i class="fas fa-fingerprint text-yellow-600 dark:text-yellow-400 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">智慧生物识别</h3>
<p class="text-gray-600 dark:text-gray-400">
屏下指纹+3D人脸识别，解锁速度快至0.2秒，安全便捷。
</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg border border-gray-200 dark:border-gray-700 hover:shadow-xl transition-shadow">
<div class="w-14 h-14 rounded-full bg-indigo-100 dark:bg-indigo-900/50 flex items-center justify-center mb-6">
<i class="fas fa-wifi text-indigo-600 dark:text-indigo-400 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">5G全网通</h3>
<p class="text-gray-600 dark:text-gray-400">
支持双模5G网络，下载速度提升10倍，视频通话更流畅。
</p>
</div>
</div>
</section>
<!-- 技术规格 -->
<section id="specifications" class="py-16 bg-gray-100 dark:bg-gray-800/50 rounded-3xl my-16">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">技术规格</h2>
<p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
每一项参数都经过精心调校，只为给你最好的体验
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div class="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg border border-gray-200 dark:border-gray-700">
<h3 class="text-2xl font-bold mb-6">核心配置</h3>
<ul class="space-y-4">
<li class="flex justify-between border-b border-gray-200 dark:border-gray-700 pb-4">
<span class="font-medium">处理器</span>
<span>麒麟9000 5G SoC</span>
</li>
<li class="flex justify-between border-b border-gray-200 dark:border-gray-700 pb-4">
<span class="font-medium">内存</span>
<span>12GB LPDDR5</span>
</li>
<li class="flex justify-between border-b border-gray-200 dark:border-gray-700 pb-4">
<span class="font-medium">存储</span>
<span>256GB/512GB UFS 3.1</span>
</li>
<li class="flex justify-between border-b border-gray-200 dark:border-gray-700 pb-4">
<span class="font-medium">屏幕</span>
<span>6.8英寸 OLED曲面屏</span>
</li>
<li class="flex justify-between border-b border-gray-200 dark:border-gray-700 pb-4">
<span class="font-medium">分辨率</span>
<span>2772×1344像素</span>
</li>
<li class="flex justify-between">
<span class="font-medium">刷新率</span>
<span>120Hz自适应刷新率</span>
</li>
</ul>
</div>
<div class="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg border border-gray-200 dark:border-gray-700">
<h3 class="text-2xl font-bold mb-6">影像系统</h3>
<ul class="space-y-4">
<li class="flex justify-between border-b border-gray-200 dark:border-gray-700 pb-4">
<span class="font-medium">主摄</span>
<span>5000万像素 超感光镜头</span>
</li>
<li class="flex justify-between border-b border-gray-200 dark:border-gray-700 pb-4">
<span class="font-medium">超广角</span>
<span>1200万像素 120°视野</span>
</li>
<li class="flex justify-between border-b border-gray-200 dark:border-gray-700 pb-4">
<span class="font-medium">长焦</span>
<span>1200万像素 100倍变焦</span>
</li>
<li class="flex justify-between border-b border-gray-200 dark:border-gray-700 pb-4">
<span class="font-medium">前置</span>
<span>3200万像素 超感光镜头</span>
</li>
<li class="flex justify-between border-b border-gray-200 dark:border-gray-700 pb-4">
<span class="font-medium">视频拍摄</span>
<span>8K@30fps 4K@60fps</span>
</li>
<li class="flex justify-between">
<span class="font-medium">防抖</span>
<span>光学防抖+电子防抖</span>
</li>
</ul>
</div>
</div>
</section>
<!-- 产品图库 -->
<section id="gallery" class="py-16">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">产品图库</h2>
<p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
多角度展示华为Mate 90的精致工艺与设计美学
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="overflow-hidden rounded-2xl shadow-lg aspect-square">
<img src="https://picsum.photos/seed/mate90-1/600/600" alt="华为Mate 90正面" class="w-full h-full object-cover">
</div>
<div class="overflow-hidden rounded-2xl shadow-lg aspect-square">
<img src="https://picsum.photos/seed/mate90-2/600/600" alt="华为Mate 90背面" class="w-full h-full object-cover">
</div>
<div class="overflow-hidden rounded-2xl shadow-lg aspect-square">
<img src="https://picsum.photos/seed/mate90-3/600/600" alt="华为Mate 90侧面" class="w-full h-full object-cover">
</div>
<div class="overflow-hidden rounded-2xl shadow-lg aspect-square">
<img src="https://picsum.photos/seed/mate90-4/600/600" alt="华为Mate 90细节" class="w-full h-full object-cover">
</div>
</div>
</section>
<!-- 用户评价 -->
<section id="reviews" class="py-16">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">用户评价</h2>
<p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
来自真实用户的使用体验与反馈
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg border border-gray-200 dark:border-gray-700">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 to-purple-500 flex items-center justify-center text-white font-bold mr-4">
张
</div>
<div>
<h4 class="font-bold">张伟</h4>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
<p class="text-gray-600 dark:text-gray-400">
Mate 90的拍照效果真的让我惊艳！夜景模式下拍出的照片细节丰富，色彩还原度极高。续航也很给力，一天重度使用还有剩余。
</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg border border-gray-200 dark:border-gray-700">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-gradient-to-r from-green-500 to-teal-500 flex items-center justify-center text-white font-bold mr-4">
李
</div>
<div>
<h4 class="font-bold">李娜</h4>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
<p class="text-gray-600 dark:text-gray-400">
屏幕显示效果非常棒，120Hz刷新率用起来很流畅。麒麟9000处理器性能强劲，玩游戏毫无卡顿。整体使用体验非常满意！
</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg border border-gray-200 dark:border-gray-700">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-gradient-to-r from-amber-500 to-orange-500 flex items-center justify-center text-white font-bold mr-4">
王
</div>
<div>
<h4 class="font-bold">王强</h4>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
<p class="text-gray-600 dark:text-gray-400">
作为商务人士，Mate 90的续航和性能完全满足我的需求。指纹识别和人脸识别速度快，安全性高。强烈推荐给追求品质的用户！
</p>
</div>
</div>
</section>
<!-- 行动号召 -->
<section class="py-16 text-center">
<div class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-3xl p-12 text-white">
<h2 class="text-3xl md:text-4xl font-bold mb-6">立即体验华为Mate 90</h2>
<p class="text-xl mb-8 max-w-2xl mx-auto opacity-90">
现在购买享受限时优惠，免费配送，15天无理由退货
</p>
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
<button class="bg-white text-blue-600 px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-colors">
立即购买 - ￥5999起
</button>
<button class="bg-transparent border-2 border-white px-8 py-4 rounded-full font-bold text-lg hover:bg-white/10 transition-colors">
<i class="fas fa-headset mr-2"></i>咨询客服
</button>
</div>
</div>
</section>
</main>
<!-- 页脚 -->
<footer class="bg-gray-800 text-white py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-bold mb-4">华为</h3>
<p class="text-gray-400">
创新科技，引领未来。华为致力于为全球用户提供卓越的智能设备体验。
</p>
</div>
<div>
<h4 class="font-bold mb-4">产品</h4>
<ul class="space-y-2 text-gray-400">
<li><a href="#" class="hover:text-white transition-colors">智能手机</a></li>
<li><a href="#" class="hover:text-white transition-colors">平板电脑</a></li>
<li><a href="#" class="hover:text-white transition-colors">笔记本</a></li>
<li><a href="#" class="hover:text-white transition-colors">穿戴设备</a></li>
</ul>
</div>
<div>
<h4 class="font-bold mb-4">支持</h4>
<ul class="space-y-2 text-gray-400">
<li><a href="#" class="hover:text-white transition-colors">售后服务</a></li>
<li><a href="#" class="hover:text-white transition-colors">软件更新</a></li>
<li><a href="#" class="hover:text-white transition-colors">维修服务</a></li>
<li><a href="#" class="hover:text-white transition-colors">用户手册</a></li>
</ul>
</div>
<div>
<h4 class="font-bold mb-4">关注我们</h4>
<div class="flex space-x-4">
<a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-blue-600 transition-colors">
<i class="fab fa-weibo"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-blue-600 transition-colors">
<i class="fab fa-weixin"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-blue-600 transition-colors">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-blue-600 transition-colors">
<i class="fab fa-youtube"></i>
</a>
</div>
</div>
</div>
<div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400">
<p>© 2023 华为技术有限公司. 保留所有权利.</p>
</div>
</div>
</footer>
<style>
@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-blob {
animation: blob 7s infinite;
}
.animation-delay-2000 {
animation-delay: 2s;
}
</style>
</body>
</html>
04-13 06:41
暂无回复
No comments yet
登录 后可以评论
Comments
暂无回复
No comments yet
登录 后可以评论