www/index.html

www/css/style.css www/js/logic.js - Added a modal to show Apps additional info
edgarchinchilla · Aug 6, 2024 · ab29dd8 · ab29dd8
1 parent 6c5ddb7
commit ab29dd8
Show file tree

Hide file tree

Showing 3 changed files with 142 additions and 17 deletions.
diff --git a/www/css/style.css b/www/css/style.css
@@ -127,17 +127,26 @@ tbody tr:nth-child(odd) td a:visited {
     /* Darker shade on hover */
 }
 
+.app-info {
+    background-color: #492cdd;
+}
+
+.app-info:hover {
+    background-color: #492cdd;
+    /* Darker shade on hover */
+}
+
 /* ALERT STYLING */
 .alert {
     padding: 20px;
     background-color:#2e2851;
     border-radius: 10px;
-    color: white;
+    color: whitesmoke;
     margin-bottom: 15px;
 }
 
 /* The close button */
-.closebtn {
+.btnclose {
     margin-left: 15px;
     color: white;
     font-weight: bold;
@@ -149,14 +158,14 @@ tbody tr:nth-child(odd) td a:visited {
 }
 
 /* When moving the mouse over the close button */
-.closebtn:hover {
+.btnclose:hover {
     color: black;
     font-weight: bold;
 }
 
 /* FILTER STYLING */
 #filter {
-    width: 99%;
+    width: 98.5%;
     padding: 10px;
     border: none;
     border-bottom: 1px solid #ddd;
@@ -168,9 +177,75 @@ tbody tr:nth-child(odd) td a:visited {
     background-color: transparent;
 }
 
+/* MODAL STYLING */
+.btnclose-modal {
+    text-decoration: none;
+    padding: 10px;
+    position: absolute;
+    right: 5px;
+    top: 0;
+}
+.modal:before {
+    content: "";
+    display: none;
+    background: rgba(0, 0, 0, 0.6);
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10;
+}
+.opened:before {
+    display: block;
+}
+.opened .modal-dialog {
+    -webkit-transition: -webkit-transform 0.3s ease-out;
+    -moz-transition: -moz-transform 0.3s ease-out;
+    -o-transition: -o-transform 0.3s ease-out;
+    transition: transform 0.3s ease-out;
+    transform: translate(-50%, -50%);
+    top: 50%;
+}
+.modal-dialog {
+    background: #161b22;
+    color: whitesmoke;
+    border: none;
+    border-radius: 10px;
+    width: auto;
+    position: fixed;
+    /* This makes it "hidden" */
+    top: -100%;
+    left: 50%;
+    z-index: 11;
+    box-shadow:0 5px 10px rgba(0,0,0,0.3);
+    -webkit-transform: translate(0, -500%);
+    -ms-transform: translate(0, -500%);
+    transform: translate(0, -500%);
+    -webkit-transition: -webkit-transform 0.3s ease-out;
+    -moz-transition: -moz-transform 0.3s ease-out;
+    -o-transition: -o-transform 0.3s ease-out;
+    transition: transform 0.3s ease-out;
+}
+.modal-header {
+    border-bottom: #eeeeee solid 1px;
+}
+.modal-body {
+    padding: 20px;
+}
+.modal-header,
+.modal-footer {
+    place-content: center;
+    place-items: center;
+    text-align: center;
+    padding: 5px 10px;
+}
+
 /* FOOTER STYLING */
 .footer-container {
-    width: 99%;
+    width: 98.5%;
     border: none;
     border-radius: 10px;
     background-color: #161b22;

diff --git a/www/index.html b/www/index.html
@@ -27,9 +27,25 @@
         <!-- <input type="submit" value="Submit"> -->
     </form>
 
+    <!-- APP INFO MODAL -->
+    <div id="modal" class="modal" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-header">
+                <p style="padding-left: 25px; padding-right: 25px;" id="appInfoHeader"></p>
+                <span class="btnclose btnclose-modal" onClick="changeModalStatus('close', '', '')">&times;</span>
+            </div>
+            <div class="modal-body">
+                <p id="appInfoDescription"></p>
+            </div>
+            <div class="modal-footer">
+                <span>...</span>
+            </div>
+        </div>
+    </div>
+
     <!-- CREDITS AND WARNINGS -->
     <div class="alert">
-        <span class="closebtn" onClick="this.parentElement.style.display='none';">&times;</span>
+        <span class="btnclose" onClick="this.parentElement.style.display='none';">&times;</span>
         *This site relies on the services of <a href="https://store.rg-adguard.net/">rg-adguard.net</a>
     </div>
 

diff --git a/www/js/logic.js b/www/js/logic.js
@@ -8,6 +8,31 @@ function setAppValues(appId, ring) {
     document.getElementById('appListForm').submit();
 }
 
+// MODAL BEHAVIOR
+function changeModalStatus(modalStatus, appName, appInfo) {
+    const modalContainer = document.getElementById('modal');
+    const modalDialog = document.getElementById('modal-dialog');
+    const appInfoHeader = document.getElementById('appInfoHeader');
+    const appInfoDescription = document.getElementById('appInfoDescription');
+    switch (modalStatus) {
+        case "open":
+            appInfoHeader.textContent = appName;
+            appInfoDescription.textContent = appInfo;
+            modalContainer.classList.add('opened');
+            modalDialog.classList.add('opened');
+            break;
+        case "close":
+            appInfoHeader.textContent = appName;
+            appInfoDescription.textContent = appInfo;
+            modalContainer.classList.remove('opened');
+            modalDialog.classList.remove('opened');
+            break;
+        default:
+            modalContainer.classList.remove('opened');
+            modalDialog.classList.remove('opened');
+    }
+}
+
 // JSON LOAD AND DYNAMIC TABLE BUILDER
 function loadJsonAndBuildAppsList() {
     const dataTable = document.getElementById('appsList');
@@ -44,34 +69,43 @@ function loadJsonAndBuildAppsList() {
             for (let i = 0; i < data.length; i++) {
                 const item = data[i];
                 let itemAppID = "";
-                let itemValue = "";
+                let itemAppName = "";
+                let itemAppInfo = "";
                 const dataRow = document.createElement('tr');
                 for (const value in item) {
                     const dataCell = document.createElement('td');
                     switch (value) {
+                        case "Name":
+                            itemAppName = item[value];
+                            dataCell.textContent = item[value];
+                            break;
                         case "Info":
-                            // Temporary empty
-                            itemValue = "";
+                            itemAppInfo = item[value];
+                            // Only show button if there is additional info to show
+                            if (itemAppInfo == "") {
+                                dataCell.textContent = "";
+                            } else {
+                                dataCell.innerHTML += "<button onClick=\"changeModalStatus('open', '" + itemAppName + "', '" + itemAppInfo + "')\" class=\"custom-button app-info\">More...</button>";
+                            }
                             break;
                         case "AppID":
-                            // Temporary empty
                             itemAppID = item[value];
-                            itemValue = item[value];
+                            dataCell.textContent = item[value];
                             break;
                         default:
-                            itemValue = item[value];
+                            dataCell.textContent = item[value];
                     }
 
-                    dataCell.textContent = itemValue;
+                    // Add new column to the table
                     dataRow.appendChild(dataCell);
                 }
-                // Add an "Open in MS Store (App)" field
+                // Add an "Store App" field
                 const msAppStoreDataCell = document.createElement('td');
-                msAppStoreDataCell.innerHTML += "<a href=\"ms-windows-store://pdp?referrer=storeforweb&productid=" + itemAppID + "&ocid=storeweb-pdp-open-cta\" target=\"_blank\">Open in MS Store App</a>";
+                msAppStoreDataCell.innerHTML += "<a href=\"ms-windows-store://pdp?referrer=storeforweb&productid=" + itemAppID + "&ocid=storeweb-pdp-open-cta\" target=\"_blank\">Store App</a>";
                 dataRow.appendChild(msAppStoreDataCell);
-                // Add an "Open in MS Store (Online)" field
+                // Add an "Online Store" field
                 const msOnlineStoreDataCell = document.createElement('td');
-                msOnlineStoreDataCell.innerHTML += "<a href=\"https://apps.microsoft.com/store/detail/" + itemAppID + "\" target=\"_blank\">Visit on MS Online Store</a>";
+                msOnlineStoreDataCell.innerHTML += "<a href=\"https://apps.microsoft.com/store/detail/" + itemAppID + "\" target=\"_blank\">Online Store</a>";
                 dataRow.appendChild(msOnlineStoreDataCell);
                 // Add an "Actions" field with one button per Store "Ring"
                 const actionsDataCell = document.createElement('td');