|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>NeoNotes | Futuristic Notes App</title> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
:root { |
|
|
--primary: rgba(138, 180, 248, 0.8); |
|
|
--secondary: rgba(255, 122, 233, 0.8); |
|
|
--dark: rgba(16, 18, 27, 0.9); |
|
|
--light: rgba(255, 255, 255, 0.15); |
|
|
--text: rgba(255, 255, 255, 0.9); |
|
|
--highlight: rgba(255, 255, 255, 0.3); |
|
|
} |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
} |
|
|
|
|
|
body { |
|
|
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); |
|
|
min-height: 100vh; |
|
|
color: var(--text); |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.blur-bg { |
|
|
position: fixed; |
|
|
top: -0px; |
|
|
left: -0px; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
backdrop-filter: blur(16px); |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.container { |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
padding: 2rem; |
|
|
} |
|
|
|
|
|
|
|
|
header { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
margin-bottom: 2rem; |
|
|
padding-bottom: 1rem; |
|
|
border-bottom: 1px solid var(--light); |
|
|
} |
|
|
|
|
|
.logo { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.75rem; |
|
|
} |
|
|
|
|
|
.logo i { |
|
|
font-size: 2rem; |
|
|
color: var(--primary); |
|
|
} |
|
|
|
|
|
.logo h1 { |
|
|
font-weight: 600; |
|
|
background: linear-gradient(to right, var(--primary), var(--secondary)); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
letter-spacing: 1px; |
|
|
} |
|
|
|
|
|
.add-note-btn { |
|
|
background: var(--primary); |
|
|
border: none; |
|
|
padding: 0.75rem 1.5rem; |
|
|
border-radius: 50px; |
|
|
color: white; |
|
|
font-weight: 600; |
|
|
cursor: pointer; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.add-note-btn:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
|
|
|
.notes-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
|
|
gap: 1.5rem; |
|
|
} |
|
|
|
|
|
|
|
|
.note-card { |
|
|
background: rgba(16, 18, 27, 0.4); |
|
|
border-radius: 16px; |
|
|
backdrop-filter: blur(8px); |
|
|
-webkit-backdrop-filter: blur(8px); |
|
|
border: 1px solid var(--light); |
|
|
padding: 1.5rem; |
|
|
transition: all 0.3s ease; |
|
|
cursor: pointer; |
|
|
height: 200px; |
|
|
overflow: hidden; |
|
|
position: relative; |
|
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.note-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); |
|
|
border-color: var(--highlight); |
|
|
} |
|
|
|
|
|
.note-card.active { |
|
|
border-color: var(--primary); |
|
|
box-shadow: 0 0 0 2px var(--primary); |
|
|
} |
|
|
|
|
|
.note-title { |
|
|
font-size: 1.2rem; |
|
|
font-weight: 600; |
|
|
margin-bottom: 0.75rem; |
|
|
white-space: nowrap; |
|
|
overflow: hidden; |
|
|
text-overflow: ellipsis; |
|
|
} |
|
|
|
|
|
.note-content { |
|
|
font-size: 0.9rem; |
|
|
line-height: 1.5; |
|
|
color: rgba(255, 255, 255, 0.7); |
|
|
display: -webkit-box; |
|
|
-webkit-line-clamp: 5; |
|
|
-webkit-box-orient: vertical; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.note-date { |
|
|
position: absolute; |
|
|
bottom: 1rem; |
|
|
right: 1.5rem; |
|
|
font-size: 0.75rem; |
|
|
color: rgba(255, 255, 255, 0.5); |
|
|
} |
|
|
|
|
|
.note-actions { |
|
|
position: absolute; |
|
|
top: 1rem; |
|
|
right: 1rem; |
|
|
display: none; |
|
|
gap: 0.5rem; |
|
|
} |
|
|
|
|
|
.note-card:hover .note-actions { |
|
|
display: flex; |
|
|
} |
|
|
|
|
|
.note-action-btn { |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
border: none; |
|
|
width: 28px; |
|
|
height: 28px; |
|
|
border-radius: 50%; |
|
|
color: white; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
cursor: pointer; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.note-action-btn:hover { |
|
|
background: rgba(255, 255, 255, 0.2); |
|
|
} |
|
|
|
|
|
|
|
|
.single-note-view { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
backdrop-filter: blur(16px); |
|
|
z-index: 100; |
|
|
display: none; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.single-note-view.active { |
|
|
display: flex; |
|
|
} |
|
|
|
|
|
.note-container { |
|
|
background: rgba(16, 18, 27, 0.8); |
|
|
border-radius: 20px; |
|
|
width: 90%; |
|
|
max-width: 800px; |
|
|
max-height: 90vh; |
|
|
min-height: 500px; |
|
|
border: 1px solid var(--light); |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
.note-header { |
|
|
padding: 1.5rem; |
|
|
border-bottom: 1px solid var(--light); |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.note-header h2 { |
|
|
font-size: 1.5rem; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.close-note-btn { |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
border: none; |
|
|
width: 36px; |
|
|
height: 36px; |
|
|
border-radius: 50%; |
|
|
color: white; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
cursor: pointer; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.close-note-btn:hover { |
|
|
background: rgba(255, 122, 233, 0.3); |
|
|
} |
|
|
|
|
|
.note-body { |
|
|
flex: 1; |
|
|
padding: 1.5rem; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.note-body textarea { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: transparent; |
|
|
border: none; |
|
|
resize: none; |
|
|
color: white; |
|
|
font-size: 1rem; |
|
|
line-height: 1.6; |
|
|
padding: 0.5rem; |
|
|
} |
|
|
|
|
|
.note-body textarea:focus { |
|
|
outline: none; |
|
|
} |
|
|
|
|
|
.note-footer { |
|
|
padding: 1rem 1.5rem; |
|
|
border-top: 1px solid var(--light); |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.save-note-btn { |
|
|
background: var(--primary); |
|
|
border: none; |
|
|
padding: 0.5rem 1.25rem; |
|
|
border-radius: 50px; |
|
|
color: white; |
|
|
font-weight: 600; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.save-note-btn:hover { |
|
|
background: rgba(138, 180, 248, 1); |
|
|
} |
|
|
|
|
|
|
|
|
.empty-state { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
text-align: center; |
|
|
padding: 4rem 2rem; |
|
|
} |
|
|
|
|
|
.empty-state i { |
|
|
font-size: 4rem; |
|
|
margin-bottom: 1.5rem; |
|
|
color: var(--light); |
|
|
} |
|
|
|
|
|
.empty-state h2 { |
|
|
font-weight: 600; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.empty-state p { |
|
|
color: rgba(255, 255, 255, 0.6); |
|
|
max-width: 400px; |
|
|
margin-bottom: 2rem; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.note-card { |
|
|
animation: fadeIn 0.3s ease forwards; |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.notes-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
header { |
|
|
flex-direction: column; |
|
|
gap: 1rem; |
|
|
align-items: flex-start; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="blur-bg"></div> |
|
|
|
|
|
<div class="container"> |
|
|
<header> |
|
|
<div class="logo"> |
|
|
<i class="fas fa-robot"></i> |
|
|
<h1>NeoNotes</h1> |
|
|
</div> |
|
|
<button class="add-note-btn" id="addNoteBtn"> |
|
|
<i class="fas fa-plus"></i> |
|
|
Add Note |
|
|
</button> |
|
|
</header> |
|
|
|
|
|
<main> |
|
|
<div class="notes-grid" id="notesGrid"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="empty-state" id="emptyState"> |
|
|
<i class="fas fa-sticky-note"></i> |
|
|
<h2>No Notes Yet</h2> |
|
|
<p>Click the "Add Note" button to create your first futuristic note!</p> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="single-note-view" id="singleNoteView"> |
|
|
<div class="note-container"> |
|
|
<div class="note-header"> |
|
|
<input type="text" id="noteViewTitle" placeholder="Note Title" class="note-title" style="background: transparent; border: none; color: white; font-size: 1.5rem; font-weight: 600; width: 100%;"> |
|
|
<button class="close-note-btn" id="closeNoteBtn"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="note-body"> |
|
|
<textarea id="noteViewContent" placeholder="Start typing your note here..." spellcheck="false"></textarea> |
|
|
</div> |
|
|
<div class="note-footer"> |
|
|
<span id="noteViewDate" class="note-date"></span> |
|
|
<button class="save-note-btn" id="saveNoteBtn"> |
|
|
Save Changes |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const notesGrid = document.getElementById('notesGrid'); |
|
|
const emptyState = document.getElementById('emptyState'); |
|
|
const addNoteBtn = document.getElementById('addNoteBtn'); |
|
|
const singleNoteView = document.getElementById('singleNoteView'); |
|
|
const closeNoteBtn = document.getElementById('closeNoteBtn'); |
|
|
const saveNoteBtn = document.getElementById('saveNoteBtn'); |
|
|
const noteViewTitle = document.getElementById('noteViewTitle'); |
|
|
const noteViewContent = document.getElementById('noteViewContent'); |
|
|
const noteViewDate = document.getElementById('noteViewDate'); |
|
|
|
|
|
|
|
|
let notes = JSON.parse(localStorage.getItem('neonotes-notes')) || []; |
|
|
let currentNoteId = null; |
|
|
|
|
|
|
|
|
renderNotes(); |
|
|
|
|
|
|
|
|
addNoteBtn.addEventListener('click', createNewNote); |
|
|
closeNoteBtn.addEventListener('click', closeNoteView); |
|
|
saveNoteBtn.addEventListener('click', saveCurrentNote); |
|
|
|
|
|
|
|
|
function renderNotes() { |
|
|
if (notes.length === 0) { |
|
|
emptyState.style.display = 'flex'; |
|
|
notesGrid.style.display = 'none'; |
|
|
} else { |
|
|
emptyState.style.display = 'none'; |
|
|
notesGrid.style.display = 'grid'; |
|
|
|
|
|
notesGrid.innerHTML = ''; |
|
|
notes.forEach(note => { |
|
|
const noteElement = document.createElement('div'); |
|
|
noteElement.className = 'note-card'; |
|
|
noteElement.setAttribute('data-id', note.id); |
|
|
|
|
|
const truncatedContent = note.content.length > 150 |
|
|
? note.content.substring(0, 150) + '...' |
|
|
: note.content; |
|
|
|
|
|
noteElement.innerHTML = ` |
|
|
<div class="note-title">${note.title || 'Untitled Note'}</div> |
|
|
<div class="note-content">${truncatedContent || 'No content yet...'}</div> |
|
|
<div class="note-date">${formatDate(note.updatedAt)}</div> |
|
|
<div class="note-actions"> |
|
|
<button class="note-action-btn delete-btn" data-id="${note.id}"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
notesGrid.appendChild(noteElement); |
|
|
|
|
|
|
|
|
noteElement.addEventListener('click', function(e) { |
|
|
|
|
|
if (e.target.closest('.delete-btn')) { |
|
|
e.stopPropagation(); |
|
|
return; |
|
|
} |
|
|
openNoteView(note.id); |
|
|
}); |
|
|
|
|
|
|
|
|
const deleteBtn = noteElement.querySelector('.delete-btn'); |
|
|
deleteBtn.addEventListener('click', function() { |
|
|
deleteNote(note.id); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
function createNewNote() { |
|
|
const newNote = { |
|
|
id: Date.now().toString(), |
|
|
title: '', |
|
|
content: '', |
|
|
createdAt: new Date().toISOString(), |
|
|
updatedAt: new Date().toISOString() |
|
|
}; |
|
|
|
|
|
notes.unshift(newNote); |
|
|
saveNotes(); |
|
|
openNoteView(newNote.id); |
|
|
} |
|
|
|
|
|
function openNoteView(noteId) { |
|
|
const note = notes.find(n => n.id === noteId); |
|
|
if (!note) return; |
|
|
|
|
|
currentNoteId = noteId; |
|
|
noteViewTitle.value = note.title; |
|
|
noteViewContent.value = note.content; |
|
|
noteViewDate.textContent = `Last updated: ${formatDate(note.updatedAt)}`; |
|
|
|
|
|
singleNoteView.classList.add('active'); |
|
|
} |
|
|
|
|
|
function closeNoteView() { |
|
|
singleNoteView.classList.remove('active'); |
|
|
currentNoteId = null; |
|
|
} |
|
|
|
|
|
function saveCurrentNote() { |
|
|
if (!currentNoteId) return; |
|
|
|
|
|
const noteIndex = notes.findIndex(n => n.id === currentNoteId); |
|
|
if (noteIndex === -1) return; |
|
|
|
|
|
notes[noteIndex].title = noteViewTitle.value; |
|
|
notes[noteIndex].content = noteViewContent.value; |
|
|
notes[noteIndex].updatedAt = new Date().toISOString(); |
|
|
|
|
|
saveNotes(); |
|
|
renderNotes(); |
|
|
noteViewDate.textContent = `Last updated: ${formatDate(notes[noteIndex].updatedAt)}`; |
|
|
} |
|
|
|
|
|
function deleteNote(noteId) { |
|
|
if (confirm('Are you sure you want to delete this note?')) { |
|
|
notes = notes.filter(note => note.id !== noteId); |
|
|
saveNotes(); |
|
|
renderNotes(); |
|
|
|
|
|
if (currentNoteId === noteId) { |
|
|
closeNoteView(); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
function saveNotes() { |
|
|
localStorage.setItem('neonotes-notes', JSON.stringify(notes)); |
|
|
} |
|
|
|
|
|
function formatDate(dateString) { |
|
|
const options = { |
|
|
year: 'numeric', |
|
|
month: 'short', |
|
|
day: 'numeric', |
|
|
hour: '2-digit', |
|
|
minute: '2-digit' |
|
|
}; |
|
|
return new Date(dateString).toLocaleDateString('en-US', options); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> |
|
|
</html> |
