@things-factory/operato-tools 10.0.0-beta.3 → 10.0.0-beta.31
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.
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
import '@material/web/icon/icon.js'
|
|
2
|
+
import '@material/web/button/text-button.js'
|
|
3
|
+
import '@material/web/button/elevated-button.js'
|
|
4
|
+
|
|
5
|
+
import { css, html, LitElement } from 'lit'
|
|
6
|
+
import { customElement, property, query } from 'lit/decorators.js'
|
|
7
|
+
import { ifDefined } from 'lit/directives/if-defined.js'
|
|
8
|
+
|
|
9
|
+
import { i18next, localize } from '@operato/i18n'
|
|
10
|
+
|
|
11
|
+
@customElement('home-page')
|
|
12
|
+
export class HomePage extends localize(i18next)(LitElement) {
|
|
13
|
+
static styles = [
|
|
14
|
+
css`
|
|
15
|
+
:host {
|
|
16
|
+
display: block;
|
|
17
|
+
position: relative;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.signin {
|
|
21
|
+
position: absolute;
|
|
22
|
+
right: 20px;
|
|
23
|
+
top: 10px;
|
|
24
|
+
display: inline-block;
|
|
25
|
+
padding: 12px 24px;
|
|
26
|
+
font-size: 16px;
|
|
27
|
+
font-weight: bold;
|
|
28
|
+
color: var(--md-sys-color-on-tertiary-container);
|
|
29
|
+
background-color: var(--md-sys-color-tertiary-container);
|
|
30
|
+
border: none;
|
|
31
|
+
border-radius: 4px;
|
|
32
|
+
text-align: center;
|
|
33
|
+
text-decoration: none;
|
|
34
|
+
transition:
|
|
35
|
+
background-color 0.3s,
|
|
36
|
+
transform 0.3s;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.signin:hover {
|
|
40
|
+
color: var(--md-sys-color-tertiary-container);
|
|
41
|
+
background-color: var(--md-sys-color-on-tertiary-container);
|
|
42
|
+
transform: translateY(-2px);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.signin:active {
|
|
46
|
+
color: var(--md-sys-color-on-tertiary-container);
|
|
47
|
+
background-color: var(--md-sys-color-tertiary-container);
|
|
48
|
+
transform: translateY(0);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
[message] {
|
|
52
|
+
background-color: var(--md-sys-color-secondary-container);
|
|
53
|
+
padding: 60px 50px 0 50px;
|
|
54
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
55
|
+
text-align: center;
|
|
56
|
+
font-size: 20px;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
[message] strong {
|
|
60
|
+
display: block;
|
|
61
|
+
font-size: 2.5rem;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
[message] img {
|
|
65
|
+
width: 800px;
|
|
66
|
+
max-width: 90%;
|
|
67
|
+
display: block;
|
|
68
|
+
margin: auto;
|
|
69
|
+
margin-top: -15px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
[ticket] {
|
|
73
|
+
display: grid;
|
|
74
|
+
grid-template-columns: 96px 1fr;
|
|
75
|
+
width: 450px;
|
|
76
|
+
margin: auto;
|
|
77
|
+
margin-top: -20px;
|
|
78
|
+
margin-bottom: 60px;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
[brand] {
|
|
82
|
+
display: flex;
|
|
83
|
+
justify-content: center;
|
|
84
|
+
align-items: center;
|
|
85
|
+
border-radius: 12px;
|
|
86
|
+
overflow: hidden;
|
|
87
|
+
background-color: var(--md-sys-color-primary);
|
|
88
|
+
box-shadow: var(--box-shadow);
|
|
89
|
+
border-right: 3px dotted var(--md-sys-color-secondary-container);
|
|
90
|
+
text-align: center;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
[ticket] [content] {
|
|
94
|
+
border-radius: 12px;
|
|
95
|
+
background-color: var(--md-sys-color-tertiary-container);
|
|
96
|
+
padding: var(--spacing-medium) var(--spacing-large);
|
|
97
|
+
box-shadow: var(--box-shadow);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
fieldset {
|
|
101
|
+
border: none;
|
|
102
|
+
margin: 0;
|
|
103
|
+
padding: 0;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
legend {
|
|
107
|
+
margin: 0;
|
|
108
|
+
padding: var(--spacing-small) 0 var(--spacing-medium) 0;
|
|
109
|
+
font-weight: bold;
|
|
110
|
+
color: var(--legend-color);
|
|
111
|
+
text-transform: uppercase;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
input {
|
|
115
|
+
border: var(--md-sys-color-outline);
|
|
116
|
+
border-radius: var(--border-radius);
|
|
117
|
+
padding: var(--spacing-medium);
|
|
118
|
+
font: var(--input-font);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
input[type='text'] {
|
|
122
|
+
min-width: 190px;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
input:focus {
|
|
126
|
+
outline: none;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
@media screen and (max-width: 480px) {
|
|
130
|
+
[message] {
|
|
131
|
+
padding: 60px 10px 0 10px;
|
|
132
|
+
text-align: center;
|
|
133
|
+
font-size: 14px;
|
|
134
|
+
}
|
|
135
|
+
[message] strong {
|
|
136
|
+
margin-bottom: 15px;
|
|
137
|
+
font-size: 1.6rem;
|
|
138
|
+
line-height: 1.2em;
|
|
139
|
+
}
|
|
140
|
+
[message] img {
|
|
141
|
+
max-width: 100%;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
legend {
|
|
145
|
+
padding: 0;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
[ticket] {
|
|
149
|
+
display: grid;
|
|
150
|
+
grid-template-columns: 0 1fr;
|
|
151
|
+
width: 90%;
|
|
152
|
+
margin: auto;
|
|
153
|
+
margin-top: -15px;
|
|
154
|
+
margin-bottom: 60px;
|
|
155
|
+
}
|
|
156
|
+
[brand] {
|
|
157
|
+
border: 0;
|
|
158
|
+
}
|
|
159
|
+
[content] {
|
|
160
|
+
border: 1px solid var(--md-sys-color-primary);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
fieldset {
|
|
164
|
+
text-align: center;
|
|
165
|
+
}
|
|
166
|
+
input[type='text'] {
|
|
167
|
+
width: calc(100% - 20px);
|
|
168
|
+
margin: var(--spacing-small) 0 var(--spacing-medium) 0;
|
|
169
|
+
text-align: center;
|
|
170
|
+
}
|
|
171
|
+
fieldset md-text-button {
|
|
172
|
+
width: 100%;
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
`
|
|
176
|
+
]
|
|
177
|
+
|
|
178
|
+
@property({ type: String, attribute: true }) tagline?: string
|
|
179
|
+
@property({ type: String, attribute: true }) explanation1?: string
|
|
180
|
+
@property({ type: String, attribute: true }) explanation2?: string
|
|
181
|
+
|
|
182
|
+
private _applicationMeta?: { icon?: string; title?: string; description?: string }
|
|
183
|
+
|
|
184
|
+
render() {
|
|
185
|
+
var { icon, title } = this.applicationMeta
|
|
186
|
+
|
|
187
|
+
const tagline = this.tagline || `Join the ${title} Business Program`
|
|
188
|
+
const explanation1 = this.explanation1 || 'Create your free account today.'
|
|
189
|
+
const explanation2 = this.explanation2 || 'Everything you need to go from where you are, to where you want to be.'
|
|
190
|
+
|
|
191
|
+
return html`
|
|
192
|
+
<a
|
|
193
|
+
class="signin"
|
|
194
|
+
@click=${e => {
|
|
195
|
+
e.preventDefault()
|
|
196
|
+
window.location.href = '/auth/signin'
|
|
197
|
+
}}
|
|
198
|
+
>
|
|
199
|
+
${i18next.t('button.sign_in')}</a
|
|
200
|
+
>
|
|
201
|
+
|
|
202
|
+
<div message>
|
|
203
|
+
<strong>${tagline}</strong> ${explanation1} <br />
|
|
204
|
+
${explanation2}
|
|
205
|
+
<img src="/assets/images/invitation.png" />
|
|
206
|
+
</div>
|
|
207
|
+
|
|
208
|
+
<div ticket>
|
|
209
|
+
<div brand><img src=${ifDefined(icon)} /></div>
|
|
210
|
+
<div content>
|
|
211
|
+
<form action="/auth/join" accept-charset="utf-8" name="join" method="post">
|
|
212
|
+
<fieldset>
|
|
213
|
+
<legend>${title} invitation ticket</legend>
|
|
214
|
+
<input type="email" name="email" placeholder="Enter your email address" />
|
|
215
|
+
<input type="submit" value="join now" />
|
|
216
|
+
</fieldset>
|
|
217
|
+
</form>
|
|
218
|
+
</div>
|
|
219
|
+
</div>
|
|
220
|
+
`
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
@query('input[type=email]') firstInput!: HTMLInputElement
|
|
224
|
+
|
|
225
|
+
firstUpdated() {
|
|
226
|
+
setTimeout(() => {
|
|
227
|
+
this.firstInput.focus()
|
|
228
|
+
}, 100)
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
get applicationMeta() {
|
|
232
|
+
if (!this._applicationMeta) {
|
|
233
|
+
var iconLink: HTMLLinkElement | null = document.querySelector('link[rel="application-icon"]')
|
|
234
|
+
var titleMeta: HTMLMetaElement | null = document.querySelector('meta[name="application-name"]')
|
|
235
|
+
var descriptionMeta: HTMLMetaElement | null = document.querySelector('meta[name="application-description"]')
|
|
236
|
+
|
|
237
|
+
this._applicationMeta = {
|
|
238
|
+
icon: iconLink?.href,
|
|
239
|
+
title: titleMeta ? titleMeta.content : 'Things Factory',
|
|
240
|
+
description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
return this._applicationMeta
|
|
245
|
+
}
|
|
246
|
+
}
|