feat: enhance user experience with motivational messages, cached bacgkgrounds and micro animations

Author: programmerg

_locales/en/messages.json

@@ -171,10 +171,10 @@
       "message": "Are you sure you want to delete\n$1?"
    },
    "empty_state": {
-      "message": "No content to display"
+      "message": "This folder is empty yet"
    },
    "empty_state_details": {
-      "message": "Add new items with the + button!"
+      "message": "Add new items with the + button"
    },
    "error_loading_data": {
       "message": "Oops! Something went wrong!"
@@ -203,8 +203,14 @@
    "create_url_footnote": {
       "message": "Leave blank to create a folder"
    },
-   "hi": {
-      "message": "Hi!"
+   "motivation_1": {
+      "message": "Hi, have a nice day!"
+   },
+   "motivation_2": {
+      "message": "Good to see you again!"
+   },
+   "motivation_3": {
+      "message": "Let's do something great!"
    },
    "welcome_title": {
       "message": "Quick Access"

_locales/hu/messages.json

@@ -162,7 +162,7 @@
       "message": "Egyedi megjelenés"
    },
    "no_search_results_found": {
-      "message": "Nincs találat"
+      "message": "Nincs megfelelő találat"
    },
    "no_search_results_found_details": {
       "message": "Próbálj más kulcsszavakat használni"
@@ -171,10 +171,10 @@
       "message": "Biztosan törölni szeretné ezt:\n$1?"
    },
    "empty_state": {
-      "message": "Nincs megjeleníthető tartalom"
+      "message": "Ez a mappa még üres"
    },
    "empty_state_details": {
-      "message": "Adj hozzá új elemeket a + gombbal!"
+      "message": "Adj hozzá új elemeket a + gombbal"
    },
    "error_loading_data": {
       "message": "Hoppá, egy kis probléma adódott"
@@ -203,8 +203,14 @@
    "create_url_footnote": {
       "message": "Mappa létrehozásához hagyja üresen"
    },
-   "hi": {
-      "message": "Szia!"
+   "motivation_1": {
+      "message": "Szia, legyen szép napod!"
+   },
+   "motivation_2": {
+      "message": "Jó újra látni!"
+   },
+   "motivation_3": {
+      "message": "Csináljunk ma valami nagyszerűt!"
    },
    "welcome_title": {
       "message": "Gyors elérés"

index.css

@@ -72,6 +72,7 @@ body {
     min-height: 100vh;
     overflow-x: hidden;
     user-select: none;
+    transition: background-image 1s;
 }
 
 kbd {
@@ -114,15 +115,16 @@ kbd {
     min-height: 100vh;
     display: flex;
     flex-flow: column;
-    justify-content: flex-start;
-    gap: 10vh;
+    justify-content: start;
+    gap: 5vh;
 }
 
 .container {
     max-width: 1200px;
     min-width: 300px;
     margin: 0 auto;
     padding: 20px;
+    overflow: hidden;
 }
 
 /* 
@@ -167,10 +169,23 @@ kbd {
     overflow: hidden;
 }
 
-.breadcrumb-item:hover {
+.breadcrumb-item:not(.motivation):hover {
     background: var(--color-ui-hover);
 }
 
+.motivation {
+    animation: moving 0.4s ease;
+}
+
+@keyframes moving {
+    from {
+        transform: translateY(20px);
+    }
+    to {
+        transform: translateY(0);
+    }
+}
+
 .breadcrumb-separator {
     opacity: 0.8;
 }
@@ -318,6 +333,11 @@ input[type="search"]:focus::-webkit-search-cancel-button {
     }
 }
 
+.content {
+    flex-grow: 1;
+    position: relative;
+} 
+
 .content .container {
     padding-top: 0;
 }
@@ -327,8 +347,13 @@ input[type="search"]:focus::-webkit-search-cancel-button {
  */
 
 .message {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    z-index: -1;
+    width: 100%;
+    transform: translate(0, calc(-50% - 50px));
     text-align: center;
-    padding: 60px 20px;
     color: var(--color-ui-text);
     opacity: 0.7;
 }
@@ -347,8 +372,13 @@ input[type="search"]:focus::-webkit-search-cancel-button {
  */
 
 .loading {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    z-index: -1;
+    width: 100%;
+    transform: translate(0, calc(-50% - 50px));
     text-align: center;
-    padding: 60px 20px;
     color: rgb(255, 255, 255, 0.8);
     font-size: 18px;
 }
@@ -376,6 +406,11 @@ input[type="search"]:focus::-webkit-search-cancel-button {
     display: grid;
     gap: 20px;
     grid-template-columns: repeat(1, 1fr);
+    animation: moving 0.3s ease;
+}
+
+.grid.hidden {
+    animation: none;
 }
 
 .grid.cols-2 {
@@ -623,6 +658,7 @@ input[type="search"]:focus::-webkit-search-cancel-button {
 
     .grid {
         gap: 5px;
+        animation: none;
     }
 
     .tile > a {

index.html

@@ -32,7 +32,7 @@
                                 <svg xmlns="http://www.w3.org/2000/svg"><use xlink:href="#history"></svg>
                             </button>
                             <button class="btn" data-view="bookmarks" data-i18n-title="bookmarks" tabindex="-1">
-                                <svg xmlns="http://www.w3.org/2000/svg"><use xlink:href="#star"></svg>
+                                <svg xmlns="http://www.w3.org/2000/svg"><use xlink:href="#bookmarks"></svg>
                             </button>
                             <button class="btn" data-view="readingList" data-i18n-title="reading_list" tabindex="-1">
                                 <svg xmlns="http://www.w3.org/2000/svg"><use xlink:href="#readinglist"></svg>
@@ -50,7 +50,7 @@
         </div>
         <div class="content">
             <div class="container">
-                <div id="content" class="grid cols-1"></div>
+                <div id="grid" class="grid cols-8"></div>
                 <div id="message" class="message hidden"></div>
                 <div id="loading" class="loading hidden">
                     <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><use xlink:href="#spinner"></svg>