pixflow-upgrade-planning 1.3.1 → 1.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/index.js +13 -2
  2. package/package.json +1 -1
  3. package/style.css +33 -8
  4. package/style.css.map +1 -1
  5. package/style.scss +59 -34
  6. package/template.html +2 -2
package/index.js CHANGED
@@ -22,18 +22,29 @@ class PixflowUpgradePlanning extends HTMLElement {
22
22
  this.template = parse.parseFromString(fs.readFileSync(path.join(__dirname, "template.html")).toString("utf8"), "text/html");
23
23
  this.appendChild(this.template.querySelector("div"));
24
24
 
25
- this.querySelector(`img.close`).addEventListener("click", this.close_click);
25
+ this.querySelector("img.close").addEventListener("click", this.close_click);
26
+
27
+ this.querySelector("img.go-premium-btn").addEventListener("click", this.go_premium_click)
26
28
 
27
29
  }
28
30
 
29
31
  close_click(e){
30
32
  const window = e.target.parentNode;
31
- window.close();
33
+ window.closeWindow();
32
34
  setTimeout(() => {
33
35
  window.parentNode.parentNode.classList.remove("active");
34
36
  }, 500);
35
37
  }
36
38
 
39
+ open(){
40
+ this.classList.add("active");
41
+ }
42
+
43
+ go_premium_click(e){
44
+ const url = JSON.parse(localStorage.getItem("init-data")).userData.upgrade_subscription_url;
45
+ window.cep.util.openURLInDefaultBrowser(url);
46
+ }
47
+
37
48
  }
38
49
 
39
50
  customElements.define("pixflow-upgrade-planning", PixflowUpgradePlanning);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixflow-upgrade-planning",
3
- "version": "1.3.1",
3
+ "version": "1.3.3",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/style.css CHANGED
@@ -4,25 +4,38 @@ pixflow-upgrade-planning {
4
4
  pixflow-upgrade-planning.active {
5
5
  display: block;
6
6
  }
7
- pixflow-upgrade-planning > div.block {
7
+ pixflow-upgrade-planning div {
8
+ position: absolute;
9
+ top: 0;
10
+ left: 0;
11
+ }
12
+ pixflow-upgrade-planning div > div.block {
8
13
  background-color: rgba(0, 0, 0, 0.7);
9
14
  width: 100%;
10
15
  height: 100vh;
11
- position: absolute;
16
+ position: fixed;
12
17
  top: 0;
13
18
  left: 0;
14
- z-index: 1;
19
+ z-index: 10;
15
20
  }
16
- pixflow-upgrade-planning window-element {
21
+ pixflow-upgrade-planning div window-element {
17
22
  display: flex;
18
23
  flex-direction: column;
19
24
  background-image: url(./node_modules/pixflow-upgrade-planning/images/bg.png);
20
25
  background-position: top center;
21
26
  backdrop-filter: blur(250px);
22
27
  background-size: contain;
23
- z-index: 2;
28
+ background-color: #000000;
29
+ z-index: 10;
30
+ position: fixed;
31
+ top: calc((100vh - 745px) / 2);
32
+ right: calc((100% - 502px) / 2);
33
+ background-repeat: no-repeat;
34
+ justify-content: center;
35
+ align-items: center;
36
+ border-radius: 40px;
24
37
  }
25
- pixflow-upgrade-planning window-element div.title {
38
+ pixflow-upgrade-planning div window-element div.title {
26
39
  font-family: Inter;
27
40
  font-weight: 700;
28
41
  font-size: 28px;
@@ -31,12 +44,20 @@ pixflow-upgrade-planning window-element div.title {
31
44
  text-align: center;
32
45
  width: 332px;
33
46
  color: #FFFFFF;
47
+ margin: 25px 0;
48
+ }
49
+ pixflow-upgrade-planning div window-element img.close {
50
+ width: 36px;
51
+ height: 36px;
52
+ position: absolute;
53
+ top: 20px;
54
+ right: 20px;
34
55
  }
35
- pixflow-upgrade-planning window-element img {
56
+ pixflow-upgrade-planning div window-element img.reward {
36
57
  width: 50%;
37
58
  margin: 10px 0;
38
59
  }
39
- pixflow-upgrade-planning window-element ul li {
60
+ pixflow-upgrade-planning div window-element ul li {
40
61
  list-style-image: url(./node_modules/pixflow-upgrade-planning/images/item-style.svg);
41
62
  font-family: Inter;
42
63
  font-weight: 400;
@@ -45,6 +66,10 @@ pixflow-upgrade-planning window-element ul li {
45
66
  letter-spacing: 0px;
46
67
  text-transform: capitalize;
47
68
  color: #FFFFFF;
69
+ margin: 20px 0;
70
+ }
71
+ pixflow-upgrade-planning div window-element img.go-premium {
72
+ cursor: pointer;
48
73
  }
49
74
 
50
75
  /*# sourceMappingURL=style.css.map */
package/style.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAAA;EACI;;AACA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAGA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"style.css"}
1
+ {"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAAA;EACI;;AACA;EACI;;AAEJ;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAGA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGR;EACI","file":"style.css"}
package/style.scss CHANGED
@@ -3,47 +3,72 @@ pixflow-upgrade-planning {
3
3
  &.active {
4
4
  display: block;
5
5
  }
6
- > div.block {
7
- background-color: rgba(0, 0, 0, 0.7);
8
- width: 100%;
9
- height: 100vh;
6
+ div {
10
7
  position: absolute;
11
8
  top: 0;
12
9
  left: 0;
13
- z-index: 1;
14
- }
15
- window-element {
16
- display: flex;
17
- flex-direction: column;
18
- background-image: url(./node_modules/pixflow-upgrade-planning/images/bg.png);
19
- background-position: top center;
20
- backdrop-filter: blur(250px);
21
- background-size: contain;
22
- z-index: 2;
23
- div.title {
24
- font-family: Inter;
25
- font-weight: 700;
26
- font-size: 28px;
27
- line-height: 40px;
28
- letter-spacing: 0px;
29
- text-align: center;
30
- width: 332px;
31
- color: #FFFFFF;
32
- }
33
- img {
34
- width: 50%;
35
- margin: 10px 0;
10
+ > div.block {
11
+ background-color: rgba(0, 0, 0, 0.7);
12
+ width: 100%;
13
+ height: 100vh;
14
+ position: fixed;
15
+ top: 0;
16
+ left: 0;
17
+ z-index: 10;
36
18
  }
37
- ul {
38
- li {
39
- list-style-image: url(./node_modules/pixflow-upgrade-planning/images/item-style.svg);
19
+ window-element {
20
+ display: flex;
21
+ flex-direction: column;
22
+ background-image: url(./node_modules/pixflow-upgrade-planning/images/bg.png);
23
+ background-position: top center;
24
+ backdrop-filter: blur(250px);
25
+ background-size: contain;
26
+ background-color: #000000;
27
+ z-index: 10;
28
+ position: fixed;
29
+ top: calc((100vh - 745px) / 2);
30
+ right: calc((100% - 502px) / 2);
31
+ background-repeat: no-repeat;
32
+ justify-content: center;
33
+ align-items: center;
34
+ border-radius: 40px;
35
+ div.title {
40
36
  font-family: Inter;
41
- font-weight: 400;
42
- font-size: 16px;
43
- line-height: 100%;
37
+ font-weight: 700;
38
+ font-size: 28px;
39
+ line-height: 40px;
44
40
  letter-spacing: 0px;
45
- text-transform: capitalize;
41
+ text-align: center;
42
+ width: 332px;
46
43
  color: #FFFFFF;
44
+ margin: 25px 0;
45
+ }
46
+ img.close {
47
+ width: 36px;
48
+ height: 36px;
49
+ position: absolute;
50
+ top: 20px;
51
+ right: 20px;
52
+ }
53
+ img.reward {
54
+ width: 50%;
55
+ margin: 10px 0;
56
+ }
57
+ ul {
58
+ li {
59
+ list-style-image: url(./node_modules/pixflow-upgrade-planning/images/item-style.svg);
60
+ font-family: Inter;
61
+ font-weight: 400;
62
+ font-size: 16px;
63
+ line-height: 100%;
64
+ letter-spacing: 0px;
65
+ text-transform: capitalize;
66
+ color: #FFFFFF;
67
+ margin: 20px 0;
68
+ }
69
+ }
70
+ img.go-premium {
71
+ cursor: pointer;
47
72
  }
48
73
  }
49
74
  }
package/template.html CHANGED
@@ -3,7 +3,7 @@
3
3
  <window-element animation-class="scrollup">
4
4
  <img src="./node_modules/pixflow-upgrade-planning/images/close.svg" class="close">
5
5
  <div class="title">+4,000 Premium assets just for $15/mo</div>
6
- <img src="./node_modules/pixflow-upgrade-planning/images/reward.png">
6
+ <img src="./node_modules/pixflow-upgrade-planning/images/reward.png" class="reward">
7
7
  <ul>
8
8
  <li>+4,000 Premium Assets</li>
9
9
  <li>motion factory pro</li>
@@ -11,6 +11,6 @@
11
11
  <li>Unlimited video templates</li>
12
12
  <li>License With Worldwide Coverage</li>
13
13
  </ul>
14
- <img src="./node_modules/pixflow-upgrade-planning/images/btn-go-prm.svg">
14
+ <img src="./node_modules/pixflow-upgrade-planning/images/btn-go-prm.svg" class="go-premium-btn">
15
15
  </window-element>
16
16
  </div>