1. ---
2. banner: "![[robot.gif]]"
3. banner_icon:
4. banner_lock: "true"
5. banner_y: 0.8875
6. ---
7. ```dataviewjs
8.  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();
9. ```
10.  
11. > [!multi-column]
12. >
13. > >[!blank]  
14. >**In the morning**
15. > > ```tasks
16. > >path regex matches /01 - Daily Storage/
17. > >heading includes In the morning
18. > >hide task count
19. > >hide backlink
20. > >hide edit button
21. > >hide postpone button
22. > >hide recurrence rule
23. > >due today
24. > >hide due date
25. > >
26. > > ```
27. >
28. > > [!blank]
29. > > ```dataviewjs
30. > >const now = new Date(),
31. > >hours = now.getHours(),
32. > >minutes = now.getMinutes(),
33. > >seconds = now.getSeconds(),
34. > >totalSecondsInDay = 24 * 60 * 60,
35. > >currentSeconds = (hours * 3600) + (minutes * 60) + seconds,
36. > >progress = (currentSeconds / totalSecondsInDay) * 100;
37. > >let greeting = '', icon = '?';
38. > >if (hours < 12) {greeting = 'Good Morning';
39. > >ic} else if (hours <  8) {greeting = 'Good Afternoon'; ic
40. > >else {greeting = 'Good Evening'; ic
41. > >const dateStr = now.toLocaleDateString();
42. > >dv.paragraph(
43. > >`<div
44. > > linear-gradient(135deg, #2F4F4F, #1B262C);
45. &gt; &gt;padding: 25px; border-radius: 20px; text-align: center;
46. &gt; &gt;color: #fff; box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.3);">
47. > ><h   34px; font-weight: 600; color: #E5E5E5; margin-bottom: 15px;">${greeting}, Lộc Phan! ${icon}</h2>
48. > ><p  22px; color: #A1B0C7; margin-bottom: 15px;">Today is <strong>${dateStr}</strong></p>
49. > ><div  20px; color: #A1B0C7; margin-bottom: 20px;">Current Time Progress:</div>
50. > ><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>
51. > ><p  21px; color: #A1B0C7; font-weight: 500;">${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</p>
52. > ></div>`);
53. > > ```
54. >
55. > > [!blank|right]  
56. >>![[street.gif]]
57.  
58. > [!multi-column]
59. > >[!blank]
60. > >```dataviewjs
61. const now = new Date(),
62. 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);
63. >>```
64. >
65. > >[!blank]  
66. > >**In the afternoon**
67. > >```tasks
68. > > path regex matches /01 - Daily Storage/
69. > >heading includes In the afternoon
70. > >due today
71. > >hide task count
72. > >hide backlink
73. > >hide edit button
74. > >hide postpone button
75. > >hide recurrence rule
76. > >hide due date
77. > > ```
78. >
79. > >[!blank]  
80. > >**In the evening**
81. > > ```tasks
82. > > path regex matches /01 - Daily Storage/
83. > >heading includes In the evening
84. > >due today
85. > >hide task count
86. > >hide backlink
87. > >hide edit button
88. > >hide postpone button
89. > >hide recurrence rule
90. > >hide due date
91. > > ```
92.  
93. > [!multi-column|justify]
94. >
95. > > [!blank]  
96. > > ? **Achievement**  
97. >> ```dataview
98. > > list
99. > > from #Achievements
100. > > sort file.mtime desc
101. > > limit 5
102. > > ```
103. >
104. >> [!blank]
105. >> ✨ **Contacts**
106. >> ```dataview
107. >> table file.mtime as "Last Modified"
108. >> from #Contact
109. >> sort file.mtime desc
110. >> limit 4
111. >> ```
112. >
113. >> [!blank]
114. >> ![[garden.gif]]
115.  
116. > [!multi-column|justify]
117. >
118. > > [!blank]  
119. > > ? **Anatomy**  
120. >> ```dataview
121. > > list
122. > > from #Anatomy
123. > > sort file.mtime desc
124. > > limit 5
125. > > ```
126. >
127. > > [!blank]  
128. > > ? **Books**
129. > >```dataview
130. > >List
131. > >From #book
132. > >sort file.mtime Desc
133. > >limit 5
134. > >```
135. >
136. > > [!blank]  
137. > > ?️‍♀️**Health & Fitness**
138. >>```dataview
139. > > List
140. > > From #Health
141. > > where file.name != "Book Template"
142. > > sort file.name asc
143. > > limit 4
144. >>```
145.  
146. > [!multi-column]
147. > > [!blank]
148. > >![[techman.gif]]
149. >
150. > > [!blank] ✨ **Recently Created**  
151. > > ```dataview
152. > > table file.mtime as "Creation Date"
153. > > from #Daily-notes
154. > > where file.name != "Diary Template"
155. > > sort file.mtime desc
156. > > limit 8
157. > > ```
158.  
159. ```dataviewjs
160. 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>`);
161. ```
162.  
163.  
164.