Help users understand the terms of CE

Signed-off-by: Alex Ellis (OpenFaaS Ltd) <[email protected]>

Author: alexellis

gateway/assets/index.html

@@ -25,6 +25,21 @@
     <div class="jsonly">
     <div layout="column" ng-cloak>
 
+        <!-- EULA Banner -->
+        <div id="eula-banner" class="eula-banner" ng-show="showLicenseBanner">
+            <div class="eula-banner-content">
+                <span class="eula-banner-text">
+                    <strong>OpenFaaS CE</strong> is a limited version for personal use or a single 60-day trial. 
+                    <button class="eula-banner-button" ng-click="openPricingPage()" aria-label="Learn more about OpenFaaS licensing">Learn more</button>
+                </span>
+                <button class="eula-banner-close" 
+                        ng-class="{'eula-banner-close-disabled': !bannerCanBeDismissed}"
+                        ng-click="dismissLicenseBanner()" 
+                        ng-disabled="!bannerCanBeDismissed"
+                        aria-label="Dismiss banner">×</button>
+            </div>
+        </div>
+
         <md-toolbar class="md-theme-indigo" hide-gt-sm>
             <div class="md-toolbar-tools no-pad">
                 <md-button ng-click="toggleSideNav()" class="md-icon-button" aria-label="Menu">

gateway/assets/script/bootstrap.js

@@ -23,6 +23,24 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f
             contentType: "text"
         };
 
+        // License banner functionality
+        $scope.showLicenseBanner = true; // Always show on page load
+        $scope.bannerCanBeDismissed = false; // Start as non-dismissible
+        
+        // Enable dismissal after 5 seconds
+        $interval(function() {
+            $scope.bannerCanBeDismissed = true;
+        }, 5000, 1); // Run once after 5 seconds
+        
+        $scope.dismissLicenseBanner = function() {
+            if ($scope.bannerCanBeDismissed) {
+                $scope.showLicenseBanner = false;
+            }
+        };
+        $scope.openPricingPage = function() {
+            window.open('https://openfaas.com/pricing', '_blank');
+        };
+
         $scope.baseUrl = $location.absUrl().replace(/\ui\/$/, '');
 
         try {

gateway/assets/style/bootstrap.css

@@ -2,6 +2,99 @@ body {
 	background-color: rgb(243, 244, 250);
 }
 
+/* EULA Banner Styles */
+.eula-banner {
+	background-color: #fff3cd;
+	border: 1px solid #ffeaa7;
+	color: #856404;
+	padding: 0;
+	position: relative;
+	z-index: 1000;
+	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+/* Hide banner when modal dialogs are open */
+.md-dialog-is-showing .eula-banner {
+	display: none !important;
+}
+
+.eula-banner-content {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 12px 16px;
+	max-width: 100%;
+}
+
+.eula-banner-text {
+	flex: 1;
+	font-size: 14px;
+	line-height: 1.4;
+}
+
+.eula-banner-button {
+	background-color: #856404;
+	border: none;
+	border-radius: 4px;
+	color: white;
+	cursor: pointer;
+	font-size: 12px;
+	font-weight: 500;
+	margin-left: 8px;
+	padding: 4px 12px;
+	transition: background-color 0.2s ease;
+	vertical-align: baseline;
+}
+
+.eula-banner-button:hover {
+	background-color: #533f03;
+}
+
+.eula-banner-button:focus {
+	outline: 2px solid #856404;
+	outline-offset: 2px;
+}
+
+.eula-banner-close {
+	background: none;
+	border: none;
+	color: #856404;
+	cursor: pointer;
+	font-size: 20px;
+	font-weight: bold;
+	line-height: 1;
+	margin-left: 16px;
+	padding: 0;
+	width: 24px;
+	height: 24px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 4px;
+	transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.eula-banner-close:hover:not(:disabled) {
+	background-color: rgba(133, 100, 4, 0.1);
+}
+
+.eula-banner-close:focus:not(:disabled) {
+	outline: 2px solid #856404;
+	outline-offset: 2px;
+}
+
+.eula-banner-close-disabled,
+.eula-banner-close:disabled {
+	color: #bbb !important;
+	cursor: not-allowed !important;
+	opacity: 0.5;
+}
+
+.eula-banner-close-disabled:hover,
+.eula-banner-close:disabled:hover {
+	background-color: transparent !important;
+}
+
 md-content.blankslate {
 	background-color: rgb(243, 244, 250);
 	padding-top: 50px;