-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
159 lines (149 loc) · 9.34 KB
/
index.html
File metadata and controls
159 lines (149 loc) · 9.34 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<h3>superhero-utils example using plain js</h3>
Other examples:
<a href="./react-unpkg.html">react unpkg</a>, <a href="./react-vite/dist/">react vite</a>,
<a href="./vue-unpkg.html">vue unpkg</a>,
<a href="./vue-vite/dist/">vue vite</a>
<hr />
<link rel="stylesheet" href="./superhero-utils/index.css" />
<link rel="module" href="./superhero-utils/index-without-styles.js" />
<superhero-button
target="ak_gvxNbZf5CuxYVfcUFoKAP4geZatWaC2Yy4jpx5vZoCKank4Gc"
size="icon"
></superhero-button>
<superhero-button target="2707" size="small"></superhero-button>
<superhero-button target="nancyismyname.chain" size="medium"></superhero-button>
<superhero-button
target="ak_gvxNbZf5CuxYVfcUFoKAP4geZatWaC2Yy4jpx5vZoCKank4Gc"
size="large"
></superhero-button>
<hr />
<button class="ensure-paid">Ensure paid</button>
<button class="reset-paid-state">Reset paid state</button>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in ligula sit amet libero
blandit laoreet luctus scelerisque eros. Donec nunc tortor, condimentum eu imperdiet ac, ornare ac
leo. Nullam non nulla non massa hendrerit tempus. Donec imperdiet euismod lacus eu commodo. In
pellentesque ipsum sed mi iaculis vestibulum. Mauris quis blandit est. Ut lacinia quam sit amet
dapibus pellentesque. Donec pretium at erat sed elementum.
</p>
<p>
Cras vitae erat at sapien pretium scelerisque at a odio. Aenean pulvinar tellus sit amet posuere
porta. Sed vel efficitur nisl, a sollicitudin enim. Quisque eu velit id leo interdum ultrices. Nam
vulputate lectus nec neque efficitur lobortis. In vehicula leo id ligula varius, ac lobortis lorem
dictum. Proin dignissim lobortis massa, non facilisis nisi auctor vel. Praesent eget molestie
mauris, vel vehicula velit. In hac habitasse platea dictumst. Aenean molestie blandit pulvinar.
</p>
<p>
Vestibulum finibus sagittis nulla nec scelerisque. Duis libero dui, viverra vitae ipsum sit amet,
congue lacinia lorem. Etiam porta quis nisi ut consequat. In hac habitasse platea dictumst. Nunc
dapibus condimentum tempor. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Suspendisse non erat vitae velit semper elementum. Donec eleifend dictum
dui, in ultrices nisi lobortis id. Integer sit amet luctus mauris. Vivamus a lacus non augue
pulvinar dapibus in a neque. Morbi semper convallis justo quis aliquam. Cras at blandit felis, at
porta magna. Maecenas egestas purus purus, vel fringilla massa iaculis eu. In at eleifend quam.
Nulla vitae metus ex. Nunc eu augue ut sem tincidunt volutpat vitae ac orci.
</p>
<p>
Sed eu convallis nisi. Proin aliquam diam eget risus venenatis pharetra. Sed varius commodo mauris
eu accumsan. Donec erat tellus, vestibulum in efficitur non, aliquet eu leo. Aenean bibendum risus
leo, ac consequat urna gravida ut. Proin ut justo eget ligula tempor euismod. Sed nec dui at est
tristique ultrices et eu massa.
</p>
<p>
Suspendisse ut tempus nibh. Fusce placerat neque lacinia mi mattis hendrerit. Phasellus blandit
sit amet nibh sed molestie. Praesent vulputate imperdiet mauris vitae lobortis. Interdum et
malesuada fames ac ante ipsum primis in faucibus. Interdum et malesuada fames ac ante ipsum primis
in faucibus. Mauris in tellus lacinia, imperdiet diam sit amet, porta nisl. In vehicula in elit ac
dignissim. Curabitur vehicula sollicitudin molestie. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Donec convallis non odio a commodo.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in ligula sit amet libero
blandit laoreet luctus scelerisque eros. Donec nunc tortor, condimentum eu imperdiet ac, ornare ac
leo. Nullam non nulla non massa hendrerit tempus. Donec imperdiet euismod lacus eu commodo. In
pellentesque ipsum sed mi iaculis vestibulum. Mauris quis blandit est. Ut lacinia quam sit amet
dapibus pellentesque. Donec pretium at erat sed elementum.
</p>
<p>
Cras vitae erat at sapien pretium scelerisque at a odio. Aenean pulvinar tellus sit amet posuere
porta. Sed vel efficitur nisl, a sollicitudin enim. Quisque eu velit id leo interdum ultrices. Nam
vulputate lectus nec neque efficitur lobortis. In vehicula leo id ligula varius, ac lobortis lorem
dictum. Proin dignissim lobortis massa, non facilisis nisi auctor vel. Praesent eget molestie
mauris, vel vehicula velit. In hac habitasse platea dictumst. Aenean molestie blandit pulvinar.
</p>
<p>
Vestibulum finibus sagittis nulla nec scelerisque. Duis libero dui, viverra vitae ipsum sit amet,
congue lacinia lorem. Etiam porta quis nisi ut consequat. In hac habitasse platea dictumst. Nunc
dapibus condimentum tempor. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Suspendisse non erat vitae velit semper elementum. Donec eleifend dictum
dui, in ultrices nisi lobortis id. Integer sit amet luctus mauris. Vivamus a lacus non augue
pulvinar dapibus in a neque. Morbi semper convallis justo quis aliquam. Cras at blandit felis, at
porta magna. Maecenas egestas purus purus, vel fringilla massa iaculis eu. In at eleifend quam.
Nulla vitae metus ex. Nunc eu augue ut sem tincidunt volutpat vitae ac orci.
</p>
<p>
Sed eu convallis nisi. Proin aliquam diam eget risus venenatis pharetra. Sed varius commodo mauris
eu accumsan. Donec erat tellus, vestibulum in efficitur non, aliquet eu leo. Aenean bibendum risus
leo, ac consequat urna gravida ut. Proin ut justo eget ligula tempor euismod. Sed nec dui at est
tristique ultrices et eu massa.
</p>
<p>
Suspendisse ut tempus nibh. Fusce placerat neque lacinia mi mattis hendrerit. Phasellus blandit
sit amet nibh sed molestie. Praesent vulputate imperdiet mauris vitae lobortis. Interdum et
malesuada fames ac ante ipsum primis in faucibus. Interdum et malesuada fames ac ante ipsum primis
in faucibus. Mauris in tellus lacinia, imperdiet diam sit amet, porta nisl. In vehicula in elit ac
dignissim. Curabitur vehicula sollicitudin molestie. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Donec convallis non odio a commodo.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in ligula sit amet libero
blandit laoreet luctus scelerisque eros. Donec nunc tortor, condimentum eu imperdiet ac, ornare ac
leo. Nullam non nulla non massa hendrerit tempus. Donec imperdiet euismod lacus eu commodo. In
pellentesque ipsum sed mi iaculis vestibulum. Mauris quis blandit est. Ut lacinia quam sit amet
dapibus pellentesque. Donec pretium at erat sed elementum.
</p>
<p>
Cras vitae erat at sapien pretium scelerisque at a odio. Aenean pulvinar tellus sit amet posuere
porta. Sed vel efficitur nisl, a sollicitudin enim. Quisque eu velit id leo interdum ultrices. Nam
vulputate lectus nec neque efficitur lobortis. In vehicula leo id ligula varius, ac lobortis lorem
dictum. Proin dignissim lobortis massa, non facilisis nisi auctor vel. Praesent eget molestie
mauris, vel vehicula velit. In hac habitasse platea dictumst. Aenean molestie blandit pulvinar.
</p>
<p>
Vestibulum finibus sagittis nulla nec scelerisque. Duis libero dui, viverra vitae ipsum sit amet,
congue lacinia lorem. Etiam porta quis nisi ut consequat. In hac habitasse platea dictumst. Nunc
dapibus condimentum tempor. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Suspendisse non erat vitae velit semper elementum. Donec eleifend dictum
dui, in ultrices nisi lobortis id. Integer sit amet luctus mauris. Vivamus a lacus non augue
pulvinar dapibus in a neque. Morbi semper convallis justo quis aliquam. Cras at blandit felis, at
porta magna. Maecenas egestas purus purus, vel fringilla massa iaculis eu. In at eleifend quam.
Nulla vitae metus ex. Nunc eu augue ut sem tincidunt volutpat vitae ac orci.
</p>
<p>
Sed eu convallis nisi. Proin aliquam diam eget risus venenatis pharetra. Sed varius commodo mauris
eu accumsan. Donec erat tellus, vestibulum in efficitur non, aliquet eu leo. Aenean bibendum risus
leo, ac consequat urna gravida ut. Proin ut justo eget ligula tempor euismod. Sed nec dui at est
tristique ultrices et eu massa.
</p>
<p>
Suspendisse ut tempus nibh. Fusce placerat neque lacinia mi mattis hendrerit. Phasellus blandit
sit amet nibh sed molestie. Praesent vulputate imperdiet mauris vitae lobortis. Interdum et
malesuada fames ac ante ipsum primis in faucibus. Interdum et malesuada fames ac ante ipsum primis
in faucibus. Mauris in tellus lacinia, imperdiet diam sit amet, porta nisl. In vehicula in elit ac
dignissim. Curabitur vehicula sollicitudin molestie. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Donec convallis non odio a commodo.
</p>
<script type="module">
import { ensurePaid } from './superhero-utils/index-without-styles.js';
const target = 'ak_gvxNbZf5CuxYVfcUFoKAP4geZatWaC2Yy4jpx5vZoCKank4Gc';
// Initialize a superhero-button appearing dynamically
setTimeout(function () {
var btn = document.createElement('superhero-button');
btn.setAttribute('target', target);
document.body.appendChild(btn);
}, 5000);
document.querySelector('.ensure-paid').addEventListener('click', () => ensurePaid(target));
document
.querySelector('.reset-paid-state')
.addEventListener('click', () => delete localStorage['superhero-paywall-paid-targets']);
</script>