772 lines
26 KiB
HTML
772 lines
26 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>个人导航</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:root {
|
||
--bg-primary: #ffffff;
|
||
--bg-secondary: #f8f9fa;
|
||
--text-primary: #2c3e50;
|
||
--text-secondary: #6c757d;
|
||
--text-muted: #adb5bd;
|
||
--border-color: #e9ecef;
|
||
--accent-color: #3498db;
|
||
--hover-bg: #f1f3f5;
|
||
--shadow-sm: 0 2px 4px rgba(0,0,0,0.08);
|
||
--shadow-md: 0 4px 12px rgba(0,0,0,0.1);
|
||
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
[data-theme="dark"] {
|
||
--bg-primary: #1a1a1a;
|
||
--bg-secondary: #2d2d2d;
|
||
--text-primary: #e9ecef;
|
||
--text-secondary: #adb5bd;
|
||
--text-muted: #6c757d;
|
||
--border-color: #404040;
|
||
--accent-color: #5dade2;
|
||
--hover-bg: #343434;
|
||
--shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
|
||
--shadow-md: 0 4px 12px rgba(0,0,0,0.4);
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||
background: var(--bg-primary);
|
||
color: var(--text-primary);
|
||
line-height: 1.6;
|
||
transition: var(--transition);
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
/* Header */
|
||
header {
|
||
padding: 40px 0;
|
||
text-align: center;
|
||
border-bottom: 1px solid var(--border-color);
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.header-content {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 2rem;
|
||
font-weight: 300;
|
||
letter-spacing: 2px;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.theme-toggle {
|
||
background: none;
|
||
border: 1px solid var(--border-color);
|
||
color: var(--text-primary);
|
||
padding: 8px 12px;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
transition: var(--transition);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.theme-toggle:hover {
|
||
background: var(--hover-bg);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
/* Search */
|
||
.search-section {
|
||
margin-bottom: 50px;
|
||
}
|
||
|
||
.search-container {
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
position: relative;
|
||
}
|
||
|
||
.search-input {
|
||
width: 100%;
|
||
padding: 16px 20px;
|
||
font-size: 16px;
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 8px;
|
||
background: var(--bg-secondary);
|
||
color: var(--text-primary);
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.search-input:focus {
|
||
outline: none;
|
||
border-color: var(--accent-color);
|
||
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
|
||
}
|
||
|
||
.search-hint {
|
||
position: absolute;
|
||
right: 20px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: var(--text-muted);
|
||
font-size: 14px;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* Navigation Grid */
|
||
.nav-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 30px;
|
||
margin-bottom: 50px;
|
||
}
|
||
|
||
.nav-category {
|
||
background: var(--bg-secondary);
|
||
border-radius: 12px;
|
||
padding: 24px;
|
||
transition: var(--transition);
|
||
border: 1px solid var(--border-color);
|
||
}
|
||
|
||
.nav-category:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.category-title {
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
margin-bottom: 16px;
|
||
color: var(--text-primary);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.category-title::before {
|
||
content: '';
|
||
width: 3px;
|
||
height: 18px;
|
||
background: var(--accent-color);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.link-list {
|
||
list-style: none;
|
||
}
|
||
|
||
.link-item {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.link-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.link {
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
font-size: 15px;
|
||
display: inline-block;
|
||
transition: var(--transition);
|
||
position: relative;
|
||
padding: 4px 0;
|
||
}
|
||
|
||
.link::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 0;
|
||
height: 1px;
|
||
background: var(--accent-color);
|
||
transition: width 0.3s ease;
|
||
}
|
||
|
||
.link:hover {
|
||
color: var(--accent-color);
|
||
transform: translateX(4px);
|
||
}
|
||
|
||
.link:hover::after {
|
||
width: 100%;
|
||
}
|
||
|
||
/* Quick Links */
|
||
.quick-links {
|
||
background: var(--bg-secondary);
|
||
border-radius: 12px;
|
||
padding: 30px;
|
||
margin-bottom: 40px;
|
||
border: 1px solid var(--border-color);
|
||
}
|
||
|
||
.quick-links-title {
|
||
font-size: 20px;
|
||
font-weight: 500;
|
||
margin-bottom: 20px;
|
||
text-align: center;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.quick-links-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 20px;
|
||
justify-content: center;
|
||
}
|
||
|
||
.quick-link {
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
padding: 8px 16px;
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 20px;
|
||
transition: var(--transition);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.quick-link:hover {
|
||
background: var(--accent-color);
|
||
color: white;
|
||
border-color: var(--accent-color);
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
/* Footer */
|
||
footer {
|
||
text-align: center;
|
||
padding: 30px 0;
|
||
color: var(--text-muted);
|
||
font-size: 14px;
|
||
border-top: 1px solid var(--border-color);
|
||
}
|
||
|
||
/* Edit Mode */
|
||
.edit-btn {
|
||
position: fixed;
|
||
bottom: 30px;
|
||
right: 30px;
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 50%;
|
||
background: var(--accent-color);
|
||
color: white;
|
||
border: none;
|
||
cursor: pointer;
|
||
box-shadow: var(--shadow-md);
|
||
transition: var(--transition);
|
||
font-size: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.edit-btn:hover {
|
||
transform: scale(1.1);
|
||
box-shadow: 0 6px 20px rgba(52, 152, 219, 0.3);
|
||
}
|
||
|
||
/* Modal */
|
||
.modal {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
z-index: 1000;
|
||
animation: fadeIn 0.3s ease;
|
||
}
|
||
|
||
.modal.active {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.modal-content {
|
||
background: var(--bg-primary);
|
||
border-radius: 12px;
|
||
padding: 30px;
|
||
max-width: 500px;
|
||
width: 90%;
|
||
max-height: 80vh;
|
||
overflow-y: auto;
|
||
animation: slideUp 0.3s ease;
|
||
}
|
||
|
||
.modal-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.modal-title {
|
||
font-size: 20px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.close-btn {
|
||
background: none;
|
||
border: none;
|
||
font-size: 24px;
|
||
cursor: pointer;
|
||
color: var(--text-secondary);
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.close-btn:hover {
|
||
color: var(--text-primary);
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.form-label {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
font-size: 14px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.form-input {
|
||
width: 100%;
|
||
padding: 10px;
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 6px;
|
||
background: var(--bg-secondary);
|
||
color: var(--text-primary);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.form-input:focus {
|
||
outline: none;
|
||
border-color: var(--accent-color);
|
||
}
|
||
|
||
.btn-primary {
|
||
background: var(--accent-color);
|
||
color: white;
|
||
border: none;
|
||
padding: 10px 20px;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
transition: var(--transition);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
opacity: 0.9;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
/* Animations */
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
@keyframes slideUp {
|
||
from {
|
||
transform: translateY(20px);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translateY(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 768px) {
|
||
h1 {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.header-content {
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
}
|
||
|
||
.nav-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 20px;
|
||
}
|
||
|
||
.quick-links-grid {
|
||
gap: 12px;
|
||
}
|
||
|
||
.quick-link {
|
||
font-size: 13px;
|
||
padding: 6px 12px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<div class="container">
|
||
<div class="header-content">
|
||
<h1>我的导航</h1>
|
||
<button class="theme-toggle" onclick="toggleTheme()">🌙 深色</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="container">
|
||
<!-- Search Section -->
|
||
<section class="search-section">
|
||
<div class="search-container">
|
||
<input
|
||
type="text"
|
||
class="search-input"
|
||
id="searchInput"
|
||
placeholder="搜索网站..."
|
||
onkeyup="searchLinks(event)"
|
||
>
|
||
<span class="search-hint">Ctrl+K</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Quick Links -->
|
||
<section class="quick-links">
|
||
<h2 class="quick-links-title">快速访问</h2>
|
||
<div class="quick-links-grid" id="quickLinks">
|
||
<a href="https://www.google.com" class="quick-link" target="_blank">Google</a>
|
||
<a href="https://github.com" class="quick-link" target="_blank">GitHub</a>
|
||
<a href="https://www.youtube.com" class="quick-link" target="_blank">YouTube</a>
|
||
<a href="https://www.bilibili.com" class="quick-link" target="_blank">哔哩哔哩</a>
|
||
<a href="https://www.zhihu.com" class="quick-link" target="_blank">知乎</a>
|
||
<a href="https://www.weibo.com" class="quick-link" target="_blank">微博</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Navigation Grid -->
|
||
<div class="nav-grid" id="navGrid">
|
||
<!-- 工作相关 -->
|
||
<div class="nav-category">
|
||
<h3 class="category-title">工作相关</h3>
|
||
<ul class="link-list">
|
||
<li class="link-item"><a href="https://mail.google.com" class="link" target="_blank">Gmail</a></li>
|
||
<li class="link-item"><a href="https://calendar.google.com" class="link" target="_blank">Google Calendar</a></li>
|
||
<li class="link-item"><a href="https://docs.google.com" class="link" target="_blank">Google Docs</a></li>
|
||
<li class="link-item"><a href="https://trello.com" class="link" target="_blank">Trello</a></li>
|
||
<li class="link-item"><a href="https://slack.com" class="link" target="_blank">Slack</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 开发工具 -->
|
||
<div class="nav-category">
|
||
<h3 class="category-title">开发工具</h3>
|
||
<ul class="link-list">
|
||
<li class="link-item"><a href="https://stackoverflow.com" class="link" target="_blank">Stack Overflow</a></li>
|
||
<li class="link-item"><a href="https://developer.mozilla.org" class="link" target="_blank">MDN Web Docs</a></li>
|
||
<li class="link-item"><a href="https://codepen.io" class="link" target="_blank">CodePen</a></li>
|
||
<li class="link-item"><a href="https://codesandbox.io" class="link" target="_blank">CodeSandbox</a></li>
|
||
<li class="link-item"><a href="https://npmjs.com" class="link" target="_blank">NPM</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 设计资源 -->
|
||
<div class="nav-category">
|
||
<h3 class="category-title">设计资源</h3>
|
||
<ul class="link-list">
|
||
<li class="link-item"><a href="https://dribbble.com" class="link" target="_blank">Dribbble</a></li>
|
||
<li class="link-item"><a href="https://behance.net" class="link" target="_blank">Behance</a></li>
|
||
<li class="link-item"><a href="https://unsplash.com" class="link" target="_blank">Unsplash</a></li>
|
||
<li class="link-item"><a href="https://figma.com" class="link" target="_blank">Figma</a></li>
|
||
<li class="link-item"><a href="https://coolors.co" class="link" target="_blank">Coolors</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 学习平台 -->
|
||
<div class="nav-category">
|
||
<h3 class="category-title">学习平台</h3>
|
||
<ul class="link-list">
|
||
<li class="link-item"><a href="https://coursera.org" class="link" target="_blank">Coursera</a></li>
|
||
<li class="link-item"><a href="https://edx.org" class="link" target="_blank">edX</a></li>
|
||
<li class="link-item"><a href="https://udemy.com" class="link" target="_blank">Udemy</a></li>
|
||
<li class="link-item"><a href="https://khanacademy.org" class="link" target="_blank">Khan Academy</a></li>
|
||
<li class="link-item"><a href="https://freecodecamp.org" class="link" target="_blank">freeCodeCamp</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 新闻资讯 -->
|
||
<div class="nav-category">
|
||
<h3 class="category-title">新闻资讯</h3>
|
||
<ul class="link-list">
|
||
<li class="link-item"><a href="https://news.ycombinator.com" class="link" target="_blank">Hacker News</a></li>
|
||
<li class="link-item"><a href="https://www.reddit.com" class="link" target="_blank">Reddit</a></li>
|
||
<li class="link-item"><a href="https://producthunt.com" class="link" target="_blank">Product Hunt</a></li>
|
||
<li class="link-item"><a href="https://techcrunch.com" class="link" target="_blank">TechCrunch</a></li>
|
||
<li class="link-item"><a href="https://36kr.com" class="link" target="_blank">36氪</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 娱乐休闲 -->
|
||
<div class="nav-category">
|
||
<h3 class="category-title">娱乐休闲</h3>
|
||
<ul class="link-list">
|
||
<li class="link-item"><a href="https://www.netflix.com" class="link" target="_blank">Netflix</a></li>
|
||
<li class="link-item"><a href="https://www.spotify.com" class="link" target="_blank">Spotify</a></li>
|
||
<li class="link-item"><a href="https://soundcloud.com" class="link" target="_blank">SoundCloud</a></li>
|
||
<li class="link-item"><a href="https://www.twitch.tv" class="link" target="_blank">Twitch</a></li>
|
||
<li class="link-item"><a href="https://www.douban.com" class="link" target="_blank">豆瓣</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<footer>
|
||
<div class="container">
|
||
<p>© 2024 个人导航页 | 用心收集，高效访问</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Edit Button -->
|
||
<button class="edit-btn" onclick="openEditModal()">✏️</button>
|
||
|
||
<!-- Edit Modal -->
|
||
<div class="modal" id="editModal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3 class="modal-title">添加新链接</h3>
|
||
<button class="close-btn" onclick="closeEditModal()">×</button>
|
||
</div>
|
||
<form onsubmit="addNewLink(event)">
|
||
<div class="form-group">
|
||
<label class="form-label">分类名称</label>
|
||
<input type="text" class="form-input" id="categoryName" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">链接名称</label>
|
||
<input type="text" class="form-input" id="linkName" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">链接地址</label>
|
||
<input type="url" class="form-input" id="linkUrl" required>
|
||
</div>
|
||
<button type="submit" class="btn-primary">添加链接</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Theme Toggle
|
||
function toggleTheme() {
|
||
const body = document.body;
|
||
const themeToggle = document.querySelector('.theme-toggle');
|
||
|
||
if (body.getAttribute('data-theme') === 'dark') {
|
||
body.removeAttribute('data-theme');
|
||
themeToggle.textContent = '🌙 深色';
|
||
localStorage.setItem('theme', 'light');
|
||
} else {
|
||
body.setAttribute('data-theme', 'dark');
|
||
themeToggle.textContent = '☀️ 浅色';
|
||
localStorage.setItem('theme', 'dark');
|
||
}
|
||
}
|
||
|
||
// Load saved theme
|
||
window.addEventListener('DOMContentLoaded', () => {
|
||
const savedTheme = localStorage.getItem('theme');
|
||
if (savedTheme === 'dark') {
|
||
document.body.setAttribute('data-theme', 'dark');
|
||
document.querySelector('.theme-toggle').textContent = '☀️ 浅色';
|
||
}
|
||
});
|
||
|
||
// Search functionality
|
||
function searchLinks(event) {
|
||
const searchTerm = event.target.value.toLowerCase();
|
||
const allLinks = document.querySelectorAll('.link');
|
||
const allCategories = document.querySelectorAll('.nav-category');
|
||
|
||
if (searchTerm === '') {
|
||
allLinks.forEach(link => {
|
||
link.parentElement.style.display = 'block';
|
||
});
|
||
allCategories.forEach(category => {
|
||
category.style.display = 'block';
|
||
});
|
||
return;
|
||
}
|
||
|
||
allCategories.forEach(category => {
|
||
let hasVisibleLinks = false;
|
||
const links = category.querySelectorAll('.link');
|
||
|
||
links.forEach(link => {
|
||
const text = link.textContent.toLowerCase();
|
||
if (text.includes(searchTerm)) {
|
||
link.parentElement.style.display = 'block';
|
||
hasVisibleLinks = true;
|
||
} else {
|
||
link.parentElement.style.display = 'none';
|
||
}
|
||
});
|
||
|
||
category.style.display = hasVisibleLinks ? 'block' : 'none';
|
||
});
|
||
}
|
||
|
||
// Keyboard shortcut for search
|
||
document.addEventListener('keydown', (e) => {
|
||
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
|
||
e.preventDefault();
|
||
document.getElementById('searchInput').focus();
|
||
}
|
||
});
|
||
|
||
// Modal functions
|
||
function openEditModal() {
|
||
document.getElementById('editModal').classList.add('active');
|
||
}
|
||
|
||
function closeEditModal() {
|
||
document.getElementById('editModal').classList.remove('active');
|
||
document.getElementById('categoryName').value = '';
|
||
document.getElementById('linkName').value = '';
|
||
document.getElementById('linkUrl').value = '';
|
||
}
|
||
|
||
// Add new link
|
||
function addNewLink(event) {
|
||
event.preventDefault();
|
||
|
||
const categoryName = document.getElementById('categoryName').value;
|
||
const linkName = document.getElementById('linkName').value;
|
||
const linkUrl = document.getElementById('linkUrl').value;
|
||
|
||
// Find or create category
|
||
let category = Array.from(document.querySelectorAll('.category-title'))
|
||
.find(title => title.textContent === categoryName)
|
||
?.parentElement;
|
||
|
||
if (!category) {
|
||
category = document.createElement('div');
|
||
category.className = 'nav-category';
|
||
category.innerHTML = `
|
||
<h3 class="category-title">${categoryName}</h3>
|
||
<ul class="link-list"></ul>
|
||
`;
|
||
document.getElementById('navGrid').appendChild(category);
|
||
}
|
||
|
||
// Add new link
|
||
const linkList = category.querySelector('.link-list');
|
||
const newLinkItem = document.createElement('li');
|
||
newLinkItem.className = 'link-item';
|
||
newLinkItem.innerHTML = `<a href="${linkUrl}" class="link" target="_blank">${linkName}</a>`;
|
||
linkList.appendChild(newLinkItem);
|
||
|
||
// Save to localStorage
|
||
saveCustomLinks();
|
||
|
||
// Close modal
|
||
closeEditModal();
|
||
|
||
// Show success message
|
||
showNotification('链接添加成功！');
|
||
}
|
||
|
||
// Save custom links to localStorage
|
||
function saveCustomLinks() {
|
||
const categories = [];
|
||
document.querySelectorAll('.nav-category').forEach(category => {
|
||
const title = category.querySelector('.category-title').textContent;
|
||
const links = [];
|
||
category.querySelectorAll('.link').forEach(link => {
|
||
links.push({
|
||
name: link.textContent,
|
||
url: link.href
|
||
});
|
||
});
|
||
categories.push({ title, links });
|
||
});
|
||
localStorage.setItem('customLinks', JSON.stringify(categories));
|
||
}
|
||
|
||
// Show notification
|
||
function showNotification(message) {
|
||
const notification = document.createElement('div');
|
||
notification.style.cssText = `
|
||
position: fixed;
|
||
top: 20px;
|
||
right: 20px;
|
||
background: var(--accent-color);
|
||
color: white;
|
||
padding: 12px 20px;
|
||
border-radius: 6px;
|
||
box-shadow: var(--shadow-md);
|
||
z-index: 2000;
|
||
animation: slideInRight 0.3s ease;
|
||
`;
|
||
notification.textContent = message;
|
||
document.body.appendChild(notification);
|
||
|
||
setTimeout(() => {
|
||
notification.style.animation = 'fadeOut 0.3s ease';
|
||
setTimeout(() => notification.remove(), 300);
|
||
}, 3000);
|
||
}
|
||
|
||
// Add animation styles
|
||
const style = document.createElement('style');
|
||
style.textContent = `
|
||
@keyframes slideInRight {
|
||
from {
|
||
transform: translateX(100%);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translateX(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
@keyframes fadeOut {
|
||
from {
|
||
opacity: 1;
|
||
}
|
||
to {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
|
||
// Close modal when clicking outside
|
||
document.getElementById('editModal').addEventListener('click', (e) => {
|
||
if (e.target === e.currentTarget) {
|
||
closeEditModal();
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |