<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neon Diary</title>
<style>
:root {
--bg-color: #1a1a2e;
--text-color: #e6e6e6;
--primary-color: #00f0ff;
--secondary-color: #ff00ff;
--accent-color: #ff6b6b;
--card-bg: #16213e;
--shadow-color: rgba(0, 240, 255, 0.3);
}
.light-mode {
--bg-color: #f0f0f0;
--text-color: #333333;
--primary-color: #0077ff;
--secondary-color: #ff5500;
--accent-color: #ff3366;
--card-bg: #ffffff;
--shadow-color: rgba(0, 119, 255, 0.2);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
transition: background-color 0.3s, color 0.3s;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 1px solid var(--primary-color);
}
h1 {
font-size: 2.5rem;
text-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--shadow-
color);
color: var(--primary-color);
}
.mode-toggle {
background: none;
border: none;
cursor: pointer;
font-size: 1.5rem;
color: var(--secondary-color);
text-shadow: 0 0 5px var(--secondary-color);
}
.mode-toggle:hover {
transform: scale(1.1);
}
.entry-controls {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.diary-btn {
padding: 12px 20px;
background-color: var(--primary-color);
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 0 10px var(--shadow-color);
transition: all 0.3s;
flex: 1;
}
.diary-btn:hover {
transform: translateY(-2px);
box-shadow: 0 0 15px var(--shadow-color);
}
.new-btn {
background-color: var(--primary-color);
}
.delete-btn {
background-color: var(--accent-color);
}
.save-btn {
background-color: var(--secondary-color);
}
.entry-container {
margin-bottom: 20px;
}
.entry-date {
font-size: 1.2rem;
margin-bottom: 10px;
color: var(--primary-color);
text-shadow: 0 0 5px var(--shadow-color);
}
#entry-title {
width: 100%;
padding: 12px 15px;
border: 2px solid var(--primary-color);
border-radius: 5px;
background-color: var(--card-bg);
color: var(--text-color);
font-size: 1.2rem;
margin-bottom: 15px;
box-shadow: 0 0 10px var(--shadow-color);
}
#entry-title:focus {
outline: none;
border-color: var(--secondary-color);
box-shadow: 0 0 15px var(--secondary-color);
}
#entry-content {
width: 100%;
height: 300px;
padding: 15px;
border: 2px solid var(--primary-color);
border-radius: 5px;
background-color: var(--card-bg);
color: var(--text-color);
font-size: 1rem;
line-height: 1.5;
resize: vertical;
box-shadow: 0 0 10px var(--shadow-color);
}
#entry-content:focus {
outline: none;
border-color: var(--secondary-color);
box-shadow: 0 0 15px var(--secondary-color);
}
.entries-list {
margin-top: 30px;
}
.entries-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid var(--primary-color);
}
.entries-title {
font-size: 1.5rem;
color: var(--primary-color);
text-shadow: 0 0 5px var(--shadow-color);
}
.entry-item {
background-color: var(--card-bg);
padding: 15px;
margin-bottom: 15px;
border-radius: 5px;
border-left: 4px solid var(--primary-color);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.2s, box-shadow 0.2s;
cursor: pointer;
}
.entry-item:hover {
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), 0 0 10px var(--shadow-
color);
}
.entry-item-title {
font-size: 1.2rem;
margin-bottom: 5px;
color: var(--primary-color);
}
.entry-item-date {
font-size: 0.9rem;
color: #888;
margin-bottom: 10px;
}
.entry-item-preview {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.empty-state {
text-align: center;
margin-top: 50px;
color: #888;
font-size: 1.2rem;
}
@media (max-width: 600px) {
.entry-controls {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Neon Diary</h1>
<button class="mode-toggle" id="mode-toggle">🌓</button>
</header>
<div class="entry-controls">
<button class="diary-btn new-btn" id="new-btn">New Entry</button>
<button class="diary-btn delete-btn" id="delete-btn">Delete
Entry</button>
<button class="diary-btn save-btn" id="save-btn">Save as TXT</button>
</div>
<div class="entry-container">
<div class="entry-date" id="entry-date"></div>
<input type="text" id="entry-title" placeholder="Entry title...">
<textarea id="entry-content" placeholder="Write your thoughts
here..."></textarea>
</div>
<div class="entries-list">
<div class="entries-header">
<h2 class="entries-title">Previous Entries</h2>
</div>
<div id="entries-container">
<!-- Entries will be added here dynamically -->
</div>
<div class="empty-state" id="empty-state">
No entries yet. Create your first one!
</div>
</div>
</div>
<script>
[Link]('DOMContentLoaded', function () {
const storedPassword = [Link]('diaryPassword');
// Create overlay UI
const overlay = [Link]('div');
[Link] = 'fixed';
[Link] = '0';
[Link] = '0';
[Link] = '100%';
[Link] = '100%';
[Link] = 'var(--bg-color)';
[Link] = 'var(--text-color)';
[Link] = 'flex';
[Link] = 'column';
[Link] = 'center';
[Link] = 'center';
[Link] = '9999';
const promptText = [Link]('p');
[Link] = storedPassword ? 'Enter your diary
password:' : 'Set a new password to protect your diary:';
[Link] = '20px';
[Link] = '1.2rem';
const input = [Link]('input');
[Link] = 'password';
[Link] = '10px';
[Link] = '5px';
[Link] = '2px solid var(--primary-color)';
[Link] = 'var(--card-bg)';
[Link] = 'var(--text-color)';
[Link] = '1rem';
[Link] = 'none';
[Link] = storedPassword ? 'Enter password' : 'Create
password';
const button = [Link]('button');
[Link] = storedPassword ? 'Unlock Diary' : 'Set Password';
[Link] = '20px';
[Link] = '10px 20px';
[Link] = 'none';
[Link] = '5px';
[Link] = 'var(--secondary-color)';
[Link] = '#fff';
[Link] = 'pointer';
[Link] = 'bold';
[Link] = '0 0 10px var(--shadow-color)';
const errorMsg = [Link]('div');
[Link] = 'var(--accent-color)';
[Link] = '10px';
[Link] = '0.9rem';
[Link]('click', () => {
const inputVal = [Link]();
if (!inputVal) {
[Link] = 'Password cannot be empty!';
return;
}
if (!storedPassword) {
[Link]('diaryPassword', inputVal);
[Link](overlay);
initDiary(); // Call the actual diary logic
} else {
if (inputVal === storedPassword) {
[Link](overlay);
initDiary(); // Call the actual diary logic
} else {
[Link] = 'Wrong password, try again!';
}
}
});
[Link](promptText);
[Link](input);
[Link](button);
[Link](errorMsg);
[Link](overlay);
// Prevent access to rest of code until password is entered
function initDiary() {
// ---- Paste the rest of your original JavaScript logic here ----
}
});
</script>
<script>
[Link]('DOMContentLoaded', function() {
const newBtn = [Link]('new-btn');
const deleteBtn = [Link]('delete-btn');
const saveBtn = [Link]('save-btn');
const entryTitle = [Link]('entry-title');
const entryContent = [Link]('entry-content');
const entryDate = [Link]('entry-date');
const entriesContainer = [Link]('entries-container');
const emptyState = [Link]('empty-state');
const modeToggle = [Link]('mode-toggle');
let entries = [Link]([Link]('diaryEntries')) || [];
let currentEntryId = null;
// Initialize the app
function init() {
updateDate();
renderEntries();
updateEmptyState();
// Set initial mode based on localStorage or prefer-color-scheme
const savedMode = [Link]('themeMode');
if (savedMode === 'light' ||
(!savedMode && [Link]('(prefers-color-scheme:
light)').matches)) {
[Link]('light-mode');
}
}
// Update the date display
function updateDate() {
const now = new Date();
const options = { weekday: 'long', year: 'numeric', month: 'long',
day: 'numeric' };
[Link] = [Link](undefined, options);
}
// Render all entries in the sidebar
function renderEntries() {
[Link] = '';
[Link]((a, b) => new Date([Link]) - new Date([Link]));
[Link](entry => {
const entryElement = [Link]('div');
[Link] = 'entry-item';
[Link] = [Link];
const previewText = [Link] > 100
? [Link](0, 100) + '...'
: [Link];
[Link] = `
<div class="entry-item-title">${[Link] || 'Untitled
Entry'}</div>
<div class="entry-item-date">${new
Date([Link]).toLocaleString()}</div>
<div class="entry-item-preview">${previewText}</div>
`;
[Link]('click', () =>
loadEntry([Link]));
[Link](entryElement);
});
}
// Create a new entry
function newEntry() {
currentEntryId = null;
[Link] = '';
[Link] = '';
updateDate();
}
// Load an existing entry
function loadEntry(id) {
const entry = [Link](e => [Link] === id);
if (entry) {
currentEntryId = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = new Date([Link]).toLocaleString();
}
}
// Save the current entry
function saveEntry() {
const title = [Link]();
const content = [Link]();
if (!content) {
alert("Entry content cannot be empty!");
return;
}
const now = new Date();
const entry = {
id: currentEntryId || [Link]().toString(),
title: title,
content: content,
date: [Link]()
};
if (currentEntryId) {
// Update existing entry
const index = [Link](e => [Link] === currentEntryId);
if (index !== -1) {
entries[index] = entry;
}
} else {
// Add new entry
[Link](entry);
currentEntryId = [Link];
}
saveToLocalStorage();
renderEntries();
updateEmptyState();
}
// Delete the current entry
function deleteCurrentEntry() {
if (!currentEntryId) {
alert("No entry selected to delete!");
return;
}
if (confirm("Are you sure you want to delete this entry?")) {
entries = [Link](e => [Link] !== currentEntryId);
saveToLocalStorage();
newEntry();
renderEntries();
updateEmptyState();
}
}
// Save entries to localStorage
function saveToLocalStorage() {
[Link]('diaryEntries', [Link](entries));
}
// Save entry as text file
function saveAsTextFile() {
if (!currentEntryId) {
alert("No entry to save! Please create or select an entry
first.");
return;
}
const entry = [Link](e => [Link] === currentEntryId);
if (!entry) return;
const date = new Date([Link]);
const formattedDate = [Link]();
const text = `${[Link] || 'Untitled Entry'}\n\n$
{formattedDate}\n\n${[Link]}`;
const blob = new Blob([text], { type: 'text/plain' });
const url = [Link](blob);
const a = [Link]('a');
[Link] = url;
[Link] = `diary-entry-${[Link]().split('T')[0]}.txt`;
[Link](a);
[Link]();
[Link](a);
[Link](url);
}
// Update empty state visibility
function updateEmptyState() {
[Link] = [Link] === 0 ? 'block' : 'none';
}
// Toggle dark/light mode
function toggleMode() {
[Link]('light-mode');
const isLightMode = [Link]('light-mode');
[Link]('themeMode', isLightMode ? 'light' : 'dark');
}
// Auto-save when typing (with debounce)
let saveTimeout;
function setupAutoSave() {
[Link]('input', () => {
clearTimeout(saveTimeout);
saveTimeout = setTimeout(saveEntry, 2000);
});
[Link]('input', () => {
clearTimeout(saveTimeout);
saveTimeout = setTimeout(saveEntry, 2000);
});
}
// Event listeners
[Link]('click', newEntry);
[Link]('click', deleteCurrentEntry);
[Link]('click', saveAsTextFile);
[Link]('click', toggleMode);
// Initialize the app
init();
setupAutoSave();
});
//shortcut
[Link]('keydown', function (e) {
if ([Link] === 'Tab') {
[Link](); // stops the default tabbing behavior
[Link] = '[Link]'; // change this to your
desired page
}
});
</script>
</body>
</html>
