pixflow-upgrade-planning 1.4.1 → 1.4.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 (8) hide show
  1. package/images/active.svg +4 -0
  2. package/images/inactive.svg +3 -0
  3. package/index.js +30 -0
  4. package/package.json +1 -1
  5. package/style.css +34 -3
  6. package/style.css.map +1 -1
  7. package/style.scss +43 -14
  8. package/template.html +36 -25
package/images/active.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <circle cx="12" cy="12" r="12" fill="white"/>
3
+ <path d="M17.2661 8.99268L10.7661 15.4927L7.81152 12.5381" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
4
+ </svg>
package/images/inactive.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <circle cx="12" cy="12" r="11.5" stroke="white"/>
3
+ </svg>
package/index.js CHANGED
@@ -65,6 +65,36 @@ class PixflowUpgradePlanning extends HTMLElement {
65
65
  this.setUrl(e.detail.url);
66
66
  this.setCaption(e.detail.caption);
67
67
  })
68
+
69
+ this.addEventListener("statusActiveOptions", e => {
70
+ const options = e.target.querySelectorAll(`div.options`);
71
+ const item = options[e.detail.item];
72
+ if(item != null) {
73
+ if(e.detail.status)
74
+ item.classList.add("active");
75
+ else
76
+ item.classList.remove("active");
77
+ }
78
+ })
79
+
80
+ this.addEventListener("statusSelectedOptions", e => {
81
+ const options = e.target.querySelectorAll(`div.options`);
82
+ try { e.target.querySelector("div.item.selected").classList.remove("selected") } catch(e) {}
83
+ const item = options[e.detail.item];
84
+ if(item != null) {
85
+ if(e.detail.status)
86
+ item.classList.add("selected");
87
+ else
88
+ item.classList.remove("selected");
89
+ }
90
+ })
91
+
92
+ this.querySelectorAll("div.options.active").forEach(element => {
93
+ element.addEventListener("click", e => {
94
+ this.querySelector("div.options.selected").classList.remove("selected");
95
+ element.classList.add("selected");
96
+ })
97
+ })
68
98
  }
69
99
 
70
100
  setUrl(url){
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixflow-upgrade-planning",
3
- "version": "1.4.1",
3
+ "version": "1.4.3",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/style.css CHANGED
@@ -50,10 +50,41 @@ pixflow-upgrade-planning div window-element img.close {
50
50
  right: 20px;
51
51
  }
52
52
  pixflow-upgrade-planning div window-element img.reward {
53
- width: 50%;
53
+ width: 33.8645418327%;
54
54
  margin: 10px 0;
55
55
  }
56
- pixflow-upgrade-planning div window-element ul li {
56
+ pixflow-upgrade-planning div window-element div.options {
57
+ background-color: #1D1D1D;
58
+ border-radius: 27px;
59
+ padding: 0 20px;
60
+ margin-bottom: 10px;
61
+ width: 290px;
62
+ display: none;
63
+ }
64
+ pixflow-upgrade-planning div window-element div.options div {
65
+ display: flex;
66
+ justify-content: space-between;
67
+ align-items: center;
68
+ }
69
+ pixflow-upgrade-planning div window-element div.options div div.item {
70
+ background-image: url(./node_modules/pixflow-upgrade-planning/images/inactive.svg);
71
+ width: 24px;
72
+ height: 24px;
73
+ }
74
+ pixflow-upgrade-planning div window-element div.options.active {
75
+ display: block;
76
+ }
77
+ pixflow-upgrade-planning div window-element div.options.selected {
78
+ border: 2px solid #FFFFFF;
79
+ }
80
+ pixflow-upgrade-planning div window-element div.options.selected div.item {
81
+ background-image: url(./node_modules/pixflow-upgrade-planning/images/active.svg);
82
+ }
83
+ pixflow-upgrade-planning div window-element div.options ul {
84
+ margin: 0;
85
+ padding: 0;
86
+ }
87
+ pixflow-upgrade-planning div window-element div.options ul li {
57
88
  display: flex;
58
89
  align-items: center;
59
90
  list-style-type: none;
@@ -66,7 +97,7 @@ pixflow-upgrade-planning div window-element ul li {
66
97
  color: #FFFFFF;
67
98
  margin: 20px 0;
68
99
  }
69
- pixflow-upgrade-planning div window-element ul li > img {
100
+ pixflow-upgrade-planning div window-element div.options ul li > img {
70
101
  margin-right: 10px;
71
102
  }
72
103
  pixflow-upgrade-planning div window-element div.go-premium-btn {
package/style.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAAA;EACI;;AACA;EACI;;AAGA;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;EACA;;AAEJ;EACI;EACA;;AAGA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AAIZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"style.css"}
1
+ {"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAAA;EACI;;AACA;EACI;;AAGA;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;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AAGR;EACI;;AAEJ;EACI;;AACA;EACI;;AAGR;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AAKhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"style.css"}
package/style.scss CHANGED
@@ -49,24 +49,53 @@ pixflow-upgrade-planning {
49
49
  right: 20px;
50
50
  }
51
51
  img.reward {
52
- width: 50%;
52
+ width: calc(170 / 502 * 100%);
53
53
  margin: 10px 0;
54
54
  }
55
- ul {
56
- li {
55
+ div.options {
56
+ background-color: #1D1D1D;
57
+ border-radius: 27px;
58
+ padding: 0 20px;
59
+ margin-bottom: 10px;
60
+ width: 290px;
61
+ display: none;
62
+ div {
57
63
  display: flex;
64
+ justify-content: space-between;
58
65
  align-items: center;
59
- list-style-type: none;
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
- > img {
69
- margin-right: 10px;
66
+ div.item {
67
+ background-image: url(./node_modules/pixflow-upgrade-planning/images/inactive.svg);
68
+ width: 24px;
69
+ height: 24px;
70
+ }
71
+ }
72
+ &.active {
73
+ display: block;
74
+ }
75
+ &.selected {
76
+ border: 2px solid #FFFFFF;
77
+ div.item {
78
+ background-image: url(./node_modules/pixflow-upgrade-planning/images/active.svg);
79
+ }
80
+ }
81
+ ul {
82
+ margin: 0;
83
+ padding: 0;
84
+ li {
85
+ display: flex;
86
+ align-items: center;
87
+ list-style-type: none;
88
+ font-family: Inter;
89
+ font-weight: 400;
90
+ font-size: 16px;
91
+ line-height: 100%;
92
+ letter-spacing: 0px;
93
+ text-transform: capitalize;
94
+ color: #FFFFFF;
95
+ margin: 20px 0;
96
+ > img {
97
+ margin-right: 10px;
98
+ }
70
99
  }
71
100
  }
72
101
  }
package/template.html CHANGED
@@ -4,30 +4,41 @@
4
4
  <img src="./node_modules/pixflow-upgrade-planning/images/close.svg" class="close">
5
5
  <div class="title">+8,000 Premium assets just for $14.99/mo</div>
6
6
  <img src="./node_modules/pixflow-upgrade-planning/images/reward.png" class="reward">
7
- <ul>
8
- <li>
9
- <img src="./node_modules/pixflow-upgrade-planning/images/item-style.svg">
10
- <div>+8,000 Premium Assets</div>
11
- </li>
12
- <li>
13
- <img src="./node_modules/pixflow-upgrade-planning/images/item-style.svg">
14
- <div>Up to 25,000 AI Credits/Mo</div></li>
15
- <li>
16
- <img src="./node_modules/pixflow-upgrade-planning/images/item-style.svg">
17
- <div>Full Access to Video Templates</div>
18
- </li>
19
- <li>
20
- <img src="./node_modules/pixflow-upgrade-planning/images/item-style.svg">
21
- <div>Full Access To Sound Effects</div>
22
- </li>
23
- <li>
24
- <img src="./node_modules/pixflow-upgrade-planning/images/item-style.svg">
25
- <div>Full Access to Graphic templates</div>
26
- </li><li>
27
- <img src="./node_modules/pixflow-upgrade-planning/images/item-style.svg">
28
- <div>License With Worldwide Coverage</div>
29
- </li>
30
- </ul>
31
- <div class="go-premium-btn">Go Unlimited from $14.99/mo</div>
7
+ <div class="options">
8
+ <div>
9
+ <p>Single Template for $5</p>
10
+ <div class="item"></div>
11
+ </div>
12
+ <ul>
13
+ <li>
14
+ <img src="./node_modules/pixflow-upgrade-planning/images/item-style.svg">
15
+ <div>One time purchase <span class="title"></span></div>
16
+ </li>
17
+ </ul>
18
+ </div>
19
+ <div class="options active selected">
20
+ <div>
21
+ <p>Pixflow Max $29.99/mo</p>
22
+ <div class="item"></div>
23
+ </div>
24
+ <ul>
25
+ <li>
26
+ <img src="./node_modules/pixflow-upgrade-planning/images/item-style.svg">
27
+ <div>+8,000 Premium Assets</div>
28
+ </li>
29
+ <li>
30
+ <img src="./node_modules/pixflow-upgrade-planning/images/item-style.svg">
31
+ <div>Up to 25,000 AI Credits/Mo</div></li>
32
+ <li>
33
+ <img src="./node_modules/pixflow-upgrade-planning/images/item-style.svg">
34
+ <div>Full Access to Graphic templates</div>
35
+ </li>
36
+ <li>
37
+ <img src="./node_modules/pixflow-upgrade-planning/images/item-style.svg">
38
+ <div>Full Access to Video Templates</div>
39
+ </li>
40
+ </ul>
41
+ </div>
42
+ <div class="go-premium-btn">Continue to website</div>
32
43
  </window-element>
33
44
  </div>