Files
proxycast/index.html
T
2026-06-08 01:49:36 +08:00

384 lines
11 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lime</title>
<script>
(() => {
try {
const params = new URLSearchParams(window.location.search);
const limeWindow = params.get("lime_window");
if (
limeWindow === "update-notification" ||
window.location.pathname.endsWith("/update-notification")
) {
document.documentElement.dataset.limeWindow = "update-notification";
}
if (params.get("nativeStartup") === "1") {
document.documentElement.dataset.limeNativeStartup = "1";
}
const locale = (navigator.languages?.[0] || navigator.language || "")
.toLowerCase()
.replace(/_/g, "-");
const startupLocale =
locale.startsWith("zh-tw") ||
locale.startsWith("zh-hk") ||
locale.startsWith("zh-mo") ||
locale.includes("hant")
? "zh-TW"
: locale.startsWith("en")
? "en-US"
: locale.startsWith("ja")
? "ja-JP"
: locale.startsWith("ko")
? "ko-KR"
: "zh-CN";
document.documentElement.dataset.limeStartupLocale = startupLocale;
} catch {
document.documentElement.dataset.limeStartupLocale = "zh-CN";
}
})();
</script>
<style>
:root {
color-scheme: light;
background: #f7fbf4;
}
html,
body,
#root {
width: 100%;
height: 100%;
min-height: 100%;
overflow: hidden;
}
body {
margin: 0;
background:
radial-gradient(
circle at 20% 18%,
rgba(132, 204, 22, 0.18),
transparent 30%
),
radial-gradient(
circle at 78% 12%,
rgba(250, 204, 21, 0.14),
transparent 28%
),
radial-gradient(
circle at 50% 84%,
rgba(34, 197, 94, 0.1),
transparent 28%
),
linear-gradient(180deg, #fbfff8 0%, #edf5ea 48%, #fbfff8 100%);
color: #0f172a;
font-family:
-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
sans-serif;
}
html[data-lime-window="update-notification"],
html[data-lime-window="update-notification"] body,
html[data-lime-window="update-notification"] #root {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
}
html[data-lime-window="update-notification"] .index-startup-shell {
display: none !important;
}
.index-startup-shell {
position: fixed;
inset: 0;
z-index: 2147483000;
display: none;
align-items: center;
justify-content: center;
overflow: hidden;
background:
radial-gradient(
circle at 20% 18%,
rgba(132, 204, 22, 0.18),
transparent 30%
),
radial-gradient(
circle at 78% 12%,
rgba(250, 204, 21, 0.14),
transparent 28%
),
radial-gradient(
circle at 50% 84%,
rgba(34, 197, 94, 0.1),
transparent 28%
),
linear-gradient(180deg, #fbfff8 0%, #edf5ea 48%, #fbfff8 100%);
-webkit-app-region: drag;
user-select: none;
transition: opacity 160ms ease;
pointer-events: none;
}
html[data-lime-native-startup="1"] .index-startup-shell {
display: flex;
}
html[data-lime-native-startup="1"][data-lime-native-startup-ready="1"]
.index-startup-shell {
opacity: 0;
}
.index-startup-orb {
position: absolute;
border-radius: 999px;
filter: blur(40px);
pointer-events: none;
}
.index-startup-orb-primary {
top: -72px;
left: -56px;
width: 280px;
height: 280px;
background: rgba(132, 204, 22, 0.22);
}
.index-startup-orb-secondary {
top: 8%;
right: -96px;
width: 340px;
height: 340px;
background: rgba(250, 204, 21, 0.14);
}
.index-startup-orb-tertiary {
bottom: -84px;
left: 18%;
width: 260px;
height: 260px;
background: rgba(34, 197, 94, 0.14);
}
.index-startup-stage {
position: relative;
z-index: 1;
width: min(860px, calc(100vw - 40px));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.index-startup-logo-stack {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: min(360px, 78vw);
height: min(360px, 78vw);
}
.index-startup-logo-glow {
position: absolute;
inset: 12% 12% 16%;
border-radius: 999px;
background: radial-gradient(
circle,
rgba(163, 230, 53, 0.4) 0%,
rgba(163, 230, 53, 0.16) 38%,
rgba(250, 204, 21, 0.1) 60%,
transparent 78%
);
filter: blur(26px);
}
.index-startup-logo {
position: relative;
width: clamp(240px, 34vw, 320px);
height: clamp(240px, 34vw, 320px);
object-fit: contain;
filter: drop-shadow(0 28px 44px rgba(15, 23, 42, 0.16));
}
.index-startup-copy {
position: relative;
margin-top: 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.index-startup-slogan {
position: relative;
margin: 22px 0 0;
max-width: 18em;
font-size: clamp(28px, 4vw, 38px);
line-height: 1.16;
font-weight: 700;
letter-spacing: 0;
color: #0f172a;
text-wrap: balance;
text-shadow:
0 0 18px rgba(163, 230, 53, 0.26),
0 10px 30px rgba(15, 23, 42, 0.1),
0 0 42px rgba(250, 204, 21, 0.14);
}
.index-startup-subtitle {
margin: 0;
max-width: min(33em, calc(100vw - 56px));
font-size: clamp(15px, 2vw, 18px);
line-height: 1.72;
font-weight: 500;
letter-spacing: 0;
color: #667085;
text-wrap: balance;
}
.index-startup-copy-locale {
display: none;
}
html[data-lime-startup-locale="zh-CN"] .index-startup-copy-zh-cn,
html[data-lime-startup-locale="zh-TW"] .index-startup-copy-zh-tw,
html[data-lime-startup-locale="en-US"] .index-startup-copy-en-us,
html[data-lime-startup-locale="ja-JP"] .index-startup-copy-ja-jp,
html[data-lime-startup-locale="ko-KR"] .index-startup-copy-ko-kr {
display: inline;
}
.index-startup-progress-track {
position: relative;
overflow: hidden;
margin-top: 30px;
width: min(320px, 72vw);
height: 8px;
border-radius: 999px;
background: linear-gradient(
90deg,
rgba(226, 232, 240, 0.82) 0%,
rgba(226, 232, 240, 0.96) 100%
);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.32),
0 12px 28px rgba(15, 23, 42, 0.08);
}
.index-startup-progress-bar {
position: absolute;
inset: 0 auto 0 0;
width: 44%;
border-radius: inherit;
background: linear-gradient(
90deg,
rgba(132, 204, 22, 0.96) 0%,
rgba(250, 204, 21, 0.9) 100%
);
box-shadow: 0 0 24px rgba(163, 230, 53, 0.35);
animation: index-startup-progress-shift 1.6s ease-in-out infinite;
}
@keyframes index-startup-progress-shift {
0% {
transform: translateX(-38%) scaleX(0.78);
opacity: 0.56;
}
50% {
opacity: 1;
transform: translateX(10%) scaleX(1);
}
100% {
transform: translateX(76%) scaleX(0.82);
opacity: 0.56;
}
}
@media (prefers-reduced-motion: reduce) {
.index-startup-progress-bar {
animation: none;
}
}
</style>
</head>
<body>
<div id="root"></div>
<main class="index-startup-shell" data-lime-startup-shell>
<div
class="index-startup-orb index-startup-orb-primary"
aria-hidden="true"
></div>
<div
class="index-startup-orb index-startup-orb-secondary"
aria-hidden="true"
></div>
<div
class="index-startup-orb index-startup-orb-tertiary"
aria-hidden="true"
></div>
<section class="index-startup-stage">
<div class="index-startup-logo-stack">
<div class="index-startup-logo-glow" aria-hidden="true"></div>
<img
class="index-startup-logo"
src="./logo.png"
alt="Lime"
data-lime-startup-logo
/>
</div>
<div class="index-startup-copy">
<h1 class="index-startup-slogan">
<span class="index-startup-copy-locale index-startup-copy-zh-cn"
>青柠一下,灵感即来</span
>
<span class="index-startup-copy-locale index-startup-copy-zh-tw"
>青檸一下,靈感即來</span
>
<span class="index-startup-copy-locale index-startup-copy-en-us"
>Tap Lime, inspiration arrives</span
>
<span class="index-startup-copy-locale index-startup-copy-ja-jp"
>Lime で、ひらめきをすぐに</span
>
<span class="index-startup-copy-locale index-startup-copy-ko-kr"
>Lime으로, 영감이 바로</span
>
</h1>
<p class="index-startup-subtitle">
<span class="index-startup-copy-locale index-startup-copy-zh-cn"
>从一句想法,到成稿、成图、成片、成事</span
>
<span class="index-startup-copy-locale index-startup-copy-zh-tw"
>從一句想法,到成稿、成圖、成片、成事</span
>
<span class="index-startup-copy-locale index-startup-copy-en-us"
>From one thought to polished copy, images, videos, and finished
work</span
>
<span class="index-startup-copy-locale index-startup-copy-ja-jp"
>一つのアイデアから、原稿・画像・動画・成果まで</span
>
<span class="index-startup-copy-locale index-startup-copy-ko-kr"
>한 줄의 아이디어에서 글, 이미지, 영상, 완성된 일까지</span
>
</p>
</div>
<div class="index-startup-progress-track" aria-hidden="true">
<div class="index-startup-progress-bar"></div>
</div>
</section>
</main>
<script src="./oem-runtime-config.js"></script>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>