ui: update landing page

.github/FUNDING.yml

@@ -1,4 +1,3 @@
-github: thuongtruong1009
-ko_fi: thuongtruong1009
+github: thuongtruong109
 custom:
   ["https://paypal.me/thuongtruong1009", "https://nhantien.momo.vn/0917085937"]

.github/OWNERS

@@ -1 +1 @@
-* thuongtruong1009
+* thuongtruong109

README.md

@@ -9,44 +9,40 @@ $\small\textcolor{purple}{\textit{Saving temporary notes extension}}$
   <img alt="GitHub release" src="https://img.shields.io/github/v/release/thuongtruong1009/notix?color=yellow">
   <img src="https://img.shields.io/badge/manifest-v3-pink" alt="manifest_version_badge" />
   <a href="LICENSE"><img src="https://img.shields.io/github/license/thuongtruong1009/notix" alt="license_badge" /></a>
-  <a href="https://hits.dwyl.com/thuongtruong1009/notix" rel="nofollow"><img src="https://hits.dwyl.com/thuongtruong1009/notix.svg" alt="HitCount" data-canonical-src="https://hits.dwyl.com/thuongtruong1009/notix.svg" style="max-width: 100%;"></a>
+  <!-- <a href="https://hits.dwyl.com/thuongtruong1009/notix" rel="nofollow"><img src="https://hits.dwyl.com/thuongtruong1009/notix.svg" alt="HitCount" style="max-width: 100%;"></a> -->
 
 </div>
 
-|                                                              |                                                              |
-| :----------------------------------------------------------: | :----------------------------------------------------------: |
-| <img src="public/preview1.png" alt="preview1" width="400" /> | <img src="public/preview2.png" alt="preview2" width="400" /> |
-| <img src="public/preview3.png" alt="preview3" width="400" /> | <img src="public/preview4.png" alt="preview4" width="400" /> |
-| <img src="public/preview5.png" alt="preview5" width="400" /> | <img src="public/preview6.png" alt="preview6" width="400" /> |
-|                                                              |                                                              |
+![Notix](public/banner.png)
 
 ## 📢 About
 
 -   Notix is a simple extension that helps in saving temporary notes. It is built with HTML, CSS and JavaScript based on Chrome manifest verion 3. It is cross-browser compatible extension that means it can be used on any browser.
 
-<!-- ## 📚 Documentation
-
-## 📦 Download
+## 📸 Preview
 
-## 📝 Usage -->
+|                                                              |                                                              |
+| :----------------------------------------------------------: | :----------------------------------------------------------: |
+| <img src="public/preview1.png" alt="preview1" width="400" /> | <img src="public/preview2.png" alt="preview2" width="400" /> |
+| <img src="public/preview3.png" alt="preview3" width="400" /> | <img src="public/preview4.png" alt="preview4" width="400" /> |
+| <img src="public/preview5.png" alt="preview5" width="400" /> | <img src="public/preview6.png" alt="preview6" width="400" /> |
+|                                                              |                                                              |
 
 ## 🎉 What's new
 
-##### _(Not support in <ins>http://localhost</ins> static living for popup)_
-
--   Create new notes, edit note data, delete selected notes, clear text, and dispatch notes data with unlimited storage time
--   Copy note as text, image to the clipboard
--   Export/download notes data as .txt files, .png images
--   Share note via image link
--   Voice to text (only English)
--   Audio reading text
--   Auto save typed note text
--   Not reset data when closing the browser
--   Display notes information (total notes, name - size - total words - total lines - created - last update time of current note, etc.)
--   Cross-browsers compatibility (Chrome, Firefox, Edge, Opera, Brave, etc.)
--   UI/UX friendly (transition, shadow effect, gradient color etc.)
--   Setting options (dark mode, fonts, auto-save, auto-sync, audio-options etc.)
--   Search notes by name
+✔️ Create new notes, edit note data, delete selected notes, clear text, and dispatch notes data with unlimited storage time <br/>
+✔️ Copy note as text, image to the clipboard <br/>
+✔️ Export/download notes data as .txt files, .png images <br/>
+✔️ Share note via image link <br/>
+✔️ Voice to text (only English) <br/>
+✔️ Audio reading text <br/>
+✔️ Auto save typed note text <br/>
+✔️ Not reset data when closing the browser <br/>
+✔️ Display notes information (total notes, name - size - total words - total lines - created - last update time of current note, etc.) <br/>
+✔️ Cross-browsers compatibility (Chrome, Firefox, Edge, Opera, Brave, etc.) <br/>
+✔️ UI/UX friendly (transition, shadow effect, gradient color etc.) <br/>
+✔️ Setting options (dark mode, fonts, auto-save, auto-sync, audio-options etc.) <br/>
+✔️ Search notes by name <br/>
 
 ## 🎯 Todo
 
@@ -67,27 +63,33 @@ $\small\textcolor{purple}{\textit{Saving temporary notes extension}}$
 -   [JavaScript](https://www.w3schools.com/js/)
 -   [Chrome extension](https://developer.chrome.com)
 
+<!-- ## 📚 Documentation
+
+## 📦 Download
+
+## 📝 Usage -->
+
 ## 🔨 Development
 
 -   Star this repository
 
 -   Clone the repository
 
 ```bash
-git clone https://github.com/thuongtruong1009/notix.git
+git clone https://github.com/thuongtruong109/notix.git
 ```
 
 -   **On browser** -> **Settings** -> **Extensions** -> **Developer mode (open $\textcolor{blue}{\text{chrome://extensions/}}$ for chrome)** -> **Load unpacked** -> **Select the cloned folder**
 
 ## 📄 Changelog
 
--   Track experience at [Changelog](https://thuongtruong1009.github.io/notix/changelog.html)
+-   Track development at [Changelog](https://thuongtruong1009.github.io/notix/changelog.html)
 
 ## 🛡️ Credits
 
 This project is licensed under the [GNU General Public v3.0](LICENSE)
 
-Copyright of [@thuongtruong1009](https://github.com/thuongtruong1009), 2023
+Copyright of [@thuongtruong109](https://github.com/thuongtruong109), 2023
 
 ## ❤️ Support me
 

index.html

@@ -6,12 +6,48 @@
     <meta name="author" content="Tran Nguyen Nguyen Thuong Truong">
     <meta name="description" content="Notix">
     <title>Notix homepage</title>
+    <style>
+        body {
+            font-family: Poppins, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-attachment: fixed;
+            background-image: url("/public/banner.svg");
+            background-size: cover;
+            background-position: center;
+            background-repeat: no-repeat;
+            overflow: hidden;
+            text-align: center;
+        }
+
+        p {
+            color: #666;
+            margin-top: 70vh;
+        }
+
+        a {
+            color: #007bff;
+            text-decoration: none;
+        }
+
+        a:hover {
+            text-decoration: underline;
+        }
+
+        span {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            color: gray;
+            padding: 0.5rem 0;
+            font-size: 0.8rem;
+        }
+    </style>
 </head>
 <body>
-    <h1>Welcome to Notix</h1>
-
-    <p>Thank you for trusting and choosing to use our service</p>
+    <p>Thank you for trusting and choosing to use our service. <br /><br/> Stay tuned for latest updates at the <a href="https://thuongtruong109.github.io/notix/changelog.html">changelog</a></p>
 
-    <p>Stay tuned for latest updates at the <a href="https://thuongtruong1009.github.io/notix/changelog.html">changelog</a></p> 
+    <span>Built by ©thuongtruong, 2023</span>
 </body>
 </html>