[ux/office] Add online installer option

Add option for installation using online installer rather than heavy
offline .img file, also fixed customKMS confirm button going straight to
office 21 rather than the office selection menu, the legacy button
removal does not mean I won't add it later on, I just found it useless
and ugly

main.js

@@ -54,10 +54,18 @@ function downloadOffice21(){
   shell.openExternal("https://officecdn.microsoft.com/db/492350f6-3a01-4f97-b9c0-c7c6ddf67d60/media/en-us/ProPlus2021Retail.img")
 }
 
+function downloadOffice21_o(){
+  shell.openExternal("https://c2rsetup.officeapps.live.com/c2r/download.aspx?ProductreleaseID=ProPlus2021Retail&platform=x64&language=en-us&version=O16GA")
+}
+
 function downloadOffice19(){
   shell.openExternal("https://officecdn.microsoft.com/pr/492350f6-3a01-4f97-b9c0-c7c6ddf67d60/media/en-us/ProPlus2019Retail.img")
 }
 
+function downloadOffice19_o(){
+  shell.openExternal("https://c2rsetup.officeapps.live.com/c2r/download.aspx?ProductreleaseID=ProPlus2019Retail&platform=x64&language=en-us&version=O16GA")
+}
+
 function openServerPage(){
   shell.openExternal("https://github.com/Wind4/vlmcsd")
 }
@@ -91,8 +99,12 @@ ipcMain.on("activateOffice19", activateOffice19)
 
 ipcMain.on("downloadOffice21", downloadOffice21)
 
+ipcMain.on("downloadOffice21-o", downloadOffice21_o)
+
 ipcMain.on("downloadOffice19", downloadOffice19)
 
+ipcMain.on("downloadOffice19-o", downloadOffice19_o)
+
 ipcMain.on("uninstallCert", uninstallCert)
 
 ipcMain.on("openServerPage", openServerPage)

webPage/css/dist.css

@@ -581,6 +581,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   width: 80%;
 }
 
+.w-3\/4 {
+  width: 75%;
+}
+
 .w-5\/6 {
   width: 83.333333%;
 }
@@ -887,11 +891,11 @@ p{
 
 .officevercontainer {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr;
-  gap: 0px 0px;
+  gap: 0px;
   grid-template-areas: 
-        "twentyone nineteen legacy";
+        "twentyone nineteen";
 }
 
 .twentyone {

webPage/css/source.css

@@ -64,11 +64,11 @@ p{
 
 .officevercontainer {
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr;
     grid-template-rows: 1fr;
-    gap: 0px 0px;
+    gap: 0px;
     grid-template-areas: 
-        "twentyone nineteen legacy";
+        "twentyone nineteen";
 }
 
 .twentyone { grid-area: twentyone; }

webPage/office/19/index.html

@@ -17,7 +17,10 @@
                 <p class="text-md md:text-xl font-normal tracking-wide pb-10">After downloading the .img file, open it and run 'Setup', after installation is done you can activate it using the tool below</p>
                 
                 <div class="text-center text-white">
-                    <button type="button" class="rounded-xl w-full bg-[#283F3B] my-2 py-5 my-2 px-5 text-sm md:text-xl font-bold tracking-wide justify-center items-center font-[manrope]" id="download">Download Office from Microsoft →</button>
+                    <button type="button" class="rounded-xl w-full bg-[#283F3B] my-2 py-5 my-2 px-5 text-sm md:text-xl font-bold tracking-wide justify-center items-center font-[manrope]" id="downloadonline">Use the Online Installer →</button>
+
+                    <button type="button" class="rounded-xl w-full bg-[#283F3B] my-2 py-5 my-2 px-5 text-sm md:text-xl font-bold tracking-wide justify-center items-center font-[manrope]" id="download">Download Office from Microsoft →<p class="text-[0.5rem] md:text-xs">(Offline 4.8G .img)</p></button>
+                    
                     <button type="button" class="rounded-xl w-full bg-[#E94F37] my-2 py-5 my-2 px-5 text-sm md:text-xl font-bold tracking-wide justify-center items-center font-[manrope]" id="ok">Activate Office →<p class="text-[0.5rem] md:text-xs">admin required</p></button>
                 </div>
                 
@@ -56,6 +59,12 @@
 
     });
 
+    document.getElementById('downloadonline').addEventListener("click", function(){
+
+ipcRenderer.send("downloadOffice19-o");
+
+});
+
 </script>
 
 </html>

webPage/office/21/index.html

@@ -17,7 +17,10 @@
                 <p class="text-md md:text-xl font-normal tracking-wide pb-10">After downloading the .img file, open it and run 'Setup', after installation is done you can activate it using the tool below</p>
                 
                 <div class="text-center text-white">
-                    <button type="button" class="rounded-xl w-full bg-[#283F3B] my-2 py-5 my-2 px-5 text-sm md:text-xl font-bold tracking-wide justify-center items-center font-[manrope]" id="download">Download Office from Microsoft →</button>
+                    <button type="button" class="rounded-xl w-full bg-[#283F3B] my-2 py-5 my-2 px-5 text-sm md:text-xl font-bold tracking-wide justify-center items-center font-[manrope]" id="downloadonline">Use the Online Installer →</button>
+
+                    <button type="button" class="rounded-xl w-full bg-[#283F3B] my-2 py-5 my-2 px-5 text-sm md:text-xl font-bold tracking-wide justify-center items-center font-[manrope]" id="download">Download Office from Microsoft →<p class="text-[0.5rem] md:text-xs">(Offline 4.8G .img)</p></button>
+                    
                     <button type="button" class="rounded-xl w-full bg-[#E94F37] my-2 py-5 my-2 px-5 text-sm md:text-xl font-bold tracking-wide justify-center items-center font-[manrope]" id="ok">Activate Office →<p class="text-[0.5rem] md:text-xs">admin required</p></button>
                 </div>
                 
@@ -56,6 +59,12 @@
 
     });
 
+    document.getElementById('downloadonline').addEventListener("click", function(){
+
+ipcRenderer.send("downloadOffice21-o");
+
+});
+
 </script>
 
 </html>

webPage/office/setKMS/customKMS/index.html

@@ -52,7 +52,7 @@
     kmsDefault.addEventListener("click", function(){
         ipcRenderer.send("setKMS", customkms.value);
         console.log("--custom kms server--" + customkms.value);
-		location.href = "../../21/index.html";
+		location.href = "../../ver/index.html";
     });
 </script>
 

webPage/office/ver/index.html

@@ -18,14 +18,13 @@
                 <div class="items-center text-center justify-center text-white">
                     <div class="officevercontainer text-center w-full">
                         <div class="twentyone px-2">
-                            <button type="button" class="rounded-xl w-full bg-[#283F3B] my-2 py-5 my-2 px-5 text-sm md:text-xl font-bold tracking-wide justify-center items-center font-[manrope]" onclick="location.href='../21/index.html';"><img class="w-4/5 ml-auto mr-auto pb-7" src="../../img/office21.png">Office 2021 →</button>
+                            <button type="button" class="rounded-xl w-3/4 bg-[#283F3B] my-2 py-5 my-2 px-5 text-sm md:text-xl font-bold tracking-wide justify-center items-center font-[manrope]" onclick="location.href='../21/index.html';"><img class="w-4/5 ml-auto mr-auto pb-7" src="../../img/office21.png">Office 2021 →</button>
                         </div>
                         <div class="nineteen px-2">
-                            <button type="button" class="rounded-xl w-full bg-[#283F3B] my-2 py-5 my-2 px-5 text-sm md:text-xl font-bold tracking-wide justify-center items-center font-[manrope]" onclick="location.href='../19/index.html';"><img class="w-4/5 ml-auto mr-auto pb-7" src="../../img/office19.png">Office 2019 →</button>
+                            <button type="button" class="rounded-xl w-3/4 bg-[#283F3B] my-2 py-5 my-2 px-5 text-sm md:text-xl font-bold tracking-wide justify-center items-center font-[manrope]" onclick="location.href='../19/index.html';"><img class="w-4/5 ml-auto mr-auto pb-7" src="../../img/office19.png">Office 2019 →</button>
-                        </div>
-                        <div class="legacy px-2">
-                            <button type="button" class="rounded-xl w-full bg-mycol2 my-2 py-5 my-2 px-5 text-sm md:text-xl font-bold tracking-wide justify-center items-center font-[manrope]" onclick="location.href='';"><img class="w-4/5 ml-auto mr-auto pb-7" src="../../img/office10.png">Legacy (unavailable)</button>
                         </div>
+                        
+                        
                     </div>