Web site update

DmitryBorodiy · Dec 8, 2023 · f98ed6e · f98ed6e
1 parent bea8d26
commit f98ed6e
Show file tree

Hide file tree

Showing 12 changed files with 799 additions and 28 deletions.
diff --git a/Web/assets/green-sparkles-icon.png b/Web/assets/green-sparkles-icon.png
diff --git a/Web/assets/premium-hero-mesh.svg b/Web/assets/premium-hero-mesh.svg
diff --git a/Web/home.html b/Web/home.html
@@ -42,10 +42,6 @@
                     console.log(e);
                 }
             }
-
-            function SetInteractiveScreenshot(path) { 
-                // TODO : Change flip view selected item.
-            }
         </script>
     </head>
     <body id="rootBody" onresize="HomePage_OnResize();" onload="HomePage_OnLoaded();">
@@ -74,7 +70,7 @@ <h1 id="hero-title" style="line-height: 50px; font-size: 42px; margin: 0px; marg
                                 <fluent-button id="hero-get-product" style="position: relative; left: 10px;" onclick="window.open('https://github.com/DmitryBorodiy/Aurora');">
                                     <span class="button-content">
                                         <img width="20px" height="20px" src="https://img.icons8.com/fluency/48/github.png" alt="github"/>
-                                        <p style="padding: 12px;">See on GitHub</p>
+                                        <p style="padding: 12px;">Star on GitHub</p>
                                     </span>
                                 </fluent-button>
                             </div>
@@ -316,7 +312,7 @@ <h2 id="ai-features-title">Get helpful AI answers on your questions</h2>
                     <p id="ai-features-description" class="placeholder">
                         Assistant is a smart, friendly and helpful voice assistant that helps you in your daily life. You can communicate with the assistant by voice or text using natural language. The assistant can help you with a variety of tasks, such as finding information, managing your calendar, reminders, entertainment, and more. The assistant can also provide you with personalized recommendations and advice, tailored to your preferences and interests.
                     </p>
-                    <fluent-button id="open-assistant-action" appearance="accent" onclick="window.open('aurora:assistant');">Ask Assistant</fluent-button>
+                    <fluent-button id="open-assistant-action" appearance="accent" onclick="window.open('aurora:assistant');" style="height: 38px; width: 146px;">Ask Assistant</fluent-button>
                     <br />
                     <div id="what-can-ai">
                         <div class="fluent-card" style="flex-basis: 200px;">

diff --git a/Web/index.js b/Web/index.js
@@ -20,6 +20,7 @@ var menuBackdrop;
 var rootFrame;
 var headerUI;
 var headerActions;
+var progressView;
 
 var windowTheme = "Light";
 
@@ -29,9 +30,11 @@ window.onload = (event) => {
 
         rootFrame.addEventListener('load', function() {
             HandleScrollingAttach();
+            SetProgressViewVisible(false);
         });
     }
 
+    progressView = document.getElementById("progress-view-ui");
     navigationBar = document.getElementById("navigation-menu");
     branding = document.getElementById("branding-div");
     appScreenshot = document.getElementById("app-screenshot");
@@ -43,6 +46,7 @@ window.onload = (event) => {
 
     HandleScrollingAttach();
     ApplyTheme();
+    SetProgressViewVisible(false);
 
     window.addEventListener("resize", Page_OnResize);
 
@@ -89,6 +93,24 @@ function HandleScrollingAttach(){
     }
 }
 
+function SetProgressViewVisible(isVisible){
+    try{
+        if(isVisible == true){
+            if(progressView != null){
+                progressView.style.visibility = "visible";
+            }
+        }
+        else{
+            if(progressView != null){
+                progressView.style.visibility = "collapse";
+            }
+        }
+    }
+    catch(e){
+        console.log(e);
+    }
+}
+
 function hasElementWithId(elementId) {
     var element = document.getElementById(elementId);
     return (element !== null);

diff --git a/Web/main.html b/Web/main.html
@@ -16,8 +16,6 @@
 
         <!-- Fluent UI for web  -->
         <script type="module" src="https://unpkg.com/@fluentui/web-components"></script>
-        <!-- Fast UI framework -->
-        <script type="module" src="https://cdn.jsdelivr.net/npm/@microsoft/fast-components/dist/fast-components.min.js"></script>
         <!-- jQuery -->
         <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.js"></script>
 
@@ -52,7 +50,7 @@
                             <i class="icon self-icon icon-ic_fluent_news_20_regular"></i>
                             <p class="text-label">News</p>
                         </button>
-                        <button onclick="NavigateFrame('views/premium.html')" class="fluent-hyperlink" style="margin-left: 6px;">
+                        <button onclick="NavigateFrame('views/premium.v2.html')" class="fluent-hyperlink" style="margin-left: 6px;">
                             <i class="icon self-icon icon-ic_fluent_premium_20_regular"></i>
                             <p class="text-label">Premium</p>
                         </button>
@@ -145,6 +143,12 @@
                 </div>
                 <div id="menu-backdrop" onclick="SetMenuOpened(false);"></div>
             </div>
+            <div id="progress-view-ui">
+                <span id="progress-view-context">
+                    <fluent-progress-ring class="pg-ring"></fluent-progress-ring>
+                    <label><b>Just moment</b></label>
+                </span>
+            </div>
         </fluent-design-system-provider>
     </body>
 </html>
diff --git a/Web/main.js b/Web/main.js
@@ -9,6 +9,7 @@ var searchBar;
 var searchCommand;
 var SearchUI;
 var ThemeView;
+var progressView;
 
 var IsMenuOpen = false;
 
@@ -23,6 +24,7 @@ function Page_OnLoaded() {
     searchBar = document.getElementById("mobile-search-bar");
     searchCommand = document.getElementById("mobile-search-command");
     ThemeView = document.getElementById("theme-view-box");
+    progressView = document.getElementById("progress-view-ui");
 
     getProductButton.addEventListener("click", GetProduct);
     feedbackCommand.addEventListener("click", SendReview);
@@ -57,7 +59,44 @@ function getWindowHeight() {
 }
 
 function NavigateFrame(page){
-    document.getElementById("frame").src = page.toString();
+    try {
+        document.getElementById("frame").src = page.toString();
+        SetProgressViewVisible(true);
+
+        var buttons = document.querySelectorAll('#navigation-menu button');
+
+        buttons.forEach(function (button) {
+            button.classList.remove('fluent-hyperlink-selected');
+            button.classList.add('fluent-hyperlink');
+        });
+
+        var clickedButton = event.currentTarget;
+        clickedButton.classList.add('fluent-hyperlink-selected');
+        clickedButton.classList.remove('fluent-hyperlink');
+    }
+    catch(e){
+        console.log(e);
+    }
+}
+
+function SetProgressViewVisible(isVisible){
+    try{
+        if(isVisible == true){
+            if(progressView != null){
+                progressView.style.visibility = "visible";
+                debugger;
+            }
+        }
+        else{
+            if(progressView != null){
+                progressView.style.visibility = "collapse";
+                debugger;
+            }
+        }
+    }
+    catch(e){
+        console.log(e);
+    }
 }
 
 function GetProduct(){