Update README.md

wacko1805 · Oct 18, 2024 · 08641a3 · 08641a3
1 parent 21e333e
commit 08641a3
Showing 1 changed file with 15 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -6,8 +6,8 @@
 - If the app is not installed, or on a device that doesnt support dynamic colours, computers, apple devices, etc, the web adapter will load the pre-defined colours set by the developer.
 - The first screenshot shows the colours loaded from the ```colours.json``` shown below. The second screenshot shows dynamic colours loaded from the Host app.
 
-![local](https://github.com/wacko1805/MonetWebAdapter/blob/main/assets/images/local.png?raw=true)
-![connected](https://github.com/wacko1805/MonetWebAdapter/blob/main/assets/images/connected.png?raw=true)
+<img src="https://github.com/wacko1805/MonetWebAdapter/blob/main/assets/images/local.png?raw=true" width="49%" alt="local">
+<img src="https://github.com/wacko1805/MonetWebAdapter/blob/main/assets/images/connected.png?raw=true" width="49%" alt="connected">
 
 
 ## How it works for you:
@@ -28,8 +28,8 @@
 - If you use CSS variables on your site, than it should be easy to migrate all your exsisting colours to the ``` colours.json ``` file. If not, you may have to modify your site to use the material 3 colour way and naming.
 - ### Important: The ``` colours.json ``` Must be placed in the root directory of the site!
 - Layout of ``` colours.json ```:
-- 
-  ```{
+
+```{
     "Comments": "Define your sites colours here:",
     "colors": {
       "primary": "#974811",
@@ -56,19 +56,28 @@
       "surfaceTint": "#974811"
     }
   }
-  ```
+```
 - Here, you must define all your colours. Either by your exsisting colour ways, or you can build a new theme from the [Material Theme Buildier](https://material-foundation.github.io/material-theme-builder/)
 - ### Using colours in your css:
 - Each property is the name of the CSS variable!
   - for example, if you want to use the  ```primary``` colour in your css, you use ```var(--primary)```.
   - Small example:
     ```
-    .card {
+    div {
           background-color: var(--primaryContainer);
           color: var(--onPrimaryContainer);
     }
     ```
     Please note: you should follow the [Material 3 colour guidlines](https://m3.material.io/styles/color/system/overview) when desinging or migraiting your site.
+
+  ## Implementing the popup
+  If your website using the MonetWebAdapter, you can implement a popup that will alert the user, only if they are using android, and if they the host app is not running. You can view an example of the popup [here](https://wacko1805.github.io/MonetWebAdapter/popup-test.html).
+
+  If you wish to implement the popup, add this inbetween your ```<head></head>``` tags:
+  ```
+  <script src="https://wacko1805.github.io/MonetWebAdapter/popup/popup.js" defer></script>
+  ```
+