1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <meta name="description" content="StickyNotes App - A versatile and user-friendly app for taking and organizing notes. Keep track of your ideas and tasks easily." /> 7 <meta name="keywords" content="StickyNotes, note taking, task management, productivity, note app, reminders" /> 8 <meta name="author" content="Son Nguyen Hoang" /> 9 <meta http-equiv="content-language" content="en" /> 10 <meta name="robots" content="index, follow" /> 11 <meta name="googlebot" content="index, follow" /> 12 <meta name="distribution" content="global" /> 13 <meta name="revisit-after" content="3 days" /> 14 <meta name="rating" content="general" /> 15 <meta name="referrer" content="no-referrer-when-downgrade" /> 16 <meta name="theme-color" content="#534caf" /> 17
17<script type="importmap"> 18 { 19 "imports": { 20 "@google/generative-ai": "https://esm.run/@google/generative-ai" 21 } 22 } 23 </script>
23 24 <meta name="google-adsense-account" content="ca-pub-6608388491200814"> 25
25<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6608388491200814" 26 crossorigin="anonymous"></script>
26 27
27<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
27 28 <meta property="og:type" content="website" /> 29 <meta property="og:url" content="https://hoangsonww.github.io/The-StickyNotes-App/" /> 30 <meta property="og:title" content="The StickyNotes App - Your Ultimate Note-Taking & Task Management App" /> 31 <meta property="og:description" content="Manage your tasks and notes efficiently with StickyNotes. Enhance your productivity and keep your ideas organized." /> 32 <meta property="og:image" content="https://hoangsonww.github.io/The-StickyNotes-App/utils/image.png" /> 33 <meta property="og:locale" content="en_US" /> 34 <meta property="og:site_name" content="The StickyNotes App" /> 35 <meta name="twitter:card" content="summary_large_image" /> 36 <meta name="twitter:site" content="@hoangsonw" /> 37 <meta name="twitter:creator" content="@hoangsonw" /> 38 <meta name="twitter:url" content="https://hoangsonww.github.io/The-StickyNotes-App/" /> 39 <meta name="twitter:title" content="The StickyNotes App - Your Ultimate Note-Taking & Task Management App" /> 40 <meta name="twitter:description" content="Your personal space for ideas, tasks, and creativity. Discover StickyNotes and enhance your note-taking experience." /> 41 <meta name="twitter:image" content="https://hoangsonww.github.io/The-StickyNotes-App/utils/image.png" /> 42 <title>The StickyNotes App - Your Ultimate Note-Taking & Task Management App</title> 43 <link rel="stylesheet" href="https://hoangsonww.github.io/The-StickyNotes-App/StickyNotes-Frontend/css/style.css" /> 44 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"/> 45
45<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.1.1/marked.min.js"></script>
45 46
46<script src="StickyNotes-Frontend/js/script.js" defer></script>
46 47
47<script src="StickyNotes-Frontend/js/chatbot.js" type="module" defer></script>
47 48 <link rel="icon" type="image/x-icon" href="utils/favicon.ico"> 49 <link rel="manifest" href="manifest.json"> 50 <style> 51 body { 52 transition: color 0.3s; 53 position: relative; 54 } 55 body::before { 56 content: ""; 57 position: absolute; 58 top: 0; 59 left: 0; 60 right: 0; 61 bottom: 0; 62 background: linear-gradient(to right, #2c3e50, #34495e); 63 transition: opacity 0.3s ease; 64 z-index: -1; 65 opacity: 0; 66 } 67 body.dark-mode::before { 68 opacity: 1; 69 } 70 body.dark-mode { 71 color: white; 72 } 73 body.dark-mode header { 74 background-color: #34495e; 75 } 76 body.dark-mode .note { 77 background-color: #2c3e50; 78 color: black; 79 } 80 body.dark-mode .about-btn, body.dark-mode .add { 81 background-color: #e74c3c; 82 } 83 body.dark-mode .about-btn:hover, body.dark-mode .add:hover { 84 background-color: #c0392b; 85 } 86 body.dark-mode .note .tools button { 87 color: #e74c3c; 88 } 89 body.dark-mode .note .tools button:hover { 90 color: #c0392b; 91 } 92 </style> 93 </head>
vendor: 69 bytes, lines 93-95
93 94 95 <script async src="https://www.googletagmanager.com/gtag/js?id=
95G-5SDFD28LEQ
vendor: 16 bytes, lines 95-96
95"></script> 96
96<script> 97
vendor: 145 bytes, lines 97-100
97window.dataLayer = window.dataLayer || []; 98 function gtag(){dataLayer.push(arguments);} 99 gtag('js', new Date()); 100 gtag('config', '
100G-5SDFD28LEQ
vendor: 8 bytes, lines 100-101
100'); 101
101</script>
101 102 103 <body> 104 <header> 105 <a style="text-decoration: none; cursor: pointer" href="index.html"> 106 <h1>The <span class="highlight">StickyNotes</span> App</h1> 107 </a> 108 <input type="text" id="searchBox" style="font: inherit" title="Enter any keyword and we'll find automatically your notes for you!" placeholder="Search for a note by its title..." /> 109 <button class="add" id="add" title="Click here to add a new note at the end of the list!"> 110 <i class="fas fa-plus"></i> Add A Note! 111 </button> 112 <h4> 113 Your personal space for ideas, tasks, and creativity at your fingertips! 114 </h4> 115 <input type="file" id="importNotes" title="JSON Files Only!" accept=".json" style="display: none;"> 116 </header> 117 118 <div class="quick-access-toolbar" title="Quick Access Buttons"> 119 <button id="toggleAddBtn" onclick="addNewNote()" title="Add New Note"><i class="fas fa-sticky-note"></i></button> 120 <button onclick="toggleDarkMode()" title="Toggle Dark Mode"><i class="fas fa-moon"></i></button> 121 <button id= "toggleCalcBtn" onclick="toggleCalculator()" title="Open Calculator"><i class="fas fa-calculator"></i></button> 122 <button onclick="sortNotesByDueDate()" title="Sort Notes By Due Date"><i class="fas fa-sort"></i></button> 123 </div> 124 125 <div class="feedback-container"> 126 <button onclick="toggleFeedbackForm()" class="feedback-btn" title="Have any feedback? Let us know here!"><i class="fas fa-comment-dots"></i></button> 127 <form class="feedback-form" id="feedbackForm"> 128 <h4 class="feedback-title">Quick Feedback</h4> 129 <textarea name="feedback" id="feedbackText" style="font: inherit" placeholder="Your feedback..."></textarea> 130 <div class="feedback-actions"> 131 <button type="button" onclick="submitFeedback(event)">Submit</button> 132 <button type="button" onclick="toggleFeedbackForm()">Cancel</button> 133 </div> 134 </form> 135 </div> 136 137 <div class="timer-container"> 138 <button onclick="toggleTimer()" class="timer-toggle-btn" title="Time your focus period and get your work done!"><i class="fas fa-clock"></i></button> 139 <div class="timer-form" id="timerForm"> 140 <h4 class="timer-title">Pomodoro Timer</h4> 141 <div class="timer-display" id="timerDisplay" onclick="setTimerManually()">00:00:00</div> 142 <button onclick="startTimer()" id="startTimerBtn">Start</button> 143 <button onclick="toggleTimer()" id="closeTimerBtn">Close</button> 144 <button onclick="pauseTimer()" id="pauseTimerBtn" style="display:none;">Pause</button> 145 <button onclick="resetTimer()">Reset</button> 146 <button onclick="setTimerManually()" id="setTimerBtn">Set Timer</button> 147 </div> 148 </div> 149 150 <div class="mood-tracker-container"> 151 <button onclick="toggleMoodTracker()" class="mood-tracker-toggle-btn" title="Track your mood here!"><i class="fas fa-smile"></i></button> 152 <div class="mood-tracker-form" id="moodTrackerForm"> 153 <h4 class="mood-tracker-title">Mood Tracker</h4> 154 <select style="font: inherit; font-size: 14px; border-radius: 8px; margin-right: 2px; cursor: pointer" id="moodSelect"> 155 <option value="Happy">Happy</option> 156 <option value="Sad">Sad</option> 157 <option value="Stressed">Stressed</option> 158 <option value="Relaxed">Relaxed</option> 159 </select> 160 <button id="logMoodBtn" onclick="logMood()">Log Mood</button> 161 <button onclick="toggleMoodTracker()" class="close-btn">Close</button> 162 </div> 163 </div> 164 165 <div class="recommended-note-container"> 166 <button id="generateRecommendedNoteBtn" class="recommended-note-toggle-btn" onclick="toggleRecommendedNoteForm()" title="Generate a Recommended Note!"><i class="fas fa-brain"></i></button> 167 <div class="recommended-note-form" id="recommendedNoteForm"> 168 </div> 169 </div> 170 171 <div class="chatbot"> 172 <div class="chat-messages"></div> 173 <input type="text" placeholder="Ask your assistant..." style="font: inherit" class="chat-input"> 174 </div> 175 176 <div class="calculator" id="calculator"> 177 <div class="calc-header">
178 <span class="calc-title">Calculator</span> 179 <button class="toggle-calc" id="toggleCalc" title="Maximize/Minimize The Calculator">-</button> 180 </div> 181 <div class="calc-body"> 182 <input type="text" class="calc-screen" id="calcScreen" style="font: inherit; font-size: 19px" title="Click on anywhere of the calculator to enable direct typing" disabled> 183 <div class="calc-buttons"> 184 <button class="button" onclick="press('1')" title="Press this button to enter 1">1</button> 185 <button class="button" onclick="press('2')" title="Press this button to enter 2">2</button> 186 <button class="button" onclick="press('3')" title="Press this button to enter 3">3</button> 187 <button class="button" onclick="press('/')" title="Divide a number by another">/</button> 188 <button class="button" onclick="press('4')" title="Press this button to enter 4">4</button> 189 <button class="button" onclick="press('5')" title="Press this button to enter 5">5</button> 190 <button class="button" onclick="press('6')" title="Press this button to enter 6">6</button> 191 <button class="button" onclick="press('*')" title="Multiply a number by another">*</button> 192 <button class="button" onclick="press('7')" title="Press this button to enter 7">7</button> 193 <button class="button" onclick="press('8')" title="Press this button to enter 8">8</button> 194 <button class="button" onclick="press('9')" title="Press this button to enter 9">9</button> 195 <button class="button" onclick="press('-')" title="Subtract a number by another">-</button> 196 <button class="button" onclick="press('0')" title="Press this button to enter 0">0</button> 197 <button class="button" onclick="press('.')" title="Enter a non-integer (e.g. 0.99)">.</button> 198 <button class="button" onclick="calculate()" title="Press this button to evaluate the entered expression">=</button> 199 <button class="button" onclick="press('+')" title="Sum a number with another">+</button> 200 <button onclick="press('%')" title="Convert any number to its percentage (choose a number then press this symbol)">%</button> 201 <button onclick="pressOperation('pow')" title="Raise to power (use ^ for exponentiation, e.g. 9^9)">^</button> 202 <button onclick="pressOperation('sqrt')" title="Calculate the square root of any number(choose a number then press this symbol)">â</button> 203 <button onclick="clearScreen()" title="Clear the calculator's screen">C</button> 204 </div> 205 </div> 206 </div> 207 208 <div class="weather-container"> 209 <div id="weather-display" class="weather-display"></div> 210 <div id="weather-search-container" class="weather-search-container hidden"> 211 <input type="text" id="weather-search-input" style="font: inherit; font-size: 11px" placeholder="Enter a location..."> 212 <button id="weather-search-btn">Search</button> 213 </div> 214 </div> 215 216 <div id="mini-task-list" title="A quick reminder of what you want to get done!"> 217 <h5>Task List</h5> 218 <input type="text" id="task-input" style="font: inherit; border: none; font-size: 12px" placeholder="New task..." maxlength="20"> 219 <ul id="task-list"></ul> 220 </div> 221 222 <div class="google-sign-in-container" style="margin-bottom: 20px"> 223 <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out"> 224 <span id="signInOutText">Sign In</span> 225 <i class="fas fa-sign-in-alt" id="signInIcon"></i> 226 <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i> 227 </button> 228 <button id="profileBtn" class="nav-btn" onclick="window.location.href='StickyNotes-Frontend/html/profile.html'" title="View Profile">
229 <span id="profileText" style="margin-right: 5px">Profile</span> 230 <i class="fas fa-user"></i> 231 </button> 232 </div> 233 234 <div id="timeContainer" class="time-display"></div> 235 236
236<script> 237 document.addEventListener("DOMContentLoaded", () => { 238 const savedTheme = localStorage.getItem('theme'); 239 if (savedTheme === 'dark-mode') { 240 document.body.classList.add('dark-mode'); 241 } 242 }); 243 </script>
243 244 </body> 245</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.