side_projects/ai-beautify
1
0
Fork 0
Code Pull Requests Activity

feat(ui): overhaul page with glassmorphism and interactive features

Browse Source 
This commit completely revamps the page, transitioning from a simple static design to a modern, dynamic, and interactive experience with a glassmorphism aesthetic.

Key additions include:
- **Visual Redesign:** Implemented a dark, 'glassmorphism' theme with blurred backgrounds, gradient text, and enhanced hover effects.
- **Interactive Theme Switcher:** Added a JavaScript-powered feature allowing users to dynamically change the page's color scheme.
- **Dynamic Backgrounds:** Introduced a JavaScript-powered particle animation and CSS-animated decorative shapes to create a more lively and engaging background.
- **Improved Typography:** Switched to 'Noto Sans SC' for better readability and aesthetics.
- **Enhanced Layout:** Refined the overall structure and responsiveness for a more polished user experience on all devices.
This commit is contained in:
xiaomai
2025-09-10 23:34:08 +08:00
parent 08e2518280
commit c0e93dbfc5
1 changed files with 394 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

475
index.html
View File

@@ -3,19 +3,20 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简约之美 - 网页设计</title>
<title>极简美学 - 艺术化网页设计</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-family: 'Noto Sans SC', sans-serif;
}
body {
background: linear-gradient(135deg, #6e8efb, #a777e3);
color: #333;
background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
color: #f8f8f8;
min-height: 100vh;
display: flex;
flex-direction: column;
@@ -23,188 +24,500 @@
justify-content: center;
padding: 20px;
line-height: 1.6;
overflow-x: hidden;
position: relative;
}
/* 背景装饰元素 */
.bg-decoration {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
}
.decoration-circle {
position: absolute;
border-radius: 50%;
opacity: 0.1;
background: linear-gradient(135deg, #6e8efb, #a777e3);
animation: float 15s infinite ease-in-out;
}
.circle-1 {
width: 300px;
height: 300px;
top: -100px;
left: -100px;
animation-delay: 0s;
}
.circle-2 {
width: 200px;
height: 200px;
bottom: -50px;
right: -50px;
animation-delay: -5s;
}
.circle-3 {
width: 150px;
height: 150px;
top: 50%;
left: 70%;
animation-delay: -10s;
}
@keyframes float {
0%, 100% { transform: translate(0, 0) scale(1); }
25% { transform: translate(20px, 30px) scale(1.05); }
50% { transform: translate(-15px, 15px) scale(0.95); }
75% { transform: translate(-20px, -10px) scale(1.02); }
}
.container {
max-width: 800px;
max-width: 900px;
width: 100%;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
background: rgba(255, 255, 255, 0.08);
border-radius: 25px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.1);
overflow: hidden;
text-align: center;
padding: 40px;
backdrop-filter: blur(10px);
animation: fadeIn 1s ease-out;
padding: 50px 40px;
animation: fadeIn 1.5s ease-out;
position: relative;
z-index: 1;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
from { opacity: 0; transform: translateY(30px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
h1 {
color: #6e8efb;
margin-bottom: 20px;
font-size: 2.5rem;
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 20px;
background: linear-gradient(to right, #6e8efb, #a777e3, #fc466b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
letter-spacing: 1px;
}
.subtitle {
font-size: 1.4rem;
color: #ccc;
margin-bottom: 40px;
font-weight: 300;
}
.divider {
height: 4px;
width: 80px;
height: 3px;
width: 100px;
background: linear-gradient(to right, #6e8efb, #a777e3);
margin: 0 auto 25px;
border-radius: 2px;
margin: 0 auto 40px;
border-radius: 3px;
position: relative;
}
p.lead {
font-size: 1.4rem;
color: #555;
margin-bottom: 30px;
line-height: 1.8;
.divider::before, .divider::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: #6e8efb;
top: -3.5px;
}
.divider::before {
left: 0;
}
.divider::after {
right: 0;
}
.content-box {
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border-radius: 15px;
padding: 25px;
margin: 30px 0;
border-left: 5px solid #6e8efb;
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
padding: 30px;
margin: 40px 0;
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.content-box:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.content-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 100%;
background: linear-gradient(to bottom, #6e8efb, #a777e3);
}
.original-text {
font-size: 1.8rem;
color: #6e8efb;
font-size: 2.2rem;
font-weight: 300;
font-style: italic;
padding: 15px;
background: rgba(110, 142, 251, 0.1);
border-radius: 10px;
padding: 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
display: inline-block;
margin: 20px 0;
margin: 25px 0;
border: 1px solid rgba(255, 255, 255, 0.15);
transition: all 0.3s ease;
cursor: pointer;
}
.original-text:hover {
background: rgba(255, 255, 255, 0.15);
transform: scale(1.03);
}
.quote-icon {
font-size: 1.5rem;
margin: 0 10px;
color: #6e8efb;
vertical-align: middle;
}
.features {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin: 40px 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
margin: 50px 0;
}
.feature {
flex: 1;
min-width: 200px;
background: white;
padding: 20px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
background: rgba(255, 255, 255, 0.07);
padding: 30px 25px;
border-radius: 20px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.feature:hover {
transform: translateY(-5px);
transform: translateY(-8px);
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}
.feature i {
font-size: 2.5rem;
color: #6e8efb;
margin-bottom: 15px;
font-size: 3rem;
margin-bottom: 20px;
background: linear-gradient(to right, #6e8efb, #a777e3);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.feature h3 {
color: #555;
margin-bottom: 10px;
font-size: 1.4rem;
margin-bottom: 15px;
color: #fff;
}
.feature p {
color: #ccc;
font-size: 1rem;
line-height: 1.6;
}
.interactive-section {
margin: 40px 0;
padding: 30px;
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.color-toggle {
display: inline-flex;
background: rgba(255, 255, 255, 0.1);
padding: 10px;
border-radius: 50px;
margin: 20px 0;
}
.color-btn {
width: 40px;
height: 40px;
border-radius: 50%;
margin: 0 10px;
cursor: pointer;
border: 2px solid transparent;
transition: all 0.3s ease;
}
.color-btn.active {
border-color: white;
transform: scale(1.1);
}
.color-1 { background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); }
.color-2 { background: linear-gradient(135deg, #3a1c71, #d76d77, #ffaf7b); }
.color-3 { background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d); }
.color-4 { background: linear-gradient(135deg, #00416a, #e4e5e6); }
footer {
margin-top: 40px;
color: white;
margin-top: 50px;
color: #aaa;
text-align: center;
font-size: 0.9rem;
opacity: 0.8;
}
.social-links {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 15px;
gap: 20px;
margin-top: 20px;
}
.social-links a {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
color: white;
font-size: 1.5rem;
transition: transform 0.3s ease;
font-size: 1.2rem;
transition: all 0.3s ease;
}
.social-links a:hover {
transform: scale(1.2);
background: linear-gradient(to right, #6e8efb, #a777e3);
transform: translateY(-3px);
}
/* 响应式设计 */
@media (max-width: 768px) {
.container {
padding: 25px;
padding: 30px 20px;
}
h1 {
font-size: 2rem;
font-size: 2.5rem;
}
p.lead {
font-size: 1.1rem;
.subtitle {
font-size: 1.2rem;
}
.original-text {
font-size: 1.8rem;
}
.features {
flex-direction: column;
grid-template-columns: 1fr;
}
}
/* 粒子效果 */
.particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.particle {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
animation: float-particle 15s infinite linear;
}
@keyframes float-particle {
0% {
transform: translateY(0) translateX(0) rotate(0deg);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-100vh) translateX(100px) rotate(360deg);
opacity: 0;
}
}
</style>
</head>
<body>
<!-- 背景装饰 -->
<div class="bg-decoration">
<div class="decoration-circle circle-1"></div>
<div class="decoration-circle circle-2"></div>
<div class="decoration-circle circle-3"></div>
</div>
<!-- 粒子背景 -->
<div class="particles" id="particles"></div>
<div class="container">
<h1>简约之美</h1>
<h1>极简美学</h1>
<p class="subtitle">简约之中见非凡，空灵之处显意境</p>
<div class="divider"></div>
<p class="lead">有时候，最简单的设计反而能创造出最强大的视觉冲击</p>
<div class="content-box">
<p>原始内容被优雅地重新设计：</p>
<p>原始内容被重新赋予艺术生命：</p>
<div class="original-text">
<i class="fas fa-quote-left"></i> 啥都没有 <i class="fas fa-quote-right"></i>
<i class="fas fa-quote-left quote-icon"></i> 啥都没有 <i class="fas fa-quote-right quote-icon"></i>
</div>
<p>但我们为它增添了美感和目的</p>
<p>在极简主义中，空白本身就是一种设计语言</p>
</div>
<div class="features">
<div class="feature">
<i class="fas fa-paint-brush"></i>
<h3>现代设计</h3>
<p>采用最新的UI设计趋势，创造视觉吸引力</p>
<h3>现代美学</h3>
<p>采用最新的玻璃态设计，融合微交互与动效</p>
</div>
<div class="feature">
<i class="fas fa-mobile-alt"></i>
<h3>响应式布局</h3>
<p>在任何设备上都能完美展示</p>
<h3>全响应式</h3>
<p>在任何设备上都能提供完美的视觉体验</p>
</div>
<div class="feature">
<i class="fas fa-bolt"></i>
<h3>性能优化</h3>
<p>快速加载，流畅动画，卓越体验</p>
<h3>极致性能</h3>
<p>精心优化的代码确保流畅的动画与快速加载</p>
</div>
</div>
<p class="lead">简约不简单，少即是多</p>
<div class="interactive-section">
<h3>选择主题色彩</h3>
<div class="color-toggle">
<div class="color-btn color-1 active" data-theme="default"></div>
<div class="color-btn color-2" data-theme="sunset"></div>
<div class="color-btn color-3" data-theme="fire"></div>
<div class="color-btn color-4" data-theme="silver"></div>
</div>
<p>点击上方色块切换页面主题色彩</p>
</div>
<p class="subtitle">少即是多，空即是满，无即是有</p>
</div>
<footer>
<p>© 2023 简约网页设计 | 保留所有权利</p>
<p>© 2023 极致简约美学 | 设计于当下，着眼于未来</p>
<div class="social-links">
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-dribbble"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
</div>
</footer>
<script>
// 创建粒子背景
function createParticles() {
const particlesContainer = document.getElementById('particles');
const particleCount = 30;
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.classList.add('particle');
// 随机大小和位置
const size = Math.random() * 10 + 2;
const posX = Math.random() * 100;
const duration = Math.random() * 10 + 10;
const delay = Math.random() * -20;
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
particle.style.left = `${posX}%`;
particle.style.animationDuration = `${duration}s`;
particle.style.animationDelay = `${delay}s`;
particlesContainer.appendChild(particle);
}
}
// 主题切换功能
function setupThemeToggle() {
const colorButtons = document.querySelectorAll('.color-btn');
colorButtons.forEach(button => {
button.addEventListener('click', function() {
// 移除所有active类
colorButtons.forEach(btn => btn.classList.remove('active'));
// 添加active类到当前按钮
this.classList.add('active');
// 根据选择切换主题
const theme = this.getAttribute('data-theme');
changeTheme(theme);
});
});
}
// 切换主题函数
function changeTheme(theme) {
const body = document.body;
// 移除所有可能的主题类
body.classList.remove('theme-sunset', 'theme-fire', 'theme-silver');
// 根据主题添加对应的类
if (theme !== 'default') {
body.classList.add(`theme-${theme}`);
}
// 根据主题更新背景渐变
switch(theme) {
case 'sunset':
body.style.background = 'linear-gradient(135deg, #3a1c71, #d76d77, #ffaf7b)';
break;
case 'fire':
body.style.background = 'linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d)';
break;
case 'silver':
body.style.background = 'linear-gradient(135deg, #00416a, #e4e5e6)';
break;
default:
body.style.background = 'linear-gradient(135deg, #0f2027, #203a43, #2c5364)';
}
}
// 初始化
document.addEventListener('DOMContentLoaded', function() {
createParticles();
setupThemeToggle();
// 为原始文本添加点击动画
const originalText = document.querySelector('.original-text');
originalText.addEventListener('click', function() {
this.style.transform = 'scale(1.1)';
setTimeout(() => {
this.style.transform = 'scale(1)';
}, 300);
});
});
</script>
</body>
</html>