diff --git a/website/assets/js/pages/transparency.page.js b/website/assets/js/pages/transparency.page.js
index be7cfde1f3..fd1a16a5f4 100644
--- a/website/assets/js/pages/transparency.page.js
+++ b/website/assets/js/pages/transparency.page.js
@@ -5,6 +5,7 @@ parasails.registerPage('transparency', {
data: {
//…
showSecureframeBanner: false,
+ modal: undefined,
},
// ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗
@@ -21,6 +22,11 @@ parasails.registerPage('transparency', {
// ║║║║ ║ ║╣ ╠╦╝╠═╣║ ║ ║║ ║║║║╚═╗
// ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
methods: {
- //…
+ clickOpenVideoModal: function(modalName) {
+ this.modal = modalName;
+ },
+ closeModal: function() {
+ this.modal = undefined;
+ },
}
});
diff --git a/website/assets/styles/pages/transparency.less b/website/assets/styles/pages/transparency.less
index 3659c7582e..10848dcde4 100644
--- a/website/assets/styles/pages/transparency.less
+++ b/website/assets/styles/pages/transparency.less
@@ -266,7 +266,61 @@
border: 1px solid @core-vibrant-blue-15;
box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.1);
border-radius: 16px;
-
+ }
+ [purpose='video-button'] {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ cursor: pointer;
+ color: #192147;
+ text-decoration: none;
+ img {
+ height: 32px;
+ margin-right: 8px;
+ }
+ span {
+ margin-left: 4px;
+ display: inline-block;
+ color: #8B8FA2;
+ font-size: 12px;
+ margin-top: 2px;
+ font-weight: 400;
+ }
+ }
+ [purpose='video-modal'] {
+ [purpose='modal-dialog'] {
+ width: 100%;
+ max-width: 100%;
+ padding-left: 24px;
+ padding-right: 24px;
+ }
+ [purpose='modal-content'] {
+ max-width: 1140px;
+ height: 641px;
+ background-color: transparent;
+ box-shadow: none;
+ border: none;
+ padding: 0px;
+ margin-top: 150px;
+ margin-left: auto;
+ margin-right: auto;
+ [purpose='modal-close-button'] {
+ top: -40px;
+ right: 0px;
+ border-radius: 50%;
+ width: 32px;
+ height: 32px;
+ padding: 0px 0px 4px 0px;
+ background-color: #192147;
+ color: #FFF;
+ opacity: 1;
+ }
+ }
+ iframe {
+ border-radius: 16px;
+ width: auto;
+ height: 641px;
+ }
}
@media (max-width: 1199px) {
@@ -302,6 +356,20 @@
text-align: center;
margin-bottom: 0px;
}
+ [purpose='video-modal'] {
+ [purpose='modal-dialog'] {
+ width: 100%;
+ max-width: 100%;
+ }
+ [purpose='modal-content'] {
+ max-width: 720px;
+ height: 405px;
+ }
+ iframe {
+ width: 720px;
+ height: 405px;
+ }
+ }
}
@@ -343,7 +411,21 @@
[purpose='page-content'] {
max-width: @page-container-max-width-md;
}
-
+ [purpose='video-modal'] {
+ [purpose='modal-dialog'] {
+ max-width: 97vw;
+ padding-left: 0px;
+ padding-right: 0px;
+ }
+ [purpose='modal-content'] {
+ max-width: 540px;
+ height: 304px;
+ }
+ iframe {
+ width: 540px;
+ height: 304px;
+ }
+ }
}
@media (max-width: 575px) {
@@ -392,6 +474,16 @@
font-size: 24px;
}
}
+ [purpose='video-modal'] {
+ [purpose='modal-content'] {
+ width: 95vw;
+ height: calc(~'9/16 * 95vw');
+ }
+ iframe {
+ width: 95vw;
+ height: calc(~'9/16 * 95vw');
+ }
+ }
}
@media (max-width: 375px) {
diff --git a/website/views/pages/transparency.ejs b/website/views/pages/transparency.ejs
index 6ec11ce0f4..027891188f 100644
--- a/website/views/pages/transparency.ejs
+++ b/website/views/pages/transparency.ejs
@@ -18,7 +18,8 @@
How does it affect me?
Secureframe Agent has to monitor compliance with a bunch of security requirements. But we also realize you have a job to do. So we want to be as un-intrusive as possible.
Your IT team has to maintain your computer and keep it compliant with a bunch of security requirements. But they also realize you have a job to do. So they want to be as un-intrusive as possible.
- That’s why they chose Fleet. It’s compatible with everything, including Linux, so it doesn’t limit what operating system you use. And it’s open source, meaning if you want to, you can take it apart and see what it’s doing to your computer.
+ That’s why they chose Fleet. It’s compatible with everything, including Linux, so it doesn’t limit what operating system you use. And it’s open source, meaning if you want to, you can take it apart and see what it’s doing to your computer.
+ 
Why is Fleet on my computer?