Skip to content

Commit 595c1c1

Browse files
stvncodestvncode
committed
Links color + add Dominic work
1 parent 036089b commit 595c1c1

File tree

7 files changed

+330
-38
lines changed

7 files changed

+330
-38
lines changed

‎src/components/details.ts‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,14 +39,24 @@ export class DetailsPage extends LitElement {
3939
static styles = css`
4040
:host {
4141
display: block;
42-
padding: 20px;
42+
padding-top: 20px;
4343
font-family:
4444
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
4545
}
4646
4747
.container {
4848
max-width: 1200px;
4949
margin: 0 auto;
50+
padding: 0 20px;
51+
}
52+
53+
a {
54+
color: #03a9f4;
55+
text-decoration: none;
56+
}
57+
58+
a:hover {
59+
text-decoration: underline;
5060
}
5161
5262
.back-button {

‎src/components/warning-card.ts‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { LitElement, css, html } from 'lit';
2+
import { customElement } from 'lit/decorators.js';
3+
4+
@customElement('warning-card')
5+
export class WarningCard extends LitElement {
6+
static styles = css`
7+
:host {
8+
display: block;
9+
}
10+
11+
.warning-container {
12+
margin: -20px 40px 20px 40px;
13+
}
14+
15+
.warning-card {
16+
background: #fff3e0;
17+
border: 1px solid #ffb74d;
18+
border-radius: 8px;
19+
padding: 24px;
20+
display: flex;
21+
gap: 16px;
22+
align-items: flex-start;
23+
}
24+
25+
.warning-icon {
26+
flex-shrink: 0;
27+
width: 24px;
28+
height: 24px;
29+
color: #eb9136;
30+
margin-top: 3px;
31+
}
32+
33+
.warning-content {
34+
flex: 1;
35+
}
36+
37+
.warning-title {
38+
margin: 0 0 8px 0;
39+
font-size: 1.1rem;
40+
font-weight: 600;
41+
color: #e16725;
42+
}
43+
44+
.warning-description {
45+
margin: 0;
46+
color: #5d4037;
47+
line-height: 1.5;
48+
}
49+
`;
50+
51+
render() {
52+
return html`
53+
<div class="warning-container">
54+
<div class="warning-card">
55+
<svg class="warning-icon" viewBox="0 0 24 24" fill="currentColor">
56+
<path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
57+
</svg>
58+
<div class="warning-content">
59+
<h3 class="warning-title">
60+
Your browser does not support Web Serial
61+
</h3>
62+
<p class="warning-description">
63+
Open this page in Google Chrome or Microsoft Edge instead.
64+
</p>
65+
</div>
66+
</div>
67+
</div>
68+
`;
69+
}
70+
}
71+
72+
declare global {
73+
interface HTMLElementTagNameMap {
74+
'warning-card': WarningCard;
75+
}
76+
}

‎src/pages/vpe-install.ts‎

Lines changed: 98 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { LitElement, css, html } from 'lit';
22
import { customElement } from 'lit/decorators.js';
33

44
import '../components/details.js';
5+
import '../components/warning-card.js';
56

67
@customElement('vpe-install')
78
export class VPEInstallPage extends LitElement {
@@ -10,9 +11,72 @@ export class VPEInstallPage extends LitElement {
1011
display: block;
1112
padding: 20px;
1213
}
14+
.back-button {
15+
display: inline-flex;
16+
align-items: center;
17+
gap: 8px;
18+
color: #03a9f4;
19+
text-decoration: none;
20+
padding: 8px 16px;
21+
border-radius: 8px;
22+
transition: all 0.2s ease;
23+
margin-bottom: 20px;
24+
background: #e3f2fd;
25+
}
26+
27+
.back-button:hover {
28+
background: #c0e1f8;
29+
}
30+
31+
.back-button svg {
32+
margin-top: 2px;
33+
width: 14px;
34+
height: 14px;
35+
}
36+
37+
.warning-card {
38+
background: #fff3e0;
39+
border: 1px solid #ffb74d;
40+
border-radius: 8px;
41+
padding: 24px;
42+
display: flex;
43+
gap: 16px;
44+
align-items: flex-start;
45+
}
46+
47+
.warning-icon {
48+
flex-shrink: 0;
49+
width: 24px;
50+
height: 24px;
51+
color: #eb9136;
52+
margin-top: 3px;
53+
}
54+
55+
.warning-content {
56+
flex: 1;
57+
}
58+
59+
.warning-title {
60+
margin: 0 0 8px 0;
61+
font-size: 1.1rem;
62+
font-weight: 600;
63+
color: #e16725;
64+
}
65+
66+
.warning-description {
67+
margin: 0;
68+
color: #5d4037;
69+
line-height: 1.5;
70+
}
1371
`;
1472

73+
private _goBack() {
74+
window.location.href = '/vpe/';
75+
}
76+
1577
render() {
78+
const isSerialUnavailable = !('serial' in navigator);
79+
1680
const config = {
1781
hero: {
1882
title: 'Install firmware',
@@ -32,11 +96,40 @@ export class VPEInstallPage extends LitElement {
3296
`,
3397
} as const;
3498

35-
return html`<details-page
36-
.config=${config}
37-
history-back
38-
back-href="/vpe"
39-
></details-page>`;
99+
return isSerialUnavailable
100+
? html` <a
101+
href="/"
102+
class="back-button"
103+
@click=${(e: Event) => {
104+
e.preventDefault();
105+
this._goBack();
106+
}}
107+
>
108+
<svg viewBox="0 0 16 16" fill="currentColor">
109+
<path
110+
d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"
111+
/>
112+
</svg>
113+
Back
114+
</a>
115+
<div class="warning-card">
116+
<svg class="warning-icon" viewBox="0 0 24 24" fill="currentColor">
117+
<path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
118+
</svg>
119+
<div class="warning-content">
120+
<h3 class="warning-title">
121+
Your browser does not support Web Serial
122+
</h3>
123+
<p class="warning-description">
124+
Open this page in Google Chrome or Microsoft Edge instead.
125+
</p>
126+
</div>
127+
</div>`
128+
: html`<details-page
129+
.config=${config}
130+
history-back
131+
back-href="/vpe"
132+
></details-page>`;
40133
}
41134
}
42135

‎src/pages/zwa2-install-original.ts‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,6 @@ export class Zwa2InstallOriginalPage extends LitElement {
1212
}
1313
`;
1414

15-
handleInstall() {
16-
window.open(
17-
'https://home-assistant.github.io/zwa2-toolbox/',
18-
'_blank',
19-
'noopener,noreferrer'
20-
);
21-
}
22-
2315
render() {
2416
const config = {
2517
hero: {
@@ -80,15 +72,16 @@ export class Zwa2InstallOriginalPage extends LitElement {
8072
</ol>
8173
<li>Install the ESP Serial Bridge firmware</li>
8274
</ol>
83-
<button class="install" @click=${this.handleInstall}>Install</button>
8475
`,
8576
} as const;
8677

87-
return html`<details-page
88-
.config=${config}
89-
history-back
90-
back-href="/zwa2"
91-
></details-page>`;
78+
return html`
79+
<details-page
80+
.config=${config}
81+
history-back
82+
back-href="/zwa2"
83+
></details-page>
84+
`;
9285
}
9386
}
9487

‎src/pages/zwa2-install-portable.ts‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,6 @@ export class Zwa2InstallPortablePage extends LitElement {
1212
}
1313
`;
1414

15-
handleInstall() {
16-
window.open(
17-
'https://home-assistant.github.io/zwa2-toolbox/',
18-
'_blank',
19-
'noopener,noreferrer'
20-
);
21-
}
22-
2315
render() {
2416
const config = {
2517
hero: {
@@ -94,7 +86,6 @@ export class Zwa2InstallPortablePage extends LitElement {
9486
button and follow the instructions to install:
9587
</li>
9688
</ol>
97-
<button class="install" @click=${this.handleInstall}>Install</button>
9889
9990
<h3>Troubleshooting</h3>
10091
<p>
@@ -130,11 +121,13 @@ export class Zwa2InstallPortablePage extends LitElement {
130121
`,
131122
} as const;
132123

133-
return html`<details-page
134-
.config=${config}
135-
history-back
136-
back-href="/zwa2"
137-
></details-page>`;
124+
return html`
125+
<details-page
126+
.config=${config}
127+
history-back
128+
back-href="/zwa2"
129+
></details-page>
130+
`;
138131
}
139132
}
140133

‎zwa2/install-portable.html‎

Lines changed: 65 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,86 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/favicon.png" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>ZWA2 - Device Toolbox</title>
8-
<script type="module" src="../src/pages/zwa2-install-portable.ts"></script>
7+
<title>Install Portable Z-Wave - ZWA2 - Device Toolbox</title>
8+
<script
9+
type="module"
10+
src="https://home-assistant.github.io/zwa2-toolbox/standalone/install-esphome-firmware.js"
11+
></script>
912
<script type="module" src="../src/components/app-header.ts"></script>
13+
<script type="module" src="../src/pages/zwa2-install-portable.ts"></script>
1014
<link
1115
rel="stylesheet"
1216
href="https://early.webawesome.com/[email protected]/dist/styles/webawesome.css"
1317
/>
1418
<style>
1519
@import url('../src/styles/shoelace.css');
1620
@import url('../src/styles/theme.css');
21+
1722
body {
1823
margin: 0;
24+
font-family:
25+
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
26+
--color-indigo-600: #03a9f4;
27+
--color-indigo-500: #0288d1;
28+
}
29+
.installer-wrapper {
30+
max-width: 1200px;
31+
margin: 0 auto;
32+
padding: 0 20px;
33+
}
34+
35+
.installer-card {
36+
background: white;
37+
border-radius: 12px;
38+
padding: 20px;
39+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
40+
margin-top: 20px;
41+
}
42+
43+
.installer-card install-esphome-firmware {
44+
width: 100%;
45+
border: none;
46+
min-height: 600px;
47+
border-radius: 8px;
48+
}
49+
50+
install-esphome-firmware .min-h-screen {
51+
min-height: auto !important;
52+
}
53+
54+
a {
55+
color: #03a9f4;
56+
text-decoration: none;
57+
}
58+
59+
a:hover {
60+
text-decoration: underline;
1961
}
2062
</style>
2163
</head>
2264
<body class="wa-palette-shoelace wa-theme-shoelace">
2365
<app-header></app-header>
2466
<zwa2-install-portable></zwa2-install-portable>
67+
<div class="installer-wrapper" id="installer-container">
68+
<div class="installer-card">
69+
<install-esphome-firmware></install-esphome-firmware>
70+
</div>
71+
</div>
72+
<script type="module">
73+
import '../src/components/warning-card.js';
74+
75+
const isSerialUnavailable = !('serial' in navigator);
76+
77+
if (isSerialUnavailable) {
78+
const installerContainer = document.getElementById(
79+
'installer-container'
80+
);
81+
installerContainer.className = '';
82+
installerContainer.innerHTML = '';
83+
84+
const warningCard = document.createElement('warning-card');
85+
installerContainer.appendChild(warningCard);
86+
}
87+
</script>
2588
</body>
2689
</html>

0 commit comments

Comments
 (0)