-
-
-
-
Welcome to Web Maker
-
-
-
-
-
- By default, Web Maker can be started by clicking the
-
-
Choose one:
-
-
-
-
-
Don't show in new tab
-
-
-
OR
-
-
-
-
-
-
Show in every new tab
-
+
+
+
+
Welcome to Web Maker
+
+
+
+
-
- You can change this later from Settings (
-
- Also, follow @webmakerApp to know about the new upcoming features!
-
-
-
- Lets start!
+ Open Web Maker anytime by clicking the
+
+ button in top-right side of your browser.
+
+
+
+
+
+
+ Configure and customize settings by clicking the gear icon (
+
+ ) in bottom right of the app.
+
+
+
+
+
+
+
+
+ Follow @webmakerApp to know about the new upcoming
+ features!
+
+
+
+
+
+
+ Lets start!
+
@@ -562,6 +556,10 @@
+
@@ -607,6 +605,7 @@
+
diff --git a/src/script.js b/src/script.js
index 0ba399b..4430f8c 100644
--- a/src/script.js
+++ b/src/script.js
@@ -1859,6 +1859,8 @@ globalConsoleContainerEl
}
scope.openDetachedPreview = function() {
+ trackEvent('ui', 'detachPreviewBtnClick');
+
if (scope.detachedWindow) {
scope.detachedWindow.focus();
return;
@@ -1895,6 +1897,7 @@ globalConsoleContainerEl
scope.acssSettingsCm.refresh();
scope.acssSettingsCm.focus();
}, 500);
+ trackEvent('ui', 'cssSettingsBtnClick');
};
function init() {
@@ -2303,7 +2306,10 @@ globalConsoleContainerEl
// Check if new user
if (!result.lastSeenVersion) {
onboardModal.classList.add('is-modal-visible');
- trackEvent('ui', 'onboardModalSeen');
+ if (document.cookie.indexOf('onboarded') !== -1) {
+ trackEvent('ui', 'onboardModalSeen', version);
+ document.cookie = 'onboarded=1';
+ }
chrome.storage.sync.set(
{
lastSeenVersion: version
diff --git a/src/style.css b/src/style.css
index b9b2a1a..aacafa2 100644
--- a/src/style.css
+++ b/src/style.css
@@ -792,33 +792,42 @@ body > #demo-frame {
padding: 1px 6px;
font-weight: bold;
}
-.onboard-selection-wrap {
- justify-content: center;
- align-items: center;
+.onboard-step {
+ background: #f7f2f1;
+ border: 1px solid #ecdede;
+ margin: 15px;
+ padding: 20px 30px;
+ background-color: white;
+ border-radius: 10px;
+ box-shadow: 0 16px 22px rgba(0, 0, 0, 0.1);
+ flex: 1;
+ opacity: 0;
+ animation: onboard-step-show 0.6s ease forwards;
+ animation-delay: 0.1s;
}
-.onboard-selection {
- padding: 10px;
- margin: 0 40px;
- border-radius: 5px;
- transition: 0.25s ease;
- position: relative;
- border: 1px solid transparent;
+.onboard-step:nth-child(2) {
+ animation-delay: 0.2s;
}
-.onboard-selection:hover {
- cursor: pointer;
- /*background-color: rgba(0,0,0,0.3);*/
- transform: scale(1.15);
- /*border-color: rgba(0,0,0,0.4);*/
+.onboard-step:nth-child(3) {
+ animation-delay: 0.4s;
}
-.onboard-selection.selected:after {
- content: '';
- position: absolute;
- right: -20px;
- bottom: 40px;
- width: 80px;
- height: 80px;
- border-radius: 50%;
- background: white url('data:image/svg+xml;charset=UTF-8,
');
+.onboard-step__icon {
+ fill: transparent!important;
+ stroke-width: 0.3px;
+ stroke: #eeb096;
+ width: 150px;
+ height: 150px;
+}
+
+@keyframes onboard-step-show {
+ from {
+ transform: translateY(10px);
+ opacity: 0;
+ }
+ to {
+ transform: translateY(0);
+ opacity: 1;
+ }
}
.autocomplete-dropdown {