diff --git a/README.md b/README.md index 520f730..bf8952b 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,6 @@ # dashboard A dashboard for listing chatbots and chatops + +#basic design updated +On terminal run -> go run main.go +go to localhost:3000/portal.html to view the webpage diff --git a/main.go b/main.go new file mode 100644 index 0000000..aa102b7 --- /dev/null +++ b/main.go @@ -0,0 +1,17 @@ +package main + +import ( + "log" + "net/http" +) + +func main() { + fs := http.FileServer(http.Dir("./static")) + http.Handle("/", fs) + + log.Println("Listening on :3000...") + err := http.ListenAndServe(":3000", nil) + if err != nil { + log.Fatal(err) + } +} \ No newline at end of file diff --git a/static/assets/weather.png b/static/assets/weather.png new file mode 100644 index 0000000..871bf5f Binary files /dev/null and b/static/assets/weather.png differ diff --git a/static/assets/weather@2x.png b/static/assets/weather@2x.png new file mode 100644 index 0000000..ca72565 Binary files /dev/null and b/static/assets/weather@2x.png differ diff --git a/static/assets/weather_e.png b/static/assets/weather_e.png new file mode 100644 index 0000000..871bf5f Binary files /dev/null and b/static/assets/weather_e.png differ diff --git a/static/assets/weather_e@2x.png b/static/assets/weather_e@2x.png new file mode 100644 index 0000000..ca72565 Binary files /dev/null and b/static/assets/weather_e@2x.png differ diff --git a/static/js/chatbot.js b/static/js/chatbot.js new file mode 100644 index 0000000..36b5616 --- /dev/null +++ b/static/js/chatbot.js @@ -0,0 +1,2410 @@ +if (window.console==null) { window["console"] = { log : function() {} } }; // some browsers do not set console + +var Application = function() { + // event constants + this.NAVIGATION_CHANGE = "viewChange"; + this.VIEW_NOT_FOUND = "viewNotFound"; + this.VIEW_CHANGE = "viewChange"; + this.STATE_NOT_FOUND = "stateNotFound"; + this.APPLICATION_COMPLETE = "applicationComplete"; + this.APPLICATION_RESIZE = "applicationResize"; + this.SIZE_STATE_NAME = "data-is-view-scaled"; + + this.lastView = null; + this.lastState = null; + this.lastOverlay = null; + this.currentView = null; + this.currentState = null; + this.currentOverlay = null; + this.currentQuery = {index: 0, rule: null, mediaText: null, id: null}; + this.inclusionQuery = "(min-width: 0px)"; + this.exclusionQuery = "none and (min-width: 99999px)"; + this.LastModifiedDateLabelName = "LastModifiedDateLabel"; + this.viewScaleSliderId = "ViewScaleSliderInput"; + this.pageRefreshedName = "showPageRefreshedNotification"; + this.prefix = "--web-"; + this.applicationStylesheet = null; + this.mediaQueryDictionary = {}; + this.viewsDictionary = {}; + this.addedViews = []; + this.views = {}; + this.viewIds = []; + this.viewIds = []; + this.viewQueries = {}; + this.overlays = {}; + this.overlayIds = []; + this.numberOfViews = 0; + this.verticalPadding = 0; + this.horizontalPadding = 0; + this.stateName = null; + this.viewScale = 1; + this.viewLeft = 0; + this.viewTop = 0; + + // view settings + this.showUpdateNotification = false; + this.showNavigationControls = false; + this.scaleViewsToFit = false; + this.scaleToFitOnDoubleClick = false; + this.actualSizeOnDoubleClick = false; + this.scaleViewsOnResize = false; + this.navigationOnKeypress = false; + this.showViewName = false; + this.enableDeepLinking = true; + this.refreshPageForChanges = false; + this.showRefreshNotifications = true; + + // view controls + this.scaleViewSlider = null; + this.lastModifiedLabel = null; + this.supportsPopState = false; // window.history.pushState!=null; + this.initialized = false; + + // refresh properties + this.refreshDuration = 250; + this.lastModifiedDate = null; + this.refreshRequest = null; + this.refreshInterval = null; + this.refreshContent = null; + this.refreshContentSize = null; + this.refreshCheckContent = false; + this.refreshCheckContentSize = false; + + var self = this; + + self.initialize = function(event) { + var view = self.getVisibleView(); + if (view==null) view = self.getInitialView(); + self.collectViews(); + self.collectOverlays(); + self.collectMediaQueries(); + self.setViewOptions(view); + self.setViewVariables(view); + + // sometimes the body size is 0 so we call this now and again later + if (self.initialized) { + window.addEventListener(self.NAVIGATION_CHANGE, self.viewChangeHandler); + window.addEventListener("keyup", self.keypressHandler); + window.addEventListener("keypress", self.keypressHandler); + window.addEventListener("resize", self.resizeHandler); + window.document.addEventListener("dblclick", self.doubleClickHandler); + + if (self.supportsPopState) { + window.addEventListener('popstate', self.popStateHandler); + } + else { + window.addEventListener('hashchange', self.hashChangeHandler); + } + + // we are ready to go + window.dispatchEvent(new Event(self.APPLICATION_COMPLETE)); + } + + if (self.initialized==false) { + if (self.showNavigationControls || (self.singlePageApplication && self.showByMediaQuery==false)) { + self.syncronizeViewToURL(); + } + + if (self.refreshPageForChanges) { + self.setupRefreshForChanges(); + } + + self.initialized = true; + } + + if (self.scaleViewsToFit) { + self.viewScale = self.scaleViewToFit(view); + + if (self.viewScale<0) { + setTimeout(self.scaleViewToFit, 500, view); + } + } + else if (view) { + self.viewScale = self.getViewScaleValue(view); + self.centerView(view); + self.updateSliderValue(self.viewScale); + } + else { + // no view found + } + + if (self.showUpdateNotification) { + self.showNotification(); + } + + //"addEventListener" in window ? null : window.addEventListener = window.attachEvent; + //"addEventListener" in document ? null : document.addEventListener = document.attachEvent; + } + + + /////////////////////////////////////// + // AUTO REFRESH + /////////////////////////////////////// + + self.setupRefreshForChanges = function() { + self.refreshRequest = new XMLHttpRequest(); + + if (!self.refreshRequest) { + return false; + } + + // get document start values immediately + self.requestRefreshUpdate(); + } + + /** + * Attempt to check the last modified date by the headers + * or the last modified property from the byte array (experimental) + **/ + self.requestRefreshUpdate = function() { + var url = document.location.href; + var protocol = window.location.protocol; + var method; + + try { + + if (self.refreshCheckContentSize) { + self.refreshRequest.open('HEAD', url, true); + } + else if (self.refreshCheckContent) { + self.refreshContent = document.documentElement.outerHTML; + self.refreshRequest.open('GET', url, true); + self.refreshRequest.responseType = "text"; + } + else { + + // get page last modified date for the first call to compare to later + if (self.lastModifiedDate==null) { + + // File system does not send headers in FF so get blob if possible + if (protocol=="file:") { + self.refreshRequest.open("GET", url, true); + self.refreshRequest.responseType = "blob"; + } + else { + self.refreshRequest.open("HEAD", url, true); + self.refreshRequest.responseType = "blob"; + } + + self.refreshRequest.onload = self.refreshOnLoadOnceHandler; + + // In some browsers (Chrome & Safari) this error occurs at send: + // + // Chrome - Access to XMLHttpRequest at 'file:///index.html' from origin 'null' + // has been blocked by CORS policy: + // Cross origin requests are only supported for protocol schemes: + // http, data, chrome, chrome-extension, https. + // + // Safari - XMLHttpRequest cannot load file:///Users/user/Public/index.html. Cross origin requests are only supported for HTTP. + // + // Solution is to run a local server, set local permissions or test in another browser + self.refreshRequest.send(null); + + // In MS browsers the following behavior occurs possibly due to an AJAX call to check last modified date: + // + // DOM7011: The code on this page disabled back and forward caching. + + // In Brave (Chrome) error when on the server + // index.js:221 HEAD https://www.example.com/ net::ERR_INSUFFICIENT_RESOURCES + // self.refreshRequest.send(null); + + } + else { + self.refreshRequest = new XMLHttpRequest(); + self.refreshRequest.onreadystatechange = self.refreshHandler; + self.refreshRequest.ontimeout = function() { + self.log("Couldn't find page to check for updates"); + } + + var method; + if (protocol=="file:") { + method = "GET"; + } + else { + method = "HEAD"; + } + + //refreshRequest.open('HEAD', url, true); + self.refreshRequest.open(method, url, true); + self.refreshRequest.responseType = "blob"; + self.refreshRequest.send(null); + } + } + } + catch (error) { + self.log("Refresh failed for the following reason:") + self.log(error); + } + } + + self.refreshHandler = function() { + var contentSize; + + try { + + if (self.refreshRequest.readyState === XMLHttpRequest.DONE) { + + if (self.refreshRequest.status === 2 || + self.refreshRequest.status === 200) { + var pageChanged = false; + + self.updateLastModifiedLabel(); + + if (self.refreshCheckContentSize) { + var lastModifiedHeader = self.refreshRequest.getResponseHeader("Last-Modified"); + contentSize = self.refreshRequest.getResponseHeader("Content-Length"); + //lastModifiedDate = refreshRequest.getResponseHeader("Last-Modified"); + var headers = self.refreshRequest.getAllResponseHeaders(); + var hasContentHeader = headers.indexOf("Content-Length")!=-1; + + if (hasContentHeader) { + contentSize = self.refreshRequest.getResponseHeader("Content-Length"); + + // size has not been set yet + if (self.refreshContentSize==null) { + self.refreshContentSize = contentSize; + // exit and let interval call this method again + return; + } + + if (contentSize!=self.refreshContentSize) { + pageChanged = true; + } + } + } + else if (self.refreshCheckContent) { + + if (self.refreshRequest.responseText!=self.refreshContent) { + pageChanged = true; + } + } + else { + lastModifiedHeader = self.getLastModified(self.refreshRequest); + + if (self.lastModifiedDate!=lastModifiedHeader) { + self.log("lastModifiedDate:" + self.lastModifiedDate + ",lastModifiedHeader:" +lastModifiedHeader); + pageChanged = true; + } + + } + + + if (pageChanged) { + clearInterval(self.refreshInterval); + self.refreshUpdatedPage(); + return; + } + + } + else { + self.log('There was a problem with the request.'); + } + + } + } + catch( error ) { + //console.log('Caught Exception: ' + error); + } + } + + self.refreshOnLoadOnceHandler = function(event) { + + // get the last modified date + if (self.refreshRequest.response) { + self.lastModifiedDate = self.getLastModified(self.refreshRequest); + + if (self.lastModifiedDate!=null) { + + if (self.refreshInterval==null) { + self.refreshInterval = setInterval(self.requestRefreshUpdate, self.refreshDuration); + } + } + else { + self.log("Could not get last modified date from the server"); + } + } + } + + self.refreshUpdatedPage = function() { + if (self.showRefreshNotifications) { + var date = new Date().setTime((new Date().getTime()+10000)); + document.cookie = encodeURIComponent(self.pageRefreshedName) + "=true" + "; max-age=6000;" + " path=/"; + } + + document.location.reload(true); + } + + self.showNotification = function(duration) { + var notificationID = self.pageRefreshedName+"ID"; + var notification = document.getElementById(notificationID); + if (duration==null) duration = 4000; + + if (notification!=null) {return;} + + notification = document.createElement("div"); + notification.id = notificationID; + notification.textContent = "PAGE UPDATED"; + var styleRule = "" + styleRule = "position: fixed; padding: 7px 16px 6px 16px; font-family: Arial, sans-serif; font-size: 10px; font-weight: bold; left: 50%;"; + styleRule += "top: 20px; background-color: rgba(0,0,0,.5); border-radius: 12px; color:rgb(235, 235, 235); transition: all 2s linear;"; + styleRule += "transform: translateX(-50%); letter-spacing: .5px; filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, .1))"; + notification.setAttribute("style", styleRule); + + notification.className= "PageRefreshedClass"; + + document.body.appendChild(notification); + + setTimeout(function() { + notification.style.opacity = "0"; + notification.style.filter = "drop-shadow( 0px 0px 0px rgba(0,0,0, .5))"; + setTimeout(function() { + notification.parentNode.removeChild(notification); + }, duration) + }, duration); + + document.cookie = encodeURIComponent(self.pageRefreshedName) + "=; max-age=1; path=/"; + } + + /** + * Get the last modified date from the header + * or file object after request has been received + **/ + self.getLastModified = function(request) { + var date; + + // file protocol - FILE object with last modified property + if (request.response && request.response.lastModified) { + date = request.response.lastModified; + } + + // http protocol - check headers + if (date==null) { + date = request.getResponseHeader("Last-Modified"); + } + + return date; + } + + self.updateLastModifiedLabel = function() { + var labelValue = ""; + + if (self.lastModifiedLabel==null) { + self.lastModifiedLabel = document.getElementById("LastModifiedLabel"); + } + + if (self.lastModifiedLabel) { + var seconds = parseInt(((new Date().getTime() - Date.parse(document.lastModified)) / 1000 / 60) * 100 + ""); + var minutes = 0; + var hours = 0; + + if (seconds < 60) { + seconds = Math.floor(seconds/10)*10; + labelValue = seconds + " seconds"; + } + else { + minutes = parseInt((seconds/60) + ""); + + if (minutes>60) { + hours = parseInt((seconds/60/60) +""); + labelValue += hours==1 ? " hour" : " hours"; + } + else { + labelValue = minutes+""; + labelValue += minutes==1 ? " minute" : " minutes"; + } + } + + if (seconds<10) { + labelValue = "Updated now"; + } + else { + labelValue = "Updated " + labelValue + " ago"; + } + + if (self.lastModifiedLabel.firstElementChild) { + self.lastModifiedLabel.firstElementChild.textContent = labelValue; + + } + else if ("textContent" in self.lastModifiedLabel) { + self.lastModifiedLabel.textContent = labelValue; + } + } + } + + self.getShortString = function(string, length) { + if (length==null) length = 30; + string = string!=null ? string.substr(0, length).replace(/\n/g, "") : "[String is null]"; + return string; + } + + self.getShortNumber = function(value, places) { + if (places==null || places<1) places = 4; + value = Math.round(value * Math.pow(10,places)) / Math.pow(10, places); + return value; + } + + /////////////////////////////////////// + // NAVIGATION CONTROLS + /////////////////////////////////////// + + self.updateViewLabel = function() { + var viewNavigationLabel = document.getElementById("ViewNavigationLabel"); + var view = self.getVisibleView(); + var viewIndex = view ? self.getViewIndex(view) : -1; + var viewName = view ? self.getViewPreferenceValue(view, self.prefix + "view-name") : null; + var viewId = view ? view.id : null; + + if (viewNavigationLabel && view) { + if (viewName && viewName.indexOf('"')!=-1) { + viewName = viewName.replace(/"/g, ""); + } + + if (self.showViewName) { + viewNavigationLabel.textContent = viewName; + self.setTooltip(viewNavigationLabel, viewIndex + 1 + " of " + self.numberOfViews); + } + else { + viewNavigationLabel.textContent = viewIndex + 1 + " of " + self.numberOfViews; + self.setTooltip(viewNavigationLabel, viewName); + } + + } + } + + self.updateURL = function(view) { + view = view == null ? self.getVisibleView() : view; + var viewId = view ? view.id : null + var viewFragment = view ? "#"+ viewId : null; + + if (viewId && self.viewIds.length>1 && self.enableDeepLinking) { + + if (self.supportsPopState==false) { + self.setFragment(viewId); + } + else { + if (viewFragment!=window.location.hash) { + + if (window.location.hash==null) { + window.history.replaceState({name:viewId}, null, viewFragment); + } + else { + window.history.pushState({name:viewId}, null, viewFragment); + } + } + } + } + } + + self.setFragment = function(value) { + window.location.hash = "#" + value; + } + + self.setTooltip = function(element, value) { + // setting the tooltip in edge causes a page crash on hover + if (/Edge/.test(navigator.userAgent)) { return; } + + if ("title" in element) { + element.title = value; + } + } + + self.getStylesheetRules = function(styleSheet) { + try { + if (styleSheet) return styleSheet.cssRules || styleSheet.rules; + + return document.styleSheets[0]["cssRules"] || document.styleSheets[0]["rules"]; + } + catch (error) { + // ERRORS: + // SecurityError: The operation is insecure. + // Errors happen when script loads before stylesheet or loading an external css locally + + // InvalidAccessError: A parameter or an operation is not supported by the underlying object + // Place script after stylesheet + + console.log(error); + if (error.toString().indexOf("The operation is insecure")!=-1) { + console.log("Load the stylesheet before the script or load the stylesheet inline until it can be loaded on a server") + } + return []; + } + } + + /** + * If single page application hide all of the views. + * @param {Number} selectedIndex if provided shows the view at index provided + **/ + self.hideViews = function(selectedIndex, animation) { + var rules = self.getStylesheetRules(); + var queryIndex = 0; + var numberOfRules = rules!=null ? rules.length : 0; + + // loop through rules and hide media queries except selected + for (var i=0;i=numberOfMediaQueries) { + return; + } + + // loop through rules and hide media queries except selected + for (var i=0;i=scaleNeededToFitWidth; + canCenterHorizontally = scaleNeededToFitWidth>=1 && enableScaleUp==false; + + if (isSliderChange) { + canCenterHorizontally = desiredScale1 && (enableScaleUp || isSliderChange)) { + transformValue = "scale(" + desiredScale + ")"; + } + else if (desiredScale>=1 && enableScaleUp==false) { + transformValue = "scale(" + 1 + ")"; + } + else { + transformValue = "scale(" + desiredScale + ")"; + } + + if (self.centerVertically) { + if (canCenterVertically) { + translateY = "-50%"; + topPosition = "50%"; + } + else { + translateY = "0"; + topPosition = "0"; + } + + if (view.style.top != topPosition) { + view.style.top = topPosition + ""; + } + + if (canCenterVertically) { + transformValue += " translateY(" + translateY+ ")"; + } + } + + if (self.centerHorizontally) { + if (canCenterHorizontally) { + translateX = "-50%"; + leftPosition = "50%"; + } + else { + translateX = "0"; + leftPosition = "0"; + } + + if (view.style.left != leftPosition) { + view.style.left = leftPosition + ""; + } + + if (canCenterHorizontally) { + transformValue += " translateX(" + translateX+ ")"; + } + } + + view.style.transformOrigin = "0 0"; + view.style.transform = transformValue; + + self.viewScale = desiredScale; + self.viewToFitWidthScale = scaleNeededToFitWidth; + self.viewToFitHeightScale = scaleNeededToFitHeight; + self.viewLeft = leftPosition; + self.viewTop = topPosition; + + return desiredScale; + } + + // scale to fit height + if (scaleToHeight && scaleToWidth==false) { + //canCenterVertically = scaleNeededToFitHeight>=scaleNeededToFitWidth; + //canCenterHorizontally = scaleNeededToFitHeight<=scaleNeededToFitWidth && enableScaleUp==false; + canCenterVertically = scaleNeededToFitHeight>=scaleNeededToFitWidth; + canCenterHorizontally = scaleNeededToFitWidth>=1 && enableScaleUp==false; + + if (isSliderChange) { + canCenterHorizontally = desiredScale=scaleNeededToFitHeight && enableScaleUp==false; + } + + desiredScale = self.getShortNumber(desiredScale); + + canCenterHorizontally = self.canCenterHorizontally(view, "height", enableScaleUp, desiredScale, minimumScale, maximumScale); + canCenterVertically = self.canCenterVertically(view, "height", enableScaleUp, desiredScale, minimumScale, maximumScale); + + if (desiredScale>1 && (enableScaleUp || isSliderChange)) { + transformValue = "scale(" + desiredScale + ")"; + } + else if (desiredScale>=1 && enableScaleUp==false) { + transformValue = "scale(" + 1 + ")"; + } + else { + transformValue = "scale(" + desiredScale + ")"; + } + + if (self.centerHorizontally) { + if (canCenterHorizontally) { + translateX = "-50%"; + leftPosition = "50%"; + } + else { + translateX = "0"; + leftPosition = "0"; + } + + if (view.style.left != leftPosition) { + view.style.left = leftPosition + ""; + } + + if (canCenterHorizontally) { + transformValue += " translateX(" + translateX+ ")"; + } + } + + if (self.centerVertically) { + if (canCenterVertically) { + translateY = "-50%"; + topPosition = "50%"; + } + else { + translateY = "0"; + topPosition = "0"; + } + + if (view.style.top != topPosition) { + view.style.top = topPosition + ""; + } + + if (canCenterVertically) { + transformValue += " translateY(" + translateY+ ")"; + } + } + + view.style.transformOrigin = "0 0"; + view.style.transform = transformValue; + + self.viewScale = desiredScale; + self.viewToFitWidthScale = scaleNeededToFitWidth; + self.viewToFitHeightScale = scaleNeededToFitHeight; + self.viewLeft = leftPosition; + self.viewTop = topPosition; + + return scaleNeededToFitHeight; + } + + if (scaleToFitType=="fit") { + //canCenterVertically = scaleNeededToFitHeight>=scaleNeededToFitWidth; + //canCenterHorizontally = scaleNeededToFitWidth>=scaleNeededToFitHeight; + canCenterVertically = scaleNeededToFitHeight>=scaleNeededToFit; + canCenterHorizontally = scaleNeededToFitWidth>=scaleNeededToFit; + + if (hasMinimumScale) { + desiredScale = Math.max(desiredScale, Number(minimumScale)); + } + + desiredScale = self.getShortNumber(desiredScale); + + if (isSliderChange || scaleToFit==false) { + canCenterVertically = scaleToFitFullHeight>=desiredScale; + canCenterHorizontally = desiredScale=1) { + canCenter = true; + } + } + else if (type=="height") { + minScale = Math.min(1, scaleNeededToFitHeight); + if (minimumScale!="" && maximumScale!="") { + minScale = Math.max(minimumScale, Math.min(maximumScale, scaleNeededToFitHeight)); + } + else { + if (minimumScale!="") { + minScale = Math.max(minimumScale, scaleNeededToFitHeight); + } + if (maximumScale!="") { + minScale = Math.max(minimumScale, Math.min(maximumScale, scaleNeededToFitHeight)); + } + } + + if (scaleUp && maximumScale=="") { + canCenter = false; + } + else if (scaleNeededToFitWidth>=minScale) { + canCenter = true; + } + } + else if (type=="fit") { + canCenter = scaleNeededToFitWidth>=scaleNeededToFit; + } + else { + if (scaleUp) { + canCenter = false; + } + else if (scaleNeededToFitWidth>=1) { + canCenter = true; + } + } + + self.horizontalScrollbarsNeeded = canCenter; + + return canCenter; + } + + /** + * Returns true if view can be centered horizontally + * @param {HTMLElement} view view to scale + * @param {String} type type of scaling + * @param {Boolean} scaleUp if scale up enabled + * @param {Number} scale target scale value + */ + self.canCenterVertically = function(view, type, scaleUp, scale, minimumScale, maximumScale) { + var scaleNeededToFit = self.getViewFitToViewportScale(view, scaleUp); + var scaleNeededToFitWidth = self.getViewFitToViewportWidthScale(view, scaleUp); + var scaleNeededToFitHeight = self.getViewFitToViewportHeightScale(view, scaleUp); + var canCenter = false; + var minScale; + + type = type==null ? "none" : type; + scale = scale==null ? 1 : scale; + scaleUp = scaleUp == null ? false : scaleUp; + + if (type=="width") { + canCenter = scaleNeededToFitHeight>=scaleNeededToFitWidth; + } + else if (type=="height") { + minScale = Math.max(minimumScale, Math.min(maximumScale, scaleNeededToFit)); + canCenter = scaleNeededToFitHeight>=minScale; + } + else if (type=="fit") { + canCenter = scaleNeededToFitHeight>=scaleNeededToFit; + } + else { + if (scaleUp) { + canCenter = false; + } + else if (scaleNeededToFitHeight>=1) { + canCenter = true; + } + } + + self.verticalScrollbarsNeeded = canCenter; + + return canCenter; + } + + self.getViewFitToViewportScale = function(view, scaleUp) { + var enableScaleUp = scaleUp; + var availableWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; + var availableHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; + var elementWidth = parseFloat(getComputedStyle(view, "style").width); + var elementHeight = parseFloat(getComputedStyle(view, "style").height); + var newScale = 1; + + // if element is not added to the document computed values are NaN + if (isNaN(elementWidth) || isNaN(elementHeight)) { + return newScale; + } + + availableWidth -= self.horizontalPadding; + availableHeight -= self.verticalPadding; + + if (enableScaleUp) { + newScale = Math.min(availableHeight/elementHeight, availableWidth/elementWidth); + } + else if (elementWidth > availableWidth || elementHeight > availableHeight) { + newScale = Math.min(availableHeight/elementHeight, availableWidth/elementWidth); + } + + return newScale; + } + + self.getViewFitToViewportWidthScale = function(view, scaleUp) { + // need to get browser viewport width when element + var isParentWindow = view && view.parentNode && view.parentNode===document.body; + var enableScaleUp = scaleUp; + var availableWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; + var elementWidth = parseFloat(getComputedStyle(view, "style").width); + var newScale = 1; + + // if element is not added to the document computed values are NaN + if (isNaN(elementWidth)) { + return newScale; + } + + availableWidth -= self.horizontalPadding; + + if (enableScaleUp) { + newScale = availableWidth/elementWidth; + } + else if (elementWidth > availableWidth) { + newScale = availableWidth/elementWidth; + } + + return newScale; + } + + self.getViewFitToViewportHeightScale = function(view, scaleUp) { + var enableScaleUp = scaleUp; + var availableHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; + var elementHeight = parseFloat(getComputedStyle(view, "style").height); + var newScale = 1; + + // if element is not added to the document computed values are NaN + if (isNaN(elementHeight)) { + return newScale; + } + + availableHeight -= self.verticalPadding; + + if (enableScaleUp) { + newScale = availableHeight/elementHeight; + } + else if (elementHeight > availableHeight) { + newScale = availableHeight/elementHeight; + } + + return newScale; + } + + self.keypressHandler = function(event) { + var rightKey = 39; + var leftKey = 37; + + // listen for both events + if (event.type=="keypress") { + window.removeEventListener("keyup", self.keypressHandler); + } + else { + window.removeEventListener("keypress", self.keypressHandler); + } + + if (self.showNavigationControls) { + if (self.navigationOnKeypress) { + if (event.keyCode==rightKey) { + self.nextView(); + } + if (event.keyCode==leftKey) { + self.previousView(); + } + } + } + else if (self.navigationOnKeypress) { + if (event.keyCode==rightKey) { + self.nextView(); + } + if (event.keyCode==leftKey) { + self.previousView(); + } + } + } + + /////////////////////////////////// + // GENERAL FUNCTIONS + /////////////////////////////////// + + self.getViewById = function(id) { + id = id ? id.replace("#", "") : ""; + var view = self.viewIds.indexOf(id)!=-1 && self.getElement(id); + return view; + } + + self.getViewIds = function() { + var viewIds = self.getViewPreferenceValue(document.body, self.prefix + "view-ids"); + var viewId = null; + + viewIds = viewIds!=null && viewIds!="" ? viewIds.split(",") : []; + + if (viewIds.length==0) { + viewId = self.getViewPreferenceValue(document.body, self.prefix + "view-id"); + viewIds = viewId ? [viewId] : []; + } + + return viewIds; + } + + self.getInitialViewId = function() { + var viewId = self.getViewPreferenceValue(document.body, self.prefix + "view-id"); + return viewId; + } + + self.getApplicationStylesheet = function() { + var stylesheetId = self.getViewPreferenceValue(document.body, self.prefix + "stylesheet-id"); + self.applicationStylesheet = document.getElementById("applicationStylesheet"); + return self.applicationStylesheet.sheet; + } + + self.getVisibleView = function() { + var viewIds = self.getViewIds(); + + for (var i=0;itoIndex) { + self.setElementAnimation(to, null); + self.setElementAnimation(from, null); + self.showViewByMediaQuery(to); + self.fadeOut(from, update, reverse); + + setTimeout(function() { + self.setElementAnimation(to, null); + self.setElementAnimation(from, null); + self.hideView(from); + self.updateURL(); + self.setViewVariables(to); + }, duration) + } + } + } + + self.fadeIn = function(element, update, animation) { + self.showViewByMediaQuery(element); + + if (update) { + self.updateURL(element); + + element.addEventListener("animationend", function(event) { + element.style.animation = null; + self.setViewVariables(element); + self.updateViewLabel(); + element.removeEventListener("animationend", arguments.callee); + }); + } + + self.setElementAnimation(element, null); + + element.style.animation = animation; + } + + self.fadeOutCurrentView = function(animation, update) { + if (self.currentView) { + self.fadeOut(self.currentView, update, animation); + } + if (self.currentOverlay) { + self.fadeOut(self.currentOverlay, update, animation); + } + } + + self.fadeOut = function(element, update, animation) { + if (update) { + element.addEventListener("animationend", function(event) { + element.style.animation = null; + self.hideView(element); + element.removeEventListener("animationend", arguments.callee); + }); + } + + element.style.animationPlayState = "paused"; + element.style.animation = animation; + element.style.animationPlayState = "running"; + } + + self.getReverseAnimation = function(animation) { + if (animation && animation.indexOf("reverse")==-1) { + animation += " reverse"; + } + + return animation; + } + + /** + * Get duration in animation string + * @param {String} animation animation value + * @param {Boolean} inMilliseconds length in milliseconds if true + */ + self.getAnimationDuration = function(animation, inMilliseconds) { + var duration = 0; + var expression = /.+(\d\.\d)s.+/; + + if (animation && animation.match(expression)) { + duration = parseFloat(animation.replace(expression, "$" + "1")); + if (duration && inMilliseconds) duration = duration * 1000; + } + + return duration; + } + + self.setElementAnimation = function(element, animation, priority) { + element.style.setProperty("animation", animation, "important"); + } + + self.getElement = function(id) { + var elementId = id ? id.trim() : id; + var element = elementId ? document.getElementById(elementId) : null; + + return element; + } + + self.resizeHandler = function(event) { + var view = self.getVisibleView(); + + if (self.showByMediaQuery && view) { + self.setViewOptions(view); + self.setViewVariables(view); + } + else { + self.scaleViewIfNeeded(); + } + + window.dispatchEvent(new Event(self.APPLICATION_RESIZE)); + } + + self.scaleViewIfNeeded = function(view) { + + if (self.scaleViewsOnResize) { + if (view==null) { + view = self.getVisibleView(); + } + + var isViewScaled = view.getAttributeNS(null, self.SIZE_STATE_NAME)=="false" ? false : true; + + if (isViewScaled) { + self.scaleViewToFit(view, true); + } + else { + self.scaleViewToActualSize(view); + } + } + else if (view) { + self.centerView(view); + } + } + + self.centerView = function(view) { + + if (self.scaleToFit) { + self.scaleViewToFit(view, true); + } + else { + self.scaleViewToActualSize(view); // for centering support for now + } + } + + self.preventDoubleClick = function(event) { + event.stopImmediatePropagation(); + } + + self.hashChangeHandler = function(event) { + var fragment = window.location.hash ? window.location.hash.replace("#", "") : ""; + var view = self.getViewById(fragment); + + if (view) { + self.hideViews(); + self.showView(view); + self.setViewVariables(view); + self.updateViewLabel(); + window.dispatchEvent(new Event(self.VIEW_CHANGE)); + } + else { + window.dispatchEvent(new Event(self.VIEW_NOT_FOUND)); + } + } + + self.popStateHandler = function(event) { + var state = event.state; + var fragment = state ? state.name : window.location.hash; + var view = self.getViewById(fragment); + + if (view) { + self.hideViews(); + self.showView(view); + self.updateViewLabel(); + } + else { + window.dispatchEvent(new Event(self.VIEW_NOT_FOUND)); + } + } + + self.doubleClickHandler = function(event) { + var view = self.getVisibleView(); + var scaleValue = view ? self.getViewScaleValue(view) : 1; + var scaleNeededToFit = view ? self.getViewFitToViewportScale(view) : 1; + var scaleNeededToFitWidth = view ? self.getViewFitToViewportWidthScale(view) : 1; + var scaleNeededToFitHeight = view ? self.getViewFitToViewportHeightScale(view) : 1; + var scaleToFitType = self.scaleToFitType; + + // Three scenarios + // - scale to fit on double click + // - set scale to actual size on double click + // - switch between scale to fit and actual page size + + if (scaleToFitType=="width") { + scaleNeededToFit = scaleNeededToFitWidth; + } + else if (scaleToFitType=="height") { + scaleNeededToFit = scaleNeededToFitHeight; + } + + // if scale and actual size enabled then switch between + if (self.scaleToFitOnDoubleClick && self.actualSizeOnDoubleClick) { + var isViewScaled = view.getAttributeNS(null, self.SIZE_STATE_NAME); + var isScaled = false; + + // if scale is not 1 then view needs scaling + if (scaleNeededToFit!=1) { + + // if current scale is at 1 it is at actual size + // scale it to fit + if (scaleValue==1) { + self.scaleViewToFit(view); + isScaled = true; + } + else { + // scale is not at 1 so switch to actual size + self.scaleViewToActualSize(view); + isScaled = false; + } + } + else { + // view is smaller than viewport + // so scale to fit() is scale actual size + // actual size and scaled size are the same + // but call scale to fit to retain centering + self.scaleViewToFit(view); + isScaled = false; + } + + view.setAttributeNS(null, self.SIZE_STATE_NAME, isScaled+""); + isViewScaled = view.getAttributeNS(null, self.SIZE_STATE_NAME); + } + else if (self.scaleToFitOnDoubleClick) { + self.scaleViewToFit(view); + } + else if (self.actualSizeOnDoubleClick) { + self.scaleViewToActualSize(view); + } + + } + + self.scaleViewToFit = function(view) { + return self.setViewScaleValue(view, true); + } + + self.scaleViewToActualSize = function(view) { + self.setViewScaleValue(view, false, 1); + } + + self.onloadHandler = function(event) { + self.initialize(); + } + + self.getStackArray = function(error) { + var value = ""; + + if (error==null) { + try { + error = new Error("Stack"); + } + catch (e) { + + } + } + + if ("stack" in error) { + value = error.stack; + var methods = value.split(/\n/g); + + var newArray = methods ? methods.map(function (value, index, array) { + value = value.replace(/\@.*/,""); + return value; + }) : null; + + if (newArray && newArray[0].includes("getStackTrace")) { + newArray.shift(); + } + if (newArray && newArray[0].includes("getStackArray")) { + newArray.shift(); + } + if (newArray && newArray[0]=="") { + newArray.shift(); + } + + return newArray; + } + + return null; + } + + self.log = function(value) { + console.log.apply(this, [value]); + } + + // initialize on load + // sometimes the body size is 0 so we call this now and again later + window.addEventListener("load", self.onloadHandler); + window.document.addEventListener("DOMContentLoaded", self.onloadHandler); +} + +window.application = new Application(); \ No newline at end of file diff --git a/static/portal.html b/static/portal.html new file mode 100644 index 0000000..a2abae9 --- /dev/null +++ b/static/portal.html @@ -0,0 +1,913 @@ + + + + + + +chatbot + + + + +
+ + + + + + + + +
+ + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + +
+ + + + + + + + + + + + + +
+ Chat with Us! +
+ + + + + + + + +
+ Hi, I am Weather Bot!
You can ask me about
anything related to
your location!
+
+
+ Write a reply or select an option +
+
+ + + + +
+ Weather +
+
+
+ + + + +
+ News +
+
+
+ + + + +
+ Location +
+
+
+ + + + +
+ Friendly +
+
+ + + + +
+ + + + +
+ + + + + + + + +
+
+ + + + +
+ + + + + + + + +
+ + + + + + + + + +
+ Chat with Us! +
+ + + + + + + + +
+ Hi, I am Weather Bot!
You can ask me about
anything related to
your location!
+
+
+ Write a reply or select an option +
+
+ + + + +
+ Weather +
+
+
+ + + + +
+ News +
+
+
+ + + + +
+ Location +
+
+
+ + + + +
+ Friendly +
+
+ + + + +
+ + + + +
+ + + + + + + + +
+
+ + + + + + + + +
+ SAATHI - Chatbot Sharing Portal +
+
+ Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat
+
+
+ Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
+
+
+ Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
+
+
+ Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
+
+
+ THE WEATHER CHATBOT +
+
+ THE WEATHER CHATBOT +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + +
+ + \ No newline at end of file diff --git a/static/stylesheets/main.css b/static/stylesheets/main.css new file mode 100644 index 0000000..14263eb --- /dev/null +++ b/static/stylesheets/main.css @@ -0,0 +1,2311 @@ +.mediaViewInfo { + --web-view-name: New Design Weather Chatbot; + --web-view-id: New_Design_Weather_Chatbot; + --web-scale-on-resize: true; + --web-enable-deep-linking: true; +} +:root { + --web-view-ids: New_Design_Weather_Chatbot; +} +* { + margin: 0; + padding: 0; + box-sizing: border-box; + border: none; +} +.New_Design_Weather_Chatbot_Class { + position: absolute; + width: 100%; + height: 2160px; + background-color: rgba(255,255,255,1); + overflow-x: hidden; + overflow-y: scroll; + --web-view-name: New Design Weather Chatbot; + --web-view-id: New_Design_Weather_Chatbot; + --web-scale-on-resize: true; + --web-enable-deep-linking: true; +} +.Rectangle_233 { + position: absolute; + overflow: visible; + overflow-x: hidden; + width: 1920px; + height: 1080px; + left: 0px; + top: 1080px; +} +.Big_Circle { + overflow: visible; + position: absolute; + width: 311.51px; + height: 311.51px; + transform: matrix(1,0,0,1,-183.3147,60.1283) rotate(236deg); + transform-origin: center; + left: 0px; + top: 0px; +} +.chatbot1_Class { + position: absolute; + width: 371.39px; + height: 271.726px; + left: 1018px; + top: 620px; + overflow: visible; +} +.Ellipse_27_Class { + opacity: 0.5; +} +.Ellipse_27 { + position: absolute; + overflow: visible; + width: 184.877px; + height: 31.054px; + left: 92.531px; + top: 239.558px; +} +.Group_10_Class { + opacity: 0.45; + position: absolute; + width: 371.39px; + height: 145.721px; + left: 0px; + top: 42.765px; + overflow: visible; +} +.Path_108 { + overflow: visible; + position: absolute; + width: 0.037px; + height: 0.519px; + left: 162.767px; + top: 50.745px; + transform: matrix(1,0,0,1,0,0); +} +.Path_109 { + overflow: visible; + position: absolute; + width: 0.021px; + height: 0.139px; + left: 209.316px; + top: 39.592px; + transform: matrix(1,0,0,1,0,0); +} +.Path_110 { + overflow: visible; + position: absolute; + width: 0.038px; + height: 0.146px; + left: 209.22px; + top: 39.132px; + transform: matrix(1,0,0,1,0,0); +} +.Path_111 { + overflow: visible; + position: absolute; + width: 0.061px; + height: 0.236px; + left: 209.208px; + top: 51.618px; + transform: matrix(1,0,0,1,0,0); +} +.Path_112 { + overflow: visible; + position: absolute; + width: 0.038px; + height: 0.252px; + left: 209.295px; + top: 51.237px; + transform: matrix(1,0,0,1,0,0); +} +.Path_113 { + overflow: visible; + position: absolute; + width: 0.855px; + height: 0.602px; + left: 164.064px; + top: 53.688px; + transform: matrix(1,0,0,1,0,0); +} +.Path_114 { + overflow: visible; + position: absolute; + width: 0.341px; + height: 0.362px; + left: 163.692px; + top: 53.298px; + transform: matrix(1,0,0,1,0,0); +} +.Path_115 { + overflow: visible; + position: absolute; + width: 0.17px; + height: 0.465px; + left: 232.556px; + top: 129.527px; + transform: matrix(1,0,0,1,0,0); +} +.Path_116 { + overflow: visible; + position: absolute; + width: 0.456px; + height: 0.278px; + left: 230.738px; + top: 127.584px; + transform: matrix(1,0,0,1,0,0); +} +.Path_117 { + overflow: visible; + position: absolute; + width: 0.638px; + height: 0.772px; + left: 231.632px; + top: 128.222px; + transform: matrix(1,0,0,1,0,0); +} +.Path_118 { + overflow: visible; + position: absolute; + width: 0.379px; + height: 0.308px; + left: 231.207px; + top: 127.873px; + transform: matrix(1,0,0,1,0,0); +} +.Path_119 { + overflow: visible; + position: absolute; + width: 0.2px; + height: 0.378px; + left: 232.321px; + top: 129.078px; + transform: matrix(1,0,0,1,0,0); +} +.Path_120 { + overflow: visible; + position: absolute; + width: 0.085px; + height: 0.395px; + left: 232.751px; + top: 130.09px; + transform: matrix(1,0,0,1,0,0); +} +.Path_121 { + overflow: visible; + position: absolute; + width: 147.944px; + height: 145.681px; + left: 209.367px; + top: 0px; + transform: matrix(1,0,0,1,0,0); +} +.Path_122 { + overflow: visible; + position: absolute; + width: 1px; + height: 1px; + left: 238.847px; + top: 105.299px; + transform: matrix(1,0,0,1,0,0); +} +.Path_123 { + overflow: visible; + position: absolute; + width: 0.036px; + height: 0.509px; + left: 232.857px; + top: 130.621px; + transform: matrix(1,0,0,1,0,0); +} +.Path_124 { + overflow: visible; + position: absolute; + width: 0.019px; + height: 0.375px; + left: 209.348px; + top: 50.745px; + transform: matrix(1,0,0,1,0,0); +} +.Path_125 { + overflow: visible; + position: absolute; + width: 0.103px; + height: 0.476px; + left: 162.813px; + top: 51.341px; + transform: matrix(1,0,0,1,0,0); +} +.Path_126 { + overflow: visible; + position: absolute; + width: 0.378px; + height: 2.005px; + left: 117.773px; + top: 74.383px; + transform: matrix(1,0,0,1,0,0); +} +.Path_127 { + overflow: visible; + position: absolute; + width: 153.825px; + height: 145.681px; + left: 22.967px; + top: 0px; + transform: matrix(1,0,0,1,0,0); +} +.Path_128 { + overflow: visible; + position: absolute; + width: 0.057px; + height: 0.052px; + left: 164.082px; + top: 37.184px; + transform: matrix(1,0,0,1,0,0); +} +.Path_129 { + overflow: visible; + position: absolute; + width: 0.059px; + height: 0.065px; + left: 163.757px; + top: 37.5px; + transform: matrix(1,0,0,1,0,0); +} +.Path_130 { + overflow: visible; + position: absolute; + width: 0.029px; + height: 0.038px; + left: 163.48px; + top: 37.878px; + transform: matrix(1,0,0,1,0,0); +} +.Path_131 { + overflow: visible; + position: absolute; + width: 0.167px; + height: 0.457px; + left: 162.939px; + top: 51.898px; + transform: matrix(1,0,0,1,0,0); +} +.Path_132 { + overflow: visible; + position: absolute; + width: 0.295px; + height: 0.412px; + left: 163.366px; + top: 52.848px; + transform: matrix(1,0,0,1,0,0); +} +.Path_133 { + overflow: visible; + position: absolute; + width: 0.237px; + height: 0.446px; + left: 163.126px; + top: 52.397px; + transform: matrix(1,0,0,1,0,0); +} +.Path_134 { + overflow: visible; + position: absolute; + width: 0.037px; + height: 0.146px; + left: 162.876px; + top: 39.132px; + transform: matrix(1,0,0,1,0,0); +} +.Path_135 { + overflow: visible; + position: absolute; + width: 0.043px; + height: 0.119px; + left: 163.012px; + top: 38.708px; + transform: matrix(1,0,0,1,0,0); +} +.Path_136 { + overflow: visible; + position: absolute; + width: 0.021px; + height: 0.139px; + left: 162.795px; + top: 39.592px; + transform: matrix(1,0,0,1,0,0); +} +.Path_137 { + overflow: visible; + position: absolute; + width: 0.007px; + height: 0.014px; + left: 163.232px; + top: 38.31px; + transform: matrix(1,0,0,1,0,0); +} +.Rectangle_191_Class { + opacity: 0.1; +} +.Rectangle_191 { + width: 46.6px; + height: 18.549px; + position: absolute; + overflow: visible; + transform: translate(0px, 0px) matrix(1,0,0,1,84.0446,0) rotate(180deg); + transform-origin: center; +} +.Rectangle_192_Class { + opacity: 0.1; +} +.Rectangle_192 { + width: 46.6px; + height: 18.549px; + position: absolute; + overflow: visible; + transform: translate(0px, 0px) matrix(1,0,0,1,223.392,0) rotate(180deg); + transform-origin: center; +} +.Rectangle_193_Class { + opacity: 0.1; +} +.Rectangle_193 { + width: 46.6px; + height: 18.549px; + position: absolute; + overflow: visible; + transform: translate(0px, 0px) matrix(1,0,0,1,285.3743,18.0971) rotate(180deg); + transform-origin: center; +} +.Rectangle_194_Class { + opacity: 0.1; +} +.Rectangle_194 { + width: 46.6px; + height: 18.549px; + position: absolute; + overflow: visible; + transform: translate(0px, 0px) matrix(1,0,0,1,209.3666,36.1942) rotate(180deg); + transform-origin: center; +} +.Rectangle_195_Class { + opacity: 0.1; +} +.Rectangle_195 { + width: 46.6px; + height: 18.549px; + position: absolute; + overflow: visible; + transform: translate(0px, 0px) matrix(1,0,0,1,285.3743,54.7437) rotate(180deg); + transform-origin: center; +} +.Rectangle_196_Class { + opacity: 0.1; +} +.Rectangle_196 { + width: 46.6px; + height: 18.549px; + position: absolute; + overflow: visible; + transform: translate(0px, 0px) matrix(1,0,0,1,285.3743,90.9379) rotate(180deg); + transform-origin: center; +} +.Path_138_Class { + opacity: 0.1; +} +.Path_138 { + overflow: visible; + position: absolute; + width: 46.6px; + height: 18.549px; + left: 264.11px; + top: 109.035px; + transform: matrix(1,0,0,1,0,0); +} +.Rectangle_197_Class { + opacity: 0.1; +} +.Rectangle_197 { + width: 46.6px; + height: 18.549px; + position: absolute; + overflow: visible; + transform: translate(0px, 0px) matrix(1,0,0,1,232.893,127.1317) rotate(180deg); + transform-origin: center; +} +.Rectangle_198_Class { + opacity: 0.1; +} +.Rectangle_198 { + width: 46.6px; + height: 18.549px; + position: absolute; + overflow: visible; + transform: translate(0px, 0px) matrix(1,0,0,1,98.9748,18.0971) rotate(180deg); + transform-origin: center; +} +.Rectangle_199_Class { + opacity: 0.1; +} +.Rectangle_199 { + width: 46.6px; + height: 18.549px; + position: absolute; + overflow: visible; + transform: translate(0px, 0px) matrix(1,0,0,1,70.0195,36.1942) rotate(180deg); + transform-origin: center; +} +.Rectangle_200_Class { + opacity: 0.1; +} +.Rectangle_200 { + width: 46.6px; + height: 18.549px; + position: absolute; + overflow: visible; + transform: translate(0px, 0px) matrix(1,0,0,1,52.3748,54.7437) rotate(180deg); + transform-origin: center; +} +.Rectangle_201_Class { + opacity: 0.1; +} +.Rectangle_201 { + width: 46.6px; + height: 18.549px; + position: absolute; + overflow: visible; + transform: translate(0px, 0px) matrix(1,0,0,1,71.3767,72.8408) rotate(180deg); + transform-origin: center; +} +.Rectangle_202_Class { + opacity: 0.1; +} +.Rectangle_202 { + width: 46.6px; + height: 18.549px; + position: absolute; + overflow: visible; + transform: translate(0px, 0px) matrix(1,0,0,1,52.3748,90.9379) rotate(180deg); + transform-origin: center; +} +.Rectangle_203 { + width: 46.6px; + height: 18.549px; + position: absolute; + overflow: visible; + transform: translate(0px, 0px) matrix(1,0,0,1,31.2931,109.0549) rotate(180deg); + transform-origin: center; +} +.Rectangle_204 { + width: 46.6px; + height: 18.549px; + position: absolute; + overflow: visible; + transform: translate(0px, 0px) matrix(1,0,0,1,303.3793,72.8206) rotate(180deg); + transform-origin: center; +} +.Rectangle_205 { + width: 46.6px; + height: 18.549px; + position: absolute; + overflow: visible; + transform: translate(0px, 0px) matrix(1,0,0,1,301.4027,36.2571) rotate(180deg); + transform-origin: center; +} +.Rectangle_206 { + width: 46.6px; + height: 18.549px; + position: absolute; + overflow: visible; + transform: translate(0px, 0px) matrix(1,0,0,1,324.7901,126.8424) rotate(180deg); + transform-origin: center; +} +.Rectangle_207 { + width: 46.6px; + height: 18.549px; + position: absolute; + overflow: visible; + transform: translate(0px, 0px) matrix(1,0,0,1,0,127.1719) rotate(180deg); + transform-origin: center; +} +.Rectangle_208 { + width: 46.6px; + height: 18.549px; + position: absolute; + overflow: visible; + transform: translate(0px, 0px) matrix(1,0,0,1,6.2586,90.6084) rotate(180deg); + transform-origin: center; +} +.Rectangle_209 { + width: 46.6px; + height: 18.549px; + position: absolute; + overflow: visible; + transform: translate(0px, 0px) matrix(1,0,0,1,6.2586,54.7036) rotate(180deg); + transform-origin: center; +} +.Rectangle_210 { + width: 46.6px; + height: 18.549px; + position: absolute; + overflow: visible; + transform: translate(0px, 0px) matrix(1,0,0,1,7.9057,18.1401) rotate(180deg); + transform-origin: center; +} +.Rectangle_211_Class { + opacity: 0.1; +} +.Rectangle_211 { + width: 46.6px; + height: 18.549px; + position: absolute; + overflow: visible; + transform: translate(0px, 0px) matrix(1,0,0,1,7.9057,18.1401) rotate(180deg); + transform-origin: center; +} +.Rectangle_212 { + width: 46.6px; + height: 18.549px; + position: absolute; + overflow: visible; + transform: translate(0px, 0px) matrix(1,0,0,1,37.5517,0.0228) rotate(180deg); + transform-origin: center; +} +.Rectangle_213_Class { + opacity: 0.1; +} +.Rectangle_213 { + width: 46.6px; + height: 18.549px; + position: absolute; + overflow: visible; + transform: translate(0px, 0px) matrix(1,0,0,1,78.1632,109.0347) rotate(180deg); + transform-origin: center; +} +.Rectangle_214_Class { + opacity: 0.1; +} +.Rectangle_214 { + width: 46.6px; + height: 18.549px; + position: absolute; + overflow: visible; + transform: translate(0px, 0px) matrix(1,0,0,1,46.4935,127.1317) rotate(180deg); + transform-origin: center; +} +.Ellipse_28_Class { + opacity: 0.5; +} +.Ellipse_28 { + position: absolute; + overflow: visible; + width: 20.886px; + height: 20.886px; + left: 282.159px; + top: 0px; +} +.Path_139_Class { + opacity: 0.5; +} +.Path_139 { + overflow: visible; + position: absolute; + width: 27.082px; + height: 10.435px; + left: 65.63px; + top: 25.898px; + transform: matrix(1,0,0,1,0,0); +} +.Path_140_Class { + opacity: 0.5; +} +.Path_140 { + overflow: visible; + position: absolute; + width: 20.611px; + height: 7.942px; + left: 271.992px; + top: 6.541px; + transform: matrix(1,0,0,1,0,0); +} +.Path_141_Class { + opacity: 0.5; +} +.Path_141 { + overflow: visible; + position: absolute; + width: 27.082px; + height: 10.435px; + left: 113.293px; + top: 1.344px; + transform: matrix(1,0,0,1,0,0); +} +.Rectangle_215 { + position: absolute; + overflow: visible; + width: 83.775px; + height: 38.853px; + left: 136.457px; + top: 95.595px; +} +.Rectangle_216_Class { + opacity: 0.1; +} +.Rectangle_216 { + position: absolute; + overflow: visible; + width: 70.42px; + height: 0.728px; + left: 143.135px; + top: 128.484px; +} +.Rectangle_217_Class { + opacity: 0.3; +} +.Rectangle_217 { + position: absolute; + overflow: visible; + width: 70.42px; + height: 26.711px; + left: 143.135px; + top: 101.666px; +} +.Ellipse_29_Class { + opacity: 0.1; +} +.Ellipse_29 { + position: absolute; + overflow: visible; + width: 19.426px; + height: 19.426px; + left: 149.813px; + top: 105.866px; +} +.Ellipse_30_Class { + opacity: 0.1; +} +.Ellipse_30 { + position: absolute; + overflow: visible; + width: 19.426px; + height: 19.426px; + left: 187.451px; + top: 105.866px; +} +.Rectangle_218 { + position: absolute; + overflow: visible; + width: 14.569px; + height: 8.501px; + left: 171.06px; + top: 134.446px; +} +.Rectangle_219 { + position: absolute; + overflow: visible; + width: 60.707px; + height: 48.566px; + left: 147.991px; + top: 140.518px; +} +.Rectangle_220 { + position: absolute; + overflow: visible; + width: 63.135px; + height: 6.071px; + left: 146.777px; + top: 198.797px; +} +.Path_142 { + overflow: visible; + position: absolute; + width: 10.927px; + height: 36.424px; + left: 157.098px; + top: 210.938px; + transform: matrix(1,0,0,1,0,0); +} +.Path_143 { + overflow: visible; + position: absolute; + width: 10.927px; + height: 36.424px; + left: 189.879px; + top: 210.938px; + transform: matrix(1,0,0,1,0,0); +} +.Path_144 { + overflow: visible; + position: absolute; + width: 27.017px; + height: 47.352px; + left: 112.706px; + top: 151.446px; + transform: matrix(1,0,0,1,0,0); +} +.Rectangle_221_Class { + opacity: 0.3; +} +.Rectangle_221 { + position: absolute; + overflow: visible; + width: 10.927px; + height: 8.499px; + left: 157.098px; + top: 210.938px; +} +.Rectangle_222_Class { + opacity: 0.3; +} +.Rectangle_222 { + position: absolute; + overflow: visible; + width: 10.927px; + height: 10.927px; + left: 157.098px; + top: 226.722px; +} +.Rectangle_223_Class { + opacity: 0.3; +} +.Rectangle_223 { + position: absolute; + overflow: visible; + width: 10.927px; + height: 3.642px; + left: 157.098px; + top: 243.72px; +} +.Rectangle_224_Class { + opacity: 0.3; +} +.Rectangle_224 { + position: absolute; + overflow: visible; + width: 10.927px; + height: 8.499px; + left: 189.879px; + top: 210.938px; +} +.Rectangle_225_Class { + opacity: 0.3; +} +.Rectangle_225 { + position: absolute; + overflow: visible; + width: 10.927px; + height: 10.927px; + left: 189.879px; + top: 226.722px; +} +.Rectangle_226_Class { + opacity: 0.3; +} +.Rectangle_226 { + position: absolute; + overflow: visible; + width: 10.927px; + height: 3.642px; + left: 189.879px; + top: 243.72px; +} +.Path_145_Class { + opacity: 0.3; +} +.Path_145 { + overflow: visible; + position: absolute; + width: 9.583px; + height: 15.121px; + left: 130.14px; + top: 151.446px; + transform: matrix(1,0,0,1,0,0); +} +.Path_146_Class { + opacity: 0.3; +} +.Path_146 { + overflow: visible; + position: absolute; + width: 13.518px; + height: 16.788px; + left: 113.328px; + top: 167.581px; + transform: matrix(1,0,0,1,0,0); +} +.Path_147 { + overflow: visible; + position: absolute; + width: 27.017px; + height: 47.352px; + left: 216.967px; + top: 151.446px; + transform: matrix(1,0,0,1,0,0); +} +.Path_148_Class { + opacity: 0.3; +} +.Path_148 { + overflow: visible; + position: absolute; + width: 9.583px; + height: 15.121px; + left: 216.967px; + top: 151.446px; + transform: matrix(1,0,0,1,0,0); +} +.Path_149_Class { + opacity: 0.3; +} +.Path_149 { + overflow: visible; + position: absolute; + width: 13.518px; + height: 16.788px; + left: 229.844px; + top: 167.581px; + transform: matrix(1,0,0,1,0,0); +} +.Rectangle_227_Class { + opacity: 0.1; +} +.Rectangle_227 { + position: absolute; + overflow: visible; + width: 14.569px; + height: 1.006px; + left: 171.06px; + top: 134.446px; +} +.Path_150_Class { + opacity: 0.1; +} +.Path_150 { + overflow: visible; + position: absolute; + width: 1.129px; + height: 20.333px; + left: 208.648px; + top: 149.171px; + transform: matrix(1,0,0,1,0,0); +} +.Path_151_Class { + opacity: 0.1; +} +.Path_151 { + overflow: visible; + position: absolute; + width: 1.132px; + height: 20.372px; + left: 147.075px; + top: 147.937px; + transform: matrix(1,0,0,1,0,0); +} +.Rectangle_228_Class { + opacity: 0.1; +} +.Rectangle_228 { + position: absolute; + overflow: visible; + width: 54.635px; + height: 0.719px; + left: 151.028px; + top: 189.085px; +} +.Rectangle_229_Class { + opacity: 0.1; +} +.Rectangle_229 { + position: absolute; + overflow: visible; + width: 26.71px; + height: 0.557px; + left: 149.813px; + top: 204.869px; +} +.Rectangle_230_Class { + opacity: 0.1; +} +.Rectangle_230 { + position: absolute; + overflow: visible; + width: 26.71px; + height: 0.557px; + left: 178.953px; + top: 204.869px; +} +.Rectangle_231 { + position: absolute; + overflow: visible; + width: 4.181px; + height: 35.955px; + left: 152.792px; + top: 59.639px; +} +.Rectangle_232 { + position: absolute; + overflow: visible; + width: 4.181px; + height: 35.955px; + left: 200.733px; + top: 59.639px; +} +.Ellipse_31_Class { + opacity: 0.1; +} +.Ellipse_31 { + position: absolute; + overflow: visible; + width: 9.477px; + height: 9.477px; + left: 150.005px; + top: 55.18px; +} +.Ellipse_32 { + position: absolute; + overflow: visible; + width: 9.477px; + height: 9.477px; + left: 150.005px; + top: 54.901px; +} +.Ellipse_33_Class { + opacity: 0.1; +} +.Ellipse_33 { + position: absolute; + overflow: visible; + width: 9.477px; + height: 9.477px; + left: 198.224px; + top: 55.18px; +} +.Ellipse_34 { + position: absolute; + overflow: visible; + width: 9.477px; + height: 9.477px; + left: 198.224px; + top: 54.901px; +} +.Path_152 { + overflow: visible; + position: absolute; + width: 11.254px; + height: 98.318px; + left: 52.513px; + top: 169.788px; + transform: matrix(1,0,0,1,0,0); +} +.Path_153 { + overflow: visible; + position: absolute; + width: 7.703px; + height: 19.001px; + left: 51.118px; + top: 151.814px; + transform: matrix(1,0,0,1,0,0); +} +.Path_154 { + overflow: visible; + position: absolute; + width: 11.254px; + height: 98.318px; + left: 54.902px; + top: 169.788px; + transform: matrix(1,0,0,1,0,0); +} +.Path_155 { + overflow: visible; + position: absolute; + width: 7.703px; + height: 19.001px; + left: 57.794px; + top: 151.814px; + transform: matrix(1,0,0,1,0,0); +} +.Path_156 { + overflow: visible; + position: absolute; + width: 11.254px; + height: 98.318px; + left: 65.351px; + top: 169.788px; + transform: matrix(1,0,0,1,0,0); +} +.Path_157 { + overflow: visible; + position: absolute; + width: 7.704px; + height: 19.001px; + left: 63.957px; + top: 151.814px; + transform: matrix(1,0,0,1,0,0); +} +.Path_158 { + overflow: visible; + position: absolute; + width: 13.173px; + height: 13.693px; + left: 60.139px; + top: 173.605px; + transform: matrix(1,0,0,1,0,0); +} +.Path_159 { + overflow: visible; + position: absolute; + width: 13.173px; + height: 13.693px; + left: 60.5px; + top: 192.382px; + transform: matrix(1,0,0,1,0,0); +} +.Path_160 { + overflow: visible; + position: absolute; + width: 12.458px; + height: 14.348px; + left: 40.998px; + top: 207.581px; + transform: matrix(1,0,0,1,0,0); +} +.Path_161 { + overflow: visible; + position: absolute; + width: 15.839px; + height: 10.736px; + left: 43.279px; + top: 170.029px; + transform: matrix(1,0,0,1,0,0); +} +.Path_162 { + overflow: visible; + position: absolute; + width: 11.254px; + height: 98.318px; + left: 67.741px; + top: 169.788px; + transform: matrix(1,0,0,1,0,0); +} +.Path_163 { + overflow: visible; + position: absolute; + width: 7.703px; + height: 19.001px; + left: 70.633px; + top: 151.814px; + transform: matrix(1,0,0,1,0,0); +} +.Path_164 { + overflow: visible; + position: absolute; + width: 13.337px; + height: 13.534px; + left: 67.816px; + top: 179.462px; + transform: matrix(1,0,0,1,0,0); +} +.Path_165 { + overflow: visible; + position: absolute; + width: 13.337px; + height: 13.534px; + left: 75.038px; + top: 205.461px; + transform: matrix(1,0,0,1,0,0); +} +.Path_166 { + overflow: visible; + position: absolute; + width: 20.93px; + height: 14.974px; + left: 68.338px; + top: 190.372px; + transform: matrix(1,0,0,1,0,0); +} +.Path_167 { + overflow: visible; + position: absolute; + width: 20.93px; + height: 14.974px; + left: 41.777px; + top: 182.428px; + transform: matrix(1,0,0,1,0,0); +} +.Path_168 { + overflow: visible; + position: absolute; + width: 20.93px; + height: 14.974px; + left: 60.755px; + top: 201.204px; + transform: matrix(1,0,0,1,0,0); +} +.Ellipse_35 { + position: absolute; + overflow: visible; + width: 4.333px; + height: 4.333px; + left: 85.851px; + top: 188.103px; +} +.Ellipse_36 { + position: absolute; + overflow: visible; + width: 4.333px; + height: 4.333px; + left: 39.812px; + top: 180.34px; +} +.Path_169 { + overflow: visible; + position: absolute; + width: 20.93px; + height: 14.974px; + left: 46.833px; + top: 205.537px; + transform: matrix(1,0,0,1,0,0); +} +.Ellipse_37 { + position: absolute; + overflow: visible; + width: 4.333px; + height: 4.333px; + left: 44.868px; + top: 203.449px; +} +.Ellipse_38 { + position: absolute; + overflow: visible; + width: 4.333px; + height: 4.333px; + left: 78.81px; + top: 199.116px; +} +.Path_170 { + overflow: visible; + position: absolute; + width: 78.968px; + height: 39.926px; + left: 34.062px; + top: 231.8px; + transform: matrix(1,0,0,1,0,0); +} +.Path_171_Class { + opacity: 0.2; +} +.Path_171 { + overflow: visible; + position: absolute; + width: 78.962px; + height: 20.308px; + left: 34.068px; + top: 251.418px; + transform: matrix(1,0,0,1,0,0); +} +.Path_172 { + overflow: visible; + position: absolute; + width: 24.074px; + height: 39.297px; + left: 317.01px; + top: 174.593px; + transform: matrix(1,0,0,1,0,0); +} +.Path_173_Class { + opacity: 0.1; +} +.Path_173 { + overflow: visible; + position: absolute; + width: 23.801px; + height: 39.297px; + left: 317.282px; + top: 174.593px; + transform: matrix(1,0,0,1,0,0); +} +.Path_174 { + overflow: visible; + position: absolute; + width: 1.112px; + height: 5.436px; + left: 338.118px; + top: 181.206px; + transform: matrix(1,0,0,1,0,0); +} +.Path_175 { + overflow: visible; + position: absolute; + width: 4.987px; + height: 3.016px; + left: 338.5px; + top: 183.753px; + transform: matrix(1,0,0,1,0,0); +} +.Path_176 { + overflow: visible; + position: absolute; + width: 24.073px; + height: 39.297px; + left: 293.998px; + top: 174.593px; + transform: matrix(1,0,0,1,0,0); +} +.Path_177_Class { + opacity: 0.1; +} +.Path_177 { + overflow: visible; + position: absolute; + width: 23.8px; + height: 39.297px; + left: 293.998px; + top: 174.593px; + transform: matrix(1,0,0,1,0,0); +} +.Path_178 { + overflow: visible; + position: absolute; + width: 1.112px; + height: 5.436px; + left: 295.854px; + top: 181.206px; + transform: matrix(1,0,0,1,0,0); +} +.Path_179 { + overflow: visible; + position: absolute; + width: 4.987px; + height: 3.016px; + left: 291.595px; + top: 183.753px; + transform: matrix(1,0,0,1,0,0); +} +.Path_180 { + overflow: visible; + position: absolute; + width: 50.138px; + height: 25.46px; + left: 297.389px; + top: 205.784px; + transform: matrix(1,0,0,1,0,0); +} +.Path_181_Class { + opacity: 0.2; +} +.Path_181 { + overflow: visible; + position: absolute; + width: 50.135px; + height: 18.196px; + left: 297.389px; + top: 213.048px; + transform: matrix(1,0,0,1,0,0); +} +.Group_8_Class { + position: absolute; + width: 449.635px; + height: 480.708px; + left: 1633.029px; + top: -0.341px; + overflow: visible; +} +.Ellipse_4_d { + width: 197.36px; + height: 197.36px; + position: absolute; + overflow: visible; + transform: translate(-1676.029px, 131.341px) matrix(1,0,0,1,1713.3269,114.7098) rotate(212deg); + transform-origin: center; +} +.Big_Circle_d { + overflow: visible; + position: absolute; + width: 311.51px; + height: 311.51px; + transform: translate(-1676.029px, 131.341px) matrix(1,0,0,1,1753.6853,-70.8717) rotate(236deg); + transform-origin: center; + left: 0px; + top: 0px; +} +.Big_Circle_ea { + overflow: visible; + position: absolute; + width: 311.51px; + height: 311.51px; + transform: matrix(1,0,0,1,-224.3147,906.1283) rotate(236deg); + transform-origin: center; + left: 0px; + top: 0px; +} +.Rectangle_145 { + filter: drop-shadow(0px 0px 30px rgba(0, 0, 0, 0.161)); + position: absolute; + overflow: visible; + width: 506px; + height: 634px; + left: 1308px; + top: 348px; +} +.unnamed_Class { + position: absolute; + width: 60px; + height: 60px; + left: 1330px; + top: 475px; + overflow: visible; +} +.Rectangle_146 { + filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.161)); + position: absolute; + overflow: visible; + width: 422px; + height: 78px; + left: 1308px; + top: 348px; +} +.Chat_with_Us__Class { + position: absolute; + left: 1423px; + top: 363px; + overflow: visible; + width: 188px; + white-space: nowrap; + text-align: left; + font-family: Product Sans; + font-style: normal; + font-weight: normal; + font-size: 32px; + color: rgba(255,255,255,1); +} +.Line_1 { + overflow: visible; + position: absolute; + width: 416px; + height: 1px; + left: 1308px; + top: 836px; + transform: matrix(1,0,0,1,0,0); +} +.Rectangle_147 { + position: absolute; + overflow: visible; + width: 200px; + height: 88px; + left: 1404px; + top: 444px; +} +.Hi__I_am_Weather_Bot___You_can_Class { + position: absolute; + left: 1419px; + top: 447px; + overflow: visible; + width: 172px; + white-space: nowrap; + text-align: left; + font-family: Product Sans; + font-style: normal; + font-weight: normal; + font-size: 16px; + color: rgba(96,96,96,1); +} +.Write_a_reply_or_select_an_opt_Class { + position: absolute; + left: 1356px; + top: 855px; + overflow: visible; + width: 256px; + white-space: nowrap; + text-align: left; + font-family: Product Sans; + font-style: normal; + font-weight: normal; + font-size: 16px; + color: rgba(96,96,96,1); +} +.Group_3_Class { + position: absolute; + width: 88px; + height: 32px; + left: 1404px; + top: 540px; + overflow: visible; +} +.Rectangle_148 { + position: absolute; + overflow: visible; + width: 88px; + height: 32px; + left: 0px; + top: 0px; +} +.Weather_Class { + position: absolute; + left: 14px; + top: 6.5px; + overflow: visible; + white-space: nowrap; + text-align: center; + font-family: Product Sans; + font-style: normal; + font-weight: normal; + font-size: 14px; + color: rgba(67,133,243,1); +} +.Group_6_Class { + position: absolute; + width: 72px; + height: 32px; + left: 1404px; + top: 580px; + overflow: visible; +} +.Rectangle_148_el { + position: absolute; + overflow: visible; + width: 72px; + height: 32px; + left: 0px; + top: 0px; +} +.News_Class { + position: absolute; + left: 16px; + top: 6.5px; + overflow: visible; + width: 40px; + white-space: nowrap; + text-align: center; + font-family: Product Sans; + font-style: normal; + font-weight: normal; + font-size: 14px; + color: rgba(67,133,243,1); +} +.Group_4_Class { + position: absolute; + width: 88px; + height: 32px; + left: 1500px; + top: 540px; + overflow: visible; +} +.Rectangle_148_eo { + position: absolute; + overflow: visible; + width: 88px; + height: 32px; + left: 0px; + top: 0px; +} +.Location_Class { + position: absolute; + left: 15px; + top: 6.5px; + overflow: visible; + width: 61px; + white-space: nowrap; + text-align: center; + font-family: Product Sans; + font-style: normal; + font-weight: normal; + font-size: 14px; + color: rgba(67,133,243,1); +} +.Group_7_Class { + position: absolute; + width: 82px; + height: 32px; + left: 1596px; + top: 540px; + overflow: visible; +} +.Rectangle_148_er { + position: absolute; + overflow: visible; + width: 82px; + height: 32px; + left: 0px; + top: 0px; +} +.Friendly_Class { + position: absolute; + left: 12px; + top: 6.5px; + overflow: visible; + width: 57px; + white-space: nowrap; + text-align: left; + font-family: Product Sans; + font-style: normal; + font-weight: normal; + font-size: 14px; + color: rgba(67,133,243,1); +} +.Path_28 { + overflow: visible; + position: absolute; + width: 16px; + height: 11.429px; + left: 1324px; + top: 858.571px; + transform: matrix(1,0,0,1,0,0); +} +.Group_5_Class { + position: absolute; + width: 40px; + height: 40px; + left: 1676px; + top: 844px; + overflow: visible; +} +.Ellipse_14 { + filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.161)); + position: absolute; + overflow: visible; + width: 100px; + height: 100px; + left: 0px; + top: 0px; +} +.send_24px_Class { + position: absolute; + width: 20px; + height: 20px; + left: 10.833px; + top: 10px; + overflow: visible; +} +.Path_31 { + overflow: visible; + position: absolute; + width: 17.5px; + height: 15px; + left: 1.667px; + top: 2.5px; + transform: matrix(1,0,0,1,0,0); +} +.Path_32 { + overflow: visible; + position: absolute; + width: 20px; + height: 20px; + left: 0px; + top: 0px; + transform: matrix(1,0,0,1,0,0); +} +.Path_33 { + overflow: visible; + position: absolute; + width: 16px; + height: 21.822px; + left: 1644px; + top: 853.179px; + transform: matrix(1,0,0,1,0,0); +} +.Group_11_Class { + transform: matrix(1,0,0,1,-161.9708,992.6595) rotate(-87deg); + transform-origin: center; + position: absolute; + width: 449.635px; + height: 480.708px; + left: 0px; + top: 0px; + overflow: visible; +} +.Ellipse_4_e { + width: 197.36px; + height: 197.36px; + position: absolute; + overflow: visible; + transform: translate(43.444px, 2129.625px) matrix(1,0,0,1,1713.3269,114.7098) rotate(212deg); + transform-origin: center; +} +.Big_Circle_e { + overflow: visible; + position: absolute; + width: 311.51px; + height: 311.51px; + transform: translate(43.444px, 2129.625px) matrix(1,0,0,1,1753.6853,-70.8717) rotate(236deg); + transform-origin: center; + left: 0px; + top: 0px; +} +.Rectangle_145_e { + filter: drop-shadow(0px 0px 30px rgba(0, 0, 0, 0.161)); + position: absolute; + overflow: visible; + width: 506px; + height: 634px; + left: 196px; + top: 1348px; +} +.unnamed_e_Class { + position: absolute; + width: 60px; + height: 60px; + left: 218px; + top: 1475px; + overflow: visible; +} +.Rectangle_146_e { + filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.161)); + position: absolute; + overflow: visible; + width: 422px; + height: 78px; + left: 196px; + top: 1348px; +} +.Chat_with_Us__e_Class { + position: absolute; + left: 311px; + top: 1363px; + overflow: visible; + width: 188px; + white-space: nowrap; + text-align: left; + font-family: Product Sans; + font-style: normal; + font-weight: normal; + font-size: 32px; + color: rgba(255,255,255,1); +} +.Line_1_e { + overflow: visible; + position: absolute; + width: 416px; + height: 1px; + left: 196px; + top: 1836px; + transform: matrix(1,0,0,1,0,0); +} +.Rectangle_147_e { + position: absolute; + overflow: visible; + width: 200px; + height: 88px; + left: 292px; + top: 1444px; +} +.Hi__I_am_Weather_Bot___You_can_e_Class { + position: absolute; + left: 307px; + top: 1447px; + overflow: visible; + width: 172px; + white-space: nowrap; + text-align: left; + font-family: Product Sans; + font-style: normal; + font-weight: normal; + font-size: 16px; + color: rgba(96,96,96,1); +} +.Write_a_reply_or_select_an_opt_fa_Class { + position: absolute; + left: 244px; + top: 1855px; + overflow: visible; + width: 256px; + white-space: nowrap; + text-align: left; + font-family: Product Sans; + font-style: normal; + font-weight: normal; + font-size: 16px; + color: rgba(96,96,96,1); +} +.Group_3_fb_Class { + position: absolute; + width: 88px; + height: 32px; + left: 292px; + top: 1540px; + overflow: visible; +} +.Rectangle_148_fc { + position: absolute; + overflow: visible; + width: 88px; + height: 32px; + left: 0px; + top: 0px; +} +.Weather_fd_Class { + position: absolute; + left: 14px; + top: 6.5px; + overflow: visible; + width: 60px; + white-space: nowrap; + text-align: left; + font-family: Product Sans; + font-style: normal; + font-weight: normal; + font-size: 14px; + color: rgba(67,133,243,1); +} +.Group_6_fe_Class { + position: absolute; + width: 72px; + height: 32px; + left: 292px; + top: 1580px; + overflow: visible; +} +.Rectangle_148_ff { + position: absolute; + overflow: visible; + width: 72px; + height: 32px; + left: 0px; + top: 0px; +} +.News_fg_Class { + position: absolute; + left: 16px; + top: 6.5px; + overflow: visible; + width: 40px; + white-space: nowrap; + text-align: center; + font-family: Product Sans; + font-style: normal; + font-weight: normal; + font-size: 14px; + color: rgba(67,133,243,1); +} +.Group_4_fh_Class { + position: absolute; + width: 88px; + height: 32px; + left: 388px; + top: 1540px; + overflow: visible; +} +.Rectangle_148_fi { + position: absolute; + overflow: visible; + width: 88px; + height: 32px; + left: 0px; + top: 0px; +} +.Location_fj_Class { + position: absolute; + left: 15px; + top: 6.5px; + overflow: visible; + width: 61px; + white-space: nowrap; + text-align: center; + font-family: Product Sans; + font-style: normal; + font-weight: normal; + font-size: 14px; + color: rgba(67,133,243,1); +} +.Group_7_fk_Class { + position: absolute; + width: 82px; + height: 32px; + left: 484px; + top: 1540px; + overflow: visible; +} +.Rectangle_148_fl { + position: absolute; + overflow: visible; + width: 82px; + height: 32px; + left: 0px; + top: 0px; +} +.Friendly_fm_Class { + position: absolute; + left: 12px; + top: 6.5px; + overflow: visible; + width: 57px; + white-space: nowrap; + text-align: center; + font-family: Product Sans; + font-style: normal; + font-weight: normal; + font-size: 14px; + color: rgba(67,133,243,1); +} +.Path_28_fn { + overflow: visible; + position: absolute; + width: 16px; + height: 11.429px; + left: 212px; + top: 1858.571px; + transform: matrix(1,0,0,1,0,0); +} +.Group_5_fo_Class { + position: absolute; + width: 40px; + height: 40px; + left: 564px; + top: 1844px; + overflow: visible; +} +.Ellipse_14_fp { + filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.161)); + position: absolute; + overflow: visible; + width: 100px; + height: 100px; + left: 0px; + top: 0px; +} +.send_24px_fq_Class { + position: absolute; + width: 20px; + height: 20px; + left: 10.833px; + top: 10px; + overflow: visible; +} +.Path_31_fr { + overflow: visible; + position: absolute; + width: 17.5px; + height: 15px; + left: 1.667px; + top: 2.5px; + transform: matrix(1,0,0,1,0,0); +} +.Path_32_fs { + overflow: visible; + position: absolute; + width: 20px; + height: 20px; + left: 0px; + top: 0px; + transform: matrix(1,0,0,1,0,0); +} +.Path_33_ft { + overflow: visible; + position: absolute; + width: 16px; + height: 21.822px; + left: 532px; + top: 1853.178px; + transform: matrix(1,0,0,1,0,0); +} +.Path_11 { + filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.169)); + overflow: visible; + position: absolute; + width: 1944px; + height: 184px; + left: 0px; + top: 0px; + transform: matrix(1,0,0,1,0,0); +} +.SAATHI___Voice_Enabled_Chatbot_Class { + position: absolute; + left: 148px; + top: 38px; + overflow: visible; + width: 885px; + white-space: nowrap; + text-align: left; + font-family: Gotham; + font-style: normal; + font-weight: bold; + font-size: 60px; + color: rgba(67,133,243,1); +} +.Lorem_ipsum_dolor_sit_amet__co_Class { + position: absolute; + left: 196px; + top: 455px; + overflow: visible; + width: 720px; + white-space: nowrap; + text-align: left; + font-family: Product Sans; + font-style: normal; + font-weight: normal; + font-size: 40px; + color: rgba(96,96,96,1); +} +.Lorem_ipsum_dolor_sit_amet__co_fx_Class { + position: absolute; + left: 1060px; + top: 1369px; + overflow: visible; + width: 579px; + white-space: nowrap; + text-align: left; + font-family: Product Sans; + font-style: normal; + font-weight: normal; + font-size: 32px; + color: rgba(96,96,96,1); +} +.Lorem_ipsum_dolor_sit_amet__co_fy_Class { + position: absolute; + left: 1060px; + top: 1566px; + overflow: visible; + width: 579px; + white-space: nowrap; + text-align: left; + font-family: Product Sans; + font-style: normal; + font-weight: normal; + font-size: 32px; + color: rgba(96,96,96,1); +} +.Lorem_ipsum_dolor_sit_amet__co_fz_Class { + position: absolute; + left: 1060px; + top: 1763px; + overflow: visible; + width: 579px; + white-space: nowrap; + text-align: left; + font-family: Product Sans; + font-style: normal; + font-weight: normal; + font-size: 32px; + color: rgba(96,96,96,1); +} +.THE_WEATHER_CHATBOT_Class { + position: absolute; + left: 196px; + top: 333px; + overflow: visible; + width: 704px; + white-space: nowrap; + text-align: left; + font-family: Product Sans; + font-style: normal; + font-weight: bold; + font-size: 55px; + color: rgba(255,174,71,1); +} +.THE_WEATHER_CHATBOT_f_Class { + position: absolute; + left: 1013px; + top: 1237px; + overflow: visible; + width: 704px; + white-space: nowrap; + text-align: left; + font-family: Gotham; + font-style: normal; + font-weight: bold; + font-size: 55px; + color: rgba(255,174,71,1); +} +.weather_undraw_Class { + position: absolute; + width: 260.293px; + height: 237.559px; + left: 613.521px; + top: 1654px; + overflow: visible; +} +.Path_182 { + overflow: visible; + position: absolute; + width: 232.433px; + height: 104.623px; + left: 19.146px; + top: 132.936px; + transform: matrix(1,0,0,1,0,0); +} +.Path_183 { + overflow: visible; + position: absolute; + width: 233.483px; + height: 105.651px; + left: 20.791px; + top: 127.015px; + transform: matrix(1,0,0,1,0,0); +} +.Ellipse_39 { + position: absolute; + overflow: visible; + width: 61.47px; + height: 61.47px; + left: 31.117px; + top: 90.568px; +} +.Rectangle_234 { + position: absolute; + overflow: visible; + width: 15.066px; + height: 30.374px; + left: 54.42px; + top: 54.289px; +} +.Rectangle_235 { + width: 15.066px; + height: 30.374px; + position: absolute; + overflow: visible; + transform: translate(-1.521px, 0px) matrix(1,0,0,1,100.7736,80.2903) rotate(60deg); + transform-origin: center; +} +.Rectangle_236 { + width: 15.066px; + height: 30.374px; + position: absolute; + overflow: visible; + transform: translate(-1.521px, 0px) matrix(1,0,0,1,10.9062,131.9432) rotate(240deg); + transform-origin: center; +} +.Rectangle_237 { + width: 15.066px; + height: 30.374px; + position: absolute; + overflow: visible; + transform: translate(-1.521px, 0px) matrix(1,0,0,1,11.0063,80.1155) rotate(-60deg); + transform-origin: center; +} +.Ellipse_40 { + position: absolute; + overflow: visible; + width: 62.47px; + height: 62.47px; + left: 34.735px; + top: 86.95px; +} +.Rectangle_238 { + position: absolute; + overflow: visible; + width: 16.066px; + height: 31.374px; + left: 58.038px; + top: 50.671px; +} +.Rectangle_239 { + width: 15.066px; + height: 30.374px; + position: absolute; + overflow: visible; + transform: translate(-1.521px, 0px) matrix(1,0,0,1,104.3917,76.6723) rotate(60deg); + transform-origin: center; +} +.Rectangle_240 { + width: 15.066px; + height: 30.374px; + position: absolute; + overflow: visible; + transform: translate(-1.521px, 0px) matrix(1,0,0,1,14.5242,128.3251) rotate(240deg); + transform-origin: center; +} +.Rectangle_241 { + width: 15.066px; + height: 30.374px; + position: absolute; + overflow: visible; + transform: translate(-1.521px, 0px) matrix(1,0,0,1,14.6243,76.4974) rotate(-60deg); + transform-origin: center; +} +.Path_184 { + overflow: visible; + position: absolute; + width: 26.41px; + height: 46.089px; + left: 213.201px; + top: 174.554px; + transform: matrix(1,0,0,1,0,0); +} +.Path_185 { + overflow: visible; + position: absolute; + width: 48.583px; + height: 39.41px; + left: 176.167px; + top: 106.646px; + transform: matrix(1,0,0,1,0,0); +} +.Ellipse_41 { + position: absolute; + overflow: visible; + width: 34.605px; + height: 34.605px; + left: 186.888px; + top: 19.847px; +} +.Path_186 { + overflow: visible; + position: absolute; + width: 27.888px; + height: 26.056px; + left: 186.685px; + top: 52.01px; + transform: matrix(1,0,0,1,0,0); +} +.Path_187_Class { + opacity: 0.1; +} +.Path_187 { + overflow: visible; + position: absolute; + width: 27.888px; + height: 26.056px; + left: 186.685px; + top: 52.01px; + transform: matrix(1,0,0,1,0,0); +} +.Ellipse_42 { + position: absolute; + overflow: visible; + width: 24.834px; + height: 24.834px; + left: 188.822px; + top: 32.774px; +} +.Path_188 { + overflow: visible; + position: absolute; + width: 55.169px; + height: 51.501px; + left: 174.06px; + top: 60.763px; + transform: matrix(1,0,0,1,0,0); +} +.Path_189 { + overflow: visible; + position: absolute; + width: 55.312px; + height: 39.746px; + left: 135.139px; + top: 106.315px; + transform: matrix(1,0,0,1,0,0); +} +.Path_190 { + overflow: visible; + position: absolute; + width: 48.978px; + height: 57.054px; + left: 211.315px; + top: 125.089px; + transform: matrix(1,0,0,1,0,0); +} +.Path_191 { + overflow: visible; + position: absolute; + width: 29.813px; + height: 66.476px; + left: 201.385px; + top: 79.491px; + transform: matrix(1,0,0,1,0,0); +} +.Path_192 { + overflow: visible; + position: absolute; + width: 55.058px; + height: 20.573px; + left: 178.542px; + top: 128.549px; + transform: matrix(1,0,0,1,0,0); +} +.Path_193_Class { + opacity: 0.1; +} +.Path_193 { + overflow: visible; + position: absolute; + width: 55.058px; + height: 20.573px; + left: 178.542px; + top: 128.549px; + transform: matrix(1,0,0,1,0,0); +} +.Path_194 { + overflow: visible; + position: absolute; + width: 32.167px; + height: 58.537px; + left: 174.063px; + top: 87.226px; + transform: matrix(1,0,0,1,0,0); +} +.Path_195 { + overflow: visible; + position: absolute; + width: 14.09px; + height: 18.904px; + left: 217.625px; + top: 66.87px; + transform: matrix(1,0,0,1,0,0); +} +.Path_196 { + overflow: visible; + position: absolute; + width: 14.375px; + height: 20.841px; + left: 170.07px; + top: 70.534px; + transform: matrix(1,0,0,1,0,0); +} +.Path_197_Class { + opacity: 0.1; +} +.Path_197 { + overflow: visible; + position: absolute; + width: 45.662px; + height: 28.042px; + left: 141.114px; + top: 112.264px; + transform: matrix(1,0,0,1,0,0); +} +.Path_198 { + overflow: visible; + position: absolute; + width: 48.116px; + height: 29.313px; + left: 138.568px; + top: 112.264px; + transform: matrix(1,0,0,1,0,0); +} +.Ellipse_43 { + position: absolute; + overflow: visible; + width: 34.605px; + height: 34.605px; + left: 190.247px; + top: 8.142px; +} +.Ellipse_44 { + position: absolute; + overflow: visible; + width: 16.285px; + height: 16.285px; + left: 204.292px; + top: 0px; +} +.Ellipse_45 { + position: absolute; + overflow: visible; + width: 24px; + height: 24px; + left: 1013px; + top: 1381px; +} +.Ellipse_46 { + position: absolute; + overflow: visible; + width: 24px; + height: 24px; + left: 1013px; + top: 1578px; +} +.Ellipse_47 { + position: absolute; + overflow: visible; + width: 24px; + height: 24px; + left: 1013px; + top: 1774px; +} \ No newline at end of file