${day}
${star}
${mood}
${photo?
`
📷
`
:""}
${spending?
`
${getCurrency()}${spending}
`
:""}
${preview?
`
${preview}...
`
:""}
📅 ${item.date}
${item.mood} ${item.favorite ?'⭐ Favorite' :""}
${item.note}
${item.tags ?` ` :""} ${ item.photos.length ?`
${item.photos.map(img=>`
`).join("")}
`
:""}
✕
![]()
`;
document.body.appendChild(viewer);
}
document.getElementById("viewerImage").src = src;
viewer.style.display = "flex";
}
/* ==========================
Close Viewer
========================== */
function closePhoto(){
const viewer =
document.getElementById("photoViewer");
if(viewer){
viewer.style.display = "none";
}
}
/* ==========================
Search
========================== */
function searchDiary(){
const text =
document
.getElementById("searchDiary")
.value
.toLowerCase()
.trim();
const filtered =
diaryEntries.filter(item=>
item.note
.toLowerCase()
.includes(text)
||
item.tags
.toLowerCase()
.includes(text)
);
renderDiary(filtered);
}
/* ==========================
Date Filter
========================== */
function filterDiary(){
const date =
document
.getElementById("filterDate")
.value;
if(date===""){
renderDiary();
return;
}
const filtered =
diaryEntries.filter(
item=>item.date===date
);
renderDiary(filtered);
}
/* ==========================
Initial Load
========================== */
document.addEventListener(
"DOMContentLoaded",
()=>{
loadTodaySpending();
renderCalendar();
renderDiary();
renderPhotos();
});
/* ==========================================
Expense Journal V3 Finished
========================================== */
console.log(
"✅ Expense Journal V3 Loaded Successfully"
);
/* ==========================================
Expense Journal V3
Part 5 (Final CSS)
Add at END of diary.css
========================================== */
/* ===== Calendar Preview ===== */
.calendar-preview{
position:absolute;
left:6px;
right:6px;
bottom:28px;
font-size:10px;
color:#ddd;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
opacity:.9;
}
/* ===== Today Spending Badge ===== */
.calendar-spending{
position:absolute;
right:6px;
bottom:6px;
font-size:10px;
padding:4px 8px;
border-radius:20px;
background:rgba(124,58,237,.22);
color:#fff;
font-weight:600;
}
/* ===== Photo Badge ===== */
.calendar-photo{
position:absolute;
left:6px;
bottom:6px;
font-size:15px;
}
/* ===== Favorite Badge ===== */
.favorite-badge{
display:inline-flex;
align-items:center;
gap:6px;
padding:5px 12px;
border-radius:30px;
background:linear-gradient(135deg,#7C3AED,#A855F7);
font-size:12px;
font-weight:600;
margin-left:8px;
}
/* ===== Tags ===== */
.diary-tags{
display:inline-block;
margin-top:12px;
padding:7px 14px;
border-radius:30px;
background:rgba(124,58,237,.18);
color:#d8c7ff;
font-size:13px;
}
/* ===== Timeline Buttons ===== */
.timeline-actions{
display:flex;
gap:10px;
margin-top:18px;
}
.timeline-actions button{
flex:1;
height:44px;
border:none;
border-radius:14px;
cursor:pointer;
background:linear-gradient(135deg,#7C3AED,#A855F7);
color:#fff;
font-weight:600;
transition:.30s;
}
.timeline-actions button:hover{
transform:translateY(-3px);
}
/* ===== Full Screen Image ===== */
#photoViewer{
position:fixed;
inset:0;
display:none;
justify-content:center;
align-items:center;
background:rgba(0,0,0,.88);
backdrop-filter:blur(10px);
z-index:99999;
animation:fadeUp .25s;
}
.photo-viewer{
position:relative;
max-width:92%;
max-height:92%;
}
.photo-viewer img{
max-width:100%;
max-height:90vh;
border-radius:20px;
box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.close-photo{
position:absolute;
top:-18px;
right:-18px;
width:42px;
height:42px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#ef4444;
color:#fff;
font-size:22px;
cursor:pointer;
}
/* ===== Search ===== */
#searchDiary{
margin-top:18px;
}
/* ===== Date Filter ===== */
#filterDate{
margin-top:14px;
margin-bottom:10px;
}
/* ===== Timeline Fade ===== */
.diary-card{
animation:fadeUp .35s ease;
}
/* Premium Toast */
.toast{
position:fixed;
left:50%;
bottom:35px;
transform:translateX(-50%) translateY(100px);
min-width:260px;
max-width:90%;
padding:16px 24px;
border-radius:18px;
background:rgba(124,58,237,.95);
backdrop-filter:blur(18px);
color:#fff;
font-weight:600;
text-align:center;
box-shadow:0 15px 35px rgba(124,58,237,.45);
opacity:0;
visibility:hidden;
transition:.35s ease;
z-index:99999;
}
.toast.show{
opacity:1;
visibility:visible;
transform:translateX(-50%) translateY(0);
}
/* Upload Buttons */
.upload-btn{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
padding:15px;
margin:12px 0;
border-radius:18px;
cursor:pointer;
font-weight:600;
font-size:15px;
color:#fff;
background:linear-gradient(135deg,#7C3AED,#A855F7);
box-shadow:0 10px 25px rgba(124,58,237,.35);
transition:.3s;
}
.upload-btn:hover{
transform:translateY(-3px);
box-shadow:0 18px 35px rgba(124,58,237,.45);
}
.upload-btn i{
font-size:20px;
}