代码在这！
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>乱记（Luan-ji）</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f9;
color: #333;
margin: 0;
padding: 20px;
transition: background-color 0.3s, color 0.3s;
}
.night-mode {
background-color: #2c3e50;
color: #ecf0f1;
}
.container {
max-width: 800px;
margin: auto;
}
[url=home.php?mod=space&uid=945662]@media[/url] (max-width: 768px) {
.container {
max-width: 100%;
padding: 10px;
}
}
@media (min-width: 1200px) {
.container {
padding: 40px;
}
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
h1 {
font-size: 2.5em;
font-weight: bold;
color: #007bff;
}
.theme-toggle button {
padding: 10px 20px;
border: none;
background-color: #99ccff;
color: white;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.theme-toggle button:hover {
background-color: #007bff;
}
.search-bar {
position: relative;
margin-bottom: 20px;
}
.search-bar i {
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
color: #aaa;
}
.search-bar input {
width: calc(100% - 50px);
padding: 10px 40px 10px 40px;
border: 1px solid #ccc;
border-radius: 5px;
outline: none;
transition: border-color 0.5s;
}
.search-bar input:focus {
border-color: #007bff;
border-width: 2px;
}
.note-input textarea {
width: 100%;
height: 150px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
resize: vertical;
outline: none;
transition: border-color 0.5s;
}
.note-input textarea::placeholder {
opacity: 0.5;
color: #999;
}
.note-input textarea:focus {
border-color: #007bff;
border-width: 2px;
}
.notes-container {
margin-top: 20px;
}
.note {
background-color: #ffffff;
border: 1px solid #ddd;
border-radius: 10px;
padding: 15px;
margin-bottom: 15px;
position: relative;
display: flex;
align-items: flex-start;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s;
}
.note:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.note:nth-child(even) {
background-color: #f2f2f2;
}
.note.locked::after {
content: '🔒';
position: absolute;
right: 15px;
top: 15px;
color: red;
}
.note-tools {
display: flex;
align-items: center;
margin-right: 15px;
}
.note-tools button {
padding: 8px 15px;
border: none;
background-color: #007bff;
color: white;
border-radius: 5px;
cursor: pointer;
margin-left: 10px;
transition: background-color 0.3s;
}
.note-tools button:hover {
background-color: #0056b3;
}
.note-tools .copy-count {
color: #555;
text-align: right;
margin-right: 15px;
}
.note-content {
flex-grow: 1;
}
.tag-manager {
margin-top: 20px;
display: flex;
flex-direction: column;
}
.tag-manager input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
outline: none;
transition: border-color 0.5s;
}
.tag-manager input:focus {
border-color: #007bff;
border-width: 2px;
}
.tag-manager button {
padding: 10px 20px;
border: none;
background-color: #007bff;
color: white;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
transition: background-color 0.3s;
}
.tag-manager button:hover {
background-color: #0056b3;
}
.tags-container {
margin-top: 20px;
max-height: 200px;
overflow-y: auto;
}
.tag-item {
background-color: #e9ecef;
border: 1px solid #ddd;
border-radius: 10px;
padding: 15px;
margin-bottom: 15px;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s;
}
.tag-item:hover {
background-color: #dcdcdc;
}
.tag-item button {
padding: 8px 15px;
border: none;
background-color: #007bff;
color: white;
border-radius: 5px;
cursor: pointer;
margin-left: 5px;
transition: background-color 0.3s;
}
.tag-item button:hover {
background-color: #0056b3;
}
.tag-date {
color: #555;
font-size: 0.9em;
}
.toast {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: white;
padding: 10px 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
z-index: 1000;
opacity: 0;
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.toast.show {
opacity: 1;
transform: translateX(-50%) translateY(20px);
}
.note-number {
margin-right: 15px;
font-weight: bold;
color: #007bff;
}
.footer {
margin-top: 40px;
text-align: center;
font-size: 0.9em;
color: #777;
}
.footer a {
color: #007bff;
text-decoration: none;
transition: color 0.3s;
}
.footer a:hover {
color: #0056b3;
}
/* Prevent text selection */
* {
user-select: none; /* Standard syntax */
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>乱记（Luan-ji）</h1>
<div class="theme-toggle">
<button>夜间模式</button>
</div>
</div>
<div class="search-bar">
<i class="fas fa-search"></i>
<input type="text" id="searchInput" placeholder="搜索便签...">
</div>
<div class="note-input">
<textarea id="noteInput" placeholder="请在这里写下你的便签..."></textarea>
<button>添加便签</button>
</div>
<div class="tag-manager">
<input type="text" id="tagInput" placeholder="创建标签...">
<button>创建标签</button>
</div>
<div class="tags-container" id="tagsContainer">
<!-- Tags will be added here -->
</div>
<div class="notes-container" id="notesContainer">
<!-- Notes will be added here -->
</div>
<div class="toast" id="toast"></div>
<div class="footer">
Designed by <a href="#" target="_blank">Nong Wenlong</a>
</div>
</div>
<script>
// Disable right-click context menu
document.addEventListener('contextmenu', function(event) {
event.preventDefault();
});
let notes = JSON.parse(localStorage.getItem('notes')) || [];
let tags = JSON.parse(localStorage.getItem('tags')) || [];
function saveData() {
localStorage.setItem('notes', JSON.stringify(notes));
localStorage.setItem('tags', JSON.stringify(tags));
}
function renderNotes() {
const container = document.getElementById('notesContainer');
container.innerHTML = '';
const searchQuery = document.getElementById('searchInput').value.toLowerCase();
const sortedNotes = [...notes].sort((a, b) => b.copyCount - a.copyCount);
sortedNotes.forEach((note, index) => {
if (note.content.toLowerCase().includes(searchQuery)) {
const noteElement = document.createElement('div');
noteElement.className = `note ${note.locked ? 'locked' : ''}`;
noteElement.innerHTML = `
<div class="note-tools">
<span class="copy-count">复制次数: ${note.copyCount}</span>
<button>编辑</button>
<button>删除</button>
<button>${note.locked ? '解锁' : '锁定'}</button>
<button>一键复制</button>
</div>
<div class="note-content">
<p contenteditable="${note.editing}">${note.content}</p>
</div>
`;
// Add note number
const noteNumber = document.createElement('div');
noteNumber.className = 'note-number';
noteNumber.textContent = `${index + 1}.`;
noteElement.prepend(noteNumber);
container.appendChild(noteElement);
}
});
}
function addNote() {
const content = document.getElementById('noteInput').value.trim();
if (content) {
const newNote = {
id: Date.now(),
content,
copyCount: 0,
locked: false,
editing: false,
history: [content]
};
notes.push(newNote);
document.getElementById('noteInput').value = '';
saveData();
renderNotes();
}
}
function editNote(id) {
const note = notes.find(note => note.id === id);
if (note && !note.locked) {
note.editing = true;
saveData();
renderNotes();
}
}
function saveEdit(id, newContent) {
const note = notes.find(note => note.id === id);
if (note) {
note.content = newContent;
note.history.push(newContent);
note.editing = false;
saveData();
renderNotes();
}
}
function deleteNote(id) {
const noteIndex = notes.findIndex(note => note.id === id);
if (noteIndex !== -1 && !notes[noteIndex].locked) {
notes.splice(noteIndex, 1);
saveData();
renderNotes();
}
}
function lockNote(id) {
const note = notes.find(note => note.id === id);
if (note) {
note.locked = !note.locked;
saveData();
renderNotes();
}
}
function createTag() {
const tagName = document.getElementById('tagInput').value.trim();
if (tagName && !tags.some(tag => tag.name === tagName)) {
const newTag = {
id: Date.now(),
name: tagName,
createdAt: new Date().toLocaleString()
};
tags.push(newTag);
document.getElementById('tagInput').value = '';
saveData();
renderTags();
}
}
function editTag(id) {
const tag = tags.find(tag => tag.id === id);
if (tag) {
document.getElementById('tagInput').value = tag.name;
document.getElementById('tagInput').focus();
// Remove the tag after editing
tags = tags.filter(tag => tag.id !== id);
saveData();
renderTags();
}
}
function renderTags() {
const container = document.getElementById('tagsContainer');
container.innerHTML = '';
tags.forEach(tag => {
const tagElement = document.createElement('div');
tagElement.className = 'tag-item';
tagElement.innerHTML = `
<span>${tag.name}</span>
<span class="tag-date">${tag.createdAt}</span>
<button>复制</button>
<button>编辑</button>
`;
container.appendChild(tagElement);
});
}
function copyTag(tagName) {
navigator.clipboard.writeText(tagName)
.then(() => showTooltip(`标签 "${tagName}" 已复制到剪贴板`))
.catch(err => console.error('无法复制文本: ', err));
}
function copyNoteContent(id) {
const note = notes.find(note => note.id === id);
if (note) {
navigator.clipboard.writeText(note.content)
.then(() => {
note.copyCount++;
saveData();
renderNotes();
showTooltip('便签内容已复制到剪贴板');
})
.catch(err => console.error('无法复制文本: ', err));
}
}
function toggleNightMode() {
document.body.classList.toggle('night-mode');
updateToastStyle();
}
function updateToastStyle() {
const toast = document.getElementById('toast');
if (document.body.classList.contains('night-mode')) {
toast.style.backgroundColor = '#ecf0f1';
toast.style.color = '#2c3e50';
} else {
toast.style.backgroundColor = '#333';
toast.style.color = 'white';
}
}
function showTooltip(message) {
const toast = document.getElementById('toast');
toast.textContent = message;
toast.classList.add('show');
setTimeout(() => toast.classList.remove('show'), 2000);
}
document.getElementById('searchInput').addEventListener('input', renderNotes);
window.onload = () => {
renderNotes();
renderTags();
updateToastStyle();
};
// 快捷键支持
document.addEventListener('keydown', (event) => {
if (event.ctrlKey && event.key === 'Enter') {
addNote();
}
if (event.ctrlKey && event.key === 'F') {
document.getElementById('searchInput').focus();
}
});
</script>
</body>
</html>
| 
[复制链接]
发表于 2024-11-24 11:27
|
发表于 2024-12-5 21:41
