227
5
原因还是之前的米表和个人主页数据拿不回来了，又花了一个多小时鼓捣了一个，不想浪费时间单独写个人主页和米表了， 就干脆全部集合在一个上面
就是简单的HTML单页，都有注释，傻瓜都能看懂，毛玻璃模糊背景，可以自定义背景图，头像大小等
QQ微信支持点击弹窗出二维码添加好友，其余的是点击直接跳转链接。
旗下产品和在售域名点击也是弹窗的效果，具体自己搭建测试吧！
自适应响应，但是感觉在手机端不怎么好看，自己优化~
展示图：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>智南个人主页</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #5d8acd;
--secondary-color: #7fa3d8;
--bg-color: #1a1a1a;
--card-bg: rgba(45, 45, 45, 0.5); /* 增加透明度 */
--text-color: #e0e0e0;
--shadow-color: rgba(0, 0, 0, 0.3);
--border-color: rgba(68, 68, 68, 0.5);
--input-bg: rgba(61, 61, 61, 0.7);
--blur-intensity: 10px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
transition: background-color 0.3s, color 0.3s, opacity 0.5s;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: var(--text-color);
line-height: 1.6;
min-height: 100vh;
position: relative;
overflow-x: hidden;
background-color: #f0f0f0;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-width: 1000px; /* 确保最小宽度为PC端尺寸 */
}
/* 背景毛玻璃效果 */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://img.29o.cn/i/2025/06/19/685415eaef3c3.jpeg');
background-size: cover;
background-position: center;
background-attachment: fixed;
filter: blur(8px);
z-index: -1;
}
.container {
width: 1000px;
padding: 30px;
margin: 0 auto;
}
.profile-card {
background-color: var(--card-bg);
border-radius: 20px;
box-shadow: 0 10px 30px var(--shadow-color);
padding: 30px;
margin-bottom: 30px;
text-align: center;
position: relative;
overflow: hidden;
border: 1px solid var(--border-color);
backdrop-filter: blur(var(--blur-intensity));
display: flex;
flex-direction: column;
align-items: center;
}
.profile-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 120px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
z-index: 0;
border-radius: 20px 20px 0 0;
opacity: 0.7; /* 增加透明度 */
}
.avatar-container {
position: relative;
width: 120px;
height: 120px;
margin: 0 auto 20px;
z-index: 1;
}
.avatar {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 5px solid var(--card-bg);
box-shadow: 0 5px 15px var(--shadow-color);
position: relative;
z-index: 2;
}
.name {
font-size: 28px;
font-weight: bold;
margin-bottom: 10px;
color: var(--text-color);
position: relative;
z-index: 1;
}
.title {
font-size: 18px;
color: var(--secondary-color);
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.bio {
font-size: 16px;
margin-bottom: 25px;
color: var(--text-color);
max-width: 700px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 1;
}
.skills-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-bottom: 25px;
z-index: 1;
position: relative;
}
.skill-tag {
padding: 6px 12px;
border-radius: 15px;
font-size: 14px;
font-weight: 500;
opacity: 0;
animation: fadeIn 0.5s forwards;
background: linear-gradient(45deg, #ff9a9e, #fad0c4, #fbc2eb, #a6c1ee, #a1c4fd, #c2e9fb, #d4fc79);
background-size: 400% 400%;
animation: gradientBG 5s ease infinite, fadeIn 0.5s forwards;
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
@keyframes fadeIn {
to { opacity: 1; }
}
.social-links {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 25px;
z-index: 1;
position: relative;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--primary-color);
color: white;
font-size: 18px;
text-decoration: none;
transition: transform 0.3s, background-color 0.3s;
}
.social-link:hover {
transform: translateY(-3px);
background-color: var(--secondary-color);
}
.contact-info {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin-bottom: 25px;
z-index: 1;
position: relative;
}
.contact-item {
display: flex;
align-items: center;
font-size: 16px;
}
.contact-item i {
margin-right: 8px;
color: var(--primary-color);
}
.action-buttons {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 20px;
z-index: 1;
position: relative;
width: 100%;
}
.btn {
padding: 10px 20px;
border-radius: 30px;
border: none;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
gap: 8px;
justify-content: center;
}
.btn-primary {
background-color: var(--primary-color);
color: white;
}
.btn-primary:hover {
background-color: var(--secondary-color);
transform: translateY(-2px);
box-shadow: 0 5px 15px var(--shadow-color);
}
.btn-outline {
background-color: transparent;
border: 2px solid var(--primary-color);
color: var(--primary-color);
}
.btn-outline:hover {
background-color: var(--primary-color);
color: white;
transform: translateY(-2px);
box-shadow: 0 5px 15px var(--shadow-color);
}
.section {
background-color: var(--card-bg);
border-radius: 20px;
box-shadow: 0 10px 30px var(--shadow-color);
padding: 30px;
margin-bottom: 30px;
border: 1px solid var(--border-color);
backdrop-filter: blur(var(--blur-intensity));
display: flex;
flex-direction: column;
align-items: center;
}
.section-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
color: var(--primary-color);
display: flex;
align-items: center;
gap: 10px;
justify-content: center;
}
.domains-grid, .products-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
width: 100%;
}
.domain-card, .product-card {
background-color: var(--input-bg);
border-radius: 10px;
padding: 20px;
border: 1px solid var(--border-color);
transition: transform 0.3s, box-shadow 0.3s;
backdrop-filter: blur(5px);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.domain-card:hover, .product-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px var(--shadow-color);
}
.domain-name, .product-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
color: var(--primary-color);
}
.domain-price, .product-desc {
font-size: 16px;
color: var(--text-color);
margin-bottom: 15px;
}
.domain-status {
display: inline-block;
padding: 5px 10px;
border-radius: 5px;
font-size: 14px;
font-weight: 500;
}
.status-available {
background-color: #d4edda;
color: #155724;
}
.status-sold {
background-color: #f8d7da;
color: #721c24;
}
.product-link {
display: inline-block;
padding: 8px 16px;
background-color: var(--primary-color);
color: white;
border-radius: 5px;
text-decoration: none;
font-size: 14px;
transition: background-color 0.3s;
}
.product-link:hover {
background-color: var(--secondary-color);
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
justify-content: center;
align-items: center;
backdrop-filter: blur(5px);
}
.modal-content {
background-color: var(--card-bg);
border-radius: 20px;
width: 90%;
max-width: 1000px;
max-height: 90vh;
overflow-y: auto;
padding: 30px;
position: relative;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
border: 1px solid var(--border-color);
}
.close-modal {
position: absolute;
top: 20px;
right: 20px;
font-size: 24px;
color: var(--text-color);
cursor: pointer;
background: none;
border: none;
}
.modal-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
color: var(--primary-color);
text-align: center;
}
/* 二维码弹窗样式 */
.qr-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1001;
justify-content: center;
align-items: center;
}
.qr-content {
background-color: var(--card-bg);
border-radius: 20px;
padding: 30px;
text-align: center;
position: relative;
max-width: 300px;
border: 1px solid var(--border-color);
}
.qr-title {
font-size: 20px;
margin-bottom: 20px;
color: var(--primary-color);
}
.qr-code {
width: 200px;
height: 200px;
margin: 0 auto 20px;
background-color: white;
padding: 10px;
border-radius: 10px;
}
.qr-close {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
color: var(--text-color);
cursor: pointer;
background: none;
border: none;
}
/* 响应式调整 */
@media (max-width: 1000px) {
body {
min-width: auto;
overflow-x: auto;
padding: 0 15px;
}
.container {
width: 100%;
padding: 20px;
}
.profile-card, .section {
padding: 20px;
}
.domains-grid, .products-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.domains-grid, .products-grid {
grid-template-columns: repeat(2, 1fr);
}
.skill-tag {
font-size: 12px;
padding: 5px 10px;
}
.social-link {
width: 35px;
height: 35px;
font-size: 16px;
}
.name {
font-size: 24px;
}
.title {
font-size: 16px;
}
}
@media (max-width: 480px) {
.domains-grid, .products-grid {
grid-template-columns: 1fr;
}
.action-buttons {
flex-direction: column;
align-items: center;
}
.btn {
width: 100%;
max-width: 200px;
margin-bottom: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<main>
<section class="profile-card">
<div class="avatar-container">
<img src="https://img.29o.cn/i/2025/06/13/684c48cd19b4c.jpg" alt="头像" class="avatar">
</div>
<h2 class="name">南方的行者-South</h2>
<p class="title">深谙所有做坏事的套路，更应努力控制 ，绕道而行。</p>
<p class="bio">
路虽远，行则将至，事虽难，做则必成，漫漫长路，必见曙光。《荀子·修身》
</p>
<!-- 技能标签 -->
<div class="skills-container">
<span class="skill-tag" style="animation-delay: 0.1s">HTML5</span>
<span class="skill-tag" style="animation-delay: 0.2s">内容整合</span>
<span class="skill-tag" style="animation-delay: 0.3s">社区运营</span>
<span class="skill-tag" style="animation-delay: 0.4s">服务器</span>
<span class="skill-tag" style="animation-delay: 0.5s">VPS</span>
<span class="skill-tag" style="animation-delay: 0.6s">防御加速</span>
<span class="skill-tag" style="animation-delay: 0.7s">CDN</span>
<span class="skill-tag" style="animation-delay: 0.8s">响应式设计</span>
</div>
<div class="social-links">
<a href="#" class="social-link" id="wechatLink" title="微信"><i class="fab fa-weixin"></i></a>
<a href="#" class="social-link" id="qqLink" title="QQ"><i class="fab fa-qq"></i></a>
<a href="mailto:mail@bbs.al" class="social-link" title="邮箱"><i class="fas fa-envelope"></i></a>
<a href="https://space.bilibili.com/9742333" target="_blank" class="social-link" title="哔哩哔哩"><i class="fab fa-bilibili"></i></a>
<a href="https://t.me/zhinan8" target="_blank" class="social-link" title="Telegram"><i class="fab fa-telegram"></i></a>
</div>
<div class="contact-info">
<div class="contact-item">
<i class="fas fa-phone"></i>
<span>909-909-5333</span>
</div>
<div class="contact-item">
<i class="fas fa-map-marker-alt"></i>
<span>中国.云南</span>
</div>
</div>
<div class="action-buttons">
<button class="btn btn-primary" id="showProductsBtn">
旗下产品
</button>
<button class="btn btn-outline" id="showDomainsBtn">
在售域名
</button>
</div>
</section>
</main>
</div>
<!-- 产品展示模态框 -->
<div class="modal" id="productsModal">
<div class="modal-content">
<button class="close-modal" id="closeProductsModal">×</button>
<h3 class="modal-title">旗下产品</h3>
<div class="products-grid">
<div class="product-card">
<h4 class="product-title">大圣云计算</h4>
<p class="product-desc">海外服务器仅需15/月起</p>
<a href="https://vps.ink" class="product-link">访问网站</a>
</div>
<div class="product-card">
<h4 class="product-title">壹个CDN</h4>
<p class="product-desc">无视CC，死扛DDOS</p>
<a href="https://www.onecdn.cc" class="product-link">访问网站</a>
</div>
<div class="product-card">
<h4 class="product-title">乐安社区</h4>
<p class="product-desc">站长域名主机交流社区</p>
<a href="https://bbs.al" class="product-link">访问网站</a>
</div>
<div class="product-card">
<h4 class="product-title">栗码付</h4>
<p class="product-desc">免签约即时到账系统</p>
<a href="https://mzf.li" class="product-link">访问网站</a>
</div>
<div class="product-card">
<h4 class="product-title">智南ಇBlog</h4>
<p class="product-desc">个人吐槽发文章的博客</p>
<a href="https://29o.cn" class="product-link">访问网站</a>
</div>
<div class="product-card">
<h4 class="product-title">南方的行者</h4>
<p class="product-desc">偶尔分享点干活的博客</p>
<a href="https://blog.29o.cn" class="product-link">访问网站</a>
</div>
<div class="product-card">
<h4 class="product-title">技术导航网</h4>
<p class="product-desc">实用好用的网址收录站</p>
<a href="https://dh.29o.cn" class="product-link">访问网站</a>
</div>
<div class="product-card">
<h4 class="product-title">公益网盘</h4>
<p class="product-desc">方便自己也方便了他人</p>
<a href="https://pan.29o.cn" class="product-link">访问网站</a>
</div>
<div class="product-card">
<h4 class="product-title">公益图床</h4>
<p class="product-desc">还是方便自己且用且珍惜</p>
<a href="https://img.29o.cn" class="product-link">访问网站</a>
</div>
<div class="product-card">
<h4 class="product-title">彩虹聚合登录</h4>
<p class="product-desc">支持QQ微信支付宝百度等多种登录</p>
<a href="https://login.29o.cn" class="product-link">访问网站</a>
</div>
<div class="product-card">
<h4 class="product-title">自由-TV</h4>
<p class="product-desc">不存储只调用还是为了方便自己</p>
<a href="https://tv.29o.cn" class="product-link">访问网站</a>
</div>
<div class="product-card">
<h4 class="product-title">节点状态</h4>
<p class="product-desc">方便看自己的母鸡小鸡状态</p>
<a href="https://server.29o.cn/" class="product-link">访问网站</a>
</div>
</div>
</div>
</div>
<!-- 域名展示模态框 -->
<div class="modal" id="domainsModal">
<div class="modal-content">
<button class="close-modal" id="closeDomainsModal">×</button>
<h3 class="modal-title">在售域名</h3>
<div class="domains-grid">
<div class="domain-card">
<h4 class="domain-name">suibi.me</h4>
<p class="domain-price">¥888</p>
<span class="domain-status status-available">可购买</span>
</div>
<div class="domain-card">
<h4 class="domain-name">css.skin</h4>
<p class="domain-price">¥88</p>
<span class="domain-status status-available">可购买</span>
</div>
<div class="domain-card">
<h4 class="domain-name">83.AL</h4>
<p class="domain-price">¥500</p>
<span class="domain-status status-sold">可购买</span>
</div>
<div class="domain-card">
<h4 class="domain-name">14.AL</h4>
<p class="domain-price">¥500</p>
<span class="domain-status status-available">可购买</span>
</div>
<div class="domain-card">
<h4 class="domain-name">BBS.AL</h4>
<p class="domain-price">¥5,000</p>
<span class="domain-status status-available">可购买</span>
</div>
<div class="domain-card">
<h4 class="domain-name">YYDS.AL</h4>
<p class="domain-price">¥1000</p>
<span class="domain-status status-available">可购买</span>
</div>
<div class="domain-card">
<h4 class="domain-name">euw.cc</h4>
<p class="domain-price">¥300</p>
<span class="domain-status status-sold">可购买</span>
</div>
<div class="domain-card">
<h4 class="domain-name">CNMB.skin</h4>
<p class="domain-price">¥98</p>
<span class="domain-status status-available">可购买</span>
</div>
<div class="domain-card">
<h4 class="domain-name">6l8.cn</h4>
<p class="domain-price">¥900</p>
<span class="domain-status status-available">可购买</span>
</div>
<div class="domain-card">
<h4 class="domain-name">txt.skin</h4>
<p class="domain-price">¥68</p>
<span class="domain-status status-available">可购买</span>
</div>
<div class="domain-card">
<h4 class="domain-name">vron.cn</h4>
<p class="domain-price">¥98</p>
<span class="domain-status status-sold">可购买</span>
</div>
<div class="domain-card">
<h4 class="domain-name">vps.ink</h4>
<p class="domain-price">¥19999</p>
<span class="domain-status status-available">可购买</span>
</div>
</div>
</div>
</div>
<!-- 微信二维码弹窗 -->
<div class="qr-modal" id="wechatModal">
<div class="qr-content">
<button class="qr-close" id="closeWechatModal">×</button>
<h3 class="qr-title">微信添加好友</h3>
<div class="qr-code">
<img src="https://img.29o.cn/i/2025/05/13/68232a0774677.png" alt="微信二维码" style="width:100%;height:100%;">
</div>
<p>扫描二维码添加我的微信</p>
</div>
</div>
<!-- QQ二维码弹窗 -->
<div class="qr-modal" id="qqModal">
<div class="qr-content">
<button class="qr-close" id="closeQQModal">×</button>
<h3 class="qr-title">QQ添加好友</h3>
<div class="qr-code">
<img src="https://img.29o.cn/i/2025/05/13/68232a07cd626.png" alt="QQ二维码" style="width:100%;height:100%;">
</div>
<p>扫描二维码添加我的QQ</p>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 模态框功能
const productsModal = document.getElementById('productsModal');
const domainsModal = document.getElementById('domainsModal');
const showProductsBtn = document.getElementById('showProductsBtn');
const showDomainsBtn = document.getElementById('showDomainsBtn');
const closeProductsModal = document.getElementById('closeProductsModal');
const closeDomainsModal = document.getElementById('closeDomainsModal');
showProductsBtn.addEventListener('click', function() {
productsModal.style.display = 'flex';
document.body.style.overflow = 'hidden';
});
showDomainsBtn.addEventListener('click', function() {
domainsModal.style.display = 'flex';
document.body.style.overflow = 'hidden';
});
closeProductsModal.addEventListener('click', function() {
productsModal.style.display = 'none';
document.body.style.overflow = 'auto';
});
closeDomainsModal.addEventListener('click', function() {
domainsModal.style.display = 'none';
document.body.style.overflow = 'auto';
});
window.addEventListener('click', function(event) {
if (event.target === productsModal) {
productsModal.style.display = 'none';
document.body.style.overflow = 'auto';
}
if (event.target === domainsModal) {
domainsModal.style.display = 'none';
document.body.style.overflow = 'auto';
}
});
// 二维码弹窗功能
const wechatModal = document.getElementById('wechatModal');
const qqModal = document.getElementById('qqModal');
const wechatLink = document.getElementById('wechatLink');
const qqLink = document.getElementById('qqLink');
const closeWechatModal = document.getElementById('closeWechatModal');
const closeQQModal = document.getElementById('closeQQModal');
wechatLink.addEventListener('click', function(e) {
e.preventDefault();
wechatModal.style.display = 'flex';
document.body.style.overflow = 'hidden';
});
qqLink.addEventListener('click', function(e) {
e.preventDefault();
qqModal.style.display = 'flex';
document.body.style.overflow = 'hidden';
});
closeWechatModal.addEventListener('click', function() {
wechatModal.style.display = 'none';
document.body.style.overflow = 'auto';
});
closeQQModal.addEventListener('click', function() {
qqModal.style.display = 'none';
document.body.style.overflow = 'auto';
});
window.addEventListener('click', function(event) {
if (event.target === wechatModal) {
wechatModal.style.display = 'none';
document.body.style.overflow = 'auto';
}
if (event.target === qqModal) {
qqModal.style.display = 'none';
document.body.style.overflow = 'auto';
}
});
// 技能标签动画延迟设置
const skillTags = document.querySelectorAll('.skill-tag');
skillTags.forEach((tag, index) => {
tag.style.animationDelay = `${index * 0.1 + 0.1}s`;
});
// 确保所有设备都得到良好体验
function enforceGoodExperience() {
// 已经通过媒体查询实现了响应式设计
// 这里可以添加额外的兼容性处理
if (/Android|iPhone|iPad|iPod/i.test(navigator.userAgent)) {
document.body.classList.add('mobile-device');
}
}
window.addEventListener('resize', enforceGoodExperience);
enforceGoodExperience();
});
</script>
</body>
</html>markup
探索未知的世界，发现更好的自己 ✨邮件：mail@bbs.al
收藏的用户（0）
X
正在加载信息~
广告推荐
