Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 25b380b

Browse files
FliPPeDroundFliPPeDround
committed
feat(client): Update the style and content of the development mode loading page
1 parent 315ba52 commit 25b380b

2 files changed

Lines changed: 232 additions & 39 deletions

File tree

‎packages/vite-plugin/src/client/es/loading-page-script.ts‎

Lines changed: 231 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -5,39 +5,237 @@
55

66
const VITE_URL = '%PROTO%://localhost:%PORT%'
77

8-
document.body.innerHTML = `
9-
<div
10-
id="app"
11-
style="
12-
border: 1px solid #ddd;
13-
padding: 20px;
14-
border-radius: 5px;
15-
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
16-
"
17-
>
18-
<h1 style="color: #333">Vite Dev Mode</h1>
19-
<p style="color: #666">
20-
Cannot connect to the Vite Dev Server on <a href="${VITE_URL}">${VITE_URL}</a>
21-
</p>
22-
<p style="color: #666">
23-
Double-check that Vite is working and reload the extension.
24-
</p>
25-
<p style="color: #666">
26-
This page will close when the extension reloads.
27-
</p>
28-
<button
29-
style="
30-
padding: 10px 20px;
31-
border: none;
32-
background-color: #007bff;
33-
color: #fff;
34-
border-radius: 5px;
35-
cursor: pointer;
36-
"
37-
>
38-
Reload Extension
39-
</button>
40-
</div>`
8+
document.body.innerHTML = /* html */ `
9+
<style>
10+
:root {
11+
color-scheme: light;
12+
--ink: #111827;
13+
--muted: #5f6b7a;
14+
--muted-subtle: rgba(95, 107, 122, 0.7);
15+
--muted-hint: rgba(95, 107, 122, 0.6);
16+
--card: #ffffff;
17+
--badge-bg: rgba(17, 24, 39, 0.04);
18+
--accent: #ff6b2c;
19+
--accent-2: #2563eb;
20+
--link-underline: rgba(37, 99, 235, 0.45);
21+
--glow-1: rgba(37, 99, 235, 0.12);
22+
--glow-2: rgba(255, 107, 44, 0.1);
23+
--button-grad-1: #ff7a43;
24+
--button-grad-2: #ff9a73;
25+
--button-shadow: rgba(255, 107, 44, 0.18);
26+
--button-shadow-hover: rgba(255, 107, 44, 0.22);
27+
--pulse: rgba(255, 107, 44, 0.6);
28+
--pulse-ring: rgba(255, 107, 44, 0.5);
29+
}
30+
31+
@media (prefers-color-scheme: dark) {
32+
:root {
33+
color-scheme: dark;
34+
--ink: #e5e7eb;
35+
--muted: #a3aab5;
36+
--muted-subtle: rgba(163, 170, 181, 0.78);
37+
--muted-hint: rgba(163, 170, 181, 0.6);
38+
--card: #0f172a;
39+
--badge-bg: rgba(148, 163, 184, 0.16);
40+
--accent: #ff8a5a;
41+
--accent-2: #7aa2ff;
42+
--link-underline: rgba(122, 162, 255, 0.45);
43+
--glow-1: rgba(96, 165, 250, 0.14);
44+
--glow-2: rgba(251, 146, 60, 0.16);
45+
--button-grad-1: #f07b4d;
46+
--button-grad-2: #f39a76;
47+
--button-shadow: rgba(240, 123, 77, 0.16);
48+
--button-shadow-hover: rgba(240, 123, 77, 0.2);
49+
--pulse: rgba(255, 138, 90, 0.65);
50+
--pulse-ring: rgba(255, 138, 90, 0.5);
51+
}
52+
}
53+
54+
* {
55+
margin: 0;
56+
padding: 0;
57+
box-sizing: border-box;
58+
}
59+
60+
body {
61+
font-family: "IBM Plex Sans", "Inter", -apple-system, system-ui, sans-serif;
62+
color: var(--ink);
63+
background: transparent;
64+
width: 420px;
65+
height: 250px;
66+
margin: 0;
67+
padding: 0 !important;
68+
}
69+
70+
#app {
71+
background: var(--card);
72+
position: relative;
73+
overflow: hidden;
74+
display: flex;
75+
flex-direction: column;
76+
min-height: 100%;
77+
padding: 24px 24px 20px;
78+
gap: 14px;
79+
justify-content: center;
80+
}
81+
82+
#app::before {
83+
content: "";
84+
position: absolute;
85+
inset: 0;
86+
background:
87+
radial-gradient(240px 140px at 100% 0%, var(--glow-1), transparent 70%),
88+
radial-gradient(220px 140px at 0% 100%, var(--glow-2), transparent 70%);
89+
pointer-events: none;
90+
}
91+
92+
.header {
93+
position: relative;
94+
display: flex;
95+
flex-direction: column;
96+
gap: 6px;
97+
align-items: flex-start;
98+
padding-right: 96px;
99+
}
100+
101+
.header-text {
102+
display: flex;
103+
flex-direction: column;
104+
gap: 4px;
105+
}
106+
107+
.badge {
108+
display: inline-flex;
109+
align-items: center;
110+
gap: 8px;
111+
font-size: 10px;
112+
letter-spacing: 0.08em;
113+
text-transform: uppercase;
114+
color: var(--muted);
115+
background: var(--badge-bg);
116+
border-radius: 999px;
117+
padding: 6px 10px;
118+
white-space: nowrap;
119+
position: absolute;
120+
top: 0;
121+
right: 0;
122+
}
123+
124+
.pulse {
125+
width: 8px;
126+
height: 8px;
127+
border-radius: 50%;
128+
background: var(--accent);
129+
box-shadow: 0 0 0 0 var(--pulse);
130+
animation: pulse 1.6s ease-in-out infinite;
131+
}
132+
133+
h1 {
134+
font-size: clamp(18px, 4vw, 22px);
135+
letter-spacing: -0.02em;
136+
line-height: 1.25;
137+
}
138+
139+
p {
140+
margin: 0;
141+
color: var(--muted);
142+
font-size: 13px;
143+
line-height: 1.6;
144+
}
145+
146+
.subtle {
147+
color: var(--muted-subtle);
148+
font-size: 12px;
149+
}
150+
151+
a {
152+
color: var(--accent-2);
153+
text-decoration: none;
154+
border-bottom: 1px dashed var(--link-underline);
155+
}
156+
157+
.content {
158+
display: flex;
159+
flex-direction: column;
160+
gap: 10px;
161+
}
162+
163+
.footer {
164+
display: flex;
165+
flex-direction: column;
166+
gap: 10px;
167+
align-items: center;
168+
}
169+
170+
.actions {
171+
display: flex;
172+
flex-wrap: wrap;
173+
gap: 12px;
174+
justify-content: center;
175+
}
176+
177+
button {
178+
appearance: none;
179+
border: none;
180+
border-radius: 999px;
181+
background: linear-gradient(135deg, var(--button-grad-1), var(--button-grad-2));
182+
color: white;
183+
padding: 8px 14px;
184+
font-size: 12px;
185+
font-weight: 600;
186+
cursor: pointer;
187+
box-shadow: 0 8px 16px var(--button-shadow);
188+
transition: transform 160ms ease, box-shadow 160ms ease;
189+
}
190+
191+
button:hover {
192+
transform: translateY(-1px);
193+
box-shadow: 0 10px 20px var(--button-shadow-hover);
194+
}
195+
196+
button:focus-visible {
197+
outline: 2px solid var(--accent-2);
198+
outline-offset: 2px;
199+
}
200+
201+
.hint {
202+
font-size: 11px;
203+
color: var(--muted-hint);
204+
text-align: center;
205+
}
206+
207+
@keyframes pulse {
208+
0% { box-shadow: 0 0 0 0 var(--pulse-ring); }
209+
70% { box-shadow: 0 0 0 10px rgba(255, 107, 44, 0); }
210+
100% { box-shadow: 0 0 0 0 rgba(255, 107, 44, 0); }
211+
}
212+
</style>
213+
214+
<div id="app">
215+
<div class="header">
216+
<span class="badge"><span class="pulse"></span>dev server</span>
217+
<div class="header-text">
218+
<h1>CRXJS DEV MODE</h1>
219+
<p class="subtle">Connecting to the Vite dev server…</p>
220+
</div>
221+
</div>
222+
223+
<div class="content">
224+
<p>
225+
Cannot connect to <a href="${VITE_URL}">${VITE_URL}</a>.
226+
Make sure Vite is running, then reload the extension.
227+
</p>
228+
<p>This page will close automatically after the extension reloads.</p>
229+
</div>
230+
231+
<div class="footer">
232+
<div class="actions">
233+
<button>Reload Extension</button>
234+
</div>
235+
<div class="hint">Tip: if the URL is wrong, restart Vite so it picks the right port.</div>
236+
</div>
237+
</div>
238+
`
41239
document.body.querySelector('button')?.addEventListener('click', () => {
42240
chrome.runtime.reload()
43241
})

‎packages/vite-plugin/src/client/html/loading-page.html‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<title>Vite Dev Mode</title>
4+
<title>CRXJS DEV MODE</title>
55
<script src="%SCRIPT%" type="module"></script>
66
</head>
7-
<body
8-
style="font-family: Arial, sans-serif; padding: 20px; text-align: center"
9-
>
10-
<h1>Vite Dev Mode</h1>
11-
</body>
127
</html>

0 commit comments

Comments
 (0)