204
2
因为买了个快30年的域名，于是就想着搞来收藏展示这个域名使用，用AI搓出来了，自适应，白天黑夜模式，联系方式，域名注册时间等
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>信仰 - SHANGO.NET</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #4a6cf7;
--text-color: #333;
--bg-color: #f8f9fa;
--card-bg: #ffffff;
--border-color: #eaeaea;
--secondary-text: #666;
--shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
--accent-color: #ff6b6b;
}
.dark-mode {
--primary-color: #6c8dfa;
--text-color: #e6e6e6;
--bg-color: #121212;
--card-bg: #1e1e1e;
--border-color: #333;
--secondary-text: #aaa;
--shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
--accent-color: #ff8e8e;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
transition: background-color 0.3s, color 0.3s, transform 0.3s, opacity 0.3s;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
line-height: 1.6;
padding: 20px;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(135deg, rgba(74, 108, 247, 0.05) 0%, rgba(255, 107, 107, 0.05) 100%);
}
.container {
max-width: 900px;
width: 100%;
margin: 0 auto;
}
header {
display: flex;
justify-content: flex-end;
align-items: center;
margin-bottom: 30px;
position: relative;
}
.theme-switch {
background: var(--card-bg);
border-radius: 50px;
padding: 8px 15px;
display: flex;
align-items: center;
cursor: pointer;
box-shadow: var(--shadow);
border: 1px solid var(--border-color);
transition: all 0.3s;
}
.theme-switch:hover {
transform: translateY(-2px);
box-shadow: 0 7px 20px rgba(0, 0, 0, 0.1);
}
.theme-switch i {
font-size: 18px;
margin: 0 5px;
}
.card {
background: var(--card-bg);
border-radius: 20px;
padding: 50px;
box-shadow: var(--shadow);
border: 1px solid var(--border-color);
margin-bottom: 30px;
text-align: center;
position: relative;
overflow: hidden;
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
}
.domain-name {
font-size: 4rem;
font-weight: 800;
color: var(--primary-color);
margin-bottom: 20px;
letter-spacing: 1px;
font-family: 'Courier New', monospace;
text-shadow: 0 2px 10px rgba(74, 108, 247, 0.2);
position: relative;
display: inline-block;
}
.domain-name::after {
content: '';
position: absolute;
bottom: -10px;
left: 10%;
width: 80%;
height: 3px;
background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}
.timer {
font-size: 1.5rem;
margin: 25px 0;
color: var(--secondary-text);
font-family: 'Courier New', monospace;
padding: 15px;
background: rgba(74, 108, 247, 0.05);
border-radius: 10px;
border: 1px solid var(--border-color);
}
.timer span {
font-weight: 600;
color: var(--primary-color);
}
.description {
color: var(--secondary-text);
font-size: 1.2rem;
max-width: 700px;
margin: 0 auto 30px;
line-height: 1.8;
padding: 0 20px;
}
.contact {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
margin-top: 30px;
position: relative;
}
.contact a, .contact .wechat-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
color: white;
font-size: 24px;
text-decoration: none;
transition: transform 0.3s, box-shadow 0.3s;
box-shadow: 0 4px 10px rgba(74, 108, 247, 0.3);
cursor: pointer;
border: none;
}
.contact a:hover, .contact .wechat-btn:hover {
transform: translateY(-5px) scale(1.1);
box-shadow: 0 7px 15px rgba(74, 108, 247, 0.4);
}
footer {
text-align: center;
margin-top: 40px;
color: var(--secondary-text);
font-size: 0.9rem;
padding: 20px;
border-top: 1px solid var(--border-color);
}
.quote-container {
margin: 30px 0;
perspective: 1000px;
}
.quote-card {
background: linear-gradient(135deg, rgba(74, 108, 247, 0.1), rgba(255, 107, 107, 0.1));
border-radius: 15px;
padding: 30px;
border: 1px solid var(--border-color);
box-shadow: var(--shadow);
transition: transform 0.5s;
position: relative;
overflow: hidden;
}
.quote-card:hover {
transform: rotateY(5deg) rotateX(5deg);
}
.quote-card::before {
content: '"';
position: absolute;
top: 10px;
left: 20px;
font-size: 5rem;
color: rgba(74, 108, 247, 0.2);
font-family: Georgia, serif;
line-height: 1;
}
.quote-text {
font-style: italic;
font-size: 1.3rem;
line-height: 1.7;
margin-bottom: 20px;
color: var(--text-color);
position: relative;
z-index: 1;
}
.quote-author {
text-align: right;
font-weight: 600;
color: var(--primary-color);
font-size: 1.1rem;
position: relative;
z-index: 1;
}
.quote-tags {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 15px;
}
.quote-tag {
background: rgba(74, 108, 247, 0.1);
color: var(--primary-color);
padding: 5px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
}
/* 二维码弹窗样式 */
.qrcode-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1000;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s;
}
.qrcode-modal.active {
display: flex;
opacity: 1;
}
.qrcode-content {
background: var(--card-bg);
border-radius: 15px;
padding: 30px;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
max-width: 300px;
width: 90%;
position: relative;
transform: scale(0.9);
transition: transform 0.3s;
}
.qrcode-modal.active .qrcode-content {
transform: scale(1);
}
.qrcode-content h3 {
margin-bottom: 20px;
color: var(--text-color);
}
.qrcode-img {
width: 200px;
height: 200px;
margin: 0 auto 20px;
background: linear-gradient(135deg, #07c160, #09bb07);
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
color: white;
font-size: 14px;
}
.qrcode-close {
position: absolute;
top: 10px;
right: 15px;
background: none;
border: none;
font-size: 24px;
color: var(--secondary-text);
cursor: pointer;
transition: color 0.3s;
}
.qrcode-close:hover {
color: var(--primary-color);
}
.qrcode-tip {
color: var(--secondary-text);
font-size: 14px;
margin-top: 15px;
}
@media (max-width: 768px) {
.domain-name {
font-size: 2.8rem;
}
.timer {
font-size: 1.2rem;
}
.card {
padding: 30px;
}
.quote-text {
font-size: 1.1rem;
}
}
@media (max-width: 480px) {
.domain-name {
font-size: 2.2rem;
}
.timer {
font-size: 1rem;
}
.description {
font-size: 1rem;
}
.contact a, .contact .wechat-btn {
width: 50px;
height: 50px;
font-size: 20px;
}
.quote-text {
font-size: 1rem;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="theme-switch" id="themeSwitch">
<i class="fas fa-sun"></i>
<i class="fas fa-moon"></i>
</div>
</header>
<main>
<div class="card">
<div class="domain-name">SHANGO.NET</div>
<p class="description">
这是我的个人域名，代表我对技术与创造的热情与信仰。这里将展示我的作品和项目，分享我的知识与见解。
</p>
<div class="quote-container">
<div class="quote-card">
<p class="quote-text">信仰不是看见才相信，而是相信了就会看见。在代码的世界里，每一次编译通过，每一个功能实现，都是信仰的见证。</p>
<p class="quote-author">—— 技术信仰者</p>
<div class="quote-tags">
<span class="quote-tag">信仰</span>
<span class="quote-tag">技术</span>
<span class="quote-tag">创造</span>
<span class="quote-tag">坚持</span>
</div>
</div>
</div>
<div class="timer">
已注册: <span id="years">0</span> 年 <span id="months">0</span> 月 <span id="days">0</span> 天
<span id="hours">0</span> 时 <span id="minutes">0</span> 分 <span id="seconds">0</span> 秒
</div>
<div class="contact">
<a href="mailto:contact@shango.net" title="发送邮件">
<i class="fas fa-envelope"></i>
</a>
<a href="#" title="QQ">
<i class="fab fa-qq"></i>
</a>
<button class="wechat-btn" title="微信" id="wechatBtn">
<i class="fab fa-weixin"></i>
</button>
<a href="#" title="哔哩哔哩">
<i class="fab fa-bilibili"></i>
</a>
<a href="https://blog.shango.net" title="博客" target="_blank">
<i class="fas fa-blog"></i>
</a>
</div>
</div>
</main>
<footer>
<p>© 2025 SHANGO.NET - 保留所有权利 | 信仰驱动创造</p>
</footer>
</div>
<!-- 微信二维码弹窗 -->
<div class="qrcode-modal" id="qrcodeModal">
<div class="qrcode-content">
<button class="qrcode-close" id="qrcodeClose">×</button>
<h3>微信联系</h3>
<div class="qrcode-img">
<!-- 这里可以替换为实际的二维码图片 -->
<span>微信二维码</span>
</div>
<p class="qrcode-tip">扫描二维码添加微信</p>
</div>
</div>
<script>
// 设置域名的注册日期 (请修改为您的实际注册日期)
const registrationDate = new Date('1997-01-20T00:00:00');
// 更新计时器
function updateTimer() {
const now = new Date();
const diff = now - registrationDate;
// 计算年、月、日、时、分、秒
const seconds = Math.floor(diff / 1000) % 60;
const minutes = Math.floor(diff / (1000 * 60)) % 60;
const hours = Math.floor(diff / (1000 * 60 * 60)) % 24;
const days = Math.floor(diff / (1000 * 60 * 60 * 24)) % 30;
const months = Math.floor(diff / (1000 * 60 * 60 * 24 * 30)) % 12;
const years = Math.floor(diff / (1000 * 60 * 60 * 24 * 365));
// 更新显示
document.getElementById('years').textContent = years;
document.getElementById('months').textContent = months;
document.getElementById('days').textContent = days;
document.getElementById('hours').textContent = hours;
document.getElementById('minutes').textContent = minutes;
document.getElementById('seconds').textContent = seconds;
}
// 初始更新
updateTimer();
// 每秒更新一次
setInterval(updateTimer, 1000);
// 明暗模式切换
const themeSwitch = document.getElementById('themeSwitch');
// 检查本地存储或系统偏好
if (localStorage.getItem('theme') === 'dark' ||
(window.matchMedia('(prefers-color-scheme: dark)').matches && !localStorage.getItem('theme'))) {
document.body.classList.add('dark-mode');
}
themeSwitch.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
localStorage.setItem('theme', document.body.classList.contains('dark-mode') ? 'dark' : 'light');
});
// 微信二维码弹窗功能
const wechatBtn = document.getElementById('wechatBtn');
const qrcodeModal = document.getElementById('qrcodeModal');
const qrcodeClose = document.getElementById('qrcodeClose');
// 点击微信按钮显示二维码
wechatBtn.addEventListener('click', () => {
qrcodeModal.classList.add('active');
});
// 点击关闭按钮隐藏二维码
qrcodeClose.addEventListener('click', () => {
qrcodeModal.classList.remove('active');
});
// 点击模态框背景隐藏二维码
qrcodeModal.addEventListener('click', (e) => {
if (e.target === qrcodeModal) {
qrcodeModal.classList.remove('active');
}
});
// 按ESC键隐藏二维码
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && qrcodeModal.classList.contains('active')) {
qrcodeModal.classList.remove('active');
}
});
</script>
</body>
</html>markup
探索未知的世界，发现更好的自己 ✨邮件：mail@int.cm
收藏的用户（0）
X
正在加载信息~
广告推荐
