---
banner: "![[robot.gif]]"
banner_icon: 
banner_lock: "true"
banner_y: 0.8875
---
```dataviewjs
 const apiKey = 'YOUR API KEY HERE'; const city = 'YOUR CITY, COUNTRY'; const units = 'metric'; async function getWeather() { const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units;=${units}&appid;=${apiKey}`; try { const response = await fetch(url); if (!response.ok) throw new Error('Weather data fetch failed'); return await response.json(); } catch (error) { console.error('Error:', error); dv.paragraph("Unable to fetch weather data."); return null; } } function formatTime(unixTimestamp) { const date = new Date(unixTimestamp * 1000); return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); } async function renderWeather() { const data = await getWeather(); if (!data) return; const { main, weather, wind, sys, name } = data; const weatherIcon = `https://openweathermap.org/img/wn/${weather[0].icon}@2x.png`; const temperature = Math.round(main.temp); const feelsLike = Math.round(main.feels_like); const tempMin = Math.round(main.temp_min); const tempMax = Math.round(main.temp_max); const humidity = main.humidity; const windSpeed = Math.round(wind.speed); const description = weather[0].description.charAt(0).toUpperCase() + weather[0].description.slice(1); const sunrise = formatTime(sys.sunrise); const sunset = formatTime(sys.sunset); const weatherHtml = `<div  #0A1519; border-radius: 10px; padding: 20px; width: 100%; max-width: 100%; box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.1); font-family: 'Arial', sans-serif; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.5; font-size: 1em; height: auto; max-height: 550px;"><h   1.8em; color: #fff; font-weight: bold; margin-bottom: 15px;"><img src="${weatherIcon}" alt="${description}"  70px; height: 80px;"/><div><strong  2.5em; color: #fff;">${temperature}°${units === 'metric' ? 'C' : 'F'}</strong><p  0; font-size: 1.1em; color: #ddd; margin-top: 8px;">${description}</p><p  0; font-size: 1em; color: #bbb; margin-top: 8px;">Feels like: ${feelsLike}°</p></div></div><div  15px; font-size: 0.95em; color: #ddd; display: grid; gap: 10px; grid-template-columns: 1fr 1fr; padding: 0 15px; justify-items: center; text-align: left; font-weight: 400;"><p  0; font-size: 0.95em;">?️ Min: ${tempMin}° | Max: ${tempMax}°</p><p  0; font-size: 0.95em;">? Humidity: ${humidity}%</p><p  0; font-size: 0.95em;">? Wind: ${windSpeed} ${units === 'metric' ? 'm/s' : 'mph'}</p><p  0; font-size: 0.95em;">? Sunrise: ${sunrise} | ? Sunset: ${sunset}</p></div></div>`; dv.el('div', weatherHtml, { cls: 'weather-container' }); } renderWeather();
```

> [!multi-column]
> 
> >[!blank]  
>**In the morning**
> > ```tasks
> >path regex matches /01 - Daily Storage/
> >heading includes In the morning
> >hide task count
> >hide backlink
> >hide edit button
> >hide postpone button
> >hide recurrence rule
> >due today
> >hide due date
> >
> > ``` 
>
> > [!blank]
> > ```dataviewjs
> >const now = new Date(), 
> >hours = now.getHours(), 
> >minutes = now.getMinutes(), 
> >seconds = now.getSeconds(), 
> >totalSecondsInDay = 24 * 60 * 60, 
> >currentSeconds = (hours * 3600) + (minutes * 60) + seconds, 
> >progress = (currentSeconds / totalSecondsInDay) * 100; 
> >let greeting = '', icon = '?'; 
> >if (hours < 12) {greeting = 'Good Morning'; 
 > >ic} else if (hours <  8) {greeting = 'Good Afternoon'; ic 
 > >else {greeting = 'Good Evening'; ic 
> >const dateStr = now.toLocaleDateString(); 
> >dv.paragraph(
> >`<div 
 > > linear-gradient(135deg, #2F4F4F, #1B262C); 
&gt; &gt;padding: 25px; border-radius: 20px; text-align: center; 
&gt; &gt;color: #fff; box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.3);">
> ><h   34px; font-weight: 600; color: #E5E5E5; margin-bottom: 15px;">${greeting}, Lộc Phan! ${icon}</h2>
> ><p  22px; color: #A1B0C7; margin-bottom: 15px;">Today is <strong>${dateStr}</strong></p>
> ><div  20px; color: #A1B0C7; margin-bottom: 20px;">Current Time Progress:</div>
> ><div  12px; width: 60%; background-color: #444; border-radius: 10px; margin: 20px auto; overflow: hidden;"><div  ${progress}%; height: 100%; background-color: #00C4CC; border-radius: 10px;"></div></div>
> ><p  21px; color: #A1B0C7; font-weight: 500;">${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</p>
> ></div>`);
> > ```
> 
> > [!blank|right]  
>>![[street.gif]]

> [!multi-column]
> >[!blank]
> >```dataviewjs
const now = new Date(),
currentMonth = now.getMonth(), currentYear = now.getFullYear(), firstDay = new Date(currentYear, currentMonth, 1), lastDay = new Date(currentYear, currentMonth + 1, 0), totalDays = lastDay.getDate(), currentDay = now.getDate(), startDayOfWeek = (firstDay.getDay() + 6) % 7; let calendarHTML = `<div  #1B262C; border-radius: 25px; padding: 20px 30px; text-align: center; font-family: var(--font-text); color: #fff; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);"><h   18px; font-weight: bold; color: #E5E5E5; margin-bottom: 20px;">? ${now.toLocaleString('default', { month: 'long' })} ${currentYear}</h ><div  grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin: 10px 0;">${["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].map(day => `<div  center; font-weight: bold; color: #A1B0C7; font-size: 12px;">${day}</div>`).join('')}</div><div  grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin: 10px;">`; for (let i = 0; i < startDayOfWeek  i++) { calendarHTML += `<div></div>`; } for (let day = 1; day <= totalDays; day++) { let day center; padding: 15px; border-radius: 10px; font-size: 12px; background-color: #2A3C44; display: flex; justify-content: center; align-items: center; transition: background-color 0.2s;`; if (day === currentDay) { day center; padding: 15px; border-radius: 10px; font-size: 12px; background-color: #4A90E2; color: white; font-weight: bold; display: flex; justify-content: center; align-items: center; transition: background-color 0.2s;`; } if ((startDayOfWeek + day - 1) % 7 === 0 && day !== 1) { calendarHTML += `</div><div  grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin:10px;">`; } calendarHTML += `<div >${day}</div>`; } calendarHTML += `</div></div>`; dv.paragraph(calendarHTML);
>>```
>
> >[!blank]  
> >**In the afternoon**
> >```tasks
> > path regex matches /01 - Daily Storage/
> >heading includes In the afternoon
> >due today
> >hide task count
> >hide backlink
> >hide edit button
> >hide postpone button
> >hide recurrence rule
> >hide due date
> > ```
>
> >[!blank]  
> >**In the evening**
> > ```tasks
> > path regex matches /01 - Daily Storage/
> >heading includes In the evening
> >due today
> >hide task count
> >hide backlink
> >hide edit button
> >hide postpone button
> >hide recurrence rule
> >hide due date
> > ```

> [!multi-column|justify]
>
> > [!blank]  
> > ? **Achievement**   
>> ```dataview
> > list
> > from #Achievements 
> > sort file.mtime desc
> > limit 5
> > ```
>
>> [!blank] 
>> ✨ **Contacts**
>> ```dataview
>> table file.mtime as "Last Modified"
>> from #Contact
>> sort file.mtime desc
>> limit 4
>> ```
>
>> [!blank] 
>> ![[garden.gif]]

> [!multi-column|justify]
>
> > [!blank]  
> > ? **Anatomy**   
>> ```dataview
> > list
> > from #Anatomy 
> > sort file.mtime desc
> > limit 5
> > ```
>
> > [!blank]  
> > ? **Books** 
> >```dataview 
> >List
> >From #book 
> >sort file.mtime Desc
> >limit 5
> >```
> 
> > [!blank]  
> > ?️‍♀️**Health & Fitness**
>>```dataview
> > List
> > From #Health
> > where file.name != "Book Template"
> > sort file.name asc
> > limit 4
>>```

> [!multi-column]
> > [!blank]
> >![[techman.gif]]
>
> > [!blank] ✨ **Recently Created**  
> > ```dataview
> > table file.mtime as "Creation Date"
> > from #Daily-notes
> > where file.name != "Diary Template"
> > sort file.mtime desc
> > limit 8
> > ```

```dataviewjs
const startDate = new Date("2024-06-08"); const daysSinceStart = Math.floor((Date.now() - startDate.getTime()) / (1000 * 60 * 60 * 24)); const files = dv.pages(); const totalNotes = files.length; const allTags = files.flatMap(p => p.file.tags).distinct(); const totalTags = allTags.length; const books = files.filter(p => p.file.tags.includes("#book")); const totalBooks = books.length; dv.paragraph(`<div  linear-gradient(135deg, var(--interactive-accent) 0%, var(--background-primary-alt) 100%); border-radius: 15px; padding: 30px; text-align: center; font-family: var(--font-text); color: var(--text-on-accent); box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);"><h   28px; font-weight: bold; color: var(--text-on-accent); margin-bottom: 15px;">? Obsidian Vault Stats</h ><p  18px; margin: 0 0 20px; color: var(--text-on-accent-muted);">Tracking your journey with Obsidian since:</p><p  40px; font-weight: bold; color: var(--text-on-accent); margin: 10px 0 30px;">${daysSinceStart} days</p><div  flex; justify-content: space-evenly; gap: 50px;"><div  center;"><p  20px; margin: 4px 0; color: var(--text-on-accent-muted);">? Notes</p><p  36px; font-weight: bold; color: var(--text-on-accent);">${totalNotes}</p></div><div  center;"><p  20px; margin: 4px 0; color: var(--text-on-accent-muted);">?️ Tags</p><p  36px; font-weight: bold; color: var(--text-on-accent);">${totalTags}</p></div><div  center;"><p  20px; margin: 4px 0; color: var(--text-on-accent-muted);">? Books</p><p  36px; font-weight: bold; color: var(--text-on-accent);">${totalBooks}</p></div></div></div>`);
```